学案十模板网页

模板网页导学案【学习目标】1.学会网页模版的创建；2.学会网页模版的编辑；3.学会网页模版的应用。【学习重难点】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，蓝色便会消失。