《网页设计》大纲

第一篇：《网页设计》大纲

《网页设计》教学大纲

网页设计

课程名称：网页设计 课程编号：12412219 总学时 36 适用对象：教育技术学本科专业

一、教学目的与任务

1、教学目的：本课程是教育技术学专业的专业课程，具有很强的实践性，重在掊养学生开发与制作网络课件及网站的专业技能。

2、教学任务：学生通过本课程的学习之后能掌握网络课件及网站的开发与制作流程，能独立制作简单网络课程。

二、教学的基本要求

本课程是一门实践性操作性很强的课程，重在培养学生的网页设计与制作的能力，为学生制作精品课程打基础，理论以精讲为主，但要注意给学生较多的上机实践机会，让学生在动手过程中提高网页制作能力。

三、教学内容与要求 第一章 WWW概述

（一）教学内容 1.1概述

1.1.1什么是Internet 1.1.2 Internet与TCP/IP协议

1.1.3 Internet网络地址

1.1.4 连接Internet的方式 1.2 Web服务器

1.2.1 Web/Server概述

1.2.2 Windows Web 服务器的建立

1.2.3 Unix Web服务器的建立

1.3 Internet Explorer 概述

1、设置Internet连接

2、Internet的使用

3、浏览Web的捷径

4、可定义的浏览器

5、便携机的最佳选择

1.4 Internet Explorer的快捷键 1.5 Internet 技术用语一览

（二）教学要求

本章内容比较简单且应用最为广泛,主要讲述了Web服务器的工作原理和Internet Explorer的使用方法,教师在讲述本章内容时应该多联系实际.。这样可提高上课的趣味性。第二章 网页制作概述

（一）教学内容 2.1 网站的种类

1、公司或单位的信息发布

吴代文

Page 1 of 8 2009、9、5

《网页设计》教学大纲

2、出版物

3、个人主页

4、网上购物站点

5、专题介绍

6、实用信息服务 2.2网站结构的规划

1.分级结构

2.线性结构

3.Web结构

2.3网站的设计原则及标准

1、网站要包括哪些内容

2、怎样构思一个好网站

3、什么是好的设计

4、慎用图像

5、设计主页的考虑 2.4 网页外观的设计

1.不要先决定网页的外观，然後强迫自已去适应它，应该从你的访客对像，你要传达的讯息以及你的制网目标推导出一个最适合的网页架构 2.每页排版不要太疏或用太大的字，尽量避免看你的网页时要作很大的卷动，要知道在一页的上部分是显眼而宝贵的地方，不要只放著几个粗大的字或图片。

3.切勿以800x600以上的解像度设计网页。常用的解像度是640x480及800x600。明智的网页设计者是处处照顾浏览者，绝不会炫耀自己有专线、有17寸的显示器等。

4.不要於每页插入太多的广告牌。相信你亦不喜欢浏览一些贴满广告的网页吧，你要考虑到该页内容与广告的比例，摆放的位置亦很重要，不妨多参考别人的做法。广告太多，只会令人烦厌。2.5网页制作工具概述

2.5.1 Frontpage 2.5.2 Dreamweaver 2.6 网页美化工具

2.6.1 Photoshop 2.6.2 Fireworks 2.6.3 Flash

（二）教学要求

本章主要讲述了网站的种类、网站的结构规划、网站的设计原则及标准等，这三节是本章的重点，教师在讲授本章时可以用一些知名网站来作为实例讲解。第三章 FrongPage 2000 网页制作

（一）教学内容

3.1 FrontPage 2000 简介

1、直观形象的站点管理

2、强大的模板和向导功能

3、智能化管理

4、强大灵活的主页制作功能 3.2 FrontPage窗口介绍及视图

吴代文

Page 2 of 8 2009、9、5

《网页设计》教学大纲

1、网页视图

2、文件夹视图

3、报表视图

4、导航视图

5、超链接视图

6、任务视图 3.3 创建Web站点 3.4 站点管理

3.4.1 站点设置

3.4.2 配置图片编辑器

3.4.3 为已有的Web站点添加网页 3.5 利用FrontPage 制作网页

（二）教学要求

FrontPage是一款所见即所得的可视化网页制作工具，本章主要讲述如何用FrontPage制作网页，配制和管理站点，教师在讲授本章时应该多举一些实例，并给学生较多的上机时间。

第四章 使用Dreamweaver Mx制作网页

（一）教学内容

4.1 Dreamweaver Mx简介

