8.5.1  Web的开发

1.Web开发的准备阶段

       在开始网站制作之前，我们首先要先规划好网站的框架，也就是要考虑“我的网站”要包括哪些内容，选择什么样的选材，即对“我的网站”进行定位。一般来说，个人网站的选材要小而精。题材最好是我们自己擅长或者喜爱的内容。比如：你对诗歌感兴趣，可以放置自己的诗词；对足球感兴趣，可以报道最新的球场战况等等。网站定位好后，我们一定要总体规划一下整个网站的结构，也就是由哪些页面组成。从学生的角度来考虑“我的网站”网站可以包含个人简介、学习心得、友情链接等页面，我们可以设计出如图所示的网站总体框架结构。

2. Web的开发过程

（1）站点的建立

 ①启动FrontPage2003，选择菜单“文件/新建”命令，随后在窗口右侧的“新建网页或站点”任务窗格中，点击“新建网站”下的“其它网站模板”选项。打开如图所示的“网站模板”对话框。

       ②在打开的“网站模板”窗口中单击“指定新网站的位置”文本框下方的“浏览”按钮，在本地硬盘选择一个保存站点的文件夹。在左侧的“常规”选项卡中提供了多个站点的模板，可以根据自己的需要选择模板类型，如果选择“个人网站”模板，此时系统开始创建整个站点，包括各种页面和页面主题，一个简单的个人网站就已经建立好了，如图8-14所示。很多工作已经由系统帮我们完成了，只需要我们对页面的内容进行修改就可以了。

                                          8-14  “个人网站”播版创建的页面和主题

（2）页面内容的制作

①视图状态

      网页设计窗口如图8-15左下方有“设计”、“拆分”、“代码”、“预览”四个按钮，它们分别代表四种视图，单击这四个按钮可以实现四种视图间的切换。

A. “设计”视图

       如图8-15所示的视图是处于默认的“设计”视图状态。“设计”视图主要用于对网页内容进行布局安排和修改等，能方便我们更好地美化网页，更合理地布局网页。

                                                         8-15   网页设计窗口

B. “代码”视图

    “代码”视图主要用于显示网页内容的HTML代码，可以让我们HTML代码对网页进行设计和修改，对于习惯编程的用户来说，是必不可少的。“代码”视图如图8-16所示。

                                                         8-16  “代码”视图

C. “拆分”视图

    “拆分”视图是同时显示代码视图和设计视图，让我们能够更好地理解源代码，提高编程语言应用能力。“拆分”视图如图8-17所示。

                                                          8-17  “拆分”视图

D.“预览”视图

“预览”视图是用于对网页在浏览器中的效果进行预览，可实时观看我们制作的网页效果。“预览”视图如图8-18所示。

                                                            8-18  "预览"视图

 ②制作主页

A. 添加文字内容，设置文本格式

       根据需要，我们现在为主页添加文字内容，然后对其进行编辑。我们可以像使用Word一样对选择的文本进行编辑，或者设置文本的字体、样式、大小和颜色等。

B. 添加图片内容

       在Frontpage2003环境下为网页添加图也非常方便。下面就为“主页”页面添加加一个logo图片为例来介绍。

第一步：在“设计”视图模式下，将插入点放置到图8-15中“欢迎光临我的网站！”位置处，选择“插入/图片”菜单下的“来自文件”命令，打开选择文件对话框，找到要插入图片文件所在的位置，选中待插入的文件（logo.jpg），如图8-19所示；

                                                                8-19  选择待插入的文件

第二步：单击“插入”按钮即可，logo图片就插入到指定的位置。如图8-20所示。

                                                         8-20  插入logo图片后的主页

C. 制作超链接

       在FrontPage中，超链接是文本或图片的一个基本属性。只要合理地设置文本或属性，就可以为文本或图片建立超链接。下面我们介绍如何在网页上建立超链接。

      第一步：在网页中选中要建立的文本或图片，单击鼠标右键，在弹出的快捷菜单中选中“超链接属性”（或者单击“插入”下面的“超链接”，也可以使用“Ctrl+K”快捷键）就会弹出“插入超链接”对话框，如图所示。

      第二步：在如图8-21“插入超链接”对话框中选择超链接的目标文件，单击确定按钮，超链接就制作完成。

                                                 8-21    ”插入超链接“对话框

