《实训十 利用模板制作网页》由会员分享，可在线阅读，更多相关《实训十 利用模板制作网页（8页珍藏版）》请在金锄头文库上搜索。
1、实训十实训十 利用模板制作网页利用模板制作网页课时：课时：3 3 班级：班级：1212 计算机班计算机班 实训日期：实训日期：2013-4-232013-4-23 编写时期：编写时期：2013-2013- 4-184-18 一、实训目的一、实训目的 1、 掌握模板的创建； 2、 掌握模板的的编辑； 3、 掌握基于模板创建网页。二、实训内容二、实训内容 利用模板制作如下图所示网页 利用模板制作如下图所示网页； 其中：图 1 为“首页”index.html 的效果图，该页面左栏文字内容在 shengming.txt 中； 图 2 为“个人简介”jianjie.html 的效果图，对于该页面，单击左
2、栏的导航文字，右 栏会跳到相对应文字所在的位置，右栏文字内容在 jianjie.doc 中； 图 3 为“文学作品”wenxue.html 的效果图，该页面右栏文字内容在 wenxue.txt 中； 图 4 为“绘画作品”huihua.html 的效果图； 图 5 为“绘画作品”donghua.html 的效果图，其中左侧的导航按钮，初始化时是一张 图像，鼠标单击时又是一张图像； 图 6 为单击 donghua.html 的“动画一”按钮显示的 donghua1.html 的效果图； 图 7 为单击 donghua.html 的“动画二”按钮显示的 donghua2.html 的效果图； 图
3、8 为单击 donghua.html 的“动画三”按钮显示的 donghua3.html 的效果图； 图 9 为单击 donghua.html 的“动画四”按钮显示的 donghua4.html 的效果图； 图 10 为 “学习心得”xinde.html 的效果图； 导航中的“写信给我”链接到你的邮箱，设置所有链接的颜色为白色，已访问的链接 的颜色为黄色。图 1 index.html 图 2 jianjie.html图 3 wenxue.html 图 4 huihua.html图 5 donghua.html 图 6 donghua1.html图 7 donghua2.html 图 8 don
4、ghua3.html图 9 donghua3.html 图 10 xinde.html三、知识点分解三、知识点分解 由上图可知，所有页面的页眉、导航和页脚区域的内容都是一致的，只要主题区不一 致，所以我们可以利用模板来创建这些页面，该模板的页眉、导航和页脚区域都是固定区 域，只有主体区是可编辑区域，在主体区域我们可以绘制 2 个表格，每个表格内创建 1 个 可编辑区域，同时设置左边表格的背景颜色和右边表格的背景图像。对于 donghua.html，donghua1.html，donghua2.html，donghua3.html，donghua4.html，从它 们的效果图可以看出这 5 个页
5、面的主体区只有右边在变化，所以我们同样可以再创建 1 个 模板，在该模板的主体区的右栏创建 1 个可编辑区域。因此，对于该实训我们需要创建 2 个模板。四、实训步骤四、实训步骤 1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出 现“布局”工具栏，切换到“布局”模式，单击“布局表格”按钮，绘制一个宽： 780px，高：636px 的表格。 2、单击“布局表格”按钮，从该表格的左上角起，绘制一个宽：780，高：120 的 表格。 3、单击“布局单元格”按钮，从表格的左上角开始绘制一个宽：140，高：120 的 单元格. 4、将光标定位在单元格内，选择插入/图像菜单命令，
6、打开“选择图像源”文件 对话框，选择图像 logo.gif。 5、单击“布局单元格”按钮，接着上面的单元格的右边绘制一个宽：640，高： 120 的单元格. 6、将光标定位在单元格内，选择插入/媒体/Flash菜单命令，打开“选择文件” 对话框，选择文件 banner.swf。 7、接着往下绘制一个宽：780，高：21，水平：居中对齐，垂直;居中，背景颜色： #CC3333 的单元格，输入文字：首页 个人简介 文学作品 绘画作品 动画作品 视频作品 学习心得 给我留言 写信给我，设置文字格式：字体“宋体” ，大小“14px” 。 8、接着再往下绘制一个宽：140，高：470，水平：居中对齐，垂
7、直;居中，背景颜色： #0066FF 的单元格。 9、接着上面表格的右边绘制一个宽：640，高：470，水平：居中对齐，垂直;居中， 背景图像：back.gif 的单元格。 10、接着上面的两个表格的下面绘制一个高：18，水平：居中对齐，垂直;居中，背景 颜色：#000000 的单元格，输入文字：2006 年 12 月 20 日最后更新 Copyright 2006 小 慧版权所有，设置文字格式：字体：宋体，大小：12px，颜色：白色。 11、回到“标准”模式，将光标定位到第 8 步创建的单元格内，选择插入/模板对 象/可编辑区域菜单命令，弹出如图 11 所示的对话框，单击“确定”按钮，则在该
8、单元 格内就出现了一个名为“EditRegion1”的可编辑区域。图 11 “新建可编辑区域”对话框12、将光标定位到第 9 步创建的单元格内，选择插入/模板对象/可编辑区域， 弹出如图 11 所示的对话框，单击“确定”按钮，则在该表格内就出现了一个名为 “EditRegion2”的可编辑区域，创建的模板的效果图如下。图 12 模板的效果图 图 13 “另存为模板”对话框13、删除可编辑区域里面的文字“EditRegion1” ， “EditRegion2” 。 14、选择文件/另存为模板菜单命令，弹出如图 13 所示的“另存为模板”对话框， 选择模板所在的站点，如果该站点下有模板，则在“现存
9、的模板”中会出现该模板的名称， 如果该站点下没有模板，则在“现存的模板”中会出“没有模板” ，在“另存为”中输入模 板的名称 xiaohui，单击“保存”按钮，该模板会自动保存在 Templates 文件夹中。 15、选择文件 /新建菜单命令，弹出如图 14 所示的“从模板新建”对话框，选 择“模板”选项卡，单击该站点下的模板“xiaohui” ，单击“创建”按钮，即创建了一个 新的文档。图 14 “从模板新建”对话框 图 15 “文件”面板16、因为该文档是利用模板创建的，所以只有可编辑区域能够进行编辑，其余区域都 不可编辑，将光标定位到“EditRegion1”内，打开 shengming
10、.txt 文件，将里面的文字复 制、粘贴到该区域，选择标题文字“热爱生命” ，设置格式：字体“宋体” ，大小“14px” ， 颜色“#FFFF00” ；选择剩下的文字，设置格式：字体“宋体” ，大小“12px” ，颜色 “#FFFFFF” 。 17、将光标定位到“EditRegion2”内，选择插入/媒体/Flash菜单命令，打开 “选择文件”对话框，选择文件 main.swf，将光标定位到 main.swf 的后面，敲回车键， 输入文字“ 曾经 爱的网络里 心在游弋 曾经的相濡以沫 曾经的默契合作曾经的打打闹闹 曾经的牵挂 曾经的思念”,设置格式：字体“宋体” ，大小“16px” ，颜色 “
11、#FF9900” 。 18、按【Ctrl+S】将该网页保存为 index.html。 19、重复步骤 15，在“EditRegion1”内输入文字“ 教育背景、 英语水平、 计算机水平、 语言水平、 所获奖项、 社会实践、 个性特点、 兴趣爱好、 人生格言” ，将光标定位到“EditRegion2”内，将 jianjie.doc 中的内容导入到该区域中， 同时对文字“教育背景、英语水平、计算机水平、语言水平、所获奖项、社会实践、个性 特点、兴趣爱好、人生格言”进行格式设置，设置格式：字体“宋体” ，大小“18px” ， “粗 体” ，其余文字设为“宋体” ， “14px” 。 20、选择右栏文
12、字“教育背景” ，选择插入 /命名锚记菜单命令，输入锚名 “jiaoyu” ，然后选择左栏文字“ 教育背景” ，将链接改为“#jiaoyu” 。 21、重复步骤 20，分别对左栏剩下的文字进行锚链接。 22、按【Ctrl+S】将该网页保存为 jianjie.html。 23、重复步骤 15，将光标定位到“EditRegion1”内，选择插入/图像菜单命令， 打开“选择图像源”文件对话框，选择图 xiu1.gif。 24、将光标定位到“EditRegion2”内，打开 wenxue.txt 文件，将里面的文字复制、 粘贴到该区域。 25、按【Ctrl+S】将该网页保存为 wenxue.html。
13、 26、重复步骤 15，将光标定位到“EditRegion1”内，选择插入/图像菜单命令， 打开“选择图像源”文件对话框，选择图 xiu1.gif。 27、将光标定位到“EditRegion2”内，选择插入/表格 菜单命令，插入一个 2行 4 列无边框的表格，将光标定位到第 1 行第 1 个单元格，打开浮动面板组中“文件”面 板，如图 15 所示，选中图像“Butterfly13.jpg” ，将其拖到该单元格。 28、同理将“Butterfly16.jpg”拖到第 2 个单元格，将“Butterfly03.jpg”拖到第 3 个单元格，将“Butterfly12.jpg”拖到第 4 个单元格；
14、将“Butterfly01.jpg”拖到第 2 行第 1 个单元格，将“Butterfly11.jpg”拖到第 2 行第 2 个单元格，将 “Butterfly08.jpg”拖到第 2 行第 3 个单元格，将“Butterfly07.jpg”拖到第 2 行第 4 个单元格。 29、按【Ctrl+S】将该网页保存为 huihua.html。 30、重复步骤 15，将光标定位到“EditRegion2”内,输入文字“单击左边的按钮选 择动画” ，按【Ctrl+S】将该网页保存为 donghua.html。 31、重复步骤 15。 32、将光标定位到“EditRegion2”内，选择插入/表格菜单命
15、令，插入一个 4 行 1 列的表格，在第 1 行的单元格中输入文字“学英语怎样才能事半功倍” ，文字格式：大 小“24px” ，颜色“#0000FF” ，单元格格式：水平“居中对齐” ，垂直“居中” ；在第 2 行的 单元格中输入文字“句子比单词重要” ，文字格式：大小“18px” ，颜色“#0000FF” ，单元 格格式：水平“左对齐” ，垂直“居中” ；在第 3 行的单元格中输入文字“敢于开口” ，文字 格式：大小“18px” ，颜色“#0000FF” ，单元格格式：水平“左对齐” ，垂直“居中” ，在第 4 行的单元格中输入文字“盯住一套教材” ，文字格式：大小“18px” ，颜色“#0000FF” ， 单元格格式：水平“左对齐” ，垂直“居中” 。 33、按【Ctrl+S】将该网页保存为 xinde.html。 34、打开模板文件 xiaohui.dwt，选择文字“首页” ，打开“属性面板” ，将“链接” 设为“index.html”,同理将“个人简介”链接到“jianjie.html” ， “文学作品”链接到 “wenxue.html” ， “绘画作品”链接到“huihua.html” ， “动画作品”链接到 “donghua.html” ， “学习心得”链接
