网页制作与HTML语言基本结构简介

《网页制作与HTML语言基本结构简介》由会员分享，可在线阅读，更多相关《网页制作与HTML语言基本结构简介（62页珍藏版）》请在金锄头文库上搜索。

1、第三章 网页制作与HTML语言基本 结构简介本章提要静态网页与动态网页Dreamweaver MX制作网页HTML语言的基本结构3.1网页制作概述3.1.1静态网页与动态网页1.静态网页由超级文本标志语言HTML的标志代码构成 ；用记事本、FrontPage、Dreamweaver、 Fireworks可以制作。2.动态网页与asp动态网页中：服务器端可以实时处理浏览 器端的请求，然后将处理结果返回给浏览 器端ASP是在普通HTML中嵌入VBSCript或 JavaScript代码的文件，只能在服务器端运 行3.1.2认识网页1.网页的基本元素文字图像超链接2.网页设计原则兼容性原则简洁性原则

2、3.网页的设计确定主题收集材料布局规划制作网页3.1.3网页制作工具简介FrontpageDreamweaver3.2Dreamweaver2004概览Dreamweaver2004界面输入与编辑文本超级链接使用图像表格创建交互表单页面布局3.3使用Dreamweaver制作主页框架基本操作步骤主页框架的制作3.4HTML语言基本结构HTML简介HTML文件的基本结构HTML的 HTML简介HTML的英语意思是：Hypertext Marked Language， 即超文本标记语言,是一种用来制作超文本文档的简单标 记语言。用HTML编写的超文本文档称为HTML文档， 它能独立于各种操作系统平

3、台。所谓超文本，是因为它可以加入图片、声音、动画、影 视等内容，事实上每一个HTML文档都是一种静态的网 页文件，这个文件里面包含了HTML指令代码，这些指 令代码并不是一种程序语言，它只是一种排版网页中资 料显示位置的标记结构语言，易学易懂，非常简单。HTML的基本结构HTML的基本结构 一个HTML文档是由一系列的元素和标签 组成.元素名不区分大小写.HTML用标签来 规定元素的属性和它在文件中的位置， HTML超文本文档分文档头和文档体两部 分，在文档头里，对这个文档进行了一些 必要的定义，文档体中才是要显示的各种 文档信息。HTML的基本结构 开始标签 一个简单的HTML示例 头部标签

4、欢迎光临我的主页 文件主体这是我第一次做主页 结尾标签 例1-1在文档的最外层， 文档中的所有文本 和html标签都包含在其中，它表示该文档是以超文本标识 语言（HTML）编写的。 是HTML文档的头部标签, 在浏览器 窗口中，头部信息是不被显示在正文中的,在此标签中可 以插入其它标记, 用以说明文件的标题和整个文件的一些 公公属性。 和是嵌套在头部标签中的，标签 之间的文本是文档标题，它被显示在浏览器窗口的标题栏 。 标记一般不省略，标签之间的文本 是正文，是在浏览器要显示的页面内容。 上面的这几对标签在文档中都是唯一的，HEAD标签和 BODY标签是嵌套在HTML标签中的。三、 HTML的

5、标签与属性: HTML的标签分单标签和成对标签两种。成 对标签是由首标签 和尾标签组成的，成对标签的作用域只作用于 这对标签中 的文档。单独标签的格式，单独标签在相应的位置插入元素就可 以了。换行换行三、 HTML的标签与属性:作为一般的原则，大多数属性值不用加双 引号。但是包括空格、号，号等特殊 字符的属性值必须加入双引号。为了好的 习惯，提倡全部对属性值加双引号。如： 字体设置2.2主体标签及属性、颜色的设定一、 html的主体标签 在和中放置的是页面中所有 的内容，如图片、文字、表格、表单、超 链接等设置。 标签有自己的属性，设置 标签内的属性，可控制整个页面的显示方 式一、 html的

6、主体标签标签的属性标签的属性格式：bady的属性实例设定不同的连接颜色 测试body标签 默认的连接颜色正在按下的连接颜色,访问过后的连接颜色,返回二、 颜色的设定颜色值是一个关键字或一个RGB格式的数 字。RGB颜色可以有四种表达形式:： #rrggbb (如，#00cc00) #rgb (如，#0c0) rgb(x,x,x) x是一个介乎0到255之间的整数 (如，rgb(0,204,0) rgb(y%,y%,y%) y是一个介乎0.0到100.0之 间的整数 (如， rgb(0%,80%,0%)例：白色=#ffffff 红色=#ff0000二、 颜色的设定Windows VGA(视频图像

7、阵列)形成了16各 关键字: aqua，black， blue，fuchsia, gray，green， lime，maroon，navy， olive， purple，red，silver，teal，white， and yellow aqua，black， blue，fuchsia, gray，green， lime，maroon，navy， olive， purple，red，silver，teal，white， and yellow 文字版面的编辑3.1换行标签 换行标签是个单标签，也叫空标签，不包含任和内容， 在html文件中的任何位置只要使用了标签，当文件显 示在浏览器中时，该标签

