第2章节网页设计基本”.pptVIP

第2章 网页设计基础 本章要点 2.1 招生简章 2.2 院校简介 2.3 “学生咨询”导航 2.4 滚动通知 2.5 综合案例 习题2 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.1 招生简章 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.2 院校简介 2.3 “学生咨询”导航 2.3 “学生咨询”导航 2.3 “学生咨询”导航 2.3 “学生咨询”导航 2.3 “学生咨询”导航 2.3 “学生咨询”导航 2.4 滚动通知 2.4 滚动通知 2.4 滚动通知 2.4 滚动通知 2.4.2 案例实现（见书） 　2.4.2 知识拓展 1. 滚动字幕标签 marquee 　　滚动字幕也称为滚动看板，滚动字幕的使用使得整个网页更有动感，显得很有生气。现在的网站中也越来越多地使用滚动字幕来加强网页的动感。marquee滚动字幕标签能够较好地实现滚动字幕内容。该标签语法格式如下： （见书） 下面解释一下各属性参数的含义。 （见书） 2．默认字幕滚动方式 　　marquee标记的默认情况是向左滚动无限次，字幕高度是文本高度，水平滚动的宽度是当前位置的宽度，垂直滚动的高度是当前位置的高度。 3. 设置滚动的方向 　　字幕的垂直滚动与水平滚动由属性diriction决定，垂直滚动字幕只要加上diriction=“up”（从下向上滚动）或diriction=“down”（从上向下滚动）就行了，而水平滚动则可以设置diriction属性为left（从右向左滚动）或right（从左向右滚动）。 4. 设置滚动的速度 　　scrollamount属性和scrolldelay属性可用于设定滚动字幕速度。scrolldelay属性用于设定两次滚动之间的延迟时间，scrollamount属性指定滚动的距离。为了使滚动看上去更平滑，通常都将scrollamount设得较小一些。 5. 多行文本的滚动字幕 　　多行文本的滚动字幕，分行时可以用br标签或p标签分开。 6. 图象的滚动 　　除了文字内容外，marquee还允许在其中加入图象。例如：（见书） 　　上面的网页在IE中浏览效果如图2-23所示。 图2-23 滚动图像 　　最后还有一点需要注意，marquee标签是微软对 HTML的扩展，因此，通常只能在IE浏览器中显示出滚动效果，在其它浏览器中可能无效。不过当前使用IE进行浏览的用户占到大多数，所以，使用marquee标签还是利大于敝。 * * 2.1.1 案例效果 图2-1 招生简章 2.1.2 案例实现（见书） 2.1.3知识拓展 HTML网页设计的基本概念 2. HTML文件结构 HTML的文件结构相当简单，其主体结构主要由以下 图2-2 标题格式 3. 标题格式 　　HTML中，标题格式由标签h1到h6定义。h1定义了最大的标题元素，h6定义了最小的。此外，在显示时，每行标题后还会自动添加一行空白。例如：（见书） 4. 文字布局 　　HTML中，与文字布局相关的标签有段落p、换行br、预格式化pre、水平线hr和对齐方式等等。 （1）段落与换行（见书） 图2-3 失败的段落排版 图2-4 正确的段落排版 图2-5 预格式化排版 （2）预格式化 图2-6 对齐方式 （3）对齐方式 （4）水平线 图2-7 水平线 5. 字体格式 　　字体格式是排版中的重要内容，HTML中定义了多种标签来对文字字体格式进行控制。 6. 字符实体 上面的网页在浏览器中显示效果如图2-8所示。 图2-8 字体样式 2.2.1 案例效果 图2-9 院校简介 2.2.2 案例实现 （见书） 2.2.3 知识拓展 网页中的图像 2. 网页中的表格 　　表格是网页设计中最常用的对象之一，几乎没有哪个网页中不用到表格。表格主要有两方面的用途：一是用于网页中普通表格的绘制，以便于在表格中显示数据、信息等；另一个用途则是用于网页的页面布局，用表格来控制网页中各个对象的位置。 图2-10 网页中的图像 　　下面程序是图像在网页中的示例：（见书） 图2-11 商品列表 （2）表格标题的设置 　　表格标题的位置，可由align属性来设置，其取值