书签分享收藏举报版权申诉 / 6

立即下载加入VIP,免费下载

当前位置：首页 > 职业教育 > 中职中专 > 网页制作要领.docx

网页制作要领.docx

文档编号：3920542
上传时间：2022-11-26
格式：DOCX
页数：6
大小：22.16KB

网页制作要领.docx

《网页制作要领.docx》由会员分享，可在线阅读，更多相关《网页制作要领.docx（6页珍藏版）》请在冰豆网上搜索。

网页制作要领.docx

网页制作要领

如何让一个网站在第一时间抓住浏览者的眼球，提高流量？

网站的内容首当其冲，再配以精致的图片设计以及合理的布局排版，相信这样的网页可以让浏览者赏心悦目，而且在浏览时可以快速找到自己需要的内容，这样的网站才能吸引更多的读者。

网页是一个可以张显个性的舞台，特别是近几年来设计者的水平越来越高，更是突破了色彩布局的限制。

如何让网页又有个性又能符合更多人的审美观，对设计师就提出了更高的要求。

在设计网页时，需要掌握几个要领，下面这几条是我在设计过程中总结出来的，希望大家能有所帮助。

1、标题：

在网页中标题起着重要的作用，标题决定了一个网站的定位和内容取向。

标题尽量有概括性并且尽量做到简短易记有个性，最主要的一点，是要符合网站的主题思想和风格。

2、LOGO：

LOGO是与网站的整体风格相融并县城能够体现网站的类型、内容和风格的图片，配以标志网站的标志及文字，首先就让浏览者对网站的主题及功能有了一个初步的认知，常用的LOGO尺寸有三种：

“88*31”、“120*60”、“120*90”，LOGO可以制作成静态或动态，当然动态的LOGO更能吸引人们的注意。

3、网页导航：

每一个网页都有导航条，可以设计在网页的头部或左侧或右侧，不管设计在哪个位置，总是要放置在网页的显眼处，可以使用文字或图片来实现，导航是一个页面的精髓，是连通页面与页面之间的桥梁。

在导航栏目上不要设置太多，最好不要超过十个，层次上最好少于五层，主打栏目类别一般能直接从首页有所显示，并加以二级页面的链接。

4、图片处理：

图片也是体现一个设计者制作水平的标准，图片处理的原则是“精”、“简”。

“精”要求图片要处理的精细，特别是在一些小图标的处理上，要尽量精晰，线条明了，色彩搭配得当；“简”要求在保证图片质量的情况下尽量缩小图片的大小，因为图片的大小在很大程度上影响了网页的传输速度，常用的图片格式有jpg、gif、png。

在网页上多次使用同样的图像是一个加快浏览速度好的方法，因为一旦图像被载入，以后重新载入就会很快，大大提高了网页的浏览速度。

5、布局：

考虑浏览者显示器的分辩率，无论是采用1024*768还是800*600，都尽量让用户在浏览网页时可以看到全部的网页效果，并且不会在布局上错乱，因而网页页面整体的排版设计是不可忽略的，要合理地运用表格划分页面的各个区域，让网页井井有条，将主题表达清楚，有一点值得注意的是不要把整个网页都用图片或文字填充得特别紧密，适当的留有一些空白，留白是通过视觉上的手段给人带来心理上的轻松与快乐。

6、内容：

网站内容是搜索引擎优化的第一要素，注意网站内容要“原创”并且要“有价值”。

一个网站的内容必须与其标题相符，突出网站的自身个性，再将内容进行分类，通过合理的布局将这些内容表现出来，让读者一目了然，不致于在看了主页也不知道你这个网站是干什么用的，特别不要放一些跟网站主题丝毫无关的内容。

7、CSS样式设置：

在网页设计过程中CSS样式是不可或缺的一项设置，CSS样式表不需要多个，有的人网页代码中调用了好几个CSS样式表，如下段代码：

而每一个样式表时里就设置了二、三个样式，这样重复操作也加大了工作量更是没有必要的，特别是CSS样式表的名称，最好也不要随便命名，CSS文件也要单独放在一个文件夹下。

