网页设计与应用

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

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

document.mytest.submit()4.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元素值改变时，产生该文件。例：

第四章

（2）textarea多行多列输入元素

功能：实施对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按钮时，产生该事件。例 ：

第四章 11........4.3窗体对象实例

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

test8_1.htm 调用动态按钮文档

第二篇：网页设计与应用毕业论文

目 录

第一章 前言„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„2 1.1 课题来源 „„„„„„„„„„„„„„„„„„„„„„„„„„„„ 2 1.2 网站开发项目需求分析„„„„„„„„„„„„„„„„„„„„„„„ 2 1.3 软件„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 3 1.4 软件运行环境第二章 网站制作„„„„„„„„„„„„„„„„„„„„3 第二章网络制作„„„„„„„„„„„„„„„„„„„„„„„„„„„„3 2.1做网页的步骤 „„„„„„„„„„„„„„„„„„„„„„„„„„„ 3 2.2 做网页的要素„„„„„„„„„„„„„„„„„„„„„„„„„„„„4 2.2.1网页的整体布局设计„„„„„„„„„„„„„„„„„„„„„„„„4 2.2.2 网页设计中色彩的运用„„„„„„„„„„„„„„„„„„„„„„„4 2.2.3 网页形式与内容相统一 „„„„„„„„„„„„„„„„„„„„„„ 4 2.3 系统各模块功能实现„„„„„„„„„„„„„„„„„„„„„„„„„4 2.3.1 系统登录模块 „„„„„„„„„„„„„„„„„„„„„„„„„„4 2.3.2 车辆展示模块 „„„„„„„„„„„„„„„„„„„„„„„„„„ 5 2.3.3 账号管理模块„„„„„„„„„„„„„„„„„„„„„„„„„„„5 第三章 网站的设计„„„„„„„„„„„„„„„„„„„„„„„„„„„ 5 3.1 主页的要求„„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.2 子页的要求„„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3 网页设计技巧„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3.1 框架的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3.2 CSS 样式的使用„„„„„„„„„„„„„„„„„„„„„„„„„„6 第四章 网站的应用„„„„„„„„„„„„„„„„„„„„„„„„„„„ 6 4.1 网页分为静态网页和动态网页„„„„„„„„„„„„„„„„„„„„„6 4.2 我的认识„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„6 结束语 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 7 参考文献„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„7

—1—

网页设计与应用

摘 要 ：汽车网站是一个结合了汽车销售等多功能浏览的汽车网站，我所使用的软件是

Macromedia 公 司 推 出 的 一 款 用 于 网 页 设 计 的 软 件 — —

dreamweaver8。在网页的制作与链接中，我学到了很多，然后补充一些比较热门的技巧。网站具有快捷。无距离更新的特性，同时提供进入日常业务处理平台的“入口”，具有较强的实用价值。这样的网站被广大消费者普遍使用，随着现在网络的普及和高效性的不断提高，它的展示作用和实用性已经使它的应用地位越来越高，越来越广泛。本文对网站设计作了介绍，进行了需求分析、模块划分、框架和 CSS 的介绍。由于制作经验不足，作品和论文中存在问题之处，请老师指导完善。

关键词： 超链接，外观，性能，框架，CSS 目 录

第一章 前言 1、1 课题来源

随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。以往，人们出行都以自行车居多，后来公交事业发展壮大，人们便乘坐公交汽车，现如今，随着人们生活水平的提高，越来越多的家庭已经拥有或者想拥有自己的私家车。正是因为人们的这些需求，越来越多的汽车网站出现在网络上，使人们可以随时了解自己想知道的汽车方面的新闻，真正的做到足不出户，便知天下事。把汽车销售与网络连接起来，是今后汽车销售发展的必然方向之一。

1．2 网站开发项目需求分析

一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。据专家预计，2009 年我国汽车需求量将超过 850 万辆。所以，做好汽车 —2—

网站就是为了使广大的消费者提供及时和有效的信息，为其选择适合自己的产品提供良好的参考。

1．3 使用软件

dreamwraver 软 件 由 美 国 著 名 的 网 站 应 用 开 发 工 具 生 产 厂 商 AdobeMacromedia 于 2005 年 6 月推出并正式投入市场以来，已经发展得相当成熟⑴。关于dreamwraver 的技术介绍的相关书籍与网络信息相当丰富。通过大学中软件开发环境课程的学习，对 dreamwraver 有了比较深刻的认识，并比较轻松的掌握了dreamwraver 的操作。因此，软件技术可以完成任务的要求。

1．4 软件运行环境

Dreamweaver 是一款简体中文软件，可以在 Win2003/WinXP 中安全运行⑵

第二章 网站制作

2．1 制做网页的步骤

在做网页之前，我确定了做网页的五个步骤。

