《网页设计实验-实验五》由会员分享，可在线阅读，更多相关《网页设计实验-实验五（9页珍藏版）》请在金锄头文库上搜索。
1、实验名称：利用 CSS 样式、模板和库维护网站组别：第六组合作者:韩朗日期：2011/11/29 一、 预习：实验内容及要求1、 了解 CSS 样式表的基本语法和作用2、 掌握 CSS 样式的创建、编辑和应用操作3、 掌握 CSS 样式的导出、导入和链接操作4、 理解 CSS 样式的优先顺序规则5、 掌握创建模板和给网页应用模板的基本方法6、 掌握在模板中创建可编辑区域、可选区域和可编辑标签属性的作用及方法7、 掌握库部件的作用及创建和应用方法二、 实验步骤及过程（可以附算法）(一)、树状目录1、新建文档，其标题为“树状目录”，在设计面板空白处输入“文章摘要”，并保存文档。2、打开“css 样
2、式”面板，单击“新建 css 样式”按钮，在弹出的对话框中设置“选择器类型”为标签，“名称”为 div,“定义在”为仅对该文档，最后单击确定。3、在弹出的对话框中选择“类型”，设置“大小”为 14，“粗细”为粗体，“颜色”为#990000。4、选中“文章摘要”，单击“行为”面板中的“添加行为”按钮，选择“调用Javascript”选项，在弹出的对话框的文本框中输入代码如下：5、切换至代码视图添加 div 标签，并命名为 main1,将中的上代码移至中，如图6、在源代码中输入子目录的源代码，并在中命名为 sub1。7、在设计视图中输入子目录的名称，并设置好其链接，切换到代码视图中，在中添加初始化
3、隐藏样式的源代码（style=display:none）并添加另外两个子目录，如下图：（二）、边框特效菜单1、打开已经制作好的网页，在输入菜单处插入一个表格，并设置好其属性，如图所示：2、打开“css 样式”面板，单击“新建 css 样式”按钮，在弹出的对话框中设置“选择器类型”为类，“定义在”为仅对该文档，“名称”为 ltcd1，单击“确定”，在弹出的对话框中，选择“边框”选项卡，设置“样式”均为实线，“宽度”均为 1 像素，“颜色”中“上”和“左”为背景颜色#7BB04F，“右”和“下”为#000000。3、用同样地方法定义一个“ltcd2”的 css 样式，不同的是将四条边框线的颜色设为
4、与菜单背景相同的颜色。4、单击“css 样式”面板按钮，在弹出的对话框中设置“选择器类型”为高级，“定义在”为新建样式表文件，“名称”为 a:link，单击“确定”，弹出“保存样式表文件为”对话框，在“文件名”文本框中输入文件名称，单击“保存”，在弹出的对话框中，选择“分类”列表中的“类型”，设置其“大小”为14，“颜色”为#1e881e,“粗细”为粗体，“修饰”选择无。5、切 换 到 拆 分 视 图 ， 在 第 一 个 菜 单 项 所 在 的 处 加 上 代 码 ： onmouseover=this.className=ltcd1 onmouseout=this.className=ltcd
5、2 class=1tcd2。在切换到设计视图，选中菜单项设置链接，如图所示：6、对其他菜单项同样也加上上述代码，即可达到立体和平面相互转换的效果。（三）、制作商业网站1、打开已经制作好的网页，将光标置于需要设置为可编辑区域的单元格中，单击“常用” 选项卡中的“模板：可编辑区域”按钮，在弹出的对话框中的“名称”文本框中输入MTC， 并确定，在“属性”检查器中设置“单元格内容的垂直对齐方式”为顶端对齐，如图所示：2、根据步骤 1 设置另一个可编辑区域ZNR。3、点击“文件”“另存为模板”，弹出对话框，在“名称”文本框输入FXDL，如图所示：4、新建一个空白页面，点击“窗口”“资源”，打开资源面板。
6、单击“模板”按钮，选中“FXDL”模板，单击“应用”即可显示模板，并保存，如图所示：5、删除MTC 可编辑区域中的文本，并向该区域中插入图片，如图所示：6、删除 ZNR 可编辑区域中的文本，插入一个两行两列的表格，并设置好其属性，并向表格中插入图片，如图所示：7、保存该空白网页，并根据步骤 5、6 制作另一个网页，如图所示：8、打开FXDL.dwt 文档选中第三个表格中的文本，将步骤新建的文件设置为其超链接，如图所示：9、根据步骤 8，设置另一个新建页面的链接并保存，后弹出“更新模板文件”对话框，单击“确定”，自动完成更新后，关闭，如图所示：10、简单网站制作完成，最后在浏览器中观察效果。1、单击“新建库项目”按钮，并为其命名，在“库”面板的上半部分，可看见库元素预览效果，同时library 文件里会自动添加一个“版权信息.lbi”文件。2、在网页页面中，选中要插入库项目的位置，选中“库”面板中要插入的库项目，单击“插入”按钮，即可插入库元素。3、选中“库”面板中要编辑的项目，单击“编辑”按钮，在打开的库项目文档中，对其进行编辑。4、编辑设置完成后保存网页，在弹出的“更新库项目”的对话框中，点击“更新”按钮， 更新完毕后，关闭页面，如图所示：三、实验结果及分析（可另加附页）（一）的效果图如下：（二）的效果图如下：（三）的效果图如下：三、 教师评价指导教师签名：
