《Adobe Dreamweaver CC课堂实录（Div CSS HTML5）》以Dreamweaver软件为载体，以知识应用为**，对平面设计知识进行了全面阐述。书中每个案例都给出了详细的操作步骤，同时还对操作过程中的设计技巧进行了描述。 《Adobe Dreamweaver CC课堂实录（Div CSS HTML5）》共13章，遵循由浅入深、循序渐进的思路，依次对网页设计入门知识、Dreamweaver基础操作、HTML基础、文本的应用、图像元素的应用、超链接的应用、表格的应用、CSS网页美化技术、Div CSS网页布局技术、模板和库、表单、行为等内容进行了详细讲解。后通过制作动物园网页，对前面所学的知识进行了综合应用，以达到举一反三、学以致用的目的。 《Adobe Dreamweaver CC课堂实录（Div CSS HTML5）》结构合理，思路清晰，内容丰富，语言简练，解说详略得当，既有鲜明的基础性，也有很强的实用性，既可作为高等院校相关专业的教学用书，又可作为网页设计爱好者的学习用书，同时也可作为社会各类Dreamweaver软件培训班的优选教材。

第1章
网页设计入门学习
网页是构成网站的基本元素，也是网站信息发布的一种常见的表现形式。要制作出精美的网页，不仅要熟练地使用软件，还要了解一些网页的基础知识、网站制作流程、网站布局配色等。本章将对网页和网站的基本概念、网站制作流程、网页的布局与配色等知识进行详细介绍。
了解网页的基本概念
掌握网站的制作流程
了解网页的布局与配色
1.1 网页的基本概念
互联网是人们生活中非常重要的部分，无数人通过网络进行工作、学习、交流等。用户上网主要依托于网页，多��网页的集合构成了网站。本节将针对网页的基本概念进行介绍。
1.1.1 网页与网站
网页是网站基本的组成元素。一般来说，网页就是我们访问某个网站时看到的页面，是承载各种网站应用的平台。
1.网页
网页是一个包含HTML标签的纯文本文件，可以存放在世界上某个角落的某一部计算机中，这部计算机必须与互联网相连。网页经由网址（URL）来识别与存取，当用户在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到计算机，然后通过浏览器解释网页的内容，再展现在用户的眼前。
网页是万维网中的一“页”，通常是HTML格式（文件扩展名为.html 或.htm）。网页要通过网页浏览器来阅读和显示各种信息，同时也可以做一定的交互。
网页显示在特定的环境中，具有一定的尺寸，在网页中可以看到显示的各种内容。
2.网站
网站是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件。网站可以看作一系列文档的组合，这些文档通过各种链接关联起来，它们可能拥有相似的属性，如描述相关的主体、采用相似的设计或实现相同的目的等，也可能只是毫无意义的链接。利用浏览器，就可以从一个文档跳转到另一个文档，实现对整个网站的浏览。
根据不同的标准，可将网站做不同的分类。根据网站的用途分类，如门户网站（综合网站）、行业网站、娱乐网站等；根据网站的功能分类，如单一网站（企业网站）、多功能网站（网络商城）等；根据网站的持有者分类，如个人网站、商业网站、政府网站等。
从名字上理解，网站就是计算机网络上的一个站点，网页是站点中所包含的内容；网页可以是站点的一部分，也可以独立存在。一个站点通常由多个栏目构成，包含个人或机构用户需要在网站上展示的基本信息页面，同时还包括有关的数据库等。当用户通过IP 地址或域名登录一个站点时，展现在浏览者面前的是该网站的主页。
1.1.2 静态网页与动态网页
网页可以分为静态网页和动态网页两种，主要取决于网页是否含有程序代码。本小节针对这两种网页进行介绍。
1.静态网页
在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。静态网页是相对于动态网页而言的，是指没有后台数据库、不含程序和不可交互的网页。静态网页更新起来相对比较麻烦，适用于更新较少的一般展示型网站。静态网页是标准的HTML文件，它的文件扩展名是.htm和.html。在HTML 格式的网页上，也可以呈现各种动态的效果，如.GIF 格式的动画、Flash、滚动字母等，这些“动态效果”只是视觉上的，与动态网页是不同的概念，如图1-1所示。 图1-1
静态网页的特点如下。
静态网页的每个页面都有一个固定的URL。
静态网页的内容相对稳定，因此容易被搜索引擎检索。
静态网页没有数据库的支持，当网站信息量很大时，完全依靠静态网页的制作方式比较困难。
静态网页交互性比较差，在功能方面有较大的限制。
页面浏览速度迅速，无须连接数据库，开启页面速度快于动态页面。
浏览器“阅读”静态网页的执行过程较为简单，如图1-2所示。首先浏览器向网络中的Web服务器发出请求，指向某一个普通网页。Web服务器接收请求信号后，将该网页传回浏览器，此时传送的只是文本文件。浏览器接到Web服务器送来的信号后开始解读html标签，然后进行转换，将结果显示出来。 图1-2
2.动态网页
动态网页是与静态网页相对的一种网页编程技术，与网页上的各种动画、滚动字幕等视觉上的“动态效果”没有直接关系。动态网页可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。
应用程序服务器读取网页上的代码，根据代码中的指令形成发给客户端的网页，然后将代码从网页上去掉，所得的结果就是一个动态网页。应用程序服务器将该网页传递回Web服务器，然后由Web服务器将该网页传回浏览器，当该网页到达客户端时，浏览器得到的内容是HTML格式，如图1-3所示。 图1-3
动态网页能与后台数据库进行交互、传递数据，即网页URL的后缀为.aspx.asp、.jsp、.php、
.perl、.cgi 等形式，且在动态网页网址中有一个标志性的符号——“ ”。
动态网页的主要特点如下。
动态网页没有固定的URL。
动态网页以数据库技术为基础，可以大大降低网站维护的工作量。
采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、用户管理、在线调查等。
动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。
1.2 网站制作流程
网站制作包括网站策划、网站设计、网页制作、网站测试与发布、网站维护等步骤。只有遵循网站制作步骤进行操作，才能设计出满意的网站。本节将针对网站的制作流程进行介绍。
1.2.1 网站策划
在建设网站平台之前，需要先进行网站策划，即在建立网站前应明确建设网站的目的、网站的功能、网站规模、投入费用等。只有详细规划，才能避免在网站建设中出现很多问题。
1. 网站策划核心
一个企业网站策划者，首先应当深入了解企业产品的生产和销售状况，如企业产品所属行业背景、企业生产能力、产品年销售概况、内外销比重、市场占有率、产品技术特点、市场宣传卖点、目标消费群、目标市场区域、竞争对手情况等。只有详细了解了企业产品信息和市场信息，才能进行定位分析，准确判定在网站中将要进行的产品展示能够达到什么样的目的，做到心中有数，有的放矢。其次网站策划人有一个明显区别于网站***的视觉差异，那就是要站在企业（客户）和访问者的角度来规划网站，这一点在规划产品展示的时候显得尤为突出。一个完整的产品展示体系，主要包括直观展示、用户体验和网站互动三个部分。
2. 网站策划流程
（1）网站策划方案的价值。
网站策划**阐述了解决方案能给客户带来什么价值，以及通过何种方法去实现这种价值，从而帮助业务员赢取订单。另外，一份**的解决方案在充分挖掘、分析客户的实际需求的基础上，又以专业化的网站开发语言、格式，有效地解决了日后开发过程中的沟通问题、整理资料的方向性问题。
（2）前期策划资料收集。
前期策划方案资料的收集情况是网站策划方案成功的关键点，它关系到是否能够准确充分地帮助客户分析、把握互联网应用价值点。往往一份策划方案能否中标，与信息的收集方法、收集范围、执行态度、执行尺度有密切关系。
（3）网站策划思路整理。
在充分收集客户数据的基础之上，需要对数据进行分析、整理，此时客户、业务员、策划师、设计师、软件工程师、编辑要齐心参与，进行多方位的分析、洽谈、融合。
（4）网站策划方案写作。
网站策划方案写作是整个标准的核心。一份专业的网站策划方案需要经过严格的包装才能提交给客户。方案的演示与讲解是关系订单成败的大事。网站策划方案的归档/备案可以根据公司的知识库规则的不同，而制定出不同的标准。
3. 网站策划的重要性
网站策划逐步被各个企业重视，在企业建站中起到核心的地位，是一个网站的神经部位。网站建设其实不是简单的事情，美术设计、信息栏目规划、页面制作、程序开发、用户体验、市场推广等多方面知识融合在一起才能建出成型网站。而将这些知识结合在一起的就是网站策划，策划主要的任务是根据领导给出的主题结合市场，通过与各个技能部门人员沟通制定合理的建设方案。网站策划对网站建设是否成功起决定作用。
1.2.2 网站设计
网站策划完成后，就可以设计网站，包括素材的整理、站点的建立等。本小节将针对网站的设计进行讲解。
1.收集素材
网站的主题内容是文本、图像和多媒体等素材，这些素材组合在一起构成了网站的灵魂。任何一种网站，在建设之初都应进行充分的调查和准备，即调查用户对网站的需求度、认可度，以及准备所需资料和素材。网站的资料和素材包括所需图片、动画、Logo 的设计、框架规划、文字信息搜
索等。
2.规划站点
开发网站的步就是规划站点。规划站点即对网站的整体定位，不仅要准备建设站点所需要的文字资料、图片信息、视频文件，还要将这些素材整合，并确定站点的风格和规划站点的结构。在规划站点时，应遵循以下3个原则。
（1）文档分类保存。
若建立的站点比较复杂，就不要把所有文件都放在一个文件夹中，需要把文件分类，放在不同的文件夹中，方便进行更好的管理。在创建文件夹的时候，先建立根文件夹，再建立子文件夹。站点中还有一些特殊的文件，如模板、库等好放在系统默认创建的文件夹中。
（2）文件夹合理命名。
为了方便管理，文件夹和文件的名称好具有一定的意义，这样就能清晰地明白网页内容，也便于网站后期的管理，提高工作效率。
（3）本地站点和远程站点结构统一。
为了方便维护和管理，在设置本地站点时，应该使本地站点与远程站点的结构设计保持一致。将本地站点上传至远程服务器上时，可以保证本地站点和远程站点的完整拷贝，避免出错，也便于对远程站点的调试和管理。
1.2.3 网页制作
完成网站策划和设计工作后，就可以着手网页制作。网页即为网站中的页面，它是一个纯文本文件，是向浏览者传递信息的载体。网页以超文本和超媒体为技术，采用HTML、CSS、XML 等多种语言对页面中的各种元素（如文字、图像、音乐等）进行描述，并通过客户端浏览器进行解析，从而向浏览者呈现网页的各种内容。
1.设计网页图像
网页图像设计包括Logo 、标准色彩、标准字、导航条和首页布局等。用户可以使用Photoshop等软件来设计网站的图像。
有经验的网页设计者，通常会在使用网页制作工具之前设计好网页的整体布局，这样在设计过程中将会大大节省工作时间。
2.制作网页
制作网页时，要按照先大后小、先简单后复杂的方式来进行制作。先大后小即是指在制作网页时，先把大的结构设计好，然后逐步完善小的结构设计。先简单后复杂即是指先设计出简单的内容，然后设计复杂的内容，以便出现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。
1.2.4 测试和发布网站
网站制作完成之后，就可以上传到服务器中供他人使用浏览。在上传到服务器之前，需要先进行本地测试，以保证页面的浏览效果、网页链接等与设计要求相吻合。进行网站测试可以避免各种错误的产生，从而为网站的管理和维护提供方便。
1. 测试网站
网站测试是指当一个网站制作完上传到服务器之前针对网站的各项性能情况的一项检测工作。它与软件测试有一定的区别，除了要求外观的一致性以外，还要求其在各个浏览器下的兼容性。
（1）性能测试。
网站的性能测试主要从连接速度测试、负荷测试和压力测试3个方面进行。连接速度测试是指打开网页的响应速度测试。负荷测试是指在某一负载级别下，检测网站系统的实际性能，可以通过相应的软件在一台客户机上模拟多个用户来测试负载。压力测试是指测试系统的限制和故障恢复能力。
（2）**性测试。
**性测试是对网站的**性（服务器**，脚本**）测试、可能有的漏洞测试、攻击性测试、错误性测试。对客户服务器应用程序、数据、服务器、网络、防火墙等都要进行测试。
（3）基本测试。
基本测试包括色彩的搭配、连接的正确性、导航的方便和正确性、CSS应用的统一性等测试。
（4）稳定性测试。
稳定性测试是指测试网站运行中整个系统是否运行正常。
2. 发布网站
完成网站的创建和测试之后，将文件上传到远程文件夹即可发布站点。这些文件用于网站的测试、生产、协作和发布，具体取决于用户的环境。在“文件”面板中可以很方便地实现文件上传功能。
1.2.5 网站维护
在实际应用中，需要根据需要，对网站内容进行维护和更新，以保持网站的活力。只有不断地给网站补充新的内容，才能够吸引住浏览者。网站的维护是指对网站的运行状况进行监控，发现问题及时解决，并对其运行的实时信息进行统计。
网站维护的内容主要包括以下5个方面。
基础设施的维护。主要有网站域名维护、网站空间维护、企业邮局维护、网站流量报告、域名续费等。
应用软件的维护。即业务活动的变化、测试时未发现的错误、新技术的应用、访问者需求的变化和提升等方面。
内容和链接的维护。
**的维护。即数据库导入导出的维护、数据库备份、数据库后台维护、网站紧急恢复等。
做好网站**管理，定期查杀毒，防范黑客入侵网站，检查网站的各个功能。
1.3 网页布局与配色
传递信息是网页的根本目的。在设计网页时，需要根据网页的这一特性，合理地布局网页，运用对比及调和的配色原理，设计出既能表现主题又和谐悦目的网页。下面将对此进行具体介绍。
1.3.1 网页的布局类型
网页的布局类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角形、自由型十种。
1.骨骼型
骨骼型的网页版式是一种规范的、理性的分割方法，类似于报刊的版式，如图1-4所示。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。一般以竖向分栏为多，这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性。 图1-4
2.满版型
页面用图像充满整版，如图1-5所示。它主要以图像为诉求点，也可将部分文字置于图像之上，视觉传达效果直观而强烈。满版型给人以舒展、大方的感觉。随着宽带的普及，这种版式在网页设计中的运用越来越多。 图1-5
3.分割型
把整个页面分成上下或左右两部分，分别安排图片和文案，如图1-6所示。两个部分形成对比：有图片的部分感性而具活力，文案部分则理性而平静。可以通过调整���片和文案所占的面积，来调节对比的强弱。例如：如果图片所占比例过大，文案使用的字体过于纤细，字距、行距、段落的安排又很疏落，则造成视觉心理的不平衡，显得生硬。倘若通过文字或图片将分割线虚化处理，就会产生自然和谐的效果。 图1-6
4.中轴型
沿浏览器窗口的中轴将图片或文字作水平或垂直方向的排列，如图1-7所示。水平排列的页面给人稳定、平静、含蓄的感觉。垂直排列的页面给人以舒畅的感觉。 图1-7
5.曲线型
图片、文字在页面上作曲线的分割或编排，产生韵律与节奏，如图1-8所示。 图1-8
6.倾斜型
页面主题形象或多幅图片、文字作倾斜编排，形成不稳定感或强烈的动感，引人注目，如图1-9所示。 图1-9
7.对称型
对称的页面给人稳定、严谨、庄重、理性的感受。对称分为对称和相对对称。一般采用相对对称的手法，以避免呆板。左右对称的页面版式比较常见，如图1-10所示。
四角型也是对称型的一种，是在页面四角安排相应的视觉元素。四个角是页面的边界点，重要性不可低估。在四个角安排的任何内容都能产生安定感。控制好页面的四个角，也就控制了页面的空间。越是凌乱的页面，越要注意对四个角的控制。 图1-10
8.焦点型
焦点型的网页版式通过对视线的诱导，使页面具有强烈的视觉效果，如图1-11所示。焦点型分三种情况。
**：将对比强烈的图片或文字置于页面的视觉**。
向心：视觉元素引导浏览者视线向页面**聚拢，就形成了一个向心的版式。向心版式是集中的、稳定的，是一种传统的手法。
离心：视觉元素引导浏览者视线向外辐射，则形成一个离心的网页版式。离心版式是外向的、活泼的，更具现代感，运用时应注意避免凌乱。 图1-11
9.三角形
网页各视觉元素呈三角形排列。正三角形（金字塔形）稳定性，倒三角形则产生动感。侧三角形构成一种均衡版式，既安定又有动感。如图1-12所示为三角形版式网页。 图1-12
10.自由型
自由型的页面具有活泼、轻快的风格。如图1-13所示为自由型版式网页，传达随意、轻松的气氛。 图1-13
1.3.2 网页色彩基础
除了网页布局，网页的配色也在网站页面效果中占据重要地位。**的网页配色可以提高网站的页面效果，使网站的用户体验更佳。网站页面配色有以下四大要点。
1.网站主题颜色要自然
在设计网站页面的颜色时，应该尽可能选择一些比较自然和常见的颜色，这些颜色在日常生活中随处可见，贴近生活。
2.背景和内容形成对比
在页面配色时，页面的背景需要与文字之间形成鲜明的对比效果，这样才能使网站主题更加突出，页面更加美观，内容更易被用户注意，同时也能方便用户浏览和阅读。
3.规避页面配色的禁忌
虽然说合理的页面配色能够使网站的页面用户体验大大提升，但是如果页面配色不合理，不仅会导致网站的页面效果降低，还会导致网站用户流失，给企业带来无法估量的损失。
4.保持页面配色的统一
在对网站页面进行配色的时候，一定要保持色彩的统一性，对颜色的选择应控制在三种以内，以一种作为主色，其余两种作为辅助色。
1.3.3 色彩搭配原则
在设计网页配色方案时，需要将颜色本身的含义、网站页面和公司的网站建设定位三者结合起来，终制定出适合的网站页面设计方案。
1.找准主题色调
在解析网站页面设计中色彩搭配的技巧——找准主题色调之前，我们先来了解一下几款不同色调的网页及相应的成功案例。
红色：热情、奔放、喜悦、血气、年轻，如图1-14所示。 图1-14
黄色：**、富有、灿烂、活泼、温暖、透明，如图1-15所示。 图1-15
黑色：严肃、夜晚、沉着，如图1-16所示。
蓝色：天空、清爽、科技、可靠、力量，如图1-17所示。
绿色：植物、生命、生机、健康，如图1-18所示。
灰色：冷静、庄重、沉稳，如图1-19所示。 图1-16 图1-17 图1-18 图1-19
我们不难看出，不管是哪种类型的网站，在进行页面设计时先都要做好主题色调的选择，并以此种颜色为主色调向外扩展到同色系的其他颜色。
2.遵循网页设计色彩搭配原则
除了考虑颜色、网站本身具有的特点外，在网页设计色彩搭配中，还要遵循并体现一定的艺术性和规律性。
（1）色彩的鲜明性原则。
一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉，如图1-20所示。 图1-20
（2）色彩的独特性原则。
要有与众不同的色彩，网页的用色必须有自己独特的风格，这样才能给浏览者留下深刻的印象，如图1-21所示。 图1-21
（3）色彩的艺术性原则。
网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站，如图1-22所示。 图1-22
（4）色彩搭配的合理性
原则。
色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业性，用粉红色体现女性的柔情等，如图1-23所示。 图1-23
3.选对网页色彩搭配方法
合理配色网页，在用户对网页的视觉体验上起着主导作用。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁，如图1-24所示。 图1-24
（1）同种色彩的搭配方法。
同种色彩的搭配方法是指先选定一种主色，然后以这款颜色为基础进行透明度和饱和度的调整，通过对颜色进行变淡或加深得到其他新的颜色，如图1-25所示。
优点：让网页的整个页面看起来色彩统一，且具有层
次感。 图1-25
（2）邻近色彩搭配方法。
邻近色彩指的是在色环上相邻的两种不同颜色，如绿色和蓝色、红色和黄色即互为邻近色，如图1-26所示。
优点：采用邻近色搭配的网页可以避免色彩杂乱，容易达到页面和谐统一的效果。 图1-26
（3）对比色彩搭配方法。
一般认为，色彩的三原色（红、绿、蓝）是能体现色彩间的差异的三款颜色。色彩的这种强烈对比效果具有很强的视觉诱惑力，能够起到突出**的作用，如图1-27所示。
优点：在网页设计中通过合理使用对比色，能够使网站特色鲜明、**突出。以一种颜色作为主色调，将其相邻对比色作为点缀，可以起到画龙点睛的作用。 图1-27
（4）冷、暖色色彩搭配
方法。
冷色调色彩搭配指的是使用绿色、蓝色及紫色等冷色系色彩进行搭配，暖色调色彩搭配是指使用红色、橙色、黄色等暖色系色彩进行搭配，如图1-28所示。
优点：冷色调色彩搭配的网页可以为用户营造出宁静、清凉和高雅的氛围，冷色色彩与白色搭配一般会获得较好的视觉效果。暖色调色彩搭配可为网页营造出稳定、和谐和热情的氛围。 图1-28
（5）文字与网页的背景色对比的搭配方法。
文字内容的颜色与网页的背景色的对比要突出，底色深，文字的颜色就应浅，这样才能让深色的背景衬托出浅色的内容（文字或图片）；反之，底色淡，文字的颜色就要深些，用浅色的背景衬托深色的内容（文字或图片），如图1-29所示。 图1-29
1.4 网页设计常用工具
要想制作一个精美的网页，需要综合利用各种网页制作工具，下面简单介绍一下常用的网页设计软件。
（1）Photoshop。
常用的网页图像处理软件有Photoshop和Fireworks，其中Photoshop凭借其强大的功能和广泛的使用范围，一直占据着图像处理类软件的领先地位。Photoshop支持多种图像格式以及多种色彩模式，可以任意调整图像的尺寸、分辨率及画布的大小，使用Photoshop可以设计网页的整体效果图、处理网页中的产品图像、设计网页Logo、设计网页按钮和网页宣传广告图像等。
（2）Illustrator。
Illustrator是一款专业的矢量图形处理软件，集成文字处理、上色等功能，主要应用于印刷出版、海报书籍排版、专业插画设计、多媒体图像处理和互联网页面制作等领域，适合生产所有从小型设计到大型设计的复杂项目。
（3）Flash。
Flash是一款非常**的交互式矢量动画制作工具，能够制作包含矢量图、位图、动画、音频、视频、交互式动画等内容在内的站点。为了吸引浏览者的兴趣和注意，传递网站的动感和魅力，许多网站的介绍页面、广告条和按钮，甚至整个网站，都是采用Flash制作出来的。用Flash编制的网页文件比普通网页文件要小得多，这大大加快了浏览速度，是一款十分适合制作动态Web的工具。
（4）Dreamweaver。
Dreamweaver是网页设计与制作领域中用户多、应用广、功能强的软件，无论是在国内还是在国外，它都是备受专业Web开发人员喜爱的软件。Dreamweaver用于网页的整体布局和设计，以及对网站的创建和管理，与Flash、Photoshop并称为网页设计三剑客，利用它可以轻而易举地制作出充满动感的网页。
1.5 课后练习
一、选择题
1．网页又被称为（ ）文件，是网站的重要组成部分。
A．HTML B．Web C．Tga D．HTTP
2．一般制作网页时，会将首页命名为（ ）。
A．www B．main.html C．index.html D．index.css
3.以下哪个不是动态网页的后缀名？（ ）
A．php B．xml C．asp D．jsp
4．万维网有3个基本组成部分，以下不属于它的组成部分的是（ ）。
A．URL，表示在 Web 上进入资源的统一方法和路径
B．超文本标记语言 HTML
C．超文本传输协议 HTTP
D．标准通用标注语言 SGML
二、填空题
1．在网站设计中，纯粹HTML格式的网页通常被称为 。
2．网页是一个包含 的纯文本文件，可以存放在世界某个角落的某一部计算机中。
3． 是有独立域名、独立存放空间的内容集合。
三、操作题
1．熟悉Dreamweaver软件的相关软件，如Photoshop、Illustrator、Premiere等。
2．了解网页设计的相关知识。