一、确定网站主题 ：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。

二、搜集材料 ：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。

三、规划网站 ：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

四、选择合适的制作工具 ：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。

五、制作网页 ：材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出

①知新文化.HTML 完全手册与速查辞典[M].北京：科学出版社，第49页，2007.② 杨选辉，网页设计与制作教程[M].北京：清华大学出版社，第321页，2009.—3—

现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。此外，整体设计完成后我们还要将网页上传测试，使其和其他版本浏览器能够兼容，再者对网站推广宣传，及时的维护更新。

2.2 制作网页的要素

2.2.1 网页的整体布局设计

网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。⑴版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。

2.2.2 网页设计中色彩的运用

色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。⑵根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的 CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的 VI 进行色彩运用。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。⑶在设计中要考虑众多因素。

2.2.3 网页形式与内容相统一

要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。⑷运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在

①王诚君，刘振华，郭竑晖，《高中山.Dreamweaver 8 网页设计应用教程[M]》.北京：清华大学出版社，第332页，2007.②李光明，曹蕾，余辉.《中文Dreamweaver 8 网页设计与实训教程[M]》.北京：冶金工业出版社，第13页，2006.③周德华，许铭霖.《新编网页设计教程[M]》.北京：冶金工业出版社，第159页，2006.—4—

页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。

2．3 系统各模块功能实现

2.3.1 系统登录模块

1、该功能模块可以记录客户的邮箱地址，交易时还可以向客户发送交易信息，到帐确认等等。

2、登陆后系统会调出客户的记录，按照交易量的不同客户享受的折扣也不同，系统主界面

2.3.2 车辆展示模块⑴

1、该功能模块主要实现对车辆的展示。

2、该功能模块图片、文字介绍，360 度 flash 对各种车辆的展示。

2.3.3 账号管理模块⑵

1、挂失业务在正常工作中肯定会遇到挂失的业务，确定挂失后，数据库会将该账号挂起，等待客户做进一步操作。

2、冻结业务，客户对账号有冻结的权利，在客户没有输入解冻密码之前，任何人都无法动用帐上的资金。

3、流水查询客户可以查询曾经交易过的记录。

4、客户可以自行对其账号密码进行修改，网站管理人员也可以添加或删除账号。

第三章 网站的设计

3.1 主页的要求

对于销售业务系统要求运行的工作环境稳定，易于操作，界面美观大方，对 于前台展示界面要求系统便于维护，安全可靠，对于广大客户所要执行的操作 简单易懂，远程访问速度较快，界面友好美观，有基本的错误提醒功能，远程 操作数据库正确，要求和客户有一定的互动性，在主页上直观的就可以查看浏 览者所想要了解的东西。

3.2 子页的要求

后面的工作就是子页的选择与链接，子页应该丰富多彩，内容充实，浏览 性强，比如说，想要销售一辆汽车，应该有它的全部资料，包括外观、内饰、性能指标、出产地、价

① 赵铭建，赵慧，乔孟丽，康梅娟.《网页设计与制作[M].》东营：中国石油大学出版社，第66页，2007.②赵祖荫，王云翔，胡耀芳.《网页设计与制作教程[M]》.北京：清华大学出版社，第187页，2008.—5—

格等诸多方面，鉴于以上方面，我开始了子页的选择 与链接。3.3 网页设计技巧

一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架 和 CSS 样式的运用两方面来介绍网页设计的技巧。⑴

3.3.1 框架的使用

FRAME（框架）是 Web 上经常会看到的页面结构。框架的最常见用途就是导航⑵。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框 架。使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相 关的图形；每个框架都具有自己的滚动条如果内容太大，在窗口中显示不下，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果 导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动 回顶部来使用导航条。使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐；对 导航进行测试可能很耗时间。许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框 架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要 地使用框架的站点例如，每当访问者单击导航按钮时就重新加载导航框架内 容的框架集。如果框架使用得法例如，在允许其他框架的内容发生更改的同 时，使一个框架中的导航控件保持静态，则这些框架对于某些站点可能非常 有用。

3.3.2 CSS 样式的使用

CSS 层叠 样 式 表 是 一 种 制 作 网 页 的 新 技 术 它 的 全 称 是 级 联 样 式 表 即Cascading StyleSheets 的缩写，又称之为风格样式表单。⑶CSS 是在网页制作过程中普遍用到的技术。采用了 CSS 技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。

第四章 网页的应用

4.1 网页分为静态网页和动态网页。

4.1.1 优点：

静态网页：1.静态网页的内容相对稳定，因此容易被搜索引擎检索； 动态网页：

1.动态网页以数据库技术为基础，可以大大减少降低网站维护的工作量；

2.采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、顶订单管理等等

