網页设计模板和库上机操作.docVIP

网页设计上机操作 12 模版和库 学习内容： 1. 理解摸板和库的含义 2. 掌握在网页中创建与应用摸板和库的方法 准备工作：在试卷文件夹中将“sjzd12”文件夹改为(姓名学号)命名的文件夹，运行dreamweaver8创建站点（站点名称为模版和库）指向该文件夹。所有生成的网页文件请放在站点目录下。 练习 第一部分：模板和库 指导性练习 （素材均在zhidao-lx中） 模板的创建： 在“窗口”菜单中选择“资源”，调出资源窗口 下面是资源窗口: 注意右下角的模板窗口。 点击左下角的模板小按钮，然后在右边的窗口中右击，选择“新建模板” 并命名为moban: 然后点击它右下角的编辑按钮编辑模板： 编辑网页，按下图的样式： 提示操作： 在布局模式插入四个表格 (2)第一个表格插入图片index_1.jpg, 第二个表格拆分成5个单元格，分别放入图片index_3_1.jpg到index_3_5.jpg (3) 第三个表格插入flash动画banner.swf, 第四个表格拆成两列，并将这两个单元格的重直对齐方式设为顶端对齐，左边一列放入图片index_5.jpg. 选中第四个表格的右边的单元格，插入可编辑区域：在“插入”菜单中选择“模板对象”-“可编辑区域”，命名为zhengwen, 在“文件”中点“保存”，模板创建完毕。 说明：此题也可以先创建好如图的网页，然后在“文件”的“另存为模版”中将它保存为一个模板。清掉不必要的部分，再插入“可编辑区域”，保存。 调用模板： 在“文件”中“新建基本页”，然后在右下角的资源中找到moban模板，点中它，然后点下面的“应用”按钮，如下图： 在可编辑区域中插入一个2行一列的表格，第一行插入图片mdjj_3.jpg, 第二行插入牡丹介绍的文字（在“相关文件.txt”文件中），保存该网页为a1_1.htm 再新建一个基本页，然后在右下角的资源中找到moban.dwt模板，点中它，然后点下面的“应用”按钮，在可编辑区域中插入一个2行一列的表格，第一行插入图片mdxsh_3.jpg, 第二行插入图片hua.jpg, 保存网页为a1_2.htm 如下图所示： 以上是调用模板的过程。 思考：如果将moban.dwt进行修改，对使用该模板的网页会有何影响。 进行以下尝试：打开moban.dwt，对第四个表格的左边的单元格中起导航作用的图片进行热区链接设置（均为空链接即可） 保存时做更新选择，然后查看使用该模板的网页（a1-1.htm和a1-2.htm），将鼠标移至“牡丹简介”上，观察其变化。 库的创建和使用： 库和模板相似，是网页可以重复使用的一部分内容。 库的创建：保存并关闭前面的窗口，在右下角的“资源”中选择库，并在库列表区域右击，选择“新建库”，命名为ku, 和模板相似的操作。 双击上面创建的ku文件，并编辑它。 在ku文件中用布局模式插入三个表格，并切换回标准模式， 第一个表格插入图片index_1.jpg, 第二个表格拆分成5个单元格，分别放入图片index_3_1.jpg到index_3_5.jpg 第三个表格插入flash动画banner.swf 点“文件”中的“保存”。 使用库： 新建一个基本页，在右下角的资源的库中，把ku拖到网页中， 在下面插入一个2行一列的表格，分别插入凤凰公司简介（在“相关文字.txt”）中，和图片index_2.jpg，并保存为a1_3.htm 独立完成以下各题（图片和文字素材在company文件夹中） 1、制作模板文件（gsmuban.dwt），如下图： 2、根据该模板制作a2-1.htm（内容为“公司简介”）和a2-2.htm（内容为“支持保障”）页面。 3、制作一个类样式Text1，存于ktcss.css外部样式文件中，该类样式的作用是控制本站点下所有页面的文本格式，具体要求为字号12，行距25px，文字缩进为25px。同时再设置a2-1.htm和a2-2.htm页面的文字格式为刚才定义的类样式Text1。效果如下图所示。 4、制作如下图所示的库项目（Logo.lbi） 5、将库项目（Logo.lbi）插入到gsmuban.dwt 的相应的位置。更新后得到a2-1.htm和a2-2.htm的页面如下： 6、新建一个页面a2-3.htm，插入库项目（logo.lbi）和相应的“联系我们”的文字内容。 重要内容再练习之-------框架样题 设计一个结构的框架网页。（素材均在frame中） 命名框架：将左边框架命名为main，右边框架命名为right。设置框架：将right框架列设置为145像素。 保存页面：将框架集文件取名为frame-b.h