网页设计与制作案例教程第30单元
网页设计与制作教程(第3版)
2014年清华大学出版社出版的图书
01 成书过程
03 教材目录 05 教材特色
目录
02 内容简介 04 教学资源 06 作者简介
《网页设计与制作教程（第3版）》是由杨选辉编著，2014年清华大学出版社出版的普通高等教育“十一五” 国家级规划教材、高等学校计算机基础教育精选教材。该教材可作为高等院校“网页设计与制作”课程的教材和 网页制作培训班的教材，也可作为网页设计与制作爱好者的自学参考书。
感谢观看
2014年9月1日，该教材由清华大学出版社出版。
内容简介
该教材是介绍网页设计与制作技术的教程，以网页设计软件作为技术支持，介绍了网页的构思、规划、制作 和网站建设的全过程。全书分为两篇共8章，并包括三个附录。第1篇（第1～5章）是基础篇，介绍了网页制作基 础知识、HTML简介、CSS基础知识、网站建设概论和当时主流的网页制作工具DreamweaverCS5；第2篇（第6～8 章）是提高篇，介绍了网页布局方法CSS+Div、网页制作辅助工具PhotoshopCS5和FlashCS5；附录中提供了网页 特效源代码和辅助设计小软件及每章课后习题的参考答案。
该教材是介绍网页设计与制作技术的教材，分为两篇共8章，并包括三个附录，以网页设计软件作为技术支持， 介绍了网页的构思、规划、制作和网站建设的全过程。
成书过程
修订情况
出版工作
该次改版主要对Dreamweaver部分的内容进行了优化，删除了FrontPage和Fireworks的内容，增加了CSS方 面的内容，以适应网页设计技术发展的趋势。
该教材各章内容主要由杨选辉编写完成，其中谷艳红参与编写了该教材第5、6、8章的部分内容，曾群、郭 路生、李晚照、龚花萍、方玉凤、葛伟、屈文建分别参与编写了该教材的第1、2、3、4、6、7章和附录的部分内 容，孙斌、赵珑、郭晓虹、饶志华、敖建华、张婕钰参与了该教材第2、3、5、6、7、8章部分案例的设计和编写 工作。全书由杨选辉拟定大纲和统稿。该教材得到了南昌大学教材出版项目的资助。
《网页设计与制作》教案
《网页设计与制作》教案第一章：网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法：讲解网页设计的概念和原则实践法：学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章：HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法：讲解HTML和CSS的基本概念和语法实践法：学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章：网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法：讲解网页布局和排版的基本原则和方法实践法：学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章：网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法：讲解网页动画和交互的基本概念和原理实践法：学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章：网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法：讲解网页优化和推广的基本概念和方法实践法：学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章：网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具（如Photoshop、Fireworks等）多媒体元素在网页中的应用（如音频、视频等）图像和多媒体的HTML和CSS标记6.3 教学方法讲授法：讲解网页图像处理的基本概念和工具实践法：学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章：网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言（如JavaScript、jQuery等）常用的网页编程技术和框架（如Bootstrap、React等）编程实践和项目案例7.3 教学方法讲授法：讲解网页编程的基本概念和语言实践法：学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章：移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具（如Responsive Design、Adobe Edge Mobile等）移动网页设计的实践和案例分析8.3 教学方法讲授法：讲解移动网页设计的基本概念和原则实践法：学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章：网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具（如Git、Project Management Software等）项目案例分析和实战演练9.3 教学方法讲授法：讲解网页项目实战的基本流程和方法实践法：学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章：网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向（如VR/AR、等）前沿技术和创新思维的方法（如Blockchn、Design Thinking等）创新项目和案例分析10.3 教学方法讲授法：讲解网页设计与制作的未来趋势和发展方向实践法：学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一：网页设计的概念和原则重点关注学生对网页设计的基本理解，以及如何运用设计原则进行网页创作。
《网页设计与制作案例教程》课后答案
《网页设计与制作案例教程》教材习题答案第2章 网页制作基础1．填空题（1）静态 动态（2）HyperText Markup Lauguage 超文本标记语言（3）文本 图像 动画（4）Dreamwear Frontpage（5）窗口2．选择题（1）C （2）C （3）B （4）D （5）D 第3章 网站的创建与管理1．选择题（1）D （2）A （3）B （4）D （5）C第4章 页面的整体控制 1．选择题（1）B （2）A （3）A （4）C （5）D 第5章 文本操作 1．选择题（1）A （2）D （3）D （4）C （5）C 第7章 网页布局操作 1．选择题 w w w.k h d a w .c o m（1）C （2）A （3）A （4）A （5）B （6）B（7）B （8）B （9）B （10）C （11）C （12）B（13）A （14）A （15）C （16）B （17）A （18）A（19）B （20）D （21）B （22）D （23）D （24）C（25）D （26）C （27）B （28）C （29）D （30）B（31）B （32）C （33）B （34）D （35）A （36）A（37）D （38）C （39）D （40）A第9章 超级链接与导航栏1．选择题（1）A （2）B （3）C （4）A （5）D （6）B（7）D （8）C第10章 创建表单网页1．选择题（1）A （2）D （3）C （4）B （5）C （6）B（7）B （8）A第11章 HTML 语言 （1）<html> </html> <body> </body> （2）<img> <br> （3）bgcolor background （4）<table> <tr> <td> 2．选择题 （1）A （2）A （3）B （4）B （5）C （6）A （7）D （8）B （9）C （10）B （11）A （12）B （13）C （14）Cw ww .k h d a w .c o m第12章 使用CSS 样式美化网页1．选择题（1）D （2）C （3）B （4）B第13章 JavaScript 技术1．选择题（1）D （2）B （3）B （4）D （5）A第14章 网页特效1．选择题（1）A （2）B （3）B （4）D （5）C （6）B第15章 网站规划与网页设计1．选择题（1）C （2）C （3）C （4）A （5）C （6）C（7）A （8）A （9）D （10）C （11）D （12）D （13）A （14）D （15）A （16）B （17）B （18）C第16章 网站的测试、发布与维护 1．选择题 （1）D （2）D （3）D （4）B （5）B （6）C （7）D （8）D w w w .k h d a w .c o m。
【完整版】网页设计与制作课程课件
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页设计与制作教程-目录
1.6 CSS技术
1.6.1什么是CSS
1.6.2在网页中使用CSS
1.6.3 CSS样式定义
1.6.4 CSS属性
1.6.5 CSS过滤器简介
1.7 JavaScript技术
1.7.1 JavaScript脚本嵌入HTML文档的方法
1.7.2使用客户端脚本
习题一
第2章DreamweaverCS6网页设计基础
5.5.5嵌套的框架集
5.5.6框架的编辑
习题五
第6章表单的应用
6.1创建表单
6.2添加表单对象
6.2.1插入文本域
6.2.2插入单选按钮/单选按钮组
6.2.3插入复选框/复选框组
6.2.4插入选择框（列表/菜单）
6.2.5插入文件域
6.2.6插入按钮
6.3表单的提交
6.4应用表格布局表单实例
习题六
11.1.7利用形状绘制工具绘制图像
11.1.8图像修饰工具的应用
11.1.9调色命令的高级应用
11.1.10图层样式
11.1.11文字图层
11.1.12滤镜
11.2页面设计与制作
11.2.1整体页面的制作
11.2.2制作导航栏
11.2.3制作网页内容板块
11.2.4制作网页页脚
习题十一
第12章网页制作工具集成及网页制作综合实训
网页设计与制作教程
第1章网页设计与制作概述
1.1网络的基础知识
1.1.1 TCP/IP协议
1.1.2 IP地址
1.1.3域名地址
1.1.4统一资源定位器
1.2图形图像的基础知识
1.2.1位图与矢量图
1.2.2常用的图像格式
网页设计与制作案例教程
网页设计与制作案例教程网页设计与制作是现代社会中非常重要的一项技能。
随着互联网的发展，许多企业、组织和个人都需要一个专业的网页来展示他们的产品和服务。
而设计和制作一个漂亮、功能齐全的网页需要一定的技巧和经验。
本文将介绍一个网页设计与制作的案例教程。
首先，我们需要确定网页的主题和目标。
一个好的网页设计应该有明确的主题和目标，这样才能更好地吸引和满足用户的需求。
比如，如果我们要设计一个电商网站，主题可以是售卖电子产品，目标可以是吸引用户购买商品。
在确定主题和目标之后，我们需要进行一些市场调研和用户分析，了解用户的需求和喜好，以便更好地设计和制作网页。
接下来，我们需要设计网页的布局和结构。
一个好的网页布局应该简洁明了，让用户一目了然。
通常，一个网页可以分为顶部导航栏、主要内容区和底部版权栏三个部分。
顶部导航栏可以用于展示网站的品牌和主要功能，主要内容区可以展示产品和服务的详细信息，底部版权栏可以展示网站的版权信息和联系方式。
同时，我们还可以使用一些配色方案和排版技巧，使网页看起来更加美观和专业。
然后，我们需要选择合适的网页制作工具和技术。
目前，有许多网页制作工具和技术可供选择，如HTML、CSS、JavaScript、WordPress等。
这些工具和技术可以帮助我们更快速地制作网页，并添加一些交互效果和特效。
同时，我们还需要注意网页的兼容性和响应式设计，确保网页在不同的设备和浏览器上都可以正常显示和使用。
最后，我们需要测试和优化网页。
在设计和制作完成之后，我们需要对网页进行测试，确保网页的功能和性能都正常。
同时，我们还可以收集用户的反馈和意见，根据实际情况对网页进行优化和改进。
这样可以提高用户的体验和满意度，使网页更加具有竞争力。
综上所述，网页设计与制作是一项非常重要的技能。
通过合理的设计和制作，我们可以创建出漂亮、功能齐全的网页，吸引和满足用户的需求。
但是，网页设计与制作也是一个不断学习和提升的过程，需要我们不断学习和实践。
网页设计与制作教程电子教案完整
文本：文本是网页中最主要的信息载体，浏览者主要通过文字了 解各种信息。
图片：图片可以使网页看上去更加美观，可以让浏览者更加快速 地了解网页所要表达的内容。
水平线、表格、表单、超链接、动态元素等
第6页
静态网页和动态网页
静态网页
第7页
静态网页和动态网页
动态网页
第8页
数据库
第39页本章的学习目标?主题与结构?了解网站开发流程?iis的安装配臵过程?掌握建立web网站第40页主要内容1网站设计基础2网站策划3设计4制作5网站维护26本章小结第41页21网站设计基础?主题与结构?网站开发流程第42页网站主题与结构?网站主题?创建网站首先必须要解决的就是网站内容问题即确定网站的主题
第37页
第2章 创建web网站
本章概述 本章的学习目标 主要内容
第38页
本章概述
随着网络技术的发展，越来越多的企业组建了自 己的网站，并通过网站对外发布产品信息、提供 网络服务、收集用户反馈、树立企业形象。除企 业外，很多个人也建立了个人的站点，对外展示 自我，与天南海北的朋友交流等。本章介绍网站 开发流程、IIS服务器的安装与配置和Web网站的 创建及管理等内容。
网页和网站的概念，静态网页与动态网页的区别， 数据库的概念及其在网站建设中的作用。 接下来，讲述了HTML与XHTML、网页脚本语言、 动态网页编程语言等网页制作技术。 之后，讲述了Dreamweaver CC、Photoshop CC、 Flash CC等网页制作的常用工具。 最后，对网页设计基础进行了详细讲述。
第11页
HTML与XHTML
WWW所使用的出版语言就是HTML(Hypertext Marked Language，即：超文本标记语言)语言。
网页设计与制作PPT图文教程
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
网页设计与制作案例教程
网页设计与制作案例教程在当今数字化时代，网页设计与制作已经成为了一项非常重要的技能。
无论是个人网站、企业宣传页面还是电子商务平台，优秀的网页设计都能够吸引用户、提升用户体验并增加转化率。
因此，学习网页设计与制作已经成为了许多人的必备技能之一。
本文将通过一个实际案例，来演示网页设计与制作的整个流程。
在这个案例中，我们将以一个虚拟的企业网站为例，从需求分析到设计构思，再到代码编写和最终上线，逐步展示网页设计与制作的全过程。
首先，我们需要进行需求分析。
在这个案例中，我们的虚拟企业是一家家具制造商，他们希望建立一个展示产品、介绍公司以及在线销售产品的网站。
因此，我们需要分析用户的需求，明确网站的功能和定位，为后续的设计和制作工作奠定基础。
接下来，我们将进行网页设计。
在设计阶段，我们需要考虑网站的整体布局、色彩搭配、字体选择以及交互设计。
我们可以通过绘制草图或者使用设计软件来创建网页的原型图，以便于更好地展示设计思路并与客户进行沟通和确认。
然后，我们将进行网页制作。
在这个案例中，我们将使用HTML、CSS和JavaScript等前端技术来制作网页。
我们需要将设计图转化为实际的网页代码，并确保网站在不同设备上都能够正常显示和交互。
最后，我们将进行网站上线和测试。
在上线之前，我们需要确保网站的稳定性和安全性，并进行各项功能的测试。
一旦确认无误，我们就可以将网站部署到服务器上，让用户可以访问和使用。
通过这个案例，我们可以清晰地了解到网页设计与制作的整个流程。
从需求分析到设计构思，再到代码编写和上线，每一个环节都需要我们的细心和耐心。
只有将每一个环节都做好，才能最终打造出优秀的网站，满足用户的需求。
总之，网页设计与制作是一项需要综合能力的工作，它涉及到设计、编程、交互等多个方面。
只有不断地学习和实践，我们才能不断提升自己的能力，设计出更加优秀的网站。
希望本文的案例教程能够对大家有所帮助，也希望大家能够在实践中不断进步，创作出更多优秀的网页作品。
网站开发的参考案例《网页设计与制作》综合实训指导书网
《网页设计与制作》综合实训指导书网站开发的参考案例1.1 规划网站1．策划网站主题我们网站是德阳嘉兴别墅设计公司．公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念，坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨，追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格，以新颖时尚的设计、规范精致的施工和热情人性的服务，为业主构筑温馨、舒适、精美、典雅的家园。
2．确定网站风格确定好站点主题后，根据该主题选择站点的风格。
所以本案例所建立的网站是别墅设计类网站。
本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格或层实现效果。
（2）背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。
（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。
3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。
本案例的“别墅设计网”的栏目结构如表17-1所示。
表17-1 “别墅设计网”的栏目结构为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展示，公司简介。
4．规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。
“别墅设计网”的目录结构，各文件夹的所存放文件类型如表17-3所示。
表17-3 网站的目录结构及其存放的文件类型网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。
本网站的链接结构采用“网状”链接结构，结构图如图17-2所示。
图17-2“网页教学网”中的链接结构5．主要页面布局设计使用表格对首页与其他几个主面导航页面的布局结构草图进行设计，主页布局结构草图如图17-3所示，两种形式的导航页面布局结构草图如图17-4和图17-5所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）文件名称统一用小写的英文字母、 数字和下划线的组合。 （3）索引文件命名为index.html，主内 容页命名为main.html。 （4）菜单名称用菜单名的英文单词或组 合英文单词命名。 （5）图片文件、动画文件的命名以英文 单词或汉语拼音缩写命名。
★ 课堂实践 ★
打开网站“课堂实践”文件夹“16网页 设计”中网页文档“16.html”，运用本章 所介绍的方法和技巧对该网页的页面布局、 颜色搭配、文字图像进行合理调整和优化。 然后浏览其效果，直到自己认为满意为止。
（2）色彩三要素 色彩三要素是指色相、饱和度和明度。
2．颜色的计算机表示
颜色由红、绿、蓝三原色组合而成，在 网页中采用十六进制对颜色进行定义。 （1）颜色十六进制数值 （2）十进制的RGB值
（3）使用预设的颜色名称 HTML预设了一些颜色名称，在颜色文本 框中直接输入颜色名称也能设置相应颜色。
（3）当前浏览位置 所谓“当前浏览位置”就是在网站的每 个页面中加入当前位置的文字说明并逐级加 入链接。
15.2.6 网页页面元素设计
1．页面标题设计
页面标题相当于商店的招牌，标题通常 位于页面的上端或中央，清楚明确地表示出 来。 （1）标题大小、粗细要合适 （2）标题使用鲜艳的色彩 （3）利用空间突出标题
4．广告尺寸
广告尺寸应为标准尺寸，全尺寸banner 不超过14KB。
15.3.2 文件夹、文件命名规范
主要命名规则有： （1）文件夹命名一般采用英文小写字母， 特殊情况可以使用中文拼音，常见的文件夹 命名：存放图形文件的文件夹命名为image， 存放flash文件的文件夹命名为flash，存放 CSS样式表文件的文件夹命名为style或CSS， 存放JavaScript脚本的文件夹命名为JS，存 入友情链接的文件夹命名为link，存放 indlude文件的文件夹命名为include。
第15章 网站规划与网页设计
课程引导
本次课重点学习网页的色彩设计、导航 设计、网页页面元素的设计、网页设计的规 范。
知识技能目标
（1）掌握网页色彩设计、导航设计和网 页面面元素设计的基本原理与方法。 （2）掌握网页设计的规范。
网页浏览效果展示
“长沙世界之窗”旅游网站首页 index.html的浏览效果如图15-1所示。
（3）文字字号的确定 对于网页中正文文本，其字号一般设置 为10～12磅；对于网页中版权声明等文本一 般设置为9～10磅；对于网页中标题文本， 一般设置为12～18磅。
（4）文字的字间距和行间距 网页中文本的字间距和行间距在某种程 度上会改变访问者的阅读心理。
3．页面中图像应用
传递信息的视觉要素包括版式、文字、 图像、色彩等。
导航样式有很多，包括横排导航、竖排 导航、多排导航、图片式导航、下拉菜单导 航、隐藏式导航等。 网站导航的表现形式主要有：菜单、站内搜 索引擎、当前浏览位置等。
（1）菜单 菜单是网站最常见的导航方法，一个好 的菜单系统关键在于能适应网站的层次需要， 并且容易让浏览者理解网站的结构。
（2）站内搜索引擎 站内搜索引擎提供了一种主动查询方式， 浏览者只要把自己需要寻找的内容的关键字 输入到搜索引擎中，网站将自动地查找出站 内符合条件的页面，这是一种人性化的做法。
15.3 网页设计的规范 15.3.1 网页版面尺寸规范
1．网页的宽度
目前我国的网络用户，大部分使用15英 寸和17英寸显示器，采用800×600分辨率的 用户仍不少，为了考虑这部分浏览者的需要， 制作网页时一般按照800×600（单位为像素） 分辨率的规格来设计，页面宽度不超过1屏。
2．网页的长度
从理论上来讲网页的长度可以无限长的， 但一般不宜超过3屏，最佳长度为1.8～2.5 屏。
3．网页文件大小
一般地，网站的首页大小（包括所有图 像、文本、多媒体对象）不宜超过30KB，网 站的二级页面的文件（包括所有图像、文本、 多媒体对象）不宜超过45KB。如果网页大太， 网页下载的速度会变慢，影响浏览速度。
3．颜色与心里反应
当看到不同的颜色时，会产生不同的心 里感觉，这就是一种色彩意向。
4．页面色彩的搭配技巧
（1）特色鲜明 （2）搭配合理 （3）讲究艺术性
（4）合理使用邻近色 （5）合理使用对比色 （6）巧妙使用背景色 （7）严格控制色彩的数量
15.2.5 网页导航设计
导航是网站设计不可缺少的元素之一， 它不仅仅是信息结构的基础分类也是浏览者 浏览网站的路标。 导航作为页面的重要视觉元素，放置在 明显、易找的区域是必要，让浏览者进入网 站第一时间就可以看到它。
★ 课外拓展实践 ★
在“湖铁职院学院网站”站点文件夹 “16网页设计”中创建网页index.html，并 运用本章所学习的方法和技巧对网页的版式 结构、导航栏设计、颜色搭配、文字效果、 网页特效等方面进行美化、优化。
网页中图像在信息传达上应用具备以下 功能： （1）要有良好的视觉吸引力，能吸引浏 览者的注意力。 （2）要简洁明确地传达网站信息，能使 人们一目了然地抓住网站信息的重点。 （3）要有强而有力的诱导作用，造成鲜 明的视觉感受效果，从观看过程中产生愿望 和欲求。
对图像的处理主要包括以下几个方面： （1）图像的外形处理 （2）图像的面积处理 （3）图像的数量处理 （4）图像的背景处理
图15-1
“长沙世界之窗”网站首页的浏览效果
本章操作任务
运用本章所学习的方法和技巧对该网页 15.html的页面布局、颜色搭配、文字图像 进行合理调整和优化。
15.2.4 网页ห้องสมุดไป่ตู้彩设计
1．色彩的基本知识
（1）三原色 三原色是能够按照一些数量规定合成 其他任何一种颜色的基色。所有的颜色其 实都是由三原色按照不同的比例混合而来。 电脑屏幕的色彩是由红、绿、蓝三种原色 组成。
2．页面中文字设计
（1）文字字体的选择 网页中正文文本一般可使用系统默认的 中文字体和西文字体，若需使用特殊字体， 一般把使用了特殊字体的对象制作成图片。 常用的中文字体有宋体、黑体、楷体、仿宋 体、行书、隶书、魏碑等，常用英文字体有 Times New Roman、Arial、Impact等
（2）文字粗细的确定 文字变细会显得十分优美，反之将文字 变粗会显得有力。