HTML+JAVASCRIPT+CSS 02第二章.pptxVIP

主编：徐照兴、谭鸿健、郑宁健HTML+CSS+JavaScript网页制作三合一案例教程HTML+CSS+JavaScript网页制作三合一案例教程第二章 HTML标签与CSS样式基础 目录页Contents Page12 制作鲜花导购网页的结构——HTML标签 修饰鲜花导购网页——CSS样式基础案例一 制作鲜花导购网页的结构——HTML标签案例说明现在的网页主要由结构、表现和行为3部分组成，其中结构是指网页的内容部分，主要通过HTML语言实现，我们可以直接编写HTML代码或在Dreamweaver中进行可视化设计，来制作网页的结构部分。HTML语言的核心是标签。也就是说，我们在浏览网页时看到的文字、图像、动画等在HTML语言中都是用标签来描述的。本案例中，我们将通过制作图2-1所示的鲜花导购网页的效果（网页结构部分），来学习插入网页元素的方法及各HTML标签的使用。案例一 制作鲜花导购网页的结构——HTML标签案例步骤下面，我们就来制作鲜花导购网页的结构部分，主要包括输入文本、设置段落、设置标题、设置超链接、插入水平线、设置列表和插入图片等操作。要注意的是，这些效果大部分可通过两种方式实现，一种是在Dreamweaver的设计视图中进行可视化操作，Dreamweaver会自动将设置的网页结构“翻译”为HTML代码；一种是直接在Dreamweaver的代码视图中编写HTML代码。这里我们主要在Dreamweaver的设计视图中进行操作，然后在代码视图中学习相关的HTML代码。图2-12 网页结构层的完整代码一、HTML标题、水平线、段落和换行1．HTML标题标题的作用是让用户快速了解文档的结构与大致信息，它是通过h1 ~ h6等标签对进行定义的。h1标签对定义最大的一号标题；h6标签对定义最小的六号标题。当为文字添加标题标签后，它会独立成一行显示。例如：2．HTML水平线水平线主要是用来分隔网页中的内容。水平线标签hr/是一个单标签，其作用是在HTML页面中创建水平线。例如：3．HTML段落HTML段落是通过p/p标签对进行定义的。例如：3．HTML段落HTML段落是通过p/p标签对进行定义的。例如：4．HTML换行要在不产生一个新段落的情况下进行换行，需使用br /标签。例如：二、HTML列表1．无序列表无序列表就是列表结构中的列表项没有先后顺序的列表形式。大部分网页中的列表均采用无序列表，使用ul/ul标签对定义，包含的列表项使用li/li标签对定义。列表项的默认符号为小圆点●，要改变符号类型或去除符号，可使用CSS属性进行控制。例如：2．有序列表有序列表在列表项前都有编号，因此，浏览者可以清晰地了解每项的顺序。其中ol/ol标签对用来定义有序列表，包含的列表项用li/li标签对定义，默认序号为1、2、3。例如：3．定义列表定义列表是项目及其注释的组合。其中dl/dl标签对表示定义列表；dt/dt标签对表示每个定义的名称（项目名）；dd/dd标签对表示每个定义名称的详细内容（注释）。例如：三、HTML图像1．认识网页中的图像图像可以使网页更加生动、美观，常见的网页图像格式有“.gif”和“.jpg”两种：.gif格式最多只能包含256种颜色，因而适合表现色调不连续或具有大面积单一颜色的图像，如卡通画、按钮、图标和徽标等。.jpg格式适于表现色彩丰富，具有连续色调的图像，如各种照片。2．HTML图像标签HTML图像分为两类，插入图像和背景图像。插入图像作为HTML实体标签存在；而背景图像则是CSS的修饰内容。背景图像将放在CSS中讲解。HTML插入图像是通过img/标签进行定义的。它是一个单标签。由图像标签img/和其属性构成。其中src属性用来表示图片的源地址，是必不可少的。例如：3．图像路径1）绝对路径绝对路径是书写完整的路径，系统按照整个路径查找文件。绝对路径中的盘符后面用:\或:/分隔，各目录名之间以及目录名与文件名之间用\或/分隔。绝对路径可分为如下两类：文件在电脑中的物理路径。文件为发布在Internet上的文件时，需要该文件的网络路径，即网址。绝对路径示例含义img src=/img/flower.jpg/图片在域名为的服务器中的img目录里img src=E:/my web/image/flower.jpg/图片在E盘my web目录下的image子目录里3．图像路径2）相对路径相对路径是以当前文档所在的路径和子目录为起始目录，进行相对于文档的查找。制作网页时通常采用相对路径，这样可以避免站点中的文件整体移动后，产生找不到图片或其他文件等的现象。相对路径的写法及含义如表2-3所示。HTML文档位置图像位置和名称相对路径描述d:\demod:\demo\tad.gifimg src=tad.gi