网页设计与制作-论文（本站推荐）

窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：

窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：

document.mytest.submit()

第五章

色彩在网页中的应用

6.1.3 窗体对象的属性

窗体对象中的属性主要包括以下：elements name action target encoding method。除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：

elements[0].Mytable.elements[1] 6.1.4 访问窗体对象

在JavaScript中访问窗体对象可由两种方法实现：（1）通过访问窗体

在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。

（2）通过数组来访问窗体

除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：

document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗体的先决条件

在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。

6.2 窗体中的基本元素

窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。

在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：

formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)下面分别介绍：

（1）Text单行单列输入元素

功能：对Text标识中的元素实施有效的控制。基本属性：

Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue：包括Text元素的默认值 基本方法：

blur()：将当前焦点移到后台。

第五章

色彩在网页中的应用

select()：加亮文字。主要事件：

onFocus：当Text获得焦点时，产生该事件。OnBlur：从元素失去焦点时，产生该事件。Onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。例：

功能：实施对Textarea中的元素进行控制。基本属性

name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Default value：元素的默认值。方法：

blur()：将输入焦点失去 select()：将文字加亮后 事件：

onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件（3）Select选择元素

功能：实施对滚动选择元素的控制。属性：

name:设定提交信息时的信息名称，对应文档select中的name。Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项

select在中每一选项都含有以下属性： Text:选项对应的文字

selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件：

第五章

色彩在网页中的应用

OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。（4）Button按钮

功能：实施对Button按钮的控制。属性：

Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：

click()该方法类似于一个按下的按钮。事件：

onclick当单击button按钮时，产生该事件。例 ：

功能：实施对一个具有复选框中元素的控制。属性：

name:设定提交信息时的信息名称。

Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态 方法：

click()该方法使得框的某一个项被选中。事件：

Onclick：当框的选被选中时，产生该事件。（6）radio无线按钮

功能：实施对一个具单选功能的无线按钮控制。属性：

Name：设定提交信息时的信息名称，对应HTML文档中的radio的name相同 Value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。

length：单选按钮中的按钮数目。defalechecked:默认按钮。

checked:指明选中还是没有选中。

第五章

色彩在网页中的应用

index:选中的按钮的位置。方法：

chick():选定一个按钮。事件：

onclick:单击按钮时，产生该事件。（7）hidden:隐藏

功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。属性：

name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。

defaleitvalue:默认值（8）Password口令

功能：实施对具有口令输入的元素的控制。属性：

Name:设定提交信息时的信息名称，对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。

defaultvalu:默认值 方法：

select():加亮输入口令域。

blur():使这丢失passward输入焦点。focus():获得password输入焦点。（9）submit提交元素

功能：实施对一个具有提交功能按钮的控制。属性：

name:设定提交信息时的信息名称，对应HTML文档中submit。

Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。

方法

click()相当于按下submit按钮。事件：

onclick()当按下该按钮时，产生该事件。

6.3窗体对象实例

下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。

test8_1.htm 调用动态按钮文档

第二篇：网页制作论文

网页制作论文

简介

网页制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。其作用为展现公司形象，加强客户服务，完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台，是INTERNET上宣传和反映企业形象和文化的重要窗口。新竞争力也认为注重网站的网络营销价值而不是外在表现。网页制作是指使用标识语言，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，浏览。

网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来。

目录

1.网页制作的两种设计模式 2.网页制作常用工具 3.flash 3.1flash简介 3.2flash动画的特点 3.3flash动画的前景 3.4flash在网页中的应用 3.5flash制作流程 4.fireworks

4.1fireworks简介

4.2fireworks在网页中的应用

4.3fireworks的重要性

4.4fireworks制作流程 5.参考文献

正文

1.网页制作的两种设计模式

从前一般网页都使用表格进行排版设计，这样作的优点在于设计制作速度快，尤其在可视化网页编辑器，如Microsoft FrontPage中，这样设计显得直观而方便，然而这让越来越复杂的版面需要许多不断嵌套的表格设计，致使网页代码变得冗长复杂，使文件体积增大，且不容易被搜索引擎查找。同时，这样做也不利于大型网站的改版工作。

