书名：中文版Dreamweaver CC基础培训教程（移动学习版）pdf/doc/txt格式电子书下载

推荐语：

作者：马娜,陈中元,王文兵

出版社：人民邮电出版社有限公司

出版时间：2019-09-01

书籍编号：30530752

ISBN：9787115514998

正文语种：中文

字数：120631

版次：1

所属分类：教材教辅-大学

版权信息

书名：中文版Dreamweaver CC基础培训教程：移动学习版

作者：马娜，陈中元，王文兵 主编

出版社：人民邮电出版社有限公司

出版时间：2019-09-01

ISBN：9787115514998

免责声明：本站所有资源收集整理于网络，版权归原作者所有。
本站所有内容不得用于商业用途。本站发布的内容若侵犯到您的权益，请联系站长删除，我们将及时处理！

内容提要

Dreamweaver是用户需求量大、深受个人和企业青睐的网页制作软件之一。本书针对目前广泛使用的Dreamweaver CC软件，讲解使用Dreamweaver制作网页的方法。首先对网页的基础知识进行详细介绍；然后介绍使用Dreamweaver CC制作简单网页的方法，如制作基础的文本网页、图像网页；再逐步深入，讲解超链接、网页布局、模板、行为、表单和库等知识点和相关操作；最后将Dreamweaver操作与网页设计实战相结合，通过一个完整网页的设计与制作来对全书知识进行综合应用。

为了便于读者更好地学习，本书除了设计“疑难解答”“技巧”与“提示”小栏目，还在需要扩展、详解的知识点及操作步骤旁附有相应的视频和扩展资料，读者通过手机或平板电脑扫描对应二维码，即可观看该知识点的详解及操作步骤的视频演示。

本书不仅可作为各院校网页设计相关专业的教材，还可供相关行业及专业工作人员学习和参考。

前言

随着近年来课程的不断深入、计算机软硬件的升级，以及教学方式的不断更新，市场上很多教材讲解的软件版本、硬件型号、教学结构等都已不再适应当前的教学环境。

鉴于此，我们认真总结了教材编写经验，用2~3年的时间深入调研各地、各类院校的需求，组织了一个优秀且具有丰富教学经验和实践经验的作者团队编写了本套教材，以帮助各类院校快速培养优秀的技能型人才。

本着“学用结合”的原则，我们在教学方法、教学内容、教学资源3个方面体现了自己的特色。

教学方法

本书精心设计了“课堂案例→知识讲解→课堂练习→上机实训→课后练习”5段教学法，以激发学生的学习兴趣。通过对理论知识的讲解和经典案例的分析，训练学生的动手能力，再辅以课堂练习与课后练习帮助学生强化并巩固所学的知识和技能，达到提高学生实际应用能力的目的。

◎课堂案例：除了基础知识部分，涉及操作的知识均在每节开头以课堂案例的形式引入，让学生在操作中掌握该节知识在实际工作中的应用。

◎知识讲解：深入浅出地讲解理论知识，对课堂案例涉及的知识进行扩展与巩固，让学生理解课堂案例的操作。

◎课堂练习：紧密结合课堂讲解的内容给出操作要求，并提供适当的操作思路及专业背景知识供学生参考。该部分要求学生独立完成，以充分训练学生的动手能力，并提高其独立完成任务的能力。

◎上机实训：精选案例，对案例要求进行定位，对案例效果进行分析，并给出操作思路，帮助学生分析案例，让学生能够根据思路提示独立完成操作。

◎课后练习：结合每章内容给出几道操作题，学生可通过练习，强化巩固每章所学知识，从而温故知新。

教学内容

本书的教学目标是循序渐进地帮助学生掌握使用DreamweaverCC进行网页设计与制作的相关知识。全书共10章，可分为以下6个方面的内容。

◎第1章：概述网页设计与制作的一些基础知识，如网站、网页、网页结构、HTML标记语言等基本概念，以及网站设计与制作的基本流程等。

◎第2章：主要讲解DreamweaverCC的基本操作，包括认识工作界面、创建与管理站点、网页文档的基本操作、页面属性的设置等。

