网页制作与网页设计

网页制作与网页设计PAGE14目录前言…………４网站建设前的准备…………4统一网站整体风格中需准备的内容…………………..4网站的定位和规划………5总体设计方案主题鲜明……………….5网站页面的版式及色彩………………6网页制作的原则……………7关于网页导航…………7关于网页布局…………7关于表格………………8关于图形………………8网页制作与网页设计全文共15页，当前为第1页。网页制作与网页设计全文共15页，当前为第1页。关于背景………………8关于动画………………8关于页面………………8关于链接………………9更新与维护……………9网页制作方法与技巧………9应用表格的定位功能…………………9修改HTML代码来实现页面的动态效果………………10适当运用网页特效……………………11几个值得注意的问题………………..……12预览时看不到图片……………………12不要忽略页面属性的设置………..…12网页制作与网页设计全文共15页，当前为第2页。网页制作与网页设计全文共15页，当前为第2页。适当变化网页中的字体…………..…13网站的发布与后期维护……………………13网站测试……….……13网站发布…………..…13网站维护与更新………………….…13结束语………………………14

论文摘要

网页制作与网页设计全文共15页，当前为第3页。[摘要]随着Internet的日益兴起和以网页为载体的网络信息的广泛传播和应用，使得网站的建设及网页制作得到发展的空间，大至大型企业的产品推销、售后服务、解决方案，小至个人Web页面开发，形形色色，五彩缤纷，网站建设和网页制作也成为计算机网络领域最热门的话题。本文介绍了网站建设的定位和规划，总体设计的方案的主题以及网站页面的版式及色彩，网页制作的原则关于网页导航、网页布局、表格、图形等；网页制作中应用表格的定位功能、修改HTML代码来实现页面的动态效果、适当运用网页特效的一些方法与技巧，以及在建设和制作中值得注意的一些问题；最后说明了网站发布后和后期维护的相关内容

.网页制作与网页设计全文共15页，当前为第3页。[关键词]网站网页网站建设网页制作

浅谈网站建设和网页制作的方法高爱春(开封大学软件学院07级应用3班)前言

网页制作与网页设计全文共15页，当前为第4页。随着计算机网络的广泛应用，尤其是互联网的普及与发展，上网已成为人们新的生活方式。上网可以了解发生的新闻事件，查询各种所需资料信息，利用网络购物，办公，还可以进行商务贸易和休闲聊天。对互联网的需求自然拉动了供应，各种网站便成几何倍数的增长起来。在网络空间里，网站是发布和获得知识与信息的载体，是个人、企业和政府机关在网络空间的形象和存在。网站由许多相关网页构成，因此著作也就成为这个时代的热门技术。本文介绍了网站建设的定位和规划，总体设计的方案的主题以及网站页面的版式及色彩，网页制作中应用表格的定位功能、修改HTML代码来实现页面的动态效果、适当运用网页特效的一些方法与技巧，以及在建设和制作中值得注意的一些问题。网页制作与网页设计全文共15页，当前为第4页。

