84网页制作

第3章网页设计语言HTMLHTML是网页制作的一种规范、一种标准。本章介绍了用HTML制作网页的各种标记符的设置方法，包括网页数据的编辑与格式化、在网页中使用超链接和插入图片、网页中的表格设计以及表格与文字的混排等。[知识目标]1.了解HTML的基本概念；2.了解HTML的语法结构；3.掌握常用的HTML标记用法。[能力目标]1.学习HTML文档的基本语句；2.编写简单的HTML文档。3.1HTML概述HTML（HyperTextMarkupLanguage）超文本标记语言，HTML语言是建立网页的规范或标准。几乎所有的网页都是以HTML格式书写的。HTML以标识符来标识、排列各对象。标识符本身以“”和“”标识，标识符内的内容称为元素（element），元素代表了标识符的意义，元素是与大小写无关的。一、标记及其属性1.标记HTML文档由标记和被标记的内容组成。标记（tag）能产生所需的各种效果。格式为：标记受标记影响的内容/标记例如，标题标记title表示为：title我的第一个网页/title2.标记的属性标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。格式为：标记属性1=属性值1属性2=属性值2…受影响的内容/标记例如，字体标记font有属性size和color等。fontsize=3color=red属性示例/fontHTML文档是一种纯文本格式的文件，HTML文档的基本结构为：htmlheadtitle网页的标题/title/headbody网页的内容/body/html【例3-1】二、HTML文档的基本结构HTML标记HTML的开始，在文件结束处要有对应的符号/HTML。在head和/head标签之间文本的是头信息。在浏览器窗口中，头信息是不被显示的。在title和/title标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。在body和/body标签之间的文本是正文，会被显示在浏览器中。3.2网页数据编辑与格式化一、创建HTML文档1．用工具软件创建HTML文档用比较完善的工具软件来制作网页，像FronPage，Dreamweaver等2．用编辑工具编写HTML文档记事本、写字板、Word等编辑工具可以用来编辑HTML文档。用最简单的“记事本”来编辑网页。①打开记事本。单击Windows的“开始”按钮，在“程序”菜单中的“附件”子菜单中单击“记事本”。②创建新文件，并按HTML语言规则编辑。在“记事本”窗口中输入HTML语言，输入的内容。③保存网页。打开“记事本”的“文件”菜单，选择“保存”。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径；在“文件名”文本框输入以.html或.htm为后缀的文件名；在“保存类型”下拉列表框中选择“文本文档”。最后单击“保存”按钮，将记事本中的内容保存在磁盘中。如果希望这一页是网站的首页（主页），想让浏览者输入网址后，就显示这一页的内容，可以把这个文件设为默认文档，文件名为index.html或index.htm。二、用浏览器打开浏览三、修改HTML文档网页在浏览后会有不满意的地方，此时可重新在“记事本”中打开该.html文件修改；或者在浏览器中直接打开源文件（在IE中，从“查看”菜单中的“源文件”中打开）。如果浏览器没有关闭，要在浏览器中看到修改后的效果，不必重新打开该文件，直接单击浏览器工具栏上的“刷新”按钮。说明(1)HTML中标记不区分大小写。(2)HTML的多数标记可以嵌套使用，但不可以交叉，这一点在写HTML时一定要牢记。(3)HTML源文件中的换行、回车符和多连续空格在浏览器中显示无效。(4)HTML中颜色值可以是颜色代码，如：red(红)、green(绿)、blue(蓝)、yellow(黄)、white(白)、black(黑)等。也可以以#加６位十六进制数，如#000000(黑)、#FFFFFF(白)、#FF0000(红)等。1注释标记的格式为：!--注释内容--2强制换行和不换行标记br、nobr.../nobr要用HTML的标记来强制换行、分段。强制换行标记的格式为：文字br不换行标记格式为：nobr文字/nobr【例3-2】四、段落格式段落标记的格式为：palign=left|center|right文字/p其中属性align用来设置段落文字在网页上的对齐方式：left（左对齐）、center（居中）和right（右对齐）。缺省时默认为left。格式中的“|”表示“或者”，即多中选一。【例3-3】3段落标记p.../p设定文字、图像、表格的摆放位置。定位标记的格式为：divalign=left|center|right文本、图像或表格/div其中属性align用来设置文本块、一段文字或标题在网页上的对齐方式：left、center和right。缺省时默认为left。【例3-4】4定位标记div…/div当浏览器解释到HTML文档中的hr标记时，会在此处换行，并加入一条水平线段。线段的样式由标记的参数决定。水平线标记的格式为：hralign=left|center|rightsize=横线粗细width=横线长度color=横线色彩noshadesize设定线条粗细，以像素为单位，默认为2。width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。color设定线条色彩，默认为黑色。可以采用色彩的名称。色彩可以用相应英文单词或以“#”引导的一个十六进制数代码来表示。【例3-5】5水平线标记hr标题文字标记的格式为：h#align=left|center|right标题文字/h##用来指定标题文字的大小，#取1～6的整数值，取1时文字最大，6时文字最小。属性align设置标题在页面中的对齐方式：left、center或right。缺省时默认为left。h#…/h#标记缺省显示宋体，在一个标题行中无法使用不同大小的字体。【例3-6】五、文字标记1标题文字标记h#…/h#在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、色彩。用font标记设置字号设置文字大小的格式为：fontsize=数字face=字体名color=色彩被设置的文字/fontfont标记可设定文字的字体、字号和色彩。size用来设置文字的大小。数字的取值范围从1～7，size取1时最小，取7时最大。face用来设置字体。如黑体、宋体、楷体_GB2312、隶书、TimesNewRoman等。color用来设置文字色彩。【例3-7】【例3-8】【例3-9】【例3-10】2字体标记font.../font无序列表中每一个表项的前面是项目符号（如●、■等符号）。建立无序列表使用UL标记和li表项标记。格式为：ultype=符号类型litype=符号类型1第一个列表项litype=符号类型2第二个列表项…/ultype指定每个表项左端的符号类型，可为disc（实心圆点）、circle（空心圆点）、square（方块），也可自己设置图片。【例3-18】五、列表1无序列表标记ulli.../ul使用OL标记可以建立有序列表，表项的标记仍为li。格式为：oltype=符号类型litype=符号类型1表项1litype=符号类型2表项2…/ol有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。【例3-19】2有序列表标记olli.../ol列表嵌套把主页分为多个层次，例如书的目录，给人以很强的层次感。有序列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。【例2-20】锚点（anchor）标记由a定义，它在网页上建立超文本链接。通过单击一个词、句或图片，可从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。具有以上特点的词、句或图片就称为热点。a标记的格式为：ahref=URLtarget=打开窗口方式热点/ahref属性为超文本引用，它的值为一个URL，是目标资源的有效地址。如果要创建一个不链接到其他位置的空超链接，可用“#”代替URL，即ahref=#热点/a。target属性设定链接被单击后结果所要开始窗口的方式。可选值为：_blank，_parent，_self，_top。一、锚点标记a.../a3.3在网页中建立超链接1.链接到同一目录内的网页文件的格式为：ahref=目标文件名.html热点文本/a【例3-11】2.链接到下一级目录中网页文件的格式为：ahref=子目录名/目标文件名.html热点文本/a3.链接到上一级目录中网页文件的格式为：ahref=../目标文件名.html热点文本/a其中“../表示退到上一级目录中。4.链接到同级目录中网页文件的格式为：ahref=../子目录名/目标文件名.html热点文本/a二、指向其他页面的链接要在当前页面内实现超链接，需要定义两个标记：一个为超链接标记，另一个为书签标记。超链接标记的格式为：ahref=#记号名热点文本/a书签就是用a标记对该文本作一个记号。格式为：aname=记号名目标文本附近的字符串/a【例3-12】三、指向本页中的链接如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为：ahref=下载文件名热点文本/a【例3-13】五、指向电子邮件的链接单击指向电子邮件的链接，将打开缺省的电子邮件程序，如FoxMail、OutlookExpress，并自动填写邮件地址。指向电子邮件链接的格式为：ahref=mailto:E-mail地址热点文本/a四、指向下载文件的链接例如，E-mail地址是[e-mail]，建立如下链接：免费电话:80012345678信箱:ahref=mailto:[e-mail]@sohu.com/a1.设置背景色格式为：bodybgcolor=色彩值“色彩值”可以为色彩的英文名或相应十六进制值。2.用图片作为背景使用body标记的background属性，可为网页铺上背景图片。格式为：bodybackground=图片文件名background取值为一个图片文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图片文件可为GIF格式或JPEG格式的文件。【例3-14】一、网页的背景3.4在网页中插入图片图片标记的格式为：imgsrc=图片文件名alt=简单说明width=图片宽度height=图片高度border=边框宽度hspace=水平方向空白vspace=垂直方向空白align=环绕方式|对齐方式width和height属性来设置图片的大小。width和height属性的属性值可取像素数，也可取百分数。【例3-15】【例3-16】二、图片、1、图片标记img取消文本环绕图片，可使用brclear标记，其后的文本将不再环绕图片。格式为：brclear=left|right|all其中clear的取值可为：left（解除在图片左侧放置的文本）、right（解除在图片右侧放置的文本）或all（解除在图片左、右侧放置的文本）。【例3-17】3.5表格设计一、创建基本表格表格的标记为table，行的标记为tr，表项的标记为td。格式为：tableborder=nwidth=x|x%height=y|y%cellspacing=icellpadding=jtrt