项目二DreamweaverCS4网页设计平台

第1页第2页●HTML（HyperTextMarkupLanguage超文本标识语言）–是一种用来制作超文本文档的简单标记语言。–用HTML编写的超文本文件称为HTML文件，也称Web文件。一、HTML概述第3页一、HTML概述htmlheadtitle一个简单的HTML示例/title/headbodycenterh1欢迎光临我的主页/h1brhrfontsize=“7”color=“red”这是我第一次做主页/font/center/body/html第4页一、HTML概述第5页●HTML文件结构htmlhead文档头部信息/headbody文档正文内容/body/html一个完整的HTML文档必须包含3个部分：一个由html元素定义的文档版本信息，一个由head定义的各项声明的文档头部和一个由body定义的文档主体部分。一、HTML概述第6页●HTML文档的创建工具–HTML编辑器•记事本等•可视化HTML编辑器：Dreamweaver等–Web浏览器一、HTML概述第7页●标签–用“”和“”括起来的句子，我们称他们为标签。–HTML标签分单标签和成对标签两种。•成对标签–格式：标签名……/标签名；–成对标签的作用域只作用于这对标签中的文档；•单独标签–格式：标签名–在响应的位置插入元素即可二、HTML的标签与属性第8页●标签–属性•属性写在始标签内；•属性用于进一步改变显示的效果；•各属性之间无先后次序；•属性是可选的，可以省略，而采用默认值；•大多数属性值不用加双引号，但是包括：空格、%号、#号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。•例如：fontcolor=“#ff00ff”face=“宋体”size=“30”字体设置/font二、HTML的标签与属性第9页●头部标记head在HTML语言的头部元素中，一般需要包括标题、基础信息和元信息等。head元素的作用范围是整篇文档，定义在HTML语言头部的内容往往不会在网页上直接显示。三、HTML基本标记第10页●头部标记head–1.标题标记title•HTML页面的标题一般是用来说明页面的用途，它显示在浏览器的标题中。•语法：title……/title–“…….”就是标题的内容；–页面的标题只有一个三、HTML基本标记第11页●头部标记head–1.标题标记title三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadtitle标题标记title/title/headbody/body/html第12页●头部标记head–2.元信息标记meta元素提供的信息不显示在页面中，一般用来定义页面信息的说明、关键字、刷新等；•meta标记不需要设置结束标记，在一个尖括号内就是一个mata内容；•在一个HTML页面中可以有多个meta元素。•meta元素的属性有：name和http-equiv–name属性主要用于描述网页，以便于搜索引擎查找、分类；–http-equiv可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容三、HTML基本标记第13页●头部标记head–2.元信息标记meta•（1）设置页面关键字–语法：–mataname=“keywords”content=“输入具体的关键字”–说明：name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义具体的关键字。三、HTML基本标记第14页●头部标记head–2.元信息标记meta•（1）设置页面关键字三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmataname=“keywords”content=“计算机教学”title插入关键字/title/headbody/body/html第15页●头部标记head–2.元信息标记meta•（2）设置页面说明–语法：–mataname=“description”content=“设置页面说明”–说明：name为属性名称，这里是description，也就是设置页面说明的意思，而在content中则定义具体的描述语言。三、HTML基本标记第16页●头部标记head–2.元信息标记meta•（2）设置页面说明三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmataname=“description”content=“页面说明”title设置页面说明/title/headbody/body/html第17页●头部标记head–2.元信息标记meta•（3）定义编辑工具–语法：–metaname=“generator”content=“编辑软件的名称”–说明：name为属性名称，这里是generator，也就是设置编辑工具意思，而在content中则定义具体的编辑工具名称。三、HTML基本标记第18页●头部标记head–2.元信息标记meta•（3）定义编辑工具三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetaname=“generato”content=“Dreamweaver”title设置编辑工具/title/head/body/html第19页●头部标记head–2.元信息标记meta•（4）设置作者信息–语法：–metaname=“author”content=“作者的姓名”–说明：name为属性名称，这里是author，在content中定义具体的信息。三、HTML基本标记第20页●头部标记head–2.元信息标记meta•（4）设置作者信息三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetaname=“author”content=“小溪”title设置作者信息/title/headbody/body/html第21页●头部标记head–2.元信息标记meta•（5）设置网页文字及语言–语法：–metahttp-equiv=“content-type”content=“text/html;charset=字符集类型”–content中是具体的属性值，charset用于设置网页的内码语系，也就是字符集的类型，国内常用的是GB码、UTF-8、charset往往设置为gb2312或者UTF-8，即简体中文。三、HTML基本标记第22页●头部标记head–2.元信息标记meta•（5）设置网页文字及语言三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetahttp-equiv=“content-type”content=“text/html;charset=GB2312”title设置网页文字/title/headbody/body/html第23页三、HTML基本标记第24页三、HTML基本标记第25页三、HTML基本标记第26页●头部标记head–2.元信息标记meta•（6）设置网页的定时跳转–语法：–metahttp-equiv=“refresh”content=“跳转的时间;url=跳转到的地址”–refresh表示网页的刷新，在content中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间以秒为单位。三、HTML基本标记第27页●头部标记head–2.元信息标记meta三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%htmlheadmetahttp-equiv=refreshcontent=20;url=index1.aspmetahttp-equiv=content-typecontent=text/html;charset=utf-8title网页的定时跳转/title/headbody20秒后自动跳转/body/html第28页●头部标记head–2.元信息标记meta三、HTML基本标记第29页●网页的主体标记body–1.网页的背景色bgcolor•语法：•bodybgcolor=“背景颜色”–2.网页的背图片background•语法：•bodybackground=“图片的地址”–3.文字颜色text•语法：•bodytext=“文字颜色”•在没有对文字颜色单独定义时，这一属性可以对页面中所有的文字起作用。三、HTML基本标记第30页三、HTML基本标记●网页的主体标记body–4.链接文字属性link•语法：bodylink=“颜色”bodyalink=“颜色”bodyvlink=“颜色”–link修改链接文字的颜色–alink可以设置正在访问的文字颜色–vlink可以设置访问后链接文字的颜色•ahref=“url”…../a文字超级链接设置第31页三、HTML基本标记%@LANGUAGE=VBSCRIPTCODEPAGE=65001%headmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/title无标题文档/title/headbodylink=#FF0000alink=#00FF00vlink=#CCFF00ahref=3-3-1.asp设置标题/abrahref=3-3-2.asp设置关键字/abrahref=3-3-2.asp设置描述信息/abr/body/html第32页三、HTML基本标记链接的文字正在访问的文字访问后链接文字第33页●网页的主体标记body–5.边距margin•语法：bodytopmargin=上边距的值leftmargin=左边距的值–topmargin：设置到顶端的距离leftmargin：设置到左边的距离rightmargin：设置到右边的距离bottommargin：设置到底边的距离–默认情况下，边距的值以像素为单位；–一般网站的页面左边距和上边距都设置为0，这样看起来页面不会有太多的空白。三、HTML基本标记第34页●页面注释标记!----–语法：!--注释的内容--•注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。•注释只出现在代码中，在浏览器的页面中不显示。三、HTML基本标记第35页●操作题：–创建一个简单的ASP页面，页面显示：10秒后跳转•设置网页的定时跳转，10秒后跳转到下一个页面。–跳转到的页面：创建一个简单的ASP页面，页面显示：这里是最简单的HTML文件。•要求使用代码编写实现；–设置页面标题为：简单HTML文件–设置网页的字符集为：gb2312–设置页面的关键字为：测试–设置网页的背景色为:#AADF00–设置网页的文本颜色为：#2A00FF–设置页面上边距和左边距都为：10项目二DreamweaverCS4网页设计平台第36页●操作题：项目二DreamweaverCS4网页设计平台第37页四、文字和段落标记●标题字HTML文档中包含有各种级别的标题，各种级别的标题由h1到h6元素来定义。其中h1代表最高级别的标题，依次递减，h6级别最低。–语法：h11级标题/h1h22级标题/h2h33级标题/h3