第二课 建立新网站及简单的网页.docx

第二课 建立新网站及简单的网页.docx

《第二课 建立新网站及简单的网页.docx》由会员分享，可在线阅读，更多相关《第二课 建立新网站及简单的网页.docx（25页珍藏版）》请在冰点文库上搜索。

第二课建立新网站及简单的网页

第二课建立新网站及简单的网页

1.网站与网页的基本概念

网站是指存放在因特网上某个服务器中的信息服务系统，根据网站提供信息服务的技术方式不同，分WWW网站、BBS网站、FTP网站等。

网页是指所有通过浏览器在WWW上所看到的每一个画面；网站则是网页的集合，也就是说网站的设计者先将整个网站设计规划好，再依规划的内容制作出不同的网页，并利用超链接将不同的网页结合在一起，放在因特网上供大家浏览。

网页是WWW网站提供信息服务的主要形式，一般含有文字、图像和表格等，通常还有实现信息块之间跳转的超链接。

网页通常以网页文件及其附属文件形式存在。

网页文件是WWW的基本文档，其他网页元素，如图像、声音等都是以独立文件方式存在，通过在网页文件中设置一些链接形成引用关系。

2.创建新网站

实例一：

 使用“只有一个网页的站点”摸板在E盘上创建一个站点，站点名称为shiyan。

操作步骤

①启动FrontPage2000，进入默认窗口，执行“文件”菜单中的“新建”命令，选择“站点”子命令，出现“站点”对话框。

②在“站点”对话框中选择“只有一个网页的站点”，在“指定新站点的位置”的下拉文本框中输入“E:

\shiyan”，如图2—1所示，单击“确定”按钮。

图2—1

利用FrontPage的Web站点模版和向导创建网站，具有操作简单、速度快的特点。

在FrontPage中，有五种Web站点模版和三种Web站点向导。

选择“只有一个网页的站点”，产生只有index.htm一个空白主页的站点。

2.建立简单的网页

实例一 下载实验2并解压缩到E盘，可在E盘上看到“实验2”文件夹，将其中“FL97.txt"文件中的文字复制到shiyan站点中的index.htm网页文件中。

操作步骤 

①在FrontPage站点窗口左边的文件夹列表中双击index.htm，使右边的编辑窗口出现该空白文件。

②利用“我的电脑”或“资源管理器”将“FL97．txt”打开，将其中的所有文字复制到shiyan站点中的index.htm窗口中。

实例 二下载实验1文件夹并解压缩到E盘。

在站点shiyan中新建ex1、ex2网页，将“实验1”文件夹中的“电脑小常识.txt"文件作为ex1网页的素材；将"实验2"文件夹中的“FL92．txt"文件作为ex2网页的素材；并将“实验1”文件夹中的6个文件“fazhanshi.htm、xianshiqi.htm、bj1.gif、bj2.gif、fly.jpg、xx,swf”导入到shiyan网站中。

操作步骤 

①单击工具栏上的“新建网页”按钮，在shiyan站点新建了一个网页，将实验1文件夹中的“电脑小常识．txt"打开，并将其中内容复制到该新网页中。

单击“文件”菜单中的“保存文件”命令，将网页保存为ex1．htm

②单击工具栏上的“新建网页”按钮，在shiyan站点新建了一个网页，将实验2文件夹中的FL97．txt打开，并将其中内容复制到该新网页中。

单击“文件”菜单中的“保存文件”命令，将网页保存为ex2．htm

③单击“文件”菜单中的“导入”命令，出现“导入”对话框，单击“添加文件”按钮，出现“将文件添加到导入列表”对话框，选中实验1文件夹上的需要导入的文件，如图2—2所示，单击“打开”按钮，在“导入”对话框中便可以看到所导入文件的路径，单击“确定”按钮，完成导入。

图2—2

3.实验练习（独立完成）

①利用FrontPage中的模板，在E盘中新建一个“个人站点”的站点，名称自定。

对其中的内容进行任意的修改后关闭该站点。

②新建本地网站“mysite"站点。