网站建设前的准备统一网站整体风格中需准备的内容:(1)确定网站的整体颜色。(2)设计网站的Logo(标志)。(3)设计Banner(旗帜广告条)。(4)确定导航条一级栏目和二级栏目的表现形式。(5)确定其他版块的摆放位置。(6)准备栏目的具体能容。网页制作与网页设计全文共15页，当前为第5页。网站在设计要考虑到网站整体风格的统一。从页面的排版和布局下手,各个页面使用相同的页边距,文本、图形之间保持相同的间距;主要的图形、标题或符号旁边留下相同的空白;如果在第一页的部放置了站点标志,那么在其他各页面都放上这一标志;如果使用图标导航,则各个页面应当使用相同的图标。要实现这样的效果通常有两种方法,一种是使用模板,模板是Dreamweaver中一种特殊类型的文档。设计者在模板中将各页面中相同的部位定义为锁定区域,而将不同的部位定义为可编辑区域。此后在制作每个页面时,都选择由模板新建,然后在编辑区域输入不同的文字内容,从而简化了设计主页的工序。此外,模板最强大的用途之一在于一次更新多个页面。由模板创的文档与该模板保持连接状态,修改模板就可以更新所有基于该模板的文档的设计,大大降低了页面维护的时间。另一种方法是使用框架,是现在制作页面时较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口,每一个窗口都显示一个页面的内容,并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构,可以在上方的框架里放置网站的标志,在左面的框架里显示导航栏,而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计,每个人可以根据自己的实际需要和创意来做安排。而且浏览时,可以指定连接的页面在哪个框架里显示,从而避免了网页上相同内容的重复下载,这对于提高网页显示速度和网络传输效率方面都有着积极的意义。网页制作与网页设计全文共15页，当前为第5页。网站的定位和规划要建设一个网站，首先需要定位，既要清楚建设网站的目的和面向浏览的对象，只有定位准确的网站才会有可观性和应用性。Web站点的设计是展现企业形象、介绍产品和服务、体现企业发展战略的重要途径，因此必须明确设计站点的目的和用户需求，从而做出切实可行的设计计划。要根据消费者的需求、市场的状况、企业自身的情况等进行综合分析，牢记以“消费者（customer）”为中心。在目标明确的基础上，完成网站的构思创意即规划。网站的设计者必须清楚地了解本网站的浏览者的基本情况；对网站的整体风格和特色做出定位，规划网站的组织结构，主题鲜明突出，要点明确，以简明的语言和画面休现站点的主题；最后，在此基础上收集、制作网站所需的素材，在进行页面制作时，要调动一切手段充公表现网站的个性和情趣，展示出网站的特色。总体设计方案主题鲜明

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。Web站点应针对所服务对象（机构或人）的不同而具有不同的形式。好的Web站点把图形表现手法和有效的组织与通信结合起来。要做到主题鲜明突出，要点明确，以简单明确的语言和画面体现站点的主题。调动一切手段充分表现网站点的个性和情趣，办出网站的特点。Web站点主页应具备的基本成分包括：页头：准确无误地标识你的站点和企业标志；Email地址：用来接收用户垂询；联系信息：如普通邮件地址或电话。网页制作与网页设计全文共15页，当前为第6页。网站在设计时要考虑到网站整体风格的统一。从页面的排版和布局下手，各个页面使用相同的页边距，文本、图形之间保持相同的间距；主要的图形、标题或符号旁边留下相同的空白；如果在第一页的顶部放置了站点标志，那么在其他各页面都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标。网页制作与网页设计全文共15页，当前为第6页。要实现这样的效果通常有两种方法，一种是使用模板，模板是Dreamweaver中一种特殊类型的文挡。设计者在模板中将各页面中相同的部位定义为锁定区域，而将不同的部位定义为可编辑区域。此后在制作每个页面时，都选择由模板新建，然后在编辑区域输入不同的文字内容，从而简化了设计主页的工序。此外，模板最强大的用途之一在于一次更新多个页面。由模板创的文挡与该模板保持连接状态，修改模板就可以更新所有基于该模板的文挡中的设计，大大降低了页面维护的时间。另一种方法是使用框架，框架（FRAME）也叫帧页，是现在制作页面时较为常用的一种技术。该技术可以把浏览器窗口划分为几个小窗口，每一个窗口都显示一个页面的内容，并分别设置大小、有无滚动条等信息。这样就方便了设计网站的结构，可以在上方的框架里放置网站的标志，在左面的框架里显示导航拦，而在下方的框架里安置版权信息。当然这只是一个比较公式化的设计，每个人可以根据自己的实际需要和创意来做安排。而且浏览时，可以指定连接的页面在哪个框架里显示，从而避免了网页上相同内容的重复下载，这对于提高网页显示速度和网络传输效率方面都有着积极的意义。网站页面的版式及色彩网站页面要简洁大方，在页面中不要过多的加入与本页内容无关的信息，保证主题内容让浏览者一目了然。如果希望人们在看完你的页面后能留下印象，最好用一个简单的关键词语或图像吸引他们的注意力。网站的版式设计网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计但它们有许多相近之处，应充分加以利用和借鉴。版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系网页制作与网页设计全文共15页，当前为第7页。设计网站前要先确定网站的主题色。一个网站必需有一种或两种主题色，不至于让浏览者迷失方向，也不至于单调、乏味。例如：儿童类网站一般都使用橙色、红色用以体现儿童的活泼和、温翰气氛等效果。主题色确定好以后，使用其他配色时一定要注意它与主题色的关系，要表现什么样的效果。例如：教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。同时，在使用色彩时要考虑它会带给人心理上的感觉。比如，冷色使人平静，而暖色使人激动；强的色彩对比造成紧张感；暗的颜色给人以沉重感和压迫感；亮的颜色给人轻松、开放的感觉。我们可以根据所要表达的主题，选择合适的色彩与主题色进行搭配。网页制作与网页设计全文共15页，当前为第7页。网页制作的原则通常遵循的三个基本原则：内容、速度和美观。内容是最重要的，一个成功的网页首先在内容上有吸引力。故首先应该考虑网站的内容，包括网站功能和用户需求。整个设计都应该围绕这些方面来进行。在确定内容的基础上，尽量提高速度十分必要，以免影响网站的访问量。要提高速度有时必须牺牲页面美观，抛弃太大的图片或者动画。在以上两点为前提的情况下，再考虑页面的美观性，提高网页制作上的亲和力。这要求设计者有较高的创意，懂得使用众多的工具软件。关于网页导航主页的一个很重要的功能就是导航，指引用户查阅信息。基于清晰明确和速度的考虑，主页上的超级链接应限于几个大的类别。此外，超级链接的层数不能太多，不能超过4层。应在广度和深度之间求取平衡。关于网页布局网页制作的布局一定要简洁清晰，以最少的元素表达最多的信息。一个页面应该只有一个重点的屏幕元素作为页面的主体，它可以是文字块或图像，具体随内容而定。其他屏幕元素不应比主体元素更醒目，而应该围绕主体，突出主体。在绘画和摄影中常采用画面横竖比三等分的方式得到4个三等分交叉点，这4个点基本上符合美学中的黄金比定律。这种布局是网页中常用的方式之一，重点元素应该放在这些点周围，而不应放在正中央，以免太过呆板。在网页布局时要保持平衡，即以布面中心为支点，给人以平衡的感觉。平衡包括两种：对称平衡和非对称平衡。对称平衡给人以庄重、稳定的感觉。而非对称平衡更有变化感。在处理平衡问题时，不仅需要考虑形体上的平衡，而且应该考虑颜色上的平衡。因为深颜色往往让人感觉重，而浅颜色则让人感觉轻，因此必须充分考虑颜色给人的视觉影响。关于表格现在许多门户网站的布局方式往往应用表格，使网页内容整齐合一。不要将网站内容简单的罗列，要注意多用表格把内容的层次性和空间性突出显示出来，以便重点突出，结构分明。网页制作与网页设计全文共15页，当前为第8页。关于图形网页制作与网页设计全文共15页，当前为第8页。图形是WWW网站的特色之一，是两大网页元素之一，它带有醒目、吸引人以及传达讯息形象的功能，应用好的图形可以使网页增色不少，但图形应用不当则会带来反效果。使用图形时应尽量缩小或省略图形，且一定要考虑传输时间的问题。一般超过90秒钟的传输会使浏览者放弃打开页面。因此必须依据HTML文件、图形文件的大小，考虑传输速率、延迟时间、网络交通状况，以及服务端与客户端的软硬件条件，估算网页的传输与显示时间。在图形使用上，尽量采用浏览器支持的压缩图形格式，目前因特网上大多使用Gif和Jpeg格式的图象。在这两种图像中JPEG的压缩效果较好，适合中大型的图形，以节省传输时间。给图像加上替代文字及低分辨率图像替代也很重要。关于背景在页面上添加背景图案，虽可增加美观，但却会耗费传输时间，且有时影响视觉，反而给人不好的印象。若没有绝对必要，最好避免，保持干净清爽的背景。如果要用背景底色，最好使用单一色系，且要跟前景文字有明显区别，最忌讳花俏多色的背景。背景音乐的添加也要慎重。关于动画动画很耗费系统资源，使操作较困难，网页中应使用尽量少的动画，Flash动画虽然有许多优点，但需要浏览者的电脑安装插件，多采用Gif动画，其文件格式要小得多。闪烁的文字也不能应用太多，以免给人眼花缭乱的感觉。关于页面页面的长度要适中，因为长页面的传输时间明显比短页面的传输时间长，防止吓跑访问者。而且长文本的页面阅读不便，单页不易放置过多的文字。且不要把重要的内容放到页尾，访问者注重页面头部，尾部可能来不及看就跳转啦。整个页面的风格要统一，网页上所有的图像、文字，包括背景色、分隔线、字体、标题、注脚等，要统一风格，贯穿全站，给浏览者一个专业的印象。另外，网页中应有供访问者表达意见的E_mail信箱。为网页添加描述性的标题不可少，以便收藏网页。关于链接在制作超级链接时，尽可能地使用相对链接，以增强可移植性，因为相对路径在一组文件转移后仍然有效，其目标地址不用修改。如果是链接到不直接相关的文件时，则采用绝对路径较好。网页制作与网页设计全文共15页，当前为第9页。友情链接没有必要连到非常一般热的链接（如网易等），而应包括对于访问者来说较特殊或未曾去过的网站的链接。文件下载的链接应注明文件的大小，以帮助访问者估计下载时间。网页制作与网页设计全文共15页，当前为第9页。更新与维护成功的网页一定是要时时更新，精心维护的，在网页内容上一定要注意即时性，时时保持新鲜感才较容易成功。另外，与访问者产生互动是制作成功网页的重要方法，网站推广也很重要。网页制作方法与技巧在网页制作中，为了提高页面效果，需要使用一些技巧和方法。应用表格的定位功能运用表格可以自由地控制文本和图像在网页上出现的具体位置，而不用担心不同对象之间的影响，从而使整个网页看上去紧凑统一。要充分利用表格的定位功能，准确地将每一段文字、每一副图片按照一定的次序进行合理的编排和布局。对于表格的框度，应采用绝对定位，不用百分比，以便浏览者在不同的显示分辨率下都能看到同样的效果。考虑到目前上网浏览者使用电脑屏幕的分辨率多为800×600，因此，每个页面在设计时也要设定在此分辨率下，如有特殊，还要给浏览者做出提示。表格内容的下载比较耗时，往往要在整张表格中全部内容下载完成后，才能显示该表格内容。因此，表格中尽量不要嵌套过多的表格，以免影响页面的下载速度。浏览器解释HTML页面的顺序是自上而下依次逐行解释和显示，但当碰到表格中所有的元素后才将结果在页面中显示出来，在页面内容教多而访问者浏览的速度又很慢的情况下，浏览器的这种解释次序将明显表露出来，只有等到浏览器解释到了页面的最后，才会将整个页面的内容在访问者眼前显示出来，而在浏览器解释过程中，访问者什么也看不到，这将会使访问这产生不耐烦的心情。一些优秀网站的设计，通常也都采用表格来定位，而且大多都是一行一行来设计的，当然每个单行排列的表格里也存有表格嵌套，但各个页面的内容最好不要放于一张的表格里面。因此在使用表格进行网页元素布局时，应尽量避免使用整个表格。修改HTML代码来实现页面的动态效果网页制作与网页设计全文共15页，当前为第10页。现在有了那些“所见即所得”的网页制作工具，假如只想制作出功能简单的网页，使用这些网页制作工具即可。但是，要想制作出功能完善、风格独特的网页，只靠那些工具是远远不够的，还是要学习一些HTML语言。如在网页制作中使用“跑马灯”，可以使网页增色不少，因为其中的文字有一种动感的效果，这种效果完全可以用修改HTML代码来实现。网页制作与网页设计全文共15页，当前为第10页。先来谈一下如何制作最简单的跑马灯效果。一般情况下，在层或表格中输入若干个文字，先对其中的文字设置颜色、字体及大小等，然后选中该文字切换到代码窗口，你会看到代码窗口的文字还是呈现选中状态，在第一个文字前输入<marquee>，你会发现自动生成</marquee>，只要将</marquee>移到最后一个文字后面，在预览时，就可以看到文字从右往左移动或从左向右移动，就像跑马灯一样。文字的默认运动方向就是从右往左移动，相当于用了语句direction=“left”，如果想让“文字”从右往左移动，只要把“left”改成“right”就可以了。同样的道理，要使文字上下移动，只要再把“right”改为“up”，或“down”就可以了。改成上下运动的跑马灯你会发现速度很快，读者根本无法阅读滚动的文字，修改时只需加入scrollamount=“1”参数，值得一提的是scrollamount的值越大，其上下移动的速度就越快。Scrollamount=“6”就是默认的速度很快的效果。此外，还可以用width、height参数来设置跑马灯区域的范围。下面这段HTML代码是与一个从下而上的跑马灯效果相对应的：<marqueewidth=”400”height=”100”direction=”up”scrollamount=”1”欢迎光临本网站></marquee适当运用dreamweaver网页特效dreamweaver网页特效是指在网页中调用一种特殊的小程序使网页页面有一种特殊的效果，如图片滚动与下拉菜单，滚动字幕、为图像添加阴影、运动、波浪、及淡入淡出等特效等。这些特殊效果在Dreamweaver中都可以用HTML语言实现的。例如：<HTML>网页制作与网页设计全文共15页，当前为第11页。<HEAD>网页制作与网页设计全文共15页，当前为第11页。<METAhttp-equiv='Content-Type'content='text/html;charset=gb2312'><TITLE>一段实用的图片滚动显示代码</TITLE></HEAD><BODY><marqueedirection=upheight=200scrollamount=1scrolldelay=90width="100%"><ahref="/"><imgborder=0src="/TLimages/yeskyimages/tob/homepage_02.jpg"></a><br><ahref="/"><imgborder=0src="/imagelist/06/03/ukk13g5y4hnh.gif"></a><br><ahref="/"><imgborder=0src="/imagelist/06/03/14yiw1100n6t.gif"></a><br>网页制作与网页设计全文共15页，当前为第12页。<ahref="/"><imgborder=0网页制作与网页设计全文共15页，当前为第12页。src="/imagelist/06/03/y9ges43gk4v6.gif"></a><br></marquee></BODY></HTML>几个值得注意的问题预览时看不到图片有时图片在编辑状态下是好的，而在预览时或在网页发布后无法显示，究其原因，一个方面可能是路径问题，另一方面可能就是因为图片用的是中文文件名而招来的麻烦。如果是路径的问题，可能是图片不在站点内，这就需要把图片存人相应的文件夹中，然后改变图片的路径就可以了。如果图片是在站点内，在预览时仍看不见图片，则往往是使用了中文的文件名、目录名或文件名。解决的方法是把中文名字改为英文字母、数字和下划线等符号组合成文件名或目录。不要忽略页面属性的设置设置左边界、顶部边界、边界宽度和边界高度。细心的用户会发现在没有进行设置前浏览时页面会在上下、左右，各留一片空白，这块区域用户不能利用，白白浪费了，为了节省网页中的宝贵空间，建议把这四个选项都设置为0。适当变化网页中的字体网页制作与网页设计全文共15页，当前为第13页。网页中的字体字号、字距、行距和文字颜色可作些适当变化，以求最美的视觉效果。需要突出的地方可以用不同的字体、字号和不同的颜色表示。字体最好采用系统自带的字体，因为字体的显示效果是由浏览者的浏览器来决定的。许多漂亮的文字，浏览器可能并不支持，可以把文字做成图片的方式来处理