于是随着主流网页浏览器对CSS的支援度提高，近年来兴起了一种新的网页设计模式。被业界称为“网页重构”的革命，其核心在于分隔网页的风格和内容，指标记语言(如HTML,XML)负责定义页面的内容，但不可以定义任何涉及网站外观(风格)的东西。而网站风格就由另外的CSS档案负责。在排版方面，新的模式提倡使用由CSS定义的DIV进行页面排版，而将表格还原为排列数据的最初功能。这种模式有很多好处，例如可以协助搜寻引擎查找网页的情况，减小文件提及提高浏览速度，且由于一个CSS档案可以控制多个页面，这也给改版带来了很大方便。

由于W3C是该模式极力的倡导者，于是业界鉴定网页是否符合W3C标准，就可以在W3C网站自动检测该网站的情况。

这种模式也有缺点，其中一个弱点就是，在不同浏览器出来的效果会有分别，但这种情况主要是由于微软的Internet Explorer对CSS文档的支持有众多缺陷造成的。另一方面，开始设计CSS时，并不能清楚看到目标，因此显得不直观。

网页实际是一个文件，他存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。

2.网页制作常用工具

1、dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具。Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

2、Frontpage 跟dreamweaver一样，不过还是dreamweaver好。

3、FLASH 网页需要画面流动时的首选择

4、PS图象处理软件，一般网页都需要有图片相搭配，PS是款很强大的工具。

5、FW跟PS一样都是图象处理软件，但FW偏向与对网页的处理。

6、Adobe公司推出的cs3系列，软件之间兼容性较好。可以用此系列对网站的美工特效进行进一步的修饰美化和优化。

3.flash 3.1flash简介

Flash最早出现并兴起于网络，是网络多媒体动画的重要制作形式，它是macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。其运用范围覆盖诸多领域如电视广告、网络广告、游戏、演示动画、课件、网页、手机动画等新兴媒体。现在由于网络带宽的不断提高，Flash动态网页以其具备的声音、动态图像等多媒体优势，相信在不远的将来能够完全替代静态（HTML）网页。

3.2flash动画的特点

（一）Flash动画受网络资源的制约一般比较短小，利用Flash制作的动画是矢量的，无论把它放大多少倍都不会失真。

（二）Flash动画具有交互性优势，可以更好地满足所有用户的需要。它可以让欣赏者的动作成为动画的一部分。用户可以通过点击、选择等动作，决定动画的运行过程和结果，这一点是传统动画所无法比拟的。

（三）Flash动画可以放在网上供人欣赏和下载，由于使用的是矢量图技术，具有档小、传输速度快、播放采用流式技术的特点，因此动画是边下载边播放，如果速度控制得好，则根本感觉不到档的下载过程。所以Flash动画在网上被广泛传播。

（四）Flash动画有崭新的视觉效果，比传统的动画更加轻易与灵巧，更加“酷”。不可否认，它已经成为一种新时代的艺术表现形式。

（五）Flash动画制作的成本非常低，使用Flash制作的动画能够大大地减少人力、物力资源的消耗。同时，在制作时间上也会大大减少。

（六）Flash动画在制作完成后，可以把生成的档设置成带保护的格式，这样维护了设计者的版权利益。

3.3flash动画的前景

现在的Flash平台包括:Flash Studio

8、Flash Player

8、Flash in Mobile flex 1.5、以及应用于通信行业的Breeze 5等；未来即将推出的产品包括Browser client Flash Player、Mobile client Flash Player、Apollo Flash+HTML的客户端工具，以及Flex等企业端工具等。这些工具将满足设计和开发人员跨越各种开放的和专有的平台，包括从桌面到移动设备，提供更丰富的网络内容和互联网应用，企业也能够通过Flash应用获得更大的受益。

（一）网络视频钟情Flash 面对全球超过100万的Flash开发者的期望，Macromedia也不断开发新的领域。而用户对视频应用的垂青，刺激着Macromedia推出新的工具。在上千开发者的注目下，Macromedia推出了Flash Media Server 2，以巩固其Flash Platform作为网络视频最佳选择的地位

