第2章 网页元素的添加2 图像的插入和设置　课件

学习目标 掌握各种网页元素添加的方法 学会进行页面属性的设定 学会进行简单的页面布局 2.1 第2章 网页元素的添加 2.2.1 案例制作：网页“考拉” 2.2 图像的插入和设置 最终效果如图所示。 2.1 第2章 网页元素的添加 2.2.1 案例制作：网页“考拉” 2.2 图像的插入和设置 1） 新建文件夹kaola，在该文件夹中新建子文件夹image，将素材图片拷贝到image文件夹中。在Dreamweaver CC中，单击菜单命令“站点” →“新建站点”，打开“站点设置对象”对话框进行站点定义，设站点名称为“考拉”，站点文件夹定义为文件夹kaola。 2.1 第2章 网页元素的添加 2.2.1 案例制作：网页“考拉” 2.2 图像的插入和设置 2）新建网页，保存为kaola.html，设网页的标题为“考拉”。在属性面板中单击“页面属性”按钮，打开“页面属性”对话框，在外观（CSS）选项下设文字大小为13，文字颜色为黑色，“背景颜色”为#F2F9FD，单击“确定”按钮，于是为网页添加了背景颜色，同时为整个网页设置了默认的文字属性。 2.1 第2章 网页元素的添加 2.2.1 案例制作：网页“考拉” 2.2 图像的插入和设置 3）输入文本“考拉”，按回车键另起一段。 4）打开image文件夹中的“考拉资料文字.doc”，将所有文字复制粘贴到网页中，形成网页中的文字。 5）根据如图所示的样式，依次按Shift+回车键进行换行排列文字。 2.1 第2章 网页元素的添加 2.2.1 案例制作：网页“考拉” 2.2 图像的插入和设置 6）在文档窗口选中第1段标题文字，在文字CSS属性面板设字体为黑体，字号为20，对齐方式为“居中对齐”。 7）将光标移到第2段文字开始位置，单击菜单命令“插入”→“图像”→“图像”，在打开的“选择图像源文件”对话框中找到image/kaola.jpg，单击“确定”按钮 2.1 第2章 网页元素的添加 2.2.1 案例制作：网页“考拉” 2.2 图像的插入和设置 7）在文档窗口中选中图像，右键单击图像，在弹出菜单中选择“对齐”→“左对齐”命令。按住Shift键的同时，鼠标拖拽图像边缘的控制柄调整图像大小，使得图像与右侧文字的布局效果如图所示。 2.1 第2章 网页元素的添加 2.2.1 案例制作：网页“考拉” 2.2 图像的插入和设置 此时会发现图片与右侧的文字连接在一起，视觉上不好看，需要留出一点缝隙一点。分别将光标移到图片右侧每一行文字开始的位置，按住Ctrl+Shift+空格键添加2次空格。 8）将光标移到最后一段文字开始的位置，按住Ctrl+Shift+空格键添加空格，使其首行缩进2个字。 2.1 第2章 网页元素的添加 2.2.2 新知解析 2.2 图像的插入和设置 1. 常见的图像类型和格式 目前已知的图像格式有几十种，但能在浏览器中显示的图像有GIF、JPEG和PNG三种，而最常用的是GIF和JPEG两种。 （1）GIF格式 GIF格式图像最多支持256种颜色，由于使用颜色少，压缩率高，因此文件的尺寸较小。利用GIF格式可以制作出背景透明的文字和图片，并可制作成GIF动画。但GIF格式不适合有光晕、渐变色彩等颜色细腻的图像和图片。 （2）JPEG格式 JPEG格式的扩展名为“jpg”,最多可以支持16.8M种颜色，一些细腻、讲求色彩浓淡的照片常采用JPEG格式。JPEG既允许选择高质量的无损压缩，也允许低质量、丢失图像信息的有损压缩。 2.1 第2章 网页元素的添加 2.2.2 新知解析 2.2 图像的插入和设置 2. 插入图像 在插入图像前，应将图像与网页文件保存到同一站点文件夹中。 在网页中插入图像的方法是将光标移到要插入图片的地方，选择菜单命令“插入”→“图像”→“图像”，打开“选择图像源文件”对话框，选中需要插入的图像文件，单击“确定”按钮，则在文档窗口中插入该图像。 3. 图像的属性面板 在网页中用鼠标单击图像，则图像处于选中状态，四周出现控制柄，拖动控制柄可调整图像大小，同时属性面板显示出与图像有关的属性设置。 2.1 第2章 网页元素的添加 2.2.2 新知解析 2.2 图像的插入和设置 3. 图像的属性面板 宽和高：指在浏览器中为图像保留的宽度和高度，默认单位为像素。 Scr：指定图像的路径，可以通过单击右侧的 按钮来选定图像。 链接：指定图像的超链接。 编辑：在该选项右侧提供了多个编辑按钮，单击相应按钮，可以对图像进行相应的编辑操作。 编辑按钮 ：单击该按钮可以打开指定的图形图像处理软件对图像进行编辑。可以单击菜单命令“编辑”→“首选参数”，在弹出的对话框的“文件类型/编辑