③在mysite站点中新增两个网页“index．htm”和“title．htm”。

第三课编辑网页

实例一 下载shiyan2站点并解压缩到E盘，打开“shiyan2”站点中的网页文件ex1.htm,设置标题文字的格式为隶书、24磅、蓝色，并将文档内容字体设置为“楷体”、“14磅”，“左右各缩进20像素”，“首行缩进40像素”。

操作步骤

①启动FrontPage2000，进入默认窗口，执行“文件”菜单中的“打开站点”命令

②在“打开站点”对话框中选择找到shiyan站点，如图3—1所示，单击“打开”按钮。

图3-1

③双击文件ex1.htm，选中标题文字，利用“格式／字体”命令，打开“字体”对话框后，设置为隶书、24磅、蓝色；选中文档内容，字体设置为“楷体”、“14磅”

④选中文档内容，利用“格式／段落”命令，打开“段洛”对话框后，设置“左右各缩进20像素”，“首行缩进40像素”。

实例二 打开shiyan2站点,在ex2.htm中,插入标题“Frontpage简介”，并设置为“24磅”、“隶书”、“加粗”、“蓝色”。

操作步骤

①双击文件ex2.htm，将光标定位在首字前，按回车，输入文字“Frontpage简介”

②选定文字“Frontpage简介”，利用“格式／字体”命令，打开“字体”对话框后，并设置为“24磅”、“隶书”、“加粗”、“蓝色”。

实例三 打开ex2．htm,设置第一、二段内容首行缩进32像素，设置第三段为“标题4”的样式，为其它段落设置空心圆项目符号。

操作步骤

①选中第一、二段内容后，利用“格式／段落”命令，打开“段洛”对话框后，设置“苜行缩进”为“32”。

②选中第三段的内容后，从“样式”下拉列表框中选择“标题4”。

③选中其它五行文字，选择“格式／项目符号和编号方式”命令，在打开的对话框中选择“无格式项目列表”选项卡，并选择空心圆项目符号

实例四在ex2.htm中除标题外将全部“FrontPage”改成“加粗倾斜”、“4（14磅）”、“蓝色”，然后保存该网页文件，并设置网页标题为“网页实验”。

操作步骤

①先选中文本第一段中的第一个“FrontPage”，单击“格式／字体”命令，打开“字体”对话框，把它改成“加粗倾斜”、“4（14磅）”、“蓝色”。

②使用：

工具栏上的“格式刷”按钮来复制其他同样的格式。

先把光标停在第一个已带格式的“FrontPage”上，双击“格式刷”按钮，鼠标指针成为格式刷的图标，再逐个在需要设置格式的“FrontPagc”上拖曳，文本中的“FrontPage”文字格式就成功修改。

③最后再单击一下“格式刷”按钮，取消其功能。

实验练习（独立完成）

1．打开shiyan2站点中的fazhanshi.htm文件，把标题设置成“居中”、字体大小为“5（18磅）”；正文的字体大小为“2（10磅）”且文字的颜色改成“灰蓝色”。

2．每段的小标题加粗。

第三课编辑网页

实例一 下载shiyan2站点并解压缩到E盘，打开“shiyan2”站点中的网页文件ex1.htm,设置标题文字的格式为隶书、24磅、蓝色，并将文档内容字体设置为“楷体”、“14磅”，“左右各缩进20像素”，“首行缩进40像素”。

操作步骤

①启动FrontPage2000，进入默认窗口，执行“文件”菜单中的“打开站点”命令

②在“打开站点”对话框中选择找到shiyan站点，如图3—1所示，单击“打开”按钮。

图3-1

③双击文件ex1.htm，选中标题文字，利用“格式／字体”命令，打开“字体”对话框后，设置为隶书、24磅、蓝色；选中文档内容，字体设置为“楷体”、“14磅”

④选中文档内容，利用“格式／段落”命令，打开“段洛”对话框后，设置“左右各缩进20像素”，“首行缩进40像素”。

实例二 打开shiyan2站点,在ex2.htm中,插入标题“Frontpage简介”，并设置为“24磅”、“隶书”、“加粗”、“蓝色”。

