下载文档原格式
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。
![新建子页面模板_网页设计与制作Dreamweaver CS6标准教程（第2版）_[共3页]](https://img.taocdn.com/s1/m/756512750029bd64793e2c8b.png)
第15章 综合实训 307
选择菜单【文件】|【存储为Web所用格式】，在【存储为Web所用格式】对话框中选
中切片，在右侧【预设】下拉列表中选择“JPEG高”，如图15-59所示，单击【存储】按钮，
打开【将优化结果存储为】对话框，如图15-60所示，设置【保存在】为本地站点文件夹，在
【保存类型】下拉列表中选择“仅限图像”，在【切片】下拉列表中选择“所有用户切片”。
图15-59
在Dreamweaver的【文件】面板中可以看到切出的图片已经存在images文件夹内，
如图15-61所示。
图15-60 图15-61
15.4.2 新建子页面模板
在站点【文件】面板中，复制主页文件index.html生成一个名为index - 拷贝.html文件，
如图15-62所示。
◆双击打开index - 拷贝.html文件，在【CSS样式】面板中双击#container样式，打开
【#container的CSS规则定义（在layout.css中）】对话框，如图15-63所示，选择【分类】栏
中【方框】，将【Height】下拉文本框中的值清空。
然后将页面中的banner图像和全部内容
部分删除，效果如图15-64所示。
选择菜单【插入】|【布局对象】|【Div标签】，打开【插入Div标签】对话框，在【插
入】项后选择“在标签之后”，在后面下拉列表中选择“<div id=”banner”>”，在【ID】的下
拉文本框中输入“subcontentleft”，单击【新建CSS规则】按钮，打开【新建CSS规则】对。
177 （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 ，颜色为橙色，如图5.5所示。
（8）保存后在浏览器中按F5键刷新页面，效果如图5.1所示。
5.1.2 利用Dreamweaver CS6制作网页1．案例知识点及效果图本案例主要运用了以下知识点：了解Dreamweaver 的工作环境和基本操作；创建网页文件的基本方法，保存、预览网页文件的方法；设置页面属性的方法，添加文本的方法；定义和应用文档标题格式。
案例效果如图5.6所示。
2．操作步骤（1）启动Dreamweaver CS6，系统会自动打开欢迎界面。
使用该界面可以快速执行一些常用操作，包括打开最近的项目、新建文件或站点、主要功能的使用等。
单击“新建”列表框中的“HTML ”按钮，如图5.7所示。
（2）建立一个HTML 文档，初次运行该软件时，会出现“工作区设置”对话框，可在文档工具栏中单击“设计”按钮将Dreamweaver 切换为“设计”视图，在该视图下可快速进行网页的编辑。
隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案隆昌市城关职业中学教案教学过程一、Dreamweaver的工作界面1．工作区切换器设计器：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单方便。
编码人员（高级）：用于那些主要用代码来制作网页的用户使用.经典：便于习惯使用之前版本布局模式的设计者使用.双重屏幕：适用于在计算机上有两个显示器的用户。
2．菜单栏提供了10个主菜单项，利用菜单栏基本上能够实现Dreamweaver的所有功能。
菜单项按照功能的不同进行划分，使用户使用方便。
例如，“文件”菜单中包含了对文档操作的命令；“插入”菜单中包含了向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含了创建和管理站点的相关命令。
3．文档工具栏和文档窗口“文档”工具栏包含了“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项; “文档”窗口用来显示当前打开的文档，用户在这里进行网页的编辑制作。
4．状态栏5．“属性”面板“属性”面板用于查看和设置当前选定对象（如文本、图像等）的最常用属性。
该面板的内容会根据选择对象的不同而显示不同的属性。
6．面板组Dreamweaver中的面板通常被组织到面板组中，其中的面板以选项卡的形式显示。
单击面板组右上角的“展开面板”或“折叠为图标”按钮，可以展开或折叠面板组。
单击面板标签名称可以切换到该面板，双击标签名称，可以展开或折叠该面板。
拖动面板标签可以在面板组内改变该面板的排列位置，或将面板拖动到另一个面板组的标签处，当出现蓝色突出显示的区域时，释放鼠标可创建新的面板组。
向外拖动面板或面板组可使其变为浮动的状态。
浮动的面板或面板组可以停靠在一个固定的位置，拖动面板或面板组到要停靠位置的边缘，当出现蓝色线时释放鼠标即可。
7．“插入”面板面板包含将各种网页元素插入到文档的快捷按钮。
