新手htm第九章.docx

《新手htm第九章.docx》由会员分享，可在线阅读，更多相关《新手htm第九章.docx（18页珍藏版）》请在冰豆网上搜索。

新手htm第九章

   今天看到的丰富多彩的网页，都是因为有了图像的作用。

想一想过去，网络中全部都是纯文本的网页，非常枯燥，就知道图像在网页设计中的重要性了。

   在HTML页面中可以插入图像，网页常用的图像格式有JPEG和GIF两种。

●  JPEG格式

   JPEG（Joint Photographic Experts Group）是特别为照片图像设计的文件格式。

JPEG支持数百万种色彩。

JPEG是质量有损耗的格式，这意味着在压缩时一些图像数据被丢弃了，这降低了最终文件的质量。

然而，图像数据被抛弃得很少，不会在质量上有非常明显的不同。

●  GIF格式

   图形交换格式GIF是网页图像中很流行的格式。

虽然它仅包括256种色彩，但GIF提供了出色的、几乎没有丢失的图像压缩。

并且，GIF可以包含透明区域和多帧动画。

它靠水平扫描像素行、找到固定的颜色区域进行压缩，然后减少同一区域中的像素数量。

因此，GIF通常适用于卡通、图形、Logo、带有透明区域的图形、动画等。

   页面中插入图片可以起到美化的作用。

插入图片的标记只有一个，那就是标记。

9.2.1  插入图片标记

   插入图片的时候，仅仅使用标记是不够的，需要配合其他的属性来完成。

9.2.2  图像的源文件属性SRC

配合SRC属性指定图像源文件所在的路径，就可以完成图像的插入了。

基本语法

语法解释

通过SRC属性指定路径，File_Name为要插入图像的路径。

文件范例：

9-1.htm

通过标记的SRC属性插入图片。

-- ------------------------------------------ -->

--            文件范例：

9-1.htm             -->

--            文件说明：

插入图片           -->

-- ------------------------------------------ -->

主流的网页设计软件

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

文件说明

第11行插入了JPEG格式的图片文件。

显示结果

如图9-1所示的就是插入图片后页面的显示效果,默认情况下文字和图片处于同一行。

9.2.3  图像的提示文字属性ALT

   提示文字有两个作用。

当浏览该网页时，如果图像下载完成，鼠标放在该图旁边会出现提示文字。

也就是说，当鼠标指向图像上方的时候，稍等片刻，可以出现图像的提示性文字，这用于说明或者描述图像。

第二个作用是，如果图像没有被下载，在图像的位置上就会显示提示文字。

基本语法

语法解释

说明提示文字的内容中英文均可。

文件范例：

9-3.htm

通过标记的ALT属性设定图片的提示文字。

-- ------------------------------------------ -->

--            文件范例：

9-3.htm             -->

--       文件说明：

设定图片的提示文字       -->

-- ------------------------------------------ -->

主流的网页设计软件

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

文件说明

第11行设定了图片的提示文字。

显示结果

如图9-3所示的就是设定了图片的提示文字后，鼠标指向图片上方时页面的显示效果。

如果图片由于下载或者路径的问题无法显示，也可以在图片的位置显示定义的说明提示文字，如图9-4所示。

9.2.4  图像的宽度和高度属性WIDTH，HEIGHT

   默认情况下，页面中图像的显示大小就是图片默认的宽度和高度，我们也可以手动更改图片的大小。

但是我们建议使用专业的图像编辑软件对图像进行宽度和高度的调整。

基本语法

语法解释

   图像的宽度和高度的单位可以是像素，也可以是百分比。

如果你的显示器是800×600，那你的屏幕就相当于水平方向上有800个像素点的宽度，垂直方向上有600个像素点的宽度。

因为网页主要是通过屏幕显示，所以建议编辑者使用像素作为单位。

文件范例：

9-4.htm

通过标记的WIDTH，HEIGHT属性设定图片的大小。

-- ------------------------------------------ -->

--            文件范例：

9-4.htm             -->

--         文件说明：

设定图片的大小         -->

-- ------------------------------------------ -->

主流的网页设计软件

< IMG SRC=“9-1.jpg” WIDTH=100  HEIGHT=140>

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

文件说明

第11行设定了图片的大小为默认，第12行改变了图片的高度和宽度。

显示结果

如图9-4所示的就是改变图像大小后页面的显示效果。

9.2.5  图像的边框属性BORDER

   默认的图片是没有边框的，通过BORDER属性可以为图像添加边框线。

我们可以设置边框的宽度，但边框的颜色是不可以调整的。

当图像上没有添加链接的时候，边框的颜色为黑色；当图像上添加了链接时，边框的颜色和链接文字颜色一致，默认为深蓝色。

基本语法

语法解释

VALUE为边框线的宽度，单位为像素。

文件范例：

9-5.htm

通过标记的BORDER属性设定图片的边框。

-- ------------------------------------------ -->

--            文件范例：

9-5.htm             -->

--         文件说明：

设定图片的边框         -->

-- ------------------------------------------ -->

主流的网页设计软件

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

文件说明

第11行设定了图片的边框为3像素。

显示结果

如图9-6所示的就是设置图片边框后页面的显示效果。

图片的边框颜色设定利用CSS  语句：

style="border-color:

 #cccccc;"

9.2.6  图像的垂直问距属性VSPACE

   图像和文字之间的距离是可以调整的，这个属性用来调整图像和文字之间的上下距离。

此功能非常有用，有效地避免了网页上文字图像拥挤的排版。

其单位默认为像素。

基本语法

语法解释

VALUE为图像垂直方向上和文字的距离，单位为像素。

