《中公版·实用Web前端开发:零基础学Dreamweaver(扫书内二维码-听课程讲解·详见图书封底)》 中公教育优就业研究院 7519233987,9787519233983
配送至
编辑推荐
《中公版·实用Web前端开发：零基础学Dreamweaver》一书立足于Dreamweaver 软件本身，结合工作中常用的操作进行示例讲解，便于初学者掌握Dreamweaver 软件的使用技巧，从而具备从业能力。本书采用双色印刷，图文并茂，操作步骤详细明确，而且每章都配有二维码视频进行重难点讲解，使读者在掌握Dreamweaver 软件基础知识的基础上，具备较强的实际操作能力，读者扫描二维码即可实现在线学习，操作便捷高效。
目录
第1章DreamweaverCC入门1
1.1DreamweaverCC功能概述1
1.1.1主要功能1
1.1.2新增功能1
1.2DreamweaverCC的工作界面3
1.2.1菜单栏3
1.2.2工具栏4
1.2.3文档窗口4
1.2.4“属性”面板5
1.2.5面板组5
1.2.6文档状态栏5
1.3自定义工作区6
1.3.1浏览工作区6
1.3.2视图切换7
1.3.3处理面板9
1.3.4选择工作区布局11
1.3.5调整工具栏11
1.3.6个性化首选参数12
1.3.7创建自定义的快捷键12
1.3.8使用“属性”检查器12
1.4网页的管理13
1.4.1创建网页13
1.4.2保存网页与关闭网页13
1.4.3打开网页14
1.4.4利用文件面板管理网页文档或文件夹14
1.5可视化辅助工具14
1.5.1标尺工具14
1.5.2网格工具15
1.5.3辅助线工具15
1.6首选项设置16
1.6.1常规参数16
1.6.2代码格式17
1.6.3复制/粘贴17
1.6.4代码颜色18
1.6.5在浏览器中预览18
1.6.6字体18
1.6.7自定义代码视图19
第2章站点创建与管理20
2.1站点规划20
2.1.1文件分类保存20
2.1.2合理命名文件20
2.1.3本地站点与远程站点21
2.2认识“站点”面板21
2.2.1“站点”面板详解21
2.2.2创建站点22
2.3设置远程站点服务器23
2.3.1设置服务器23
2.3.2设置版本控制26
2.3.3站点的高级设置26
2.4导出和导入站点32
2.4.1导出站点32
2.4.2导入站点33
2.5维护站点33
2.5.1编辑站点33
2.5.2复制站点34
2.5.3删除站点34
2.5.4切换站点35
第3章HTML的基础知识36
3.1HTML概述36
3.2HTML的语法结构36
3.3HTML中的常用标签37
3.3.1文档结构标签37
3.3.2字符格式标签38
3.3.3区段格式标签38
3.3.4列表格式标签39
3.3.5超链接标签39
3.3.6多媒体标签40
3.3.7表单标签40
3.4HTML541
3.4.1HTML5概述41
3.4.2HTML5标签41
3.5设置头部信息42
3.5.1设置网页标题43
3.5.2设置网页META信息43
3.5.3添加网页关键字44
3.5.4添加网页说明44
3.5.5设置视口45
3.6“页面属性”对话框45
3.6.1设置“外观（CSS）”选项46
3.6.2设置“外观（HTML）”选项46
3.6.3设置“链接（CSS）”选项47
3.6.4设置“标题（CSS）”选项47
3.6.5设置“标题/编码”选项48
3.6.6设置“跟踪图像”选项49
第4章CSS样式50
4.1CSS样式基础50
4.1.1CSS样式概述50
4.1.2CSS样式的基础语法50
4.2选择符51
4.2.1通配选择符51
4.2.2类型选择符51
4.2.3包含选择符51
4.2.4id选择符51
4.2.5class选择符51
4.3使用CSS设置颜色52
4.4百分比值53
4.5设置URL的相对路径和绝对路径?53
4.5.1相对路径?53
4.5.2绝对路径?54
4.5.3应用实例?54
4.6调用CSS文件?54
4.6.1在页面内部调用?54
4.6.2调用外部CSS文件?54
4.7设置CSS属性56
4.7.1布局属性57
4.7.2文本属性58
4.7.3边框属性59
4.7.4背景属性60
4.7.5自定义属性61
第5章DIV+CSS网页布局62
5.1初识DIV62
5.1.1DIV概述62
5.1.2DIV与Span的区别62
5.1.3DIV+CSS布局优势64
5.2CSS定位64
5.2.1盒子模型的概念64
5.2.2float定位65
5.2.3position定位68
5.3CSS布局理念70
5.3.1用DIV将页面分块70
5.3.2设计各块的位置70
5.3.3用CSS定位71
5.4常见的布局类型71
5.4.1列固定宽度71
5.4.2列自适应72
5.4.3两列固定宽度72
5.4.4两列宽度自适应73
5.4.5两列右列宽度自适应73
5.4.6三列浮动中间列宽度自适应74
第6章网页中文字、段落和列表的应用75
6.1文字和段落75
6.1.1设置标题文字75
6.1.2设置文本的字体、字号和颜色75
6.1.3文本的加粗与倾斜?76
6.1.4分段处理76
6.1.5插入水平线76
6.1.6文字排版处理?77
6.2列表应用77
6.2.1无序列表77
6.2.2有序列表?77
6.2.3定义列表77
第7章使用表格布局网页78
7.1创建表格78
7.2应用表格79
7.2.1输入表格内容79
7.2.2选定表格元素80
7.2.3设置表格与单元格属性82
7.2.4像素和百分比的使用83
7.2.5添加和删除行或列83
7.2.6单元格的合并及拆分85
7.2.7表格排序86
7.2.8嵌套表格87
7.3扩展表格模式87
7.4导入和导出表格数据88
7.4.1导入表格数据88
7.4.2导出表格数据89
7.5表格实战90
7.5.1制作细线表格90
7.5.2制作分割线91
7.5.3制作隔距边框表格92
7.5.4网页布局95
7.5.5网页的构形设计96
第8章创建网页中的超链接99
8.1超级链接99
8.1.1URL简介99
8.1.2超级链接路径99
8.1.3网站内部链接100
8.1.4链接到网站内部图像101
8.1.5网站外部链接106
8.1.6创建空链接107
8.1.7为网页添加空链接107
8.2电子邮件链接109
8.3下载链接110
8.3.1创建下载链接110
8.3.2制作音乐下载网页113
8.4锚记链接116
8.4.1创建锚记链接116
8.4.2跳转到网页顶部117
8.5创建脚本链接118
8.6制作多彩链接网页119
第9章使用图片修饰网页124
9.1网页图片的格式124
9.1.1GIF格式图片124
9.1.2JPEG格式图片124
9.1.3PNG格式图片125
9.2图像占位符125
9.2.1插入图像占位符125
9.2.2将图像占位符替换为图像126
9.2.3预览网页时不显示图像的问题127
9.3交互式图像128
9.3.1插入交互式图像128
9.3.2交互式图像示例128
9.4网页背景131
9.4.1设置网页背景颜色131
9.4.2设置网页背景图像132
9.4.3使网页背景呈条纹状显示133
9.5图片相关的其他操作133
9.5.1外部图像编辑器133
9.5.2设置外部图像编辑器133
9.5.3制作个性图像网页135
9.5.4图像与文字的搭配136
9.5.5图像映射136
第10章创建网页中的多媒体对象138
10.1插入Flash动画138
10.1.1在网页中插入Flash动画138
10.1.2设置Flash动画属性139
10.2为网页添加背景音乐140
10.2.1网页中常用的音乐格式140
10.2.2使用＜bgsound＞标签添加背景音乐140
10.2.3使用插件嵌入音频141
10.3在网页中插入视频143
10.3.1网页中常用的视频格式143
10.3.2插入视频144
10.4在网页中插入特殊多媒体元素145
10.4.1插入EdgeAnimate动画145
10.4.2插入HTML5Video与HTML5Audio145
第11章用表单实现页面交互性147
11.1表单概述147
11.1.1什么是表单147
11.1.2表单的工作流程148
11.2表单的创建及设置148
11.2.1创建表单148
11.2.2设置表单属性150
11.3表单元素在网页中的应用151
11.3.1插入文本151
11.3.2插入密码153
11.3.3插入文本区域154
11.3.4插入隐藏154
11.3.5插入复选框155
11.3.6插入单选按钮组157
11.3.7插入选择菜单158
11.3.8插入图像按钮159
11.3.9插入文件160
11.3.10插入按钮160
11.4表单应用161
11.4.1制作在线调查表161
11.4.2制作下拉菜单166
11.4.3制作登录网页169
11.4.4制作注册网页174
11.4.5创建友情链接网页181
第12章框架、模板和库的应用186
12.1框架186
12.1.1框架的组成186
12.1.2框架的优点186
12.1.3框架的缺点187
12.2IFRAME框架187
12.3模板190
12.3.1创建模板190
12.3.2定义可编辑区域191
12.3.3定义可选区域192
12.3.4定义可编辑可选区域193
12.3.5定义重复区域194
12.4基于模板的页面195
12.4.1新建基于模板的页面195
12.4.2更新基于模板的页面196
12.4.3删除页面中使用的模板196
12.5使用库项目196
12.5.1新建库项目196
12.5.2插入库项目196
12.5.3编辑库项目197
12.5.4更新库项目197
12.5.5库项目的属性面板198
第13章使用行为创建网页特效200
13.1了解DreamweaverCC中的行为200
13.1.1行为的概念200
13.1.2“行为”面板201
13.1.3常见的动作类型202
13.1.4事件203
13.2使用DreamweaverCC内置行为204
13.2.1交换图像204
13.2.2弹出信息206
13.2.3打开浏览器窗口207
13.2.4转到URL209
13.2.5预先载入图像209
13.2.6设置容器的文本210
13.2.7设置状态栏文本210
13.2.8显示-隐藏元素211
13.2.9检查插件213
13.2.10检查表单214
13.3行为技巧216
13.3.1制作滚动公告216
13.3.2制作自动关闭网页217
13.3.3显示当前日期和时间219
13.3.4将站点加入收藏夹220
13.3.5将站点设为首页221
13.3.6实现定时关闭窗口222
13.3.7为页面设置访问口令223
第14章网站的发布与推广226
14.1测试站点226
14.1.1检查链接226
14.1.2站点报告228
14.1.3清理文档229
14.2发布网站232
14.3维护网站234
14.4网站的推广235
14.4.1登录搜索引擎235
14.4.2交换广告条236
14.4.3使用meta标签236
14.4.4使用传统方式推广238
14.4.5借助网络广告239
14.4.6登录网址导航站点240
14.4.7通过论坛宣传240
第15章综合实例241
15.1个人博客网站241
15.1.1网站规划241
15.1.2切图分析241
15.1.3页面实现242
15.2企业网站254
15.2.1网站规划254
15.2.2切图分析255
15.2.3页面实现255
文摘
第1章DreamweaverCC入门
DreamweaverCC是Adobe公司推出的一款拥有可视化编辑界面的网页制作与管理软件的最新版本，其提供了强大的可视化布局工具、应用开发功能和代码编辑支持，使设计和开发人员能够有效地创建非常吸引人的、基于标准的网站和应用。业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。本章将带领读者认识DreamweaverCC。
1.1DreamweaverCC功能概述
DreamweaverCC使用所见即所得的接口，亦有HTML（HyperTextMarkupLanguage，超文本标记语言）编辑的功能，其目前有Mac和Windows系统的版本。
DreamweaverCC提供了功能强大的站点管理工具，通过它可以轻松实现站点名称及所在路径定义、远程服务器连接、版本控制等功能，并且可以在这个基础上实现文件管理等功能。
1.1.1主要功能
DreamweaverCC是一款功能强大的可视化网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，还可以直接创建具有动态效果的网页而不用自己编写源代码。DreamweaverCC最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
1.1.2新增功能
DreamweaverCC包含新增功能预览和新功能操作视频，视频讲解了新功能的操作方法。该版本也提供选项，让用户略过预览，直接开始工作。
新功能视频解说是在用户安装或更新DreamweaverCC时，或删除偏好设置并重新启动DreamweaverCC时显示，也可以通过执行“帮助”>“新增功能视频”菜单命令随时查看。
相较于以前的版本，DreamweaverCC新增了以下功能。
（1）实时视图编辑功能
用户可以直接在实时视图中编辑并查看设计，连接或退出浏览器的时间会更短。实时视图可以使用全新的基于Chromium的渲染引擎，因此在DreamweaverCC和常用浏览器中显示的内容看起来一样。实时视图编辑功能包括快速属性检查器、元素的显示方式、现场查看属性检查器等。
（2）元素快速视图
借助新的“元素快速视图”，用户可以在单个列表视图中查看HTML元素，并能轻松地重新排列、复制和删除。
（3）使用“CSS设计器”面板
用户可以使用新的“CSS设计器”面板应用和创建基于标准的CSS布局、颜色、字体、文本以及快速响应的设计。“CSS设计器”面板的边框控制项界面增强，标签控制项可帮助用户以简单而直接的方式，设置四面边框属性，可避免同时看到所有值，以减少混淆的情形。新的面板支持从一个选择器复制样式并贴入另一个选择器中，用户可以复制所有样式，也可以仅复制特定样式类别，支持快速编辑文字块。用户还可以在其中指定属性的速记代码，如边界、间距、边框和边框半径。
（4）使用jQueryWidget
用户可以使用jQueryUI将Widget从“插入”面板拖放到Web项目以制作进度条、滑块、菜单和其他有用的组件。
（5）从PSD中提取资源和CSS
用户可以复制PSD复合元素中的所有或特定CSS属性，并直接将这些样式粘贴到CSS设计器、实时视图的元素显示中，或直接粘贴到用户的代码（CSS源或HTML文档）中，然后在PSD复合中选择的元素的CSS属性会自动填充到代码提示。如果希望使用编码，则可以使用这些代码提示将CSS属性提取到代码中。Extract提供了完整独立的解决方案，可供从PSD复合中提取样式信息和资源，无须频繁地在Photoshop和DreamweaverCC之间来回切换。
（6）使用Typekit设计高品质字体
在网页中能够使用的默认字体并不多，如果需要使用特殊的字体效果，通常都是将特殊文字制作成图片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能，在网页中可以加载Adobe提供的EdgeWeb字体，从而在网页中实现特殊字体效果。执行“修改”>“管理字体”命令，在弹出的“管理字体”对话框中选择AdobeEdgeWebFonts选项卡，即可使用Adobe提供的EdgeWeb字体。
（7）新增EdgeAnimate插入动画
在全新的DreamweaverCC中可以插入AdobeEdgeAnimate动画（OAM文件），默认情况下，用户在DreamweaverCC中插入AdobeEdgeAnimate动画后，会自动在当前站点的根目录中生成一个名为edgeanimate_assets的文件夹，将AdobeEdgeAnimate动画的提取内容放入该文件夹中。如果需要在DreamweaverCC中插入AdobeEdgeAnimate动画，可以单击“插入”面板“媒体”选项卡中的“EdgeAnimate作品”按钮。
（8）在Behance上分享作品
用户可以在Behance上分享项目，并得到来自世界各地的即时反馈。
（9）使用CreativeCloud存储作品
用户可以通过CreativeCloud随时随地保存并访问自己的作品，也可以使用AdobeCreativeCloud，检查并安装DreamweaverCC扩展功能。
1.2DreamweaverCC的工作界面
DreamweaverCC的工作界面主要由菜单栏、自定义快捷键、工具栏、文档窗口、属性面板、面板组、文档状态栏等构成，如图1-1所示。
图1-1
1.2.1菜单栏
菜单栏包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单，如图1-2所示。菜单栏上的每个菜单选项下面都有多个子菜单，每一个菜单命令都可以进行一些相关的命令执行或属性的设置。
图1-2
1.2.2工具栏
工具栏中包含一些按钮，用来在“代码”视图、“拆分”视图以及“设计”视图、“实时视图”间进行切换。此外，工具栏还包含一些与文档操作有关的常用命令和选项，如图1-3所示。
图1-3
●“代码”视图的按钮为，用于只在文档窗口中显示“代码”视图。
●同时显示“代码”视图和“设计”视图的按钮为，选中后文档窗口将拆分为“代码视图”和“设计视图”。其中文档窗口中左侧为“代码”视图，右侧为“设计”视图。
●“设计”视图的按钮为，用于只在文档窗口中显示“设计”视图。
●“实时视图”的按钮为，其中显示的内容与用户在浏览器中预览的效果一样。
●“在浏览器中预览/调试”按钮为，可根据用户需求，在用户选择的浏览器中进行预览或调试文档。
●“标题文本框”图标为，用于为文档输入一个标题，该标题将显示在浏览器的标题栏中。如果文档已有标题，则该标题将显示于该区域中。
●“文件管理”按钮为，用于对文件进行管理，如对文件进行获取、取出、上传、存回等操作。
1.2.3文档窗口
文档窗口用于显示当前的文档，包括“设计”视图、“代码”视图、“拆分”视图、“实时视图”。
●“设计”视图：是一个用于可视化页面布局、可视化编辑以及快速进行应用程序开发的设计环境。在该视图中，DreamweaverCC显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图，以在处理文档时显示动态内容。
●“代码”视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。
●“拆分”视图：该视图使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。
●实时视图：该视图使用户可以直接在文档窗口预览设计效果。
1.2.4“属性”面板
“属性”面板主要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。在“属性”面板中包括两种选项，一种是“HTML”选项，将默认显示文本的格式、样式和对齐方式等属性。另一种是“CSS”选项，单击属性面板中的“CSS”选项，可以在“CSS”选项中设置各种属性。“属性”面板显示当前选定的对象或文本的属性，也可以在这里直接修改属性。如图1-4所示。
图1-4
1.2.5面板组
DreamweaverCC中的面板可以自由组合成面板组。每个面板组都可以展开和折叠，并且可以和其他面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易地访问所需的面板，而不会使工作区变得混乱，如图1-5所示。
图1-5
1.2.6文档状态栏
文档状态栏可以提供与正在创建的文档有关的其他信息，如图1-6所示。
图1-6
●“标签选择器”图标为，单击图标可以选择文档中属于该标签的整个正文。图标为“元素快速视图”，用于显示环绕当前选定内容的标签的层次结构。通过单击该层次结构中的标签，可以选择该标签及其全部内容。
●“窗口大小”图标为，可以调整文档窗口的大小，使其达到预定义或自定义的尺寸。
1.3自定义工作区
DreamweaverCC包括两个主要的工作区，用于适应多种不同的计算机配置和各种工作流程。用户可以根据自己的喜好，调整DreamweaverCC中的编码环境，使之适合自己的习惯。如果任何预设的工作区都不能完全满足用户需要，则可以自定义工作区。
1.3.1浏览工作区
DreamweaverCC是行业领先的HTML编辑器，其功能十分强大。不论是编码人员、开发人员还是设计人员，都可以根据自己的喜好来自定义工作区，使其满足自己的需求。DreamweaverCC中用户可配置的面板和工具箱如图1-7所示。
《中公版·实用Web前端开发：零基础学Dreamweaver》一书立足于Dreamweaver 软件本身，结合工作中常用的操作进行示例讲解，便于初学者掌握Dreamweaver 软件的使用技巧，从而具备从业能力。本书采用双色印刷，图文并茂，操作步骤详细明确，而且每章都配有二维码视频进行重难点讲解，使读者在掌握Dreamweaver 软件基础知识的基础上，具备较强的实际操作能力，读者扫描二维码即可实现在线学习，操作便捷高效。
目录
第1章DreamweaverCC入门1
1.1DreamweaverCC功能概述1
1.1.1主要功能1
1.1.2新增功能1
1.2DreamweaverCC的工作界面3
1.2.1菜单栏3
1.2.2工具栏4
1.2.3文档窗口4
1.2.4“属性”面板5
1.2.5面板组5
1.2.6文档状态栏5
1.3自定义工作区6
1.3.1浏览工作区6
1.3.2视图切换7
1.3.3处理面板9
1.3.4选择工作区布局11
1.3.5调整工具栏11
1.3.6个性化首选参数12
1.3.7创建自定义的快捷键12
1.3.8使用“属性”检查器12
1.4网页的管理13
1.4.1创建网页13
1.4.2保存网页与关闭网页13
1.4.3打开网页14
1.4.4利用文件面板管理网页文档或文件夹14
1.5可视化辅助工具14
1.5.1标尺工具14
1.5.2网格工具15
1.5.3辅助线工具15
1.6首选项设置16
1.6.1常规参数16
1.6.2代码格式17
1.6.3复制/粘贴17
1.6.4代码颜色18
1.6.5在浏览器中预览18
1.6.6字体18
1.6.7自定义代码视图19
第2章站点创建与管理20
2.1站点规划20
2.1.1文件分类保存20
2.1.2合理命名文件20
2.1.3本地站点与远程站点21
2.2认识“站点”面板21
2.2.1“站点”面板详解21
2.2.2创建站点22
2.3设置远程站点服务器23
2.3.1设置服务器23
2.3.2设置版本控制26
2.3.3站点的高级设置26
2.4导出和导入站点32
2.4.1导出站点32
2.4.2导入站点33
2.5维护站点33
2.5.1编辑站点33
2.5.2复制站点34
2.5.3删除站点34
2.5.4切换站点35
第3章HTML的基础知识36
3.1HTML概述36
3.2HTML的语法结构36
3.3HTML中的常用标签37
3.3.1文档结构标签37
3.3.2字符格式标签38
3.3.3区段格式标签38
3.3.4列表格式标签39
3.3.5超链接标签39
3.3.6多媒体标签40
3.3.7表单标签40
3.4HTML541
3.4.1HTML5概述41
3.4.2HTML5标签41
3.5设置头部信息42
3.5.1设置网页标题43
3.5.2设置网页META信息43
3.5.3添加网页关键字44
3.5.4添加网页说明44
3.5.5设置视口45
3.6“页面属性”对话框45
3.6.1设置“外观（CSS）”选项46
3.6.2设置“外观（HTML）”选项46
3.6.3设置“链接（CSS）”选项47
3.6.4设置“标题（CSS）”选项47
3.6.5设置“标题/编码”选项48
3.6.6设置“跟踪图像”选项49
第4章CSS样式50
4.1CSS样式基础50
4.1.1CSS样式概述50
4.1.2CSS样式的基础语法50
4.2选择符51
4.2.1通配选择符51
4.2.2类型选择符51
4.2.3包含选择符51
4.2.4id选择符51
4.2.5class选择符51
4.3使用CSS设置颜色52
4.4百分比值53
4.5设置URL的相对路径和绝对路径?53
4.5.1相对路径?53
4.5.2绝对路径?54
4.5.3应用实例?54
4.6调用CSS文件?54
4.6.1在页面内部调用?54
4.6.2调用外部CSS文件?54
4.7设置CSS属性56
4.7.1布局属性57
4.7.2文本属性58
4.7.3边框属性59
4.7.4背景属性60
4.7.5自定义属性61
第5章DIV+CSS网页布局62
5.1初识DIV62
5.1.1DIV概述62
5.1.2DIV与Span的区别62
5.1.3DIV+CSS布局优势64
5.2CSS定位64
5.2.1盒子模型的概念64
5.2.2float定位65
5.2.3position定位68
5.3CSS布局理念70
5.3.1用DIV将页面分块70
5.3.2设计各块的位置70
5.3.3用CSS定位71
5.4常见的布局类型71
5.4.1列固定宽度71
5.4.2列自适应72
5.4.3两列固定宽度72
5.4.4两列宽度自适应73
5.4.5两列右列宽度自适应73
5.4.6三列浮动中间列宽度自适应74
第6章网页中文字、段落和列表的应用75
6.1文字和段落75
6.1.1设置标题文字75
6.1.2设置文本的字体、字号和颜色75
6.1.3文本的加粗与倾斜?76
6.1.4分段处理76
6.1.5插入水平线76
6.1.6文字排版处理?77
6.2列表应用77
6.2.1无序列表77
6.2.2有序列表?77
6.2.3定义列表77
第7章使用表格布局网页78
7.1创建表格78
7.2应用表格79
7.2.1输入表格内容79
7.2.2选定表格元素80
7.2.3设置表格与单元格属性82
7.2.4像素和百分比的使用83
7.2.5添加和删除行或列83
7.2.6单元格的合并及拆分85
7.2.7表格排序86
7.2.8嵌套表格87
7.3扩展表格模式87
7.4导入和导出表格数据88
7.4.1导入表格数据88
7.4.2导出表格数据89
7.5表格实战90
7.5.1制作细线表格90
7.5.2制作分割线91
7.5.3制作隔距边框表格92
7.5.4网页布局95
7.5.5网页的构形设计96
第8章创建网页中的超链接99
8.1超级链接99
8.1.1URL简介99
8.1.2超级链接路径99
8.1.3网站内部链接100
8.1.4链接到网站内部图像101
8.1.5网站外部链接106
8.1.6创建空链接107
8.1.7为网页添加空链接107
8.2电子邮件链接109
8.3下载链接110
8.3.1创建下载链接110
8.3.2制作音乐下载网页113
8.4锚记链接116
8.4.1创建锚记链接116
8.4.2跳转到网页顶部117
8.5创建脚本链接118
8.6制作多彩链接网页119
第9章使用图片修饰网页124
9.1网页图片的格式124
9.1.1GIF格式图片124
9.1.2JPEG格式图片124
9.1.3PNG格式图片125
9.2图像占位符125
9.2.1插入图像占位符125
9.2.2将图像占位符替换为图像126
9.2.3预览网页时不显示图像的问题127
9.3交互式图像128
9.3.1插入交互式图像128
9.3.2交互式图像示例128
9.4网页背景131
9.4.1设置网页背景颜色131
9.4.2设置网页背景图像132
9.4.3使网页背景呈条纹状显示133
9.5图片相关的其他操作133
9.5.1外部图像编辑器133
9.5.2设置外部图像编辑器133
9.5.3制作个性图像网页135
9.5.4图像与文字的搭配136
9.5.5图像映射136
第10章创建网页中的多媒体对象138
10.1插入Flash动画138
10.1.1在网页中插入Flash动画138
10.1.2设置Flash动画属性139
10.2为网页添加背景音乐140
10.2.1网页中常用的音乐格式140
10.2.2使用＜bgsound＞标签添加背景音乐140
10.2.3使用插件嵌入音频141
10.3在网页中插入视频143
10.3.1网页中常用的视频格式143
10.3.2插入视频144
10.4在网页中插入特殊多媒体元素145
10.4.1插入EdgeAnimate动画145
10.4.2插入HTML5Video与HTML5Audio145
第11章用表单实现页面交互性147
11.1表单概述147
11.1.1什么是表单147
11.1.2表单的工作流程148
11.2表单的创建及设置148
11.2.1创建表单148
11.2.2设置表单属性150
11.3表单元素在网页中的应用151
11.3.1插入文本151
11.3.2插入密码153
11.3.3插入文本区域154
11.3.4插入隐藏154
11.3.5插入复选框155
11.3.6插入单选按钮组157
11.3.7插入选择菜单158
11.3.8插入图像按钮159
11.3.9插入文件160
11.3.10插入按钮160
11.4表单应用161
11.4.1制作在线调查表161
11.4.2制作下拉菜单166
11.4.3制作登录网页169
11.4.4制作注册网页174
11.4.5创建友情链接网页181
第12章框架、模板和库的应用186
12.1框架186
12.1.1框架的组成186
12.1.2框架的优点186
12.1.3框架的缺点187
12.2IFRAME框架187
12.3模板190
12.3.1创建模板190
12.3.2定义可编辑区域191
12.3.3定义可选区域192
12.3.4定义可编辑可选区域193
12.3.5定义重复区域194
12.4基于模板的页面195
12.4.1新建基于模板的页面195
12.4.2更新基于模板的页面196
12.4.3删除页面中使用的模板196
12.5使用库项目196
12.5.1新建库项目196
12.5.2插入库项目196
12.5.3编辑库项目197
12.5.4更新库项目197
12.5.5库项目的属性面板198
第13章使用行为创建网页特效200
13.1了解DreamweaverCC中的行为200
13.1.1行为的概念200
13.1.2“行为”面板201
13.1.3常见的动作类型202
13.1.4事件203
13.2使用DreamweaverCC内置行为204
13.2.1交换图像204
13.2.2弹出信息206
13.2.3打开浏览器窗口207
13.2.4转到URL209
13.2.5预先载入图像209
13.2.6设置容器的文本210
13.2.7设置状态栏文本210
13.2.8显示-隐藏元素211
13.2.9检查插件213
13.2.10检查表单214
13.3行为技巧216
13.3.1制作滚动公告216
13.3.2制作自动关闭网页217
13.3.3显示当前日期和时间219
13.3.4将站点加入收藏夹220
13.3.5将站点设为首页221
13.3.6实现定时关闭窗口222
13.3.7为页面设置访问口令223
第14章网站的发布与推广226
14.1测试站点226
14.1.1检查链接226
14.1.2站点报告228
14.1.3清理文档229
14.2发布网站232
14.3维护网站234
14.4网站的推广235
14.4.1登录搜索引擎235
14.4.2交换广告条236
14.4.3使用meta标签236
14.4.4使用传统方式推广238
14.4.5借助网络广告239
14.4.6登录网址导航站点240
14.4.7通过论坛宣传240
第15章综合实例241
15.1个人博客网站241
15.1.1网站规划241
15.1.2切图分析241
15.1.3页面实现242
15.2企业网站254
15.2.1网站规划254
15.2.2切图分析255
15.2.3页面实现255
文摘
第1章DreamweaverCC入门
DreamweaverCC是Adobe公司推出的一款拥有可视化编辑界面的网页制作与管理软件的最新版本，其提供了强大的可视化布局工具、应用开发功能和代码编辑支持，使设计和开发人员能够有效地创建非常吸引人的、基于标准的网站和应用。业界通常将Dreamweaver、Flash、Fireworks称为“网页三剑客”。本章将带领读者认识DreamweaverCC。
1.1DreamweaverCC功能概述
DreamweaverCC使用所见即所得的接口，亦有HTML（HyperTextMarkupLanguage，超文本标记语言）编辑的功能，其目前有Mac和Windows系统的版本。
DreamweaverCC提供了功能强大的站点管理工具，通过它可以轻松实现站点名称及所在路径定义、远程服务器连接、版本控制等功能，并且可以在这个基础上实现文件管理等功能。
1.1.1主要功能
DreamweaverCC是一款功能强大的可视化网页编辑与管理软件。利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，还可以直接创建具有动态效果的网页而不用自己编写源代码。DreamweaverCC最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
1.1.2新增功能
DreamweaverCC包含新增功能预览和新功能操作视频，视频讲解了新功能的操作方法。该版本也提供选项，让用户略过预览，直接开始工作。
新功能视频解说是在用户安装或更新DreamweaverCC时，或删除偏好设置并重新启动DreamweaverCC时显示，也可以通过执行“帮助”>“新增功能视频”菜单命令随时查看。
相较于以前的版本，DreamweaverCC新增了以下功能。
（1）实时视图编辑功能
用户可以直接在实时视图中编辑并查看设计，连接或退出浏览器的时间会更短。实时视图可以使用全新的基于Chromium的渲染引擎，因此在DreamweaverCC和常用浏览器中显示的内容看起来一样。实时视图编辑功能包括快速属性检查器、元素的显示方式、现场查看属性检查器等。
（2）元素快速视图
借助新的“元素快速视图”，用户可以在单个列表视图中查看HTML元素，并能轻松地重新排列、复制和删除。
（3）使用“CSS设计器”面板
用户可以使用新的“CSS设计器”面板应用和创建基于标准的CSS布局、颜色、字体、文本以及快速响应的设计。“CSS设计器”面板的边框控制项界面增强，标签控制项可帮助用户以简单而直接的方式，设置四面边框属性，可避免同时看到所有值，以减少混淆的情形。新的面板支持从一个选择器复制样式并贴入另一个选择器中，用户可以复制所有样式，也可以仅复制特定样式类别，支持快速编辑文字块。用户还可以在其中指定属性的速记代码，如边界、间距、边框和边框半径。
（4）使用jQueryWidget
用户可以使用jQueryUI将Widget从“插入”面板拖放到Web项目以制作进度条、滑块、菜单和其他有用的组件。
（5）从PSD中提取资源和CSS
用户可以复制PSD复合元素中的所有或特定CSS属性，并直接将这些样式粘贴到CSS设计器、实时视图的元素显示中，或直接粘贴到用户的代码（CSS源或HTML文档）中，然后在PSD复合中选择的元素的CSS属性会自动填充到代码提示。如果希望使用编码，则可以使用这些代码提示将CSS属性提取到代码中。Extract提供了完整独立的解决方案，可供从PSD复合中提取样式信息和资源，无须频繁地在Photoshop和DreamweaverCC之间来回切换。
（6）使用Typekit设计高品质字体
在网页中能够使用的默认字体并不多，如果需要使用特殊的字体效果，通常都是将特殊文字制作成图片的形式。在DreamweaverCC中新增了EdgeWebFonts的功能，在网页中可以加载Adobe提供的EdgeWeb字体，从而在网页中实现特殊字体效果。执行“修改”>“管理字体”命令，在弹出的“管理字体”对话框中选择AdobeEdgeWebFonts选项卡，即可使用Adobe提供的EdgeWeb字体。
（7）新增EdgeAnimate插入动画
在全新的DreamweaverCC中可以插入AdobeEdgeAnimate动画（OAM文件），默认情况下，用户在DreamweaverCC中插入AdobeEdgeAnimate动画后，会自动在当前站点的根目录中生成一个名为edgeanimate_assets的文件夹，将AdobeEdgeAnimate动画的提取内容放入该文件夹中。如果需要在DreamweaverCC中插入AdobeEdgeAnimate动画，可以单击“插入”面板“媒体”选项卡中的“EdgeAnimate作品”按钮。
（8）在Behance上分享作品
用户可以在Behance上分享项目，并得到来自世界各地的即时反馈。
（9）使用CreativeCloud存储作品
用户可以通过CreativeCloud随时随地保存并访问自己的作品，也可以使用AdobeCreativeCloud，检查并安装DreamweaverCC扩展功能。
1.2DreamweaverCC的工作界面
DreamweaverCC的工作界面主要由菜单栏、自定义快捷键、工具栏、文档窗口、属性面板、面板组、文档状态栏等构成，如图1-1所示。
图1-1
1.2.1菜单栏
菜单栏包括“文件”“编辑”“查看”“插入”“修改”“格式”“命令”“站点”“窗口”和“帮助”10个菜单，如图1-2所示。菜单栏上的每个菜单选项下面都有多个子菜单，每一个菜单命令都可以进行一些相关的命令执行或属性的设置。
图1-2
1.2.2工具栏
工具栏中包含一些按钮，用来在“代码”视图、“拆分”视图以及“设计”视图、“实时视图”间进行切换。此外，工具栏还包含一些与文档操作有关的常用命令和选项，如图1-3所示。
图1-3
●“代码”视图的按钮为，用于只在文档窗口中显示“代码”视图。
●同时显示“代码”视图和“设计”视图的按钮为，选中后文档窗口将拆分为“代码视图”和“设计视图”。其中文档窗口中左侧为“代码”视图，右侧为“设计”视图。
●“设计”视图的按钮为，用于只在文档窗口中显示“设计”视图。
●“实时视图”的按钮为，其中显示的内容与用户在浏览器中预览的效果一样。
●“在浏览器中预览/调试”按钮为，可根据用户需求，在用户选择的浏览器中进行预览或调试文档。
●“标题文本框”图标为，用于为文档输入一个标题，该标题将显示在浏览器的标题栏中。如果文档已有标题，则该标题将显示于该区域中。
●“文件管理”按钮为，用于对文件进行管理，如对文件进行获取、取出、上传、存回等操作。
1.2.3文档窗口
文档窗口用于显示当前的文档，包括“设计”视图、“代码”视图、“拆分”视图、“实时视图”。
●“设计”视图：是一个用于可视化页面布局、可视化编辑以及快速进行应用程序开发的设计环境。在该视图中，DreamweaverCC显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。用户可以配置“设计”视图，以在处理文档时显示动态内容。
●“代码”视图：一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。
●“拆分”视图：该视图使用户可以在一个窗口中同时看到同一文档的“代码”视图和“设计”视图。
●实时视图：该视图使用户可以直接在文档窗口预览设计效果。
1.2.4“属性”面板
“属性”面板主要用于查看和更改所选对象的各种属性，每种对象都具有不同的属性。在“属性”面板中包括两种选项，一种是“HTML”选项，将默认显示文本的格式、样式和对齐方式等属性。另一种是“CSS”选项，单击属性面板中的“CSS”选项，可以在“CSS”选项中设置各种属性。“属性”面板显示当前选定的对象或文本的属性，也可以在这里直接修改属性。如图1-4所示。
图1-4
1.2.5面板组
DreamweaverCC中的面板可以自由组合成面板组。每个面板组都可以展开和折叠，并且可以和其他面板组停靠在一起或取消停靠。面板组还可以停靠到集成的应用程序窗口中。这样就能够很容易地访问所需的面板，而不会使工作区变得混乱，如图1-5所示。
图1-5
1.2.6文档状态栏
文档状态栏可以提供与正在创建的文档有关的其他信息，如图1-6所示。
图1-6
●“标签选择器”图标为，单击图标可以选择文档中属于该标签的整个正文。图标为“元素快速视图”，用于显示环绕当前选定内容的标签的层次结构。通过单击该层次结构中的标签，可以选择该标签及其全部内容。
●“窗口大小”图标为，可以调整文档窗口的大小，使其达到预定义或自定义的尺寸。
1.3自定义工作区
DreamweaverCC包括两个主要的工作区，用于适应多种不同的计算机配置和各种工作流程。用户可以根据自己的喜好，调整DreamweaverCC中的编码环境，使之适合自己的习惯。如果任何预设的工作区都不能完全满足用户需要，则可以自定义工作区。
1.3.1浏览工作区
DreamweaverCC是行业领先的HTML编辑器，其功能十分强大。不论是编码人员、开发人员还是设计人员，都可以根据自己的喜好来自定义工作区，使其满足自己的需求。DreamweaverCC中用户可配置的面板和工具箱如图1-7所示。
| ISBN | 7519233987,9787519233983 |
|---|---|
| 出版社 | 世界图书出版公司 |
| 作者 | 中公教育优就业研究院 |
| 尺寸 | 16 |