◎第3~5章：主要讲解使用DreamweaverCC制作网页的相关知识，包括制作简单的文本网页、图文并茂的网页、带有超链接的网页等。

◎第6章：主要讲解网页布局的相关知识，包括使用表格布局和使用p+CSS布局等。

◎第7~9章：主要讲解网页的高级操作，包括使用模板、库、表单、行为等功能，以及移动端网页的设计与制作方法。

◎第10章：综合应用本书所学的Dreamweaver知识进行网页设计与制作，包括网页首页和网页二级页面的制作等。

教学资源

本书提供了立体化教学资源，以丰富教师的教学方式。读者可到box.ptpress.com.cn/y/51499下载资源。本书的教学资源包括以下3个方面的内容。

01视频资源

本书在讲解过程中提供了很多辅助学习的视频，读者用手机或平板电脑扫描对应二维码即可查看、学习相关操作的视频演示等。

02教学资源

本书配套了精心制作的教学资源包，包括丰富的网页结构设计参考、网页效果图参考、PPT、教学教案等资源，以便老师顺利开展教学工作。

03扩展资源

扩展资源包中包含每年定期更新的拓展案例。扩展资源中含有网页设计案例素材、网页设计中的网站发布技术等。

致谢

本书由马娜、陈中元、王文兵任主编，杜怡君、喻会、吴谦任副主编。另外，刘淼参与了编写，并为本书提供了很多精彩的商业案例，在此表示感谢。

作者

2019年3月

第1章　网页的基本操作

随着科技的发展，网络以其独特的优势成为人们生活和工作中不可缺少的重要部分。它通过文字、图片、影音播放、下载传输、游戏、聊天软件等途径将各种信息通过网页传达给用户，为人们带来极其丰富的生活和美好的享受。Dreamweaver是网页制作的软件之一，在使用该软件制作网页前，读者需要先对网页的基本知识进行了解。本章将介绍制作网页的基础知识，包括网页设计基础、网页构建流程等。通过本章的学习，读者可以了解网页设计的相关基本操作。

课堂学习目标

●了解网站与网页的关系

●了解网站类型与基本结构

●掌握网页的基本构成要素

●掌握网站制作的基本流程

课堂案例展示

赏析特色网站

1.1　网页设计基础

在网络中，几乎所有的网络活动都与网页有关，要想学习网页制作，就需要先了解一些网页的基本知识，如网站与网页的关系、网站的类型、网站的结构、网页的基本构成要素和网页编辑语言等，本节将详细讲解这些知识。

1.1.1　网站与网页的关系

互联网是由成千上万个网站组成的，而每个网站又由诸多网页构成，因此可以说网站是由网页组成的一个整体。下面分别对网站和网页进行介绍。

●网站：网站是指在互联网上根据一定的规则，使用HTML（标准通用标记语言）工具制作的用于展示特定内容的一组相关网页的集合。通常情况下，网站只有一个主页，主页中会包含该网站的标志和指向其他页面的链接。用户可以通过网站来发布想要公开的资讯，或者利用网站来提供相关的网络服务；也可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。

●网页：网页是组成网站的基本单元，用户上网浏览的一个个页面就是网页。网页又称为Web页，一个网页通常就是一个单独的HTML文档，其中包含文字、图像、声音和超链接等元素。

1.1.2　常见的网站类型

网站是多个网页的集合，按网站内容可将网站分为5种类型：门户网站、企业网站、个人网站、专业网站和职能网站，下面将分别对这几种类型的网站进行讲解。

●门户网站：门户网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、新闻、娱乐等方面的内容，还具有论坛、搜索和短信等功能。国内较著名的门户网站有新浪网、搜狐网、网易网等，如图1-1所示。

●企业网站：企业网站是为了在互联网上展示企业形象和品牌产品，以对企业进行宣传而建设的网站。企业网站一般以企业的名义开发创建，其内容、样式、风格等都是为了展示自身的企业形象，如图1-2所示。

图1-1　门户网站

图1-2　企业网站

