（中职）网页设计与制作教程8

1、YCF正版可修改PPT（中职）网页设计与制作教程8项目活动八居家房产网站:模板和库的应用任务一创建模板任务二应用模板任务三库任务四居家房产网站建设返回任务一创建模板一、模板的概念模板是一个有固定内容和格式的文档， 是用户批量创建文档和更新文档的基础。在 中， 创建的模板文件保存在网站根目录下的“” 文件夹内， “” 文件夹是自动生成的， 用户不能对其进行修改。二、创建模板创建模板有两种方法， 即直接创建空白模板和将现有网页保存为模板() 直接创建空白模板。执行菜单命令“窗口” “资源”， 打开“资源” 面板， 单击“资源” 面板中的“模板” 按钮， 然后单击“资源” 面板右下角的“新建” 按钮

2、 来创建空白模板。 如图 所示。下一页返回任务一创建模板也可以在主菜单中执行菜单命令“文件” “新建”， 打开“新建文档” 对话框， 然后选择“空模板” “ 模板” 命令来创建空白模板， 如图 所示， 单击“创建” 按钮后， 效果如图 所示。 创建空白模板后， 还需要打开模板文件， 在其中添加网页元素和模板对象。() 将现有网页保存为模版。首先打开一个已有内容的网页文档， 根据实际需要在网页中选择网页元素， 并将其转换为模板对象， 然后在主菜单中执行菜单命令“文件” “另存为模板”， 如图 所示， 会弹出“另存模板” 对话框， 如图 所示。上一页下一页返回任务一创建模板三、删除模板如果要删除模

3、板， 只要选中该模板， 然后单击“资源” 面板右下角的“删除” 按钮 即可， 如图 所示。四、编辑模板() 可编辑区域。可编辑区域是指可以进行添加、修改和删除网页元素等操作的区域。 可编辑区域在模板中由高亮显示的矩形边框围绕， 该边框使用在首选参数中设置的高亮颜色。 该区域左上角的选项卡显示该区域的名称。 另外需要注意的是， 在可编辑区域内不能再插入可编辑区域。上一页下一页返回任务一创建模板执行菜单命令“插入” “模板对象” “可编辑区域”， 如图 所示。 会打开“新建可编辑区域” 对话框， 插入或者将当前选定区域设为可编辑区域。修改可编辑区域等模板对象的名称可以在“属性” 面板中进行修改。

4、方法是单击模板对象的名称或者将光标定位在模板对象处， 然后在工作区下面选择相应的标签， 在选择模板对象时会显示其“属性” 面板， 在“属性” 面板中修改模板对象的名称即可， 如图 所示。() 可编辑区域操作。在模板中创建了可编辑区域后， 可以对它进行常用的操作， 例如选择可编辑区域、删除可编辑区域、重命名可编辑区域等。在模板中单击可编辑区域左上角的选项卡即可选择可编辑区域。 在模板中单击可编辑区域之外的任何区域， 可以取消选择可编辑区域。上一页下一页返回任务一创建模板在模板中删除可编辑区域， 则该区域变为不可编辑区域。 要删除可编辑区域， 首先选择可编辑区域， 然后执行菜单命令“修改” “模板

5、” “删除模板标记”。要重命名可编辑区域， 首先选择可编辑区域， 然后在属性栏的可编辑区域“名称” 框中输入新的名称即可。上一页返回任务二应用模板一、利用模板新建网页执行菜单命令“文件” “新建”， 打开“新建文档” 对话框， 选择“模板中的页”选项卡， 选择已创建的模板， 如图 所示。 也可以在“资源” 面板中打开模板列表，在模板列表单击鼠标右键选取需要的模板， 在弹出的快捷菜单中选择“从模板新建” 命令， 如图 所示。 基于模板的新文档即在文档窗口中打开。二、在已存在的页面应用模板首先打开要应用模板的网页文档， 执行菜单命令“修改” “模板” “应用模板到页”， 弹出“选择模板” 对话框，

6、 如图 所示。 或者在“资源” 面板的模板列表框中选中要应用的模板， 单击面板底部的“应用” 按钮即可应用模板。下一页返回任务二应用模板如果已打开的文档是一个空白文档， 文档将直接应用模板， 如果打开的文档是一个有内容的文档， 这时通常会弹出一个“不一致的区域名称” 对话框， 如图 所示。 该对话框会提示读者将文档中已有内容放在模板的什么区域。 保存文档， 预览效果如图 所示。三、分离模板通过选择“从模板中分离” 命令将使用模板的网页脱离模板。 脱离模板后， 网页中的内容将自动变成与模板无关的内容， 网页与模板不再有关联。上一页返回任务三库一、库的概念库是一种特殊的 文件， 可以用来存放诸如文

7、本、图像等的网页元素， 这些元素通常被广泛用于整个站点， 并且经常被重复使用或更新。创建的库项目通常保存在网站根目录下的“” 文件夹内， “” 文件夹是自动生成的， 用户不能对其进行修改。二、创建库项目() 创建空白库项目。执行菜单命令“窗口” “资源”， 打开“资源” 面板。 在“资源” 面板中单击“库” 按钮 切换至“库” 分类， 单击面板右下角的“新建” 按钮 新建一个库， 然后在列表框中输入库的名称并加以确认。 如图 所示。下一页返回任务三库也可以在主菜单中执行菜单命令“文件” “新建”， 打开“新建文档” 对话框，然后选择“空白页”， 在页面类型中选择“库项目” 来创建空白库项目。

