静态网页设计和html语言

《静态网页设计和html语言》由会员分享，可在线阅读，更多相关《静态网页设计和html语言（127页珍藏版）》请在金锄头文库上搜索。

1、6.1 静态网页设计与HTML语言 6.1.1 静态页面的体系结构 静态网页的特征 v静态网页的内容固定不变;v静态网页的制作比较方便； 静态网页的体系结构 Client (浏览器)Web Server硬盘 HTML页面从硬盘获取文件文件返回页面请求6.1 静态网页设计与HTML语言 6.1.2标记语言Web环境下，采用标记来管理文本内容的现 实和格式，常用的标记语言有：SGML:标准通用标记语言，元语言HTML:超文本标记语言，Web显示语言XML:扩展标记语言，定义数据结构，适合 数据传输GML(1969)SGML(1985)XML(1998)XHTMLMathMLWMLSVGcXML(

2、1969)ebXML (1969)HTML(1993)6.1 静态网页设计与HTML语言 6.1.3 标记语言家族6.1 静态网页设计与HTML语言 6.1.4超文本置标语言HTML v特点 平台兼容 文本文件 Web服务器不处理标记，由客户端浏览器解释 丰富的多媒体显示、各种布局处理v不足 HTML过多的考虑布局，缺乏对结构化数据的表示能 力； 链路丢失后不能自动纠正、下载的内容太多、搜索不 方便、时间长等缺点； HTML中有限的标记不能满足众多Web应用的需要 ， 缺乏可扩展性HTML第一讲：基础6.1 静态网页设计与HTML语言 HTML文档的编写方法1. 手工直接编写 记事本等，存成.

3、htm .html格式 2. 使用可视化HTML编 辑 器 Frontpage、Dreamweaver等 3. 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。6.1 静态网页设计与HTML语言 网页文件命名1. *.htm或*.html 2. 无空格 3. 无特殊符号（例如 很好很好 例：05.htm文字布局v行的控制 vHTML的段落与段落之间有一定的空隔。如果不希望出 现空隔而只想换行的话，就要用到另一个元素，即 元素。元素可以使所在的位置出现换行。这种换行 和浏览器的自动换行的效果类似。元素不是成对出 现的。例：BR标记的应用 你好吗？ 很好 06.htm 不换行 请

