《网页设计与制作第二章.ppt

网页设计与制作学时：学时：60学时学时第二章 网页制作语言HTML了解：HTML语言的基本知识熟练掌握：掌握使用HTML标签建立基本的网页；使用各种对象标签在网页中插入文本、图像、表格、列表、多媒体；使用超链接标签建立绝对路径和相对路径的链接；通过框架的形式建立包含框架的页面。掌握：熟悉HTML的语法；掌握HTML的基本标签；掌握HTML中的文本、图像、链接、列表、表格、多媒体、框架等标签的使用方法；掌握各个对象标签的属性应用。第一节第一节 网页设计语言网页设计语言HTMLHTML简介简介一、HTML简介 一、HTML简介 HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。它是全球广域网上描述网页内容和外观的标准。最初的HTML语言以文本格式为基础，可以用任何编辑器和文字处理器来为网络创建或转换文本，仅有不多的几个标签。1993年，NCSA推出了Mosaic，也就是第一个图文浏览器，从此Web开始迅速地发展起来。HTML语言也不断产生新型、功能强大且生动有趣的标签形式，例如、和等。但是此时，出现了许多不同的HTML版本，而只有设计者和用户共有的HTML部分才可以正确显示。到现在为止，HTML已经发展到了比较成熟的HTML 4.0版本，在这个版本下的语言中，规范更加统一，浏览器之间的兼容性也更加完善。除了HTML语言以外，W3C组织在2000年推出了另一种XHTML1.0语言，该语言其实是HTML4.0的升级版本HTML4.01，只是用XHTML1.0来命名。二、HTML文件的编写方法二、HTML文件的编写方法1.手工直接编写可以使用任何文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。2.使用可视化软件Microsoft公司的FrontPage、Adobe公司的Dreamweaver等软件均可以创建HTML文档。3.由Web服务器一方实时动态生成这种HTML的创建方法需要由后台的网页程序来实现，如ASP、PHP等。第二第二节 HTML基本基本标签每一个HTML文档都由最基本的标签，如文档标签、头部标签和主体标签组成，其代码格式如右：页面标题从上面的标签中可以看到标签都是成对出现，由开始标签和结束标签组成的，这种成对出现的标签称之为双向标签。除此之外HTML标签还有单向标记，单向标签只有一个标签，如图像标签，水平线等。大部分的HTML标签都是有属性的，在为标签添加属性时，属性要写在标签内，如是双向标签，属性写在开如标签内，各个属性之间不分先后顺序，属性是可选的，如果不写，那就是采用默认属性值，其格式如下：内容一、文档标签一、文档标签文档标签用于标识文档的文档类型为HTML文档。它是在整个HTML文档标签的最外层，文档中所有的标签和文本内容都是包含在与之间的。二、头部标签二、头部标签是HTML文档的头部标签，在文档中同样是成对出现的，即和。在浏览器窗口中，头部标签所包含的信息不会显示在主窗口中。在和标签之间可以插入其他的一些标签，用于说明文档的标题和整个中相同的一些属性，还可以加入一些文件信息。三、主体标签三、主体标签是HTML文档的主体标签，中放置文档的正文，是在浏览器中显示的页面内容，如文字、图片、动画，视频等。标签常用的属性如下表：属性作用Link设置页面中默认文本超链接的颜色alink设置鼠标单击时文本超链接的颜色vlink设置单击过后的文本超链接的颜色background设置页面的背景图像bgcolor设置页面的背景颜色Topmargin bottommargin leftmargin rightmargin设置页面的上、下、左、右边距Text设置页面中文本的颜色四、页面注释标签四、页面注释标签注释可以包含任何内容，但不会被浏览器解析。因此注释可以起到将过时的代码注释掉，或者在调试程序时暂时屏蔽部分代码的作用。注释标签的用法如下：!-被注释掉的代码-第三第三节 HTML其他其他标签一、文本相关标签一、文本相关标签（一）标题文字标签标题文字标签，是用于设置网页中的标题文字效果，其中n的取值为16，被设置的文字会以该标签的默认样式显示，该标签是一个双向标签，成对出现，如。标题的应用标题一标题二标题三标题四标题五标题六预览效果一、文本相关标签（二）段落标签段落标签用于创建文本的段落格式。静夜思静夜思床前明月光，疑是地上霜，举头望明月，低头思故乡。预览效果一、文本相关标签（三）预排版标签在制作网页时，有时候希望浏览器显示出的文本保留在代码中编辑时的原始文字排版格式，此时就可以使用预排版标签。静夜思静夜思床前明月光，疑是地上霜，举头望明月，低头思故乡。预览效果一、文本相关标签（四）换行标签换行标签是一个单向标签，不包含任何的内容。标签后的内容将显示在下一行。静夜思静夜思床前明月光，疑是地上霜，举头望明月，低头思故乡。预览效果一、文本相关标签（五）文本格式化标签1.粗体标签粗体标签，主要用于粗体显示文字。2.斜体标签斜体标签，主要用于斜体显示文字。3.下标字标签使用下标字标签其主要用于设置下标文字。4.上标字标签上标字标签可以完成，其主要用于设置上标文字。5.HTML中的特殊字符有时需要在页面中显示一些特殊的符号，如版权符号，注册符号等，此时依靠键盘是无法输入完成的，在HTML语言中提供了这些符号的输入方式，常用符号如表。代码作用©表示版权符号（）®表示注册符号（）&nbsp表示半角空格（）"表示双引号（“）&表示“与”运算符（&）<表示“大于”运算符>表示“小于”运算符二、建立超链接二、建立超链接（一）绝对路径与相对路径绝对路径是指包括服务器协议在内的完整路径，例如，http:/就是一个绝对路径，通常也指外部链接。相对路径通常用于站点内部文档之间的链接，尤其是要建立链接的两个文档同处同一个文件夹时，当然也可以用文档的相对路径方式建立同其他文件夹下的文档的链接，但需要注意的是文档之间的层次关系。二、建立超链接（二）链接标签当需要在网页中创建超链接时，需要加入标签，被该标签包含的内容就是一个超链接显示的文字二、建立超链接（三）链接的创建1.锚点链接锚点链接用于在同一个页面中，不同位置的跳转，或是跳转到其他页面指定的位置。具体方法如下：（1）在需要建立跳转的位置创建锚点，加入如下代码：“link1”为创建的锚点名称。（2）在需要建立链接的位置，加入如下代码：点击此处跳转到锚点，2.电子邮件链接在HTML中创建邮件链接使用的是邮件属性“mailto:”，属性“href”指向链接的地址。创建邮件链接的格式如下：文字链接3.空链接在网页中创建空链接，可以链接页面自身。创建空链接只需要在链接地址处输入一个“#”，即可。其格式如下：空链接三、使用图像三、使用图像（一）图像标签在网页中插入图像，使用标签，该标签是一个单向标签，使用该标签的相关属性可以对插入的图像进行控制。1.图像源文件属性图像源文件属性src指定要显示的图像文件所在位置。网页中所有的文件在网络上的位置都有一个URL唯一标识。Src属性的参数值就是图像文件的URL，其设置值可以是相对路径，也可以是绝对路径，其格式如下：2.图像的宽度和高度属性图像的宽度属性width和高度属性height用于指定图像的在浏览器中显示的大小，其属性的单位是“像素”，例如，插入图像的宽和高都为100像素，其代码如下：三、使用图像（一）图像标签3.图像的边框属性图像的边框属性border用于为图像添加一个黑色的边框，其边框的宽度默认以像素为单位。例如，为图像添加一个2像素的边框，其代码如下：三、使用图像（一）图像标签4.图像的排列属性图像和文字之间的对齐方式是通过图像的排列属性align来设置完成的。图像路灯我是一盏灯，是一盏孤独的路灯。我站在城市里不起眼的角落，默默地看着四季的变迁，接受着四季的侵蚀。我不喜欢春天，鸟儿叽叽喳喳的叫声吵得我睡不了觉；我也不爱夏天，炙热的太阳似乎要把我蒸发掉；我最讨厌冬天，厚厚的积雪压得我抬不起头来。在风吹雨打中，我的身体慢慢残破了，眼睛也慢慢开始花了。那是一个满天繁星的夏夜，一个深夜归家的女孩子却温暖了我年久失修的心。“妈，没事，这不是有那盏老路灯的么，我不怕.”这句话犹如晴天霹雳闪过，我的怨言与不满在这一瞬间通通消失，随之而来的是，幸福。原来，我的存在，一直是那么温暖的角色。虽然我再也不能挺立的的直直的了，也无法发出以前那种耀眼的光芒了，可是我觉得我很幸福。我突然好想春天的鸟儿，夏天的骄阳还有冬天的雪花，我想大声告诉他们，我有多么爱这个世界。我是一盏灯，打我睁开眼，我就站在这，站了一辈子，也照了一辈子。我是一盏灯，是一盏幸福的老灯。预览效果三、使用图像（一）图像标签5.图像的水平间距和垂直间距属性水平间距属性hspace和垂直间距属性vspace用于设置图像与其相临对象的上、下、左、右边缘的距离。散文路灯路灯我是一盏灯，是一盏孤独的路灯。我站在城市里不起眼的角落，默默地看着四季的变迁，接受着四季的侵蚀。我不喜欢春天，鸟儿叽叽喳喳的叫声吵得我睡不了觉；我也不爱夏天，炙热的太阳似乎要把我蒸发掉；我最讨厌冬天，厚厚的积雪压得我抬不起头来。在风吹雨打中，我的身体慢慢残破了，眼睛也慢慢开始花了。那是一个满天繁星的夏夜，一个深夜归家的女孩子却温暖了我年久失修的心。“妈，没事，这不是有那盏老路灯的么，我不怕.”这句话犹如晴天霹雳闪过，我的怨言与不满在这一瞬间通通消失，随之而来的是，幸福。原来，我的存在，一直是那么温暖的角色。虽然我再也不能挺立的的直直的了，也无法发出以前那种耀眼的光芒了，可是我觉得我很幸福。我突然好想春天的鸟儿，夏天的骄阳还有冬天的雪花，我想大声告诉他们，我有多么爱这个世界。我是一盏灯，打我睁开眼，我就站在这，站了一辈子，也照了一辈子。我是一盏灯，是一盏幸福的老灯。预览效果三、使用图像（一）图像标签6.图像的提示文字属性图像的提示文字属性alt用于指定当鼠标指针移动到该图像上后，图像上显示出的提示文字。预览效果三、使用图像（二）图像超链接图像也可以像文字一样设置超链接，只需要将图像标签包含在超链接标签中即可，当为图像设置超链接后，单击图像可以跳转到链接的页面。创建图像超链接格式如下：四、使用列表四、使用列表（一）无序列表无序列表是指没有进行编号的列表，无序列表使用的标签是和，其中表示列表的类型为无序列表，表示该列表中的每个列表值。第一个列表值第二个列表值预览效果如果需要修改无序列表的列表符号，可以为标签添加type属性，tpye的类型对于无序列表来说，常用的有3种属性值，分别是圆点disc、空心圆点circle和方块square。四、使用列表（二）有序列表有序列表是指有编号的列表，有序列表使用的标签是和，其中表示列表的类型为有序列表，表示该列表中的每个列表值。第一个列表值第二个列表值预览效果如果需要修改有序列表的列表编号类型，同样可以为标签添加type属性，对于有序列表来说，tpye常用的有5种属性值，如右表类型值生成样式序列举例A大写字母A、B、C、D、Ea小写字母a、b、c、c、eI大写罗马数字I、II、III、IV、Vi小写罗马数字i、ii、iii、iv、v1阿拉伯数字1、2、3、4、5五、使用表格五、使用表格（一）表格标签在HTML中，表格使用标签创建。表格的内容由表格行标签、表格单元格标签和表格标题行标签来定义。表格第一行第一个单元格第一行第二个单元格第二行第一个单元格第二行第二个单元格预览效果五、使用表格（二）表格标题表格的标题使用标签添加。表格产品名称产品一 产品一产品三产品四预览效果五、使用表格（三）表格属性表格的属性主要用于控制表格的外观。（1）border：用于定义表格的边框。（2）cellspacing：用于设置单元格之间的距离。（3）cellpadding：用于设置单元格中的内容与cellspacing区域的距离，如果cellspacing为0，则表示单元格的内容与表格边框的距离。（4）width：用于设置表格的宽度。（5）height：用于设置表格的高度，取值方法与width相同。（6）bgcolor：用于设置表格背景颜色。（7）background：用于设置表格的背景图像，其值为一个有效的图片地址。（8）bordercolor：用于设置表格的边框颜色，当表格的border属性值不为0时，设置此属性才会有效。设置方法与bgcolor属性相同。五、使用表格（四）单元格属性单元格包含在表格中，其HTML标签就是和。1.水平对齐水平对齐align该属性用于设置单元格中的内容水平方向的对齐方式，其值有3个，分别是左对齐left、居中对齐center、右对齐right。2.垂直对齐垂直对齐valign该属性用于设置单元格中的内容垂直方向的对齐方式，其值有3个，分别是顶部对齐top、居中对齐middle、底部对齐low。3.不换行不换行nowrap该属性用于强制单元格的内容不换行，该属性没有值，如果不加此属性单元格中的内容如果超过单元格的宽度将自动换行。五、使用表格（五）合并单元格rowspan属性用于向下合并垂直的单元格，而colspan属性用于向右合并水平的单元格。该属性一般用于和中。该行是水平合并三个单元格垂直合并二个单元格如有一个两行一列的表格，第一行只有一个单元格，第二行有三个单元格，其代码如下：第一行第二行第二行第二行预览效果六、添加多媒体六、添加多媒体（一）多媒体文本标签embed标签可以用于插入各种多媒体对象，格式可以是Midi、Wav、AIFF、AU、MP3、Flash等。需要注意的是，当使用标签在网页中插入多媒后，用户在浏览网页时，计算机中需要有支持播放该多媒体的插件。六、添加多媒体（二）对象标签object在HTML中，使用标签可以引用Active控件。该标签用于包含对象，如包含图像、音频、视频、Java applets、ActiveX、PDF和Flash等。标签的主要属性如表所示。属性含义id提供了Active控件在网页中的标识，脚本程序可以通过该标识对它进行Active控件编程。URL地址可以使用相对地址或绝对地址classidclassid为每个Active控件的唯一标识号。它由16字节组成，即组成了128bit，保证了classid全球的唯一性。当安装了一个Active控件后，这个Active控件的文件路径、classid和其他一些参数就会注册到Windows的注册表中，其他应用程序就可以通过该classid在Windws注册表中找到该控件的信息，从而加载该控件到自己的进程空间并启动运行该Active控件codebase该属性指定当用户计算机上没有安装引用的Active控件时，浏览器自动下载该Active控件的网络位置type指定多媒体文件的文件类型param指定Active控件属性的初始值七、使用框架结构七、使用框架结构（一）框架集标签Frameset该标签是框架设计标签，成对使用。首尾标签之间的内容就是使用到框架的HTML主体部分。在使用框架的HTML文档中不能出现标签。其语法格式为：;（1）数字：表示子窗口高度（宽度）所占的像素数。（2）百分数：表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。（3）符号“*”：当符号*只出现一次，表示该子窗口的大小将根据浏览器窗口的大小自动调整。当符号*出现一次以上时，表示按比例分割浏览器窗口的剩余空间。七、使用框架结构（二）框架标签frameHTML用标签来标识子窗口。（1）SRC：用于定义子窗口的名称。（2）name：用于定义子窗口的名称。（3）frameboder：该属性的参数值为1或0。（4）bordercolor：用于设置子窗口的边框颜色。（5）sclling：属性的参数值为yes、no或auto之一。（6）maginwidth和marginwidht：这两个属性用于指定显示内容与窗口边界之间的距离。七、使用框架结构（三）无框架标签noframes 使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息，以免浏览者对空白窗口画面感觉莫名其妙。标签是成对使用的。首尾标签之间的内容就是告之浏览者的信息。七、使用框架结构（四）HTML框架基本结构通过一段代码，来说明框架的使用方法。框架预览效果七、使用框架结构（五）浮动框架iframe浮动框架，是在一个页面中划分出一块区域，用于显示另一个页面。浮动框架浮动框架实例预览效果THE END