DIV+CSS网页制作实战第11次课(2课时)文本-图片-超链接.pptxVIP

课次 11 课时 2 教具 投影仪 项目 项目2 HTML网页文档的编辑 任务 任务2.3 HTML文档及常用标签（二） 知识点 1. 插入文本（25分钟） 2. 插入图片（20分钟） 3. 插入超级链接（45分钟） 重点 插入超级链接 难点 无 备注 上机操作90分钟 / 13 1 / 13 2 知识技能目标 插入文本 插入图片 插入超级链接 / 13 任务2.3 HTML文档及常用标签 2.3.5 插入文本 文本是页面的主要内容之一，过去经常将文本放在p标记中，利用相关属性控制文本的外观，而现在常将文本放入div或span容器中，利用设置div或span样式的方法控制文本的显示外观，包括字体、字号、颜色、对齐方式等。例如： span id=content这是一段HTML文本/span   有关文本的外观控制参见项目三的CSS的文字效果。 3 / 13 4 2.3.6 插入图片 图像也是页面的重要元素，具有直观、生动的特点，灵活地使用图像可以表达一些文字所无法表达的东西，使网页更加丰富多彩，图片还可以用来创建图像链接。 1. 图像格式 （1）JPG/JPEG文件格式 JPEG是Joint Photographic Experts Group（联合图像专家组）的简称，用于处理有连续色调的图像或图片，特点如下： 使用有损的压缩方案。 支持1670万种颜色。 JPEG压缩后，图像的鲜明的边缘周围会损失一些细节，不适用包含鲜明对比或者包含大量文本的图像。 / 13 5 （2）GIF图像文件格式 GIF（CompuServe Graphical Interchange Format）适合显示色调不连续变化或具有大面积单一颜色块的图像，这些图像一般用作插图、按钮、图标、徽标等。GIF图像具有下列特性： 使用无损压缩方案，图像在压缩以后不会有细节的损失。 最多可以显示256种颜色。 支持透明的背景，从而可以创建带有透明区域的图像。 使用交织文件格式，在浏览器完成下载全部图像之前，用户可以通过隔行扫描显示出图像。 受到几乎所有浏览器良好的支持，不必担心兼容性问题。 可将数张图片存储在一个动画文件中，即GIF（多帧）动画。 / 13 6 （3）PNG文件格式 PNG（Portable Network Graphic）格式是专门为网络准备的。它结合了其他图像格式的优点，像GIF一样无损压缩，像JPEG一样拥有百万种颜色。而且，PNG具有的隔行扫描的特性比其他格式都要快，同时它还提供对它包括的索引色、灰度、真彩色图像以及alpha通道透明的支持。 PNG格式是Fireworks的默认格式，其中具有可编辑的Web页属性。PNG应用日益广泛，极有可能在未来逐渐取代GIF的位置。 / 13 7 2．图像标签img 插入图像的格式如下： img src=图像文件名 width=图像宽度 height=图像高度 /   宽度和高度属性单位既可以使用像素（px），也可以使用所占容器的比例（%）。如果不设宽度和高度属性，图像会按原始尺寸显示。 / 13 8 2.3.7 插入超链接 超级链接是网页的灵魂，通过链接，能够将页面中众多媒体的信息串联起来，使访问者能够方便地在各个页面之间跳转浏览，还能够使不同站点之间建立联系。超级链接的标签为a，一般格式如下： a href=跳转目标 target=_blank链接源/a 其中链接源可以是页面中的各类显示元素，当在浏览器中用鼠标单击这些链接源对象时，浏览器就转到本地或远程的目标资源或者转到当前页面的其他位置。根据跳转目标的不同超级链接可以分为以下几种类型： / 13 9 1. 内部链接 网站内部各个页面之间的跳转。链接格式为 a href=目标页面 target=显示窗口链接源/a 除自定义的窗口名称外，“显示窗口”可有五个选项： （1）_blank：将链接的文件载入一个未命名的新浏览器窗口中。 （2）new：将创建一个名为new的窗口，所有target取值为new的链接都会在该窗口中打开。 （3）_parent：将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不 是嵌套的，则链接文件加载到整个浏览器窗口中。 （4）_self：默认。将链接文件载入该链接所在的同一框架或窗口中。 （5）_top：将链接文件载入整个浏览器窗口，会删除所有框架。 / 13 10 2. 外部链接 即站外链接，例如友情链接。与内部链接不同的是，外部链接的目标页面