第3章 图像、热点、CSS样式定义与应用.pptVIP

第三章 图像、热点、CSS样式定义与应用 回顾 HTML页面的文字布局 HTML页面的各种字体效果及滚动字符 课程目标 在HTML页中插入图像 设置图像热点 CSS样式定义及应用 通过本章的学习，可以使学生能够制作多彩的HTML页面。并且可以通过定义CSS样式表获得更多的页面效果 本章知识点 图像与热点类从哪里来？ CSS样式的定义与应用 图像与热点 插入图像 热点 插入图像 制作页面时，常需要在页面上添加一些图片，使我们的页面更加生动。HTML提供了img标记来处理图像输出 1．在网页中插入图像 HTML采用的图像格式有gif、jpg、png 3种 在网页中插入图像时，必须使用HTML的img标记 格式为：img src=图形文件地址 Body img src=chongzi.gif /Body 2．设置图像布局 “width=# 、height=# ”属性。此属性用来设定图片大小，此宽度及高度一般采用像素作单位 Body img src=chongzi.gif width=200 height=200 /Body 图片边框厚度 “border=# ” 属性用来设定图片边框厚度 Body img src=chongzi.gif border=5 /Body align=# 属性 此属性用来调整图片旁边文字的位置，你可以控制文字出现在图片的偏上方、中间、底部、 左右等，可选值：top, middle, bottom, left, right，内定为bottom Body img src=sushi.jpg align=left width=100 height=150 hspace=20 h3 align=center定风波-苏轼/h3 p 莫听穿林打叶声，何妨吟啸且徐行。竹杖芒鞋轻胜马，谁怕？一蓑烟雨任平生。料峭春风吹酒醒，微冷，山头斜照却相迎。回首向来萧瑟处，归去，也无风雨也无晴。 /p /Body alt=属性 此属性是用以描述该图形的文字，若用户使用文字浏览器，由于不支持图片，这些文字会代替图片而被显示。若在支持图片显示的浏览器，当鼠标移至图片上该些文字亦会显示 Body img src=chongzi.gif alt=这是一张小虫子的照片 /Body 热点 area标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点），这样当用户的鼠标移到指定的作用区域点击时，会自动链接到预先设定好的页面 其基本语法结构如下： area class=type id＝Value href＝url alt＝text shape＝area-shape coods＝value CSS样式的定义与应用 3.2.1认识CSS 3.2.2如何在HTML中应用CSS 3.2.3 CSS的基本语法 3.2.4字体属性 3.2.5颜色和背景属性 3.2.6定义文本间距 3.2.7装饰超链接 认识CSS CSS就是Cascading Style Sheets，中文翻译为“层叠样式表”，简称样式表，它是一种制作网页的新技术 如何在HTML中应用CSS 我们可以利用下列3种方式将CSS指定的格式加入到HTML中： 1．外部连结 CSS ：在HTML文件里加一个超级链接，连接到外 部的CSS文档。 2．内定义CSS，在HTML文件内的HEAD......./HEAD标签 之间，加一段CSS的描述内容。 3．文本间CSS:在 HTML 文件的文本内容中,随时有需要，随时 加一小段 CSS 的描述指定风格。 外部连结 CSS 在HTML文件里加一个超级链接，连接到外部的CSS文档。 方便管理整个网站的网页风格，让网页的文字内容与版面设计分开 HTML HEAD TITLE外部连结 CSS /TITLE LINK REL=stylesheet HREF=style.css TYPE=text/css /HEAD /HTML 使用外部的CSS BODY h1 class=”H1” 卜算子.咏梅 /h1 p class=”P” 驿外断桥边，寂寞开无主。 已是黄昏独自愁，更著风和雨。 无意苦争春，一任群芳妒。 零落成泥碾作尘，只有香如故。 /p /BODY 内定义CSS 在HTML文件内的HEAD......./HEAD标签之间，加一段CSS的描述内容 这个方法适用于指定某个网页，除了表现外部的 CSS 文档定义好的网页风格外，同时还要表现本身HTML文档内指定的CSS 使用内部CSS HTML HEAD TITLE 内定义CSS /TITLE STYLE TYPE=text/css[l1] !-- H