8、之后的内容将显示下一行。无换行示例 无换行标记：登鹳雀楼 白日依山尽，黄河入海流。欲穷 千里目，更上一层楼。 有换行标记：登鹳雀楼白日依山尽，黄 河入海流。欲穷千里目，更上一层楼。 例： 3-1html 3-2 换段落标签及属性： 由标签所标识的文字，代表同一个段落的 文字。不同段落间的间距等于连续加了两个换行 符，也就是要隔一行空白行，用以区别文字的不 同段落。它可以单独使用，也可以成对使用。单 独使用时，下一个的开始就意味着上一个 的结束。良好的习惯是成对使用。格式：其中,ALIGN是标签的属性,属性有三个参数 left,center,right.这三个参数设置段落文字的左,中, 右位置的

9、对齐方式.实例:3-2html测试分段控制标签花儿什么也没有。它们只有凋谢在风中的轻微、凄楚 而又无奈的吟怨， 就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂 死的鸣叫。 或许，这便是花儿那短暂一生最凄凉、 最伤感的归宿。 而美丽苦短的花期 却是那最后悲伤的秋风挽歌中的瞬间插曲 。3-3 原样显示文字标签 要保留原始文字排版的格式,就可以通过标签来实 现,方法是把制作好的文字排版内容前后分别加上始标签 和尾标签.实例:3-3html原样显示文字标签白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。3-4 居中对齐标签 文本在页面中使用标签进行居中显示, 是成对标签,在需要居中的内容部分

10、开头处加,结 尾处加 实例：3-4html居中对齐标签送孟浩然之廣陵故人西辭黃鶴樓，煙花三月下揚州。孤帆遠影碧山盡，惟見長江天際流。3-5水平分隔线标签标签是单独使用的标签，是水平线标 签实例：3-5html测试水平分隔线标签春 晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少？3-6字体属性标签 3-6-1文字格式控制标签 格式：实例：3-6-1html控制文字的格式盼望着，盼望着，东 风来了，春天脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来 了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里， 田野里，瞧去一大片一大片满是的。坐着，躺着，打两

11、个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的 ，草软绵绵的。3-6-2标题文字标签 标签用于设置网页中的标题文字， 被设置的文字将以黑体或粗体的方式显示 在网页中。 标题标签的格式：实例 3-6-2html设定各级标题一级标题。 二级标题。 三级标题。 四级标题。 五级标题。 六级标题。3-6-3 特定文字样式标签 实例3-6-3htrml 字体的逻辑类型em标签：用于强调的文本，一般显示为斜体字strong标签：用于特别强调的文本，显示为粗体字cite标签：用于引证和举例，通常是斜体字code标签：用来指出这是一组代码small标签：规定文本以小号字显示big标签：规定文本以大号字显示s

12、amp标签：显示一段计算机常用的字体，即宽度相等的字体kbd标签：由用户输入文本，通常显示为较粗的宽体字var标签：用来表示变量，通常显示为斜体字dfn标签：表示一个定义或说明，通常显示为斜体字sup标签：122=144sub标签：硫酸亚铁的分子式是Fe2SO43-7列表标签在html页面中，合理的使用列表标签可以起 到提纲和格式排序文件的作用。 列表分为两类，一是无序列表，一是有序 列表，无序列表就是项目各条列间并无顺 序关系，纯粹只是利用条列来呈现资料而 已，此种无序标签，在各条列前面均有一 符号以示区隔.而有序条列就是指各条列之间是有顺序的 ，比如从1、2、3一直延伸下去。 3-7-1

13、无序列表格式1: 格式1: 第一项第二项第三项 格式2第一项第二项第三项的属性type有三个选项,这三个选项都必须小写:disc实心园circle空心园square小方块示例 3-7-1.html 无序列表默认的无序列表加“实心园“默认的无序列表“实心园“默认的无序列表“实心园“无序列表square加方块无序列表square加方块无序列表square加方块无序列表circle加空心园无序列表circle加空心园无序列表circle加空心园3-7-2 有序列表 格式: 第1项第2项第3项实例：3-7-2.html有序列表默认的有序列表默认的有序列表默认的有序列表第1项第2项第3项第4项第1项第2

14、项第3项3-8注释标签注释标签的格式有如下： 实例:3-8html 注释标签赋得古原草送别离离原上草， 一岁一枯荣。 野火烧不尽， 春风吹又生。白居易 3-9建立超链接的标签为和 格式为：超链接名称属性“HREF”定义了这个链接所指的目标地 址；目标地址是最重要的，一旦路径上出 现差错，该资源就无法访问 TARGET:该属性用于指定打开链接的目 标窗口，其默认方式是原窗口,其值可为 _parent,_blank,_self,_topTITLE：该属性用于指定指向链接时所显示 的标题文字 实例：3-9-1.html链接到http:/绝对路径链接新浪首页清 华 大 学 北 京 大 学上海外国语学院

15、3-9-2链接路径 绝对路径 如：http:/相对路径 如：news/index.html根路径 如：d/web/news/index.html发送E-mail 实例： 发送邮件向笨笨猫的好友发送邮件(抄送 笨笨猫)3-10图像的处理 3-10-1背景图像的设定 实例：3-10-1.html设置背景图像盼望着，盼望着， 东风来了，春天脚步近了.3-10-2网页中插入图片标签 的格式及一般属性设定：3-11表格制作标 签描 述.:用于定义一个表格开始 和结束.定义一行标签，一组行标签内可 以建立多组由标签所定义的单元格:定义单元格标签，一组标签将将 建立一个单元格，标签必须放在标 签内实例：3-11.h