操作步骤

①双击文件ex2.htm，将光标定位在首字前，按回车，输入文字“Frontpage简介”

②选定文字“Frontpage简介”，利用“格式／字体”命令，打开“字体”对话框后，并设置为“24磅”、“隶书”、“加粗”、“蓝色”。

实例三 打开ex2．htm,设置第一、二段内容首行缩进32像素，设置第三段为“标题4”的样式，为其它段落设置空心圆项目符号。

操作步骤

①选中第一、二段内容后，利用“格式／段落”命令，打开“段洛”对话框后，设置“苜行缩进”为“32”。

②选中第三段的内容后，从“样式”下拉列表框中选择“标题4”。

③选中其它五行文字，选择“格式／项目符号和编号方式”命令，在打开的对话框中选择“无格式项目列表”选项卡，并选择空心圆项目符号

实例四在ex2.htm中除标题外将全部“FrontPage”改成“加粗倾斜”、“4（14磅）”、“蓝色”，然后保存该网页文件，并设置网页标题为“网页实验”。

操作步骤

①先选中文本第一段中的第一个“FrontPage”，单击“格式／字体”命令，打开“字体”对话框，把它改成“加粗倾斜”、“4（14磅）”、“蓝色”。

②使用：

工具栏上的“格式刷”按钮来复制其他同样的格式。

先把光标停在第一个已带格式的“FrontPage”上，双击“格式刷”按钮，鼠标指针成为格式刷的图标，再逐个在需要设置格式的“FrontPagc”上拖曳，文本中的“FrontPage”文字格式就成功修改。

③最后再单击一下“格式刷”按钮，取消其功能。

实验练习（独立完成）

1．打开shiyan2站点中的fazhanshi.htm文件，把标题设置成“居中”、字体大小为“5（18磅）”；正文的字体大小为“2（10磅）”且文字的颜色改成“灰蓝色”。

2．每段的小标题加粗。

第四课网页中的表格和图片

实例一下载shiyan3站点并解压缩到E盘，打开“shiyan3”站点中的网页文件ex2．htm，将其中内容按图4-1置于表格中，表格居中且宽度设置为浏览窗口的80％，表格的边框粗细为0。

图4-1

操作步骤

①利用工具栏上的“插入表格”按钮，建立一个4行1列的表格。

 ②右击表格内部，在快捷菜单中选择“表格属性”命令，打开“表格属性”对话框，设置表格对齐方式为“水平居中”，宽度占显示窗口的85％，表格的边框粗细为0。

③右击最后一个单元格，在快捷菜单中选择“拆分单元格”命令，打开“拆分单元格”对话框，选择拆分为2列。

④将第一段内容剪切到第一个单元格内，将第二段内容分别剪切到第二个单元格内，将第三段内容分别剪切到第三个单元格内，其它段落剪切到第四个单元格内，并通过拖曳最后一行两个单元格之间的分隔线，来调整单元格的宽度。

实例二 在ex2.htm网页的最后一个单元格中插人剪贴画，使其缩小并在单元格中居中，使之与网页的其他部分显得比较协调，并将该图片以taolun.gif为文件名保存在站点shiyan3的images文件夹中。

操作步骤

①将光标定位在网页中表格第四行的右边单元格中，选择“插入／图片／剪贴画”命令，单击“科技”类，找到所需要的图片后，单击该图片，并从打开的菜单中选择“插入”按钮。

②插入的图片很大，在图片上右击，选择“图片属性”命令，打开“图片属性”对话框，选择“外观”选项卡，设置图片的对齐方式为“水平居中”，选中“指定大小”复选框，设置图片的宽度为150像素并“保持纵横比”。

提示：

直接单击工具栏上的“居中”按钮也可以让图像居中。

③单击工具栏上的“保存”按钮，打开“保存嵌入式文件”对话框，单击“重命名”按钮，将原文件名改为“taolun.gif”，单击“改变文件夹”按钮，打开“改变文件夹”对话框，双击其中的“images”文件夹便选择了图片的保存位置。