4.1.1 Dreamweaver 的新特性 4.1.2 Dreamweaver MX 的界面 4.2 建立站点 4.3 建立页面

4.4 建立超链接 4.5 表格

4.5.1 创建表格 4.5.2编辑表格 4.5.3表格的修饰 4.5.4表格的嵌大套 4.5.5套用表格样式 4.5.6导入表格数据文件 4.5.7用表格进行页面布局 4.6框架

4.6.1 框架的创建

4.6.2 设置框架及框架集的属性 4.6.3 对框架页面的编辑 4.7 表单

4.7.1 表单简介 4.7.2 插入文本框 4.8 动态效果

4.8.1 时间轴和行为概述 4.8.2 使用时间轴与复选框 4.8.3 内置行为 4.8.4 插入按钮

吴代文

Page 3 of 8 2009、9、5

《网页设计》教学大纲

（二）教学要求

Dreamweaver MX是一款所见即所得的可视化网页制作工具，本章主要讲述如何用Dreamweaver MX制作网页，配制和管理站点，DreamweaverMX比FrontPage更专业，制作网页的效率更高。教师在讲授本章时应该多举一些实例，并给学生较多的上机时间。

第五章 使用Photoshop 美化网页

（一）教学内容 5.1概述

5.2颜色模式和文件格式的介绍

5.2.1 颜色模式 5.2.2 文件格式

5.3 Photoshop 5.0的基本操作 5.4 创作特殊效果图像 5.5 创建特殊效果文字 5.6综合实例

（二）教学要求

Photoshop是一款功能强大的图像处理软件，本章主要讲述如何用Photoshop处理图片，关化网页，教师在讲述本章时，应该注意一些实例，将一些重要的命令和操作用实例的形式传授给学生。第六章 Fireworks 4.0

（一）教学内容

6.1 Fireworks 4.0的新特性

6.2 安装Fireworks 4.0 的系统要求 6.3 Fireworks 4.0的安装

6.4 Fireworks 4.0 的工作界面

6.4.1 菜单栏 6.4.2 工具栏 6.4.3 工作面板 6.4.4 工具箱 6.4.5 制作实例

（二）教学要求

Fireworks 4.0是一款功能强大的网页图片处理软件，它能和Dreamweaver 有效结合在一起，本章主要讲述如何用Photoshop处理图片，关化网页，教师在讲述本章时，应该注意一些实例，将一些重要的命令和操作用实例的形式传授给学生。

第七章 Flash MX

（一）教学内容 7.1 Flash MX 简介 7.2 Flash MX 的安装

7.3 Flash MX 中的一些概念 7.4 Flash MX 的界面组成 7.5 主要绘图工具的使用

7.6 Flash MX 中的一些基本操作

7.6.1 帧的操作

吴代文

Page 4 of 8 2009、9、5

《网页设计》教学大纲

7.6.2 图层的操作

7.6.3 场景的操作 7.6.4 控制面板的作用 7.6.5 创建、转换组件 7.6.6 预览和发布 7.7 添加音效

7.7.1 导入声音文件 7.7.2 在影片中加入声音 7.7.3 声音的编辑 7.7.4 加入音效实例

7.8 动画的制作、编辑及其实例

7.8．1 Flash MX动画的类型

7.8.2 Flash MX动画的制作 7.8.3 Flash MX 动画的编辑 7.8.4 Flash MX 动画制作实例 7.9 文件的导入、发布和导出

7.9.1 文件的导入 7.9.2 文件的发布 7.9.3 文件的导出

（二）教学要求

Flash MX是一款功能强大的动画制作软件，本章主要讲述如何用Flash制作动画美化网页，教师在讲述本章时，应该注意一些实例，将一些重要的命令和操作用实例的形式传授给学生。

第八章 网页标置语言HTML、DHTML、CSS、XML

（一）教学内容 8.1 HTML简介

8.1.1 一个实例 8.1.2 HEAD标签 8.1.3 BODY标签

8.1.4 标题文字显示等级 8.2 格式及文字

8.2.1 格式标准 8.2.2 文字标准 8.3 图像控制标签

8.3.1 插入图像 8.3.2 图像控制 8.3.3 HR标签 8.4 网页中的表

8.4.1 基本表格 8.4.2 表格控制 8.5 网页中的链接

8.5.1 链接标签 8.5.2 链接锚点 8.6 网页的框架结构

吴代文

Page 5 of 8 2009、9、5

