学案十模板网页.docVIP

模板网页 导学案 【学习目标】 学会网页模版的创建； 学会网页模版的编辑； 学会网页模版的应用。 【学习重难点】 1. 模板的创建、编辑及应用。 2.如何利用网页模板制作出风格一致的网页。 课堂练习 1.P184 使用模板制作网页。 二、任务练习 展示个人主页网站，请同学们观察，个人主页网站的几个页面之间有什么相同之处。 个人主页首页： 自我介绍页面： 提问：同学们观察首页、自我介绍、美丽照片及友情链接等页面。这些页面有哪些共同之处，你的感觉是什么？ 左侧导航和头部都一样，风格一致，很舒服…… 如果想让你的网站页面风格一致，可以使用模板，本节课我们就来学习模板的使用方法。 一、创建模板 1. 新建——空白页——HTML模板 2. 在打开的模板中创建3行2列的表格，宽度为800像素。 3. 将第一行和第三行合并单元格，变为一列。 4. 在第一行插入 top.jpg , 在第三行插入 footer.jpg,并将单元格调整成与图片相同大小。 5. 将第二行左边单元格宽度调整为160像素，垂直对齐方式设置为顶端对齐。 6. 为上述单元格添加背景图像 left_bg.jpg, 7.在左边单元格中插入9行1列的表格，宽度为160像素，依次将图像插入相应单元格中。 注意：插入图像不要调整其大小。 8.点击右边单元格，将其水平对齐选为左对齐，垂直对齐设为顶端对齐。 9.插入记录——模板对象——可编辑区域，命名为zhengwen。 10.保存模板 文件——另存为——文件名 moban 保存在Template 模板文件夹中，后缀名为dwt。 二、编辑模板 1.定义可编辑区域 将鼠标放在空白区域，单击“插入记录—模板对象—可编辑区域”即可。 2.定义重复区域 选中网页中的某个元素，单击“插入记录-模板对象-重复区域” 3.定义可选区域 选中网页中的某个元素，单击“插入记录-模板对象-可选区域” 三、应用模板 1.文件——新建——模板中的页 2.创建，在编辑区域进行编辑 例如创建主页，将zhengwen删去，创建2行1列表格，插入相应图片。 其他几个页面类似。 3.超链接方法介绍 因为是利用模板创建的，故超链接需在模板中添加。 回到模板页，在点击首页图片，将链接旁边的小时钟拖到需要链接的页面上便可。 超链接设置成功后，图片周围会出现蓝色边框，这时只需将其边框设为0，蓝色便会消失。