第1章 网页设计入门学习 1.1 网页的基本概念 2 1.1.1 网页与网站 2 1.1.2 静态网页与动态网页 2 1.2 网站制作流程 4 1.2.1 网站策划 4 1.2.2 网站设计 5 1.2.3 网页制作 6 1.2.4 测试和发布网站 6 1.2.5 网站维护 7 1.3 网页布局与配色 7 1.3.1 网页的布局类型 7 1.3.2 网页色彩基础 11 1.3.3 色彩搭配原则 12 1.4 网页设计常用工具 17 1.5 课后练习 18 第2章 Dreamweaver基础操作 2.1 Dreamweaver 的工作界面 20 2.1.1 启动Dreamweaver 20 2.1.2 自定义软件界面 20 实例：设置主浏览器 22 2.1.3 Dreamweaver的视图模式 23 2.2 站点的创建与管理 23 2.2.1 创建站点 24 实例：创建远程站点 25 2.2.2 编辑站点 26 2.2.3 导入和导出站点 28 2.2.4 新建文件或文件夹 28 2.2.5 编辑文件或文件夹 29 2.3 文档的基础操作 29 2.3.1 新建文档 29 2.3.2 保存文档 29 2.3.3 打开文档 30 2.3.4 插入文档 30 2.3.5 关闭文档 31 2.4 课堂实战：创建我的站点 31 2.5 课后练习 33 第3章 HTML基础 3.1 认识HTML 36 3.1.1 HTML简介 36 3.1.2 HTML的基本结构 36 3.1.3 文件开始标签 37 3.1.4 文件头部标签 37 3.1.5 标题标签 37 3.1.6 主体标签 38 3.1.7 元信息标签 38 3.1.8 标签 38 3.2 HTML的基本标签 38 3.2.1 标题文字 38 3.2.2 文字字体 39 实例：使用HTML在网页中添加文本 40 3.2.3 段落换行 40 3.2.4 不换行标签 41 3.2.5 图像标签 42 实例：插入网页图像 43 3.2.6 超链接标签 43 3.2.7 列表标签 45 3.2.8 表格标签 47 3.2.9 表单标签 49 3.3 HTML 5简介 50 3.3.1 HTML 5的语法变化 50 3.3.2 HTML 5中的标记方法 50 3.3.3 HTML 5中新增加的元素 51 3.3.4 HTML 5中新增加的属性元素 55 3.4 课堂实战:制作简单的网页布局 59 3.5 课后练习 62 第4章 文本的应用 4.1 创建文本 66 4.1.1 直接输入文本 66 4.1.2 通过“导入”命令导入文本 66 实例：制作古诗文网页 67 4.2 设置网页中的文本属性 68 4.2.1 “属性”面板 69 4.2.2 设置文本格式 69 实例：添加文字字体 71 4.2.3 设置段落格式 73 4.2.4 设置文本样式 74 4.2.5 使用段落列表 75 4.3 在网页中插入特殊元素 75 4.3.1 插入特殊符号 75 4.3.2 插入水平线 76 4.4 课堂实战：制作文字标签 76 4.5 课后练习 79 第5章 图像元素的应用 5.1 在网页中插入图像 82 5.1.1 网页中图像的常见格式 82 5.1.2 插入图像 83 5.1.3 图像的属性设置 83 5.1.4 图像的对齐方式 85 5.1.5 运用HTML代码设置图像属性 86 实例：为文档添加图像 86 5.1.6 设置网页背景图像 88 实例：添加网页背景 88 5.1.7 鼠标经过图像 90 实例 制作鼠标经过图像效果 90 5.2 编辑图像 91 5.2.1 裁剪图像 91 5.2.2 调整图像的亮度和对比度 92 5.2.3 锐化图像 92 5.3 课堂实战：制作鼠标经过图像效果 93 5.4 课后练习 95 第6章 超链接的应用 6.1 **链接的概念 98 6.1.1 相对路径 98 6.1.2 路径 98 6.2 管理网页超链接 98 6.2.1 自动更新链接 98 6.2.2 检查站点中的链接错误 99 6.3 在文本中应用链接 99 6.3.1 文本链接 99 实例：制作电子邮件链接 101 6.3.2 下载链接 101 实例：下载电子文档 102 6.4 在图像中应用链接 103 6.4.1 图像链接 103 6.4.2 图像热点链接 103 6.5 课堂实战：制作书店网页 103 6.6 课后练习 105 第7章 表格的应用 7.1 插入表格 108 7.1.1 与表格有关的术语 108 7.1.2 插入表格 108 7.1.3 表格的基本代码 109 实例：制作活动信息表 109 7.2 表格属性 112 7.2.1 设置表格属性 112 7.2.2 设置单元格属性 112 7.2.3 鼠标经过颜色 113 7.2.4 表格的属性代码 114 实例：添加表格背景 116 7.3 选择表格 117 7.3.1 选择整个表格 117 7.3.2 选择一个单元格 117 7.4 编辑表格 118 7.4.1 拷贝和粘贴表格 118 7.4.2 添加行和列 119 7.4.3 删除行和列 120 7.4.4 合并或拆分单元格 120 7.5 课堂实战：制作西餐厅网页 121 7.6 课后练习 123 第8章 CSS网页美化技术 8.1 CSS概述 126 8.1.1 CSS的特点 126 8.1.2 CSS的定义 126 8.2 创建CSS样式 129 8.2.1 CSS设计器 129 8.2.2 创建CSS样式 129 实例：添加图片边框 132 8.3 CSS的设置 134 8.3.1 类型 134 8.3.2 背景 135 8.3.3 区块 135 8.3.4 方框 136 8.3.5 边框 137 8.3.6 列表 137 8.3.7 定位 138 8.3.8 扩展 138 8.3.9 过渡 139 实例：创建内部样式表 139 8.4 课堂实战：制作花店网页 141 8.5 课后练习 145 第9章 Div CSS网页布局技术 9.1 CSS与Div布局基础 148 9.1.1 什么是Web标准 148 9.1.2 Div概述 148 9.1.3 创建Div 149 9.2 CSS布局方法 150 9.2.1 盒子模型 150 9.2.2 外边距设置 151 实例：设置矩形边距 152 9.2.3 外边距合并 155 实例：避免外边距合并 157 9.2.4 内边距设置 158 9.3 课堂实战：制作幼儿园网页 159 9.4 课后练习 167 第10章 模板和库 10.1 创建模板 170 10.1.1 直接创建模板 170 10.1.2 从现有网页中创建模板 170 10.1.3 创建可编辑区域 171 实例：创建网页模板 172 10.2 管理和使用模板 174 10.2.1 应用模板 174 10.2.2 从模板中分离 175 10.2.3 更新模板及模板内容页 175 10.2.4 创建嵌套模板 175 10.2.5 创建可选区域 176 10.3 创建和使用库 176 10.3.1 创建库项目 177 实例：新建库项目 177 10.3.2 插入库项目 178 10.3.3 编辑和更新库项目 179 10.4 课堂实战：制作旅行社网页 180 10.5 课后作业 183 第11章 表单的应用 11.1 使用表单 186 11.1.1 认识表单 186 11.1.2 基本表单元素 186 11.2 文本类表单 187 11.2.1 文本 187 11.2.2 密码 188 11.2.3 文本区域 189 实例：制作登录界面 189 11.3 单选按钮和复选框表单 191 11.3.1 单选按钮和单选按钮组 191 11.3.3 复选框和复选框组 192 实例：制作问答网页 193 11.4 其他常用表单 196 11.4.1 “提交”和“重置”按钮 196 11.4.2 文件 196 11.4.3 选择 196 11.5 课堂实战：制作读书网站网页 197 11.6 课后作业 203 第12章 行为的应用 12.1 什么是行为 206 12.1.1 行为 206 12.1.2 事件 207 12.1.3 常见事件的使用 207 12.2 利用行为调节浏览器窗口 208 12.2.1 调用JavaScript 208 12.2.2 转到URL 208 12.2.3 打开浏览器窗口 209 12.3 利用行为制作图像** 210 12.3.1 交换图像与恢复交换图像 210 实例：制作图像交换效果 211 12.3.2 预先载入图像 212 12.4 利用行为显示文本 213 12.4.1 弹出信息 213 实例：制作网页弹出信息 213 12.4.2 设置状态栏文本 214 12.4.3 设置容器的文本 214 12.4.4 设置文本域文字 215 12.5 利用行为控制表单 215 12.5.1 跳转菜单 215 12.5.2 检查表单 216 12.6 课堂实战：美化宠物网站首页 217 12.7 课后作业 219 第13章 制作动物园网页 13.1 项目背景及需求 222 13.1.1 项目背景 222 13.1.2 设计要求 222 13.2 项目制作 222 13.2.1 项目分析 223 13.2.2 制作步骤 224