概述:

同样是做网页，为什么有的网页看上去就舒服，有的网页用户可能没等网页全部下载就关了，在这里色彩布局是一方面，更重要的是网页一些制作规范设计者没有注意，即便你的网站内容很好，但同样的内容，在不同的网页设计者手中总会有以不同的方式体现出来，“不成规矩，无以成方圆”，尽管现在的网页设计没有过多的限制，但是总是遵守一定的规范。

1、网站目录建立规范

一般在网站的根目录下建立images、js、css、media、temp几个子目录，html文件一般放在网站根目录下。

Øimages：

用来存放网页中用到的图片；

Øjs：

用来存放网页中用到的脚本文件；

Øcss：

用来存放CSS样式表文件；

Ømedia：

用来存放.swf、.avi、rmvb等多媒体文件；

Øtemp：

用来存放制作网页时的一些文字、图片、flash源文件等。

规范目录，一来可以方便资料的查找，二来在制作过程中也可一目了然，即使网站由几个设计者制作，在编辑网页文件时也会很方便的查找到需要的资料和文件。

注意：

一般目录、文件的名称全部采用小写英文字母、数字、下划线的组合，不得包含汉字、空格和特殊字符；目录的命名请尽量使用英文，避免使用拼音作为目录名称，因为汉语的同音字太多了，可能时间长了自己也记不住反而带来不便。

2、注释规范

在书写代码时也要注意一些规范，因为代码可能不光是制作者一个人看，可能以后还需要别人来阅读或修改，最重要的是这也是一个很好的习惯，如果一个页面中的代码很多，在以后阅读时就很方便找到这段代码所表述的功能。

3、CSS样式表书写规范

（1）a链接：

在中使用链接时，a:

linka:

visiteda:

hovera:

actived要按顺序书写，否则在网页显示时，特别是当网页中存在多个链接样式时，会有显示上的问题。

在代码中，每个样式中的一个属性一行，后面以英文输入状态下输入分号“;”。

（2）首行缩进

在网页排版中经常会遇到首行缩进，不建议使用空格或者全角空格来达到效果，规范的做法是在样式表中定义p{text-indent:

2em;}，然后给每一段加上

标记，在段尾加上

结束标记。

（3）字母、数字的字体设置

中英文混排时，我们尽可能的将英文和数字定义为Verdana和Arial两种字体，为了显示的效果更好，最好是将使用字母或数字的样式单独定义，不与“宋体”的样式混在一起用。

（4）行距

一般建议行距采用百分比来定义，如果用pt或px来定义，当样式改变时，行距不会相应比例变化。

常用的两个行距的值是“120%”、“150%”。

（5）字号设置

字号建议用点数pt和像素px来定义。

pt一般使用宋体的9pt和11pt。

px一般使用中文宋体12px和14px这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14px的字号比较合适。

而随着科技的发展，显示器在逐渐变大，分辨率在逐渐提高，14px的字已经不能满足人们的需要，此时可以使用16px或18px的字号，但是这两个字号不要在同一个页面中使用，在显示数字和字母时，18px宋体将数字和字母显示为粗体，视觉效果很突出，而16px宋体的显示更接近与12px、14px的显示效果，因为选用16px宋体作为正文更为合适，下图为各字号的显示效果。

不同字号的显示效果

注意：

汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号，所有的字号都应该用样式表来实现，禁止在页面中出现

>标记。

4、表格代码书写规范

对于单独的一个

来说，

对齐，

缩进两个半角空格，

中如果还有嵌套的表格，也缩进两个半角空格，如果结束标记应该与

中没有任何嵌套的表格，

处于同一行，不要换行。

而且属于同一个级别的

要靠左侧对齐。

在网页中插入表格之前，尽量选用最佳的方案，表格的嵌套尽量控制在三层以内，而且要尽量避免有“colspan”和“rowspan”两个标记，如果对html中表格的拆行和合并不是特别了解，在以后插入行或列时就会让整个页面的排版出现问题。

