1、实训十二 个人网站制作实训说明本网站名称为“阿呆的家” ，目的是向浏览者展示站长阿呆的个人风采，介绍网络朋友。网站的首页设计成引导页，引导页相对简单，下载迅速。在引导页上说明本网站的名称，并在右下方安排了一个入口，使浏览者直接进入网站中心部分。“阿呆的家”网站内容包括五个部分，如下： 我的简介 我的心情 我的相册 我的朋友 联系我该站点根目录下一共包括八个文件夹，各目录的名称及作用如下：“introduce”目录：存放“我的简介”版块的文件。“mood”目录：存放“我的心情”版块的文件。“photo”目录：存放“我的相册”版块的文件。“friend”目录：存放“我的朋友”版块的文件。“cont
2、act”目录：存放 “联系我”版块的文件。“image”目录：存放引导页及各页面公共的图片。“navigator”目录：存放导航条按钮，本网站均为 flash 按钮。实训前的准备准备网页所需要的图片，本实例已经将需要的图片等放入光盘实训十二目录下。实例操作步骤一、网站建设概述及流程在 Internet 的发展中，任何个人和公司都可以在 Internet 上创建自己的主页和 Web 站点，发布自己定制的信息，展示自己的产品、服务和个人的爱好等等，并让任何拥有 Web浏览器的用户非常方便地访问某个个人或公司的 Web 站点，浏览其信息。这就是说，在Internet 上人们只要启动浏览器，在“地址”
3、处输入 Web 站点地址，便可以进入希望前往的站点并浏览相应的网页。网页是构成 WWW 的基本组成单位，在网页中，可包含文字、声音、图形、图象、动画等信息，还可以包含超链接，使得可以从一个页面快速跳转到另一个页面。网页是以网页文件的形式制作和保存，网页文件的扩展名是.htm 或.html 。网站（Web Site）是 WWW 上的一个结点，网站中保存了多个网页以及站点结构，网页间用超链接联系。网页可以是站点的一部分，也可以独立存放，但只有当网页存放到网站中时，网页的许多特性才有效。每个站点都有一个主页（首页） ，通过主页上的超链接，可以进入其他网页。通常，主页文件名为 index.htm 或
4、default.htm。然而，对于网页设计的初学者来说，最关键的是如何从无到有的做出一个网站，并且能够让其他人通过网络访问到自己的网站。这通常需要通过申请空间、申请域名、网站制作、网页上传、网站测试、网站维护、网站推广等流程完成。1、申请空间我们看到形形色色的网站到底存在哪里呢？其实任何网站都存放在网络的服务器中，申请空间就是给自己的网站在网上找个家，即找到某台服务器，申请部分空间用于存放自己的网站。申请的步骤一般是：选定注册用户名，设定密码并填写一些个人及个人主页的资料（如姓名、身份证、email、省份、爱好、单位等） ，注册成功后，管理员一般会用Email 的方式通知用户帐号是否已经开通，
5、并告之用户所申请的用户名、密码以及上传主页的服务器名等信息。2、申请域名域名是网站在互联网上的名字，就是我们通常所说的网址，比如 就是一个域名。空间申请好之后，还要给网站申请一个域名，这样其他人才能通过域名访问到自己的网站。申请步骤基本同主页空间的申请一致。3、网站制作在空间、域名申请好之后，接下来就开始网站制作了。但这里讲的网站制作并不是立刻把电脑打开，用软件、鼠标做出一个网页。一个好的网站，还必须经过网页题材策划、结构规划、素材的采集，最后才开始用软件设计网页。本书将详细讲解如何完成网站制作。4、网页上传个人网站做好了，就要把网站放到申请的空间里面，这样才能在互联网上访问到你的网站。把网
6、站从自己的电脑放到申请的空间里，这就叫网页上传。网页的上传方式由提供个人主页空间的服务商确定，一般有 Email 发送、WEB 页面上传和 FTP 上传等几种方式。其中 FTP 上传比较直观，常用软件 Cuteftp 来上传主页。这个软件完全免费，而且操作简单，还支持断点续传。5、网站测试网站上传后，还要看它是不是可用的，要进行网站测试。网站的测试主要包括三方面测试：一个是测试页面的 HTML 语法合法性，以保证技术上的正确性；一个是测试页面浏览的兼容性，以确保页面在使用不同的浏览器浏览时都能正常显示；最后一个是测试主页的链接是否正常，是否存在断链，现在的 HTML 编辑软件一般都提供这项功能
7、。6、网站维护网站的制作，并不是一件一劳永逸的事，不断的更新和长期的维护才能使你的网站具有生命力，才能吸引更多的浏览者访问你的站点。在主页的更新和维护中，应注意保持原有主页结构和风格的一致，特别是保持页面风格的一致。最有效的方法就是充分利用HTML 编辑软件提供的模板功能，创建一套随时可供调用的页面模板，简化页面更新和维护的工作量。7、网站推广有句古话叫“酒香不怕巷子深”，但是在网络上这可行不通，每天网络上的新站点以几何级数增长，如果你不努力地宣传自己，即使你的主页很出色，用不了多久也会无声无息地淹没在茫茫网海之中。常用的一种推广方式是在各大搜索引擎注册，这样别人就可以通过搜索引擎搜索到你的网
8、站。注册搜索引擎时，建议优先考虑中文搜索引擎，如雅虎、搜狐等。另外还可以与其它主页互建友情链接、把网站广告发送到别人的电子邮箱等方式进行网站推广。然而所有推广工作的前提就是对网站的认真建设和更新维护，把网站做好。接下来将讲述如何才能制作一个好的网站。二、网页设计注意：各目录名称都不要用中文。（一）站点的建立在制作网页时，首先要建立站点。点击桌面上左下脚的开始菜单，在“程序”菜单中找到 Microsoft Office，在后续菜单中找到 FrontPage 2003，开始建立站点。选择“文件”“新建” ，在软件右边出现新建栏目，可以从中选择新建网页还是新建站点。本节提供了一个建好的站点，用户只需
9、要选择“文件”“打开网站” ，选择 my home 网站所在的路径即可。提示：也可以从工具栏上的 “打开网站 ”按钮实现打开网站的功能。（二）引导页的制作现在许多个人网站都流行在主页前面加上一个引导页，这里称之为首页，下图是本网站的引导页的完成图，接下来详细介绍引导页的制作方法。1. 双击右边文件夹列表中的 index.htm，开始引导页的制作。网页一般都通过表格来布局，根据效果图，需在 index.htm 页面中插入一个两行两列的表格。选择菜单“表格”“插入”“表格” ，插入一个两行两列的表格，居中，指定宽度为 500 像素，边框为0。插入表格后，选中第一行，右击合并单元格，如下图所示，为便
10、于后面的编辑，在此对单元格进行编号。2. 打开左边的“文件夹列表” ，将 image/adai_icon.gif 拖入到 1 号单元格内，同样，将image/adai_word.gif 拖入 2 号单元格内，将 enter.swf 拖入到 3 号单元格内，在设计试视图和预览视图效果如下所示。3. 现在引导页面已经完成了，按下键盘上 F12 即可在浏览器中预览最终效果。（三） “我的简介”页面制作“我的简介”页面是其他页面的基础，该页面完成效果如图所示。观察效果图，该页面其实是通过三个大的表格布局完成，分别为页面上部（页眉） 、主体、页面下部（页脚）组成。1. 双击打开 introduce/in
11、troduce.htm 页面。页眉部分由一个 3 行 2 列的表格组成，考虑到显示器的分辨率，在 introduce.htm 页面插入一个三行两列的表格，指定宽度为 773 像素，边框粗细为 0，单元格间距为 0。按下图所示合并单元格，并用数字标注了各单元格序号，便于讲解，实际例子中不需要标注。2. 把文件夹列表中 imagelogo.jpg 拖入到 1 号单元格，并调整单元格大小。Logo 其实就是网站标志，一般是网站名称再配些简单图像，把它放在显眼处，让别人一到你的网站就知道这个站点的名字，便于浏览者记住你的站点。3. 选择 2 号单元格，右击选择“单元格属性” ，为该单元格指定背景图片为
12、image/head_right.jpg。同时，将 image/welcome.gif 拖入 2 号单元格。最后再将 image/head_bottome.jpg 拖入 3 号单元格，效果如下图所示。其中 4 号单元格作为页眉与主体的间隔，不做操作。4. 在主体部分插入一个 3 行 3 列的表格，其宽度仍然为 773 像素，边框为 2，居中对齐，单元格间距为 0，边框颜色使用吸管选取页眉插入图片的绿色。合并单元格，表格编号如下图所示。5. 在 1 号单元格中插入一个 5 行 1 列的表格，居中对齐，单元格间距为 10，边框为 0，并使单元格文本居中对齐。把文件夹列表中 navigator 文件
13、夹内的图片依次放入下图所示单元格中。6. 右击“我的简介”图片，为其添加超链接。选择“原有的文件或网页” ，链接到 introduce/introduce.htm，如下图所示。同样，分别将“我的心情”链接到 mood/mood.htm， “我的相册”链接到 photo/photo.htm， “我的朋友”链接到 friend/friend.htm， “联系我”链接到 contact/contact.htm。7. 在 2 号单元格中插入 image/space.gif 图片。在 3 号单元格中插入一个 4 行 1列的表格，居中对齐，单元格间距为 10，边框为 0，并使单元格文本居中对齐。8. 在新
14、建的第一个单元格中输入文字“友情链接” ，字体为隶书，18 磅，颜色为A3,00,7D 。在剩下的单元格中分别输入“猴子的家” 、 “小胖的家” 、“包子的家” ，用于作本站的友情链接。字体为幼圆，大小 12 磅，最终效果如下图所示。9. 由于目前尚未有朋友的链接，因此对以上的友情链接，仅使用空的超链接，即选择文本，在“原有文件或网页”中的地址栏内写下 http:/即可，如下图所示。10. 接下来在 4 号单元格内插入一个 2 行 2 列的表格，居中对齐，单元格间距为 10，边框为 0。将第一行单元格文本右对齐，并将第二行单元格合并。在第一行第一个第一个内写入“我的简介” ，字体为隶书，24
15、磅，颜色为A3,00,7D 。在第二个单元格内插入 image/square.swf，调整大小和位置。11. 在下面的单元格内输入个人简介文本，也可以拷贝 introduce/introduce.txt 文件内的文本内容。设置字体为幼圆，14 磅，颜色为A3,00,7D 。同时，选择“姓名”等所在的行，使用“格式”“项目符合和编号”“无格式项目符号”中的圆点，效果如下图所示。12. 接下来做页脚部分。插入一个 2 行 1 列的表格，宽度为 773 像素，居中对齐，边框为 0，文本居中对齐。选择第一行，使用“插入”“水平线” ，在第二行中输入版权信息，采用合适的字体，如下图所示。最后，右击网页，
16、选择“网页属性” ，在格式选项卡中使用 image/background.gif 背景图像，至此， “我的简介”页面就做好了。13. 可以将“我的简介”页面存为模板，这样可以为其他页面的制作节省不少时间。打开 introduce.htm 页面，选择“文件”“另存为” ，保存类型为“动态 Web 模板” ，在 MyHome 站点下新建一个名为 temp 的文件夹，将模板存储在该文件夹内。这时，文件夹列表中多了一个 temp/introduce.dwt 的文件。14. 编辑 introduce.dwt 文件。选中 “我的简介”所在单元格，选择菜单 “格式”“动态 Web 模板”“管理可编辑区域”
17、，在弹出的对话框中输入区域名称为 title，单击添加按钮。再选中“我的简介”下面的单元格，输入区域名称为 content，单击添加按钮，效果如图所示。此时，在 introduce.dwt 文件中多了名为 title 就 content 的橙色可编辑区。保存模板，在做后续页面时，直接应用模板就可以了。（四） “我的心情”页面制作在“我的简介”页面制作基础上， “我的心情”页面就非常好做了。1. 通过文件夹列表双击打开 mood/mood.htm 页面，选择 “格式” “动态 Web模板”“应用动态 Web 模板” ，找到刚才创建的 introduce.dwt 文件，点击“打开”即可。这时在 m
18、ood.htm 页面上就出现了和 introduce.htm 页面一样的界面。在橙色编辑区以外出现不可用的图标，表示仅在编辑区内才可以修改页面。2. 把“我的简介”修改为“我的心情” ，并将下方原来的文字删除，添加和自己心情相关的内容，选择合适的字体即可，如下图所示，最后保存。这样“我的心情”页面制作就全部完成了。（五） “我的相册”页面制作“我的相册”页面的制作也是先应用前面做好的模板，然后再进行编辑，完成的页面效果图如下图所示。1. 打开 photo.htm，应用 introduce.dwt 模板，把“我的简介”修改为“我的相册” 。删除下方的文字，插入一个 3 行 5 列的表格，居中对齐
19、，单元格间距为 10，边框为 0。2. 将 photo/thumbnails 文件夹内的第一张拖入到新建表格的单元格内。右击插入的图片，选择“图片属性” ，取消“保持纵横比” ，设置图片宽度和高度均为 100 个像素，如图所示。3. 右击刚插入的图片，选择“图片属性” ，在常规选项卡中“文本”前打勾，并输入“我一个月了”等字样，用于替代文本。接下来选择超链接，使用“原有的链接或网页” ，链接到 photoimagesBAJ010104.GIF。这样，在浏览器中浏览时，点击插入的小图片，就可以链接到大的图片，使用浏览器的“后退”按钮，又可以回到“我的相册”页面。4. 依次将 photo/thum
20、bnails 文件夹内的图片放入单元格内，设置图片大小和超链接，最后保存页面，如图下所示。到这里， “我的相册”页面已经制作成功了。（六） “我的朋友”页面制作“我的朋友”页面的制作也是先应用前面做好的模板，然后进行编辑，完成的页面效果如下图所示。1. 打开 photo.htm，应用 introduce.dwt 模板，把“我的简介”修改为“我的朋友” 。删除下方的文字，插入一个 3 行 2 列的表格，居中对齐，单元格间距为 2，边框为 1，边框颜色使用吸管选取页眉插入图片的绿色。2. 在第一列单元格中依次插入图片 friendimage 里面的图片，图片大小为100100 像素。在第二列单元格
21、中依次输入各位朋友的相应介绍，使用合适的字体，如图所示。最后保存该页面， “我的朋友”页面制作完成。（七） “联系我”页面制作“联系我”的页面制作和“我的心情”页面一样，也是应用模板，编辑内容即可。最后完成的效果如下图所示。至此，我们就完成了包含 6 个页面的“阿呆的家”网站制作。小结1. 做网站前需要建立站点2. 网页命名不能出现中文3. 表格布局4. 多种超链接的制作5. 更改图片大小思考题1. 主页制作完成后，如何发布到我的网站上？首先请使用 FTP 类软件登录到您的网站上，您将看到服务器内已建有一个 WWW 目录。将您的所有网页文件直接上载到这个 WWW 目录内，即可直接在浏览器内浏览
22、到您的网站。最常用的 FTP 软件为 cuteFTP，该软件的下载及使用方法请见技术支持。2. 我在设计网页时，屏幕的大小应该是多大?据调查，最常见的屏幕大小是 800x600 像素，紧接着是 1024x768 像素。所以，你应该试图将你的网页的主要部分的宽度保持在 720770 像素。近来，人们也在使用别的设备来访问网页，比如手机，等等。这些设备的屏幕比较小，所以，要想让你的网页在这些设备上看上去不错的话，你应该在设置宽度时使用百分比选项，而不是像素选项。3. 我所设计的网页的文件大小应该是什么样的？网页文件的大小方面没有这样的限制。网页文件的体积越小，网页在浏览器上下载的时候，下载速度就越
23、快。据预言，如果网页大小在 4070kb 之间，那么有些搜索引擎对它们的识别度就会更好。4. 要想进行网页设计，必须学习 HTML 吗？最好可以。如果你不懂 HTML，而用 Dreamweaver 这样的编辑器设计出一个网页，那么你所设计的网页可能不会很好。没有 HTML 的相关知识，你也不能处理 CSS 等东西。为什么我所设计的网页的颜色在别的机器上看上去就不一样了呢？一个网页上的可视的颜色是由三种颜色混合而成的，这三种颜色分别是红，绿，蓝。这三种颜色的色度在不同的监视器上会发生变化。这就是一个网页的颜色在不同的监视器上看上去会有所不同的原因。5. 为什么我的网页的文本在不同的机器上看上去会不一样呢？你用在网页上的字体必须在你浏览的机器上有安装。并不是你用在你的网页上的每一种字体都在每一台机器上安装过。