《网页设计》教学大纲

8.6.1 基本语法

8.6.2 Frame 的外观设置 8.7 网页中的表单

8.7.1 基本语法 8.7.2 列表框标签 8.8 基它标签 8.9 DHTML与CSS 8.9.1 CSS-P初步

8.9.2 通用JavaScript 8.9.3 分层技术

8.9.4 用JavaScript控制图片 8.9.5 提示效果 8.10 XML 8.10.1 HTML的局限性 8.10.2 XML的兴起 8.10.3 XML的应用展望 8.10.4 XML的例子 8.10.5 序

8.10.6 元素声明 8.10.7 声明规则

8.10.8 XML的其他组件

（二）教学要求

本章主要讲述了网页标置语言HTML、DHTML、CSS、XML，了解一定的网页标置语言对于制作网页很有帮助，教师在讲述本章时，应该注意一些实例，将一些重要的命令和操作用实例的形式传授给学生。第九章 网页编程

（一）教学内容 9.1 JavaScript 9.1.1 JavaScript语言简介 9.1.2 JavaScript编程基础 9.1.3 JavaScript应用实例 9.2 ASP编程

9.2.1 ASP简介 9.2.2 ASP编程初步

9.2.3 ASP的基本脚本语言 9.2.4 使用SSI 9.2.5 动态数据交换的实现 9.2.6 ASP的内置组件 9.3 PHP编程

9.3.1 PHP简介 9.3.2 PHP语法简介 9.3.3 PHP编程实例 9.4 Java与JSP 9.4.1 Java概述

吴代文

Page 6 of 8 2009、9、5

《网页设计》教学大纲

9.4.2 Java应用程序 9.4.3 Java Applet 9.4.4 Java Applet图形界面输入输出 9.4.5 Java Servlet 9.4.6 JavaServer Pages 9.4.7 JSP与ASP的比较

9.4.8 JSP的基本语法与示例 9.4.9 XML与JSP

（二）教学要求

本章主要大致介绍了一下各种网页编程语言，使学生能对各种网页编程语言有一定的了解，本章的重点前两节，教师在讲述本章时，应该注意一些实例，将一些重要的命令和操作用实例的形式传授给学生。第十章 网站建设实例

（一）教学内容

10.1 网站的设计原则及标准 10.2 准备工作 10.3 具体设计及规划 10.4 建立网站（Web站点）10.5 主页的制作 10.6 网页的上传与维护

（二）教学要求

本章主要以实例的形式讲述如何制作网站，比较全面地应用以前所学的知识来构建并制作一个网站。教师在讲述本章时，应该多找一些设计得比较成功的网站并给学生详细分析。

四、学时分配与教学方式 总学时 ：36 第一章 WWW概述 3学时 第二章 网页制作概述 3学时 第三章 FrongPage 2000 网页制作 4学时 第四章 使用Dreamweaver Mx制作网页 3学时 第五章 使用Photoshop 美化网页 4学时 第六章 Fireworks 4.0 4学时 第七章 Flash MX 4学时 第八章 网页标置语言HTML、DHTML、CSS、XML 3学时 第九章 网页编程 4学时 第十章 网站建设实例 4学时

吴代文

Page 7 of 8 2009、9、5

《网页设计》教学大纲

教学方式：团体心理咨询是一门应用性较强的心理学专业的基础课，其教学方式应以课堂讲授和现场训练为主，同时要结合课堂讨论、案例分析、设计方案等方式，提高学生分析心理问题，抓住主要现象的能力，重点形成学生组织开展团体训练的能力。

五、考核方式

考试加作品

六、本课程与基它课程的关系

本课程是网络教育应用、网络课程的开发与制作等后续课程的基础课程。

七、教材与参考书

《网页的设计与制作教程》 徐国平主编 高等教育出版社 《Dreamweaver MX 中文版自学手岫》 人民邮电出版社 《新手学建网站》 范德明 编著 人民邮电出版社

吴代文

Page 8 of 8 2009、9、5

第二篇：ASP动态网页设计复习大纲

ASP动态网页设计复习大纲

考试范围：ASP内容

考查重点：第三章及第八章

1、ASP的内置对象及其在具体网页设计编程中的用法

2、ASP对象的含义

3、循环语句的控制及其区别

4、表单的用法及数据的传输方式

5、ASP语句结构

第三篇：网页设计说明书

网 站 设 计 说 明 书

一、设计理念

