网页制作基础

第八章网页制作基础本章的重点是掌握制作网页的基本技术和方法，使用FrontPage 2003 制作一个简单的个人主页，然后使用本机作为远程网站发布个人主页。

实验22 使用FrontPage 制作个人主页一、实验目的1．掌握网页的基本概念；2．掌握使用FrontPage 2003制作简单个人主页的基本技术和方法；3．了解使用本机作为远程网站发布个人主页的方法及过程。

二、要点解析1．网络、网站、网页（1）网络：即将若干计算机单机或计算机系统，通过通讯设备或传输介质进行相互连接，组成的以网络软件来实现资源共享、通讯或协同工作的信息资源平台，称为计算机网络。

小规模的网络称为局域网，全球最大的计算机网络称为因特网（Internet，也称为互联网）。

（2）网站：即网络上存放HTML等文档的场所，通常宿主于服务器上。

网站由域名（网站地址）和网站空间组成，可以通过浏览器来访问它。

网站的性能通常由网站的空间大小、网站位置、网站连接速度、网站软件配置、网站能提供的服务等几个方面综合决定。

（3）网页：上网浏览网站时在浏览器窗口中看到的一个页面就是一个网页。

网页是用HTML(超文本标记语言)或ASP、JSP、XML、JavaScript、VBscript、PHP等语言编写的，需要经过浏览器编译后才能在浏览器窗口中显现出来。

网页中可以含有文字、图像、表格、动画、超级链接等各种元素，以组成丰富多彩、生动活泼的网页。

（4）制作网页：网站是由多个网页链接构成的，为了让浏览者方便、轻松地畅游网站，在制作网页时应该注意以下4点。

①首先构建页面框架：构建网页页面的框架就是对页面作一个宏观布局，方法是按照自己的构思，使用导航栏、主题按钮等将页面内容有条理的划分为几部分。

②填充网页内容：将网页的内容合理的分配到页面的各个部分，并加入图像、表格、动画、超级链接等各种元素，组成自己构思设想的网页。

③创建返回网站首页的链接：就是在各个分页面中设置返回主页面的链接，以方便用户快速地返回到主页面中浏览网站的其它内容（页面）。

④创建导航条：导航条一般都放在页面的上部或左侧，导航条的作用就是在网站的每一个页面上提供网站各页面的主题，引导用户有条理地浏览网站的内容。

（5）网页的基本制作技术：使用FrontPage制作网页的基本技术通常有文字的输入与排版、表格的设计与调整、图形的插入和编排、网页的链接与导航等。

其中，处理文字、表格、图形等信息所采用的方法与在Word 中输入、编排这些信息的方法类似，不同的是Word 中会受到纸张大小的限制，而FrontPage 中网页的大小可以理解为任意的宽度和任意的长度，只是为了浏览网页的方便，设计网页时往往会对宽度进行限制，限制的根据就是显示屏幕的分辨率。

若在1024×768的分辨率下设计网页，则网页的宽度可设置为1024像素点，长度则不受限，浏览时只需拖动垂直滚动条就行了。

（6）使用本机作为远程网站发布个人主页：网页制作并测试完毕之后，可以直接使用FrontPage 中的发布站点功能来发布。

2．FrontPage 的启动及其界面的初步认识单击“开始 | 所有程序 | Microsoft Office | Microsoft Office FrontPage 2003”，就可以启动FrontPage 2003，启动后的界面如图8-1所示。

FrontPage 是Office 软件的组件，它的窗口界面与Office 其它成员相类似，从上到下依次为标题栏、菜单栏、常用工具栏、格式工具栏、工作区、状态栏，见图8-1。

（1）标题栏：用来显示标题。

即在打开网页或创建一个新网页时，该网页文档的名字就会显示在标题栏上。

（2）菜单栏：菜单栏包括“文件”、“编辑”、“视图”、“插入”、“格式”、“工具”、“表格”、“数据”、“框架”、“窗口”、“帮助”等11个下拉菜单，每个菜单都有自己的一组命令，为网页制作提供了比较完善的网页编辑和网站管理功能。

（3）常用工具栏：常用工具栏以按钮形式提供与下拉菜单中的菜单项相同的一些常用的网页编辑功能，通过单击“视图｜工具栏”上的相关选项卡，可选择显示或隐藏相关的工具栏。

（4）格式工具栏：格式工具栏汇集了网页编辑中常用到的一些格式化工具。

（5）工作区：也称为主编辑区，是用户用来制作网页的区域，在不同的视图方式下会显示不同的内容。

编辑网页时，在工作区的左下方排列着“设计”、“拆分”、“代码”、“预览”4个切换按钮用于选择编辑网页时的显示方式。

（6）状态栏：状态栏在窗口的底部，提供状态显示、下载时间、大小写切换、数字切换等功能。

（7）任务窗格：打开FrontPage 2003，任务窗格就出现在工作区右面（默认值，可以菜单栏 2状态栏6工作区5常用工具栏格式工具栏图8-1 FrontPage 2003的窗口界面图8-2 “视图”菜单 通过点击“视图”——“任务窗格”来关闭它），窗格中显示各种FrontPage 2003 能完成的任务，可以利用它来快速准确地完成某项任务。

（8）FrontPage 2003 的主要优点之一，就是设计了视图方式来显示网页、Web 网站结构。

FrontPage 2003 有多种视图，每一种视图为用户提供有关网页或Web 网站的不同信息，以便用户完成对网页、Web 网站的更改、更新和维护。

单击菜单栏中的“视图”按钮，在下拉菜单中看到的经常会用到的视图有网页视图、文件夹视图、报表视图、导航视图、超链接视图、任务视图等几种,如图8-2：①网页视图网页视图提供“设计”、“代码”、“拆分”、“预览”等四种不同方式让用户处理网页。

