《网页设计与制作》综合实训指南

《网页设计与制作》综合实训指导书网站开发的参考案例1.1 规划网站1．策划网站主题我们网站是德阳嘉兴别墅设计公司．公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念，坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨，追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格，以新颖时尚的设计、规范精致的施工和热情人性的服务，为业主构筑温馨、舒适、精美、典雅的家园。

2．确定网站风格确定好站点主题后，根据该主题选择站点的风格。

所以本案例所建立的网站是别墅设计类网站。

本网站的主要特点如下：（1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格或层实现效果。

（2）背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。

（3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。

3．构思网站栏目结构先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。

本案例的“别墅设计网”的栏目结构如表17-1所示。

表17-1 “别墅设计网”的栏目结构为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展示，公司简介。

4．规划网站目录结构和链接结构根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。

“别墅设计网”的目录结构，各文件夹的所存放文件类型如表17-3所示。

表17-3 网站的目录结构及其存放的文件类型index.html 主页网站的链接结构与目录结构不同，网站的目录结构指站点的文件存放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。

本网站的链接结构采用“网状”链接结构，结构图如图17-2所示。

图17-2“网页教学网”中的链接结构5．主要页面布局设计使用表格对首页与其他几个主面导航页面的布局结构草图进行设计，主页布局结构草图如图17-3所示，两种形式的导航页面布局结构草图如图17-4和图17-5所示。

由于本网站中许多页面都采用图17-5所示的布局结构，所以可以将该网页制作成模板。

图17-3主页的布局结构草图图17-4利用“框架”制作的导航页面图17-5利用“表格、层、浮动框架”制作的导航页面1.2准备素材根据网站的栏目、内容设计，链接结构设计，首页的布局结构，几个主要导航页面的布局结构，准备所需素材1．准备文本准备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜集文字资料，然后制作成word文档或文本文件，注意各种文字资料的文件名命名要科学合理，避免日后找不到所需的文本内容。

2．准备Logo利用Fireworks或Photoshop量身定做本网站的Logo标志，Logo标志要与本网站的主题相符，要有新意。

3．准备图片及按钮根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、按钮需要自己利用图像处理软件制作。

注意图片文件要尽可能小。

4．准备动画网站中的动画最好能突出主题，起到画龙点睛之功效。

动画一般利用flash软件制作，本网站主页和导航页的标题动画就是利用flash软件量身定做。

5．建立库项目网页中经常用到的项目，例如版权区，可以事先定义为库项目，以备制作网页时重复使用，提高工作效率。

1.3创建网站1．创建本地站点在开始着手设计网页之前，首先要定义站点。

因为网页只是网站的一个组成部分，所有设计的网页和相关文件都要放置于站点之中。

定义站点的好处是：定义站点以后的所有操作都是在站点统一监控之下进行。

如果使用了外部文件，Dreamweaver就会自动检测并予以提示和询问是否将外部文件复制到站点内，以保持站点的完整性。

如果某个文件夹或文件重新命名了，系统会自动更新所有的链接，以保证原有的链接关系的正确性。

创建站点之前，要求先建立一个文件夹，以便创建站点时为站点指定存储位置。

在Windows操作系统中，打开“资源管理器”，创建一个名为“网页教学网”的文件夹。

创建站点在第3章已有详细介绍，在此只作简要说明，与第3章中的步骤有所区别，这里假设事先已申请了主页空间，所申址的网址为：，用户名和密码也已经知道。

定义站点的操作步骤如下：（1）在Dreamweaver 8主窗口中，单击菜单【站点】→【新建站点】，将弹出如图17-6所示站点定义对话框。

在该对话框中先输入站点的名称，然后输入网址，如图17-6所示。

接着单击【下一步】按钮，进入到下一步操作。

（2）选择“否，我不想使用服务器技术”单选按钮，然后单击【下一步】按钮，进入到下一步操作。

（3）选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选按钮，接着在下面的文本框中输入站点文件在本地计算机上的存放位置，也可以选择存储位置，然后单击【下一步】按钮，进入到下一步操作。

（4）选择连接到远程服务器的方式为“FTP”,然后分别输入Web服务器的主机名、在服务器上文件的存储位置、FTP用户名、FTP密码等参数，如图17-7所示。

然后单击【下一步】按钮。

（5）选择“否，不启用存回和取出”单选按钮，如图17-8所示。

接着单击【下一步】按钮，此时会显示所定义的站点信息。

如果发现有误可以单击【上一步】按钮，返回到上一步操作的对话框中重新修改。

如果站点定义信息符合要求，可以单击【完成】按钮，完成站点的定义。

此时会自动显示“文件”面板，并且会自动切换到新创建的网站。