●个人网站：个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或为了展示、销售自己的作品、商品而制作的具有独立空间域名的网站，它具有较强的个性。图1-3所示为个人平面作品展示网站。

●专业网站：这类网站具有很强的专业性，通常只涉及某一个领域，如太平洋电脑网是一个电子产品专业网站平台，如图1-4所示。

图1-3　个人网站

图1-4　专业网站

●职能网站：职能网站具有特定的功能，如政府职能网站等。目前流行的电子商务网站也属于这类网站，较有名的电子商务网站有淘宝网、卓越网、当当网等，如图1-5所示。

图1-5　职能网站

1.1.3　页的分类

根据不同的分类方式，可以将网页分为不同的类型，下面分别进行介绍。

1.按位置分类

按网页在网站中的位置可将网页分为主页和内页。主页是指网站的主要导航页面，一般是进入网站时打开的第一个页面，也称为首页；内页是指与主页相链接的页面，也就是网站的内部页面。

2.按表现形式分类

按网页的表现形式可将网页分为静态网页和动态网页，并且静态网页与动态网页也是相对的，即静态网页的URL后缀是htm、html、shtml、xml等；而动态网页的URL后缀是asp、jsp、php、perl、cgi等。下面分别介绍静态网页和动态网页的特点。

●静态网页：静态网页的执行过程是浏览器向网络中的服务器发出请求，指向某个静态网页，服务器接收到请求后，将其传输给浏览器（传送的是一个文本文件），浏览器接收到服务器传来的文件后，解析HTML标记，再显示结果。

●动态网页：动态网页以数据库技术为基础，可以大大降低网站的维护量。动态网页可以实现注册、在线调查、用户登录及在线购物等功能，它并不是一个独立存在于服务器上的网页文件，而是当用户请求时，才从服务器中返回一个完整的网页。在浏览动态网页时，浏览器的地址栏中会有一个“？”符号。

虽然静态网页与动态网页都可以使用文字和图片展示网页信息，但是从网站的开发、管理和维护的角度来看，它们有很大的差别。

1.1.4　网站的基本结构

网站结构的设计与规划对整个网站的最终呈现效果起着至关重要的作用，它不但直接关系到页面结构的合理性，而且还在一定程度上映射出该网站的类型定位。下面对常见网站的结构进行介绍。

●国字型：国字型是最常见的一种布局方式，其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方为站点信息。

●拐角型：拐角型与国字型相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下方为站点信息。

●标题正文式：这种结构的布局方式比较简单，主要用于突出需要表达的重点，通常最上方为通栏的标题和导航条，下方为正文部分。

●封面式：封面式常用于显示宣传网站首页，一般以精美大幅图像为主题，设计方式多为Flash动画，还有许多网站采用HTML5来制作封面。

1.1.5　网页的构成要素

在网页中，文字和图像是构成网页最基本的两个元素。除此之外，构成网页的元素还包括动画、音频、视频和表单元素等，如图1-6所示。下面分别介绍网页各构成要素的作用。

知识链接

网页常用术语

●文字：文字是网页中最基本的组成元素之一，是网页主要的信息载体，通过它可以非常详细地将要传达的信息传送给用户。文字在网络上传输速度较快，用户可方便地浏览和下载文字信息。

●图像：图像也是网页中不可或缺的元素，它有着比文字更直观和生动的表现形式，并且可以传递一些文字不能传递的信息。

图1-6　网页的元素

●LOGO：在网页设计中，LOGO起着相当重要的作用。一个好的LOGO不仅可以为企业或网站树立好的形象，还可以传达丰富的行业信息。

●表单元素：表单是功能型网站的一种元素，它用于收集用户信息、帮助用户进行功能性控制。表单的交互设计与视觉设计是网站设计中相当重要的环节，在网页中小到搜索框、大到注册表都需要使用它。

●导航：导航是网站设计中必不可少的基础元素之一，它是网站结构的分类，用户可以通过导航识别网站的内容及信息。

●动画：网页中常用的动画格式主要有两种：一种是GIF动画；另一种是SWF动画。GIF动画是逐帧动画，相对比较简单；SWF动画则更富表现力和视觉冲击力，还可结合声音和互动功能，给用户带来强烈的视听感受。