4、改变您浏览器窗口的宽度， 使之小于这一 行的宽度， 看看这个标记的作用！ 07.htmHTML文字与段落格式控制倾斜文本粗体文本下划线文本删除线文本 例：08.htm、09.htm、10.htm、11.htm(综 合练习)代数方程式 9X 2+2X +3=173X 1+2X 2=10基本组成部分HTML注释vHTML文档可以插入注释。注释内容不会 在浏览器窗口显示vHTML注释的格式为：代数方程式 例：12.htm文字的对齐. (n=1,2,3,4,5,6) . (#=left, center, right)align标志的居中对齐 p标志中利用align标志实现右对齐 center标志的居中

5、对齐 例：13.htm文字的分区显示v . (#=left, center, right) vP标记自动空行，div不空行作为一名顶级吉他大师，盖米摩尔 是在用他的心在划弦，而绝不是用手指.作为一名顶级吉他大师，盖米摩尔是在用他的心在划弦 ，而绝不是用手指. 例：14.htm3.HTML段落与分行控制v居中- 元素 元素是一个独立的使所标记的字符 居中的元素。它的作用与使用元素里的 align=“center”类似v例如：居中段落 15.htm3.HTML段落与分行控制v水平线 ：设定线宽：设定线长：设定对齐方式 #=left, right ：设定线的颜色例：16.htm3月31号 复习vHT

6、TP协议是基于什么范式的？vHTTP响应状态字4XX和5XX分别表示什么？v网页按照内容来分通常分为哪三种？v网页上通常包含哪些元素？v表单和表格的主要功能分别是什么？vHTML的特点和不足？（第四页）vHTML头文件里通常包含哪些内容？v如何在Dreamweaver中插入垂直分割线？请求/响应 客户端/服务 器端错误主页、内容页和索引页文本、声音、图像、动 画和数字视频等用户交互/网页布局页面属性/CSS/脚本3. HTML的段落与分行控制v无序列表元素1 列表在HTML的文档里有重要的地位 ,HTML规定了多种列表元素。列表所起的 主要作用是使特定的文本有序化。3. HTML的段落与分行控

7、制v无序列表元素2 无序列表是由和元素定义的:无序列表列表项1 列表项2有序列表列表项1 列表项2例：17.htm3. HTML的段落与分行控制v无序列表元素3 无序列表的默认符号是圆点。元素有type属性，通过定义不同的type 属性可以改变列表的项目符号。目前，type属 性的属性值有： disc(圆)、circle（圆圈）、square（方块） disc circle square 例：18.htm3. HTML的段落与分行控制v有序列表元素1 有序列表由和定义:sportsdrinkfriends例：17.htm3. HTML的段落与分行控制v有序列表元素2 元素也有自己的type属性

8、，type属性的属性值有1 、A、a、I、i等。例如，我们以A、B、C作为列表的 编号, ONE-ONE 例： 19.htm 元素还可以定义列表的起始编号，如我们希望列 表的第一个编号为5，而不是1，则需要定义元 素的start属性ONE-ONE 例：20.htm4.超级链接普通超级链接1v超级链接是整个WWW应用的核心和基础 。如果没有超级链接的概念，那么，我们 现在所有的WWW的应用将不复存在。所 以，对超级链接的掌握具有特殊重要的意 义。4.超级链接普通超级链接2超级链接是用锚元素定义的 v在元素下，有元素属性href,href的属 性值为一个URL地址v如：指向 学院的超级链接 v如：

9、普通超级链接例：21.htm4.超级链接E-mail超级链接 v超级链接可以指向E-mail地址v如：指 向E-mail地址的超级链接例：22.htm4.超级链接新开链接窗口v开一个新的(浏览器)窗口 (Target Window) . 例：26.htm4.超级链接去除下划线v去掉超级连接的下划线：style=“text- decoration: none”链接下面没有下划线例：25.htm4.超级链接其他超级链接 vWWW应用仅仅是Internet应用的一种 ,Internet还有其他很多应用，如：Ftp等。 实际上mailto也属于非WWW应用。我们 可以类似的创建指向Ftp等的超级链接;

10、v指向其他Internet应用的超级链接不是我们 掌握的重点。 4.超级链接锚点(书签) 1 vv指向本页面锚点aa的超级 链接 例：23.htmv指向23页面的 锚点top的超级链接 例：24.htm练习：手写代码实现v链接（新开窗口与Email）、背景、文字颜 色、字体、换行、页面标题。v练习：27.htm南京邮 电大学 新开窗口到南京邮电大学给我 来信 改变文字颜色 改变字体HTML对图片的控制-1v基本语法:v 引用图片必须用元素标志。元素下的 基本元素属性是src属性，src的属性值为所引用的图片 的URL地址。 src属性是必须的。Src的URL可以是绝对地址，也可以 是相对地址

11、例：28.htmHTML对图片的控制-2v所谓图片的替代文本，指图片不能显示时 在图片所在位置显示的一段文本或当鼠标 移到图片上时也会显示替代文本。v定义图片替代文本的方法是： 例：28.htmHTML对图片的控制-3v图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是： width指定图片的宽度，height指定高度。它们的属性 值可以是象素，也可以是%。 例：29.htmHTML对图片的控制-4v图片的边框 我们可以为一幅图片加一个边框以突出显示： vborder的属性值为象素数例：30.htmHTML对图片的控制-5v图片的对齐方式 图片可以相对于

12、页面或单元格有一个对齐方式。 定义水平对齐方式的方法是： 例：31.htmHTML对图片的控制-6v图片的对齐方式 定义图片的垂直对齐方式：对于图片的对齐方式不仅是以上几种，但是以上的几种 是最常用的。 例：32.htmHTML对图片的控制-7v定义图片与左、右的文本之间的间距 图片在显示时，与左右的文本之间可以有一定的间距 Hspace(horizontal)定义水平间距； Vspace(vertical)定 义垂直间距。单位都是象素数. 例：33.htmHTML对图片的控制-8v图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图 象的任何部分时，都会打开这个超级链接。定义默认

13、超级链接的方法是： 所以，所谓超级链接实际上就是用元素标志一个 图象的引用; 例：34.htmHTML对图片的控制-9v图象映射 所谓图象映射是指一个图片上的不同位置被指 定了不同的超级链接；点击图片的不同位置会 打开不同的超级链接目标。这与前面的默认超 级链把整个图片作为超级链接的元素是很不一 样的。HTML对图片的控制-10v图象映射（只要求理解标记含义） 图象映射由定义。有一个基本属性是 name。Name给图象映射命名，这个命名将会被 元素用usemap属性引用。所以，图象上的图 象映射实际上是对定义的映射的一个引用。 在定义图象映射时，可以定义三种形状的映 射： circle(圆形)

14、、rect(矩形rectangle)、poly(多边形)HTML对图片的控制-11v图象映射实例（35.htm）HTML第三讲：表格一月二月三月120010001500单元格（用 来表 示，每个单 元格可以有 背景颜色和 背景图片）表格（用来表 示，表格可以有背景颜 色、背景图片）表格边框每一行可以用 来表示 ，单元格放在 行中，每行可 以有很多的单 元格。表头（用来 表示，表头是特 殊的单元格，其 中的文字加进去 之后默认是居中 并且加粗）HTML对表格的控制表格(TABLE)标记-1v 元素：定义一个表格。每一个表格只有一对 和，一张页面中可以有多个表格。v元素：定义表格的行，一个表格可以

15、有多行，所以 对于一个表格来说不是唯一的。v元素：定义表格的一个单元格。每行可以有不同数 量的单元格，在和之间是单元格的具体内容 。v需要注意的是：上述的三个元素必须、而且只能够配对 使用。缺少任何一个元素，都无法定义出一个表格。表格(TABLE)标记-2v表格的基本结构 定义表格定义表头定义表行 定义单元格例：02.htm表格(TABLE)标记-3v表格的属性 1 width属性：指定表格或某一个表格单元格的 宽度。单位可以是%或者象素。 height属性：指定表格或某一个表格单元格 的高度。单位可以是%或者象素。 border属性：表格边线粗细 v例03.htm、04.htm、05.htm

16、表格(TABLE)标记-2v表格的属性 1 4、bgcolor属性：指定表格或某一个单元格的 背景颜色。 5、background属性：指定表格或某一个单元 格的背景图片。其属性值为一个URL地址。 Food Drink Sweet 例：07.htm表格(TABLE)标记-3v表格的属性 2 6、bordercolor属性：指定表格或某一个单元 格的边框颜色。 例：08.htm 7、Bordercolorlight属性：亮边框的颜色 8、Bordercolordark属性：暗边框的颜色例：09.htm表格(TABLE)标记-3v表格的属性 2 9、align属性：指定表格或某一个单元格里 的内