html网页设计教程(推荐).ppt

HTML网页设计教程 HTML的英语意思是 HypertextMarkedLanguage 即超文本标记语言 是一种用来制作超文本文档的简单标记语言 Html的概念 所谓超文本 是因为它可以加入图片 声音 动画 影视等内容 事实上每一个HTML文档都是一种静态的网页文件 这个文件里面包含了HTML指令代码 这些指令代码并不是一种程序语言 它只是一种排版网页中资料显示位置的标记结构语言 易学易懂 非常简单 如何创建一个HTML文档 HTML只是一个纯文本文件 创建一个HTML文档 只需要两个工具 一个是HTML编辑器 一个WEB浏览器 编辑 HTML编辑器是用于生成和保存HTML文档的应用程序 记事本 word Frontpage Dreamweaver浏览 WEB浏览器是用来打开WEB网页文件 提供给我们查看WEB资源的客户端程序 HTML文档的基本结构 开始标签一个简单的HTML示例欢迎光临我的主页结尾标签 如何保存和编辑html文件 在记事本里输入html文件代码保存成 html或 htm为扩展名的文件 如果要修改编辑 在菜单里打开 查看 源文件 修改完后再保存 Meta标签 Meta about 关于 关于文档的概要信息 比如说作者 关键字 内容提要 编码等信息 比如gb3212是编码信息 简体中文Big5 繁体中文Author password 标签 和是嵌套在头部标签中的 标签之间的文本是文档标题 它被显示在浏览器窗口的标题栏 HTML的标签分单标签和成对标签两种 成对标签是由首标签和尾标签组成的 成对标签的作用域只作用于这对标签中的文档 无标题文档 html的主体标签 在和中放置的是页面中所有的内容 如图片 文字 表格 表单 超链接等设置 标签有自己的属性 设置标签内的属性 可控制整个页面的显示方式 标签的属性 属性描述Background设定页面背景图像bgcolor设定页面背景颜色leftmargin设定页面的左边距 像素 Topmargin设定页面的上边距Bgproperties fixed 设定页面背景图像为固定 不随页面的滚动而滚动Text设定页面文字的颜色格式 颜色的设定 两种方法 1 颜色值的关键字 比如white black red green blue等 2 颜色是由 red green blue 三原色组合而成的 用6位的十六进制值表示 rrggbb 如 红色 red ff green 00 blue 00 RGB值即为 ff0000绿色 red 00 green ff blue 00 RGB值即为00ff00蓝色 red 00 green 00 blue ff RGB值即为0000ff 颜色的设定 2 黑色 red 00 green 00 blue 00 RGB值即为000000例如 白色 red ff green ff blue ff RGB值即为ffffff应用时常在每个RGB值之前加上 符号 如 bgcolor 336699 用英文名字表示颜色时直接写名字 如bgcolor green 文字版面的编辑 换行标签换行标签是个单标签 也叫空标签 不包含任何内容 不换行标签预排版标签 缩排标签 段落标签及属性 由标签所标识的文字 代表同一个段落的文字 它可以单独使用 也可以成对使用 两种格式 显示一个空行 标签的属性 其中 Align是标签的属性 参数的取值为 Left左对齐Center居中对齐Right右对齐 居中对齐标签center 格式 水平分隔线标签 标签是单独使用的标签 是水平线标签 用于段落与段落之间的分隔 使文档结构清晰明了 使文字的编排更整齐 标签的属性 size设置水平分隔线的粗细pixel 像素 2width设置水平分隔线的宽度pixel 像素 或百分比 默认值为100 Align left center right设置水平分隔线的对齐方式默认值为center4 color设置水平分隔线的颜色 默认值为black5 noshade取消水平分隔线的3d阴影 文字的设置 主要内容标题字标记字体标记文字的修饰标记 标题字标记 n的取值为1 2 3 4 5 6 分别表示一级 二级 六级标题 字体由大到小 Hn的对齐属性 字体标记 用 标记可以更改页面中的字体 字号和颜色 其属性为 Face 字体 如 宋体 黑体 Size 字号 取值为1到7 1最小 7最大 默认值为3Color 颜色示例 文字的修饰标记 粗体 斜体 上标 下标 大字号 将当前字加大一号小字号 将当前字缩小一号 文字的修饰标记 2 下划线 删除线 等宽字 特殊符号 空格符 注释标记 或 建立列表 本节要点 list 列表的标记无序列表有序列表嵌套列表 在html页面中 合理的使用列表标签可以起到提纲和格式排序文件的作用 列表分为两类 一是无序列表 一是有序列表 无序列表就是项目各条列间并无顺序关系 纯粹只是利用条列来呈现资料而已 此种无序标签 在各条列前面均有一符号以示区隔 有序条列就是指各条列之间是有顺序的 比如从1 2 3 一直延伸下去 无序列表 无序列表使用的一对标签是 无序列表指没有进行编号的列表 每一个列表项前使用 的属性type有三个选项 disc实心圆 默认值circle空心圆square小方块如果不使用其项目的属性值 即默认情况下的会加 实心园 颜色红色绿色蓝色紫色 格式1 第一项第二项第三项格式2第一项第二项第三项 有序列表 有序列表和无序列表的使用格式基本相同 它使用标签 每一个列表项前使用 列表的结果是带有前后顺序之分的编号 如果插入和删除一个列表项 编号会自动调整 顺序编号的设置是由的两个属性type和start来完成的 start n开始的数字 如start 2则编号从2开始 如果从1开始可以省略 或是在标签中设定value n 改变列表行项目的特定编号 例如 type 用于编号的数字 字母等的类型 如type a 则编号用英文字母 为了使用这些属性 把它们放在或的初始标签中 type类型描述type 1表示列表项目用数字标号 1 2 3 默认值type A表示列表项目用大写字母标号 A B C type a表示列表项目用小写字母标号 a b c type I表示列表项目用大写罗马数字标号 type i表示列表项目用小写罗马数字标号 i ii iii 定义列表 定义列表的标记也叫描述性列表 定义列表默认为两个层次 第一层为列表项标签 第二层为注释项标签 列表列表是 示例 定义性列表定义性列表WWW WWW是 Worldwideweb 的缩写 也可简写web WWW WWW又叫万维网 WWW internet提供的最常用的服务是WWW 建立超链接 本节要点关于超链接链接标记内部链接的建立书签链接的建立外部链接的建立 关于超链接 HTML文件中最重要的应用之一就是超链接 超链接 hyperlink 是一个网站的灵魂 web上的网页是互相链接的 单击被称为超链接的文本或图形就可以链接到其它页面 超文本具有的链接能力 可层层链接相关文件 这种具有超级链能力的操作 即称为超链接 超链接除了可链接文本外 也可链接各种媒体 如声音 图像 动画 通过它们我们可享受丰富多采的多媒体世界 建立超链接的标签和 格式为 超链接名称说明 标签表示一个链接的开始 表示链接的结束 属性 HREF 定义了这个链接所指的目标地址 目标地址是最重要的 一旦路径上出现差错 该资源就无法访问 建立目标窗口的属性 target属性值描述 parent在上一级窗口中打开 一般使用分帧的框架页会经常使用 blank在新窗口打开 self在同一个帧或窗口中打开 这项一般不用设置 top在浏览器的整个窗口中打开 忽略任何框架 链接路径 每一个文件都有自己的存放位置和路径 理解一个文件到要链接的那个文件之间的路径关系是创建链接的根本 URL UniformResourceLocator 中文名字为 统一资源定位器 指的就是每一个网站都具有的地址 同一个网站下的每一个网页都属于同一个地址之下 例如 新浪网的网址 路径可以分以下三种 绝对路径如 相对路径如 news index html根路径如 如 web highight shouey html或d web news index html 1 绝对路径 绝对路径 包含了标识INTERNET上的文件所需要的所有信息 包括完整的协议名称 主机名称 文件夹名称和文件名称 2 相对路径 相对路径是以当前文件所在路径为起点 进行相对文件的查找 一个相对的URL不包括协议和主机地址信息 表示它的路径与当前文档的访问协议和主机名相同 甚至有相同的目录路径 通常只包含文件夹名和文件名 甚至只有文件名 可以用相对URL指向与源文档位于同一服务器或同文件夹中的文件 此时 浏览器链接的目标文档处在同一服务器或同一文件夹下 相对路径分三种情形如果链接到同一目录下 则只需输入要链接文件的名称 要链接到下级目录中的文件 需先输入目录名 然后加 再输入文件名 要链接到上一级目录中文件 则先输入 再输入文件名 相对路径的用法 相对路径名含义herf shouye html shouye html是本地当前路径下的文件herf web shouye html shouye html是本地当前路径下称做 web 子目录下的文件herf shouye html shouey html是本地当前目录的上一级子目录下的文件herf shouye html shouye html是本地当前目录的上两级子目录下的文件 相对路径的具体的链接方法 如图示 当前页面被链接页面超链接2 1 html3 1 html超链接元素3 1 html1 1 html超链接元素sy html1 1 html超链接元素2 1 htmlsy html超链接元素1 1 htmlsy html超链接元素sy html2 1 html超链接元素 3 根路径 根路径目录地址同样可用于创建内部链接 但大多数情况下 不建议使用此种链接形式 根路径目录地址的书写也很简单 首先以一个斜杠开头 代表根目录 然后书写文件夹名 最后书写文件名 链接本地机器上的文件时 应该使用相对路径还是根路径 在绝大多数情况下使用相对路径比较好 例如 用绝对路径定义了链接 当把文件夹改名或者移动之后 那么所有的链接都要失败 这样就必须对你的所有html文件的链接进行重新编排 而一旦将此文夹件移到网络服务器上时 需要重新改动的地方就更多了 那是一件很麻烦的事情 而使用相对路径 不仅在本地机器环境下适合 就是上传到网络或其他系统下也不需要进行多少更改就能准确链接 超链接的应用 书签链接 链接文档中的特定位置也叫书签链接在浏览页面时如果页面很长 要不断的拖动滚动条给浏览带来不便 要是浏览者可以从上头阅读到尾 又可以选择自己感兴趣的部分阅读 这种效果就可以通过书签链接来实现 书签链接可以在同一页面中链接 也可以在不同页面中链接 在不同页面中链接的前提是需要指定好链接的页面地址和链接的书签位置 书签链接 建立书签链接分两步 一是建立书签 二是为书签制作链接 建立书签语法 文字制作链接链接到同一页面语法 文字链接链接到其他页面语法 文字链接 在站点内部建立链接 所谓内部链接 指的是在同一个网站内部 不同的html页面之间的链接关系 在建立网站内部链接的时候 要明确哪个是主链接文件 即当前页 哪个是被链接文件 在前面介绍链接路径时 已经给大家介绍了内部链接概念 内部链接一般采用相对路径链接比较好 外部链接 外部链接 指的是跳转到当前网站外部 与其它网站中页面或其它元素之间的链接关系 这种链接的URL地址一般要用绝对路径 要有完整的URL地址 包括协议名 主机名 文件所在主机上的的位置的路径以及文件名 URL外链部接格式 服务URL格式描述WWWhttp 进入万维网站点Ftpftp 进入文件传输协议Telnettelnet 启动Telnet方式Emailemail 启动邮件进入新浪网 链接其它站点 站点之间的页面和元素的链接是万维网交流信息的关键 这种链接用HTTP协议来建立网站之间的超链接 格式 例如 新浪网清华大学 发送E mail 在HTML页面中 可以建立E mail链接 当浏览者单击链接后 系统会启动默认的本地邮件服务系统发送邮件 基本语法 描述文字邮件的参数subject电子邮件主题Cc抄送收件人Body主题内容Bcc暗送收件人如果希望同时写下多个参数 则参数之间使用 分隔符 例 向桑桑发送邮件 图片的插入 网页中图像的插入 使得网页内容丰富多彩 本节主要内容 图片的格式图片的插入图片的超链接图像映射 图片的格式 JPG JPEG 通常用来显示照片等颜色丰富的图像 可以高效地压缩 并且丢失的是人眼不易觉察的部分图像 使图像文件变小的同时基本不失真 GIF 在网页中大量用于站点图标Logo 广告条Banner和网页背景图像等 它可以图像变得非常小 也可以在网页中以透明方式显示 而且可以包含动态信息 是网页上大量使用的图片格式之一 PNG 便携网络图像 既有GIF透明显示的特点 又具有JPEG处理精美图像的优势 且可包含图层等信息 常用于制作网页效果图 目前已逐渐成为网页图像的主要格式 插入图片标记 格式 的属性Src 插入图像的路径 Alt 提示文字 提示文字有两个作用 一是当浏览该网页时 如果图像下载完成 鼠标放在该图像上 鼠标旁会出现提示文字 二是当图像没有被下载时 在图像的位置会出现提示文字 Width Height 图像的宽度和高度 单位为像素或百分比 Align 图像和文字的对齐方式 Border 默认图片无边框 可用此属性设置边框线的宽度 单位为像素 Vspace 图像的垂直间距 指图像垂直方向上和文字的距离 Hspace 图像的水平间距 指图像水平方向上和文字的距离 图片的超链接 图片的超链接标记与文字超链接相同 都是格式 图像映射 一张图片可以有多个超链接一张图片被切分成不同的区域 每一个不同的区域可以链接到不同的地址 这称为图像的热区 每一个热区可以有各自的链接地址 浏览者单击热区后 就会跳转到相应的地址 这就是图像映射 图像映射标记 图像映射由定义影像地图 ImageMap 标签的使用格式 可根据需要定义多少个热点区域 图像映射例子 图像映射标记 标记属性Shape 定义图像映射区的形状 有三种 rect 矩形 circle 圆 poly 多边形 Href 链接地址 Coords 设定区域坐标 图像映射标记 coords 定义区域点的坐标a 矩形 必须使用四个数字 前两个数字为左上角座标 后两个数字为右下角座标例 b 圆形 必须使用三个数字 前两个数字为圆心的座标 最后一个数字为半径长度例 c 任意图形 多边形 将图形之每一转折点座标依序填入例 TABLE表格 表格在网站应用中非常广泛 可以方便灵活的排版 很多动态大型网站也都是借助表格排版 表格可以把相互关联的信息元素集中定位 使浏览页面的人一目了然 本节主要内容 制作表格表格的标题和表头行标记属性单元格属性 制作表格 表格的三个标记表格标记 行标记 单元格标记 Border n n为像素值 表示表格边框的粗细 默认n为0 基本语法 标签的属性 属性描述Width表格的宽度 像素值或百分比Height表格的高度 像素值或百分比Align表格在页面的水平摆放位置 取值left center rightBackground表格的背景图片Bgcolor表格的背景颜色Border表格边框的宽度 以像素为单位 Bordercolor表格边框颜色 标签的属性 CellpaddingCellspacing 行标签的属性 Align行内容的水平对齐 取值left center rightValign行内容的垂直对齐 取值top bottomBackground行的背景图片Bgcolor行的背景颜色Bordercolor行的边框颜色 单元格标签 的属性 Width单元格的宽度 像素值或百分比height单元格的高度 像素值或百分比Align单元格内容的水平对齐 取值left center rightValign单元格内容的垂直对齐 取值top middle bottomBackground单元格的背景图片Bgcolor单元格的背景颜色Bordercolor单元格的边框颜色Rowspan跨行属性Colspan跨列属性 表格标题和表头标签 表格标题标签 它要放在中表格标题的属性水平对齐属性align left center right垂直对齐属性valign top bottom 表头标签 表头标签 它与的用法一样 唯一区别是标记的内容居中加粗显示 它的属性也与一样 Rowspan和Colspan的用法 基本语法其中n为要跨的行数或列数 表格实例 表单的设计 表单在Web网页中用来给访问者填写信息 从而能采集客户端信息 使网页具有交互的功能 表单的处理过程是 当用户填写完信息后做提交 submit 操作 表单中输入的信息就从客户端的浏览器传送到服务器上 然后经过服务器上的处理程序处理 或者将用户提交的信息储存在服务器端的数据库中 或者将用户所需信息传送回客户端的浏览器上 一般表单由两个部分组成 一是描述表单元素的HTML源代码 二是客户端的脚本 或者服务器端用来处理用户所填信息的程序 本节主要内容 表单的概念表单标记输入标记菜单和列表标记文字域标记 表单 FORM 标记 邮箱登录表单 用户注册表单 表单标记 表单是网页中的一个特定区域 这个区域是由一对 标记定义的 该标记有两个方面的重要作用 一是限定表单的范围 其他的表单对象 都要插入到表单中 单击提交按钮时 提交的也是表单范围内的内容 二是携带表单的相关信息 比如处理表单的脚本程序的位置 提交表单的方法等 这些信息对浏览者是不可见的 但对于处理表单却有着决定性的作用 基本语法 Name 表单的名称Method 定义表单结果从浏览器传送到服务器的方法 一般有两种 Get和Post Action 用来定义表单处理程序的位置 相对地址或绝对地址 Method方法 Get方法是将表单内容附加在URL地址后面 所以对提交信息的长度进行了限制 最多不可以超过8K个字符 若信息太长 将被截去 从而导致意想不到的结果 同时Get方法不具有保密性 不适合处理如信用卡卡号等要求保密的内容 而且不能传送非ASCII码字符 Post方法是将用户在表单中填写的数据包含在表单的主体中 一起传送到服务器上的处理程序中 该方法没有字符的限制 在浏览器的地址栏不显示提交的信息 传送的数据也没有限制 内的标记 表单输入标记 菜单和列表标记 菜单和列表项目标记 文字域标记如下代码 写入标记 标志用来定义一个用户输入区 用户可在其中输入信息 该标记是单个标记 没有结束标记 必须放在标志对之间 标志中共提供了九种类型的输入区域 具体是哪一种类型由type属性来决定 标记 基本语法Name 域的名字 此属性给每一个输入区域一个名字 这个名字与输入区域是一一对应的 服务器就是通过调用某一输入区域的名字的value值来获得该区域的数据的 而value属性是另一个公共属性 它可用来指定输入区域的缺省值 type 域的类型 Type属性值 Text文字域Password密码域Radio单选框Checkbox复选框Button普通按钮Submit提交按钮Reset重置按钮File文件域Image图像域 文字域Text Text属性值用来设定在表单的文本域中 输入任何类型的文本 数字或字母 输入的内容以单行显示 文字域的属性Name文字域的名称Maxlength文字域的最大输入字符数Size文字域的宽度 以字符为单位 Value文字域的默认值 密码域Password 在表单中还有一种文本域的形式为密码域 输入到文本域的文字均以 表示 密码域的属性Name密码域的名称Maxlength密码域的最大输入字符数Size密码域的宽度 以字符为单位 文件域File 文件域可以让用户在域的内部填写自己硬盘中的文件路径 然后通过表单上传 这是文件域的基本功能 文件域的外观是一个文本框加一个浏览按钮 用户可以直接将要上传给网站的文件的路径填写在文本框中 也可以单击浏览按钮 在自己的按钮中找到要上传的文件 复选框Checkbox 复选框能够进行项目的多项选择 以一个方框表示 基本语法说明 checked表示此项被默认选中 name值不同value表示选中项目后传送到服务器端的值 单选框Radio 单选框能进行项目的单项选择 以一个圆框表示 基本语法说明 checked表示此项被默认选中Name必须有 且必须相同 value表示选中项目后传送到服务器端的值 普通按钮Button 表单中的按钮起着重要的作用 可以激发提交表单的动作 可以在用户需要修改表单的时候 将表单恢复到初始的状态 还可以依照程序的需要 发挥其它的作用 普通按钮主要是配合javascript脚本来进行表单的处理 基本语法 说明 value表示显示在按钮上的文字 提交按钮Submit 单击提交按钮后 可以实现表单内容的提交 基本语法 重置按钮Reset 单击重置按钮后 可以清除表单的内容 恢复默认的表单内容设定 基本语法 图像域Image 图像域是指可以用在提交按钮位置上的图片 此图片具有按钮的功能 使用默认的按钮形式往往会让人觉得单调 使用图像域可以增加网页美观 基本语法 隐藏域Hidden 对于用户来说 隐藏域是看不见的 在表单中插入隐藏域的目的在于收集或发送信息 以便于被处理表单的程序所使用 浏览者在单击提交按钮发送表单时 隐藏域的信息也被一起发送到服务器 基本语法 菜单和列表标记 菜单和列表是为了节省网页空间而产生的 菜单是一种最节省空间的方式 正常状态下只能看到一个选项 单击按钮打开菜单后才能看到全部的选项 列表可以显示一定数量的选项 如果超出了这个数量 会自动出现滚动条 浏览者可以通过拖动滚动条来查看各选项 菜单和列表标记 通过和标记可以设计页面中的菜单和列表项 基本语法 选项选项 说明 Size 显示的选项数目Multiple 列表中的项目多选Value 选项值Selected 默认选项 例1 下拉列表框请选择最喜欢的颜色 绿色蓝色白色红色 文字域标记Textarea 用此标记可以制作多行的文字域 可以在其中输入更多的文本 基本语法 说明 Rows 行数Cols 列数 综合练习 表单制作实例 网页与多媒体 在网页中插入多媒体 可以使网页内容更丰富多彩本节主要内容滚动的文字多媒体内容的嵌入背景音乐 滚动文字 滚动文字标记意思 走马灯格式 滚动的文字 属性参数 Direction 滚动方向 其值有 up down left rightBehavior 滚动方式 其值有 scroll 循环往复 slide 单次 alternate 交替 Scrollamount 滚动速度 整数值 Scrolldelay 每一次滚动的时间延迟 单位为ms Loop 循环次数 Width Height 滚动的区域 单位为像素 Bgcolor 滚动文字的背景色 滚动字幕啦啦啦 我会跑了啦啦啦 我会往上跑了啦啦啦 我会往上跑了啦啦啦 我会往右跑了啦啦啦 我会往下跑了啦啦啦 我来回地跑啦啦啦 我跑到目的地就该休息了啦啦啦 我累了 要慢慢地溜达啦啦啦 我累了 我要走走停停哈哈 都没有我跑得快啦啦啦 图片也可以啊 多媒体内容的嵌入 在网页中可以放置MP3 电影 SWF动画等 格式 Width height 设定播放控件面板的大小Hidden 隐藏播放控件面板Autostart 是否要音乐文件传送完就自动播放 TRUE是要 FALSE是不要 默认为FALSE设定播放重复次数 LOOP 6表示重复6次 TRUE表示无限次播放 FALSE播放一次即停止 背景音乐 在网页中可以嵌入背景音乐 多以MIDI文件为主 它的优点是占的数据量小 格式 Loop n表示重复次数 Infinite表示重复多次 直到网页关闭为止 框架 定义 框架就是把一个浏览器窗口划分为若干个小窗口 每个窗口可以显示不同的URL网页 使用框架可以非常方便的在浏览器中同时浏览不同的页面效果 也可以非常