①]陈季.《 Flash 基础与实例教程[M]》.北京：北京希望电子出版社，第88页，2005.②丁海祥.《计算机平面设计实训[M].》 北京：高等教育出版社，第54页，2005.③曹雁青，杨聪.《 Photoshop 经典作品赏析[M].》北京：北京海洋智慧图书有限公司，第35页，2002.—6—

4.1.2 缺点： 静态网页：

1.静态网页没有数据库的支持，在网站能制作和维护方面工作量较大，因此 当网站信息量很大时完全依靠静态网页制作方式比较困难； 2.静态网页的交互性交叉，在功能方面有较大的限制。动态网页：1.动态网页中的“？”对搜索引擎检索存在一定的问题，搜索引擎一般不可 能从一个网站的数据库中访问全部网页，或者处于技术方面的考虑，搜索 蜘蛛不去抓取网址中“？”后面的内容，因此采用动态网页的网站在进行 搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

4.2 我的认识

网页应用很广泛，当我们打开 IE 浏览器的时候，出现在屏幕上的就是一个网页，随着社会的进步，生活节奏地加快，各行各业都开始使用互联网来宣传自己的产品，或者进行其他的活动。网站设计离不开网页，网页像书中的章页，由这些页面构成了整个网站。不管是大企业还是小公司，都有自己的网站，当然网站是离不开网页的。网页中的信息可以给我们带来很多帮助，可以用来学习或者做一些活动的参考。通过对这门课程的学习会收获很多。

结束语

在系统的需求分析过程中，由于不熟悉，产生了很大的困难，通过与指导老师的探讨与沟通，我渐渐地对系统有了一个大体的认识。虽然说在系统需求分析过程中花费了很多时间，但是我认为这是必要的也是必须的。这次毕业设计中我了解到了很多的知识，这对我今后的学习和生活都将会有很大的帮助。我明白了对于一个完整性的软件设计流程的主要性，在整个网站设计过程中前期需求分析，可行性分析是非常重要的环节，可以说是软件设计的核心，在过去我一直认为详细设计编码才是最重要的，因为再好的需求，编码不成功，软件就无法正常运行。锻炼了自己发现问题，解决问题的能力。开发过程中遇到一些需求的变化，通过修改设计思路，避免在后期产生更大的错误。再详细设计的每一步都有可能出错，所以会进行非常多的调试工作，只要发现问题就调试解决，这样不仅增强了信心，也很好的锻炼了自己遇到问题不急不躁，耐心解决的能力。

参 考 文 献

〈1〉《信息技术》江苏科学技术出版社.〈2〉《网页制作》人民邮电出版社.〈3〉 《dreamweaver8 参考手册》2008 年版.，〈4〉柯林森、刘志忠，CSS 基础教程，人民邮电出版社，2007.9.〈5〉苏昱，样式表中文手册，帮助文档。〈6〉韩国锋、ASP 柯华坤，网站开发典型模块与实例精讲，电子工业出版社，2006.8.—7—

第三篇：网页设计与制作的应用论文

项目驱动教学法是以项目为主线，将学生的学习活动与实际的项目相结合，师生共同研究并实施一个具体的项目而进行的教学活动，是鼓励学生积极参与、协作、创新的一种教学模式。在《网页设计与制作》课程教学过程中引入具体的项目，以项目带动课程各知识点的学习，采用循序渐进、由浅入深的方式开展课堂教学，不仅能够调动学生学习的积极性，产生学习的兴趣，还能培养他们的实践动手能力、协同工作能力和创新能力。、现状分析

《网页设计与制作》是计算机应用技术专业的必修课，同时也是核心课，作为《Asp.net程序设计》的前导课程，需要学生熟练掌握网站前台界面设计，为将来开发动态网站打下良好的基础。然而，传统教学存在问题如下：

1.1 教学方法难以吸引学生兴趣

传统方式由教师在多媒体教室讲解，学生上机完成实验实例，虽然也能学到制作网页的一些知识，但是很难激发学生学习的兴趣。几次上机后，部分同学就产生惰性情绪，布置的案例完成得越来越少，久而久之，甚至有少数学生放弃该课程学习。

1.2 教学缺乏整体性

逐章节展开的教学，尽管也涵盖了网页设计相关内容，但是上机实验时只是完成案例中某部分相关知识点的实践，学生还是不会制作一个完整的网站，缺乏对网站制作流程的系统性认识。

1.3 缺乏创新意识

以教师为主体的教学最大弊病在于学生缺乏主动意识，他们更多的是模仿教师给的案例或者互联网上发布的网站，几乎没有创新。被动的学习使得学生产生只要把老师布置的任务做完就万事大吉的心理，根本不会想到去主动思考与创新。

1.4 考核方式单一

