网页制作技巧浅谈

网页制作技巧浅谈摘要随着计算机网络走入寻常百姓人家，以计算机网页作为载体传播信息也日益广泛地得到了应用，从而建设网站及制作网页也有了发展的空间，网站也成了公司企业的形象窗口，成为产品推销、售后服务等系列的一条重要渠道，更有许多电脑爱好者开发个人Web页面，通过互联网搞的热热闹闹，网页制作与维护也成了计算机网络领域最热门的话题之一。本文拾捡了一些网站建设与网页制作的小技巧，以及在建设和制作中值得注意的一些小问题。关键词网站网页HTML语言网页制作正文随着互联网的普及与发展，上网越来越成为人们休闲娱乐不可或缺的一种生活方式。上网可以了解新闻事件，可以查询信息资料，可以购物甚至办公等等。于是各种网站便如雨后春笋般地新兴成长起来了。在互联网上，众多的网站是传递知识与信息的载体，而每一个网站又是由许多相关的网页组成。本文从网页制作的一些方法与技巧谈起，与广大的电脑爱好者一起互相学习。一、网站的制作：制作网站时整体风格一般都会做到简捷明了，突出个性特色，一个好的网站离不开鲜明突出的主题，做到各个要点明确，并辅以简明的语言和画面对主题起到画龙点睛的效果；另外，平时注意收集一些制作网站所需的素材，在进行页面制作时，能充分调动一切可以表现网站的个性和情趣，展现出网站特色的元素。如图1：图1在设计网站时，一般力求页面简洁大方，在页面中不要过多的加入一些无关的信息，保证主题内容能够让浏览者一目了然。如果希望人们在看完网站主页后能留下较深的印象，最好能够利用简单的关键词语或图像吸引住浏览者的注意力。如图2：图2在设计网站时还要确定网站的主题色。一个网站一般要有特定的主题色，一方面可以让浏览者加深印象，另外也不至于显得过分单调与乏味。例如：儿童类网站一般可以选用暖色系或者比较明亮鲜艳的如橙色、红色、蓝色等，即可体现儿童的活泼，又充满着少年的天真与乐趣。主题色确定好以后，再适当使用一点其他配色，可以达到相得益彰的效果。例如：制作一个教育类网站时选用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。在使用色彩的同时，如果能够考虑颜色给人心理上的暗示作用，或许还能产生事半功倍的效果。比如，冷色能够使人心情变得平静，而暖色容易使人变得兴奋激动；强的色彩容易形成一种紧张感，而暗的颜色又给人以沉重感或压迫感。可以根据所要表达的主题，选择合适的色彩与主题色进行搭配。如图4：图4二、制作网页的方法与技巧在网页制作的过程中，为了能够达到良好的页面效果，有时一些技巧和方法的运用又显得弥足珍贵。1、表格的应用：通过表格，可以比较随意的把文本与图像插入到相应的位置中去，而不用过分地担心不同的对象元素之间的相互影响，而且制作出来的页面看上去结构比较紧凑，充分利用表格的定位功能，能够准确地将页面中的文字、图片按照一定的次序进行合理的编排与布局。在表格的边框处理上，不用百分比而采用绝对定位，以方便浏览页面时在不同的显示分辨率下都能看到同样的效果。当浏览页面时，为了使页面打开快捷，一般在制作页面时尽量不要嵌套过多的表格，因为下载表格内容时，往往要等整张表格的全部内容下载完成后，才能显示该表格的内容。浏览器在解释HTML页面时的顺序是从上至下依次逐行解释并显示，当碰到表格中所有的元素后才将结果在页面中显示出来，在页面内容较多而访问者浏览的速度又较慢的情况下，浏览器的这种解释次序将明显表现出来，只有等到浏览器解释到了表格的最后，才会将整个表格的内容显示出来，而在浏览器解释的过程中，访问者可能什么也看不到，很容易使人产生不耐烦的心情。一些优秀的网站，在设计过程中通常都会采用表格来定位，而且大多都是一行一行来进行设计的，当然每个单行排列的表格里也存在表格嵌套，但各个页面的内容可以不放在同一张表格里面。2、编写HTML代码让页面产生动态效果要想制作出一张张功能完善、风格独特的网页，还得使用一些HTML语言。如在网页制作过程中使用“跑马灯”，可以使其中的文字有一种动感的效果，从而给网页增色不少，而要达到这种效果完全可以通过修改HTML代码来实现。比如制作一个简单的跑马灯效果。一般情况下，在表格中输入一些文字，并对其中的文字设置颜色、字体等属性，然后选中该文字切换到代码窗口，就会看到代码窗口的文字呈现出选中状态，在第一个文字前输入marquee，便会发现自动生成了/marquee，只要将/marquee移到最后一个文字后面，在预览时，就可以看到文字从右往左移动，就像跑马灯一样。文字从右往左移动是默认的运动方向，相当于用了语句direction=“left”，如果想让文字从左往右移动，只要把“left”改成“right”就可以了。同样的道理，若要使文字上下移动，只要再改为“up”或“down”就可以了，但是改成上下运动的跑马灯速度会变得很快，读者根本来不及阅读滚动的文字，修改时只需加入scrollamount=“1”参数，值得一提的是scrollamount的值越大，其上下移动的速度就越快。Scrollamount=“6”就是默认的速度很快的效果。另外，还可以利用width、height等参数对跑马灯区域的范围进行设置。下面这段HTML代码是与一个从下往上的跑马灯效果相对应的：marqueewidth=”400”height=”100”direction=”up”scrollamount=”1”欢迎光临本网站/marquee,如果把其中的文字内容换成新闻，就可以做成滚动的公告供读者阅读了。3、几个值得注意的问题有时图片在编辑状态下是好的，但是在预览时或在网页发布后却无法显示，究其原因，可能是因路径原因造成的，也可能是因为图片保存时用了中文文件名而招来了麻烦。如果是路径的问题，可能是这个图片文件不在站点内，只要把图片存人到相应的文件夹中，然后改变图片的路径就可以了。如果图片是在站点内，在预览时仍看不见图片，则往往是使用了中文的文件名或目录名造成的。解决的方法是把中文名字改为英文字母、数字和下划线等符号组成的文件名或目录。在制作网页时，一般会考虑到设置页面的左边界、顶部边界、边界宽度和边界高度，但如果没有进行设置，在浏览时会在页面的上下、左右各留出一些空白，这些区域用户不能充分利用，白白浪费了网页中的空间，可以把这四个选项都设置为0。在页面美化方面，更改字体、字号、字距及文字颜色等可以大大美化视觉效果。但字体最好采用系统自带的字体，许多漂亮的文字，浏览器可能并不支持，如果文字不多也可以处理成图片的方式，但这种方法不适合在大段的文字上采用。另外，恰当的运用CSS样式表会使文字处理达到事半功倍的效果。总之，设计一个好的网站，除了要有一定的网站基础知识外，还要掌握很多网页编程的技巧和一定的美工知识，当然也要求对编程工具和数据库知识有更深的了解和更加灵活的应用。随着计算机软件的不断更新与升级，相信必定会出现更多、更好的设计软件，使网站的建设更容易、更先进！参考文献[1]李建梅.《新概念中文DreamweaverMX教程》.北京科海电子出版社,2003.[2]孙良军.《DreamweaverMX2004入门与实例演练》.中国青年电子出版社,2005.[3]黄俊.《DreamweaverMX中文版精彩设计百例》.中国水利水电出版社,2003.