静态网页设计和HTML语言.ppt

6.1 静态网页设计与HTML语言,6.1.1 静态页面的体系结构 静态网页的特征 静态网页的内容固定不变; 静态网页的制作比较方便； 静态网页的体系结构,6.1 静态网页设计与HTML语言,6.1.2标记语言 Web环境下，采用标记来管理文本内容的现实和格式，常用的标记语言有： SGML:标准通用标记语言，元语言 HTML:超文本标记语言，Web显示语言 XML:扩展标记语言，定义数据结构，适合 数据传输,6.1 静态网页设计与HTML语言,6.1.3 标记语言家族,6.1 静态网页设计与HTML语言,6.1.4超文本置标语言HTML 特点 平台兼容 文本文件 Web服务器不处理标记，由客户端浏览器解释 丰富的多媒体显示、各种布局处理 不足 HTML过多的考虑布局，缺乏对结构化数据的表示能力； 链路丢失后不能自动纠正、下载的内容太多、搜索不方便、时间长等缺点； HTML中有限的标记不能满足众多Web应用的需要 ，缺乏可扩展性,HTML第一讲：基础,6.1 静态网页设计与HTML语言,HTML文档的编写方法,手工直接编写 记事本等，存成.htm .html格式 使用可视化HTML编 辑 器 Frontpage、Dreamweaver等 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。,6.1 静态网页设计与HTML语言,网页文件命名,*.htm或*.html 无空格 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 区分大小写 首页文件名默认为：index.htm 或 index.html,HTML 文件结构,. . . 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如），也有一个结束的标记（如）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。,6.1 静态网页设计与HTML语言, HTML 文件的正文 ,头部,主体,HTML 文件结构,6.1 静态网页设计与HTML语言,第一张网页（01.htm）, my first page This is my first homepage! ,基本组成部分HTML元素属性,HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。,第二张网页（02.htm）, my first page This is my second homepage! ,居中,HTML元素及元素属性,HEAD之元素1 元素出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,HTML元素及元素属性,HEAD元素 2 元素 元素下面可以插入很多很有用的元素属性。下面介绍四种： 用来标记搜索引擎在搜索你的页面时所取出的关键词。,HTML元素及元素属性,HEAD元素 3 元素 用来标记文档的作者。,HTML元素及元素属性,HEAD元素 4 元素 用来标记你的页面的解码方式。,HTML元素及元素属性,HEAD元素 5 元素 用来自动刷新网页,练习（03.htm）,编写一个网页，要求3秒钟后自动跳转到南京邮电大学的网站。 my third page 三秒钟后本网页将自动跳转到南京邮电大学首页 ,元素及元素属性1,元素表明是HTML文档的主体部分。在与之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。,元素及元素属性2,元素中有下列元素属性： (1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：改变HTML文件的背景颜色 例：04.htm,HTML对颜色的控制,HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,常见颜色的代码,元素及元素属性3,元素中有下列元素属性： (2)background background属性标志HTML文档的背景图片。如：。 可以使用的图片格式为GIF，JPG 例：05.htm、06.htm,元素及元素属性4,元素中有下列元素属性： (3)bgproperties=fixed bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。 例：07.htm和08.htm对比,元素及元素属性5,元素中有下列元素属性： (4)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。 例：09.htm,元素及元素属性6,元素中有下列元素属性： (5)超级链接颜色 link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。 南京邮电大学 这是一个链接的例子。点一下带下划线的文字! 链接到22.htm 例：10.htm,元素及元素属性7,元素中有下列元素属性： (6) leftmargin和topmargin 设置网页主体内容距离网页顶端和左端的距离如： 例：11.htm,HTML第二讲：内容设置,文字标签属性1,文字属性标记 1.文字颜色 指定颜色 . #=RRGGBB 16 进制数码 兰色字 红色字 绿色字 例：01.htm,HTML2内容设置,文字标签属性2,文字属性标记 2.文字字体 . #=客户端可获得的字体 黑体 楷书 宋体 02.htm,文字标签属性3,文字属性标记 3.文字大小 . #=1, 2, 3, 4, 5, 6, 7 or +#, -# 专业铸造品质 知识成就未来 例：03.htm,文字标签属性4,文字属性标记 4.文字标题 . #=1, 2, 3, 4, 5, 6 老崔的一无所有 例：04.htm,文字布局,行的控制 段(Paragraph) (可以看作是空行) 空白占位符很好 例：05.htm,文字布局,行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。元素不是成对出现的。例： BR标记的应用 你好吗？ 很好 06.htm 不换行 请改变您浏览器窗口的宽度， 使之小于这一行的宽度， 看看这个标记的作用！ 07.htm,HTML文字与段落格式控制, 倾斜文本 粗体文本 下划线文本 删除线文本 例：08.htm、09.htm、10.htm、11.htm(综合练习),代数方程式 9X 2+2X +3=173X 1+2X 2=10,基本组成部分HTML注释,HTML文档可以插入注释。注释内容不会在浏览器窗口显示 HTML注释的格式为： 代数方程式 例：12.htm,文字的对齐,. (n=1,2,3,4,5,6) . (#=left, center, right) align标志的居中对齐 p标志中利用align标志实现右对齐 center标志的居中对齐 例：13.htm,文字的分区显示, . (#=left, center, right) P标记自动空行，div不空行 作为一名顶级吉他大师，盖米摩尔是在用他的心在划弦，而绝不是用手指. 作为一名顶级吉他大师，盖米摩尔是在用他的心在划弦，而绝不是用手指. 例：14.htm,3.HTML段落与分行控制,居中- 元素 元素是一个独立的使所标记的字符居中的元素。它的作用与使用元素里的align=“center”类似 例如：居中段落 15.htm,3.HTML段落与分行控制,水平线 ：设定线宽 ：设定线长 ：设定对齐方式 #=left, right ：设定线的颜色 例：16.htm,3月31号 复习,HTTP协议是基于什么范式的？ HTTP响应状态字4XX和5XX分别表示什么？ 网页按照内容来分通常分为哪三种？ 网页上通常包含哪些元素？ 表单和表格的主要功能分别是什么？ HTML的特点和不足？（第四页） HTML头文件里通常包含哪些内容？ 如何在Dreamweaver中插入垂直分割线？,请求/响应,客户端/服务器端错误,主页、内容页和索引页,文本、声音、图像、动画和数字视频等,用户交互/网页布局,页面属性/CSS/脚本,3. HTML的段落与分行控制,无序列表元素1 列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。,3. HTML的段落与分行控制,无序列表元素2 无序列表是由和元素定义的: 无序列表 列表项1 列表项2 有序列表 列表项1 列表项2 例：17.htm,3. HTML的段落与分行控制,无序列表元素3 无序列表的默认符号是圆点。 元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有： disc(圆)、circle（圆圈）、square（方块） disc circle square 例：18.htm,3. HTML的段落与分行控制,有序列表元素1 有序列表由和定义: sports drink friends 例：17.htm,3. HTML的段落与分行控制,有序列表元素2 元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号, ONE-ONE 例： 19.htm 元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性 ONE-ONE 例：20.htm,4.超级链接普通超级链接1,超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念，那么，我们现在所有的WWW的应用将不复存在。所以，对超级链接的掌握具有特殊重要的意义。,4.超级链接普通超级链接2,超级链接是用锚元素定义的 在元素下，有元素属性href,href的属性值为一个URL地址 如：指向学院的超级链接 如：普通超级链接 例：21.htm,4.超级链接E-mail超级链接,超级链接可以指向E-mail地址 如：指向E-mail地址的超级链接 例：22.htm,4.超级链接新开链接窗口,开一个新的(浏览器)窗口 (Target Window) . 例：26.htm,4.超级链接去除下划线,去掉超级连接的下划线：style=“text-decoration: none” 链接下面没有下划线 例：25.htm,4.超级链接其他超级链接,WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用，如：Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接; 指向其他Internet应用的超级链接不是我们掌握的重点。,4.超级链接锚点(书签) 1, 指向本页面锚点aa的超级链接 例：23.htm 指向23页面的锚点top的超级链接 例：24.htm,练习：手写代码实现,链接（新开窗口与Email）、背景、文字颜色、字体、换行、页面标题。 练习：27.htm,南京邮电大学 新开窗口到南京邮电大学 给我来信 改变文字颜色 改变字体 ,HTML对图片的控制-1,基本语法: 引用图片必须用元素标志。元素下的基本元素属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。Src的URL可以是绝对地址，也可以是相对地址 例：28.htm,HTML对图片的控制-2,所谓图片的替代文本，指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。 定义图片替代文本的方法是： 例：28.htm,HTML对图片的控制-3,图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是： width指定图片的宽度，height指定高度。它们的属性值可以是象素，也可以是%。 例：29.htm,HTML对图片的控制-4,图片的边框 我们可以为一幅图片加一个边框以突出显示： border的属性值为象素数 例：30.htm,HTML对图片的控制-5,图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是： 例：31.htm,HTML对图片的控制-6,图片的对齐方式 定义图片的垂直对齐方式： 对于图片的对齐方式不仅是以上几种，但是以上的几种是最常用的。 例：32.htm,HTML对图片的控制-7,定义图片与左、右的文本之间的间距 图片在显示时，与左右的文本之间可以有一定的间距 Hspace(horizontal)定义水平间距； Vspace(vertical)定义垂直间距。单位都是象素数. 例：33.htm,HTML对图片的控制-8,图象的超级链接 图象的超级链接是指整个图象的超级链接，当点击图象的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是： 所以，所谓超级链接实际上就是用元素标志一个图象的引用; 例：34.htm,HTML对图片的控制-9,图象映射 所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接；点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。,HTML对图片的控制-10,图象映射（只要求理解标记含义） 图象映射由定义。有一个基本属性是name。Name给图象映射命名，这个命名将会被元素用usemap属性引用。所以，图象上的图象映射实际上是对定义的映射的一个引用。 在定义图象映射时，可以定义三种形状的映射： circle(圆形)、rect(矩形rectangle)、poly(多边形),HTML对图片的控制-11,图象映射实例（35.htm） ,HTML第三讲：表格,单元格（用来表示，每个单元格可以有背景颜色和背景图片）,表格（用来表示，表格可以有背景颜色、背景图片）,表格边框,每一行可以用来表示，单元格放在行中，每行可以有很多的单元格。,表头（用来表示，表头是特殊的单元格，其中的文字加进去之后默认是居中并且加粗）,HTML对表格的控制,表格(TABLE)标记-1, 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。 元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。,表格(TABLE)标记-2,表格的基本结构 定义表格 定义表头 定义表行 定义单元格 例：02.htm,表格(TABLE)标记-3,表格的属性 1 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细 例03.htm、04.htm、05.htm,表格(TABLE)标记-2,表格的属性 1 4、bgcolor属性：指定表格或某一个单元格的背景颜色。 5、background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 Food Drink Sweet 例：07.htm,表格(TABLE)标记-3,表格的属性 2 6、bordercolor属性：指定表格或某一个单元格的边框颜色。 例：08.htm 7、Bordercolorlight属性：亮边框的颜色 8、Bordercolordark属性：暗边框的颜色 例：09.htm,表格(TABLE)标记-3,表格的属性 2 9、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式。 A B C 例：10.htm,表格(TABLE)标记-3,表格的属性 2 10、cellspacing属性：单元格间距。 例：11.htm 11、cellpadding属性：单元格边距。 例：12.htm,表格(TABLE)标记-4,单元格属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括： top：顶端对齐； middle：居中对齐； bottom：底端对齐; Baseline：相对于基线对齐; D 例：13.htm,表格(TABLE)标记-5,单元格属性 2、Colspan：属性值表示当前单元格跨越几列 Morning Menu 例：14.htm 3、Rowspan：属性值表示当前单元格跨越几行 例：16.htm,表格(TABLE)标记-6,行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包 top：顶端对齐； middle：居中对齐； bottom：底端对齐。 Baseline：相对于基线对齐。,表格(TABLE)标记-7,行属性 2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式 3、height属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素,表格进阶,表格的嵌套 在 之间插入表格，实现表格嵌套 例：17.htm 表格的作用一般只是控制文本和图像的显示，而不显示表格的边框 例：18.htm,综合案例,表格的综合使用 例：19.htm, 1 2 3 4 5,表单(FORM)标记,HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。,表单(FORM)标记,表单是网页上的一个特定区域。这个区域是由一对元素定义的。 元素 action属性：用来定义表单处理程序（一个ASP、CGI等程序）的位置(相对地址或绝对地址)。 Method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。,表单(FORM)标记,表单的基本语法: . =GET有数据量限制，POST无以上限制,以文件形式传输 例：22.htm,表单(FORM)标记,文本框 ? 文本框的名字 * text,password * 默认值 * 长度 ? 最大输入字符数 例20.htm,您的姓名: 密码： 留言：,表单(FORM)标记,3.文本域 . 例：20.htm,表单(FORM)标记,按钮 包括普通按钮、重置按钮和提交按钮 例：21.htm,表单(FORM)标记,5.复选框(Checkbox) 在一个表单里的所有多选框可以有一个或多个被选中。 例25.htm,表单(FORM)标记,6.单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。 各个选项的name必须一样才能达到预期效果 例：26.htm 注意262.htm的写法是错误的 摇滚 爵士,表单(FORM)标记,7.下拉列表 基本语法 说明 说明2 例：28.htm,表单(FORM)标记,7.下拉列表 （2）列表框的长度 （3）允许多选 例：29.htm、30.htm,表单(FORM)标记,8.图象域 例：image.htm,表单(FORM)标记,综合练习（*） 实现留言簿 要求：背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮，内容以mail形式提交。,HTML第四讲：框架,网页中的框架,制作框架页面的步骤： 1.编写所有子框架页面 2.编写主框架页面 3.在主框架页面中设定子框架名称 4.如果框架页面之间存在链接，在子框架中设定链接 注意：框架页面是不含标签的,网页中的框架,基本语法 您的浏览器不支持框架，请考虑升级您的浏览器！ ,网页中的框架,定义框架的基本语法 框架由一对定义 有两个属性：rows和cols Rows定义上下分割的框架的大小； cols定义左右分割的框架的大小； 在定义大小时，rows和cols可以使用相对大小或以百分比为单位。,网页中的框架,各窗口的尺寸设置 横排多个窗口 排列方式： A B C 例：02.htm,网页中的框架,各窗口的尺寸设置 纵向排列多个窗口 排列方式：A B C 例：01.htm,网页中的框架,COLS & ROWS：纵横排列多个窗口 排列方式： B A C 例：14.htm,网页中的框架,框架边框的颜色 bordercolor=“ff0000“ 例：03.htm 各窗口边框的设置 frameborder=# #=yes, no / 1, 0 例：04.htm 框架边框的宽度 framespacing=“10“ 例：05.htm,网页中的框架,的属性 name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。 例：06.htm、07.htm Src：在本框架里显示网页的URL。 Target：目标框架,引用的是目标框架的名字。,网页中的框架,在当前框架中打开超链接页面 默认就是在当前框架页中打开,也可以采用Target=“_self” 在指定框架中打开超级链接页面 Target=“name” 新开窗口打开链接页面 Target=“_blank” 跳出整个框架集 Target=“_parent”,网页中的框架,的属性 Scrolling：是否显示滚动条。yes, no, auto 例：08.htm Noresize：框架在浏览器里不可以被调整大小。 例：10.htm,网页中的框架,内含窗口 . #=初始页面的 URL #=框架名称(Frame Name) 例：15.htm,会移动的文字,基本语法 . 例：16.htm 文字移动属性 (1)方向 ：direction=# #=left, right,up,down 例：17.htm,会移动的文字,2、文字移动属性 (2)方式： behavior=# #=scroll(循环), slide(只走一次), alternate(来回走) 例：18.htm (3)循环: loop=# #=次数；若未指定则循环不止(infinite) 例：19.htm,会移动的文字,2、文字移动属性 (4)速度: scrollamount=# 例：20.htm (5)延时: scrolldelay=# 例：21.htm,会移动的文字,3、其他属性 (1)底色: bgcolor=# #=RRGGBB 16 进制颜色代码 例：22.htm (2)面积: height=# width=# 例： 23.htm (3)空白:hspace=# vspace=# 例： 24.htm,多媒体页面,用嵌入多媒体对象 基本语法 #=URL 注： 使用 标记之前，需要安装插件才可以； 对于不同的plugin，其embed属性也不同。 例： 25.htm(Flash动画) 例： 26.htm(rmi音乐文件) 例： 27.htm(avi动画) 例： 28.htm(mpeg影像文件),多媒体页面（*）,嵌入背景音乐 #=WAV 文件的 URL #=循环数 例29.htm(WAV背景音乐), 可以使用bgsound标记来添加页面背景音乐。,多媒体页面（*）,特殊标记元素Object 元素用来包含图像、动态图像、Java小程序。 元素用以替换具体的和元素，以及和元素。 例 30.htm,HTML分析实例百度,附：HTML标记一览,文件宣告 让浏览器知道这是HTML文件 开头 提供文件整体信息 标题 定义文件标题将显示于浏览器顶端 主体 设计文件格式及内容所在 排版标记 说明标记 为文件加上说明但不被显示 段落标记 为字、图、表格等之间留下一空白行 换行标记 令字、图、表格显示于下一行 水平线 插入一水平线 居中 令字、图、表格等显示于中间 预设格式 令文件按原代码的排列方式显示 定位标记 设定字、图、表格等的摆放位置 不换行 令文字不因太长而换行 建议换行 预设换行部位,附：HTML标记一览,字体标记 加重语气 产生字体加粗Bold的效果 粗体标记 产生字体加粗的效果 强调标记 字体出现斜体效果 斜体标记 字体出现斜体效果 等宽字体 Courier字体，字母宽度相同 加下划线 加下划线 一级标题标记 将字体变大，级数越高越小 二级标题标记 将字体变大 三级标题标记 将字体变大 四级标题标记 将字体变大 五级标题标记 将字体变大 六级标题标记 将字体变大 字体标记 设定字体、大小、颜色 基准字体标记 设定所有字体、大小、颜色 字体加大 令字体稍微变大 字体缩小 令字体稍微缩小,加删除线 为文字加删除线 程式码 字体稍微加宽 键盘字 字体稍微加宽，单一空白 范例 字體稍為加寬 变量 斜体效果 斜体标记 斜体效果 向右缩排 文字向右缩排 述语定义 斜体效果 地址标记 斜体效果 下标字 文字下标 上标字 文字上标,附：HTML标记一览,清单标记 顺序清单 清单项目将以数字、字母顺序排列 无序清单 清单项目将以实心圆点作为符号排列 清单项目 清单中的项目，一个标记一行 选项清单 可用type参数指定项目符号 目录清单 与相同 定义清单 清单分两层出现 定义条目 清单项标题 定义内容 清单项内容 表格标记 表格标记 设定该表格的各项参数 表格标头 位于表格之上或之下 表格行 设定该表格的行 表格单元格 设定该表格的单元格 表格标题 相等于，但其内文字字体会变粗,附：HTML标记一览,表单标记 表单标记 决定该表单的运作模式 文字框 提供文字输入栏 输入标记 决定输入形式 选择标记 建立弹出卷动清单 选项 每一个清单选项 图形标记 图形标记 用来插入图形及设定图形属性 链接标记 链接标记 加入链接 基准标记 可将相对URL转绝对及指定链接 框架标记 框架设定 设定框架 窗口设定 设定框架中的窗口 页内框架 于网页中插入框架 不支持框架 设定浏览器不支持框架时的提示,附：HTML标记一览,影像地图 影像地图名称 设定影像地图名称 链接区域 设定各链接区域 多媒体 背景声音 令背景播放音乐或声音 多媒体 加入声音、音乐或影像 其他标记 走马灯 令文字走动 闪烁文字 令文字闪烁 页内寻找器 可输入关键字寻找该页 开头说明 提供关于此页的信息给浏览器 关系定义 定义该文件与其他URL的关系 StyleSheet 式样表 控制网页版面 自订标记 独立使用或与样式表一起用,HTML的缺陷,HTML更多地关注WEB浏览器如何在页面上安排文本、图象和按纽等，过多的考虑外观使其缺乏对结构化数据的表示能力。 HTML中有限的标记不能满足很多WEB应用的需要。 是因为HTML缺乏可扩展性 从1996年开始，W3C