发布时间:2022-01-06 14: 04: 58
本文章主要介绍使用UltraEdit制作“UltraEdit官网下载页面首页”的普通样式网页,无动作设计。旨在帮助你更好的去体会网页制作带来的实感。
一、制作前准备
如图1是将要仿制的网页样式。
首先新建一个文件夹,把要用到的图片都存放在里面。
然后打开UltraEdit新建一个文件,并保存到刚才新建的文件夹里,命名格式为“.html”结尾的文件(主要用于写入框架代码)。再次新建文件保存,命名格式为“.css”结尾的文件(主要用于写入样式代码)。
最后准备PS软件,用于电脑桌面像素的获取,以此得到网页各内容确切的像素位置,使用其它具备此功能的软件也可以。
以上便是制作网页前的准备事项。
二、网页页面分析
如图3,该网页页面主要有三个区域,我们可以用三个窗体来实现,然后每个窗体里面又有一些小的窗体或者文字内容,制作时再细分。
大致可以归纳为图4的框架。
三、代码实现
首先在“.html”文件中写入三个主要的窗体代码,并相应命名。
然后在每个窗体中又分别加入一些小窗体,以及将要用到的文字和图片,不用管实际网页中的排面,先把这些要显示的内容全加上,注意分好区域,在相应的区域添加。
此时打开浏览器可以得到如图7的效果。
最后就是调整这些内容的显示位置,美化排面,这个步骤主要在“.css”文件中完成。
因为在“.html”文件中已经对每个窗体、框架进行命名,此时在“.css”中直接操作这些名称对应的窗体或文字就可以了,样式的修改调用“样式编辑器”来完成。主要修改的内容包括颜色、字体样式、显示位置等。如图8是最终制作的完整CSS代码。
最后打开浏览器查看效果,虽然是粗仿,但样式已经体现(只体现这一页,下划之后的内容未制作)。
在制作网页时的两个关键之处是框架结构预设以及HTML代码和CSS代码的分离。前者能够让我们后续的制作富有条理,避免出现返回修改代码时结构有过大的变动;后者让代码的书写与阅读更容易,保证效率的同时避免代码量过多分不清各代码区间。
以上便是使用UltraEdit制作网页的一个实例演示,实践往往比理论来得深刻,自己动手做一做吧!
在熟知UltraEdit各功能的情况下,制作网页还是很方便的,当然UltraEdit不仅仅只能制作网页,它还能完成很多其它的任务,欢迎前往UltraEdit中文网站下载软件试用。
作者:零缘
展开阅读全文
︾
读者也喜欢这些内容:
UltraEdit安装激活换机教程 如何生成脱机许可证
UltraEdit是深受编程人士喜爱的代码编辑器之一,简洁干净的工作界面,标配的语法高亮功能,代码折叠等高效编程功能,并且,还支持HTML、PHP和JavaScript等语法,让代码编辑、文档内容处理更加方便。...
阅读全文 >
UE编辑器如何设置网络浏览器 UltraEdit怎么关闭网络浏览器
UltraEdit(UE)作为一款强大的文本编辑器,不仅具备编辑文本的功能,还提供了网络浏览器的设置,使用户能够在同一界面中方便地进行网页浏览。本文将详细介绍UE编辑器如何设置网络浏览器,UltraEdit怎么关闭网络浏览器的内容。...
阅读全文 >
UltraEdit设置默认高亮语言 UltraEdit设置背景颜色
在进行编程或文本编辑时,一个好的工具可以极大地提高我们的工作效率和舒适度。UltraEdit,作为一款被广大用户所喜爱的文本编辑器,具有丰富的自定义选项,能够根据用户的需求进行个性化设置。在本文中,我们将主要讨论UltraEdit设置默认高亮语言和UltraEdit设置背景颜色,以帮助你进一步优化你的UltraEdit使用体验。...
阅读全文 >
如何使用UltraEdit自动检测小说中的错别字
在撰写小说过程中,难免会出现一些错字、别字情况,尤其是关于小说人物的撰写上,有时候即便输错了也难以发觉出来,在这里教给大家一种使用UltraEdit编辑器自动识别错别字的办法吧。...
阅读全文 >