《Web页面制作基础》PPT课件.ppt

第2章Web页面制作基础 2 1HTML语言概述2 2文档的格式与风格2 3加入多媒体与超级链接2 4制作表格2 5制作表单2 6框架结构2 7CSS基础 2 1HTML语言概述 WWW WorldWideWeb 万维网 拉进了人们彼此间的距离 使得人与人之间的信息交流变得更加简便和快捷 WWW上的信息 大部分是通过HTML语言发布的 本章首页 2 1HTML语言概述 2 1 1HTML概述HTML是 HyperTextMarkupLanguage 超文本标记语言 的缩写 最早源于SGML语言 HTML用来表示网上信息的符号标记语言 在WWW上 发布信息通常使用HTML 它是Web页面的基础 任何一个Web页面都离不开HTML 而且HTML也是Web应用开发的基础 HTML语言是大多数浏览器都能识别的语言 使用HTML语法规则建立的文本可以运行在不同的操作系统平台上 而且能被大多数用户所接受 2 1HTML语言概述 2 1 2文档的结构头部信息正文部分 文件开头和结尾由和来标记 和标记头部 用来包含文件的基本信息 和标记正文部分 是整个文件的主体部分 2 1HTML语言概述 这是标题部分 你好 这是正文部分 2 1HTML语言概述 2 1 3HTML标记1 HTML文档标记格式 功能 标志文档开始和结尾的标记 2 HTML文件头标记格式 功能 用于包含文件的基本信息 3 HTML文件主体标记格式 功能 文件主体标记 2 1HTML语言概述 2 1 4常用HTML编辑工具任何一个文档编辑器都是HTML编辑器 为了减少网页设计师的工作 使设计网页更加的方便 很多公司设计了专用的网页编辑器 像Dreamweaver FrontPage CutePage QuickSite等 是专门用来制作网页的 利用它们可以很容易的编写出精美的网页 具有所见即所得的功能 所谓所见即所得 就是在编辑网页时看到的效果 与使用浏览器时显示的效果基本一致 2 2文档的格式与风格 在大多数网页中 文档是核心的内容 只有设置适当的文档格式 才能得到绚丽多彩的网页 设置文档的格式包括 设置标题和文字的字体 字号 字型 颜色 段落格式 文本布局等 本章首页 2 2文档的格式与风格 2 2 1设置的属性 2 2文档的格式与风格 2 2 2段落格式化1 标题标记格式 功能 设置各种大小不同标题的标记 2 段落标记格式 功能 设置段落标记 3 注释标记格式 功能 注释标记 2 2文档的格式与风格 4 分区显示标记格式 功能 分区显示标记 5 换行标记格式 功能 强制换行 6 水平线标记格式 功能 插入水平线标记 2 2文档的格式与风格 标记的使用三种标记的使用 我在中间 中间我在左边 左边我在右边 右边 2 2文档的格式与风格 2 2 3建立列表1 有序列表格式 type属性 数字 1 2 大写英文字母 A B 小写英文字母 a b 大写罗马字母 I II 和小写罗马字母 i ii 默认的序号是数字 2 2文档的格式与风格 2 2 3建立列表2 无序列表格式 type属性 可以为disc 实心圆点 circle 空心圆点 square 方块 和自定义图片 默认为实心圆点 2 2文档的格式与风格 2 2 3建立列表3 自定义列表格式 定义列表 定义列表项 项目会自动换行并左对齐 但项目间没有空行 用来定义语句 2 2文档的格式与风格 2 2 4字符的格式化1 字体设置标记格式 功能 设置字体格式标记 2 2文档的格式与风格 2 2 4字符的格式化2 其他标记 2 3加入多媒体与超级链接 图像的出现为本来单调乏味的网络世界增添了一道亮丽的风景线 图像在网页设计中是必不可少的 所以用户应该掌握在网页中操作图像的方法 本章首页 2 3加入多媒体与超级链接 插入多媒体的一般形式 格式 功能 在网页中加入图像 视频 动画等 2 3加入多媒体与超级链接 1 插入图像 2 3加入多媒体与超级链接 2 插入视频 2 3加入多媒体与超级链接 2 3 2加入超级链接格式 功能 在当前页和其他页间建立超链接 如 超级链接如 超级链接 超级链接 超级链接可以指向E mail地址如 指向E mail地址的超级链接超级链接可以指向页面内部链接 锚点链接 指向本页面锚点aa的超级链接 2 4制作表格 表格可以把文字和图片等内容按照行和列排列起来 可以用来建立主页的框架 使得整个网页更加清晰和条理化 有利于信息的表达 本章首页 2 4制作表格 2 4 1建立表格格式 2 4制作表格 2 4 2定制表格格式 功能 定义表格的一行 格式 功能 定义单元格 2 5制作表单 表单是用户和Web应用程序 Web数据库等进行交互的界面 在Web上 通过表单可以完成用户和计算机或服务器之间进行的信息交换 本章首页 2 5制作表单 Method属性的两个方法 GET方法 将表单数据附加在Action属性指定的URL地址之后 并在URL地址与表单数据间加上一个 分割符 表单的各个数据项间用 分割符 http localhost test asp txtid 012 txtusename ucauGET方式一次最多只能提交256个字符 POST方式是将表单数据作为一个独立的数据块在后台直接发送给服务器 2 5制作表单 2 5 1表单的结构格式 功能 定义表单 2 5制作表单 2 5 2FORM中常用的标记1 输入域 1 单行输入域 格式 2 5制作表单 1 text类型 2 password类型 3 radio类型 4 checkbox类型 5 submit类型 6 reset类型 7 button类型8 hidden类型 1 文本框 文本框的名字 text password hidden 默认值 长度 最大输入字符数 常用标记 表单对象标记 2 单选框 RadioButton 一个表单里的所有变量名相同的单选框只能够有一个被选中 男女各个选项的name必须一样 而value不一样才能达到预期效果 常用标记 表单对象标记 3 复选框 Checkbox 在一个表单里的所有多选框可以有一个或多个被选中 常用标记 表单对象标记 2 5制作表单 2 多行输入域 格式为 功能 定义多行文本输入域 2 5制作表单 2 按钮格式 功能 定义按钮 4 按钮包括普通按钮 重置按钮和提交按钮 常用标记 表单对象标记 2 5制作表单 3 选择域格式 选项一选项二 功能 定义选择栏 属性 属性 5 下拉列表基本语法硕士以上大学本科大专中专以下 3 常用标记 表单对象标记 综合练习 试在当前页面中设计一名为userinfo的表单 用以收集用户的资料 并将其提交给userlogin asp页面处理 界面如下 3 常用标记 表单对象标记 2 6框架结构 2 6 1框架结构的文件格式 本章首