第二讲、静态网页设计.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 创建超级链接 语法：a.../a 属性href：保存了链接所联系的地址。 创建文字链接是通过在a标记种插入文字来完成的。 a href=This is a link to sohu/a target=_blank a/a标签和Jscript和Vbscript结合使用的一些小技巧 创建表格 table????????? !--定义表格 tr???????????? !--定义表行 th/th????? th/th??????? !--定义表头 tr td/td td/td??????? !--定义单元格 /table 创建表单 表单：是浏览器用来收集用户的信息，实现与用户交互的场所。 表单的处理过程：当用户单击提交按钮时，输入在表单中的信息就会上传到服务器中，然后由服务器的有关程序进行处理，处理后将用户提交的信息存储在服务器端的数据库中，或者将有关信息返回到浏览器上。 表单FORM的语法： form action=活动 method=方法 各种表单域 …… input type=submitinput type=reset /form 表单的发送方法：决定表单的输入如何发送到服务器 get方法（缺省值）：把表单信息合并成一个字符串放在“action”所规定的URL的末尾发送给服务器。 post方法