静态网页设计.pptVIP

第二章 静态网页设计 学习要求 掌握HTML的基本概念 掌握HTML的框架及其基本元素 学习重点 表格（table）标签的使用 表单（form）的使用 Html结合脚本语言的一些常用小技巧 HTML-Internet中的语言 HTML(HyperText Markup Language):超文本标记语言(WWW上通用的发布语言) 功能： 使用各种基础的印刷元素例如标题、文字、表格、列表、照片、插图等来发布在线的文档。 通过超文本链接使用户能够方便地在各种信息之间切换。 设计一种表单控件来控制网上的各种传输、远程服务等功能，象查询信息、订购货物等。 在文档中可以直接包含视频剪辑、音效片断和其他的应用程序。 HTML简史 Tim Berners-Lee最初在CERN开发了HTML，这种语言由于NCSA的Mosaic浏览器使用而广为流传。 20世纪90年代，Web网络的兴起，使得HTML空前繁荣，HTML被发展成了许多个版本。 制作公认的HTML语言规范： IETF HTML 2.0 W3C HTML 3.2 HTML 4.0 HTML文件 纯文本文件，以htm或html为扩展名，除了一些基本的文字外还包含了一些标签。 浏览器对这些标签进行解释，显示出文字、图像、动画以及播放出声音。 查看HTML源代码 在浏览器中打开一个网页 点击“查看”菜单项 点击“源代码”项 一个独立窗口就把创建此网页的源代码显示出来 例2_01 使用HTML创建基本网页 HTML编辑器 记事本（以html或htm作为文件扩展名保存） 可视化网页编辑器 Microsoft FrontPage 2000 Macromedia Dreamweaver HTML组成  标记? / 元素（标签） 属性 构建网页框架 html ?head ?title/title ?/head ?body ?/body ?/html html/html：标识网页的开始和结束 headtitle/title/head：头部字段 包含一些不出现在浏览器中的网页信息（除了不可缺省的title元素） 注：title标记用以区别网页，当网页载入浏览器之后，其标题出项在标题域中。 ??? head标记必须出现在html标记的开始符号之后，而在主体部分之前 body/body：主体部分 存放页面的内容标识 加入HTML注释：用!--and--标记将注释文字括起来，此标记可以跨行使用。 创建文本 控制文本显示的常用标记： 换行标记br：标记后的正文不另起一行，显示效果上另起一行。 段落标记p：标记后面的正文将另起一段。 p的唯一属性是align，用以调准文字位置（left，center，right）。 添加标题h1h2h3h4h5h6： 所有的标题均以粗体显示。 不同的标记代表不同的标题尺寸：h1最大，h6最小。 标题标记也包含align属性，使标题文字在水平方向对齐。 创建文本 改变文字外观font： size属性：定义域是从1到7，7最大。也可以在尺寸标示符前加“+”、“-”号以从默认位置的尺寸开始来增减现有尺寸。 color属性：规定了文本的颜色。 face属性：改变文字的显示方式。给出了一个用逗号分割的字体样式列表，各种字体是按作者的喜好程度排列的。如果浏览器没有列表中的第一种字体，则会依次选用第二种，第三种……。 应用粗体和斜体bi 加入图像 语法：img 属性： src：规定了图像的位置。 alt=text：替换文本。目前，大部分浏览器支持.gif和.jpg文件。alt属性给出了不可装载图像的替换文本。有效的替换文本应给出图像的功能而不是图像的描述。 width和height：如果不使用这些尺寸，浏览器将以默认尺寸（图像初始保存时的大小）显示图像。 align对齐图像：改变图像水平（left、right）和垂直（top、middle、bottom）的对齐方式。 hspace和vspace：定义在文字和图像之间的空格数目（与空格象素的数目有关）。 创建超级链接 语法：a.../a 属性href：保存了链接所联系的地址。 创建文字链接是通过在a标记种插入文字来完成的。 a href=This is a link to sohu/a target=_blank a/a标签和Jscript和Vbscript结合使用的一些小技巧 创建列表 无序列表： 语法：ul.../ul 内容：包含一个或多个li元素来定义列表项。 type属性：编号样式。取值disc|square|circle（实心圆|方框|空心圆）。 有序列表： 每个元素按数字顺序标号。 语法：ol.../ol 内容：包含一个或多个li元素来定义列表项。 type属性：编