●超链接：用于指定从一个位置跳转到另一个位置的超链接，可以是文本链接、图像链接、锚链接等。可以在当前页面中进行跳转，也可以在页面外进行跳转。

●音频：音频文件可以使网页效果更加多样化，网页中常用的音乐格式有mid、mp3等。mid是通过计算机软、硬件合成的音乐，不能被录制；mp3为压缩文件，其压缩率非常高，音质也不错，是背景音乐的首选。

●视频：网页中的视频文件一般为flv格式。它是一种基于Flash MX的视频流格式，具有文件小、加载速度快等特点，是网络视频格式的首选。

1.1.6　网页制作的核心语言

在网页制作方面，一些新技术、新应用层出不穷，但不管怎样变化，在制作网页时也要掌握最基础、最重要的网页核心语言，如HTML语言、CSS语言（将在第7章进行介绍）和JaveScript脚本语言等，下面分别对这些语言的内容进行简单介绍。

1.HTML标记语言

HTML是标准通用标记语言下的一个应用，也是一种规范、一种标准，它通过标记符来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容，如文字如何处理、画面如何安排、图片如何显示等。

（1）HTML语言的特点

HTML语言不复杂，但功能很强大，可支持不同数据格式的文件嵌入，如图像、声音、视频、动画、表单和超链接等，这也是它在互联网中盛行的原因之一，其主要特点如下。

●简易性：HTML语言版本升级采用超集方式，从而更加灵活方便。

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

●平台无关性：HTML语言是一种标准，使用同一标准的浏览器在查看一份HTML文档时的显示是一样的。但是网页浏览器的种类众多，为了让不同标准的浏览器用户查看同样显示效果的HTML文档，HTML语言使用了统一的标准，从而使其能显示于各个浏览器平台。

（2）HTML语言的基本语法

HTML语言是一套指令，通过指令让浏览器识别页面类别，而浏览器识别页面类别也是通过页面的起始标记<html>和结束标记</html>来实现的。由此可见，在网页中，大多数标记都是成对出现的，而每个标记的结束标记都是以右斜杠加关键字来表示的。另外，HTML页面主要有头部和主体两个部分，下面分别对其进行介绍。

●头部：所有关于整个文档的信息都包含在头部中，即<head></head>标记之间，如网页标题、描述及关键字等。

●主体：可以调用的任何语言的子程序都包含在主体中，网页中的所有标记内容都放在主体中，如文字、图像、嵌入的动画、Java小程序和其他页面元素等，即<body></body>标记之间。

提示

在头部的<head></head>标记之间还包括<title></title>标记，主要用于设置页面标题，但此标题并不会出现在浏览器窗口中，而是显示在浏览器的标题栏中。

（3）HTML语言的常用标记

在HTML语言中，各标记之间不区分大小写，不管是用大写字母、小写字母，还是大、小写字母混合使用，其作用都是相同的，但为了编码的美观，建议统一使用小写字母。下面介绍一些HTML语言中常用的标记符号。

●格式标记：在HTML语言中用于设置格式的标记主要有<p></p>分段标记，<br>换行标记，<blockquote></blockquote>两边缩进标记，<dl></dl>、<dt></dt>和<dd></dd>级别标记，<ol></ol>、<ul></ul>和<li></li>列表标记，<div></div>层标记等。

●文字标记：文字标记主要用于设置文字格式，如<pre></pre>预处理标记、<h1></h1>……<h6></h6>标题格式标记、<tt></tt>默认字体格式标记、<cite></cite>斜体标记、<em></em>斜体并黑体标记、<strong></strong>加粗并黑体标记等。

●图像标记：用于添加图像的标记，即<img></img>。

●表格标记：主要用于添加表格，即<table></table>。但可通过表格属性标记设置其表格格式。

●链接标记：在网页文档中添加各种链接，即<a href=\"\"></a>。

●表单及表单元素标记：主要用于添加表单及在表单中添加表单元素，如<form></form>表单标记、<input type=\"\">输入区标记、<select></select>下拉列表框标记、<option></option>列表框标记、<textarea></textarea>多行文本框区域标记。需注意的是，表单元素标记都必须放在表单标记中。

