【现货速发】Dreamweaver CC网页设计与制作

编审委员会
主任：  杨云
主任委员：  （排名不分先后）
张亦辉高爱国徐洪祥许文宪薛振清刘学刘文娟
窦家勇刘德强崔玉礼满昌勇李跃田刘晓飞李满
徐晓雁张金帮赵月坤国锋杨文虎张玉芳师以贺
张守忠孙秀红徐健盖晓燕孟宪宁张晖李芳玲
曲万里郭嘉喜杨忠徐希炜齐现伟彭丽英康志辉
委员：  （排名不分先后）
张磊陈双朱丽兰郭娟丁喜纲朱宪花魏俊博
孟春艳于翠媛邱春民李兴福刘振华朱玉业王艳娟
郭龙殷广丽姜晓刚单杰郑伟姚丽娟郭纪良
赵爱美赵国玲赵华丽刘文尹秀兰李春辉刘静
周晓宏刘敬贤崔学鹏刘洪海徐莉高静孙丽娜
秘书长： 陈守森平寒张龙卿
出版说明

我国高职高专教育经过十几年的发展，已经转向深度教学改革阶段。*于2012年3月发布了教高〔2012〕第4号文件《关于全面提高高等教育质量的若干意见》，重点建设一批特色高职学校，大力推行工学结合，突出实践能力培养，全面提高高职高专教学质量。
清华大学出版社作为国内大学出版社的领跑者，为了进一步推动高职高专计算机专业教材的建设工作，适应高职高专院校计算机类人才培养的发展趋势，2012年秋季开始了切合新一轮教学改革的教材建设工作。该系列教材一经推出，就得到了很多高职院校的认可和选用，其中部分书籍的销售量超过了三四万册。现根据计算机技术发展及教改的需要，重新组织优秀作者对部分图书进行改版，并增加了一些新的图书品种。
目前，国内高职高专院校计算机相关专业的教材品种繁多，但符合国家计算机技术发展需要的技能型人才培养方案并能够自成体系的教材还不多。
我们组织国内对计算机相关专业人才培养模式有研究并且有过丰富的实践经验的高职高专院校进行了较长时间的研讨和调研，遴选出一批富有工程实践经验和教学经验的“双师型”教师，合力编写了该系列适用于高职高专计算机相关专业的教材。
本系列教材是以任务驱动、案例教学为核心，以项目开发为主线而编写的。我们研究分析了国内外先进职业教育的教改模式、教学方法和教材特色，消化吸收了很多优秀的经验和成果，以培养技术应用型人才为目标，以企业对人才的需要为依据，将基本技能培养和主流技术相结合，保证该系列教材重点突出、主次分明、结构合理、衔接紧凑。其中的每本教材都侧重于培养学生的实战操作能力，使学、思、练相结合，旨在通过项目实践，增强学生的职业能力，并将书本知识转化为专业技能。
一、 教材编写思想
本系列教材以案例为中心，以技能培养为目标，围绕开发项目所用到的知识点进行讲解，并附上相关的例题来帮助读者加深理解。Dreamweaver CC网页设计与制作在系列教材中采用了大量的案例，这些案例紧密地结合教材中介绍的各个知识点，内容循序渐进、由浅入深，在整体上体现了内容主导、实例解析、以点带面的特点，配合课程采用以项目设计贯穿教学内容的教学模式。
出版说明二、 丛书特色
本系列教材体现了工学结合的教改思想，充分结合目前的教改现状，突出项目式教学改革的成果，着重打造立体化精品教材。具体特色包括以下方面。
(1) 参照和吸纳国内外优秀计算机专业教材的编写思想，采用国内一线企业的实际项目或者任务，以保证该系列教材具有更强的实用性，并与理论内容有很强的关联性。
(2) 准确把握高职高专计算机相关专业人才的培养目标和特点。
(3) 每本教材都通过一个个的教学任务或者教学项目来实施教学，强调在做中学、学中做，重点突出技能的培养，并不断拓展学生解决问题的思路和方法，以便培养学生未来在就业岗位上的终身学习能力。
(4) 借鉴或采用项目驱动的教学方法和考核制度，突出计算机技术人才培养的先进性、实践性和应用性。
(5) 以案例为中心，以能力培养为目标，通过实际工作的例子来引入相关概念，尽量符合学生的认知规律。
(6) 为了便于教师授课和学生学习，清华大学出版社网站（www.tup.com.cn）免费提供教材的相关教学资源。
当前，高职高专教育正处于新一轮教学深度改革时期，从专业设置、课程体系建设到教材建设，依然有很多新课题值得我们不断研究。希望各高职高专院校在教学实践中积极提出本系列教材的意见和建议，并及时反馈给我们。清华大学出版社将对已出版的教材不断地进行修订并使之更加完善，以提高教材质量，完善教材服务体系，继续出版更多的高质量教材，从而为我国的职业教育贡献我们的微薄之力。