（二）Flex 2产品线和Flash Player 8.5出手不凡

Macromedia Flex 2产品线和Macromedia Flash Player 8.5是本次发布会的重头戏。新产品涵盖RIA的全部应用场景，从电子商务产品配置，到需要与实时数据集成的可视交易应用。

Flash Player目前在全球6亿多个桌面和移动设备上安装,估计新版本在12个月内将被80%的联网计算机下载。Flash Player 8.5在Flash Player 8的基础上增加了适合行业使用的编程功能，并构建了先进的跨平台运行时环境。它备有一个新的虚拟机，可以提供更高的运行性能、全面的运行错误报告、增强型调试功能以及支持ActionScript 3。ActionScript 3遵守最新的ECMA Script规范，能够更易于查找及解决问题，从而提高开发人员的工作效率。

3.4flash在网页中的应用

在网络高速发展的今天,越来越多的人们已经不再满意图文并茂的静态网页格式,动态网页应运而生,但是一般的动态图片和网站的背景音乐应用并不合拍.什么时候可以把多媒体应用在网站上呢 Flash正是在这一网络发展的大背景下应运而生的,前身是Future Splash.Flash1.0版本诞生于1996年,由于当时的网络大背景,Flash在出道之时并没有得到计算机行业应有的重视,Flash真正的火爆是从Flash3.0版本开始的,到了1999年6月发布的Flash4.0版本,其制作的动画开始大量的在网上传播,已经逐渐成为了网页交互多媒体动画设计软件的标准.现在,Flash5.0以其特有的ActionScript脚本编程,正在以极快的速度追赶HTML网页标准.它改变了以往静态的,枯燥的,网页形式,利用它短小精悍的文件体积和插件,利用它简单易学的操作方式,利用它的“流”式播放形式丰富我们的网络生活.试想,如果它真的超过HTML成为未来的网页设计软件的主流,那也将是网络的一场革命,也是网络生活的福音.3.5flash制作流程

（1）建立一个新的场景

依次选择“文件”、“新建”、“Flash文档”命令，建立空白文档，大小为550*400像素，背景为白色。

（1）

（2）重新命名场景和涂层名称

依次选择“窗口”、“设计面板”、“场景”命令，在弹出的场景面板中双击默认场景名称，改为“跳动的小球”。然后重新命名涂层名称，双击默认涂层名称，改为“地面”。然后用水平线表示地面，选择笔触颜色为黑色，单击“线条工具”按钮，在第一帧的舞台下方，拖动鼠标画一条直线表示地面。

（2）

（3）插入水平线结束帧

单击水平线涂层第35帧的小方框，选中该帧；依次选择“插入”、“时间轴”、“关键帧”命令，在地面层的1到35帧之间插入了相同的水平线。

（3）（4）插入跳动的小球涂层，画小球的初始状态

双击默认的涂层名，改为跳动的小球涂层，此图层处于激活状态。设置填充色为黑色，在第一帧的舞台上方，画一个小球，删除轮廓线。

（4）

（5）插入下一帧

单击跳动的小球层第二帧的小方框，选中该帧；依次选择“插入”、“时间轴”、“关键帧”命令，在第二帧中复制第一帧的图形；拖动小球向下移动一个距离，表示球在下落。

（5）

（6）制作下落动作的变化

重复上一步骤。

（6）

（7）小球变形

在下一帧的位置插入关键帧，利用任意变性工具把小球纵向压缩。单击“任意变形”按钮,指针根据可实现的变形方式箭头右下方的小图形会有所变化；单击小球，小球周围出现8个黑色句柄框；把鼠标指针移动到4个中间句柄处，拖动鼠标，把圆球编程椭球形。

（7）

（8）多次重复上面步骤，在不同的帧中，制作小球被压扁后又弹起的画面。参照第9步，制作小球被压扁后又弹起的画面。重复上述步骤，直到小球静止。4.fireworks 4.1fireworks简介

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等，因此，对于辅助网页编辑来说，Fireworks将是最大的功臣。借助于 Macromedia Fireworks 8，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks 业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 Macromedia Dreamweaver? 和 Macromedia Flash? 共同构成的集成工作流程可以让您创建并优化图像，同时又能避免由于进行 Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。

