第八章 Dreamweaver网页设计.pptVIP

主要内容 主要内容 8.5.1 创建模板 2.插入可编辑区域 单击删除后的空白单元格，选择菜单“插入记录|模板对象|可编辑区域”，弹出对话框“Dreamweaver会自动将此文档转换为模板”，单击确定。设置可编辑区域的名称，如“content”。选择菜单“文件|另存为模板”，输入模板的名称，如“mb” 。 8.5.2 创建基于模板的网页 创建了模板后，可以将模板作为新文件的基础，在此基础上新建文件。选择菜单“新建|模板中的页|师范大学|mb”，如图所示。此时文件中只有content部分是可以更改的，直接在此处修改即可。 8.5.3 应用模板到页 选择菜单“修改|模板|应用模板到页”，选择模板“mb”，并勾选“当模板改变时更新页面” 。 8.5.4 更新模板及网页 模板文件在普通网页中是不能修改的，修改模板需要单独打开模板文件。打开站点面板Templates文件夹中的mb.dwt文件，将“学校概况”修改为“学校简介”，选择菜单“文件|保存”。弹出更新模板文件的对话框，对话框中列出了应用此模板的文件，单击更新按钮即可。注意此时如果该文件是打开的，需要保存该文件。值得注意的是模板文件.dwt是不能通过【F12】预览的，只用通过应用该模板的网页预览效果。 8.6 建立框架网页 框架能将浏览器窗口划分为多个区域，每个区域可以显示不同的网页文档。通常用于功能性较强的网页中，如邮箱或基于web的软件，其中一个框架网页包含导航控件，另一个框架显示对应的内容。如图所示，这是作者主持的天津师范大学青年基金项目中网络办公自动化系统的网页界面。界面分为上部功能链接区和下部的主体界面区，采用上下的框架组织网页，按照浏览者的习惯，横向安排网页文字链接。 8.6.1 准备框架网页 8.6.2 新建框架组织网页 选择菜单“文件|新建|示例中的页|框架集|上方固定”命令。 选择菜单“窗口|框架”，打开框架面板，单击面板中“topFrame”，进行上面网页的设置，在属性面板中设置源文件为top.html。单击框架面板中的“mainFrame”，设置属性面板中源文件为grms.html。 8.6.3 设置框架样式 在浏览器中不显示框架的边框，能够使用户感觉到页面是一个完整的整体，下面进行框架样式的设置。 1.设置框架集样式 在框架面板中单击外层的边框，选中总框架集。在属性面板中设置“边框”为“否”，边框宽度为0，单击属性面板中上面框架，设置行152像素，这个数值一般根据效果图切片获取。也可将鼠标放到两个框架网页交接处来调整框架比例。 8.6.3 设置框架样式 2.设置框架样式 单击框架面板中的上面框架，由于上面的框架页面大小是固定的，因此在属性面板进行设定：“滚动”为否，不显示滚动条，边框为否，不能调整大小。下面框架内容是随着栏目的不同而变化的，需要将滚动设置为“自动”，其余同上。 8.2.3 表格排版实例 6.图片的插入 选择菜单“插入记录|图像”，如果图像较多，可以选择缩略图的视图方式。下面弹出的对话框中，“千万”要注意选择“是”。也就是说现在选择的图片并没有在我们建立的网站文件夹中，需要把图片复制到网站文件夹中，否则设计完成的网页离开了设计的计算机，在别的计算机上图像不能显示。将该图片复制到网站文件夹images中，保存文件名为“logo.jpg” 。 8.2.3 表格排版实例 6.图片的插入 在图像标签辅助功能属性对话框中，单击“取消”，不做设置。设计图中的效果，同样插入其他图片。 8.2.3 表格排版实例 7.第2行的设计插入 采用和第1行同样的设计方法，插入1行2列表格，然后拆分第2个单元格为2行，或是插入2行2列的表格，合并第1列的两个单元格，并设置单元格的宽度和高度，插入图片。 8.2.3 表格排版实例 8.第3行的设计 第3行结构比较复杂，我们采取插入表格后进行合并单元格的方式，插入3行3列的表格，合并相应的单元格，分别设置每个单元格的宽度与高度。 8.2.3 表格排版实例 9.新闻内容的设计 新闻的内容属于比较整齐的排版，我们采取在单元格中插入表格的方式。注意属性面板中单元格的水平和垂直的对齐设置，能够确定插入对象后对齐的方式。因此先设置该单元格的水平与垂直均为居中，插入6行3列的表格，宽度为90%，设置表格行高均为20，调整列宽，插入新闻条目的图标图形，设置单元格水平对齐为左对齐，输入文字信息。 8.2.3 表格排版实例 10.底部的设计 单击左下角的单元格，设置属性面板中背景图像为前面切出来的一小条切片，同样设置右下角的单元