HTML静态网页设计实训.ppt

第一章 HTML静态网页设计实训,一、本章学习目的 1.了解HTML标记语言的运行环境 2.掌握HTML标记语言基本语法的格式及功能 3.学会用HTML标记语言解决实际问题 二、本章主要内容 1.HTML标记语言入门及基本操作 2.清单和条目标记 3.HTML语言超链接 4.HTML的表格和表单 5.图像和框架应用操作 6.多媒体操作,实训1 HTML标记语言入门及基本操作,实训目的 1.了解HTML标记语言的运行环境 2.熟悉HTML标记语言的编辑工具 3.掌握HTML语言的基本结构 4.学会HTML基本标签的使用方法,HTML简介： HTML(Hyper Text Mark-up Language) 是一种简单的、基于文本的语言，是网页制作的基础。它使用一系列标记，创建可被浏览器使用的文本，它不是一种真正的计算机语言，而是一种描述语言。 HTML的运行环境： HTML文件是运行在Web浏览器上的。浏览器有很多种，目前最常用的两种浏览器是IE(Internet Explorer)和NC(Netscape Communicator)。,HTML的编辑工具： 根据HTML语法所写出来的文件称为HTML文件。在保存HTML文件时需保存为纯文本文件，并用.html或.htm作为扩展名。因为HTML文件是一个文本文件，所以可以使用任何一个文本编辑器进行编辑。例如可以用Windows中的记事本来编辑HTML文件。,HTML文件的基本结构： HTML基本标签的使用方法： 点击此处查看HTML中基本标签的使用方法 注意：Meta标签的用法,META 标签，是 HTML 语言 head 区的一个辅助性标签。在几乎所有的网页里，我们都可以看到类似下面这段 html 代码： - - 这就是 META 标签的典型运用。它对网站发展非常重要，可以用于鉴别作者，设定页面格式，标注内容提要和关键字，以及刷新页面等等。,META 标签分两大部分： HTTP-EQUIV 和 NAME 变量。 meat 标签的 NAME 变量语法格式是： 其中 xxx 主要有下面几种参数： 1.Keywords( 关键字 ，用来告诉搜索引擎你网页的关键字是什么。） 例： ,2.description( 简介， 用来告诉搜索引擎你的网站主要内容。） 例： 3.robots( 机器人向导 ，用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。） CONTENT 的参数有 all,none,index,noindex,follow,nofollow ，默认是 all 。 例： ,其中的属性说明如下： 设定为all：文件将被检索，且页面上的链接可以被查询； 设定为none：文件将不被检索，且页面上的链接不可以被查询； 设定为index：文件将被检索； 设定为follow：页面上的链接可以被查询； 设定为noindex：文件将不被检索，但页面上的链接可以被查询； 设定为nofollow：文件将不被检索，页面上的链接可以被查询。,4.author( 标注网页的作者 ） 例： 其中最重要的是 Keywords 和 description 的设定。 这两个语句可以让搜索引擎能准确的发现你，吸引更多的人访问 你的站点。 根据现在流行搜索引擎 (Lycos ， AltaVista 等 ）的工作原理 , 搜索引擎首先派出机器人自动在 www 上搜索，当发现新的网站时，便检索页面中的 keywords 和 decription ，并将其加入到自己的数据库，然后再根据关键词的密度将网站排序。,也就是说： 1. 如果你的页面中根本没有 Keywords 和 description 的 META 标签，那么机器人是无法将你的站点加入数据库，网友也就不可能搜索到你的站点。 2. 如果你的关键字选的不好，关键字的密度不高，被排列在几十甚至几百万个站点的后面被点击的可能性也是非常小的。, HTTP-EQUIV 类似于 HTTP 的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。常用的 HTTP-EQUIV 类型有： 1、 和 用以说明主页制作所使用的文字以及语言； 又如英文是ISO-8859-1字符集，还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集.,2、定时让网页在指定的时间n秒内，跳转到页面http:/yourlink； 3、可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式； 4、是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；,5、cookie设定，如果网页过期，存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式； 6、网页等级评定，在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的； 7、强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用；,8、和设定进入和离开页面时的特殊效果，这个功能即FrontPage中的“格式/网页过渡”，不过所加的页面不能够是一个frame页面。,实训2 清单和条目标记,实训目的： 1.掌握无序清单、有序清单的用法 2.掌握改变条目标记的方法 概述： 无序清单（也叫无序列表）；有序清单（也叫有序列表）,实训3 HTML语言超链接,实训目的： 1.掌握超链接的概念 2.掌握定位点的概念 3.掌握超链接指针的概念 4.学会超链接的创建方法 5.学会创建书签的方法,相对路径与绝对路径： my_site(root folder) support contents.html hours.html resources tips.html products catalog.html index.html(home page),如果在hours.html文档中创建指向contents.html文档的链接，可使用相对路径contents.html 如果在index.html文档中创建指向位于support目录中的contents.html文档的链接，可使用相对路径：support/contents.html 如果在catalog.html文档中创建指向位于support目录中的contents.html文档，可使用相对路径：/support/contents.html 如果要在tips.html文档中创建指向catalog.html文档的链接，可使用相对路径：/products/catalog.html 创建指向products目录下的catalog.html文档的链接，可使用站点根目录相对路径：/products/catalog.html 创建指向主页的链接，站点根目录相对路径：/index.html,在同一个文件中建立链接（书签）,实训4 HTML的表格和表单,实训目的： 1.掌握HTML表格的概念 2.掌握HTML表单的概念 3.掌握HTML表格的制作方法和技巧 4.学会HTML表单的制作方法,边距和间距,边距：单元格中内容与单元格边框之间的像素数。 间距：相邻的表格单元格之间的像素数。 若无明确制定，大多数浏览器按单元格边距设置为1，单元格间距设置为2来显示表格。,7855,1212,间距（cellspace）,边距(cellpad),几种特殊样式的表格： （1）水平细线 （2）细线表格 ,（3）明暗边框 ,（4）隔距边框,实训5 图像和框