Web页面制作基础.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设置的属性 内容 标签名称 bodybackground 1 jpg pic 1 jpg pic 1 jpg file d myweb pic 1 jpg 2 2文档的格式与风格 2 2 2段落格式化1 标题标记格式 功能 设置各种大小不同标题的标记 2 段落标记格式 功能 设置段落标记 3 预定义格式标记格式 2 2文档的格式与风格 4 分区显示标记格式 功能 分区显示标记 5 换行标记格式 功能 强制换行 6 水平线标记格式 功能 插入水平线标记 7 注释标记格式 功能 注释标记 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加入超级链接格式 功能 在当前页和其他页间建立超链接 2 4制作表格 表格可以把文字和图片等内容按照行和列排列起来 可以用来建立主页的框架 使得整个网页更加清晰和条理化 有利于信息的表达 本章首页 2 4制作表格 2 4 1建立表格格式 2 4制作表格 2 4 2定制表格格式 功能 定义表格的一行 格式 功能 定义单元格 2 4制作表格 2 4 2定制表格格式 功能 定义表格标题 可以通过align属性设置标题的对齐方式 2 5制作表单 表单是用户和Web应用程序 Web数据库等进行交互的界面 在Web上 通过表单可以完成用户和计算机或服务器之间进行的信息交换 本章首页 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 hidden类型 2 5制作表单 2 多行输入域 格式为 功能 定义多行文本输入域 2 5制作表单 2 按钮格式 功能 定义按钮 2 5制作表单 3 选择域格式 选项一选项二 功能 定义选择栏 属性 属性 2 6框架结构 2 6 1框架结构的文件格式 本章首页 注意 含有框架结构的网页其HTML的形式和一般的HTML文件相似 只是在文档中 若使用了 就不应该有标记 在老版本的浏览器可能不支持框架结构 2 6框架结构 2 6 2框架结构标记的使用格式 功能 定义一个框架容器 2 6框架结构 2 6 3FRAME标记格式 功能 在网页中定义框架 2 6框架结构 2 6 4TARGET属性的使用1 用于A标记2 用于BASE标记3 用于FORM标记 本章首页 2 7CSS基础 2 7 1CSS样式简介CSS CascadingStyleSheets 层叠样式表 又称格式页 是近几年才发展起来的新技术 它提供了很多的样式定义方式来辅助HTML 本章首页 2 7CSS基础 CSS样式CSS样式文本 arial 12pt normal blue 本章首页 2 7CSS基础 2 7 2CSS样式表的定义1 基本语法 选择符 属性 属性值 属性 属性值 如 p text align center color red font family 宋体 p table font size 12pt 2 类选择符 标签 属性名 属性 属性值 属性 属性值 或 属性名 属性 属性值 属性 属性值 如 定义 p left text align left 引用 选择符 选择符名称 属性 属性值 属性 属性值 如 定义 left font size 24 text align left 引用 本章首页 2 7CSS基础 1 通过HTML标记定义定义任何一个HTML标记 定义时在属性和属性值之间用 隔开 当有多重属性时 使用 进行分隔 2 用id属性定义样式表id以 开头 把标准的属性和属性值写入大括号内 id属性的作用是 在调用JavaScript语言时 作为一个独立的名称来识别网页中的一个元素 如果不是因为要在网页中使用JavaScript语言 这种标记应尽量少用 因为它具有一定的局限性 3 使用class定义样式表使用class的方法和id的方法基本相同 class以 开头 然后再把标准的属性和属性值写入大括号内 2 7CSS基础 2 7 3在HTML中加入CSS的方法1 嵌入式样式表2 内联式样式表3 外联式样式表4 输入式样式表 本章首页