注意：

在“保存嵌入式文件”对话框中，“重命名”按钮用于修改图像文件名；“改变文件夹”按钮用来更改图像保存的位置；“设置操作”按钮用于改变默认的设置操作。

实例三在图像上加入文本“学术讨论”，并对图像进行“冲蚀”处理，同时将图像的最右面一个人裁剪下来，删除不需要的那部分，并对图像进行“水平翻转”（如图4-2所示）。

操作步骤

①选中实例二中所插入的图片，单击“图片”工具栏上“文本”按钮。

②在图像中会浮现一个文字输入框，输入“学术讨论”。

提示：

若想把文字放到图片的其他位置，可以选定文字输入框，按住鼠标拖曳，将它放到合适的地方。

③保持选中该图像，单击“图片”工具栏上的“冲蚀”按钮。

④保持选中该图像，单击“图片”工具栏上的“剪裁”按钮，图像上会浮现一个方框。

⑤用鼠标拖曳方框右边的虚线，使方框保留需要的部分，把最右边的人排除在外。

⑥再次单击“剪裁”按钮，方框以外的部分被删除。

⑦单击“图片”工具栏上的“水平翻转”按钮，即使原来的图像左右对调了一下，结果如图4—2所示。

⑧单击工具栏上的“保存文件”按钮，出现“保存嵌入式文件”对话框，直接单击“确定”按钮。

图4-2

实例三 将网页ex1.htm的背景设置为“bj1.gif”

操作步骤

右击网页ex1.htm空白处，在快捷菜单中选择“网页属性”命令，在打开的“网页属性”对话框中选择“背景”选项卡进行设置。

实验练习（独立完成）

1、在网站shiyan3中新建网页lx4.htm,网页背景色为银白色，文字为白色。

插入一个4行4列的表格。

按图4-3修改表格。

2、按样张在lx4.htm中输入文字：

电脑配件，设置第一行文字属性为：

黑体、粗体、5号、居中。

3、在表格中分别插入图片j1.jpg、j2.jpg、j3.jpg、j4.jpg,j5.jpg（图片在shiyan3网站中的image文件夹中）,四周的图片设置宽度为126像素,高度为92像素，中间的图片高度设置为184像素。

图4-3

第五课网页中的超级链接

实例一下载shiyan4站点并解压缩到E盘，打开shiyan4站点中的ex2.htm网页，在表格的最后添加—行，分别输人“返回”和“回到第—段”，使“返回”与同一站点中的“index.htm”网页文件建立超链接。

操作步骤

①在文件夹列表中双击ex2．htm，将网页打开。

②将光标定位在最后一个单元格中，按键增加一行，该行由左右两个单元格组成，分别在这两个单元格中输入“返回”和“回到第一段”。

③选中刚添加的表格最后一行，右击后选择“单元格属性”命令，设置单元格内容的对齐方式为“水平居中”，指定单元格的高度为30像素。

④选中“返回”，单击“插入”菜单中的“超链接”命令，或单击工具栏上的“超链接”按钮，在“创建超链接”对话框的列表中选择“index．htm”，这时在“URL”文本框显示“index．htm”，单击“确定”按钮，窗口中的文字“返回”因为建立了超链接而呈蓝色显示。

图5-1

⑤单击“文件”菜单中的“保存文件”命令，或工具栏上的“保存文件”按钮，便建立了同一站点内的网页之间的链接。

实例二在ex2.htm网页中为“回到第一段”设置超链接:

当单击“回到第一段”后，光标停在第一段的开始处。

提示：

网页内容较长时，若想方便地从最后一行直接回到文章的第一行，或网页中间的某个位置，可以在同一网页内建立超链接，这需要通过设置“书签”的方法来完成。

操作步骤

①首先定义书签，选中第一段起始处的“FrontPage”，单击“插入”菜单中的“书签”命令，打开“书签”对话框。

②“书签名称”显示默认的书签名称，即选中的内容，也可以根据需要修改。

③单击“确定”按钮，这时在文字“FrontPage”下加了下划虚线，表示这儿有一个书签。

