第1章 Dreamweaver CC网页设计基础
视频讲解:48分钟
1.1 Dreamweaver概述
1.1.1 Dreamweaver历史
1.1.2 熟悉Dreamweaver主界面
1.2 使用辅助工具
1.2.1 标尺
1.2.2 网格
1.2.3 辅助线
1.3 操作编码环境
1.3.1 代码提示
1.3.2 代码格式化
1.3.3 编码工具栏
1.4 使用编码工具<p>第1章 Dreamweaver CC网页设计基础</p> <p> 视频讲解:48分钟</p> <p>1.1 Dreamweaver概述</p> <p>1.1.1 Dreamweaver历史</p> <p>1.1.2 熟悉Dreamweaver主界面</p> <p>1.2 使用辅助工具</p> <p>1.2.1 标尺</p> <p>1.2.2 网格</p> <p>1.2.3 辅助线</p> <p>1.3 操作编码环境</p> <p>1.3.1 代码提示</p> <p>1.3.2 代码格式化</p> <p>1.3.3 编码工具栏</p> <p>1.4 使用编码工具</p> <p>1.4.1 快速标签编辑器</p> <p>1.4.2 代码片断</p> <p>1.4.3 代码浏览器</p> <p> </p> <p>第2章 新建网页</p> <p> 视频讲解:72分钟</p> <p>2.1 实战演练:新建页面</p> <p>2.2 初始化页面样式</p> <p>2.2.1 设置外观</p> <p>2.2.2 设置链接</p> <p>2.2.3 设置标题</p> <p>2.2.4 设置标题/编码</p> <p>2.2.5 设置跟踪图像</p> <p>2.3 定义元信息</p> <p>2.3.1 实战演练:设置网页字符编码</p> <p>2.3.2 实战演练:设置页面有效期</p> <p>2.3.3 实战演练:设置网页禁止缓存</p> <p>2.3.4 实战演练:设置网页自动刷新</p> <p>2.3.5 实战演练:设置网页自动跳转</p> <p>2.3.6 实战演练:设置网页转场效果</p> <p>2.3.7 实战演练:设置网页独立显示</p> <p>2.3.8 实战演练:设置网页编辑器说明</p> <p>2.3.9 实战演练:设置网页关键词</p> <p>2.3.10 实战演练:设置首页搜索限制</p> <p>2.3.11 实战演练:设置网页说明</p> <p>2.3.12 实战演练:设置网页作者信息</p> <p>2.3.13 实战演练:设置网页版权信息</p> <p>2.3.14 实战演练:设置建站日期</p> <p>2.3.15 实战演练:设置作者联系邮箱</p> <p>2.4 HTML基础</p> <p>2.4.1 HTML文档基本结构</p> <p>2.4.2 HTML基本语法</p> <p>2.4.3 HTML标签</p> <p>2.4.4 HTML属性</p> <p>2.5 案例实战:使用编码设计网页</p> <p> </p> <p>第3章 编辑网页文本</p> <p> 视频讲解:90分钟</p> <p>3.1 输入网页文本</p> <p>3.2 设置文本属性</p> <p>3.3 定义文本格式</p> <p>3.3.1 实战演练:输入段落文本</p> <p>3.3.2 实战演练:定义标题文本</p> <p>3.3.3 实战演练:输入预定义格式文本</p> <p>3.4 案例实战:定义类文本</p> <p>3.5 设置字体样式</p> <p>3.5.1 实战演练:定义字体类型</p> <p>3.5.2 实战演练:定义字体颜色</p> <p>3.5.3 实战演练:定义粗体和斜体样式</p> <p>3.5.4 实战演练:定义字体大小</p> <p>3.6 设置段落样式</p> <p>3.6.1 实战演练:强制换行</p> <p>3.6.2 实战演练:定义文本对齐</p> <p>3.6.3 实战演练:定义文本缩进</p> <p>3.7 设置列表属性</p> <p>3.7.1 实战演练:设计项目列表</p> <p>3.7.2 实战演练:设计编号列表</p> <p>3.7.3 实战演练:设计定义列表</p> <p>3.7.4 实战演练:设计多层目录结构</p> <p>3.8 综合案例</p> <p>3.8.1 定义链接文本</p> <p>3.8.2 输入特殊文本</p> <p>3.8.3 批量修改文本</p> <p> </p> <p>第4章 插入图像</p> <p> 视频讲解:77分钟</p> <p>4.1 网页图像概述</p> <p>4.2 插入网页图像</p> <p>4.2.1 实战演练:插入普通图像</p> <p>4.2.2 实战演练:插入鼠标经过图像</p> <p>4.2.3 实战演练:插入图像占位符</p> <p>4.2.4 实战演练:插入Fireworks HTML</p> <p>4.3 案例实战:设置图像属性</p> <p>4.4 编辑网页图像</p> <p>4.4.1 实战演练:调整图像大小</p> <p>4.4.2 实战演练:裁剪图像</p> <p>4.4.3 实战演练:调整图像亮度和对比度</p> <p>4.4.4 实战演练:锐化图像</p> <p>4.4.5 实战演练:优化图像</p> <p>4.5 案例实战:混搭Dreamweaver Photoshop设计</p> <p>4.6 综合案例</p> <p>4.6.1 定义图像自适应大小</p> <p>4.6.2 定义图像边框</p> <p>4.6.3 设计半透明图像效果</p> <p>4.6.4 设计图文混排版式</p> <p> </p> <p>第5章 定义网页链接</p> <p> 视频讲解:60分钟</p> <p>5.1 网页链接概述</p> <p>5.1.1 熟悉URL</p> <p>5.1.2 认识路径</p> <p>5.1.3 定义链接注意事项</p> <p>5.2 定义链接</p> <p>5.2.1 实战演练:使用“属性”面板</p> <p>5.2.2 实战演练:使用指向文件图标</p> <p>5.2.3 实战演练:使用Hyperlink对话框</p> <p>5.2.4 实战演练:使用快捷菜单</p> <p>5.2.5 实战演练:使用拖曳定义链接</p> <p>5.2.6 实战演练:在代码中定义链接</p> <p>5.3 应用链接</p> <p>5.3.1 实战演练:定义锚点链接</p> <p>5.3.2 实战演练:定义电子邮箱链接</p> <p>5.3.3 实战演练:定义脚本链接</p> <p>5.3.4 实战演练:定义空链接</p> <p>5.3.5 实战演练:定义下载链接</p> <p>5.3.6 实战演练:定义多链接</p> <p>5.4 案例实战:定义图像热点</p> <p>5.5 综合案例</p> <p>5.5.1 定义网页链接样式</p> <p>5.5.2 设计下划线链接样式</p> <p>5.5.3 设计立体链接样式</p> <p>5.5.4 设计滑动背景链接样式</p> <p> </p> <p>第6章 应用多媒体</p> <p> 视频讲解:83分钟</p> <p>6.1 案例实战:在网页中使用Flash动画</p> <p>6.2 案例实战:在网页中使用FLV视频</p> <p>6.3 在网页中插入插件</p> <p>6.3.1 实战演练:在网页中嵌入背景音乐</p> <p>6.3.2 实战演练:插入音频</p> <p>6.3.3 实战演练:插入视频</p> <p>6.4 案例实战:使用HTML5音频</p> <p>6.5 案例实战:使用HTML5视频</p> <p>6.6 HTML5多媒体**控制</p> <p>6.6.1 属性</p> <p>6.6.2 方法</p> <p>6.6.3 事件</p> <p>6.7 使用HTML5画布</p> <p>6.7.1 实战演练:在页面中插入画布</p> <p>6.7.2 实战演练:在画布中绘制图形</p> <p>6.7.3 实战演练:绘制基本图形</p> <p>6.7.4 实战演练:清理画布和恢复画布状态</p> <p>6.7.5 实战演练:变换图形</p> <p>6.7.6 实战演练:插入文字和图像</p> <p>6.8 综合案例</p> <p>6.8.1 设计音乐播放器</p> <p>6.8.2 设计动态时钟</p> <p> </p> <p>第7章 使用表格</p> <p> 视频讲解:57分钟</p> <p>7.1 案例实战:插入表格</p> <p>7.2 选择表格</p> <p>7.2.1 实战演练:选择表格</p> <p>7.2.2 实战演练:选择表格的行或列</p> <p>7.2.3 实战演练:选择单元格</p> <p>7.3 设置表格属性</p> <p>7.3.1 设置<table>属性</p> <p>7.3.2 设置<tr>和<td>属性</p> <p>7.4 操作表格</p> <p>7.4.1 实战演练:调整表格大小</p> <p>7.4.2 实战演练:清除和均化表格大小</p> <p>7.4.3 实战演练:增加行和列</p> <p>7.4.4 实战演练:删除表格元素</p> <p>7.4.5 实战演练:剪切、复制和粘贴单元格</p> <p>7.4.6 实战演练:合并和拆分单元格</p> <p>7.4.7 实战演练:导入表格数据</p> <p>7.4.8 实战演练:导出表格数据</p> <p>7.4.9 实战演练:排序表格数据</p> <p>7.5 案例实战:设计表格样式</p> <p>7.5.1 定义边框样式</p> <p>7.5.2 优化表格样式</p> <p>7.6 综合案例:设计表格页面</p> <p>7.6.1 设计内容页</p> <p>7.6.2 设计弹性主页</p> <p>7.6.3 设计交互式首页</p> <p> </p> <p>第8章 使用CSS</p> <p> 视频讲解:80分钟</p> <p>8.1 CSS概述</p> <p>8.2 CSS基本语法和用法</p> <p>8.2.1 CSS基本结构</p> <p>8.2.2 CSS基本用法</p> <p>8.2.3 CSS样式表</p> <p>8.2.4 导入外部样式表</p> <p>8.2.5 CSS注释和空格</p> <p>8.3 CSS属性和值</p> <p>8.3.1 CSS属性</p> <p>8.3.2 CSS属性值</p> <p>8.4 CSS选择器</p> <p>8.5 CSS特性</p> <p>8.5.1 CSS继承性</p> <p>8.5.2 CSS层叠性</p> <p>8.6 CSS设备类型</p> <p>8.7 使用CSS设计器</p> <p>8.7.1 认识CSS设计器</p> <p>8.7.2 实战演练:创建和附加样式表</p>显示全部信息前 言作为业界领先的网页制作软件,无论是国内还是国外,Dreamweaver 都深受广大网页设计工作者的青睐。Dreamweaver是一款对网站、网页和Web应用程序进行设计、编码和开发的专业编辑软件。目前,Dreamweaver CC是*新版本,该版本增加了许多新功能。同时,对软件外观和布局做了进一步调整,使界面看起来非常简洁、明朗。在软件的性能和易操作性方面也做了不少改进,全面支持*新的HTML5和CSS3技术。可以说,它是一个集网页创作和站点管理于一身的重量级Web开发工具。
随着互联网的快速普及和应用,人们对网页技术的要求也越来越高。由于静态页面在站点中只能起到宣传作用,而不能动态显示*新信息,原有的静态网页已不能满足人们的要求,具有实时性、交互性和丰富性的动态网页技术才是人们所追求的目标。Dreamweaver CC整合了*常见的服务器端数据库操作能力,能够快速生成专业的动态页面。无论是Web设计师、数据库***,还是Web程序员,都可以在Dreamweaver CC的强大操作环境下设计出功能完善的动态网页。
本书特色 本书采用由浅入深、循序渐进的方法,在内容编写上充分考虑到初学者的实际阅读需求,通过大量实用的操作步骤,逐步讲解在Dreamweaver CC中进行网页设计和编程的各种技巧和相关知识。主要特色如下:
内容系统全面,网页/网站设计高手**知识储备<p> 作为业界领先的网页制作软件,无论是国内还是国外,Dreamweaver 都深受广大网页设计工作者的青睐。Dreamweaver是一款对网站、网页和Web应用程序进行设计、编码和开发的专业编辑软件。目前,Dreamweaver CC是*新版本,该版本增加了许多新功能。同时,对软件外观和布局做了进一步调整,使界面看起来非常简洁、明朗。在软件的性能和易操作性方面也做了不少改进,全面支持*新的HTML5和CSS3技术。可以说,它是一个集网页创作和站点管理于一身的重量级Web开发工具。</p> <p> 随着互联网的快速普及和应用,人们对网页技术的要求也越来越高。由于静态页面在站点中只能起到宣传作用,而不能动态显示*新信息,原有的静态网页已不能满足人们的要求,具有实时性、交互性和丰富性的动态网页技术才是人们所追求的目标。Dreamweaver CC整合了*常见的服务器端数据库操作能力,能够快速生成专业的动态页面。无论是Web设计师、数据库***,还是Web程序员,都可以在Dreamweaver CC的强大操作环境下设计出功能完善的动态网页。</p> <h3>本书特色</h3> <p> 本书采用由浅入深、循序渐进的方法,在内容编写上充分考虑到初学者的实际阅读需求,通过大量实用的操作步骤,逐步讲解在Dreamweaver CC中进行网页设计和编程的各种技巧和相关知识。主要特色如下:</p> <p class="a"><b> 内容系统全面,网页/</b><b>网站设计高手**知识储备</b></p> <p> 本书按照“设计静态网页”→“设计交互页面”→“制作动态网页”→“商业网站综合案例开发”的顺序讲解,内容安排由浅入深、循序渐进,全面系统地介绍了Dreamweaver CC的使用方法和技巧,通过大量实例,让读者一步一步掌握静态页面、交互页面和动态网页的创建,真正完成从入门到精通的转变。</p> <p class="a"><b> 可操作的实战体验,提高脚本代码的编写能力 </b></p> <p> 本书除了各种Dreamweaver可视化功能的实际操作外,对于关键程序代码也进行了详细的说明;指导用户如何利用和修改现有的代码,以提高用户编写脚本代码的能力。</p> <p class="a"><b> 讲解深入浅出,让读者快速入门,轻松理解**难点 </b></p> <p> 本书*大的特点就是让那些不懂ASP的读者,也能利用Dreamweaver CC在不需要或者只要修改少量代码的情况下就能制作出ASP动态网页;而对于熟悉ASP的读者也可以参考本书使用Dreamweaver CC来简化编写ASP代码时所需要做的简单性重复工作。</p> <p class="a"><b> 配套多媒体教学,海量资源赠送</b></p> <p> 本书所附光盘的内容为书中介绍的范例的源文件及**实例的操作演示视频,供读者学习时参考和对照使用,学习效率更高。扫描图书封底的二维码,可在手机中在线学习教学视频。</p> <h3>本书内容</h3> <p> 本书共24章,具体结构划分如下。 </p> <p> 第1~7章:使用Dreamweaver CC制作网页。这部分内容主要介绍了如何使用Dreamweaver CC熟练制作网页对象,如网页文本、网页图像、网页超链接、网页多媒体、网页表格等。</p> <p> 第8~11章:使用Dreamweaver CC设计网页样式。这部分内容主要介绍CSS样式基础,使用CSS控制网页对象样式,使用CSS设计页面整体效果,使用CSS设计动画和定位技术。</p> <p> 第12~15章:使用Dreamweaver CC**功能。这部分内容主要介绍网页模板的应用,使用行为设计动态、交互效果,设计网页表单,设计HTML5页面。</p> <p> 第16~18章:使用Dreamweaver CC设计移动页面。这部分内容主要介绍jQuery UI和jQuery Mobile框架的使用,借助Dreamweaver CC可视化操作,快速设计移动页面和交互组件。</p> <p> 第19~22章:使用Dreamweaver CC设计动态网站。这部分内容主要介绍使用Dreamweaver CC设计ASP Access类型动态网站。</p> <p> 第23~24章:综合案例部分。这部分内容主要通过两个综合案例完整展示留言本和个人博客的设计和建设过程。</p> <h3>关于本书</h3> <p> 本书适合以下读者: </p> <p class="a"> 网页设计与制作人员。</p> <p class="a"> 商业网站建设与开发人员。 </p> <p class="a"> 网页制作培训班学员。 </p> <p class="a"> 大、中专院校相关专业师生。 </p> <p> </p> <p><b> </b></p> <p>编 者</p>显示全部信息免费在线读第3步,单击Tabs面板,可以在“属性”面板中设置选项卡的相关属性,同时可以在编辑窗口中修改标题名称并填写面板内容,如图16.3所示。
图16.3 设置Tabs选项卡
(1)ID文本框:设置Tab选项卡外包含框Div元素的ID属性值,以方便JavaScript脚本控制。
(2)“面板”列表框:在这里显示选项卡中每个选项标题的名称,可以单击和按钮图标调整选项显示的先后位置,单击按钮可以增加一个选项,而单击按钮则可以减少一个选项。
(3)Active文本框:设置在默认状态下显示的选项,**个选项值为0,第二个选项值为1,依此类推。
(4)Event下拉列表框:设置选项卡响应事件,包括click(鼠标单击)和mouseover(鼠标指针经过)。
(5)Height Style下拉列表框:设置内容框的高度,包括fill(固定高度)、content(根据内容确定高度)和auto(自动调整)。
(6)Disabled复选框:设置是否禁用选项卡。
(7)Collapsible复选框:设置是否可折叠选项卡。默认选项是false,不可以折叠。如果设置为true,允许用户单击将已经选中的选项卡内容折叠起来。
(8)Hide和Show下拉列表框:设置选项卡隐藏和显示时的动画效果,可以参阅关于jQuery**的介绍。
(9)Orientation下拉列表框:设置选项卡标题栏是在顶部水平显示(horizontal)还是在左侧堆叠显示(vertical)。
第3步,按图16.3所示设置完毕,保存文档,则Dreamweaver CC会弹出对话框,要求保存相关的技术支持文件,如图16.4所示。单击“确定”按钮关闭该对话框即可。
第4步,在内容框中分别输入内容,这里插入表单截图。
第5步,选择“窗口”|“CSS设计器”命令,打开“CSS设计器”面板,在编辑窗口中选中内容包含框,在“CSS设计器”面板中清除包含框的padding默认值,如图16.5所示。
图16.5 清除内容包含框的补白