提示

<input type=\"\">标记中共提供了8种类型的输入区域，具体由type属性来决定，如<input type=\"text\">表示文本框，<input type=\"button\">表示按钮类型。

2.HTML5语言的基本介绍

HTML5草案的前身名为Web Applications 1.0，2004年由WHATWG提出，于2007年被万维网联盟（World Wide Web Consortium，W3C）接纳，并成立了新的HTML工作团队，第一份正式草案于2008年1月22日公布。2012年12月17日，万维网联盟宣布HTML5规范正式定稿，并称“HTML5是开放的Web网络平台的奠基石”。下面将分别介绍HTML5中的新标记及HTML5语言的新特点。

（1）HTML5中的新标记

在HTML5中提供了一些新的元素和属性，下面将分别介绍在HTML5语言中添加的常用标记。

●搜索引擎标记：主要是有助于索引整理，同时更好地帮助小屏幕装置和视障人士使用，即<nav></nav>导航块标记和<footer></footer>标记。

●视频和音频标记：主要用于添加视频和音频文件，如<video controls></video>和<audiocontrols></audio>。

●文档结构标记：主要用于在网页文档中进行布局分块，整个布局框架都使用<div>标记进行制作，如<header><footer><dialog><aside>和<fugure>。

●文字和格式标记：HTML5语言中的文字和格式标记与HTML语言中的基本相同，但是去掉了<u><font><center>和<strike>标记。

●表单元素标记：HTML5与HTML相比，在表单元素标记中，添加了更多的输入对象，即在<input type=\"\">中添加了电子邮件、日期、URL和颜色等输入对象。

（2）HTML5语言的新特点

与之前的HTML语言相比，HTML5语言有两大特点：一方面，它强化了Web网页的表现性能；另一方面，它除了可描绘二维图形外，还添加了播放视频和音频的标签，追加了本地数据等Web的应用功能。其新特点具体介绍如下。

●全新且合理的标记：该特点主要体现于多媒体对象的绑定情况。以前的多媒体对象都绑定在<object>和<embed>标记中，在HTML5中，则有单独的视频和音频的标记，分别为<videocontrols></video>和<audio controls></audio>标记。

●Canvas对象：主要是给浏览器带来了直接绘制矢量图的功能，可摆脱Flash和Silverlight，直接在浏览器中显示图形或动画。

●本地数据库：主要是通过内嵌一个本地的SQL数据库，增加交互式搜索、缓存和索引功能。

●浏览器中的真正程序：在浏览器中提供API，可实现浏览器内的编辑、拖放和各种图形用户界面的功能。

3.JavaScript脚本语言

JavaScript是一种脚本编程语言，支持网页应用程序的客户机和服务器的开发。在客户机中，它可用于编写网页浏览器在网页页面中执行的程序；在服务器中，它可用于编写服务器程序，网页服务器程序用于处理浏览器页面提交的各种信息并相应地更新浏览器的显示。因此，JavaScript语言是一种基于对象和事件驱动且具有安全性能的脚本语言。下面简单介绍JavaScript脚本语言。

（1）JavaScript脚本语言的特点

在网页中使用JavaScript脚本语言，可以与HTML语言一起实现在一个网页页面中与网页客户机交互的作用，并且它是通过嵌入或调入标准的HTML语言来实现的，弥补了HTML语言的缺陷。

JavaScript是一种比较简单的编程语言，在使用时直接在HTML页面中添加脚本，无需单独编译解释，在预览时直接读取脚本执行其指令。因此，JavaScript脚本语言使用起来简单方便、运行快，适用于简单应用。在Dreamweaver中的各种行为效果就是使用JavaScript脚本语言实现的。

（2）JavaScript脚本语言的引用及位置

在Dreamweaver CC中，JavaScript脚本语言是引用在<script></script>标记之间的，如图1-7所示。如果需要重复使用某个JavaScript程序，则可将这些代码作为一个单独的文件进行存放，其扩展名为js。在引用时，使用src属性，如图1-8所示。

