实验八网页制作 - 成都理工大学工程技术学院.doc

实验八 网页制作一、实验目的（1）熟悉HTML标记和网页文件基本结构。（2）掌握用HTML制作简单的网页。（3）熟悉FrontPage 2003界面及基本操作。（4）掌握用FrontPage 2003制作网页的操作方法和步骤。（5）学会在FrontPage 2003中站点的建立和发布。二、实验要点及预备知识1、网页与网页文件网页是WWW上信息的组织形式，也是WWW上信息传输和浏览的基本单位。网页像其他文档一样把文字、图像、表格、视频等多种信息有机地组合在一起。网页区别于其他文档的本质特征是其中可以包含指向其他资源文件的超链接。显示在网页中的文字、图像、表格、视频及超链接等统称为网页元素。网页的源文件称为HTML文档（HTML document）,是符合超文本标记语言规范的文本文件。浏览网页时实际是Web服务器将网页的源文件传输并保存到客户机上。可以这样说，网页时网页源文件在浏览器中的表现形式。 2、HTMLHTML(HyperText Markup Language)是一种用来制作超文本文档的简单标记语言。其主要组成部分是一系列的标记，这些标记用来描述网页中的各个组成部分即各种网页元素。静态网页的源文件是纯粹的HTML文档，动态网页都是以HTML为基础，在HTML文档中加入了动态网页脚本。HTML文档一般包括文件头（Head）和正文（body）两部分，其基本结构由HTML标记来描述。HTML的结构简述如下： 标识html文档的开始 html文档头的开始标签html文档头的结束标签 html文件正文的开始标签html文件正文的结束标签标识html文档的结束3、网页制作网页制作是建立网站的基本工作之一。制作网页的方法主要有两种：（1）用文档编辑软件直接编辑网页的源文件一般步骤如下：规划网页的内容及布局。在文本编辑软件中输入或修改HTML文档内容。以纯文本文件格式保存文件，然后将文件扩展名改为.htm或.html。用浏览器打开文件浏览网页效果，修改源文件直到满意为止。这种方法效率低，而且也不能在制作过程中看到网页效果，一般适合用来制作较简单的网页或用来直接修改网页文件中的个别错误。（2）使用可视化工具软件来制作网页常用软件有FrontPage、Drearmweaver等，这些软件功能齐全、操作简便，不需要编写繁琐的HTML标记，可以像使用办公软件一样方便输入文本、插入图像等，从而高效地制作出精美的页面。4、网站制作网站的制作会涉及多方面，一般要经过如下步骤：确定网站主题：确定网站所要包含的主要内容，一个网站必须要有一个明确的主题。搜集材料：明确网站的主题后，就围绕主题开始搜集有关的文字、图片、音像等。规划网站：包括网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等。制作网页：使用合适的软件和技术制作网页。上传测试：利用FTP工具，把网站发布到自己申请的主页存放服务器上。网站上传后，在浏览器中打开网站，逐页逐个链接的进行测试，发现问题，及时修改，然后再上传测试。推广宣传：网页做好之后，还要不断地进行宣传，提高网站的访问率和知名度。维护更新：网站要注意经常维护更新内容，保持内容的新鲜，才能够吸引住浏览者。在frontpage 2003中可以方便的建立、管理和发布站点。站点的多个网页之间往往都存在相互链接关系，在frontpage中建立网页之间的超链接有两种方法，一是在每个网页或其源文件中一个个地添加链接到其他网页文件的超链接标记。二是通过frontpage导航功能来设置。三、实验内容及操作指导1、用HTML制作简单的网页用HTML制作如图7-1网页。操作步骤：在Windows中启动文档编辑软件，如记事本、写字板等。在文档编辑软件中输入如下HTML代码。 简单的HTML实例欢迎光临我的主页!这是我的第一个主页。图7-1 简单的HTML网页 以文本文件格式保存文件，文件名为1-1.htm。在浏览器中打开文件1-1.htm，查看网页效果。如需要修改网页代码，选择IE菜单命令查看/源文件来查看并修改。2、FrontPage网页制作制作如图7-2所示的网页，该网页中包含文本、表格、项目列表、图像、水平线、超链接等网页元素。操作步骤：（1）新建空白网页选择菜单命令文件/新建，打开“新建”对话框，选择“空白网页”。此时编辑区显示文件名为new_page_1.htm。（2）设置网页标题选择菜单命令格式/背景，打开“网页属性”对话框，选择“常规”选项卡，在标题文本框中输入“基本信息”即可。图7-2 frontpage网页（3）编辑网页元素单击主编辑区左下角的“设计”标签，然后根据以下步骤操作：输入文本：单击主编辑区左上角空白区，输入文字：“基本信息：”，按回车键换行。制作表格：A、选择菜单命令表格/插入“表格”，在打开的“插入表格”对话框中设定表格的行数为2、列数为7，单击“确定”按钮即在编辑区插入一个2行7列的表格。B、在前6列中输入文本，用鼠标选中文本，选择表格/表格属性 “单元格”，在打开的“单元格属性”对话框中将文本的水平对齐方式改为“居中”。单击“确定”按钮。继续选择格式/字体，将文本的字体改为12磅。插入图片：选择第七列的两个单元格，选择表格/合并单元格菜单项，将两行合并成一行。选择插入/图片 “来自文件”，在弹出的对话框中指定图像文件。注：网页中最常用的图像一般为GIF类型（.gif）和JPEG类型（.jpg）,二者都是经过压缩的文件，文件容量较小便于传输。输入文本：单击表格下方区域后，从键盘输入“学习经历：”、“1996-2000年，成都理工大学工程技术学院，本科，计算机科学与技术”、“2001-2004年，成都理工大学，硕士，应用数学专业”三行文本。建立项目符号或编号：选中后两行文本，然后选择格式/项目符号和编号，在“列表属性”对话框中选择“无格式项目列表”选项卡下方的格式，如图7-3所示，单击“确定”按钮后建立项目列表。图7-3 “列表属性”对话框插入水平线：选择菜单命令插入/水平线。输入文本：将插入点移动到下一行，输入文字“联系方式：J”。创建超链接：选择文本：J，然后选择插入/超链接或快捷菜单中的超链接命令，打开“插入超链接”对话框窗口，如图7-4所示，在“地址”栏中输入网址“mailto:”后按“确定”按钮。图7-4 “插入超链接”对话框（4）保存网页执行菜单命令文件/保存，在弹出的“另存为”对话框中指定保存的位置和文件名后按“确定”按钮。注：若网页中插入了图像，保存时还会提示是否将图片“保存嵌入式文件“，选择保存；建立空白文档后，最好是一边编辑一边保存；文件和文件夹的名称最好为英文名，否则可能出现链接错误而不能浏览；对于常规网页，一个网页对应一个HTML文档；而对于框架网页，每个框架实际是一个网页，整个框架结构也保存在一个网页文件中，因此，建立一个框架网页时需保存的HTML文档数目是其框架数加1。（5）预览网页在FrontPage中有两种方法来直接预览网页。方法一：单击主编辑区左下角的“预览”标签，将切换到“预览”选项卡并可预览正在编辑的网页。方法二：选择菜单命令文件/在浏览器中预览，在子菜单中选择指定的浏览器和分辨率后即可预览。3、用FrontPage制作网站采用先建立空白站点后添加、制作网页的方法，建立一个包含5个网页的站点。操作步骤如下：（1）建立一个空白站点选择菜单命令文件/新建 ,打开“新建”任务窗格，如图7-5所示。在“新建网站”选区中单击“由一个网页组成的网站” , 弹出如图7-6所示的“网站模板”对话框,选择“空白网站”，指定站点的位置为“D：Myweb”。图7-5 “新建”任务窗格 图7-6 “网站模板”对话框,按“确定”后系统将自动在该文件夹中建立其他需要的文件夹用来存放需要的文件。 （2）制作并保存网页文件用前面介绍的方法创建5个网页，其中主页取名为Index.htm，其他网页的文件名分别为page1.htm、page2.htm、page3.htm、page4.htm，全部都保存到D：myweb文件夹中；创建后的网站效果如图7-7所示。图7-7 创建网站效果双击网站列表中的“index.htm”主页，即可打开该主页，然后单击“常用”工具栏中的“预览”按钮。，4、网站的发布与管理（1）打开已创建好的网站。（2）选择【文件】/【发布网站】命令，弹出如图7-8所示的“远程网站属性”对话框。图7-8 “远程网站属性”对话框（3）在“远程Web服务器类型”选项组中选中“文件系统”单选按钮，然后单击“远程网站位置”下拉列表右侧的“浏览”按钮，选择网站的发布位置。注：站点可发布到Internet Web服务器上供其他用户浏览，也可以发布到其他计算机或本机的其他位置。（4）