编审委员会
2017年3月前言
随着互联网技术的高速发展，网络正逐步改变着人们的生活方式和工作方式。越来越多的个人、企业等纷纷建立自己的网站，利用网站来宣传和推广自己。
Dreamweaver CC 2018是一款可视的网页制作编辑软件，针对网络及移动平台进行设计、开发并发布，而不需要为程式代码烦恼。Dreamweaver经过重新设计，添加了新式界面和快速灵活的编码引擎，可让Web设计人员和前端开发人员更轻松地创建、编码和管理外观精美且适合任何屏幕大小的网站。现在的Dreamweaver比以往任何时候更专注、高效和快速，具备全新代码编辑器、更直观的用户界面（可选择深色主题）和多种增强功能，包括对HTML 5/CSS 3和jQuery提供的支持。
一、 本书内容
本书在编写过程中以真实项目为导向，采用由浅入深、由易到难的方式讲解。全书结构清晰、内容丰富，主要内容包括以下三个方面。
（1） 基础入门：本书第1、2章，介绍网页制作基础、网页的基本要素、网页设计工具、网站规划、Dreamweaver  CC 2018工作界面及基本操作、创建与管理站点等内容。
（2） 网页制作与设计：本书第3～11章，介绍了HTML语言基础、在网页中创建文本、使用图像与多媒体丰富网页内容、网页中的超链接和使用表格及浮动框架布局页面、表单网页的制作、创建CSS样式、将CSS应用到网页、应用CSS DIV灵活布局网页、利用模板和库创建网页等内容。
（3） 动态网页设计：本书第12～14章，介绍使用JavaScript行为创建动态效果的操作方法与技巧，完善网站，以及制作移动设备网页的知识。
二、 本书特点
（1） 以能力的培养和提高为目标来构建教学内容： 在构建教学内容时，首先是布置学习目标，通过案例引入、分析案例说明每个任务的学习目的，以企业网站建设项目作为主线展开，介绍网站设计与制作的全过程，将理论与实践完美地结合，把实用技术作为重点。
（2） 满足社会的需求： 本书内容突出职业院校特点，以职业能力为本，以技能教育为重点。教学内容以学生为中心，以实用性和就业为目标。教学内容的编写以学生兴趣为先导，采用项目教学的方法，在教学内容中采用实际项目案例，以便增强教材的可读性。一线企业的资深人员参与编写课后实训，让学生接触到行业资讯。
在此，要特别感谢来自企业的高级工程师吴一兵，在本书的编写过程中，他除了参编了课后实训内容外，还在百忙之中提出了很多有参考价值的意见和建议。
本书配备立体化的教学资源，包括教学课件（PPT）、操作视频、思考与练习和课程网站等，以方便教师教学和学生课后学习。使用本书的教师可以联系编辑获取教学资源（联系邮箱：743569646@qq.com）。
信息技术的发展日新月异，书中难免会有错误之处，恳请广大读者批评、指正。
前言
编者2019年6月

本书以项目为主线，通过项目讲解网页设计与制作的相关知识，从网页制作初学者的角度出发，系统并详细地介绍了Dreamweaver CC 2018制作网页的全部知识和各种设计技巧，鼓励学生在实践中加深对网页设计相关内容的理解与掌握。本书共分为14个项目，主要包括网页设计的基础知识、Dreamweaver CC 2018的基础操作、HTML语言基础、CSS样式的应用、制作文本网页、制作图像和多媒体网页、超链接、设计表格网页和框架网页、表单网页、XHTML CSS布局网页、模板和库、行为和制作动态网页、完善网站、制作移动设备网页这些方面的内容。全书内容由浅入深， 通俗易懂，在讲解时对操作过程中的每一个步骤都有详细的说明，并配有适当的图形；每个知识点采用“任务驱动”模式进行编写，通过具体的课堂任务案例及课后的巩固练习，结合网页编辑设计软件Dreamweaver CC 2018，由浅入深、循序渐进地介绍了网页制作技术。 本书可作为高职高专院校计算机专业的教材与参考书，也可作为网页设计初学者的自学用书。