图1-7　脚本语言的引用

图1-8　引用脚本文件

1.1.7　屏幕分辨率和网页编辑器

通过前面的知识可了解网页是一个HTML格式的文件，并通过UTL来识别与存取，再通过浏览器显示结果。此外，屏幕分辨率决定着网页制作的尺寸，而网页编辑器则是实现网站制作的一个利器。下面将对屏幕分辨率和网页编辑器进行介绍。

1.屏幕分辨率

屏幕分辨率是指分辨图像的清晰度，它也是由一个个像素点组成的，且分辨率越高，像素点越多，显示的图像就越清晰。

在网页设计中，屏幕分辨率直接影响着网页的尺寸。因为在网页布局时，由于用户操作环境的不同，其网页设计的尺寸也有所区别。就目前而言，1920像素×1080像素和1280像素×1024像素的屏幕分辨率是最常用的，设计的网页看起来也较为美观。图1-9所示为1920像素×1080像素下的网页，图1-10所示则为1280像素×1024像素下的网页。

图1-9　1920像素×1080像素下的网页

图1-10　1280像素×1024像素下的网页

2.网页编辑器

网页编辑器是指设计网页并输入内容的相关操作工具，根据输入的方法可以分为HTML代码编辑器和可视化编辑器。HTML代码编辑器可直接在编辑器中输入HTML代码，如记事本。而可视化编辑器则可根据操作查看效果，如常用的Dreamweaver CC。下面分别对这两种编辑器进行介绍。

●HTML代码编辑器：记事本是最典型的HTML代码编辑器，熟悉HTML标记的用户可直接在记事本中输入HTML标记制作网页，但输入的HTML标记不能有半点差错，否则将导致网页错误。

●可视化编辑器：Dreamweaver CC是最常用的可视化编辑器之一。在该编辑器中，即使不熟悉HTML标记也可以制作出网页，只需在网页中输入相应的内容，就会自动生成相应的HTML标记，但有可能生成一些不必要的标记，从而使文件变大。

1.1.8　网页色彩搭配

色彩是光刺激眼睛再传到大脑的视觉中枢而产生的一种感觉。良好的色彩搭配能够给网页浏览者带来很强的视觉冲击力，加深浏览者对网页的印象，是制作优秀网页的前提。下面介绍一些常用的网页色彩搭配方法。

1.网页安全色

即使设计了漂亮的配色方案，但由于浏览器、分辨率、计算机等配置不同，网页呈现在浏览者眼前的效果也不相同。为了避免这种情况发生，就需要使用网页安全色进行网页配色。

网页安全色是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板或者色谱）。当使用网页安全色进行配色后，这些颜色在任何终端用户的显示设备上都将显示为相同的效果。

网页安全色是当红色（Red）、绿色（Green）、蓝色（Blue）的颜色数字信号值（DAC Count）为0、51、102、153、204、255时构成的颜色组合，一共有216种颜色（其中彩色有210种，非彩色有6种）。Dreamweaver CC中直接提供了这些颜色，可以在颜色板中单击按钮展开色板，然后选择需要的颜色，如图1-11所示。

图1-11　Dreamweaver安全色

知识链接

网站设计色彩联想

网页安全色在需要实现高精度的渐变效果、显示真彩图像或照片时有一定的欠缺，设计时并不需要刻意局限使用这216种安全色，而是应该更好地搭配安全色和非安全色，以制作出具有个性和创意的网页。

2.色彩表达方式

在Dreamweaver中，颜色值最常见的表达方式是十六进制。十六进制是计算机中数据的一种表示方法，由数字0~9、字母A~F组成，字母不区分大小写。颜色值可以采用6位的十六进制代码来表示，并且需要在前面加上特殊符号“#”，如#0E533D。

除此之外，还可通过RGB、HSB、Lab、CMYK来表示。RGB色彩模式是通过对红（R）、绿（G）、蓝（B）3个颜色通道的变化及它们相互之间的叠加来得到各式各样的颜色，是目前运用最广的颜色系统之一。HSB色

....