4.2fireworks在网页中的应用

众所周知，在网页上的jpg图片如果过大，会严重影响页面的打开速度，Fireworks提供优化图片的功能，即缩小图片的KB，而且不影响画面的质量（除非放大了与原图对比）。由于很多人喜欢用photoshop制作jpg图片，所以它的容量会很大（因为它是适合处理印刷品，要求比较清晰），最终还是要用Fireworks来处理一下。

在优化面板里有“导出jpg较高品质”，导出默认的80品质（可以用“2幅”画面对比之前之后的大小）。

4.3fireworks的重要性

为Macromedia家族的一员，三剑客之一的fireworks，她的主要任务和特色就是制作矢量图为网页服务,FW也是Flash的最佳伴侣,在三剑客的MX系列中,FW和Flash的联系更为紧密,所以无论是网页制作和Flash制作,Fw都是不可或缺的利器.在Fw3年的应用实践过程中,我无时无刻不在感受她的卓越和便利。的确,网页制作看重的是效果和速度,并不是你用的软件专业与否,你用了多少个软件作出的网页,设计师作出的网页是为了让大家接受而不是显示自己的本领,在这样的前提下,Fw的确是最好的选择,最好的矢量图效果,最快的速度。

4.4fireworks制作流程

1.准备素材 如图

2、因为这幅图片是位图，我们可以用魔术棒将电视机中间的画面选取成选区

2.选择菜单——将选取框转换为路径，得到电视画面的轮廓路径。当然，也可以用钢笔工具勾勒

出

电

视

画

面的路

径

4.将选中区域填充成折叠渐变

颜色可以自己选择：

5.用选取工具拖动渐变方向手柄，接近垂直或接近水平方向：

6.将调整手柄以初选中区域 并在帧属性，选取重制帧命令：选择三帧 或在多些

7.依次选择其他帧，拖动渐变调整手柄将其改变位置：柄以初选中区域 并在帧属性帧命令：

最后保存 导出gif图片 即可完成。

1.在Fireworks中打开一个新的画布，调整画布大小，选择工具栏中的文本工具，输入第一个数字，并设置好文字的字体、像素大小等样式

2.输入文本 1 然后再打开帧属性 选择重置帧 9 因为数字0-9 一共是十个

3.然后选择每一帧，并修改画布中的相应数字。

4.帧面板中右手边显示的是默认的帧延时值7毫秒，即7/100秒的速度。如果速度过快 可以修改值 选择顶部帧，按住Shift键，点击底部的最后一帧，全选这些帧，在帧延时值处双击，在显示的对话框中设置一个更高的值。更高值将减慢动画的播放速度。5.最后一步，打开优化面板，设置导出文件格式为“Gif动画”，如图：

6.也可以在帧面板的底部设置Gif动画循环，默认为“永久”选项

7.画布颜色可以随意更改 再按f12 预览就可以了，最后导出文件

5.参考文献

[1]刘宇.Flash短片轻松学中国大陆.电子工业出版社，2009-01.[2]章精设，胡登涛.Flash Action Script 3.0从入门到精通.清华大学出版设，2008-10.[3]陈冰.Flash第1步:ActionScript编程篇(珍藏版).清华大学出版社，2006-03

第三篇：网页设计与制作课程学习论文

《网页设计与制作》课程学习论文

作为一个二十一世纪的大学生，学习如何设计与制作网页变为一个必不可少的过程。经过这几个星期的学习，我开始对网页设计与制作有了初步的认识，并且学习了一些网页设计与制作的基础。随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一门技术。网站设计日有必要的益被重视，学习网页设计与制作这门学科是非常。

作为网页设计的初学者，我对网页设计非常感兴趣，一心想设计出一个美观、实用、内容丰富的个人网页。我通过自己动手、动脑，通过网络资源，老师的指导，在不断发现问题和解决问题的过程中学到了很多知识，也增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。

互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。

