Dreamweaver CS6网页设计与应用 (17)
利用Dreamweaver CS6设计网页
第五章 利用Dreamweaver CS6设计网页
引导案例
图5-2 网页组成示例
第五章 利用Dreamweaver CS6设计网页
了解网页制作的基础知识 熟悉Dreamweaver 8的工作环境 掌握创建和管理站点的方法 掌握在网页中创建文本的方法 了解网页中常见的图像格式 掌握使用局页面的方法 了解使用框架布局网页的方法
引导案例
分析网页组成部分
一般而言，比较规范的商业网站的网页由以下几个重要部分组成： 1）网站或企业的标志（Logo），宣传口号（slogan）。 2）主栏目导航。 3）形象图片或动画。 4）新闻或介绍。 5）版权信息（如果觉得有必要，还可以包括一些辅助的内容）。 6）辅助快捷导航。 7）显示当前所处在网站位置的文字。 8）推荐产品展示，或希望观众第一眼看到的比较重要的内容。 9）辅助的企业形象图片或动画。 10）计数器。 11）音乐控制（一般以商业为目的的公司很少使用）。 包括以上内容的网页如图5-2所示。
第五章 利用Dreamweaver CS6设计网页
一、网页基础知识
GIF为Graphic Interchange Format的缩写，被称为图像交换格式，采用LZW 无损压缩算法。
JPEG为Joint Photograhic Experts Group 的缩写，是由联合图像专家组开 发的图形标准，采用有损的压缩算法。
3）超链接 超链接（也称超级链接）是网页中最常用的一种元素。所谓超链接，是指从 一个网页指向一个目标的链接关系。这个目标可以是另一个网页，也可以是相同 网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是 一个应用程序。它表明网页文件之间所存在的相互链接关系。 4）动画
第五章 利用Dreamweaver CS6设计网页
《网页设计与制作Dreamweaver CS6》电子教案
XXX中等职业学校教案
适用年级： XXX 课程名称：网页设计与制作 Dreamweaver CS6 任课教师： XXX
XXXX学校计算机专业组制
第1-4课时讲授2学时实践2学时
第5-10课时讲授2学时实践4学时
第11-16课时讲授2学时实践4学时
第16-21课时讲授2学时实践4学时
第22--27课时讲授2学时实践4学时
第28-37课时讲授4学时实践6学时
第38--41课时讲授2学时实践2学时
第41--50课时讲授4学时实践6学时
第51--56课时讲授2学时实践4学时
第57--60课时讲授2学时实践2学时
第61--68课时讲授4学时实践4学时
第69--74课时讲授2学时实践4学时
第75--80课时讲授2学时实践4学时
第81--90课时讲授4学时实践6学时
第91--94课时讲授2学时实践2学时。
中文版 Dreamweaver CS6网页设计 第1章 Dreamweaver CS6简介
22
1.5.2 设置外部编辑器
(3) 选择Photoshop程序文件，然后单击 “打开”按钮退出对话框，此时在“编辑器” 列表框中出现所加载的Photoshop程序。 (4) 选择Photoshop程序名称，单击“编辑 器”列表框上方的“设为主要”按钮，将 Photoshop设置为默认的主要编辑器。完成后， 在Photoshop名称后面出现“主要”字样。 (5) 如果要删除“编辑器”列表框中没用的 编辑器，则选择编辑器名称后，单击“编辑 器”列表上方的按钮即可。
Dreamweaver CS6的新增功能。 Dreamweaver CS6的安装、删除和启动。 Dreamweaver CS6的工作界面。 Dreamweaver CS6的一般操作。
本章重点
Dreamweaver CS6常用面板的使用方法。 Dreamweaver CS6的文件操作。
15
1.4.3 文档工具栏
“文档工具栏”中包含一些按钮，使 用这些按钮可以在“代码”视图、 “设计”视图以及“拆分”视图间快 速切换。文档工具栏还包含一些与查 看文档、在本地和远程站点间传输文 档有关的常用命令和选项，如图1-21 所示。
16
1.4.4 文档窗口
“文档窗口”用于显示当前文档，可以选择下 列任一视图。
1.5.1 预览设置
在设计过程中，用户需要随时在浏览器中打开设计的 文档，以便查看其设计效果和及时进行更改和完善。 Dreamweaver CS6提供了在设计过程中预览的功能， 用户只需使用菜单命令或快捷键就可以在浏览器中打 开设计中的文档。 依次选择“编辑”|“首选参数”菜单命令，打开“首选 参数”对话框，在“分类”列表框中选择“在浏览器 中预览”选项，右侧即出现相关界面，如图1-27所示。
Dreamweaver CS6网页设计与制作标准教程教学大纲教案
《Dreamweaver CS6网页设计与制作标准教程》教学大纲教案课程介绍：本课程是一门概念性和实践性都很强的面向实际应用的课程。
Dreamweaver CS6是由Adobe公司开发的网页设计与制作软件。
Adobe公司在Dreamweaver这一软件的版本上不断升级，是为了使广大从事网页制作和网页设计工作的用户拥有性能更完善的得力工具，同时也是为了使刚刚步入设计领域的初学者能够拥有更加优秀的学习软件。
本课程主要介绍的是Dreamweaver CC的基本操作方法和网页设计制作技巧，这是学习Dreamweaver的入门课程，也是必修课程，学员通过本课程的学习，应当能够熟悉软件功能和网页设计思路，为今后的专业学习或深入的设计打下基础。
培训目标：➢掌握网站建设基本流程和网页设计基础知识➢掌握Dreamweaver CC的工作界面和网站的建设基础➢掌握文本与文档的编辑➢熟练掌握插入图像和多媒体的方法和技巧➢掌握网页超链接的创建方法及应用技巧➢熟练掌握表格的使用方法及应用技巧➢熟练掌握框架集框架集的使用方法➢熟练掌握层的基本操作方法➢掌握层叠样式表（CSS）样式➢掌握模板和库的使用方法➢掌握CSS+DIV的布局方法及技巧➢掌握使用表单的方法➢了解行为的使用方法➢掌握网页代码的编写和修改➢掌握商业案例实训的设计方法及技巧培训内容：一、网页设计基础知识1、掌握互联网基础和网站建设基本流程2、掌握网站建设基础和网页设计基础3、掌握网页的制作常用软件和标准技术二、初识Dreamweaver CS61、掌握Dreamweaver CC的工作界面2、掌握站点管理器、创建文件夹、定义新站点、创建和保存网页3、掌握重命名、移动、删除文件和文件夹4、掌握站点的打开、编辑、复制、删除、导入和导出5、掌握关键字、作者和版权信息、刷新时间、描述信息等其他文件头的设置三、文本与文档1、掌握文字的输入、连续空格的输入2、掌握页边距、网页的标题、网页的默认格式的设置3、掌握对文字的大小、颜色、字体、对齐方式和段落样式等的设置4、掌握项目符号或编号、文本缩进、插入日期、特殊字符和换行符的使用5、掌握水平线、显示/隐藏网格和标尺的应用四、图像和多媒体1、掌握图像的格式2、掌握图像的插入、图像的属性、跟踪图像的应用3、掌握Flash动画、FLV、Shockwave影片、Applet程序、ActiveX控件的插入五、超链接1、掌握超链接的概念与路径知识2、掌握文本超链接、电子邮件超链接、下载文件链接的创建方法3、图片链接、鼠标经过图像链接的创建方法4、掌握锚点链接、热点链接的创建方法六、使用表格1、掌握表格的组成和插入方法2、掌握表格、单元格和行或列的属性设置3、掌握在单元格中输入文字、插入其他网页元素4、掌握选择整个表格、行或列、单元格的应用5、掌握复制、粘贴表格的应用6、掌握表格删除、缩放的应用7、掌握单元格的合并和单元格的拆分七、使用框架1、掌握框架与框架集的操作方法2、熟练掌握框架属性的设置方法八、使用层1、熟练掌握层的基本操作方法2、掌握应用层设计表格的技巧九、CSS样式1、掌握CSS样式的概念2、掌握CSS样式面板的使用方法3、掌握CSS样式选择器的应用4、掌握样式的类型和创建方法5、掌握CSS样式的属性十、模板和库1、掌握资源面板的使用方法2、掌握创建模板、可编辑区域、重复区域、重复表格的创建方法3、掌握模板的重命名、修改模板文件、更新站点和删除模板文件的方法4、掌握如何创建库文件5、掌握重命名、删除、修改和更新库项目的方法十一、CSS+DIV布局方法1、掌握CSS+DIV的概述2、掌握div和span标记的区别3、掌握盒子的概念和操作技巧十二、使用表单1、掌握表单的使用方法2、掌握单行、密码、多行和电子邮件文本域的创建方法3、掌握单选按钮、单选按钮组和复选框的创建方法4、掌握下拉菜单、滚动列表的创建方法5、掌握文件域、图像域和按钮的创建方法十三、使用行为1、掌握行为面板的使用2、掌握JavaScript、打开浏览器窗口和转到URL的创建方法3、掌握检查插件、检查表单和交换图像的创建方法4、掌握显示隐藏层的方法5、掌握容器的文本、状态栏文本和文本域文字的设置方法6、跳转菜单和跳转菜单开始的方法十四、网页代码1、掌握新建标签库、标签、属性的方法2、掌握常用HTML标签的使用3、掌握响应HTML事件的方法十五、商业案例实训1、掌握软件基础知识的使用方法2、了解软件的常用设计领域3、掌握在不同设计领域本书全面、系统地介绍Photoshop CC 2019的基本操作方法和图形图像处理技巧，并对Photoshop在设计领域的应用进行细致的讲解，具体内容包括图像制作基础、软件基础操作、插画设计、Banner设计、App设计、H5设计、海报设计、网页设计、包装设计、综合设计实训等。
DreamweaverCS6网页设计教学教案
使用“项目列表”按钮，设置项目列表效果云盘/Ch02/使用“页面属性”命令，设置页面边距和标题；使用“首选参数”命令，设置允许多个云盘/Ch02/使用“图像”按钮，插入图像云盘/Ch03/使用“云盘/Ch03/使用“命名锚记”按钮，插入锚点制作文档底部移动到顶部的效果。
云盘/Ch04/使用“电子邮件链接”按钮，制作电子邮件链接效果；使用“属性”面板，为文字制作云盘/Ch04/使用“页面属性云盘/Ch05/使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，改变表格的高云盘/Ch05/使用云盘/Ch06/使用“对齐上缘”命令，制作网页的结构图效果云盘/Ch06/使用“绘制云盘/Ch07/使用“云盘/Ch07/使用“项目列表”按钮，创建无序列表云盘/Ch08/使用“云盘/Ch08/使用“另存模板”命令，将页面存为模板；使用“可编辑区域”按钮，添加可编辑区。
云盘/Ch09/使用“库”面板，添加库项目；使用库中注册的项目，制作网页文档。
云盘/Ch09/使用“文本字段”按钮，制作用户名、手机、密码和验证码文本框；使用“云盘/Ch10/使用“文本字段”按钮，插入文本字段；使用“图像域”按钮，插入图像域；使用“选云盘/Ch10/使用“弹出信息”行为命令，制作弹出信息效果；使用“状态栏文本”行为命令，制作云盘/Ch11/使用“交换图像”命令，制作鼠标经过图像发生变化效果。
云盘/Ch11/使用“插入标签”命令，制作浮动框架效果。
云盘/Ch12/使用“云盘/Ch13/使用“云盘/Ch13/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“图像”按钮，插云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch15/使用“页面属性”命令，改变页面字体、大小、颜色、背景颜色和页边距效果；使用“云盘/Ch15/使用“图像”按钮，添加网页标志和广告图；使用“云盘/Ch16/使用“鼠标经过图像”按钮，制作导航效果；使用“属性”面板，设置单元格高度和对云盘/Ch16/使用“页面属性”面板，更改页面属性；使用“云盘/Ch17/使用“页面属性”命令，设置页面字体、大小、颜色和页面边距；使用“属性”面板，云盘/Ch17/使用“表格”按钮，布局网页；使用“页面属性”命令，控制页面的整体字体、大小和云盘/Ch17/使用“页面属性”命令，设置网页背景颜色及边距；使用输入代码方式设置图片与文字云盘/Ch17/。
Dreamweaver CS5 网页设计与应用(第2版)第17章文化艺术网页
课后习题——古乐艺术网页
使用页面属性命令制作页面颜色和页边距效果，使用CSS样式命令 制作导航背景效果，使用属性面板设置文字的颜色制作导航条效果，使 用插入图像按钮插入网页logo效果。
效果图
效果图
17.5 书法艺术网页
本例将使用图像和白色文字制作导航效果，使用属性面板设置单元格背 景颜色和高度，使用CSS样式面板设置文字行间距，使用行为面板制作弹出信 息效果。
效果图
课堂练习——诗词艺术网页
使用页面属性命令制作页面背景图像效果，使用插入图像按钮插入 网页广告条，使用属性面板改变文字大小和颜色制作导航效果，使用CSS 样式命令制作表格背景和文字行间距效果。
网站开展纵横交错、全方位、多领域的宣传报道与交流，介绍文艺新 秀、艺术名家、收藏家的艺术之路，总结文化艺术创作经验，弘扬民族传 统文化，展示时代艺术风貌，帮助艺术家从容实现艺术价值，走进市场， 走进企业，走进人民大众，是一个宣传文化的理想载体。
17.2 戏曲艺术网页
本例将使用属性面板设置单元格背景图像和文字颜色制作导航效果， 使用插入图像按钮为页面添加广告图像和脸谱效果，使用CSS样式命令制作 文字行间距和表格边线效果。
效果图
17.3 国画艺术网页
本例将使用图像按钮插入网页LOGO，使用页面属性改变页面的颜色和 边距效果，使用CSS样式命令制作导航效果。使用属性面板设置图像边距和 单元格背景颜色效果。
效果图
17.4 太极拳健身网页
本例将使用插入图像制作网页LOGO效果，使用页面属性命令制作网页背景 颜色和页边距效果，使用属性面板设置文字颜色制作导航效果，使用CSS样式 命令制作表格边线效果，使用项目列表按钮制作文字列表新闻效果。
Dreamweaver CS5 网页设计与应用（ 第2版）第17章文化艺术网页
边做边学-Dream weaver CS6网页设计案例教程
1.2 创建网站框架
操作目的 操作步骤 相关工复制效果，熟练掌握新 建命令。通过关闭新建文件，熟练掌握保存和关闭命令。
编辑站点 复制站点 删除站点 导出站点 导入站点
2.创建文件夹
建立站点前，要先在站点管理器中创建站点文件夹。
（1）在本地磁盘中选择要建立站点的位置。 （2）通过以下两种方法新建文件夹。
①选择“文件 > 新建文件夹”命令。 ②用鼠标右键单击站点，在弹出的快捷菜单中选择“新建文件 夹”命令。 （3）输入新文件夹的名称。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS6中， 站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一 组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文 件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中 创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再 将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。
1.3 管理站点
操作目的 操作步骤 相关工具
1.3.1 操作目的
通过站点管理命令，熟练掌握创建站点的方法。通过新建站点，熟练 掌握创建站点根目录的过程。
1.3.2 操作步骤
1
2
3
4
1.3.3 相关工具
1.站点管理器
站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站 点以及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。
DreamweaverCS6网页设计与制作课程设计
Dreamweaver CS6网页设计与制作课程设计一、前言Dreamweaver CS6是一款功能强大的网页设计软件，无论是设计静态网页还是动态网页，都可以方便快捷地完成。
本课程旨在教授学生如何使用Dreamweaver CS6进行网页设计与制作。
通过本课程的学习，学生可以掌握基本的HTML、CSS和JavaScript知识，并且能够使用Dreamweaver CS6进行网页的设计、制作、发布和维护。
二、教学目的1.了解网页设计的基本知识和流程；2.掌握HTML、CSS和JavaScript的基础知识；3.熟练使用Dreamweaver CS6进行网页的设计、制作、发布和维护；4.培养学生的网页设计和制作能力。
三、教学内容1.网页设计基础知识–网页设计的概念和流程–网页设计的原则和规范2.HTML基础知识–HTML的基本语法和标签–HTML的常用标签和属性–HTML的表单和表格3.CSS基础知识–CSS的基本语法和选择器–CSS的常用属性和值–CSS的盒模型和浮动4.JavaScript基础知识–JavaScript的基本语法和数据类型–JavaScript的基本操作和事件–JavaScript的DOM和jQuery库5.Dreamweaver CS6的使用–Dreamweaver CS6的安装和配置–Dreamweaver CS6的界面和功能–Dreamweaver CS6的网页设计和制作–Dreamweaver CS6的发布和维护四、教学方法1.讲授：通过课堂讲授、演示和实例等形式，讲解课程内容，引导学生掌握基本知识和技能；2.实践：通过编写网页实例和课后作业等形式，加强学生的动手能力和实践能力；3.课程设计：通过小组或个人课程设计，让学生运用所学知识进行网站设计和制作，培养学生的创新能力和综合能力。
五、教材参考1.《Dreamweaver CS6网页设计与制作教程》2.《HTML与Web设计基础》3.《CSS网站布局基础》4.《JavaScript DOM编程艺术》六、考核方式1.平时成绩：包括作业和实验成绩等；2.期末考试：根据教学计划进行考试；3.课程设计：个人或小组完成网站设计和制作，进行答辩和评分。
《网页设计与制作Dreamweaver-CS6》电子教案
1、教师讲解站点的含义；
2、演示创建一个站点的基础操作步骤；
2、通过PPT课件讲授基本知识。
3、让学生自己动手重新制作教学案例。
4、通过实训让学生进一步熟悉所学知识。
—
作业布置
作业：一～四
主 要
参考资料
《网页设计与制作——Dreamweaver cs6》，王君学、田明编著，人民邮电出版社
备注
章 节
项目八CSS──设置环境保护网页
讲授主
要内容
1.CSS样式的作用
2.创建和设置CSS样式的方法
3.-
4.附加样式表的方法
重 点
难 点
创建和设置CSS样式的方法
附加样式表的方法
要求掌握
的知识点
【CSS样式】面板、CSS样式的类别、定义CSS样式的方法、CSS的【类型】等属性对话框、3种选择器各自的特点、创建超级链接的高级CSS样式、设置单元格ID名称和样式、修改CSS样式、删除CSS样式、应用CSS样式、附加样式表、重命名样式
Dreamweaver cs6窗口界面、浮动面板组、【标准】工具栏、【文件】面板、【文档】工具栏、【属性】面板、【插入】面板、工作区布局简介页面，介绍Dreamweaver cs6的功能和作用。
2、简介Dreamweaver cs6的安装、删除方法；
设置段落、换行和列表的方法
要求掌握
的知识点
创建网页文件的基本方法、添加文本的基本方式、分段和换行、定义和应用文档标题格式、文本的对齐方式、通过【页面属性】对话框设置文本属性、通过【属性】面板设置文本属性、文本样式、列表的应用、文本的缩进和凸出、网页背景和页边距、插入水平线、插入日期、设置浏览器标题
教学过程
《中文版Dreamweaver CS6网页制作案例教程》全册精讲PPT教学课件
4．域名
由于IP地址在使用过程中难于记忆和书写，一 种与IP地址对应的字符应运而生，这就是域名 （Domain Name）。每一个网站都有自己 的域名，并且域名是独一无二的。
5．网址
网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。 它是网络上通用的一种地址格式，用于标识 网页文件在网络中的位置。 一个完整的网址由通信协议名称、域名或IP 地址、网页在服务器中的路径和文件名4部 分组成。
（3）广告条
广告条又称Banner，其功能是宣传网站或 为其他商品做广告。 在制作Banner时，有以下几点需要注意。
• Banner可以是静态的，也可以是动态的。 • Banner的体积不宜过大，尽量使用GIF格式图 片与动画或Flash动画。 • Banner中的文字不要太多，只要达到一定的 提醒效果就可以。 • Banner中图片的颜色不要太多，尤其是GIF格 式的图片或动画。
2．网站
互联网起源于美国国防部高级研究计划管理 局建立的阿帕网。网站（Website）最初是 指在因特网上，根据一定规则，使用HTML 等语言制作的用于展示特定内容的相关网页 的集合。
3．网页的构成元素
我们可以将网页中的元素按功能分为站标、 导航条、广告条、标题栏和按钮等。
站标
导航条
广告条
标题栏
中文版Dreamweaver CS6
网页制作案例教程
项目一 网页制作基础知识
任务一 了解网页制作基础知识 任务二 创建“石市科干院”站点及欢迎首页
任务一 了解网页制作基础知识
任务描述
随着网络的飞速发展，各类公司、企事业单 位都相继建立了自己的网站。本任务主要了 解网页制作基础知识并欣赏优秀网站，从而 为制作优秀网页打下坚实的基础。
Dreamweaver-CS6网页制作课件(共16张)
第15页，共16页。
1.3 常用网页设计软件
制作网页首先就是选择网页制作软件。由于目前所见即 所得类型的工具越来越多，使用(shǐyòng)也越来越方便， 所以制作网页已经变成了一件轻松的工作。
第16页，共16页。入HTTP 请求浏
服
览 器
HTTP 应答
务 器
第7页，共16页。
1.1.5 什么是动态网页
所谓动态网页是指网页文件里包含了程序代码，通过 后台数据库与Web服务器的信息交互(jiāohù)，由后台 数据库提供实时数据更新和数据查询服务。
第8页，共16页。
不同性质的网站，构成网页的基本元素是不同的。网页 中除了使用文本和图像(tú xiànɡ)外，还可以使用丰富多彩的 多媒体和Flash动画等。
第13页，共16页。
1.2.5 图像
图像在网页中具有提供信息、展示形象、装饰网页、表达 个人情趣和风格的作用。图像是文本的说明和解释，在网 页适当位置(wèi zhi)放置一些图像，不仅可以使文本清晰易 读，而且使得网页更加有吸引力。
第14页，共16页。
1.2.6 Flash动画
Flash动画具有简单易学、灵活多变的特点，所以受到很多 网页制作人员的喜爱，它可以生成亮丽夺目的图形界面，而
意位置，一般为横向贯穿整个或者大半个页面的广告条。
第11页，共16页。
1.2.3 导航栏
导航栏是网页的重要组成元素，它的任务是帮助浏览者在站 点内快速查找(chá zhǎo)信息。好的导航系统应该能引导浏览者 浏览网页而不迷失方向。
第12页，共16页。
1.2.4 文本
网页内容是网站的灵魂(línɡ hún)，网页中的信息也以文本 为主。无论制作网页的目的是什么，文本都是网页中最 基本的、必不可少的元素。
Dreamweaver CS6网页设计案例教程(微课版)
读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文 档
5
第3章图像和多 媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层
DreamweaverCS6网页设计教学教案
使用“项目列表”按钮，设置项目列表效果云盘/Ch02/使用“页面属性”命令，设置页面边距和标题；使用“首选参数”命令，设置允许多个云盘/Ch02/使用“图像”按钮，插入图像云盘/Ch03/使用“云盘/Ch03/使用“命名锚记”按钮，插入锚点制作文档底部移动到顶部的效果。
云盘/Ch04/使用“电子邮件链接”按钮，制作电子邮件链接效果；使用“属性”面板，为文字制作云盘/Ch04/使用“页面属性云盘/Ch05/使用“导入表格式数据”命令，导入外部表格数据；使用“属性”面板，改变表格的高云盘/Ch05/使用云盘/Ch06/使用“对齐上缘”命令，制作网页的结构图效果云盘/Ch06/使用“绘制云盘/Ch07/使用“云盘/Ch07/使用“项目列表”按钮，创建无序列表云盘/Ch08/使用“云盘/Ch08/使用“另存模板”命令，将页面存为模板；使用“可编辑区域”按钮，添加可编辑区。
云盘/Ch09/使用“库”面板，添加库项目；使用库中注册的项目，制作网页文档。
云盘/Ch09/使用“文本字段”按钮，制作用户名、手机、密码和验证码文本框；使用“云盘/Ch10/使用“文本字段”按钮，插入文本字段；使用“图像域”按钮，插入图像域；使用“选云盘/Ch10/使用“弹出信息”行为命令，制作弹出信息效果；使用“状态栏文本”行为命令，制作云盘/Ch11/使用“交换图像”命令，制作鼠标经过图像发生变化效果。
云盘/Ch11/使用“插入标签”命令，制作浮动框架效果。
云盘/Ch12/使用“云盘/Ch13/使用“云盘/Ch13/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“图像”按钮，插云盘/Ch14/使用“页面属性”命令，设置页面字体、大小颜色和页面边距；使用“属性”面板，设云盘/Ch15/使用“页面属性”命令，改变页面字体、大小、颜色、背景颜色和页边距效果；使用“云盘/Ch15/使用“图像”按钮，添加网页标志和广告图；使用“云盘/Ch16/使用“鼠标经过图像”按钮，制作导航效果；使用“属性”面板，设置单元格高度和对云盘/Ch16/使用“页面属性”面板，更改页面属性；使用“云盘/Ch17/使用“页面属性”命令，设置页面字体、大小、颜色和页面边距；使用“属性”面板，云盘/Ch17/使用“表格”按钮，布局网页；使用“页面属性”命令，控制页面的整体字体、大小和云盘/Ch17/使用“页面属性”命令，设置网页背景颜色及边距；使用输入代码方式设置图片与文字云盘/Ch17/。
利用Dreamweaver CS6制作网页_信息技术基础及应用教程_[共3页]
![利用Dreamweaver CS6制作网页_信息技术基础及应用教程_[共3页]](https://img.taocdn.com/s3/m/5f8f5ec9c5da50e2534d7fb5.png)
第5章 网页制作
175
图5.1 一个简单的HTML 文件案例效果图 图5.2 用记事本编写HTML 代码 （3）将文件保存到D 盘，文件夹名为“网页设计”，文件名为“test1.html ”，文件类型为“所有文件”。
（4）使用浏览器打开Ｄ盘“网页设计”文件夹中的“test1.html ”文件，在窗口标题栏上有“HTML 网页制作”的标题，其显示效果如图5.3所示。
（5）用Windows 的记事本打开“test1.html ”文件，在<body></body>中输入文字“中医门诊部>坐诊”；
（6）再次保存文件，然后在浏览器中按“F5”键刷新页面，其显示效果如图5.4所示。
图5.3 简单HTML 文件的欢迎文字效果图 图5.4 简单HTML 文件的中医门诊部文字效果 （7）打开“查看”菜单的源代码，在文字“中
医门诊部”前加上“<font size=14 color =”#ff6600”>
<b>”，在文字后面加上“</b></font>”，设置文
字为粗体，并设置字号为14px ，颜色为橙色。
（8）保存后在浏览器中按“F5”键刷新页面，
效果如图5.1所示。
5.1.2 利用Dreamweaver CS6制作网页
1．案例知识点及效果图
本案例主要运用了以下知识点：了解Dreamweaver 的工作环境和基本操作；创建网页文件的基本方法、保存、预览网页文件的方法；设置页面属性的方法，添加文本的方法；定义和应用文档标题格式。
案例效果如图5.6所示。
图5.5 在记事本中修改HTML 代码。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
案例设计
本例将使用属性面板设置单元格高度和文字颜色、文字大小制作 导航效果。使用插入图像按钮为页面添加广告图像和脸谱效果，使用 CSS样式命令制作文字行间距和表格边线效果。
效果图
17.3 国画艺术网页
案例分析
案例设计
案例制作
案例分析
国画，又称“中国画”，是中国传统文化艺术的精髓。它是用毛
笔、墨和中国画颜料在特制的宣纸或绢上作画，题材主要有人物、山
戏曲是一门综合艺术，是时间艺术和空间艺术的综合。说是空间 艺术，是因为戏曲要在一定的空间内来表现，要有造型，而它在表现 上又需要一个发展过程，因而它又是时间艺术。中国戏曲艺术历史悠 久，种类众多，属于中国文化的精髓。戏曲艺术网页对中国戏曲艺术 进行了全方位的介绍，在网页设计上要表现出传统戏曲艺术的风采。
网站开展纵横交错、全方位、多领域的宣传报道与交流， 介绍文艺新秀、艺术名家、收藏家的艺术之路，总结文化艺
术创作经验，弘扬民族传统文化，展示时代艺术风貌，帮助
艺术家从容实现艺术价值，走进市场，走进企业，走进人民 大众，是一个宣传文化的理想载体。
17.2 戏曲艺术网页
案例分析
案例设计
案例制作
案例分析
在网页设计过程中，将背景设计成沉稳、干练的蓝色搭配浅淡的
贝色，体现出戏曲的文化和精神。导航栏放在页面上部，更方便戏曲 迷对网页的浏览。中间部分借助独特的京剧戏曲人物图片，使页面更
加生动直观，通过和文字的设计编排，把戏曲风格和文化特色展现于
页面之上。右侧和下侧设计了最新动态、戏曲新闻和相关知识栏目。 整个页面设计充满了浓浓的中国传统戏曲文化的气氛。
17.1 文化艺术网页概述
文化艺术是对全世界不同的文化艺术形式组合进行的统 称。文化艺术具有世界性和民族性两大特征，两者相辅相成， 互相不断地促进发展，从而更好地展现了世界以及各地区的 特性。目前，大多数文化艺术种类都建立了自己的网站，大 大地促进了文化艺术网络化进程，对文化艺术精粹的传播和
发展起到了至关重要的作用。
加鲜明，方便爱好者浏览和学习。通过打太极拳的鹤发童颜的老人，
充分表现出了太极拳的健身养生功能和中国古典哲学思想。右侧区域 通过对文字和视频的设计编排，提供了太极简介、最新资讯、太极养
生等栏目，详细介绍了太极文化的精髓。
案例设计
本例将使用页面属性命令设置页面字体、大小、页面边距及页面 标题，使用表格按钮设置布局效果，使用图像按钮插入装饰图像及 LOGO效果，使用属性面板设置单元格的对齐方式、高度及宽度，使用 CSS样式命令设置文字颜色、大小、行距及单元格背景图像。
效果图
17.4 太极拳健身网页
案例分析
案例设计
案例制作
案例分析
太极拳是中华民族的宝贵财富，它不仅仅是一种古老的健身与技 击并重的拳术，还包含了深刻的中国古典哲学。太极拳健身网页是一 个对太极拳文化进行全面介绍和宣传的专业网站，在网页设计上要表 现出太极拳的健身养生功能和文化特色。 在网页的设计制作过程中，将背景设计为传统黑白水墨画，营造 出平和恬静的氛围。黑色背景和白色文字的对比，使导航在页面中更
效果图
第17章 文化艺术网页
本章简介：
文化艺术网站是指专业性的文化和 艺术类网站。网站的功能主要是普及和 弘扬祖国艺术文明，满足群众日益增长 的文艺需求，促进社会各界的文化和艺 术交流。本章以多个类型的文化艺术网
页为例，讲解文化艺术网页的设计方法
和制作技巧。
课堂学习目标
了解文化艺术网页的服务宗旨 了解文化艺术网页的类别和内容 掌握文化艺术网页的设计流程 掌握文化艺术网页的结构布局 掌握文化艺术网页的制作方法
国画爱好者的浏览和学习，文字的设计与网页的主题相呼应。中间部 分通过图片和文字的设计编排，展现出最新消息、名家访谈、画展推 荐和不同派系的内容，便于用户询。
案例设计
本例将使用页面属性命令设置页面字体、大小页面边距和页面标 题。使用插入图像按钮插入网页LOGO及装饰图像。使用属性面板设置 单元格的宽度高度及对齐方式。使用CSS样式命令设置文字的字体、大 小、颜色及文字行距的显示效果。
效果图
课堂练习—书法艺术网页
使用“页面属性”命令，设置页面字体、大小、颜色和页面边距； 使用“属性”面板，更改文字的大小颜色制作导航条；使用“CSS样 式”命令，设置单元格的背景图像、文字大小、文字颜色和行距。
效果图
课后习题—诗词艺术网页
使用“页面属性”命令，设置页面字体、大小、颜色和页面边距； 使用“属性”面板，更改文字的大小颜色制作导航条；使用“CSS样式” 命令，设置单元格的背景图像、文字的大小和行距。
水、花鸟等，技法可分工笔和写意两种，绘画技法丰富多样，非常富 有传统特色。国画艺术网页的主要功能是对中国画进行介绍、欣赏和
传播，在网页设计上要表现出中国画的艺术特色和绘画风格。
在网页设计制作过程中，将背景设计为浅淡的青灰色，给人安心 柔和的印象。上方的国画在展示出艺术美的同时，体现出网页设计的
主体。导航栏置于国画上方，简洁直观的设计让人一目了然，且便于