④选定网页末尾的“回到第一段”文本，单击工具栏上的“超链接”按钮，出现“创建超链接”对话框。

⑤在“书签”下拉列表框内选择②中所建立的书签名“FrontPage”，同时在“URL”文本框内显示“#FrontPage”。

⑥单击“确定”按钮便完成了网页内的超链接设置。

⑦单击“保存文件”按钮，并在浏览器中浏览该网页，尝试各个超级链接的使用，最后关闭浏览器窗口和ex2．htm编辑文档。

实例三打开shiyan4站点中index.htm,在文末添加“联系作者”、“我喜欢的网站”和“个人简历”，将“联系作者”链接到电子邮件地址mingchen@，将“我喜欢的网站”链接到，将“个人简历”链接到实验2文件夹中的janli.doc文件。

操作步骤

①打开“index．htm”网页文件，在原来的文本末，逐行添加“联系作者”、“我喜欢的网站”和“个人简历”文字。

②选中“联系作者”，单击工具栏上的“超链接”按钮，出现“创建超链接”对话框，单击对话框中右下角的“制作发送电子邮件的超链接”按钮，出现“创建电子邮件超链接”对话框，在“键入电子邮件地址”文本框中输入mingchen@，单击“确定”按钮，“创建超链接”对话框的“URL”文本框内使出现mailto：

mingchen@（也可在此处修改E-Mail地址），单击“确定”按钮完成设置。

③选中“我喜欢的网站”，单击工具栏的“超链接”按钮，在所出现对话框的“URL”文本框中输入（单击对话框右下角的“使用WEB浏览器选择网页或文件”按钮也可以确定自己喜欢的网站），单击“确定”按钮。

④选中“个人简历”，单击工具栏上的“超链接”按钮，单击对话框右下角的“制作一个指向您计算机上的文件”按钮，出现“选择文件”对话框，找到实验2文件夹中的“jianli．doc”文件，单击“确定”按钮。

⑤单击工具栏上的“保存文件”按钮。

并通过浏览器测试所制作的网页以及各种超链接的效果。

实验练习（独立完成）

1．打开shiyan4站点中的fazhanshi.htm网页文件，在文末添加文字“返回”与ex1.htm建立超级链接；添加文本“与我联系”，单击“与我联系”可给someone@发送电子邮件；添加文本“了解计算机的历史”，单击该文本与建立链接。

2．在文末位置添加文本“回到页首”，单击该文本可显示该网页的起始位置。

3．将网页文件另存为newfazhanshi.htm。

第六课表单

表单为人机交互提供了一种有序的结构

实例 下载shiyan5站点并解压缩到E盘，打开shiyan5站点，新建网页ex3.htm，网页标题为“调查表”，具体内容及格式编排如图6-1所示,其中所在系别分别为：

“电子系”、“数学系”、“物理系”、“计算机系”，初始选定为“计算机系”。

图6-1

操作步骤

①启动FrontPage2000后打开站点shiyan5，在默认的new.pagel.htm网页中输入第一行文本“调查表”。

②在第二行定位光标后，单击“插入/表单/单行文本框”命令，出现如图6—2所示的虚线框，将光标移动到虚线框中文本框的左边，输入“姓名：

”；然后双击文本框，设置该文本框的“名称”为XM，“宽度”为10,如图6—3所示。

图6-2

图6-3

③将光标定位到文本框后面，按回车键，并输入“性别：

”，单击“插入／表单／单选按钮”，在插入的单选按钮上双击，将该单选按钮的名称设置为XB，并在其后输入“男”；按若干空格键后，继续插入单选按钮，并在其后输入“女”。

 ④再次换行后输入“所在系别：

”，并单击“插入／表单／下拉菜单”，双击插入的下拉菜单框，将“名称”设置为“SZXB”，并单击“添加”按钮，在列表中加入“电子系”、“数学系”、“物理系”、“计算机系”，初始选定的是“计算机系”。

其他三个的初始状态为未选。

⑤再换行后输入“兴趣爱好：