一个网页要尽量避免用整个一张大表格，如果这样，所有的内容都嵌套在这个大表格之内，主要因为浏览器在载入页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，而表格之中又嵌套了多层表格，那么当浏览者输入网址，他要先面对一片空白很长时间，然后所有的网页内容才同时出现。

如果必须这样做的话可以使用

标记，以便能够使这个大表格分块显示，减少空白的等待时间。

或使用几个并列的表格将页面分成几个部分，加快网页中内容的显示速度。

5、空格的使用规范

不同语种的文字之间应该有一个半角空格，在DW8的设计视图中，使用键盘的空格键只能输入一个半角空格，如果想用键盘的空格键来输入更多的空格，可以切换到中文全角输入状态，但是一般是不赞成这样做，因为在英文字符集下，全角空格会变成乱码。

如果必须要在文档中插入空格，可以切换到代码视图，在插入点键入一个或多个“ ”来实现，通过加入的数目可以控制空格的大小。

另外网页中不允许没有任何内容的空白单元格存在，这是因为某些浏览器会认为空单元格非法而不予以正确显示，空白应该尽量使用text-indent、padding、margin、hspace、vspace以及透明的gif图片来实现。

如果网页中代码比较乱，可以使用【命令】→【清理XHTML】命令，如下图所示。

6、Width和Height使用规范

（表格）

Width和height的写法也有统一的规范。

ü表格只有一列：

width写在

标签内；

ü表格只有一行：

height写在

标签内；

ü多行多列：

width和height写在第一行或第一列的

标签内。

（图片）

有时可能不会太注意图片的宽度和高度的设置问题，因为在DW8中，当插入图片后，DW8会自动按图像的原始大小设置好了宽度和高度，但是考虑到图片在制作过程中可能会反复的修改，而且该图片可能会用在多个页面中，当修改了图片的大小，而并未同步修改网页中图片的宽和高时，整个图片会失真。

让图片按比例显示，在更新图片时，网页中的图片显示自动按新的比例显示，方法是将中的宽度和高度去掉，这样就可以避免了在修改图片时网页的正常效果显示。

不过这样做也有一个弊端，在网页还未加载图片时，不会留出图片的占位，可能会造成网页在加载过程中的抖动，特别是当图片尺寸较大时，现象更加明显，因此，图片的宽度和高度设置要根据实际需要来设置，不可拘泥于形式。

7、网页命名规范

（1）缺省文件设置：

每个网站都有一个缺省的文件，一般这个文件名为index.htm，根据不同的程序语言使用不同的扩展名。

（2）网页命名规范

文件名应统一用小写的英文字母、数字或下划线的组合，避免用拼音来命名文件或文件夹的名称，主要是汉语中同音的字很多，使用拼音命名在文件多时会将文件名所代表的意义弄混。

科学的文件名，能够让文件分类排列，方便了查找、修改、替换等操作，如图14.3所示，所有的文件名可以让人一目了然，在按名称排列时，也能让同类的文件正确排序：

（3）文件改名

在网页文件上传后，在更改文件名时要注意，尽量不要过多的更改文件名，因为在搜索引擎中会将存在的网页存为网页快照，当引擎探测到用户点击的网址是无效时，会将网页从搜索结果中删除，如果必须要更改文件名，可以使用主机的转发功能，将原来的链接指向新的文件。

（4）文件改名

8、图片命名规范

网页中所用的图片命名也要遵循以下几条规范：

v尽量使用英文或数字命名。

v名称采用“头+_尾”的形式。

头表示图片类别的性质，尾部用以表示该图片的具体含义，尾部可以用数字表示，如按钮用but_summit，菜单用menu_contact；从图片名称的命名就可以知道该图片在网页中是做什么用的，在网页中插入图片时也不用盲目的从头到尾搜索，节省了制作的时间。

可以使用主机的转发功能，将原来的链接指向新的文件。

9、网页大小

