《网页设计ppt》由会员分享，可在线阅读，更多相关《网页设计ppt（138页珍藏版）》请在金锄头文库上搜索。
1、课题目标 n解释什么是HTML nHTML特点 n解释HTML文档结构 nHTML文档中各标记的使用 n网页页面的背景色 n 超链接 n 字体样式 n 有序 无序列表 n 图像 n 表格 初识HTML nHTML是使用SGML 标准通用标记语言 定义的 它提供了一种将文本 图象 声音 动画结合在一个 称为网页的文档中的方法 nHTML Hypertext Markup Language 超文本标记语言 nHTML基于两个概念 n超文本 它提供了一种将同一文档不同部分或不同 文档之间的信息联系起来的机制 n标记语言 标记指的是HTML文档中的一些特殊的 标记 这些标记 标识符 用于控制网页出版的
2、文 档格式 字符格式 段落格式等 还包括为达到网 页交互效果而对脚本语言 java小程序等的支持和 调用 HTML的特点 nHTML是一个简单但功能强大的语言 它的简单性使 得任何人都可以利用它来创建自己的网页 n通过超链接和URL 一个网页可以和其它网页相互连 接起来 这样 使用者只要单击相应的超链接就可以 访问其它网页中的相关信息 n利用URL HTML甚至可以通过Telnet WAIS Gopher FTP Usernet或Email链接到其它文档 nHTML允许在HTML文档中结合多媒体文件 如果浏览 器可以播放音频或视频文件 那么使用者可以通过单 击来欣赏它们 n可以使用任何一个文本
3、编辑器进行编写 动态HTML DHTML n动态HTML是一种概念 是一种通过各种技术的综合发展 而得以实现的 概念 n动态HTML包括3部分内容 HTML规范 Script语言 javaScript和VBScript 其中javaScript使用更为广泛 n和CSS Cascading Style Sheets 层叠样式表 HTML文档的结构 我的第一个HTML文件 文件头 HTML还是很好学的 我的第一个网页 头 主体 HTML文档的结构 n一个HTML文档由一系列标识符组成 这些标识符均包含 在尖括号中 而且成对出现 n一个HTML文档总是由标识符开始 结束 当中包含两大部份 n头部 n
4、主体 HTML文件示例 文件源代码如下 我的第一个HTML文件 文件头 HTML还是很好学的 我的第一个网页 例2 1 HTML语言语法 每个标记都括在一对尖括号内 标记都有一个开始标记和一个结束标记 有些标记不需要结束标记 如 标记名不区分大小写 但是通常用大写以和普通正 文区分 标记可以有属性的取值 如 有时需要在一对标记内嵌入其它的标记对以取得所 需的显示效果 在HTML文档中进行注释 使用 在脚本代码中使用 文档头部分使用的标识符 n1 指示文档的标题 n2 有两个属性 name 和 http equiv nname属性用于描述网页 nhttp equiv属性相当于http文件头 可以
5、直接影响网页的传输 n例 n说明生成工具 n关键词 n对主页进行描述 n所用文字及语言 等 n 补 网页的页面属性 n背景色 背景图片 网页文字颜色 链接颜色 n n属性值 nbgcolor 背景色 ntext 非可链接文字的颜色 nlink 可链接 文字的颜色 nalink 正被单击的可链接文字的颜色 n vlink 已经单击 访问 过的可链接文字的颜色 n 代表颜色 用16进制的 红 绿 蓝 来表示 n如link 0000ff 蓝色 ff0000红 00ff00绿 nred green blue yellow white black gray teal青蓝色 naqua浅蓝色 lime浅绿
6、色 olive橄榄色 maroon栗色 n fuchsia紫红色 purple紫色 链接 n跳转到不同网页 n n跳转到同一网页不同位置 n 要使用链接的地方 n 在链接到的地方 n链接标识符有3个属性 如下 href 链接所指向的文件的地址 name 引用锚点的名称 target 打开链接的目标窗口 字体样式 n1 标题字体 大字号 n2 字号 字形 颜色 n nSize 1 7 nFace 楷体 隶书 黑体 Arial等 nColor 16进制颜色值 n3 特殊字体 n粗体 上标 n斜体 下标 n下划线 删除线 网页布局 n1 设置标尺线 n 设置标尺线的粗细 单位为像素 n 设置宽度 单
7、位为像素或者窗口的百分比 n 设置对齐方式 left right center n2 行的控制 n换行 n段落 n强制一行文字不换行 n文字的分区显示 网页布局 n3 对齐方式 n n 值 left right center n n n4 列表 n无序列表 n有序列表 网页布局 n无序列表 n n 第一列 实心园点 n 第二列 空心圆圈 n 第三列 实心方块 n n 网页布局 n有序列表 n n 大写字母A B n 小写罗马数字i ii n 大写罗马数字I II n 小写字母a b n 阿拉伯数字1 2 n n 从5开始 n从D开始 图像 nHTML文档支持的图像文件类型目前有3种 n bmp
8、文件 存储空间大 传输不够快 不常用 n jpg文件 常用 n gif文件 常用 具有256色显示 存储空间小 支持动 画效果 背景色可透明 n nsrc 图像的URL nalt 在不支持图像的浏览器中显示的文字串 nalign 图像的对齐方式 nwidth height 图像显示的宽度和高度 nborder 图像的边框宽度 表格 n基本语法 n 开始表格 n 表格标题 n 定义表行 n 定义表头 可省 n n n 定义表元 n n 表格外观 n1 边框尺寸 n nborder取值设置边框 默认值是0 没有有边框 n2 表格尺寸设置 n n属性值的单位为像素或者百分比 n3 表元间隙 表元内部
9、空白设置 n各个单元格之间的间隔距离 n单元格边框和单元内容的间隔 n单位为像素 表格的标题 n表格表题 n align属性表示表格标题与表格的水平对齐方式 n left 左对齐 n center 居中对齐 n right 右对齐 n valign属性表示表格标题与表格的纵向对齐方式 n top 标题在上 默认值 n bottom 标题在下 表格的背景颜色和背景图像 n n n或 n n n或 n n n或 n n 表格边框的颜色 n n表格边框颜色的亮度基本语法 n n n 取值都是16进制RGB颜色数码 FoodDrinkSweet data1data2data3 表格边框的显示状态 n显
10、示全部边框 n只显示上边框 n只显示下边框 n只显示上下边框 n只显示左边框 n只显示右边框 n只显示左右边框 n全部边框都不显示 表格中分隔线的显示 n显示所有分隔线 n只显示行与行的分隔线 n只显示列与列的分隔线 n所有分隔线都不显示 FoodSweet AB 跨多行多列的表格 n定义跨多列的表格语法 n n或 n n n为要跨的列数 n定义跨多行的表格 语法 n n或 n 控制表格内文字的布局 n水平对齐 n left n center n right n纵向对齐 n top n middle n bottom n表格在网页中的布局 n 总结 n什么是HTML nHTML的特点 nHTM
11、L语言的结构和特点 nHTML语言中的各标记符 n 网页页面的背景色 n 超链接 n 字体样式 n 有序 无序列表 n 图像 n 表格 第二章 多窗口结构和表单 课题目标 n多窗口结构 n表单 n 文本框 n 提交和重置按钮 n 下拉选择框 n 复选框 n 单选按钮 多窗口结构 n使用框架 frame 可以实现多窗口结构 n基本语法如下 n和 标识框架 n 指出框架中显示的文件的地址 n和 用于不支持框架结构的浏览 器 n n n n n n n 设置各窗口的尺寸 n纵向排列多个窗口的基本语法 n n横向排列多个窗口的基本语法 n n赋值方式 n 以像素为单位 如50 50 50 n 以占浏览
12、窗口的百分比为单位 如 30 20 n 倍数关系 如 1 1 2 n其中 表示取剩余值 框架各窗口之间的关系 n框架结构的每一个窗口都可以有一个名字 每个窗口中的 链接都可以在框架结构中的任何一个窗口中打开 这利用 链接的target属性实现 n n特殊值 nTarget blank 链接目标网页在新窗口中打开 nTarget self 链接目标网页在本窗口中打开 nTarget parent 链接目标网页在父窗口中打开 nTarget top 链接目标网页在整个浏览器窗口中打开 设置边框的外观 n1 各窗口边框的有无 n n yes no 或者1 0 默认是有 yes或1 n2 各窗口间空白
13、区域大小 n n3 边框颜色 n n4 滚动条的有无 n yes no auto 默认值 n案例 表单 Form n表单是一个网页上表单域的一个集合 n表单可以使网页具有交互性 n表单有一个表单处理程序 它是从表单收集信息的方法 一旦用户提交了表单 表单处理程序就开始运作 表单处 理程序是表单上数据的脚本 它可以 n存储用户在表单域中提交的数据 n使用用户提交的数据更新数据库 n将数据传递到站点上的一个Web页 Form的基本结构 nForm都是以标识符开始 以标识符结束 n可以将多个form元素放在同一对标识符和 中 不必加一个元素就放一对标识符 n有4种基本的标识符 n 产生收集简单信息的
14、form形式 radio check n 产生下拉菜单的form形式 n 给出每个菜单选项 n 产生用于多行文本输入的form形式 Form的基本结构 n form的基本结构如下 n n n n n其中 的取值有 text password checkbox radio image hidden submit reset n 的取值用于脚本进行相应处理时的识别名称 即表单处 理程序中用的 表单元素 下拉菜单 n n n 内容1 n 内容2 n n n nSize value multiple text selectedIndex options n 表单元素 复选框 n nMake coffe
15、e nSpill coffee nOutlaw smiling nStart rumors about Kristin nTalk about Mart with Matt nLook over n 表单元素 单选按钮 n n香蕉 n苹果 n桔子 n n可以用checked属性设置单选按钮中默认的被选取选项 表单元素 按钮 n 普通按钮 n n nSubmit可以直接向服务器传送信息 nreset可以重新设置 n图像化按钮 n n align center top bottom 图像与文本的当前行的对齐方式 表单元素 文本输入 n文字输入的基本语法 n n密码输入的基本语法 nvalue可省
16、n设置输入框的宽度的基本语法 n n设置输入内容的最大输入宽度基本语法 n 表单元素 文本输入 nForm的元素可以设置为隐藏 基本语法如下 n n nHere is a hidden element n n 表单元素 文本输入 n设置较大的文本输入区域基本语法为 n nrows属性值为行数 cols属性值为列数 n可以设置对输入文本是否进行换行 默认值是不换行 n n软换行 n n硬换行 n 设置移动的文字 Marquee 基本语法 设置文字移动的方向 direction属性 left right up down 设置文字移动的方式 behavior属性 scroll slide alternate 设置文字的循环次数 loop属性 数值 若未指定或取值为infinite则循环不止 设置移动的文字 Marquee n设置文字移动的速度 nScrollamount属性 数值 象素 n设置文字的移动延时 nScrolldelay属性 单位毫秒 n设置移动文字的外观 nbgcolor属性 16进制数表示的RGB的颜色值 n设置移动文字的宽度 高度 n height width属性 单位象素