对于这类实践性强的课程，以往的试卷考试难以对学生的动手能力进行评价，因此发掘新的考核方式，打破传统思维着重考核学生的创新思维能力和动手实践能力就尤为必要了。、教学内容选取

经过市场调研，《网页设计与制作》课程相关职业岗位主要是“网页界面设计”和“网站管理与维护”，根据这两个职业岗位能力要求，选取合适的教学内容。

3、项目式教学设计

教学过程中，围绕着“欣赏网站”、“设计网站”和“维护网站”展开，通过欣赏往届优秀学生作品以及国内外不同网站风格，引起学生学习的兴趣。一个完整的项目网站由若干个分页面构成，因此各分页面设计是教学的重点，也是难点。网站设计好后，需要定期对网站进行维护，包括检查和修复超级链接、内容更新、网站推广等等。分页面设计分为初级阶段和高级阶段，初级阶段以基于表格布局的页面设计为主，高级阶段以基于Web标准的页面设计为依据，具体教学设计情境如表2所示。选取合适的项目实例是项目教学法能否成功实施的关键。项目的选取可依据职业岗位能力对应的教学内容，既要涵盖该课程的基本知识点，又要考虑学生的实际基础，难易得当。在分析项目、讨论、实施项目的过程中，学生即可在轻松、融洽的氛围中掌握网页制作的技巧。

4、考核方式改革

根据学院要求，传统课程一般按照期末卷面考试成绩占60%，平时成绩占40%计算出总评成绩。显然，这种分配制度已不适合新方法下的教学。因此，依据实际教学情况重新分配了成绩比例，期末作品占50%，展示讲解作品占20%，出勤平时表现占30%。学生以分组或独立的方式完成一个完整的网站作品，教师给出网站设计基本要求，期末采用集中讲解、点评的方式，由每位学生在多媒体教室面对全班同学介绍网站的内容、制作技巧、特色之处等，教师和学生进行点评，肯定其优点，同时对不足之处提出改进思路。学生对此方式表现出强烈的热情，遇到网页中的与众不同处会提出各种问题，有时候甚至刨根问底具体制作步骤。、结语

实践证明，在《网页设计与制作》课程教学中采用项目驱动教学法取得了良好的效果，学生从零起点到熟练掌握网页设计技巧，变化突飞猛进。几乎所有的同学都能够独自搜集素材开发一个小型的网站，并且在展示成果的过程中相互学习，取长补短。项目驱动教学法改革了计算机类课程教学模式、教学方法，更新了教学理念、教学内容，完善了课程评价体系，使学生具备网站规划，网页制作、脚本代码编写等综合技能。如何在计算机类专业课程中广泛实施项目教学法，需要我们进一步研究和实践。

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

第一章

绪论

摘 要

本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。

本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章：网页设计语言概述，本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章：内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。第五章：WEB页面信息的交互——窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

关键词： 网页制作；网页设计；HTML；ASP

第一章

绪论

第一章 绪论

随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。

1.1 网页设计概述

网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。

1.2 网页设计的要素

网页设计的两大要素是：整体风格和色彩搭配。

一、确定网站的整体风格

在这里，我提供给大家一些参考经验：

1．将你的标志logo，尽可能的放在每个页面上最突出的位置。2．突出你的标准色彩。

3．总结一句能反映贵站精髓的宣传标语！

4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！

二、网页色彩的搭配

1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2．用两种色彩。先选定一种色彩，然后选择它的对比色。

3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

1.3 大作业目的和意义

本大作业主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：通过已经做好的网页，分析html网页设计技术、XML技术、Java Applet技术和Javascript技术在网页设计中的应用。

第一章

绪论

1.4 要分析的网页

第一章

绪论

第一章

绪论

第二章

HTML网页设计技术的应用

第二章 HTML网页设计技术的应用

2.1 HTML语言介绍

HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

2.1.1 HTML语言的特点

HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：

1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。

3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

2.1.2 HTML语言的编辑软件

HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：

1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。

2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。

2.1.4 html语言在网页设计中的应用

第二章

HTML网页设计技术的应用

2.2.3JavaScript技术在网页设计中应用

一、JavaScript概述

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：

1、是一种脚本编写语言

JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、基于对象的语言。

JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性

JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4、安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。

总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。

第二章

HTML网页设计技术的应用

第五章

色彩在网页中的应用

第五章 色彩在网页中的应用

5.1色彩在网页中的应用

色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。

先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。

5.2主页色彩的处理

色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。

5.3常用的配色方案

1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。

2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。

3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。

第五章

色彩在网页中的应用

最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。

5.4合理搭配网页色彩

网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大，以突出主要内容

网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。

第五章

色彩在网页中的应用

第六章 WEB页面信息的交互——窗体与框架

要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。

6.1窗体基础知识

窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。

6.1.1窗体对象

窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。