D. 插入背景音乐

       根据需要还可以设置网页的背景声音。当站点访问者打开网页时，就会播放声音。您可以持续地播放声音，或只按指定的次数播放。下面是主页插入背景音乐的方法步骤。

       第一步：在“主页”的设计视图模式下，用鼠标右键单击网页，然后选择快捷菜单中的“网页属性”命令。弹出对话框如图8-22所示的“网页属性”对话框。

       第二步：在“常规”选项卡中的“背景音乐”下的“位置”框中输入要播放的声音文件名，或单击“浏览”按钮找到要插入的背景音乐文件，单击“确定”按钮即可。要持续地播放声音，请选择“不限次数”复选框。如果只要声音播放固定次数，请清除“不限次数”复选框，然后在“循环次数”框中键入播放的声音次数。

                                                     8-22  ”网页属性“对话框

       在网页的制作过程中应注意网站所有的文件名不要使用中文名。否则上传到网上后由于系统无法识别所以会无法显示。

8.5.2  Web的测试与发布

1.网站测试

在将站点上传到服务器并可供浏览之前，我们首先要在本地对其进行测试。这一过程应该确保页面在目标浏览器中如预期的那样显示和工作，而且没有断开的链接 ，检查页面下载是否占用太长时间，检查代码中是否存在标签或语法错误，并且可以通过运行站点报告测试整个站点并解决出现的问题。

（1）拼写检查

       拼写检查是发现并纠正网页中出现的英文单词拼写错误。在FrontPage2003种打开站点，用鼠标左键单击“工具”菜单下的“拼写检查”命令，然后在出现的“拼写检查”对话框选择“整个站点”和“为有拼写错误的网页添加任务”，单击“开始”按钮，开始对打开的整个站点进行拼写检查。检查的过程中可以按“停止”按钮暂停拼写检查。

（2）测试链接

       网页都是通过超链接建立起联系的，在FrontPage2003中提供了一个报表管理器，可以方便地分析站点并管理其内容。打开站点，单击视图栏中的“报表”按钮，就可以看到网站内文件内容、更新链接情况、使用的主题和任务等信息，双击每一项内容，就可以查看更详细的信息。

（3）使用网页浏览器测试站点

       测试的目的在于确认文本、图像和声音是否正确，超链接是否正常到达相应的页面。一般都是使用IE和网景这两种网页浏览器进行测试。

2. 网站发布

       发布站点，首先需要申请站点的域名和租用服务器空间，然后通过FTP工具把网站上传到服务器上，这样就可以让每一个角落的访问者浏览到站点的内容了。对于服务器空间的各种参数，最重要的是明确空间的大小、稳定性、安全性和是否支持动态网页程序，一些网络服务公司提供的免费的域名服务，一般都是二级域名（即域名中包含提供服务的公司信息），这些空间的缺点是稳定性不高、一般不支持动态网页程序。

       使用FTP工具软件，可以将我们制作好的网页文件或其他资源文件上传到远端的服务器空间。这里我们就来详细介绍一种FTP工具——CuteFTP。

       CuteFTP在使用时，用户不需要知道其传输协议的具体内容。它易于使用，而且界面友好，不仅可以上传或下载整个目录及文件，而且可以上传或下载线程，还支持上传或下载的断点续传。

（1）确保本地计算机与Internet建立连接。

（2）在Internet上申请免费个人主页空间(如http：//www.qzone.com)，并查看关于FTP上传的说明，确定FTP服务器地址、用户名和密码等信息。

（3）双击桌面上的CuteFTP图标启动CuteFTP。进入CuteFTP工具界面，如图8-23所示。

                                                  8-23  CuteFTP工具界面

（4）单击工具栏上的“站点管理”按钮或从菜单栏选择“文件”下的“站点管理”命令打开“站点管理器”对话框。如图8-24所示。

                                                8-24  ”站点管理器“对话框

（5）在“站点管理器”对话框中单击“新建”按钮，左边窗格目录树中将出现一个“新建站点”分支。如图8-25所示。

                                                       8-25   新建站点

（6）在“站点管理器”对话框的右边窗格中填写FTP服务器主机名、用户名和密码等信息。

（7）单击“站点管理器”对话框的“连接”按钮，连接FTP服务器。

（8）登录FTP服务器成功后，会弹出一个对话框，提示登录成功，单击“确定”按钮关闭此对话框。

（9）在本地窗格中，选择需要上传的文件；在远程窗格中，选择保存上传文件的目录。可以用鼠标直接拖动要上传的文件到远程窗格上，或双击要上传的文件，也可以选中要上传的文件，单击工具栏上的“上传”按钮。如图8-26所示。

（10）上传开始，可以通过日志窗格中的显示查看上传情况。