第十三课模板.pptVIP

第十三课 模板 模板和库 实际工作中，很多的页面（如不同的栏目）都会有相同的布局，在制作时为了避免这种重复操作，可将具有相同的整体布局结构的页面制作成模板，以后只需直接使用即可。 模板 是一种特殊类型的文档，用于设计布局比较固定的页面，在设计模板的过程中，需要指定模板的可编辑区域，以便在应用到网页时可以进行编辑操作 特点： 一次可以更新多个页面 模板与基于该模板的网页文件之间保持了一种连接的状态，它们之间共同的内容能够保持完全的一致 作为一个模板，DW会自动锁定文档中的大部分区域。 可编辑区域 创建模板 将现有网页文件另存为模板，然后根据需要进行修改 直接新建一个空白模板，再在其中插入需要显示的文档内容 扩展名：DWT，存放在TEMPLATES文件中 使用网页另存为的方法创建模板 打开已经制作好的栏目网页，文件-另存为模板 常用分类-模板 可选区域，重复区域，可编辑的可选区域，重复区域都需要使用代码操作，不做讲解 文件-新建HTML模板 综合实例 悟嘉琥珀：企业宣传网站 引导页及栏目页 制作引导页1 主要由背景图像和FLASH制作的标识动画组合而成 新建HTML文件 页面属性，字体大小为9PT，文本颜色为白色，背景颜色为黑色，背景图像为BG.GIF,上下左右边距均为0 铵接属性：已访问链接为白色，变换图像链接为黄色，下划线为仅在变换图像时显示下划线 标题文本框输入文字悟嘉琥珀 保存为INDEX.HTM 表格布局网页：插入7行1列，宽度为100%,边框边距间距均为0 第1行插入1行2列，宽度为300像素，边框粗细为0的嵌套表，嵌套表左侧单元格插入图像COFFEE.GIF,右侧单元格输入网站英文广告用语:Enjoy life,Enjoy yourself…… 第2行单元格,设置内容居中对齐,垂直对齐选择底部,高为360像素 制作引导页2 在此格中插入FLASH文件LOGO.SWF 空出第3行，光标定位第4行，单元格居中对齐，垂直对齐设为底部，高为50，插入woja.gif 第5行单元格，居中对齐，底部垂直，插入FLASH文件BOTTOM.SWF 第6行单元格，拆分为3列 第7行单元格，拆分为3列 选中第6行第7行左侧两个单元格(上下各一个)，合并 选择左侧单元格：设置宽为57%，高为130，右对齐，顶端对齐，输入文字：进入网页，输入链接下级网页的路径及名称：WENHUA.HTM 选中第7行中间的单元格,设置宽为42%,右对齐,底部对齐,输入网站的版权信息和制作单位 为了使网页在1024*768分辨率浏览网页时,全屏显示,选中表格,设置表格高为100%,通常网页内容较少且不能充满一屏时,需要用到此设置 保存网页按F12浏览网页效果 制作模板页 企业宣传类网站的结构通常比较简单，大部分不过两三级，本实例只有两级即二级栏目页是网站的具体内容页 建立站点：新建站点：悟嘉琥珀本地根文件夹为网站放置的文件夹路径 打开网站引导页index.htm,文件-另存为模板，在另存模板对话框中选择悟嘉琥珀，另存为命名ONE 用网站引导页来另存为模板页主要是为了沿用于关于页面属性的设置，即使删除网页内容，页面属性仍会保留下来 CTRL+A全选，删除，页面属性-更改背景图像，BG_TWO.gif 插入1行2列，宽为778像素，单元格边距和间距均为0的表格，左侧单元格宽度为759像素，右侧单元格宽度为19像素，两格为顶端对齐 左侧单元格插入2行2列，宽度为759像素的嵌套表格。分别设置左右单元格宽度为170和589像素，第1行左侧单元格中插入悟嘉琥珀的标识图像logo_two.gif 右为:LOGO_two2（作为背景）两幅图像 合并第2行左右两个单元格，设置高度为24，设定样式，文字为黑色（style1),设置背景图像为：BG_MENU.GIF,在单元格输入栏目名称，并用竖线进行分隔 在导航栏表格下制作网页内容表格，3行2列，宽度为759像素的表格，选中右侧三个单元格合并，设置1和2行高度分别为150和300 在内容表格下方制作联系方式和版权信息表格，（每个页面都是统一的），在内容表格下插入4行4列，宽度为759，间距为2的表格，合并第1行和第4行的单元格，在每个单元格中输入相应的内容 设置模板中可编辑区域 可编辑区域可以根据网页的需要设置多处，每个栏目页有区别的部分都可以设置成可编辑区，如栏目标题，栏目内容 宣传内容：插入1行1列，宽度为80%，其他设置为0的表格，用来控制内容的范围，表格设为居中对齐 使光标定位在表格内，模板，可编辑区域，名称输入宣传内容 使用以上方法分别设置栏目标题，栏目内容，栏目内容2三个可编辑区域 文件-保存 制作栏目页 制作栏目页时，只需要根据模板的设置在可编辑区域加入不同的内容即可 文件新建-模板-站点-悟嘉琥珀-选择模板文件