1、第2章 列表、图像及超链接,2.1 列表 2.2 图像 2.3 超链接 2.4 用Dreamweaver MX制作网页,2.1 列表,2.1.1 有序列表标签,在HTML中有三种列表标签：有序列表带有序号的列表 无序列表带加重符的列表 词汇列表表项前不带任何符号的列表有序列表(双标签)是一种带有序号的列表，序号可以是数字、 英文字母或罗马数字。 有序列表标签格式： 表头内容 表项1内容 表项n内容 ,其中： type 属性定义列表的序号类型，有5个值：1 默认值，表示用数字表示序号 a 表示用小写英文字母表示序号A 表示用大写英文字母表示序号 i 表示用小写罗马数字表示序号I 表示用大写罗马数
2、字来表示序号 是表头标签，该项没有序号；是表项标签，将按照自然顺序依次被加上序号,2.1.1 有序列表标签,【例2-1】有序列表标签示例。,网页设计小组成员 王一，计算机09-1班 赵二，网络09-1班张三，计算机09-2班机器人设计小组成员 宋晓，网络09-1班 吴平，网络09-2班李三，计算机09-2班,标签的start属性 定义列表序号的开始值 例. 将使列表的序号从0开始,2.1.2 无序列表标签,无序列表是带加重符的列表。格式如下：, 表头内容 表项1内容 表项n内容 【例2-2】无序列表标签示例。,type 属性定义列表的加重符，取值如下： disc 加重符为实心圆点“”(默认值
3、)circle加重符为空心圆点“”square 加重符为实心小方块“” 是表头标签，该项没有加重符是表项标签,网页设计小组成员 王一，计算机09-1班 赵二，网络09-1班张三，计算机09-2班机器人设计小组成员 宋晓，网络09-1班 吴平，网络09-2班李三，计算机09-2班,2.1.3 词汇列表标签,词汇列表也叫定义列表，功能是以列表形式表示被定义的单词或语句，具有行交互凹进表示特征。格式如下：, 定义单词1 单词1的解释 定义单词n 单词1的解释 【例2-3】词汇列表标签示例。,说明：一般地，标签用于定义单词(项名)，标签用于定义解释项目的语句；标签自动换行并左对齐；标签换行、不带记号、
4、并缩进左对齐。,列表列表是常用的信息表达形式，它有一个表头和多个并列的表项构成。 列表类型表项的前面可以有序号或加重符号，也可以无序号。带序号的列表称为有序列表。 带加重符的列表称为无序列表。表项前不加任何符号的列表称为定义列表。列表组合上述3种列表形式可以有机地组合、嵌套，构成多样格式的效果。,2.1.4 列表组合,【例2-4】列表标签组合示例。,第1章 HTML基础HTML是英文Hyper Text Markup Language的缩写，意为超文本标记语言，是一种用来编写超文本文档的简单标记语言。本章主要内容：1.1 HTML 概述 HTML的功能创建网页1.2 页面颜色控制<body
5、>标签的属性设置页面的背景色和前景色第2章 列表、图像、超链接列表是,2.1.5 习题,1. 回答下列问题： 有序列表、无序列表和词汇列表之间可以互相嵌套吗?一个无序列表中的表项加重符可以不一样吗?2. 使用有序列表和无序列表的嵌套实现如下图所示页面。,2.2 图像,2.2.1 图像标签,使用图像标签可以在网页内插入图像，该标签可以放在除以外的任何块或内联标签中。标签格式：说明： (1) src属性指明所要链接的图像文件，包括图像的地址，该地址可以是本机上的，也可以是网络上其它主机上的，图像文件格式通常为 GIF、JPEG 或 PNG。 (2) width、height属性指定图像的宽度与
6、高度，可用象素数或百分比表示。 不设置width、height属性的值时，按原图大小显示；使用象素指定时，图像会根据指定的大小缩放；使用百分比时，图像是占窗口的比例，当窗口大小改变时，图像会自动放大或缩小。 (3) alt属性有两个作用： a.如果浏览器无法访问图像文件，则显示alt指定的说明文字 b.如果浏览器下载完了图像，则鼠标放在该图像上时在鼠标旁就出现alt指定的说明文字。,2.2.1 图像标签,【例2-5】插入图像示例。,src=“cs.gif”中没有指明cs.gif的地址，是因为图文件与文档在一起。如果不在同一目录下就应该指明地址。如图文件在D盘根目录下，则应：src=“D:cs.
7、gif“,窗口变窄后效果：,2.2.2 图像与文本的对齐,如果图像周围要放置文字，可以通过设置标签的align属性控制图像与周围文字的对齐方式。align属性的取值： 默认值图片与当前行文字底边对齐(按自然位置，一行放不下时转移到下一行)；top 图片的顶部和当前行文字对齐；middle 图片的中部和当前行文字对齐； bottom 图片的底部和当前行文字对齐； left 图片左对齐； right 图片右对齐。 【例2-6】图像与文本对齐示例1。,align取默认值！是默认对齐方式！ 现在align=left！ 现在align=right！ ,【例2-7】图像与文本对齐示例2。,现在align=
8、top！图片的顶部和当前行文字对齐！现在align=middle！图片的中部和当前行文字对齐！现在align= bottom！ 图片的底部和当前行文字对齐！ ,2.2.3 设置图像周围空间,如果想让图像加上边框，或者要与周围的文字空开一些，可以通过设置标签的border和hspase、vspase 属性实现。 属性意义： border：设置图片的边框的厚度； hspace：设置图片与周围对象之间的水平空隙(即左右间隙) vspace：设置图片与周围对象之间的垂直空隙(即上下间隙) 三个属性的值均以像素为单位。 【例2-7】设置图像周围空间示例。,原图像无边框，现加了边框，厚度2，图像底部和文字
9、对齐。图像周围设置了空隙，左右空隙大小为30，上下空隙大小 为3，图像顶部与文字对齐。,2.2.4 习题,1. 回答下列问题：图像标签如何拼写？它有哪些重要属性？图像标签的width、height属性有什么作用？不设置这两个属性时图形如何显示？图像标签的alt属性有什么作用?要使图像与周围文字对齐，如何实现？图像标签的border和hspase、vspase属性分别有什么作用？2. 设计一个网页用于显示一幅图，要求不管窗口如何变化，图总是占满整个窗口。 3.设计一个网页，其中并排放置两幅同样的图。浏览时图的大小随窗口大小改变，但第2幅图占据窗口的三分之二的面积，并且宽高总是第1幅图宽高的2倍。
10、 4. 设计如图所示页面：,2.3 超链接,2.3.1 关于超链接,超链接（超级链接）就是用户单击热点时，就从当前页面转到其他页面或链接到其他Internet服务，也可以翻转到本页的另一个位置，是HTML文档的最重要的应用。实现一个超链接需要提供: 1）一个定位点； 2）要链接的文件及其完整地址或URL。定位点也称为热点或点击点，就是网页上供用户单击的超链接点，单击后就跳转到一个新的位置。常用的定位点形式有文本定位点。 就是以一段文字作为热点，形式上往往是带下划线并以蓝色显示；图形定位点。 就是用一个小图形作为热点，在它周围可能会显示一个边界；图片定位点。就是以一幅图像作为热点。,超链接由超链
11、接标签对 、 实现。标签基本格式： 定位点 说明： 1）属性 href 告诉浏览器超链接所要链接的文件及其位置。 2） 的另一个属性 target=“窗口名”，表示用指定的窗口显示页面，默认是以新窗口显示页面。,2.3.2 链接到本机的其他页面,链接到其他页面，就是单击此超级链接后打开一个新的HTML文档，由href属性指定要链接的地址。若要链接的文件在本机上，就称链接到本机的其他页面，称为本地链接。,下面的示例 Cha2-8.htm 演示了本地链接的情形，其中的3个文档的本例文档(Cha2-8.htm)的目录U盘:网页设计第2章; 路径分别为： Cha2-7.htm文档的目录U盘:网页设计第
12、2章,与本例在同一文件夹中； Cha1-1.htm文档的目录U盘:网页设计第1章,与本例文档的上一级目录相同。 【例2-8】链接到本机其他页面示例。,book！第1个Web页面,2.3.3 链接到其他主机的页面,【例2-9】设计一个网页，其中有链接到搜狐网和新浪网的超链接，要求链接到新浪网的热点用图片。,搜狐网,打开实际页面演示超链接效果！,使用图片作为定位点，就是把标签放到与之间 。,2.3.4 链接到本页面,当一个页面过长时，用户需要拖动滚动条来查看网页中的内容，不太方便。此时可以使用锚点链接，就是链接到本页面的方法，让用户单击热点就能跳转到需要的地方。锚点链接必须首先定义链接位置的标识(
13、锚名)，即对目标点做上标记。创建锚名称为锚记，标签的name属性就是用于锚记的，其格式如下：目标段落name属性的值“namevalue”(锚名)必须是当前网页中唯一的,对有锚名的段落就可以使用锚点链接，其格式如下：目标段主题符号“#”告诉浏览器当前要链接的是文档中的一个锚记点href=“#namevalue” 指示链接到锚记点“namevalue”之处,由于HTML的任何标签都具有“id”属性，而且id属性的值要求是当前网页中是唯一的。因此，id属性值不需要锚记就可直接作为锚名的，非常方便！,【例2-10】锚点链接示例。,网页设计 HTML是英文Hyper Text Markup Langu
14、age的缩写，是用来编写超文 本文档的简单标记语言。 第1章 第2章 第1章 HTML基础 本章主要内容：1.1 HTML 概述 1. HTML的功能2. 创建网页1.2 页面颜色控制1. body>标签的属性2. 设置页面的背景色和前景色返回页首 第2章 列表、图像、超链接 本章主要内容： 返回页首 ,2.3.5 链接e-mail,在网站上经常会看到“联系我们”，点击该处就可以给网站发送电子邮件，这就是电子邮件链接。如果希望建立电子邮件链接，只要让href属性取值为“mailto:邮箱地址”即可。,【例2-11】链接e-mail示例。,城市风景第1个Web页面 给我发电子邮件 ,2.3.
15、6 链接其它资源,超链接也可以链接到其它资源或Internet服务，这里举例说明链接多媒体的方法。,【例2-12】链接多媒体。,歌曲 图像 视频 ,在网页中可以直接打开的多媒体文档的格式是： 声音： MIDI、WAV、AU 图像： GIF、JPEG、PNG 视频： MOV、MPG、AVI,2.3.7 习题,1. 阅读本小节，回答下列问题： 什么是超链接？ 什么是定位点？常用的定位点形式有哪几种？ 绝对链接的URL中包含了哪些信息？ 要链接到其他主机的页面时可以使用相对链接吗？ 锚记是做什么工作？锚记时需要使用的什么属性？ 2. 设计一个网页，利用图像作定位点链接到新浪网、中国教育和科研计算机网
16、(网址：http:/ 和中国矿业大学网站(网址：http:/ 用Dreamweaver MX制作网页,Macromedia Dreamweaver MX是一种专业的用于Web网页、站点开发的工具。它支持开发者可视化编辑，也支持开发者手工编写HTML代码，它具备如下特点： （1）简洁的工作环境。 （2）全面支持CSS和DHTML、遵循HTML4.0规范。 （3）支持资源库和行为。 （4）网站管理维护功能。 （5）开放的插件环境。,Dreamweaver MX 2004窗口主界面：,2.4.1 Dreamweaver MX简介,2.4.2 用 Dreamweaver 创建网页步骤,1启动Dreamweaver MX 2004单击【开始】菜单，选择【所有程序】【Macromedia】，再单击【Macromedia Dreamweaver MX 2004】，进入Dreamweaver MX 操作窗口，界面如下图所示。,2创建一个新页面单击“创建新项目”菜单中的第1项“HTML”，即出现如下图所示界面，即创建了一个新文档(新页面)。(或用菜单中的命令建),3编辑文档、设计页面、保存文档及预览网页,2.4.2 制作实例,实例1. 文本、图像、超链接制作演示。,实例2. 表格、表单制作演示。,
