第8章 网页设计基础 第二部分.ppt

第8章 网页设计基础 第二部分 添加图片 插入图片 将光标定位于要插入图片的位置。 单击“插入”菜单，执行“图片”命令 根据类型可以选择“剪贴画”和“来自文件” “剪贴画” 选择某一类，如“科技” 添加图片 调整图片与文字的对齐关系 点击“图像属性”对话框中的“外观”标签 添加图片 添加图片 添加图片 用图片作超链接 选中图片 单击鼠标右键，从弹出菜单中执行“超链接” 按照前述步骤设置超链接 浏览时，鼠标移到图片上时，变成手形，单击后则打开所链接的网页。 添加图片 建立图片映射 一个图片除了能建立一个超链接外，还可以与多个不同的超链接对应。 一个图片首先需要分隔成若干个热区，每一个热区对应一个超链接。热区形状可以任意定义。 添加图片 例：对一个人的图片定义3个热区。 使用“图片”工具栏中的热点 工具按钮，在图片上画出 热区。 每画一个热区，会自动弹 出“创建超链接”窗口。 工具按钮： “创建超链接”窗口 添加图片 例 浏览时，点击人物头部热区，打开一个新建的浏览窗口。 依次点击人物胸部和足球，又会打开新的窗口。 添加图片 表格 表格是一种能够有效地描述信息的组织方式。 网页中的表格可以表现传统的表格信息。 在网页中，表格更多地被用来组织控制文字、图片的位置及关系。 表格由行、列和单元格组成 创建表格 表格 创建表格（过程与Word相似） 移动光标至要建立表格的地方 在工具栏上，单击“插入表格”按钮。显示出插入表格网格。 用“表格”菜单的“手绘表格”命 令，可以修改表格结构与框线。 输入表格标题 表格 单元格属性 表格 网页属性——表格对齐 表格 表格属性 表格 表格属性——无边框线 当表格边框“粗细”设置成0时： Frontpage中表格线 成为虚线： 浏览时表格线不显示 表格 表格在网页内容编排上的妙用 4×3的表格，第1、3行进行“合并单元格” 第2、4行“插入”6幅图片 表格 表格在网页内容编排上的妙用 在“表格属性”中把边框粗细=0 得到的效果使得各图片与文字的排列非常整齐 表格 表格中的图片也可以做成超链接，如点击例子中小图片可以给出放大的图片。以新窗口打开。 框架 表格为我们提供了文字及图片的位置编排，使我们在网页编制中更整齐、更灵活和更方便。 框架提供给我们的是另一种全新的概念，它和表格一样，也是一种区域分块，但不同区域（框架）放置不同功能的内容，每一个框架是一个独立的操作区域。 框架 创建框架 使用框架页面模板方便地创建 挑一个接近要求的框架模板，再修改。 挑一个最简单的框架，再按自己的要求细分。 用框架模板创建带框架网页 框架 用框架模板创建带框架网页 打开“新建”窗口，根据预览，选择一个合适的框架模板。 框架 用框架模板创建带框架网页 选择“标题”框架模板网页结构 框架 输入框架内容 框架 框架的保存 由于框架包含框架的结构，各个框架对应的是独立的网页，所以框架的保存比较特殊。 例如：上述网页有两个框架，它就要存储三个网页文件： 框架结构页 顶部框架对应的网页文件 下部框架对应的网页文件 保存方式与普通网页相似，但对每一个框架都需指定保存的文件名。 框架 自定义框架 如果要设计如下结构的框架： 我们仍可以从最简单的“标题”模板开始。 框架 自定义框架 通过“框架”菜单的“拆分框架”和“删除框架”命令进行框架结构调整 对框架大小可以直接用鼠标拖动框架边框 框架 自定义框架 操作步骤： 3 选择“拆分成行” 框架 自定义框架 操作步骤： 4 同样选择中间框架，进行“拆分为列” 5 调整中间两个框架的宽度 框架 自定义框架（结果） 框架 删除框架 选中要删除的框架 执行“框架”菜单的“删除框架”命令 删除框架并不等于删除框架所对应的网页文件。因为框架只是和相应的网页文件建立联系。去掉框架，只是去掉这种联系而已。 被删除框架的所在空间将由与它同行或同列的框架来填补 。 框架 删除框架 例如删除上例底部框架，变成为： 框架 框架运用举例 把前面设计好的框架，用于荷花网页设计。 框架 框架运用举例 3个框架可以看作3个网页，按照前面介绍的方法分别输入内容。 把框架2中的小图片设置超链接，点击某小图片后，把放大的图片显示在框架3上。 选中一小图片 按“超链接”工具按钮，打开“创建超链接”窗口 定义大图片的文件路径和名字 按确定按钮后，“创建超链接”窗口将自动关闭 仍选中原小图片，再按“超链接”工具按钮 打开“编辑超链接”窗口，点击“更改目标框架”按钮 框架 框架运用举例 框架 浏