网页制作要领.doc

网页制作要领如何让一个网站在第一时间抓住浏览者的眼球，提高流量？网站的内容首当其冲，再配以精致的图片设计以及合理的布局排版，相信这样的网页可以让浏览者赏心悦目，而且在浏览时可以快速找到自己需要的内容，这样的网站才能吸引更多的读者。 网页是一个可以张显个性的舞台，特别是近几年来设计者的水平越来越高，更是突破了色彩布局的限制。如何让网页又有个性又能符合更多人的审美观，对设计师就提出了更高的要求。在设计网页时，需要掌握几个要领，下面这几条是我在设计过程中总结出来的，希望大家能有所帮助。 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:link a:visited a:hover a:actived 要按顺序书写，否则在网页显示时，特别是当网页中存在多个链接样式时，会有显示上的问题。 在代码中，每个样式中的一个属性一行，后面以英文输入状态下输入分号“;”。 （2）首行缩进 在网页排版中经常会遇到首行缩进，不建议使用空格或者全角空格来达到效果，规范的做法是在样式表中定义ptext-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 橙色：容易营造轻松、温馨