网页设计与制作包含视听元素于版式设计两项内容，以主题鲜明、形式与内容统一、强调整体为设计原则，具有互交性与持续性、综合性、版式的不可以控性、艺术与技术的结合的紧密型等特点。美和功能都是为了表达网站的主题。我认为在一个网站中，最重要的页面当属主页，所以在此以主页为例，说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素：文字，图片，排列方式和主色调，这四者相辅相成，缺一不可。图片要素

要设计出漂亮的主页，首先要成为计算机图形高手，仅这一点就可以让初学者花上一年半载的时间。排列方法要素，主页的第二个要素是排列方法，即网页布局。色彩在网页所占比重很大。有了合理清新的色调，会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的，一个网站必须有一种或两种主题色。不至于让浏览者迷失方向，也不至于单调乏味。一般来说，页面的主体文字应尽量使用黑色等较深的颜色，与背景对比明显，按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色，再用红色和黑色作为配色，就能表达出严肃、稳重的效果。网页作为一种版面，既有文字，又有图片；文字有大有小，还有标题和正文之分；图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众，不能简单地将其罗列在一个页面上，否则会搞得杂乱无章。关于具体的网页布局，常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，关于它们，在网页设计的相关书籍中或者在网络上都可以看到详细的叙述

网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与形式的统一。一般的来说，绝大多数普通受众图形，插件，applets和其它有关的高级Web浏览器特性。对我们来说，页面的实用可能比漂亮更重要，对于用户来说，没有什么比页面能够快速下载更重要了，简而言之，精简你的站点，这是一条最佳的捷径。就站点设计而言，的确能够通过成功的图形设计招徕或者丢失访问者。并非所有的访问者可以完全看到图片，某些人为了加快存取网络的速度已经关闭了浏览器端的图形。简而言之，图形并不能正确的在客户端加载。然而，图形经常被用来作为导航按钮。使用可以把一个浏览器分成几个不同的窗口，对于站点的结构的把握是一个不错的方法。但是，你还是必须知道，还是有人在使用不支持帧的浏览器。在你开始打算设计一个帧的时候，你该仔细的考虑考虑你是否的确真的需要。经常，你这样的需求可以通过表格来组织站点的结构。网页设计涉及到对多种软件、多种知识的学习和应用，以及个人的审美观等等。所以要想制作出漂亮的网页，需要一个逐步学习和经验积累的过程。

随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以很好的展示自己，而且可以提高自己在计算机应用方面的能力。个人在设计时考虑的多为个人的兴趣喜好，而不注重商业的展示。内容以反映个人为中心，从而使个人网站真正的成为展示自己的网络名片。一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。

由于平时课程比较繁忙，学习时间比较少，对于网页设计软件的强大功能运用得还不够。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中，我学习了Flash、Fireworks、Html语言、IIS、网站建设的基本思想等重要内容。在网页设计过程中，由于没有网页制作代码的知识，所以在设计时也遇到了很多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提高设计水平，想有个理想的网页，必须学会代码的运用，我将在以后的学习过程中不断加强这方面的学习，希望老师能简单介绍一下代码，让我也对它有个初步的认识，以后再加强学习也才会有所提高。

总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。也希望老师在今后的日子里多指导。网页设计还有更多的技巧，有待于我们去挖掘和研究。

第四篇：网页设计与制作报告书

电子商务2班201341440213孙岩

网页设计与制作报告书

课程名称:网页设计与制作

专业班级：电子商务2班

学 号:201341440213 姓 名：孙岩

指导教师：王康哲

电子商务2班201341440213孙岩

目录

一．概要……………………………………………………………

二．网站开发……………………………………………………

三．应用工具方案……………………………………………

四．栏目划分……………………………………………………

五．代码表……………………………………………………….六．截图……………………………………………………………

七．结论…………………………………………………………… 2 6 7 13 14

电子商务2班201341440213孙岩

摘要：

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

一、网页制作开发背景

Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。

二、网页制作设计技巧

首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，DREAMWEAVER就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。

在文件列表里除了主页之外，还有文件夹。新建站点时，DREAMWEAVER都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”

电子商务2班201341440213孙岩

文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。

尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是DREAMWEAVER提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。

基于表格的设计：表格布局使网页设计师制作网站时有了更多选择。在 HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。