文件范例：

9-6.htm

通过标记的VSPACE属性设定图片的垂直间距。

-- ------------------------------------------ -->

--            文件范例：

9-6.htm             -->

--       文件说明：

设定图片的垂直间距       -->

-- ------------------------------------------ -->

主流的网页设计软件

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

文件说明

第11行设定了图片的垂直间距为30像素。

显示结果

如图9-7所示的就是设置图片垂直间距后页面的显示效果。

9.2.7  图像的水平间距属性HSPACE

    图像和文字之间的距离是可以调整的，这个属性用来调整图像和文字之间的左右距离。

此功能非常有用，有效地避免了网页上文字图像拥挤的排版。

基本语法

语法解释

VALUE为图片水平方向上和文字的距离，单位为像素。

文件范例：

9-7.htm

通过标记的HSPACE属性设定图片的水平间距。

-- ------------------------------------------ --> 

--            文件范例：

9-7.htm             -->

--       文件说明：

设定图片的水平间距       -->

-- ------------------------------------------ -->

主流的网页设计软件

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

文件说明

第11行设定了图片的水平间距为30像素。

显示结果

如图9-8所示的就是设置图片水平间距后页面的显示效果。

9.2.8  图像的排列属性ALIGN

图像和文字之间的排列通过ALIGN属性来设定。

图像的绝对对齐方式和相对文字对齐式是不一样的。

绝对对齐方式的效果和文字的对齐一样，只有3种：

居左、居右、居中；而相对文字对齐方式是指图像与一行文字的相对位置。

表9-2图片排列Align属性值

属性值

描述

Top

文字的中间线居在图片上方

Middle

文字的中间线居在图片中间

Bottom

文字的中间线居在图片底部

Left

图片在文字的左侧

Right

图片在文字的右侧

效果相同，是指图像底端与文字的底端对齐。

●  对于中文“顶端”（Top）是指图像顶端和文字行      

最高字符的顶端对齐。

● “中间”（Middle）方式是指图像的中间线和文字的低端对齐。

基本语法

语法解释

其中,ALIGN的的属性值如下表所示:

 文件范例：

9-8.htm

通过标记的ALIGN属性设定图片的排列。

-- ------------------------------------------ -->

--            文件范例：

9-8.htm             -->

--         文件说明：

设定图片的排列          -->

-- ------------------------------------------ --> 

主流的网页设计软件

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

文件说明

第11，14，17行分别设定了图片的排列为居左、居右和文字居中。

显示结果

如图9-9所示的就是设置图片不同排列方式的显示效果。

   在上一章曾经制作过文字的链接，图像的链接标记和文字是相同的，都是标记。

和文字不同的是，一张图片的链接地址可以是惟一，也可以是多个。

我们来修改8-1.htm的页面，将链接的文字改换成图像。

文件范例：

9-9.htm

通过标记为图像建立两个链接，分别链接到另外两个HTML页面中。

-- ------------------------------------------ -->

--            文件范例：

9-9.htm             -->

--         文件说明：

建立图像链接              -->

-- ------------------------------------------ -->

主流的网页设计软件

目前，网页技术进入了一个新的阶段，现在的网页再也不是图片的堆积和枯燥无味的文本了，人们现在追求的是网页的动态效果和交互性。

而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表，其最新版本MX2004继承了前期版本的优点，进行了功能的进一步整合，非常适合于网页设计和网站建设的需要。

Dreamweaver MX 2004

FLASH MX 2004

文件说明

第12行和第13行是图像和文字的链接，并设定了图像的宽度、高度，及宽度为0的边框。

文件范例：

9-9-1.htm

这个文件是“网页制作软件Dreamweaver MX 2004”页面，通过标记为图像建立返回到9-9.htm页面的链接。

-- ------------------------------------------ -->

--            文件范例：

9-9-1.htm           -->

--         文件说明：

内部链接文件之一        -->

-- ------------------------------------------ -->

Dreamweaver MX 2004

Dreamweaver MX 2004作为网页设计软件的代表，具有站点管理和页面制作两大核心功     

能。

如果你也拥有织梦的理想，那么这个软件无疑是帮助你实现梦想的最好手段。

完全的可视化编辑，优秀的代码控制，完整的站点规划和管理，超乎寻常的动态效果设计，这些都为设计人员提供了得心应手的途径。

MX 2004版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合，无疑为制作网站提供了更多的实现方式。

返回

文件说明

第13行定义了图像和文字到9-9.htm同级页面的链接。

文件范例：

9-9-2.htm

这个文件是“网页动画软件Flash MX 2004”页面，通过标记建立返回到9-9.htm页面的图像文字链接。

-- ------------------------------------------ -->

--            文件范例：

9-9-2.htm           -->

--         文件说明：

内部链接文件之二        --> 

-- ------------------------------------------ -->

Flash MX 2004

FLASH MX 2004作为网页矢量交互动画软件的代表，提供了图形绘制、动画制作和交互三大功能。

掌握了这个软件的核心，也就有能力在网上冲浪的同时，充当一把闪客的角色。

越来越多的个人，商业网站采用Flash技术，广告Banner、动画片头、MTV、交互游戏，广阔的应用为Flash的学习者提供了广泛的发展平台，学习Flash MX 2004软件更是一个具有诱惑力的过程。

返回

文件说明

第13行定义了到9-9.htm上一级页面的图像文字链接。

显示结果

如图9-10所示的就是9-9.htm页面的显示效果。

当单击了“网页制作软件Dreamweaver MX 2004”文字或者Dreamweaver软件的标志图像后，进入到如图9-11所示的页面。

   单击“返回”或者Macromedia