网页设计-文档资料.ppt

1,课题目标,解释什么是HTML HTML特点 解释HTML文档结构 HTML文档中各标记的使用 网页页面的背景色 超链接 字体样式 有序、无序列表 图像 表格,2,初识HTML,HTML是使用SGML（标准通用标记语言）定义的，它提供了一种将文本、图象、声音、动画结合在一个称为网页的文档中的方法 HTML（Hypertext Markup Language)超文本标记语言 HTML基于两个概念： 超文本：它提供了一种将同一文档不同部分或不同文档之间的信息联系起来的机制 标记语言：标记指的是HTML文档中的一些特殊的标记这些标记（标识符）用于控制网页出版的文档格式、字符格式、段落格式等，还包括为达到网页交互效果而对脚本语言、java小程序等的支持和调用,3,HTML的特点,HTML是一个简单但功能强大的语言它的简单性使得任何人都可以利用它来创建自己的网页 通过超链接和URL，一个网页可以和其它网页相互连接起来这样，使用者只要单击相应的超链接就可以访问其它网页中的相关信息 利用URL，HTML甚至可以通过Telnet、WAIS、Gopher、FTP、Usernet或Email链接到其它文档 HTML允许在HTML文档中结合多媒体文件。

如果浏览器可以播放音频或视频文件，那么使用者可以通过单击来欣赏它们 可以使用任何一个文本编辑器进行编写4,动态HTML(DHTML),动态HTML是一种概念，是一种通过各种技术的综合发展而得以实现的 概念 动态HTML包括3部分内容：HTML规范、Script语言（javaScript和VBScript，其中javaScript使用更为广泛） 和CSS(Cascading Style Sheets 层叠样式表）5,HTML文档的结构,6,HTML文档的结构,一个HTML文档由一系列标识符组成，这些标识符均包含在尖括号中，而且成对出现 一个HTML文档总是由标识符开始，结束，当中包含两大部份 头部： 主体：,7,HTML文件示例,文件源代码如下： 我的第一个HTML文件 文件头 HTML还是很好学的 我的第一个网页 例2-1,8,HTML语言语法,每个标记都括在一对尖括号内 标记都有一个开始标记和一个结束标记 有些标记不需要结束标记，如 标记名不区分大小写，但是通常用大写以和普通正文区分 标记可以有属性的取值 如 有时需要在一对标记内嵌入其它的标记对以取得所需的显示效果 在HTML文档中进行注释，使用 在脚本代码中使用//,9,文档头部分使用的标识符,1、指示文档的标题。

2、 有两个属性：name 和 http-equiv name属性用于描述网页 http-equiv属性相当于http文件头，可以直接影响网页的传输 例： 说明生成工具 关键词 对主页进行描述 所用文字及语言等 补,10,网页的页面属性,背景色、背景图片、网页文字颜色、链接颜色 属性值: bgcolor:背景色 text: 非可链接文字的颜色 link:：可链接 文字的颜色 alink:正被单击的可链接文字的颜色 vlink：已经单击（访问）过的可链接文字的颜色 # 代表颜色，用16进制的“红-绿-蓝”来表示 如link=#0000ff 蓝色 ff0000红 00ff00绿 red green blue yellow white black gray teal青蓝色 aqua浅蓝色 lime浅绿色 olive橄榄色 maroon栗色 fuchsia紫红色 purple紫色,11,链接,跳转到不同网页 .. 跳转到同一网页不同位置 . 要使用链接的地方 .,在链接到的地方 链接标识符有3个属性，如下：href: 链接所指向的文件的地址name: 引用锚点的名称target: 打开链接的目标窗口,12,字体样式,1、标题字体：大字号 2、字号、字形、颜色 Size: 17 Face:楷体、隶书、黑体、Arial等 Color:16进制颜色值 3、特殊字体 粗体 上标 斜体 下标 下划线 删除线,13,网页布局,1、设置标尺线 :设置标尺线的粗细，单位为像素 :设置宽度，单位为像素或者窗口的百分比 :设置对齐方式，left,right,center 2、行的控制 换行 段落 强制一行文字不换行 文字的分区显示,14,网页布局,3、对齐方式 .. .. #值：left, right, center .. 4、列表 无序列表 有序列表,15,网页布局,无序列表. 第一列（实心园点） 第二列（空心圆圈） 第三列（实心方块） ,16,网页布局,有序列表.. 大写字母A,B 小写罗马数字i,ii, 大写罗马数字I,II 小写字母a,b 阿拉伯数字1,2 从5开始 从D开始,17,图像,HTML文档支持的图像文件类型目前有3种： bmp文件 存储空间大，传输不够快，不常用。

jpg文件 常用 gif文件 常用，具有256色显示，存储空间小、支持动画效果、背景色可透明 src:图像的URL alt:在不支持图像的浏览器中显示的文字串 align:图像的对齐方式 width,height:图像显示的宽度和高度 border:图像的边框宽度,18,表格,基本语法： 开始表格 . 表格标题 定义表行 .定义表头（可省） .定义表元 ,19,表格外观,1、边框尺寸 border取值设置边框，默认值是0，没有有边框 2、表格尺寸设置 属性值的单位为像素或者百分比 3、表元间隙、表元内部空白设置 各个单元格之间的间隔距离 单元格边框和单元内容的间隔 单位为像素,20,表格的标题,表格表题 align属性表示表格标题与表格的水平对齐方式 left:左对齐 center:居中对齐 right:右对齐 valign属性表示表格标题与表格的纵向对齐方式 top:标题在上（默认值） bottom:标题在下,21,表格的背景颜色和背景图像, 或 或 或 ,22,表格边框的颜色, 表格边框颜色的亮度基本语法： #取值都是16进制RGB颜色数码,23,表格边框的显示状态,显示全部边框 只显示上边框 只显示下边框 只显示上下边框 只显示左边框 只显示右边框 只显示左右边框 全部边框都不显示,24,表格中分隔线的显示,显示所有分隔线 只显示行与行的分隔线 只显示列与列的分隔线 所有分隔线都不显示,25,跨多行多列的表格,定义跨多列的表格语法： 或 n为要跨的列数 定义跨多行的表格，语法： 或 ,26,控制表格内文字的布局,水平对齐 left center right 纵向对齐 top middle bottom 表格在网页中的布局 ,27,总结,什么是HTML HTML的特点 HTML语言的结构和特点 HTML语言中的各标记符 网页页面的背景色 超链接 字体样式 有序、无序列表 图像 表格,28,第二章,多窗口结构和表单,29,课题目标,多窗口结构 表单 文本框 提交和重置按钮 下拉选择框 复选框 单选按钮,30,多窗口结构,使用框架（frame)可以实现多窗口结构 基本语法如下： 和:标识框架 :指出框架中显示的文件的地址 和:用于不支持框架结构的浏览器 ,31,设置各窗口的尺寸,纵向排列多个窗口的基本语法： 横向排列多个窗口的基本语法： 赋值方式： 以像素为单位 如50，50，50 以占浏览窗口的百分比为单位 如：30%，20%，* 倍数关系 如：1，1，2 其中*表示取剩余值,32,框架各窗口之间的关系,框架结构的每一个窗口都可以有一个名字。

每个窗口中的链接都可以在框架结构中的任何一个窗口中打开这利用链接的target属性实现 特殊值： Target=_blank 链接目标网页在新窗口中打开 Target=_self 链接目标网页在本窗口中打开 Target=_parent 链接目标网页在父窗口中打开 Target=_top 链接目标网页在整个浏览器窗口中打开,33,设置边框的外观,1、各窗口边框的有无 #: yes no 或者1 0 默认是有（yes或1) 2、各窗口间空白区域大小 3、边框颜色 4、滚动条的有无 yes no auto(默认值) 案例,34,表单 Form,表单是一个网页上表单域的一个集合 表单可以使网页具有交互性 表单有一个表单处理程序，它是从表单收集信息的方法，一旦用户提交了表单，表单处理程序就开始运作，表单处理程序是表单上数据的脚本，它可以： 存储用户在表单域中提交的数据 使用用户提交的数据更新数据库 将数据传递到站点上的一个Web页,35,Form的基本结构,Form都是以标识符开始，以标识符结束 可以将多个form元素放在同一对标识符和中，不必加一个元素就放一对标识符 有4种基本的标识符： 产生收集简单信息的form形式，radio,check 产生下拉菜单的form形式 给出每个菜单选项 产生用于多行文本输入的form形式,36,Form的基本结构,form的基本结构如下： . 其中，*的取值有text,password,checkbox,radio,image,hidden,submit,reset **的取值用于脚本进行相应处理时的识别名称，即表单处理程序中用的。

37,表单元素下拉菜单, 内容1 内容2 .. Size,value,multiple,text,selectedIndex,options,38,表单元素复选框, Make coffee Spill coffee Outlaw smiling. Start rumors about Kristin Talk about Mart with Matt Look over ,39,表单元素单选按钮, 香蕉 苹果 桔子 可以用checked属性设置单选按钮中默认的被选取选项,40,表单元素按钮, 普通按钮 Submit可以直接向服务器传送信息 reset可以重新设置 图像化按钮 align: center,top,bottom（图像与文本的当前行的对齐方式）,41,表单元素文本输入,文字输入的基本语法： 密码输入的基本语法： value可省 设置输入框的宽度的基本语法： 设置输入内容的最大输入宽度基本语法： ,42,表单元素文本输入,Form的元素可以设置为隐藏，基本语法如下： Here is a hidden element. ,43,表单元素文本输入,设置较大的文本输入区域基本语法为： .. rows属性值为行数，cols属性值为列数 可以设置对输入文本是否进行换行，默认值是不换行 .. 软换行 .. 硬换行 ,44,设置移动的文字Marquee,基本语法： .. 设置文字移动的方向： direction属性：left,right,up,down 设置文字移动的方式： behavior属性：scroll,slide,alternate 设置文字的循环次数： loop属性：数值，若未指定或取值为infinite则循环不止,45,设置移动的文字Marquee,设置文字移动的速度： Scrollamount属性：数值（象素） 设置文字的移动延时： Scrolldelay属性：单位毫秒 设置移动文字的外观： bgcolor属性：16进制数表示的RGB的颜色值 设置移动文字的宽度、高度 height,width属性：单位象素或者百分比 hspace,vspace属性：文字周围的空白区域,46,、、,标识符用来定义Script脚本代码，所有脚本代码都要放入到和标识符中 标识符用来引用外部的Java Applet小程序 .. 标识符用来定义样式表代码,47,样式表简介,什么是样式表 用于描述文档如何在屏幕上显示 W3C推荐的样式表标准包括CSS和XSL CSS主要用于HTML XSL主要用于XML CSS是一种用来装饰HTML的标记集合，是对HTML标记的一种扩展。