在“设计”视图中能以所见即所得的方式编辑网页；在“代码”视图中能查看、编写、编辑网页的HTML 源代码；在“拆分”视图中能以工作区的上半部分显示源代码，下半部分显示设计效果的拆分屏幕格式供用户检查、编辑网页内容，并能访问设计视图和代码视图；在“预览”视图中能显示与Web 浏览器中相似的网页，方便查看创建或更改网页的效果。

②文件夹视图文件夹视图能通过列表的形式将当前网站的文件夹、网页列出。

列表分为左、右两列，左列显示的是当前网站所有的文件夹，当在左列中选中一个文件夹，则右列将显示该文件夹中的全部文件和子文件夹，这种视图方式使用户可以像在Windows 资源管理器中一样对网站的文件夹进行操作。

③报表视图报表视图能给出当前网站的所有文件数、图片数、链接文件数、未链接文件数、新旧文件数等信息统计数据，便于用户了解整个网站的情况。

④导航视图导航视图能显示反映网站各页面之间关系的树形目录，方便用户调整、扩展或重新组织网站。

⑤超链接视图超链接视图能将网页与网页之间的链接关系用图形方式形象地表示出来，使链接关系一目了然。

⑥任务视图任务视图是多个人开发、管理一个网站的有效工具，利用任务视图可以有效地跟踪、维护Web 网站的任务列表（开发计划或维护计划），通过对这些任务进行的监控，可以及时的了解进度，调整任务。

3．建立站点（1）在FrontPage 2003窗口界面的菜单栏中选择“文件”|“新建”后，在屏幕右边出现的“新建网站”区中选择“由一个网页组成的网站”，见图8-3。

（2）在弹出的“网站模板”窗口右边“指定新网站的位置”对话框中，输入你将建立的网站的存储位置及名称，如：E:\MYsite 或 E:\我的网站等，见图8-4。

然后单击“确定”即可完成新网站的建立，见图8-5（图中标注ⅰ的是刚建立的新网站的位置及网站中的目录；标注ⅱ的是该新网站目录的详细列表，其中的index.htm 是主页）。

4．建立其它的新网页在FrontPage 2003窗口界面的菜单栏中选择“文件”|“新建”后，在屏幕右边出现的“新建网页”区中选择“空白网页”即可（见图8-3），其它的空白网页（系统通常以new_page_x(x 表示数字).htm 命名）建成后的显示见图8-6，该网页的名称是new_page_1.htm 。

在窗口下边有“设计”、“拆分”、“代码”、“预览”四个视图按钮，选中“设计”视图按钮，则在工作区②中能以所见即所得的方式编辑网页；选中“代码”视图按钮，则在工作区②中能查看、编写、编辑网页的HTML 源代码；选中“拆分”视图按钮，则在工作区②中能以工作区的上半部分显示源代码，下半部分显示设计效果的拆分屏幕格式供用户检查、编辑网页内容，并能访问设计视图和代码视图；选中“预览”视图按钮，则在工作区②中能显示与Web 浏览器中相似的网页，方便查看创建或更改网页的效果。

5．编辑新网页（1）建立网页标题：网页标题即网页的名称，它用于在浏览器的标题栏中显示。

选择“文件｜属性”菜单项，在弹出的“网页属性”对话框的“常规”选项卡的“标题”文本框中，输入标题名称（如：个人主页）后，单击“确定”即可。

图8-3 “新建网站”窗口 图8-5 建立了“我的网站” ⅰⅱ图8-4 “网站模板”窗口（2）利用表格布局网页页面：选中“设计”视图按钮，在菜单栏中选择“表格”|“布局表格和单元格”菜单项，然后从右侧弹出的任务窗口中，选择“表格布局”区中自己所需的表格布局模板，单击该模板则将表格插入到网页中，见图8-7。

表格大小的调整，可以在“表格属性”区进行，若选择“用表格自动缩放元格”，则可手动对表格的尺寸快速、方便的进行调整。

（3）输入并编辑文字：向网页中输入文字的方法与在Word 中输入文字的方法相同，用户可以为网页中的文字设置字体、字号，更改字形和文字颜色等。

如果网页中的文本比较多，用户还可以进一步对其使用段落格式、调整段间距和对齐方式、使用项目符号等，也可以将其它文件中的文字剪切、复制、粘贴到网页中，使用“插入”菜单中的“文件”选项，还可以插入文件，这些操作都与Word 中的操作类似，请自行练习输入个人网页的内容。

（4）在网页中插入水平线、滚动屏幕、图片、交互式按钮，添加背景等，完成个人网页的设计。

① 插入水平线：在网页适当的位置插入水平线，可以使网页的内容显得层次分明。

方法是选择“插入｜水平线”菜单项，就会在光标所在位置插入一条水平线。

双击水平线，就可以打开“水平线属性”对话框来设置水平线的宽度、高度、对齐方式、颜色等属性。

如图8-8、图8-9所示。

② 插入时间和日期：在网页中插入的时间和日期用于显示上次修改页面的时间或网站最后更新的时间。

方法是将光标定位在要插入日期和时间的位置，然后选择“插入｜日期和时间”菜单项，在弹出的对话框中，进行相应的设置后，点击确定。

③ 插入站点计数器：在主页上添加一个站点计数器可以及时显示站点被访问的次数，即站点受欢迎的程度。

方法是将光标定位在要插入站点计数器的位置，然后选择“插入｜Web 组件”菜单项，在弹出的对话框中的“组件类型”选项区中选择“计数器”，弹出“选择计数器样式”区后，在该选项区中选择所需的计数器样式，单击“完成”就会弹出“计数器属性”对话框。