HTML网页设计基础幻灯片.ppt

chap03 网页设计 一、静态页面设计 二、HTML及Script语言基础 三、ASP.NET网页设计控件介绍 教学目的 了解静态页面的设计特点 掌握HTML语言基本结构 熟悉Script语言基础 掌握使用ASP.NET设计单个网页的方法 教学重点 HTML语言的使用 ASP.NET网页设计控件的使用 静态页面设计 静态页面——内容不会或者很少发生变化； 动态页面——可以通过网站后台管理系统对网站内容进行更新管理 HTML及Script语言 HTML语言基础 VBScript基础 JavaScript基础 HTML简介 HTML显示原理 HTML显示原理 HTML制作工具 HTML文档的基本结构 一个典型的HTML文本的基本结构形式如下： HTML HEAD TITLE 文件标题 /TITLE /HEAD BODY 文件体 /BODY /HTML （1）HTML标记符 HTML/HTML这两个标记符是HTML文档的标记符。HTML处于文档的最前端，表示文档的开始，即浏览器从HTML开始解释。而/HTML则位于文件的最后一行，这样的结果表示这一整份的文档都是HTML语法的文档。 （2）HEAD标记符 HEAD/HEAD是HTML文件头标记符，用来描述HTML首部的内容，说明文档的整体信息，如网页背景图片、音乐等整体设置。HEAD/HEAD通常与某些标记符一起使用，如TITLE/TITLE标记符。 （3）TITLE标记符 TITLE/TITLE指的是一份文档的标题。通常来说，每一份文档都应该有一个标题来简述这一份文档的特色或是主题。对于WWW浏览器而言，标题所在的位置虽然依照浏览器的不同而不同，但是大部分都位于浏览器的最上方。 （4）BODY标记符 BODY/BODY指的是定义出一个HTML文档的主体部分，位于首部下面。在BODY标记符内的文字，所有使用标记符的地方都可以经浏览器正确地显示在浏览器窗体中。 HTML标记 HTML标记 HTML标记 HTML标记 HTML标记 常用HTML标记 排版标记 !-- 注释 -- 像很多语言一样，HTML也提供注释功能，注释以!--开始，以--结束，之间所有的内容会被浏览器忽略。利用注释可以为HTML文档的不同部分加上说明，方便日后修改，也可以利用注释为HTML文档加上版权声明。 排版标记 p p称为段落标记，用来创建一个段落，段落内容显示时与前后的内容之间保留一空白行。如果两个段落相连，则可以省略第一个段落的结束标记/p，因为第二段的开始自动结束第一段，如“p第一段p第二段/p”，当然结束标记也可以不省略。p的常用属性align，用来设定段落的对齐方式，可取属性值有： 1) left：左对齐。 2) center：居中对齐。 3) right：右对齐。 排版标记 br br称为换行标记，在网页设计中比较常用。它的作用就是换行，这一点与p相同，与p不同的是换行后行之间不留空白行，页面看起来比较紧凑。br属于空标记，没有结束标记。 排版标记 pre pre称为预格式化标记，它的作用是按原始代码的排列方式显示内容。通常情况下，浏览器显示时会忽略内容中的空白及换行，而pre与/pre之间的空白及换行会被保留。 排版标记 hr hr称为水平线标记，可以在页面中产生一条水平线，属于空标记，没有结束标记。hr的常用属性有： 1) align：用来设定水平线的对齐方式，可取属性值有：left、center、right。 2) width：用来设定水平线的水平长度，属性值可以是绝对值或相对值，如width=300表示长度为300像素，是绝对长度，width=50%表示水平长度为上一级容器水平总长度的一半，是相对长度 排版标记 hr 3) size：用来设定水平线的厚度，属性值为整数，单位为像素，如size=4。 4) color：用来设定水平线的颜色。 5) noshade：水平线默认为立体显示，具有阴影，加上此属性可删除水平线阴影，如hr noshade 排版标记 center center称为居中标记，可以使标记的内容居中显示，属于围堵标记，使用时需要结束标记。 排版标记 排版标记 排版标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 字体列表标记 创建表格 表格是一种在网页上组织和显示信息的强大的工具,表格标记对于制作网页是很重要的，现在很多很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意的进行背景和前景颜色的设置。 通过使用表格，可以用简洁明了的格式显示详细数据、