本书以项目为主线，通过项目讲解网页设计与制作的相关知识，从网页制作初学者的角度出发，系统并详细地介绍了Dreamweaver CC 2018制作网页的全部知识和各种设计技巧，鼓励学生在实践中加深对网页设计相关内容的理解与掌握。本书共分为14个项目，主要包括网页设计的基础知识、Dreamweaver CC 2018的基础操作、HTML语言基础、CSS样式的应用、制作文本网页、制作图像和多媒体网页、超链接、设计表格网页和框架网页、表单网页、XHTML CSS布局网页、模板和库、行为和制作动态网页、完善网站、制作移动设备网页这些方面的内容。全书内容由浅入深， 通俗易懂，在讲解时对操作过程中的每一个步骤都有详细的说明，并配有适当的图形；每个知识点采用“任务驱动”模式进行编写，通过具体的课堂任务案例及课后的巩固练习，结合网页编辑设计软件Dreamweaver CC 2018，由浅入深、循序渐进地介绍了网页制作技术。 本书可作为高职高专院校计算机专业的教材与参考书，也可作为网页设计初学者的自学用书。

全日制硕士研究生，研究方向为计算机应用技术。长期从事数据库技术、企业信息化等方向的研究和教学工作，承担网页设计与制作、ORACLE数据库、SQL SERVER数据库管理系统及软件开发等课程的教学，2012年取得ORACLE数据库认证专家OCP证书。
先后获得学校优秀教师、优秀班主任、教学名师等光荣称号。

目录目录

项目1网页设计的基础知识1任务1.1互联网基础1
任务1.2网站欣赏4
任务1.3网页设计工具12
任务1.4开发网站的基本流程16
小结18
思考与练习18
项目2Dreamweaver CC 2018的基础操作19
任务2.1使用Dreamweaver CC 2018自定义页面19
任务2.2创建网站站点29
任务2.3网页文档的基本操作37
小结44
思考与练习45
项目3HTML语言基础46
任务3.1制作珠海航空展首页框架46
任务3.2编写文本的排版与格式——航展新闻列表53
任务3.3编写项目列表——航展新闻列表57
任务3.4编写超链接——航展新闻列表58
任务3.5表格图片的设置——珠海航展参展飞机清单的
公布 61
任务3.6编写表单注册页面——珠海航展注册页面65
小结68
思考与练习68
项目4CSS样式的应用70
任务4.1使用CSS样式修饰文本70任务4.2设置超链接样式95
任务4.3修饰图像、表格和背景99
小结104
思考与练习104
项目5制作文本网页105
任务5.1第十二届航展105
任务5.2航展新闻——“军机20系列”111
小结115
思考与练习115
项目6制作图像和多媒体网页116
任务6.1航展——飞行表演116
任务6.2航展——俄罗斯“勇士”表演队123
小结127
思考与练习127
项目7超链接128
任务7.1创建文本和图像超链接128
任务7.2创建锚点链接页面132
小结134
思考与练习134
项目8设计表格网页和框架网页135
任务8.1使用表格制作网页135
任务8.2使用浮动框架制作网页143
小结146
思考与练习147
项目9表单网页149
任务9.1制作用户登录页面149
任务9.2实现用户登录、身份验证功能156
小结164
思考与练习164
项目10XHTML CSS布局网页166
任务10.1制作第十二届中国航展简介页面166
任务10.2制作珠海航空展首页178
小结184
思考与练习184
项目11模板和库185
任务11.1利用模板制作珠海航空展其他页面185
任务11.2利用库文件制作珠海航空展其他页面193
小结196
思考与练习196
项目12行为和制作动态网页198
任务12.1制作新闻列表页面198
任务12.2制作注册登录页面202
小结218
思考与练习219
项目13完善网站220
任务13.1网站的测试220
任务13.2申请域名和空间223
任务13.3网站的上传和维护231
小结238
思考与练习238
项目14制作移动设备网页239
任务14.1创建jQuery Mobile页面239
任务14.2创建jQuery UI页面246
小结251
思考与练习252
参考文献253

本书以项目为主线，通过项目讲解网页设计与制作的相关知识，从网页制作初学者的角度出发，系统并详细地介绍了Dreamweaver CC 2018制作网页的全部知识和各种设计技巧，鼓励学生在实践中加深对网页设计相关内容的理解与掌握。本书共分为14个项目，主要包括网页设计的基础知识、Dreamweaver CC 2018的基础操作、HTML语言基础、CSS样式的应用、制作文本网页、制作图像和多媒体网页、超链接、设计表格网页和框架网页、表单网页、XHTML CSS布局网页、模板和库、行为和制作动态网页、完善网站、制作移动设备网页这些方面的内容。全书内容由浅入深， 通俗易懂，在讲解时对操作过程中的每一个步骤都有详细的说明，并配有适当的图形；每个知识点采用“任务驱动”模式进行编写，通过具体的课堂任务案例及课后的巩固练习，结合网页编辑设计软件Dreamweaver CC 2018，由浅入深、循序渐进地介绍了网页制作技术。 本书可作为高职高专院校计算机专业的教材与参考书，也可作为网页设计初学者的自学用书。