”，单击“插入／表单／复选框”输入复选框，并按图6-4中的文字进行输入。

图6-4

⑥双击“全部重写”按钮，将按钮“值／标签”改为“清除”。

然后将表单上方的标题和按钮都设置居中。

⑦保存网页为ex3．htm到shiyan5站点中，并在浏览器中进行预览，修改表单内容，最后使用“清除”按钮，看看能否将修改内容还原。

实验练习（独立完成）

打开shiyan5网站，并按1—4题的要求在网站中建立和修改网页（效果如图6-5所示）

1. 在网站中新建网页bd.htm网页，在第一行输入文字：

凋研，文字中间空2个汉字的位置，并设置为“标题1”格式、深蓝色，水平居中；表单第—行的单选按钮的初始设置为“电子商务”。

2.表单中“付款方式”下拉菜单，选项从上到下依次为“直接上门付款”、“VIP卡支付”、“直接网上信用卡支付”和“网上电子钱包支付”，其中第二项为默认显示并选定的内容。

3.表单中设置“姓名”文本框，宽为10；性别文本框，宽度为6；“身份证”文本框的宽度为18；

4. 按样张插入文本框“您的建议：

宽度40，行数4；并分别设置“提交”和“重置”按钮；

图6-5

第七课框架网页

实例一下载shiyan6站点并解压缩到E盘，打开shiyan6站点，新建具有“横幅和目录”版式的框架网页ex4.htm，在上框架对应的网页文件名为ex4s.htm，显示内容为“我的作品”的标题，标题的文本格式自定，可参考本范例的结果；左框架对应的网页文件名为ex4z.htm，显示内容从上到下分别为“实验1”、“实验2”、“实验3”的目录；右框架中的初始页面内容为index.htm（效果如图7-1所示）。

图7-1

操作步骤

①启动FrontPage2000后打开站点shiyan6，选择“文件／新建／网页”命令，打开“新建”对话框，并选择对话框中的“框架网页”选项卡。

②选择“横幅和目录”后单击“确定”按钮，出现的框架网页由上框架、左框架和右框架组成。

如图7-2所示

图7-2

③在上框架中单击“新建网页”，并输入“我的作品”，然后选中文字，设置“居中”且字体为“华文行楷”、“6号”、“蓝色”。

④在左框架中单击“新建网页”，并分三行输入“实验1”、“实验2”、“实验3”，然后选中文字，设置“居中”且字体为“隶书”、“4号”、“加粗”。

⑤在右框架中单击“设置初始网页”，打开“创建超链接”对话框，选中index．htm后，单击“确定”按钮，便从右框架中可以看到index．htm的网页内容。

⑥选择“文件／另存为”命令对框架进行保存，先出现用于保存整个框架页面的“另存为”对话框，输入文件名ex4．btm，如图7-3所示；并单击“确定”按钮后，出现用于保存上框架的对话框，输入上框架的文件名ex4s．btm后，如图7-4所示；单击“确定”按钮，出现用于保存左框架的对话框，输入文件名ex4z．htm后，如图7-5所示，单击“确定”按钮，便完成了对框架及其所涉及的所有网页文件的保存。

图7-3

图7-4

图7-5

提示：

框架页面中记录了其中所包含的各个网页的地址信息，所以当保存框架页面时，除了需要保存框架中各个具体的网页外，还需要保存框架网页本身，如对于“横幅和目录”类型的框架网页，需要保存的网页文件有四个。

在本范例中，由于右框架是事先已经存在于站点中的，所以不会出现“另存为”对话框来提示保存。

⑦到浏览器中预览框架网页的效果，完成后关闭所编辑的文档。

实例二 对ex4．htm左框架中的三行文字分别设置超级链接，使得用户单击“实验1”后，右框架中显示ex1.htm的内容；单击“实验2”后，右框架中显示ex2.htm的内容；单击“实验3”后，右框架中显示ex3.htm的内容，完成后保存该框架网页。

操作步骤

①打开站点shiyan6中的ex4．htm框架网页文件，选中左框架中的文字“实验1”，单击工具栏中的“超链