实训十 利用模板制作网页.doc

实训十 利用模板制作网页课时：3 班级：12计算机班 实训日期：2013-4-23 编写时期：2013-4-18一、实训目的1、 掌握模板的创建；2、 掌握模板的的编辑；3、 掌握基于模板创建网页。二、实训内容利用模板制作如下图所示网页利用模板制作如下图所示网页；其中：图1为“首页”index.html的效果图，该页面左栏文字内容在shengming.txt中；图2为“个人简介”jianjie.html的效果图，对于该页面，单击左栏的导航文字，右栏会跳到相对应文字所在的位置，右栏文字内容在jianjie.doc中；图3为“文学作品”wenxue.html的效果图，该页面右栏文字内容在wenxue.txt中；图4为“绘画作品”huihua.html的效果图；图5为“绘画作品”donghua.html的效果图，其中左侧的导航按钮，初始化时是一张图像，鼠标单击时又是一张图像；图6为单击donghua.html的“动画一”按钮显示的donghua1.html的效果图；图7为单击donghua.html的“动画二”按钮显示的donghua2.html的效果图；图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 donghua3.html 图9 donghua3.html 图10 xinde.html三、知识点分解由上图可知，所有页面的页眉、导航和页脚区域的内容都是一致的，只要主题区不一致，所以我们可以利用模板来创建这些页面，该模板的页眉、导航和页脚区域都是固定区域，只有主体区是可编辑区域，在主体区域我们可以绘制2个表格，每个表格内创建1个可编辑区域，同时设置左边表格的背景颜色和右边表格的背景图像。对于donghua.html，donghua1.html，donghua2.html，donghua3.html，donghua4.html，从它们的效果图可以看出这5个页面的主体区只有右边在变化，所以我们同样可以再创建1个模板，在该模板的主体区的右栏创建1个可编辑区域。因此，对于该实训我们需要创建2个模板。四、实训步骤1、新建一个文档，将“插入”栏中的“常用”选项卡改为“布局”选项卡，此时就出现“布局”工具栏，切换到“布局”模式，单击“布局表格”按钮，绘制一个宽：780px，高：636px的表格。2、单击“布局表格”按钮，从该表格的左上角起，绘制一个宽：780，高：120的表格。3、单击“布局单元格”按钮，从表格的左上角开始绘制一个宽：140，高：120的单元格.4、将光标定位在单元格内，选择插入/图像菜单命令，打开“选择图像源”文件对话框，选择图像logo.gif。5、单击“布局单元格”按钮，接着上面的单元格的右边绘制一个宽：640，高：120的单元格.6、将光标定位在单元格内，选择插入/媒体/Flash菜单命令，打开“选择文件”对话框，选择文件banner.swf。7、接着往下绘制一个宽：780，高：21，水平：居中对齐，垂直;居中，背景颜色：#CC3333的单元格，输入文字：首页个人简介 文学作品 绘画作品 动画作品视频作品学习心得给我留言写信给我，设置文字格式：字体“宋体”，大小“14px”。8、接着再往下绘制一个宽：140，高：470，水平：居中对齐，垂直;居中，背景颜色：#0066FF的单元格。9、接着上面表格的右边绘制一个宽：640，高：470，水平：居中对齐，垂直;居中，背景图像：back.gif的单元格。10、接着上面的两个表格的下面绘制一个高：18，水平：居中对齐，垂直;居中，背景颜色：#000000的单元格，输入文字：2006年12月20日最后更新 Copyright 2006小慧版权所有，设置文字格式：字体：宋体，大小：12px，颜色：白色。11、回到“标准”模式，将光标定位到第8步创建的单元格内，选择插入/模板对象/可编辑区域菜单命令，弹出如图11所示的对话框，单击“确定”按钮，则在该单元格内就出现了一个名为“EditRegion1”的可编辑区域。图11 “新建可编辑区域”对话框12、将光标定位到第9步创建的单元格内，选择插入/模板对象/可编辑区域，弹出如图11所示的对话框，单击“确定”按钮，则在该表格内就出现了一个名为“EditRegion2”的可编辑区域，创建的模板的效果图如下。 图12 模板的效果图 图13 “另存为模板”对话框13、删除可编辑区域里面的文字“EditRegion1”，“EditRegion2”。14、选择文件/另存为模板菜单命令，弹出如图13所示的“另存为模板”对话框，选择模板所在的站点，如果该站点下有模板，则在“现存的模板”中会出现该模板的名称，如果该站点下没有模板，则在“现存的模板”中会出“没有模板”，在“另存为”中输入模板的名称xiaohui，单击“保存”按钮，该模板会自动保存在Templates文件夹中。15、选择文件 /新建菜单命令，弹出如图14所示的“从模板新建”对话框，选择“模板”选项卡，单击该站点下的模板“xiaohui”，单击“创建”按钮，即创建了一个新的文档。 图14 “从模板新建”对话框 图15 “文件”面板16、因为该文档是利用模板创建的，所以只有可编辑区域能够进行编辑，其余区域都不可编辑，将光标定位到“EditRegion1”内，打开shengming.txt文件，将里面的文字复制、粘贴到该区域，选择标题文字“热爱生命”，设置格式：字体“宋体”，大小“14px”，颜色“#FFFF00”；选择剩下的文字，设置格式：字体“宋体”，大小“12px”，颜色“#FFFFFF”。17、将光标定位到“EditRegion2”内，选择插入/媒体/Flash菜单命令，打开“选择文件”对话框，选择文件main.swf，将光标定位到main.swf的后面，敲回车键，输入文字“ 曾经 爱的网络里心在游弋曾经的相濡以沫曾经的默契合作曾经的打打闹闹曾经的牵挂曾经的思念”,设置格式：字体“宋体”，大小“16px”，颜色 “#FF9900”。18、按【Ctrl+S】将该网页保存为index.html。19、重复步骤15，在“EditRegion1”内输入文字“ 教育背景、 英语水平、 计算机水平、 语言水平、 所获奖项、 社会实践、 个性特点、 兴趣爱好、 人生格言”，将光标定位到“EditRegion2”内，将jianjie.doc中的内容导入到该区域中，同时对文字“教育背景、英语水平、计算机水平、语言水平、所获奖项、社会实践、个性特点、兴趣爱好、人生格言”进行格式设置，设置格式：字体“宋体”，大小“18px”，“粗体”，其余文字设为“宋体”，“14px”。20、选择右栏文字“教育背景”，选择插入 /命名锚记菜单命令，输入锚名“jiaoyu”，然后选择左栏文字“ 教育背景”，将链接改为“#jiaoyu”。21、重复步骤20，分别对左栏剩下的文字进行锚链接。22、按【Ctrl+S】将该网页保存为jianjie.html。23、重复步骤15，将光标定位到“EditRegion1”内，选择插入/图像菜单命令，打开“选择图像源”文件对话框，选择图xiu1.gif。24、将光标定位到“EditRegion2”内，打开wenxue.txt文件，将里面的文字复制、粘贴到该区域。25、按【Ctrl+S】将该网页保存为wenxue.html。26、重复步骤15，将光标定位到“EditRegion1”内，选择插入/图像菜单命令，打开“选择图像源”文件对话框，选择图xiu1.gif。27、将光标定位到“EditRegion2”内，选择插入/表格 菜单命令，插入一个2行4列无边框的表格，将光标定位到第1行第1个单元格，打开浮动面板组中“文件”面板，如图15所示，选中图像“Butterfly13.jpg”，将其拖到该单元格。28、同理将“Butterfly16.jpg”拖到第2个单元格，将“Butterfly03.jpg”拖到第3个单元格，将“Butterfly12.jpg”拖到第4个单元格；将“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”内，选择插入/表格菜单命令，插入一个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”，“学习心得”链接到“xinde.html”，“写信给我”链接到“”。35、按【Ctrl+S】保存该模板，打开“更新模板文件”对话框，单击“更新”按钮更新通过该模板创建的所有网页。36、单击所创建的6个网页的网页标签，再将该文档保存一次。37、打开“jianjie.html”，选择修改/模板 /从模板中分离菜单命令，将该网页从模板分离出来，然后选择左边的单元格，设置格式：水平“左对齐”，垂直“顶端”，同理对右边的单元格进行同样的设置。38、新建四个文档，分别将其保存为donghua1.html，donghua2.html，donghua3.html，donghua4.html。39、打开“donghua.html”，选择修改/模板 /从模板中分离菜单命令，将该网页从模板分离出来，然后选择左边的单元格，将单元格背景颜色删除；再选择插入/图像对象 /导航条菜单命令，弹出插入导航条对话框，添加四个导航条元件，项目名称分别为“one1”，“one2”，“one3”，“one4”，状态图像分别为“one1.gif”，“one2.gif”，“one3.gif”，“one4.gif”，鼠标经过图像分别为“two1.gif”，“two2.gif”，“two3.gif”，“two4.gif”，替换文本分别为“动画作品一”，“动画作品二”，“动画作品三”，“动画作品四”，按下时前往的URL分被为“donghua1.html”，“donghua2.html”，“donghua3.html”，“donghua4.html”，插入下拉菜单选择“垂直”。40、按【Ctrl+S】保存该网页，然后将光标定位到右边的单元格，删除单元格内的文字，接着选择插入/模板对象/可编辑区域，单击“确定”按钮，则在该表格内就出现了一个名为“EditRegion1”的可编辑区域，删除可该区域内的文字。41、选择文件/另存为模板菜单命令，选择模板所在的站点，本站点下有模板，则在“现存的模板”中会出现该模板的名称xiaohui，在“另存为”中输入模板的名称donghua，单击“保存”按钮，则该站点下就会出现两个模板xiaohui和donghua，创建的donghua模板的效果图如图14所示42、打开“donghua1.html”，在“文件”面板中选择“资源”选项卡，如图14所示的对话框，选择“donghua”，单击“应用”按钮。 图14 “donghua”模板效果图 图15 “资源”对话框43、重复步骤42，分别将“donghua2.html”，“donghua3.html”，“donghua4.html”，应用该模板。44、单击“donghua1.html” 网页标签，将光标定位到EditRegion1区域内，选择插入/媒体/Flash菜单命令，插入“wenzi.swf”。45