结构设计：这个时期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学。同一时期也是大量应用 GIF 占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用 GIF 占位;如微软的“关于 HTML 表格中的 GIF 占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 高却包含了几百列的表格)。即使是稍微复杂一点儿的网页(比如多栏目页面)，设计师们都要依赖于表格来创建。

三、网站结构

网站结构是指网站中页面间的层次关系;按性质可分为逻辑结构及物理结构。网站结构对网站的搜索引擎友好性及用户体验有着非常重要的影响。

（一）网站结构整体先用DIV和CSS来进行构造，对整个网站进行布局，(二)网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结

电子商务2班201341440213孙岩

构可以帮助用户快速获取所需信息;相反，如果一个网站的结构极其糟糕的话，用户在访问时就犹如走进了一座迷宫，最后只会选择放弃浏览。

（三）网站结构还直接影响搜索引擎对页面的收录，一个合理的网站结构可以引导搜索引擎从中抓取更多有价值的页面。

网站结构对网站及网站中页面的影响。搜索引擎对重要页面的抓取

由于互联网中信息量极其庞大，为了向用户展示更多有价值的信息，搜索引擎会优先抓取每个网站中相对重要的页面(即权重较高的页面),然而，搜索引擎是怎样发现这些重要页面的呢?根据重要页面的链接指向的页面可能是重要页面的思路;搜索引擎首先会从权重相对较高的页面(即源页面)出发跟踪其中的链接，从而抓取其他相对重要的页面(即目标页面)。

网页设计的要素

四、应用工具方案

DreamWeaver自制动态HTML动画的网页。

DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。

DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。

版面布局：在你开始设计之前，你必须仔细地为站点挑选色彩组合。千万不要出现紫色的背景加上黑蓝色的文字的组合。要使整个站点保持同一种色彩组合，因为不同颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背

电子商务2班201341440213孙岩

景图，而不是仅用一种颜色。背景图案可以自己绘制，也可以从因特网上下载。通过模糊背景图案，就可以使文字更容易被阅读。要记住的是，图片不会被浏览器重画的，而背景色彩则是要被重新画的，因此，在上传你的图片之前，必须检查不同的浏览器是如何显示这些网页的。当增加文字时，尽量设置容易被阅读的字体和大小。如果你使用背景图片，那么，当网页被浏览时，背景色和字体将会先于背景图片被下载，因此，如果背景色和文本的颜色没有鲜明的对照的话，那么浏览者会有几秒钟的时间看到一个充满了不可阅读的文本的网页。解决这个问题的简单的方法就是，使背景色与背景图的颜色相类似。

浏览导航：站点的浏览导航必须被设计成非常容易。如果需要，把站点分割为几个部分。最容易的方法，就是在整个网站的所有的网页的左边放置一个菜单条。当然，除此以外，还有许多可选的方法。对于具有大量信息的站点，使用一个可扩展的菜单条会是一个不错的选择。无论你使用何种导航模式，在每一页都放置一个主页链接，那会是一种不错的设计思想；浏览者必须知道，无论何时，当他们迷失在你的站点浏览中时，都可以通过简单的一次点击就能准确地知道目前所处的位置。

Frame(帧,框架)的问题：Frame—— 你也许会喜欢它，也许不喜欢。如果你在你的网站上使用帧，你很可能使一个帧用于导航目的，另一个帧用于放置内容。你可以看见在同一页上有两个被分割的浏览窗口，你点击左边的帧，只会改变右边的内容。用帧来组织网站的内容，显然是非常容易的。

检验你的HTML代码 ：不要在你的网站上放置浏览计数器。计数器会让你的网站看起来不够专业化，如果浏览量不够的话，还会起到相反的宣传作用。最后，内容是金，如果能给的浏览者一些有价值的东西，如，信息，建议，或软件，那么就能吸引浏览者经常光顾你的网站。为你的站点增加消息板和聊天室，从而提高网站的交互性，使你和你的访问者交流，让访问者彼此交流。

五、频道栏目划分

图1

电子商务2班201341440213孙岩

六、代码段

content=“text/html;charset=gb2312” />