第4章编辑网页.ppt

第4章 编辑网页 4.1网页的布局 4.1网页的布局 4.1.1网页的风格 4.1.1网页的风格 4.1.1网页的风格 4.1.1网页的风格 4.1.2网页布局实例 4.1.2网页布局实例 4.1.2网页布局实例 4.1.2网页布局实例 4.1.2网页布局实例 4.1.2网页布局实例 4.1.2网页布局实例 4.1.3网页布局注意事项 4.1.4画出网页布局草图 4.2使用表格 4.2.1插入表格 4.2.2插入、删除表格的行与列 4.2.2插入、删除表格的行与列 4.2.2插入、删除表格的行与列 4.2.3合并与拆分单元格 4.2.3合并与拆分单元格 4.2.4表格的嵌套 4.2.5使用“表格属性”对话框 4.3布局视图 4.3.1布局视图工具栏 4.3布局视图 4.3.1布局视图工具栏 4.3.2使用布局视图规划网页布局 4.3.2使用布局视图规划网页布局 4.3.2使用布局视图规划网页布局 4.3.2使用布局视图规划网页布局 4.3.2使用布局视图规划网页布局 4.4　设置文字 4.4.1　字体与字号 4.4.1　字体与字号 4.4.2文字的对齐方式 4.4.2文字的对齐方式 4.4.3文字的风格与颜色 4.5美化网页 4.5.1插入图片 4.5美化网页 4.5.1插入图片 4.5.1插入图片 4.5.1插入图片 4.5.1插入图片 4.5.1插入图片 4.5.1插入图片 4.5.2设置图片 4.5.3添加网页背景 4.6创建并使用布局模板 4.6.1创建布局模板 4.6.1创建布局模板 4.6.1创建布局模板 4.6.1创建布局模板 4.6.1创建布局模板 4.6.2使用网页布局模板 4.6.2使用网页布局模板 4.6.2使用网页布局模板 4.6.2使用网页布局模板 4.6.2使用网页布局模板 4.7整齐段落 4.7.1段落缩进 4.7.1段落缩进 4.7.1段落缩进 4.7.1段落缩进 4.7.1段落缩进 4.7.2段落间距 4.7.2段落间距 4.7.3插入水平线 4.7.3插入水平线 4.7.3插入水平线 小结 ⑴选中整个表格，如上图所示，将属性面板中的“填充”值更改为10，这样各个单元格间的距离更改为10像素；将“间距”值更改为10，这样表格中的文字与表格框线的距离变成10像素。更改后结果如下图所示。 ⑵将鼠标指针移动到表格最下端的单元格中，拖动鼠标指针选中表格中的所有文字，在属性面板中单击“文本缩进”按钮， 将文字移动到表格中央。 选中“必威体育精装版动态”几个字，在属性面板中单击 按钮，打开颜色板，选择褐色，将文字设为褐色，如左图所示；单击 按钮，将文字设为加粗。用同样的方法将“产品动态”、“产品下载”、“留言簿”、“与我联系”等设置成褐色、加粗。结果如右图所示。 1、图片格式 因特网上应用最广泛的图片格式有两种：GIF文件和JPEG文件。 GIF（Grappler Interchange Format ）图片文件是第一种被WWW所支持的图形文件。它采用LZW压缩算法，存储格式从1位到8位，最多支持256种颜色。GIF文件相对体积较小，多数用于图标，按钮，滚动条和背景等等。 JPEG或JPG称为联合图片专家组（Joint Photograph Expert Group）格式，它主要应用于摄影图片的存储和显示，是一种静态影像压缩标准。 GIF文件一般都比较小巧 JPG文件一般色彩比较饱满、鲜艳 GIF文件与JPEG文件的对比 颜色有限，主要以漫画图案或线条为主。一般表现建筑结构图或手绘图。 颜色丰富，有连续的色调，一般表现真实的事物 适合情景 无损压缩 有损压缩 压缩是否有损失 透明背景、动画 无 特殊功能 16色、256色 真彩色 色彩 GIF JPG/JPEG 对比项目 2、插入图片的方法 ⑴在Dreamweaver中打开网页“index.htm”，在左上角单元格中单击鼠标，光标显示在该单元格中。单击对象面板上的 按钮，弹出“选择图像源”对话框， 单击查找范围右边的 按钮，在下拉菜单中，选择C盘，如下图所示。 ⑵在C盘中双击文件夹“网页素材”，将它打开，接着在文件夹“网页素材”中双击文件夹“images” ，如下图所示。 ⑶在文件夹“images”中选择文件“title”，在对话框右边显示的是图片的预览图像，通过预览可以知道图片的内容。单击“确认”，将图片插入网页，如下图所示。 ⑷由于图片在C 盘的“网页素材”文件夹中，在网站以外，所以，Dreamweaver弹出一个对话框，如右图所示，提示是否将图片保存到网