网页大小为网页在浏览器全部加载后的大小，在网页上单击鼠标右键，选择“属性”，就可以查看文件的大小，如下图所示。

网页的大小为网页当前所有元素的总和，包括图像、表格、文字、层以及嵌入的脚本等，基于国内的网速，很多用户还是在使用拨号上网，而且大多数的网站也都是租用了虚拟主机共享带宽，因而网页的大小尽量保持在40Ｋ以下比较合适。

对于独立使用服务器的大型的网站如行业网站也要在尽可能不要超过65Ｋ，用户都喜欢浏览速度快的网站，对于下载速度慢的网站，即便内容吸引人，也会让客户的耐心消失贻尽。

有不少让网页减肥的小软件，在制作好以后可以使用一下，根据内容不同，有的最高可以让网页减肥70％。

在网页设计之初首先要考虑的就是这个网站要确定的颜色，一般会根据网站的类别和确定网页大致颜色取向，在页面上，除白色为背景外大量使用的颜色，就是这个网页的主体颜色。

比如农业类网站一般都会选择绿色，艺术类的网站大都会选择色彩张扬的颜色或黑色，工商类网站很多选择使用红色。

1、确定主体色

在制作中很多会根据网站的内容为客户选定一个主题色，再结合相关类别的网站所使用的色调，客户至上，为客户制作的网站首先要满足客户的需求，要确定客户的颜色取向之后，再配以合理的色彩，这样的网站才能达到设计者和使用者双方面的要求。

在初学网页设计时也会参照知名的网站中所使用的色彩搭配，从中能获取不少的设计灵感。

不同的颜色带给人不同的感觉，同时给浏览者感受到设计者的情绪，每种色彩当饱和度或透明度上发生略微改变就会让人的心境产生不同的变化。

1、确定主体色

v红色：

可以让人思想活跃，让人振奋，充满活力和热情。

v绿色：

介于冷色与暖色之间，让人感觉和谐、宁静、健康、环保。

v金黄、常与白色搭配，让人感觉舒适、优雅。

v橙色：

容易营造轻松、温馨、时尚的氛围。

v蓝色：

体现专业主题，让人感觉清爽、清新，淡蓝色结合白色还可营造浪漫、温馨的氛围。

v白色：

通配色，让人产生明净、清新的感觉。

v黑色：

容易让人产生压抑、悲伤感，同时使人感觉神秘、深沉。

v灰色：

营造高雅、温和的氛围，也同时也会让心情受到压抑，产生颓废感。

2、选择相近色

在网页配色尽量控制在三种色彩以内，选择了主体色之后，再配以相近的配色，如黄色配以淡黄色，深粉配以淡分色，这样容易让网页色彩和谐统一

（1）正文：

网页的正文部分要求对比度要高一些，比如白底配深灰色字，黑底配淡灰色字。

（2）导航栏：

选择深色的背景色和背景图像，再配以反差强的文字颜色，让导航清晰、准确引导浏览者在网站中的方位。

（3）侧栏：

可以选择左侧或右侧，大都二级页面选择左侧栏，也不有少的三级页面选择右侧栏，也起到引导读者网站信息浏览的作用，让其正文部分的颜色有所区分。

（4）尾部：

可以考虑与侧栏使用同色，或与头部相呼应的颜色，避免网页整体整体看起来头重脚轻才好。

3、使用跳跃色

在网页中用来引导视线的颜色可以使用一些跳跃色，比如一些细线，按钮等，可以让网页增加灵活性，减少审美疲劳，如图14.6所示，整个页面的整体选用淡灰色，电子投票部分选择两个蓝色的按钮，让页面看起来不会平淡。

淡灰色页面配以蓝色按钮效果

4、使用黑白色

无论网站的主体色调是什么，都会使用到黑白两种颜色，适当用白色调整网页的空白区域

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: 网页制作要领

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：网页制作要领.docx
链接地址：https://www.bdocx.com/doc/3920542.html

网页制作要领.docx

热门标签