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

第三章 网页制作与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.网页设计原则,兼容性原则 简洁性原则,3.网页的设计,确定主题 收集材料 布局规划 制作网页,3.1.3网页制作工具简介,Frontpage Dreamweaver,3.2Dreamweaver2004概览,Dreamweaver2004界面 输入与编辑文本 超级链接 使用图像 表格 创建交互表单 页面布局,3.3使用Dreamweaver制作主页框架,基本操作步骤 主页框架的制作,3.4HTML语言基本结构,HTML简介 HTML文件的基本结构 HTML的,HTML简介,HTML的英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。 所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。,HTML的基本结构,HTML的基本结构 一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置， HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。,HTML的基本结构 开始标签 一个简单的HTML示例 头部标签 欢迎光临我的主页 文件主体 这是我第一次做主页 结尾标签,例1-1,在文档的最外层， 文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。 是HTML文档的头部标签, 在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公公属性。 和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。 标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。 上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。,三、HTML的标签与属性: HTML的标签分单标签和成对标签两种。成对标签是由首标签 和尾标签组成的，成对标签的作用域只作用于这对标签中 的文档。单独标签的格式，单独标签在相应的位置插入元素就可以了。 换行 换行,三、HTML的标签与属性: 作为一般的原则，大多数属性值不用加双引号。但是包括空格、号，号等特殊字符的属性值必须加入双引号。为了好的习惯，提倡全部对属性值加双引号。如： 字体设置,2.2主体标签及属性、颜色的设定,一、 html的主体标签 在和中放置的是页面中所有的内容，如图片、文字、表格、表单、超链接等设置。 标签有自己的属性，设置 标签内的属性，可控制整个页面的显示方式,一、 html的主体标签,标签的属性,格式： 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(视频图像阵列)形成了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文件中的任何位置只要使用了标签，当文件显示在浏览器中时，该标签之后的内容将显示下一行。 无换行示例 无换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。有换行标记：登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。 例： 3-1html,3-2 换段落标签及属性： 由标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个的开始就意味着上一个的结束。良好的习惯是成对使用。 格式：其中,ALIGN是标签的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式.,实例:3-2html 测试分段控制标签花儿什么也没有。它们只有凋谢在风中的轻微、凄楚而又无奈的吟怨，就像那受到了致命伤害的秋雁，悲哀无助地发出一声声垂死的鸣叫。或许，这便是花儿那短暂一生最凄凉、最伤感的归宿。而美丽苦短的花期却是那最后悲伤的秋风挽歌中的瞬间插曲。,3-3 原样显示文字标签 要保留原始文字排版的格式,就可以通过标签来实现,方法是把制作好的文字排版内容前后分别加上始标签和尾标签. 实例:3-3html 原样显示文字标签 白日依山尽， 黄河入海流。 欲穷千里目， 更上一层楼。,3-4 居中对齐标签 文本在页面中使用标签进行居中显示,是成对标签,在需要居中的内容部分开头处加,结尾处加 实例：3-4html 居中对齐标签 送孟浩然之廣陵 故人西辭黃鶴樓， 煙花三月下揚州。 孤帆遠影碧山盡， 惟見長江天際流。,3-5水平分隔线标签 标签是单独使用的标签，是水平线标签,实例：3-5html 测试水平分隔线标签春 晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少？,3-6字体属性标签 3-6-1文字格式控制标签 格式：,实例：3-6-1html 控制文字的格式盼望着，盼望着，东风来了，春天脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。,3-6-2标题文字标签 标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。 标题标签的格式：,实例 3-6-2html 设定各级标题一级标题。二级标题。三级标题。四级标题。五级标题。六级标题。,3-6-3 特定文字样式标签 实例3-6-3htrml 字体的逻辑类型em标签：用于强调的文本，一般显示为斜体字 strong标签：用于特别强调的文本，显示为粗体字cite标签：用于引证和举例，通常是斜体字 code标签：用来指出这是一组代码 small标签：规定文本以小号字显示 big标签：规定文本以大号字显示 samp标签：显示一段计算机常用的字体，即宽度相等的字体 kbd标签：由用户输入文本，通常显示为较粗的宽体字 var标签：用来表示变量，通常显示为斜体字 dfn标签：表示一个定义或说明，通常显示为斜体字 sup标签：122=144 sub标签：硫酸亚铁的分子式是Fe2SO4,3-7列表标签 在html页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。 列表分为两类，一是无序列表，一是有序列表，无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔. 而有序条列就是指各条列之间是有顺序的，比如从1、2、3一直延伸下去。,3-7-1 无序列表格式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项 第3项 ,3-8注释标签 注释标签的格式有如下： 实例:3-8html 注释标签,3-9建立超链接的标签为和 格式为：超链接名称 属性“HREF”定义了这个链接所指的目标地址；目标地址是最重要的，一旦路径上出现差错，该资源就无法访问 TARGET:该属性用于指定打开链接的目标窗口，其默认方式是原窗口,其值可为_parent,_blank,_self,_top TITLE：该属性用于指定指向链接时所显示的标题文字,实例：3-9-1.html 链接到http:/绝对路径链接新浪首页清 华 大 学北 京 大 学上海外国语学院,3-9-2链接路径 绝对路径如： 相对路径如：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.html 一个简单的表格 第1行中的第1列 第1行中的第2列 第1行中的第3列 第2行中的第1列 第2行中的第2列 第2行中的第3列 ,表格标签有很多属性，最常用的属性有：,实例：3-11-1.html 无标题文档 第1行中的第1列 第1行中的第2列 第1行中的第3列 第2行中的第1列 第2行中的第2列 第2行中的第3列 ,表格行的设定 ,实例：311-3.html 姓 名性 别年 龄专 业咚 咚男18学 生楠 楠女17学 生,单元格的设定 例如：,实例：3-11-4.html 单元格的设定姓 名性 别年 龄专 业笨笨猫女18学生,设定跨多行多列单元格 跨多列的语法： 跨多行的语法： ,实例：3-11-5.html 学生基本信息成 绩 姓 名性 别专 业课 程分 数 咚 咚男计算机程序设计68 喃 喃女89 ,3-12多视窗口框架,3-12-1框架的含义和基本构成 框架就是把一个浏览器窗口划分为若干个小窗口，每个窗口可以显示不同的 URL 网页。 语法格式： . ,3-12-2 框架集控制,1.左右分割窗口属性：cols 如： 将窗口分为40%，40%，20% 将100像素以外的窗口平均分配 将窗口分为三等份 2.上下分割窗口属性：rows 上下分割窗口的属性设置和左右窗口的属性设定是一样的，参照上面所述就可以了,3 子窗口标签的设定 常用属性,例3-12-1 ,例3-12-2 ,例3-12-3 ,