网页设计基础 第1章

第1页第2页目录第1章HTML基础第2章列表、图像及超链接第3章表格、表单及框架第4章CSS第5章用DreamweaverMX制作网页第6章网站开发简介课件下载第3页第1章HTML基础1.1HTML概述1.2页面颜色控制1.3文本段落控制1.4文字格式控制第4页如今，公司、企业和个人都在建设自己的Web站点，编写自己的Web网页，HTML正是创建网页的基础语言。HTML是英文HyperTextMarkupLanguage的缩写，意为超文本标记语言，是一种用来编写超文本文档的简单标记语言。用HTML编写超文本文档称为HTML文档，它用于描述网页内容的排版、显示方式，最后要通过浏览器显示出来，就是我们看到的网页。所谓超文本是指文档中还可以有图片、声音、动画、影视等内容。HTML带来了超链接的技术，即浏览网页时通过单击鼠标可以从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，从而可以与世界各地主机文件链接，直接获取相关主题。HTML的具体功能：1．格式化文本。如设置文本的对齐方式、字体、颜色等。2．建立超链接。鼠标点击获得指定的目标；设置超链接样式等。3．建立列表。以列表方式显示信息，方便阅读。4．插入图形。如设置图像的样式（如大小、边框、布局等）。5．建立表格。6．加入表单、控键等。这是客户与网页交互的主要渠道。7．加入多媒体。如声音、视频、动画。1.1.1HTML的功能1.1HTML概述第5页1.1.2创建一个简单的HTML页面创建HTML文档可以使用熟悉的文本编辑器(如记事本或写字板)，浏览HTML页面需要使用Web浏览器，如IE(InternetExplorer)、Firefox等。【例1-1】创建一个简单网页，网页文件名为Cha1-1.htm。(1)用记事本编辑HTML文档①单击“开始”→“所有程序”→“附件”→“记事本”，在其中输入HTML文档内容，如右图所示。②保存HTML页面文件：在记事本菜单栏中单击“文件”→“保存”，在弹出的“另存为”对话框中选择存放的文件夹“第1章”，文件名栏中输入“Cha1-1.htm”，选择保存类型为“所有文件”，如下图所示。第6页③最后单击【保存】，则一个文件名为“Cha1-1.htm”的HTML网页文件创建完毕。下图所示就是保存在第1章文件夹下的HTML网页文件“Cha1-1.htm”。HTML文件的后缀名为.htm或.html。(2)浏览HTML页面找到“Cha3-1.htm”文件，双击它，或右键单击后再单击“打开”，显示结果如图所示。第7页Cha1-1.htm文档说明head到/head称为头部“title简单网页示例/title”定义页面标题；“!--”和“--”之间的内容构成注释部分。注释可以有多行，注释的内容不会在浏览器上显示。body到/body是内容部分“p进入/p”是定义一段文字“进入”；“hr”是设置一条水平线；“h1Web世界!/h1”是以“h1”字号(最大号)定义一个标题“Web世界!”。第8页1.1.3HTML文档中的标签HTML文档是纯文本文件，由如html、/html、P、/P、h1这样一些标签组成。标签用来标记文档中的元素，以设置文档的布局、文字的格式、图象的位置等等。标签结构：标签名字属性1属性2…说明：标签中的标签名字不可少，但属性可选,如html就是没包含属性。标签中的字母不区分大小写，如html可写成HTML。“”与标签名字之间不能有空格，标签名字中也不能加入空格(尾标签中也，同样)。标签有双标签和单标签之分。双标签是由…和/…组成的成对标签。如html和/html是一对双标签。单标签就是只有始标签而没有尾标签的，控制的内容跟随其后。如hr就是个单标签。第9页1.1.4HTML文档的基本结构1.HTML文档的基本结构html/htmlhead头部信息/headbody文档主体(正文)/body文档开始头部主体文档结束第10页2.HTML文档的头部HTML文档的头部在head、/head双标签中，但头标签对head、/head可以省略。头部用于放置网页标题、网页基地址、元信息、关联链接等信息，这些信息在网页中是不显示的。一个HTML文档可以没有头部。head头部信息/head在头部中可以放置下列标签：①title、/title②base——设置HTML网页的基地址，基地址定义其后所有链接的相对地址起点。③meta——说明一些与网页有关的信息，如网页语言的编码方式。设置网页语言的编码方式时使用META标签中charset属性，纯英文网页可以不设编码，简体中文网页使用charset=gb2312，繁体中文使用charset=big5。如简体中文可如下设置：metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/第11页3.HTML文档的主体主体中放置要在网页中显示的内容，如文本、图像、表单、超链接等等。主体中可以包含标题h1/h1、段落p/p、表格table/table、水平线hr、层div/div等标签。body和/body必须成对使用。body文档主体(正文)/body1.1.5习题1.HTML文档的基本结构由哪几部分组成？2.使用记事本创建网页有哪几个主要步骤？3.按照例1-1的步骤，将该例在计算机上做一遍。4.编写一个HTML文档，显示结果如右图。第12页1.2页面颜色控制1.2.1body标签的属性每个标签都有自己的一些属性，它们用于进一步设置该标签相关的显示方式，其格式如下：标签名字属性名1=“属性名1值”属性名2=“属性名2值”…双标签中，属性只能放在始标签中。属性是可选的，可以按任何顺序设置。如未设置某个属性，就使其默认值。标签名、属性名、等号、属性值之间允许有空格和换行符，很多属性值的双引号也可以省略，但建议不要省略，更规范一些。主体标签body有多个属性，它们是控制整个页面显示方式的。控制颜色的属性如右（表1-1）。属性作用示例bgcolor设置背景颜色bodybgcolor=redbackground设置背景图像bodybackground=BJ.jpgbgproperties固定背景图像，不随页面的滚动而滚动bodybgpropertiestext设置文字颜色bodytext=bluelink设置超链接颜色bodylink=greenvlink设置已使用的超链接的颜色bodyvlink=greenalink设置正被击中的超链接的颜色bodyalink=green第13页1.2.2设置页面的背景色和前景色默认情况下，网页的背景色为白色，前景色为黑色。利用body标签中的bgclcor属性和text属性可分别设置网页的背景颜色和文字颜色。【例1-2】创建一个简单网页，设置其背景色为黄色，文字为红色。网页文件名为Cha2-1.htm。步骤：（1）利用修改Cha1-1.htm建立文档，以减少编辑工作量。在打开Cha1-1.htm文档后，将文档内容修改为如右图所示。（2）保存。利用“另存为”命令文件将保存为：“Cha1-2.htm”。显示效果：第14页1.2.3颜色值HTML文档中的颜色是由三原色“red”、“green”和“blue”组合而成的RGB格式数字，每个原色都有256个色度，即可取值0~255，具体是用十六进制数来代表，所以只需要2位即可表示。由于每个原色有256种，故三种原色一共可组合成1677721种颜色。颜色值表示：①“#RRGGBB”格式其中的每个字母代表一个十六进制数，RR、GG、BB分别设置红、绿、蓝三色的彩度。例.bgcolor=“#00ff00”，表示将背景颜色设置为绿色。②“RGB(r,g,b)”格式其中的r、g、b是个0~255之间的整数。例.bgcolor=“RGB(0,255,0)”，表示将背景色设为绿色。③“RGB(r%,g%,b%)”格式其中的r、g、b是个0~100之间的实数，也就是将格式②中的0~255数字转换为百分比表示。例.bgcolor=“RGB(100%,0%,0%)”，表示将背景颜色设置为红色。对于一些常用的基本颜色，还有相应的英文词对应，以方便使用，如cha1-2.htm文档中的用法：‘bgcolor=“yellow”’。颜色名颜色十六进制三原色值white白色ffffffred红色ff0000green绿色00ff00blue蓝色0000ffblack黑色000000yellow黄色ffff00第15页1.2.4设置页面的背景图案利用body标签中的background属性可将网页的背景设置为一个图片。【例1-3】创建一个简单网页，将其背景设置为一个图片。（1）编写文档打开Cha1-2.htm文档，做如下修改：bodybgcolor=“yellow”text=“red”修改为：bodybackground=“BaiYun.jpg”text=“red”“现在网页的背景是黄色”修改为：“现在网页的背景是图片”注意：“BaiYun.jpg”是个图象文件，要放在Cha1-3.htm文档一起。如果图象文件在其它文件夹中，如在D盘根目录下，则该句应改为：bodybackground=D:\BaiYun.jpg;text=red（2）保存文档。文档另存为Cha1-3.htm。显示结果：第16页1.2.5习题1.回答下列问题：•控制整个页面显示方式的属性应该放在哪里？•设置文字颜色的属性名怎样拼写？•设置背景颜色的属性名怎样拼写？•怎样设置页面的背景图案？2.写出颜色的三种表示方法。3.重新制作1.1.5中习题4的网页，使背景颜色变为黄色。4.到计算机中搜索一幅图片，将该图片作为背景图案加入到1.1.5中习题4的网页中。第17页1.3文本段落控制1.3.1标题标签、分段标签和换行标签文本是网页的基本内容，标题标签hn、分段标签p和换行标签br是控制文本格式的标签。1.标题标签hn文本按内容分为不同层次，标题是不同层次的文本内容的概述。标题由双标签hn、/hn控制，格式如下：hn标题内容/hn其中的n是标题的级别，分为6级：h1、h2、h3、h4、h5和h6。每一级在浏览器中的显示样式都不同,n越小,级别越高,即字号越大。hn标签有个“align”属性，取值有left、center、right，它们控制标题的三种对齐方式：左、中、右，默认是靠左。第18页1.3.1标题标签、分段标签和换行标签htmlheadtitle使用标题/title/headbodyh1align=center这是一级标题/h1h2这是二级标题/h2h3这是三级标题/h3h4这是四级标题/h4h5align=right这是五级标题/h5h6这是六级标题/h6这里不是标题/body/html【例1-4】创建一网页，在其中设置6个级别的文本标题。文档的代码：第19页2.分段标签p和换行标签brHTML中使用双标签p、/p对文本进行分段，尾标签/p可以省略。p标签也有“align”属性，取值和意义与标题标签相同。p、/p之间可以包含文本等内容，也可以包含后面章节介绍的内联标签，如br、a、sub、span等标签，但不可以包含标题标签。浏览器显示一个p标签分段时，前后自动换行，并空出一行。内容默认左对齐，首行不退格。每对分段标签之间的文本中原有的换行及其多于一个的空格将被忽略。用p标签控制文本段落时，两个段落之间会空出一行。如果不希望中间有空行，则可使用换行标