本网站定位 本身是用于展示个人作品的一个平台页面系统。在展示之余也有推销网站 建设之功效....页面主要以 深红色调风格为主,站点分为有 首页简介、关于我的作品、经典作品展示、与我联系方式等 各个方面子页面.本站页面主要展示的是本人在暑假实习公司开发的一些 作品...整体页面使用到了 CSS 层样式技术。

二、设计流程

网站主要以自己喜爱的东西而制作，并根据,相应要求 到网上寻找相应的 图片素材 以及 应用到 PS 图片设计结束.最后 应用 HTML 网站设计技术 使用 DIV+CSS 进行页面布局的定位设计.三、使用的工具与技术

网页制作工具 : Dreamweaver CS5 多媒体设计制作工具:Photoshop 应用到的设计技术： HTML、CSS.四、网站设计说明

网站名称: 梦幻部落-作品展示厅 整体形象设计包括标准字、Logo、标准色彩、广告语等.首页作为网站的形象页，作为网站的欢迎页面，引入的元素大致有网站名称、LOGO、形象图片、宣传文字、栏目导航等要素,是彰显网站整体风格的重要页面, 并结合 FLASH 动画来展示.网站形象页的设计突出..展示为主题，通过文字、形象、图片的巧妙烘托，令页面富有 层次感，达到赏心悦目的效果。

五、页面结构布局

(1)、首页布局、网站 Logo 幻灯片展示切换 页面链接 站点介绍 页面介绍 在线联系方式 页面底部

(2)、站长个人简介页面、网站 Logo 幻灯片展示切换 页面链接 个人简介 内容 更多链接 页面底部

(3)、作品展示页面、网站 Logo 幻灯片展示切换 页面链接 作品展示 栏 页面底部

(4)、联系方式页面、网站 Logo 幻灯片展示切换 页面链接 联系 提交 表单 其他联系方式 网站建设 套餐 页面底部

第四篇：网页设计要点

1、页面布局的概念包括哪些内容？

答：页面布局的概念包括：页面尺寸、整体造型、页眉、文体、页脚、图片、多媒体。

2、图像抖动是什么？

答：图像抖动伪造了那些在颜色有限的调色板中不能显示出来的颜色；在视觉上，近邻像素倾向于混合而产生在图像中实际不存在的颜色，从而达到一种补偿目的。“抖动”的图像有很多颗粒，显得图像非常粗糙。

3、运用色块制作网页时需要掌握的要点有哪些？ 答：（1）冷暖色调在均匀使用时不宜靠近，如果必须时，应当使用中间色（白色或黑色分隔过渡，在对称色块构图中更应该注意。

（2）纯度接近同的两种颜色也不宜放在一起，如亮红和亮绿。颜色太纯，对眼睛有强烈刺激，容易造成眼睛疲劳，应降低其中一种颜色的纯度，可以选择在亮色中加入其它颜色用以平衡的方法，如可以使用墨绿配亮红色，这样焦点滞留在红色上，绿色也不会干扰视线。

（3）整个页面中最好有一个主色调，否则整个页面就显得零乱。在制作非对称色块网页和渐变色网页时，这是一个原则。

4、论述网页页面布局的方法有哪些？

答：在进行网页布局时，需要有一片空白的空间供创作人员自由发挥，主要可以通过两种工具来进行创作，第一种工具是纸，在一张白纸上进行布局构思；第二种工具是计算机通过某些软件来进行网页布局构思，如Photoshop

5、试比较GIF格式与JPEG格式的原理与各自适用的范围。答：有一个非常简单的原则来判断应该采用哪种文件存储格式：如果是自己设计的线条简单、色彩种类比较少的图形，或者是制作透明图形、制作动画，那么就用GIF格式。因为GIF文件能够做动画，而且它的压缩算法是通过精简色彩集来实现的；如果需要在网页上放置一张照片，或者是处理过的照片，那么就使用JPEG文件格式，因为JPEG的压缩算法对包含有复杂的颜色的图片很有效。

在GIF格式中最多允许有256色，而JPEG则没有这个限制，且可以显示所有的RGB颜色。RGB颜色在一般的个人电脑上可以从000000~FFFFFF，也就是所谓的24位真彩色，它共有256*256*256=16777216种不同的色彩。而GIF的颜色只用8位表示，所以其色彩范围为00~FF，只能显示256种颜色。在使用彩色照片时，由于彩色照片属于连续色调的图像，因此它所包含的颜色数目一般远远大于256色。如果把它保存为GIF格式的文件，将不能把这些颜色都显示出来。GIF的原理是先为所有的颜色建立一个索引，然后选择其中256种最常见的颜色进行显示，因此GIF用来处理高清晰度照片是不合适的。

