静态网页设计与制作 教学课件 作者 胡汉辉 模块二.pptVIP

2.2.1 表格的有序存储 图2-20 “拆分单元格”对话框 正文_Embed_63.png 正文_Embed_64.png 2.2.2 图像的插入 1)如果要在文档中插入图像，首先需要在文档中指定图像的插入位置，然后单击“插入”面板中的“常用”类别里的“图像”图标按钮，或者选择【插入记录】→【图像】菜单命令，打开“选择图像源文件”对话框，如图2-21所示。 正文_Embed_65.png 2)在“选择图像源文件”对话框中，选择所需的图像，单击【确定】按钮。 2.2.2 图像的插入 图2-21 “选择图像源文件”对话框 2.2.2 图像的插入 正文_Embed_67.png 2.2.2 图像的插入 正文_Embed_68.png 图2-22 保存图片提示框 图2-23 “复制文件为”对话框 2.2.2 图像的插入 3)单击【保存】按钮后，将会弹出“图片标签辅助功能属性”对话框，如图2-24所示，单击【确定】按钮，图像将出现在网页当中，如图2-25所示。 正文_Embed_69.png 2.2.2 图像的插入 正文_Embed_70.png 图2-24 “图像标签辅助功能属性”对话框 图2-25 插入的 2.2.2 图像的插入 图像效果 2.2.3 图像属性的设置 1)选中网页中要修改的图像。2)设置“属性”面板中的各项参数，如图2-26所示。 图2-26 图像的“属性”面板参数 2.2.3 图像属性的设置 表2-2 图像属性参数表 2.2.3 图像属性的设置 表2-3 图像编辑图标按钮功能详表 2.2.4 图像与文本混合编排 1)新建一网页命名为“index.html”。2)在网页中插入表格，规格如图2-27所示，并居中显示。 图2-27 插入表格规格 2.2.4 图像与文本混合编排 3)设置表格的其他属性。 图2-28 表格第一行设置效果 2.2.4 图像与文本混合编排 图2-29 表格第二行设置效果 2.2.4 图像与文本混合编排 图2-30 表格第三行设置效果 2.2.4 图像与文本混合编排 图2-31 表格第四行设置效果 4)在表格中插入LOGO和Banner，效果如图2-32所示。 2.2.4 图像与文本混合编排 正文_Embed_77.png 图2-32 表格中插入LOGO和Banner的效果 2.2.4 图像与文本混合编排 5)在第三行第一个单元格中输入适当文字和图片，并进行布局，效果如图2-33所示。 图2-33 图文混排效果 6)制作版权部分内容，效果如图2-34所示。 2.2.4 图像与文本混合编排 图2-34 版权内容制作效果 7)在网页中插入背景图片。 2.2.4 图像与文本混合编排 图2-35 “页面属性”对话框 2.2.4 图像与文本混合编排 图2-36 设置背景图片效果 2.2.5 鼠标经过图像的制作 1)在网页中定位制作鼠标经过图像效果的位置。2)单击“插入”面板中的“常用”类别里的“图像”图标按钮，在下拉菜单中选中【鼠标经过图像】，弹出如图2-37所示对话框。 正文_Embed_82.png 2.2.5 鼠标经过图像的制作 图2-37 “鼠标经过图像”对话框 3)单击“原始图像”和“鼠标经过图像”后的【浏览】按钮设置图像，效果如图2-38所示。4)设置好后单击【确定】按钮，效果图如图2-39所示。 2.2.5 鼠标经过图像的制作 图2-38 设置鼠标经过图像效果 2.2.5 鼠标经过图像的制作 正文_Embed_85.png 正文_Embed_86.png 图2-39 鼠标未经过图像与鼠标经过图像效果对比5)按上述操作，插入其他鼠标经过图像效果。 2.3拓展训练 创建“我的个人网站”的首页 设计要求设计思路参考效果 设计要求  设计思路 1)首先建立站点，并利用文件夹规划站点文件。2)利用表格的有序存储功能，在网站的首页中插入表格，并确定表格的单元格的规格。3)在表格中适当的位置插入图片，如LOGO，Banner等内容。4)制作网页的菜单导航部分，要求使用鼠标经过图像技术。5)在网页的尾部做好页面的版权等内容。6)设置其他内容，丰富网页内容。 参考效果 图2-40 “我的个人网站”的首页效果 正文 主编 1.1任务一 创建“我的第一个页面”1.2任务二 创建与管理站点1.3拓展训练 创建“我的班级”站点2.1任务一 文本的输入—— 创建“养生保健”页面2.2任务二 图像的添加—— 创建“ASA餐厅”页面2.3拓展训练 创建“我的个人网站”的首页3.1任务一 Flash元素的添加