图17-6输入站点名称及网址图17-7设置连接远程服务器的参数2．网站目录结构的搭建创建站点后，在“文件”面板中切换到新创建的站点，然后利用快捷菜单创建文件夹及子文件夹，本网站的目录结构如图17-9所示。

图17-8选择是否启用存回和取出图17-9“网页教学网站”的目录结构1.8查看与设置站点地图站点地图使用直观的树状结构显示网站中文件的链接关系，在站点视图中可以将文件加入到站点中，或者加入、修改、删除链接。

1．查看站点地图在“文件”面板中，单击视图列表中的“地图视图”，如图17-27所示，这时，在文件列表中将以站点地图的方式显示网站的文件，展现出站点中文件之间的链接关系。

单击【展开以显示本地和远端站点】按钮，将把以地图视图显示的“文件”面板展开，如图17-28所示。

在图17-28中单击工具栏的【站点地图】按钮，从其下拉菜单中选择“地图和文件”，如图17-29所示，也可以选择“仅地图”。

在站点地图视图中，首页文档index.html显示图17-27选择“地图视图”在最上方，在index.html文件名下方的页面都是由首页所链向的页面。

在站点地图视图中，不仅能显示出内部链接，还能显示出外部链接、电子邮件链接、外部样式文件、图像文件等。

图17-28站点文件以“地图”形式显示2．站点地图中的操作（1）隐藏文件在站点地图中选定一个或几个要隐藏的文件，然后单击鼠标右键，在弹出的快捷菜单单击【显示/隐藏】命令，被选中的文件就会在站点地图中消失。

图17-29“站点地图”下拉菜单※注意※如果菜单【查看】→【站点地图选项】中的级联菜单项【显示标记为隐藏的文件】已经被选中，则设置隐藏文件时，文件就不会从站点地图中消失了。

（2）显示文件如果要显示隐藏的文件，可以单击菜单【查看】→【站点地图选项】→【显示标记为隐藏的文件】。

在站点地图可进行的操作较多，例如可以完成“链接到新文件”、“链接到已有文件”、“改变链接”、“移除链接”、“打开链接源”、“显示网页标题”等操作。

3．保存站点地图站点地图可以作为图形文件保存，操作很简单，单击菜单【文件】→【保存站点地图】，在弹出的“保存站点地图”对话框，输入文件名，单击【保存】按钮即可。

如图17-30所示即为所保存的站点地图。

图17-30所保存的站点地图1.9测试网站一个网站包含很多链接，可能会出现链接错误或断链现象，在发布站点前有必要检查整个站点的链接，以避免站点发布之后出现无效链接情形。

利用Dreamweaver 8提供的“检查链接”可以检查网站中存在断链、孤立文件等。

链接检查无误后，可以在浏览器中浏览各个网页，检查文字、图片、链接是否有误、是否会出现乱码，，网页元素定位是否准确，浏览速度和视觉效果是否满意。

经过测试、修改、再测试、再修改，反复多次循环，直到各方面都合格方可发布网站。

1.10发布网站发布网站就是把网页文件上传到Web服务器，发布网站之前先必须申请一个主页空间，拥有网页空间的访问域名、FTP用户名和密码。

如果主页空间已成功申请，可以先与远程Web 服务器进行连接，连接成功后，再通过单击“文件”面板上的【上传文件】按钮，往远程Web服务器中上传本地站点，上传成功后，就可以在浏览器中输入正确的网址访问网站了。

分工：艾燕萍负责首页index.html，子页gsjj.html，收集素材，报告书书写张娟负责子页shejifg.html，收集素材，报告书书写谢明吉负责子页jdal.html，收集素材，报告书书写子页zpzs.html由张娟和谢明吉合伙完成．素材是大家一起收集，然后筛选出好的，报告书是大家一起讨论着写的，总之，差不多每项每个人都有参与，只是专攻方向不同。

遇到的问题有：（1）首页HEAD图太大，无法调小，HEAD层无法正确插入FLASH，不知道要怎么样调整。

（2）用有些浏览器预览要错位，不能确定是浏览器的问题还是自己代码没有处理好，因为在有些机子上就有正常显示。

（3）鼠标经过图像出现过三张图片，不知道是什么原因，明明插入的是两张图片，不明白。

（4）素材找得不是很合心，特别是FLASH，处理的不好，（5）导航出现过错位，隐藏，但是，在我们的修改下，现在做好了一个完美的导航。

不过，还是有点宽。

因为导航都是以图片插入，无法调整其大小。

、＼解决问题方法：（1）网上大量收集素材，然后从中筛选出合适的图片满意的图片来做网页（2）不懂的大家讨论合伙解决问题，大家的力量是强大的．九组艾燕萍张娟谢明吉软件07-1精品文档，欢迎下载使用！。