如果颜色数目少于`256色，保存为真彩色的图像就会造成浪费，因为在保存为真彩色JPEG的过程中，对每一个象素点，都要建立颜色信息，这样就会有大量的颜色信息是重复的，图片文件自然就会增大了。而GIF与JPEG不同，如前面所述，他首先在GIF文件头部建立一个颜色索引表，然后仅仅保存各象素点对应的颜色索引号。当软件在显示这个文件时，首先要对GIF图像进行解码，就会按照索引号在表中寻找对应的颜色。因此在保存简单颜色的图像时，GIF大量采用索引，就比JPEG直接存储各点的颜色信息节省很多。

6、PHOTOSHOP向量图的优点和缺点有哪些？ 答：优点主要有：与分辨率无关，用户可以对图形进行任意放大或缩小，而不会影响它的清晰度和光滑性；便于修改，通过调整其控制点位置，可轻松修改其形状。

向量图的缺点有：不易制作色彩丰富的图像，而且绘制出来的图像也很不逼真。

7、网站设计中应注意的几个方面（通用规则）

答：网页设计需要遵从一定的通用规则，必须按照一定的规划、想法来实施。网页设计的原则不仅体现在网页的风格、层次构思和网页的页面构思中，还包括更多更广的设计思想。网页设计不应该从设计者本身出发，而必须要从访问者的角度来思考问题。共有八个问题要注意：（1）网站设计目的决定设计方案。在设计一个网站之前，应当有一定的目的性。比如制作个人网页主要是为了宣传自己或者自娱自乐，而公司的网页就不仅仅在于宣传，更多的时候则是提供自己的商务信息并与客户进行商务活动，有些商业网站则提供有特色的服务，比如搜索引擎。因此在网页的设计方案中，个人网页的内容往往由与个人有关的方面组成，包括自我介绍，个人爱好，个人收藏等。

（2）浏览者的需求第一位。

（3）页面的有效性

（4）页面布局的保持统一性。

页面布局往往能显示一个网站的统一性，如使用同样的背景。

（5）使用表格和适当的帧结构来设计网页。

使用表格往往可以合理安排许多网页元素，实现图文混排的效果。

（6）谨慎使用图片。

（7）平面设计意识。

（8）减少Java Applet和其它多媒体的使用。

8、论述规划目录结构时应当遵循的原则 答：（1）不要将所有文件都存放在根目录下；

（2）按栏目内容分别建立子目录；

（3）在每个主目录下都建立独立的images目录；

（4）目录的层次不要太深；

（5）切忌使用中文目录；

（6）不要使用过长文件名的目录；

（7）尽量使用意义明确的目录。

9、商业站点的风格特征有哪些？ 答：商业公司站点由于其目的与个人站点以及非盈利性的组织完全不一样，因此它的站点风格也与其他两类站点的风格完全不一样。主要体现在以下几个方面：

（1）公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。（2）可以采用主题图形产品广告来突出公司形象与风格。主题图形或产品广告应精心设计，给浏览者以良好的第一映像。

（3）主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图片、文字间的色彩配合，同时要和主题图形相互衬托，主题图形如果较大，则栏目必须缩小。

（4）不要把主题栏目和次要栏目都显示在同一个页面上。可以通过站点组织图表示网站的结构布局，或者采用Java Script来生成可以展开的“目录树”。（5）商业栏目一般都有固定的栏目页面，如Support（技术支持）、Service（服务）、About Us（关于公司）等。这些栏目不是网站的主要栏目，不需要采用很醒目的方式出现，但是它们应为于比较方便用户单击的位置，可以采用出现在网页顶端（或者底端）的细长的导航条的方式。

（6）必须建立站内搜索引擎，以方便浏览者在站内查找所需要的信息。

10、非商业组织网站的风格有哪些？ 答：（1）强调页面的主色调。

（2）主题图形要求反映单位的风采，设计应有创意、有内涵、庄重中不乏活泼。

（3）超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎。

（4）信息查看板很重要，因为非商业组织的网站更新不如商业网站频繁，始终如一的画面显得枯燥，所以经常去更新信息查看板，将增加访问者的访问兴趣。放置信息查看板主要方法有两种方法，一是在主页直接放置信息查看板，二是当页面上主题图形小，超级链接也不多的情况下不宜把信息查看板放在主页，可以在主页上增加一个快速进入信息查看板的超级链接。

11、简述站点的层次和典型的站点结构

答：为了合理组织整个站点中的所有内容，便于访问者查找和浏览，一般来说站点都把自身的内容分为多个层次，每个层次逐渐递进，最后达到最详细的内容。网站的层次正是指整个站点各个层次之间的结构关系。大部分网站制作的初学者不重视这种层次规划，以至于网页风格不统一，在网页导航上也出现了很多问题。按照专业网页设计流程，制作网页前应先设计好导航条，即需要事先规划好网页的层次结构。

无论是复杂的商业网站还是简单的个人网站，在网页的层次结构上都存在一些共同点，即任何一个网站均可以用三级结构实现，也就是“首页——栏目页——文章页”或“一级页面——二级页面——三级页面”结构。制作好这三级结构，就能制作好其他类型的结构，因为任何网站都是以这三级结构为基础并在这个基础上扩张，站点的各级结构各有特点。

目前互联网上制作首页大多采用大主题图形配以少量文字介绍的方法，除了大型的共众网站外，其他的站点都不必采用制作大量超级链接的做法。对于目前的商业网站和个人网站来说这条原则都是适用的。因此，主页的制作将主要是主题图形的制作以及页面构图

二级页面是每个栏目的起始页，该页面应有与该栏目相对应的主题图形，相对于整个网站的主题图形来说，标志要小但必须醒目。当用户进入该页面后，需要设置通向其它栏目以及返回首条上的明确指示。

三级页面是文章页，位于最底层，当浏览者进入栏目后见到的超级链接，就是通向大篇幅文本的。由于文章页本身包含大量文字，图片不宜安放过多，必要时，可以为文章设计一些文章主题图形，但这将服务器的负荷更重，一般情况下个人网站应避免这样做，如果个人网站往往把文章标题做成各种各样的美术字、特效字，结果将是得不偿失。文字可以直接用文本表示，只要色彩、字体搭配得当，就可以制作出美丽的页面，应把有限的页面空间留给那些无法用文本表现的装饰图片上。

12、论述网页设计的通用规则。

答：网页设计需要遵从一定的通用规则，必须按照一定的规划、想法来实施。网页设计的原则不仅体现在网页的风格、层次构思和网页的页面构思中，还包括更多更广的设计思想。网页设计不应该从设计者本身出发，而必须要从访问者的角度来思考问题。共有八个问题要注意：（1）网站设计目的决定设计方案。在设计一个网站之前，应当有一定的目的性。比如制作个人网页主要是为了宣传自己或者自娱自乐，而公司的网页就不仅仅在于宣传，更多的时候则是提供自己的商务信息并与客户进行商务活动，有些商业网站则提供有特色的服务，比如搜索引擎。因此在网页的设计方案中，个人网页的内容往往由与个人有关的方面组成，包括自我介绍，个人爱好，个人收藏等。

（2）浏览者的需求第一位。

（3）页面的有效性

（4）页面布局的保持统一性。

页面布局往往能显示一个网站的统一性，如使用同样的背景。

（5）使用表格和适当的帧结构来设计网页。

使用表格往往可以合理安排许多网页元素，实现图文混排的效果。

（6）谨慎使用图片。

（7）平面设计意识。

（8）减少Java Applet和其它多媒体的使用。

13、简述商业网站的风格特征。答：商业公司站点由于其目的与个人站点以及非盈利性的组织完全不一样，因此它的站点风格也与其他两类站点的风格完全不一样。主要体现在以下几个方面：

（7）公司徽标或商标应当出现在页面最上方，尽可能做到色彩醒目，同时占用版面小。（8）可以采用主题图形产品广告来突出公司形象与风格。主题图形或产品广告应精心设计，给浏览者以良好的第一映像。

（9）主要栏目一般采用图文并茂的超级链接实现，要考虑到主要栏目图片、文字间的色彩配合，同时要和主题图形相互衬托，主题图形如果较大，则栏目必须缩小。（10）不要把主题栏目和次要栏目都显示在同一个页面上。可以通过站点组织图表示网站的结构布局，或者采用Java Script来生成可以展开的“目录树”。（11）商业栏目一般都有固定的栏目页面，如Support（技术支持）、Service（服务）、About Us（关于公司）等。这些栏目不是网站的主要栏目，不需要采用很醒目的方式出现，但是它们应为于比较方便用户单击的位置，可以采用出现在网页顶端（或者底端）的细长的导航条的方式。

（12）必须建立站内搜索引擎，以方便浏览者在站内查找所需要的信息。

14、什么是网站目录？简述网站目录结构组织建设的原则。答：网站的目录是指你建立网站时创建的目录。目录结构规划是否合理对于站点本身的上传维护、站点内容未来的扩充和移植有着重要的影响。规划目录结构时应当遵循的几个原则：（1）不要将所有文件都存放在根目录下；（2）按栏目内容分别建立子目录；

（3）在每个主目录下都建立独立的images目录；（4）目录的层次不要太深；（5）切忌使用中文目录；

（6）不要使用过长文件名的目录；（7）尽量使用意义明确的目录。

15、个人网站的基本风格是什么？

答：个人站点的作用主要在于展示个人的风采和兴趣爱好，站点的风格随各人的爱好、习惯而不同，并无定式。但是总的来说个人网站的基本风格在布局上是有区别的，尤其反映在主页上。

（1）主题图形网站最显著的标志是主页有一个醒目的图形，该图形很大程度上反映了网页作者希望自己的网页具有的一种意境：或沉静或活泼，采用冷或暖色调。主题图形可以是制作的图形，也可以采用个人照片。主题图形式网站的另一个特点是主页上的超级链接不多，而且很少出现大段的文本，只有当浏览者进入下一级页面时，才能看到详细文本信息。这类网站体现了作者较好的艺术修养，倾向于个性展示。但是由于主题图形增加了网页的体积大小，所以不应再出现大段的文本，否则网页访问速度就会变慢。

（2）信息发布式个人网站则主要看中网站的信息量，这类网站都发布大量的信息，其作者较热衷于贡献信息。为便于浏览者访问，网站的主页就出现大量的信息，更新信息较多，然后另辟栏目介绍其他信息。网站主题图形基本上采用类似广告条的样式，往往被放置在网页最上方，其布局类似各公司的徽标，目的在于提醒浏览者所处的位置，便于迅速切换栏目。信息式网站以提供大量信息为目的，应避免一切华而不实的设计。

信息式网站学习了如新浪、263等综合类门户站点的布局，这些综合类网站要求主页面尽可能提供丰富的信息量，通过主页就可以完成许多信息搜索任务，查找信息简单方便。因此，这些网站主页链接相当繁多，还有各种免费邮件入口、会员登记入口、搜索引擎入口等，纷繁而有序。

（3）还有一种是介于上述两种类型之间的网站。这种网站既想突出个人形象，又想发布大量信息，组织形式不鲜明。初学者应注重一定要让自己的网站简洁，这样便于作者控制网页上的元素。网页元素包括图形、图像、文字、超级链接、表格等由作者在网页上建立的对象。

个人网站具体采用哪种风格形式，应当按照需要决定。如果只为介绍个人及其爱好，其他要加入的资料不多，就可以采用主题图形式，这种情况下需要掌握一些图像处理的特殊技能。如果想开设软件下载、音乐下载、文学作品大全等，对展示个性并不热衷，采用信息式站点模式比较方便。信息式网页有一个特点是栏目间的网页结构相似，可以建立起以一个网页为基准的模板，从而能够快速建立其他网页，这使得管理起站点更为省时、省力。

16、论述建立网站的链接结构有哪几种形式和各自的优缺点。

答：网站的链接结构是指页面之间相互链接的拓扑结构，它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在与一个立体的空间中。研究网站的链接结构的根本目的在于：用最少的链接，使得浏览最有效率。

一般地，建立网站的链接结构有两种基本方式：（1）树形链接结构方式（一对一）

类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就像蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，要进行栏目跳转时，必须绕经首页。

（2）星形链接结构（一对多）

类似互联网结构，每个页面相互之间都建立链接。立体结构像东方明珠电视塔上的钢球。这种连接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。

这两种基本结构都只是理论上的方式，在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者即可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置。所以，最好的办法是首页和一级页面之间用星形链接结构，一级和二级页面之间用树形链接结构。

17、简述非商业组织的网站风格。答：（1）强调页面的主色调。

（2）主题图形要求反映单位的风采，设计应有创意、有内涵、庄重中不乏活泼。

（3）超级链接的分类一定要清晰，可采用图形，必要时可建立站内搜索引擎。

（4）信息查看板很重要，因为非商业组织的网站更新不如商业网站频繁，始终如一的画面显得枯燥，所以经常去更新信息查看板，将增加访问者的访问兴趣。放置信息查看板主要方法有两种方法，一是在主页直接放置信息查看板，二是当页面上主题图形小，超级链接也不多的情况下不宜把信息查看板放在主页，可以在主页上增加一个快速进入信息查看板的超级链接。

18、论述规划网站目录结构时应当遵循的的原则。答：规划目录结构时应当遵循的几个原则：（1）不要将所有文件都存放在根目录下；（2）按栏目内容分别建立子目录；

（3）在每个主目录下都建立独立的images目录；（4）目录的层次不要太深；（5）切忌使用中文目录；

（6）不要使用过长文件名的目录；（7）尽量使用意义明确的目录。

第五篇：网页设计论文

网页设计基础课程论文

摘要:随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以更好的展示自己，而且可以提高自己在计算机应用方面的能力,网站越发普及，网站建设也有新的要求,网站已发展为一种工具，一个企业对外信息展示的工具.以前网站上常见的大幅图片，长达几十钟的flash动画，已悄然而逝，浏览者再也不用为了查找一些信息而必须等待动画的时间，可以简单方便的找到自己想要的东西，是浏览者主要的目的，也是网站设计时应该考虑的问题。以前只是一味的追求网站的外观，其实网站是一个公司的对外信息窗口，因此在考虑美观的同时也得考虑浏览者的感受，如有些色调是很亮丽，但是这些过于亮的色彩看的时间长了会让你的眼睛不舒服，这样浏览的人就不会长时间在网站上逗留，网站没把公司的信息完全的传达给客户． 关键词：网站网页设计发展趋势网站标准 正文：一:网页设计发展趋势: 1.更多的CSS3 + HTML5 这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在以后CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之 2简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果 3.移动互联网时代的到来

智能手机，ipad和上网本随处可见，将来这个将会更加明显。这意味着你的设计需要考虑更多的设备。4.Parallax Scrolling 先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。5.设计需考虑更多的触屏设备

触屏技术应用越来越广泛，触屏设备随处可见。这意味着，你的导航设计不再只是鼠标导航，你必须要要考虑你的设计适合触屏设备。6.深度判析

深度判析是关于在网页设计使用维数，这样可以使你的网页变得更加真实。如果运用得恰当，那将会是一个虚拟的3D效果，就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计，你仍然尝试使用维数进行设计。7.大背景图

大背景图的网页设计应用在2011年将会更加明显。这些背景图像一般是高分辨率，覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式，可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。8.不拘谨于顶级域名

严格意义上这一点与网页设计无关，但这一点也是发展的趋势，将出现更多创造性的域名。.com域名的吸引力越来越少，主要是你很难再找到一个比较短的.com域名。2011年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展，抢先一步，不然你很可能再次错失先机。9.QR: Quick Response 如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码，证明你已经看到2011年的这个趋势热门

10.缩略图设计（Thumbnail Design）

Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。11.持续联系/ Life Stream Lifestreaming, 一种在线记录个人日常活动的网络应用，包括直接通过视频feed或通过聚焦一个人的网络在线内容，比如博客日志，在社会性网络上面的更新，在线相册，聊天内容甚至只是一些喜欢的网站的链接等等.二:网站标准是在W3C（W3C.org）的组织下，商业公司（Netscape、Microsoft等）也认识到统一标准的好处。网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

为什么要建立网站标准: 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司（Netscape、Microsoft等）也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

采用网站标准的好处:

对网站浏览者的好处：

1、文件下载与页面显示速度更快

2、内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；

3、内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）；

4、用户能够通过样式选择定制自己的表现界面；

5、所有页面都能提供适于打印的版本。对网站所有者的好处:

1、更少的代码和组件，容易维护；

2、带宽要求降低（代码更简洁），成本降低。举个例子：当ESPN.com使用CSS改版后，每天节约超过两兆字节（terabytes）的带宽；

3、更容易被搜寻引擎搜索到；

4、改版方便，不需要变动页面内容；

5、提供打印版本而不需要复制内容；

6、提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

参考文献： 一：温谦.HTML+CSS网页设计与布局从入门到精通[M].北京:人民邮电出版社,2010.3 二：http://www.xiexiebang.com

三：http://btgyjlbjx.nease.net(北极星网站域名）

课程论文

系院:土木工程学院

专业:建筑工程 姓名:王奎

学号:105140340043 网页设计基础