第4章 节 文本与图像 网页制作课件.pptVIP

第4章 文本与图像 教学目标 通过本章的学习，掌握向网页中插入文本、对文本进行编辑的方法，能设定文本的格式、会用列表符；掌握几种形式的超链接，能对超链接进行灵活运用；能在网页中插入图像及编辑图像，能运用图像进行超链接。 重点和难点 重点：文本的编辑与格式设置、超链接的用法、图像的应用。 难点：超链接中的相对路径与绝对路径的使用。 高等职业教育“十二五”规划教材  1、设置网页文本格式 本案例将练习对网页中的文本进行格式设置。这个案例中的制作思路：将网页中文本的标题、作者、正文设置为不同的字体、大小，使其看起来具有层次感；设置所有文本居中对齐，使其看起来更加美观。 （1）在网页中使用文本 1）插入文本 普通文本的输入:直接输入文本;从其他文档中复制文本. 插入特殊字符 输入空格 　２)设置文本格式 在Dreamweaver中，可以使用文本的属性面板对文本进行格式化，使其更加条理清晰、主次分明。 高等职业教育“十二五”规划教材 图4-4 属性面板  高等职业教育“十二五”规划教材 图4-5 设置网页文本的默认颜色 图4-4 对齐文本  高等职业教育“十二五”规划教材 图4-6 “编辑字体列表”对话框 图4-7 改变网页段落和标题的默认设置  文本的其他设置 创建列表 列表属于文本的段落格式，有项目列表和编号列表两种。 高等职业教育“十二五”规划教材 图4-8 出现项目符号 图4-9 输入第一个项目 图4-10 完成列表 图4-11 出现编号 图4-12 输入第一个项目 图4-14 完成列表  5）设置链接管理特性 　　通过设置中文版Dreamweaver的链接管理特性，用户可以让中文版Dreamweaver按照自己的需要进行链接管理。 高等职业教育“十二五”规划教材 图4-19 “首选参数”对话框  （3 ） 案例实现 “再别康桥”网页案例分析： 1）启动Dreamweaver，单击“标准”工具栏的“新建”按钮，在弹出的“新建文档”对话框中新建一个基本页HTML文档。 2）单击“修改”→“页面属性”命令，弹出“页面属性”对话框，在“分类”下拉列表中选择“外观”选项，在“外观”选项区中的“背景图像”文本框中设置背景图片，单击“确定”按钮。 3）在文档中输入如图4-20所示的文本。 4）选中标题“再别康桥”，在“属性”面板的“字体”下拉列表框中选择“黑体”选项，在“大小”下拉列表框中选择46，效果如图4-21所示。 高等职业教育“十二五”规划教材 图4-20 输入文本 图4-21 设置标题格式  5）将标题下“徐志摩”文本的字体设置为隶书，大小为18磅，如图4-22所示。 6）选中正文文本，将其字体设置为幼圆，大小为16磅，如图4-24所示。 高等职业教育“十二五”规划教材 图4-22 设置文本 图4-24 设置正文文本 7）选中所有文本后在属性面板中单击“居中对齐”按钮 使其居中，然后单击“颜色”按钮，在打开的“颜色”面板中选择深蓝色。 8）保存文件，选择“文件”→“在浏览器中预览”→IExplore命令 对网页进行预览，最终的效果如图4-1所示。  2 、 案例 制作公司简介页面 案例的制作思路：①在网页中插入文本与图像，设置为不同的字体、大小，使其看起来协调；②为右侧单元格“友情链接”栏的“鸿运公司”文本创建超级链接，将hongyun.htm网页文档作为其目标文档；③为右侧单元格中的图片创建热点链接，将shanghai.htm网页文档作为其链接文档。 高等职业教育“十二五”规划教材 效果图4-24  （1） 在网页中使用图像 图像和文字是网页中最重要的两种元素。 1）图像格式 PNG图像格式 GIF图像格式 JPG/JPEG图像 TIFF图像 2） 插入图像 确定插入点→单击“插入”菜单→选择“图像”选项。 确定插入点→单击“插入”工具栏的“常用”选项卡→单击“图像”按钮 。 直接将“图像”按钮 拖到要插入图像的位置上。 高等职业教育“十二五”规划教材  高等职业教育“十二五”规划教材 图4-25 “选择图像源文件”对话框 图4-26 将图像放入站点文件夹提示  3） 设置图像属性及编辑图像 图像的属性面板 高等职业教育“十二五”规划教材 图4-27 图像的属性面板 图像与文字对齐 用户使用图像的属性面板可以设置图像相对于同一段落或行中其他元素的对齐元素的对齐方式。例如，用户可以将图像