全日制硕士研究生，研究方向为计算机应用技术。长期从事数据库技术、企业信息化等方向的研究和教学工作，承担网页设计与制作、ORACLE数据库、SQL SERVER数据库管理系统及软件开发等课程的教学，2012年取得ORACLE数据库认证专家OCP证书。
先后获得学校优秀教师、优秀班主任、教学名师等光荣称号。

项目3HTML语言基础接正文SD45mm接标题二SD37mm项目3HTML语言基础
项目描述
HTML是使用特殊标记来描述文档结构和表现形式的一种语言，由World Wide Web Consortium所制定和更新。HTML是一种用于网页制作的排版语言，是Web基本的构成元素，它可以控制网页的基本结构，以及文本和图像等内容在网页中显示的方式。本项目利用HTML制作珠海航空展网站的基本框架，控制文本和图像显示样式，以及列表、表格和表单的使用。
知识目标
 掌握HTML的基本概念及结构。
 掌握文本和图像常用的HTML标签。
 熟悉列表、表格和表单标签。
技能目标
 熟练运用文本和图像常用的HTML标签。
 熟练运用列表、表格和表单的HTML标签。
 能使用HTML标记语言开发网页。
任务3.1制作珠海航空展首页框架
任务描述
通过HTML语言的基本框架标签完成“珠海航空展首页”的主体结构，如图31所示。
图31终首页主体效果图
相关知识与技能
1. HTML语言概述
HTML是一种超级文本标记语言，它是一种规范和标准，通过标签符号来标记要显示的网页中的各个元素。网页内容本身是一种文本文件，通过在文本文件中添加标签符来控制文字、图片、视频等元素在浏览器中显示的样式。
可以用任何一种文本编辑器来编辑HTML文件，因为它就是一种纯文本文件，其扩展名是.html或.htm。HTML文档的基本结构包括HTML文件、头文件、标题文件、主体文件等HTML标签。
1） HTML语言的特点
HTML语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件，其主要特点如下。
 简易性： HTML语言不是程序语言，它是一种标记语言及文本语言，任何一种文本编辑器都可以编辑。
 速度快： 使用HTML语言描述的文件无须解释运行，通过浏览器就可以显示出效果。
 通用性： HTML语言的编写和应用与平台无关，适用于所有浏览器，正因为有此特点，才使得万维网盛行。
 与平台无关： HTML语言的执行与平台无关，它独立于各种平台。
2） HTML发展的历程
HTML发展的历程如下：
 超文本标记语言（第1版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。
 HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。
 HTML 3.2——1997年1月14日，W3C推荐标准。
 HTML 4.0——1997年12月18日，W3C推荐标准。
 HTML 4.01——1999年12月24日，W3C推荐标准。
 HTML 5.0——2014年10月28日，W3C推荐标准。
3） HTML文档的编写方法
 手工直接编写： 用记事本等存成.htm或者.html格式。
 使用可视化HTML编辑器： 用Dreamweaver、xhEditor等。
 动态生成： 由Web服务器（或称HTTP 服务器）一方实时动态地生成。
4） HTML 5.0与HTML的区别
（1） 文档类型声明。
① HTML 4.01和XHTML 1.0
 strict模式： <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
  过渡模式:<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
 框架集： <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
② HTML 5.0 
<!DOCTYPE html>
文档声明HTML 5方便书写、精简，有利于程序员快速地阅读和开发。
(2) 结构语义。
① HTML 4.0： 没有体现结构语义化的标签，举例如下。 
<div id="nav"></div>
② HTML 5.0： 添加了许多具有语义化的标签。举例如下。 
<article>、<aside>、<audio>、<bdi>...
(3) HTML 5.0新增加的绘图功能。
 Canvas： HTML 5.0的Canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布的每一个像素。
 SVG： 是指可伸缩矢量图形，用于定义网络的基于矢量的图形。
注： 在Dreamweaver CC 2018中新建的默认文档类型就是HTML 5.0。
2. HTML文档的基本结构
（1） HTML文档的基本结构要求
所有HTML标记都是必须用尖括号（<>）括起来，标记大部分都是成对出现的，每一对元素一般都有一个开始的标记，也有一个结束的标记。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠，如<html>...</html>、<head>...</head>、<body>...</body>。
（2） 创建HTML文件
① 新建文本文件。
② 重命名文本文件，后缀名改为html。
（3） 制作HTML文档的基本结构<HTML>
<HEAD>
<TITL