网页设计与制作案例教程—Dreamweaver cs6电子教案-第10章.pptx

网页设计与制作案例教程

电子教案

;本章学习目标;教学案例：制作模板型“茶”网站;

一、创建并编辑网页模板

步骤1：新建一个站点根目录文件夹“tea”，在其下新建一个“images”子文件夹，用于存放图像素材。

步骤2：启动DreamweaverCS6，新建一个站点，站点命名为“tea”，本地站点文件夹选择“tea”，默认图像文件夹选择“images”。

步骤3：新建一个网页文件，在标题栏中为该网页文件设置标题“茶”，并设置页面属性的上边距为0。

步骤4：用表格来布局网页，插入4行1列的表格，表格的宽度为780像素,表格的间距为0。;步骤5：在第1插入标题图片“biaoti.jpg”，第2行设置高度为47像素，插入背景图片“daohang.jpg”，第3行设置背景颜色为#999999，用来放置网页中主要内容，第4行地址栏设置背景颜色为#009900，表格高度设为120像素。

步骤6：将表格属性中设置表格的对齐方式为居中对齐，在第2行插入1行6列的嵌套表格，表格宽度为720，边框为0，各个单元格的宽度设置为120像素并输入文本，将文本居中对齐。;步骤7：将第3行拆分成2列，设置第一列宽度为200像素，第二列宽度为580像素，设置单元格的对齐方式，水平方向为居中对齐，垂直方向为顶端对齐。在第一列中插入4行1列的嵌套表格，表格宽度设置为70百分比，每个单元格高度设置为50像素，最后输入文本，第二列插入1行1列的嵌套表格，表格宽度设置为75百分比。;案例制作

一、创建并编辑网页模板

步骤8：选中【文件】→【另存为模板】，弹出“另存为模板”对话框。站点选择“tea”，另存为输入“cha”，点击保存，更新链接。站点里会自动生成Templates文件夹，模板自动保存在此文件夹里，此时网页文件已经变成模板文件，类型为.dwt。

步骤9：将光标定位到第二个嵌套表格里，选择【插入】→【模板对象】→【可编辑区域】，在“名称”文本框中输入“neirong”，单击“确定”按钮，此时在光标所在的单元格中插入可编辑区域的标志，为了以后我们能在各个文本上添加链接，同样方法制作其它两个可编辑区域。;案例制作

二、通过网页模板制作“茶”网页

步骤1：选择【文件】→【新建】→【模板中的???】选择要使用的站点和站点中的模板，单击“创建”按钮。

步骤2：此时网页将应用所选的网页模板内容，当鼠标指针移至非可编辑区域上时，鼠标指针将变成禁用状态，将“素材/tea/文本”中的文本复制到可编辑区域为“neirong”的单元格中。

步骤3：将网页另存到站点文件夹里，并命名为“lczzgy.html”。

;一、模板和库的作用;二、库的创建;二、库的创建;二、库的创建;三、创建模板;三、创建模板;三、创建模板;四、创建可编辑区域;四、创建可编辑区域;四、创建可编辑区域;五、应用模板;举一反三——制作汽车之家网页模板;拓展知识;拓展知识;拓展知识;拓展知识;单元小结;单元习题;单元习题