8、如图 所示。() 从已有的网页创建库项目。首先打开一个已有的文档， 从中选择要保存为库项目的对象， 如表格、图像等， 然后执行菜单命令“修改” “库” “增加对象到库” 或在“资源” 面板的“库” 分类模式下， 单击右下角的“新建” 按钮 ， 则该对象即被添加到库项目列表中， 库项目名为系统默认的名称， 修改名称后按 键确认。三、删除库项目如果要删除库项目， 只要先选中该库项目， 然后单击“资源” 面板右下角的“删除”按钮 或按 键即可。上一页返回任务四制作居家网站一、新建、布局模板网页() 新建站点， 将 中的“居家网” 文件夹下的“” 文件夹复制到本地根文件夹中。() 新建文档， 执行菜单

9、命令“文件” “另存为模板”， 弹出“另存为模板” 对话框， 将模板文件命名为“”， 修改页面属性， 设置文档字体大小为“”。() 布局模板网页， 插入一个 行 列、宽为 像素的表格。 设置表格居中对齐，第 个单元格宽度设置为 像素， 插入图片 .。 第 个单元格中嵌入一个 行 列的表格， 合并该表格的第 行， 插入图片 .。 设置第 行的行高为 像素，光标定位到该行的第一个单元格中， 切换到代码视图。下一页返回任务四制作居家网站在 标签中， 插入代码 ./ / .， 合并第、 行中的第 列单元格， 插入图片.。 在第 行的第 个单元格中， 插入图片 .。() 将光标定位到设置背景图片的单元格

10、中， 在“属性” 面板中设置该单元格水平、垂直、居中显示， 输入文字， 效果如图 所示。() 插入一个 行 列、宽为 像素的表格， 设置表格居中对齐。 第 个单元格宽度设置为 像素， 插入图片 .， 将光标定位到图片所在单元格的后面， 插入一个 行 列的表格， 宽度为。 将第、 行的高度设置为 像素，第、 行的高度设置为 像素， 设置背景图片为 .。上一页下一页返回任务四制作居家网站在代码视图中删除第、 行中的“”， 设置 行 列表格的第、 列的宽度为像素。() 在相应的位置插入图片， 效果如图 所示。() 将光标定位到 行 列表格的第 个单元格中， 设置该单元格的垂直对齐为顶端。 在该单元格

11、中插入一个 行 列的表格， 设置第 个单元格的宽为 像素， 插入图片 .。 设置第 个单元格的宽为 像素， 插入图片 .。 将第 个单元格拆分成 行， 设置第 行的行高为 像素， 将光标定位到该单元格中， 在代码视图中， 设置背景图片为 .， 输入文字“热点新闻金融资讯楼盘展示购房指南”。上一页下一页返回任务四制作居家网站() 同理， 在 行 列的表格下方插入一个 行 列的表格， 设置第 列的宽度为像素， 插入图片 .， 设置第 列的列宽为 像素， 拆分该单元格为两行， 设置第 行的高度为 像素。 在代码视图中， 设置背景图片为 .， 按相应的空格， 输入文字“热点新闻”。 在第 列中插入图片

12、 .， 布局完成， 效果如图 所示。() 在文档底部， 插入一个 行 列、宽为 像素的表格， 在单元格中插入图片 .， 效果如图 所示。() 保存模板网页。 弹出如图 所示的提示框。 单击“确定”， 完成模板网页的布局。上一页下一页返回任务四制作居家网站二、基于模板新建页面() 执行菜单命令“文件” “新建”， 打开“新建文档” 对话框。 选择“模板中的页” 选项， 选择“站点” 中的模板“”， 单击“创建” 按钮， 如图 所示。() 同理， 基于模板创建 个页面。在文档上方单击鼠标右键， 出现如图 所示的列表， 单击“保存全部”， 可将 个基于模板新建的页面保存到本地根文件夹中， 名称分别为

13、.、.、.、. 和.。三、设置模板可编辑区域() 打开模板文件“.”， 光标定位到设置可编辑区域的单元格中， 单击鼠标右键， 执行命令“模板” “新建可编辑区域”， 如图 所示。上一页下一页返回任务四制作居家网站() 保存模板网页， 弹出如图 所示“更新模板文件” 对话框， 单击“更新” 按钮， 基于模板新建的页面都有了可编辑区域。() 修改所有基于模板新建的页面中的可编辑部分， 保存所有基于模板新建的页面。四、设置模板的超链接() 分别选择模板文件中的文字“新闻中心” “地产观察” “楼盘点评” “热点追踪”“精彩生活” 创建超链接。() 文字“新闻中心” “地产观察” “楼盘点评” “热点追踪” “精彩生活” 分别链接本地根文件夹中的.、.、.、. 和.。() 保存模板文件， 弹出“更新模板文件” 对话框， 单击“更新” 按钮， 保存基于模板新建的网页。上一页返回图 “资源” 面板返回图 “新建文档” 对话框返回图 效果图返回图 “另存为模板” 命令返回图 “另存模板” 对话框返回图 删除效果图返回图 插入“可编辑区域”返回图 可编辑区域的“属性” 面板返回图