第九章网页制作

1第九章网页制作9.1HTML简介用HTML语言编写的文件称为HTML文件。HTML语言是一种超文本标记语言，简单易学。用HTML语言编写的静态网页实际上是一种文本文件，它以.htm或.html为扩展名，可以使用任何文本处理软件编写。9.1.1HTML语言概述1.HTML文件的基本构成Internet中的每一个HTML文件都包括两部分：（1）文本内容：含有需要展现的具体信息。（2）HTML标记：负责控制文本显示的外观和版式。多数HTML标记的书写格式如下：＜标记名＞文本内容＜／标记名＞htmlheadtitle文本布局/title/head&&浏览器窗口标题bodycenterp在这里我们首先向您介绍有关HTML语言的基本知识和基本语法。br然后，讲授如何使用HTML语言编写您的Web页面。/p/center/body/html文本内容9.1.1HTML语言概述标记名通常写在“”内。一般的HTML标记都具有起始和结束标记，并且成对出现，两者控制中间的文本，结束标记前要加“/”。但并不是所有的HTML标记都具有起始和结束标记，有些则没有结束标记。如：换行标记br，HTML标记不区分大小写。如：＜HTML＞、＜html＞或＜HtMl＞，其结果都是一样的。9.1.1HTML语言概述2.HTML文件基本结构HTML文件的层次结构：一般HTML文件都是以html开头，又以/html结束。其文件结构由以下两部分组成：（1）头部（Head）HTML文件的头部由head和/head标记定义。通常情况下，文件的标题等都放在头部信息中。（2）正文主体（Body）由body和/body标记定义。body标记具有一些常用的属性，格式为：bodybgcolor=#ntext=#n…/body其中，bgcolor为背景颜色；text为文本颜色。n为六位十六进制数。如果网页使用背景图像，格式为：bodybackground=”图片文件名”…/bodyHTML网页的结构htmlheadtitle文本布局/title头部/headbodybgcolor=#ffcc99text=#0000ffpalign=left段落左对齐/p/body正文主体/html9.1.2HTML语言的基本语法1.文本布局(1)段落标记Pp…/p标记指定文档中一个独立的段落。使用格式如下：palign=对齐方式…/pp标记定义的两个段落之间留有一个空行。(2)换行标记brbr标记可以强制文本换行。该标记只有开始标记。9.1.2HTML语言的基本语法(3)水平线标记hr水平线标记hr用于在网页中插入一条水平线。使用格式如下：hrwidth=宽度size=高度例9-2在网页中设置段落和页面格式。htmlheadtitle文本布局/title/headbodycenterp在这里我们首先向您介绍有关HTML语言的基本知识和基本语法。br然后，讲授如何使用HTML语言编写您的Web页面。/phrwidth=80%size=1palign=left段落左对齐palign=center段落居中palign=right段落右对齐/center/body/html9.1.2HTML语言的基本语法2.文字格式：HTML语言中用于文字格式化的标记有：（1）标题标记hh标记定义文字标题。标题文字将以指定大小，黑体显示。格式：hn属性=属性值标题文字/hn2其中，n为1(大)到6(小)的数字，表示字体大小,把标题分为6级。如：h1align=center…/h19.1.2HTML语言的基本语法（2）字体标记font字体标记用来对文字格式进行设置，主要具有以下属性：1)size属性用来控制文字的大小，其格式为：fontsize=n…/font，n=1,2,3,4,5,6,7(大)，默认值为3。2)color属性用来控制文字的颜色，其格式为：fontcolor=#n或英文表示的颜色…/font，n是一个十六进制的六位数。3)face属性用来指明文字使用的字体，其格式为：fontface=字体名…/font（3）字形标记设置文字的粗体、斜体、上标(sup)、下标(sub)、下划线等。3.插入图片Img标记将图片插入网页中。该标记具有以下属性：(1)src属性：指明图片文件所在的位置。格式：imgsrc=URL其中URL是指图片文件存放的位置。(2)alt属性：图片的文字说明，当鼠标指针指向该图片时，该说明性文字弹出。格式：imgsrc=URLalt=说明文字(3)height和width属性：设置图片显示区域的高度和宽度。格式：imgsrc=URLheight=n1width=n2其中height和width属性中n1、n2的取值为像素数，像素数越大，图片显示越大。(4)border属性：设置图片文件的边框。格式：imgsrc=URLborder=n：设置图片的边框。其中n为像素数。(5)align属性：设置图片相对于文本的位置关系。格式：imgsrc=URLalign=top|middle|bottom|left|right：顶边对齐/垂直居中/底边对齐/左对齐/右对齐4.超级链接在HTML语言中，a和/a标记用于设置网页中的超链接，href属性指明被超链接的文件地址。格式：ahref=URL超连接文本/a用于表示超链接的文本一般显示为蓝色并且加下划线。在浏览器中，当鼠标指针指向该文本时，箭头变为手形，并在浏览器的状态栏中显示该链接的地址。若使用图片做超链接，可使用如下格式完成：ahref=URL1imgsrc=URL2/a5.使用表格在网页中插入，需要用到一组HTML标记。定义表格的有关标记如下：table…一个表格/table定义表格。tr…/tr定义表行。th…/th定义表头。td…/td定义表列。例9-4表格示例htmlheadtitle表格示例/title/headbodytableborder=1width=90%cellspacing=6align=center&&定义表开始trbgcolor=#dddddd&&第一行标题开始th时间/thth星期一/thth星期二/thth星期三/th/tr&&第一行标题结束tr&&第二行开始td1-2节/tdtd数学/tdtd语文/tdtd英语/td/tr&&第二行结束tr&&第三行开始td3-4节/tdtd地理/tdtd历史/tdtd生物/td/tr&&第三行结束/table&&定义表结束/body/html9.2FrontPage概述网页制作工具种类很多，最常用的是Macromedia公司的Dreamweaver和Microsoft公司的FrontPage。FrontPage是微软公司开发的网页制作和网站管理工具。FrontPage2003是MicrosoftOffice2003组件之一，与Office其它组件高度融合。它界面友好，功能强大，易学易用，是目前使用最为广泛的网页制作、站点管理的工具。9.2.2FrontPage的启动与退出1．FrontPage的启动单击“开始”按钮，在“开始”菜单中单击“程序”。在“程序”菜单中单击MicrosoftFrontPage。打开的MicrosoftFrontPage2003窗口。另外，也可以在桌面上建立FrontPage2003快捷方式，然后在桌面上双击该图标，即可启动FrontPage2003。2.FrontPage的退出FrontPage2003的退出有以下三种方式：(1)选取“文件”菜单中的“退出”。(2)单击操作窗口中最右上角的关闭按钮(3)通过快捷键Alt+F4退出。9.2.3网页与网站1、网页的概念网页是上的基本文档，是用HTML语言编写的文件，3通常以.html和.htm为扩展名，网页可以单独存在，该文件需要通过Web浏览器解释并显示在屏幕上，所以它又被称为网页(WebPage)。2、网站的概念站点就是一组相关网页和有关文件的集合。9.2.4FrontPage中的视图FrontPage2003提供了7种视图1.“网页”视图“网页”视图是FrontPage2003中最常用的工作界面。网页的创建、编辑、预览等基本操作都是在此视图中进行的。该视图窗口底部有4个标签：“设计”、“拆分”和“代码”和“预览”。它们控制网页以普通方式、HTML方式进行编辑和对网页效果进行预览。9.2.4FrontPage中的视图2.“文件夹”视图在“文件夹”视图中，站点显示为一组文件和文件夹。在“文件夹”视图中可以创建、移动和删除文件或文件夹。3.远程网站视图4．“报表”视图使用“报表”视图可以方便了解当前站点的文件内容、更新链接情况、组件错误、所有文件列表及变化情况等信息。9.2.4FrontPage中的视图5．“导航”视图使用“导航”视图可方便地观察站点的链接结构。在该视图中可以很直观地浏览网站内网页之间的链接关系，同时也可以通过拖曳操作改变链接结构。6．“超链接”视图“超链接”视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。7.“任务”视图“任务”视图主要用来创建和管理任务。在视图中列出了当前站点的“任务”，即当前站点中尚未完成的项目。9.3网页制作P264Web站点的开发，首先应当根据其用途规划站点，确定站点的结构，并在本地磁盘上创建站点以存储制作完成的网页及其其他相关文件。然后再发布到指定服务器上（远程站点）。9.3.1创建站点9.3.2网页编辑9.3.3插入对象9.3.4创建超链接9.3.1创建站点新建站点的方法：（1）单击“文件“菜单上的“新建”命令，再选择“站点”，将打开“新建”对话框。（2）在“新建”对话框的“指定新站点的位置”文本框中，输入存储站点的文件夹。双击“只有一个网页的站点”模版，新建站点。(3)若给站点改名字，则单击“工具”菜单/“站点设置”命令.2、打开站点单击“文件”/“打开站点”命令选所打开的站点，单击“打开”命令。可以打开多个站点，每个站点独占一个窗口。9.3.2网页编辑1．新建网页要创建一个新的网页，按下面的步骤操作。（1）从“文件”菜单的“新建”子菜单中选择“网页”命令。（2）出现“新建”任务窗格，选中“其他网页模版”选项卡。（3）选择所需的模板。（4）单击“确定”按钮，系统新建一个基于所选模板的网页。（5）此时，新建的网页显示在窗口中，可以进行编辑修改等。（6）单击“文件”菜单，选择“保存”命令，弹出对话框，设置完成后单击“保存”按钮。（7）单击“视图”菜单中的“导航”命令，在“文件夹列表”中拖动新建网页到站点的结构图，将其置入相应位置。9.3.2网页编辑(所见即所得)2．打开网页打开网页的方法有多种，最常用的操作步骤如下：（1）在FrontPage2003窗口中，单击工具栏中“文件夹列表”按钮。（2）在“文件夹列表”窗口中，找到要编辑的网页，然后双击网页图标。3．设置文字格式文字格式包括字体、字型、大小、颜色和修饰效果等属性。设置文字的格式操作如下：（1）选中文字。（2）单击“格式”菜单，选择“字体”命令，打开“字体”对话框。或格式工具栏（3）可在对话框中设置字体的各种属性。4．设置段落格式实际上，按“Enter”在HTML代码中插入的是p标记，而按“Shift”+“Enter”键则插入的是br标记。段落格式主要包括对齐方式(注意没有分散对齐)、文本缩进和段落间距属性。设置方法