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

《网页设计与制作》综合实训指导书 网站开发的参考案例 1.1　规划网站 1．策划网站主题 ???我们网站是德阳嘉兴别墅设计公司．公司遵循“奉献精湛技艺、铸造温馨家园、炼就英雄团队、创建百年老店”的发展理念，坚持“客户至上、重信守约、质优价平、热忱服务”的经营宗旨，追求“简约明快、美观时尚、突出个性、实用环保”的装饰风格，以新颖时尚的设计、规范精致的施工和热情人性的服务，为业主构筑温馨、舒适、精美、典雅的家园。 2．确定网站风格 确定好站点主题后，根据该主题选择站点的风格。所以本案例所建立的网站是别墅设计类网站。本网站的主要特点如下： （1）设计风格要大众化，为了提高浏览速度，尽量减少图片的使用，更多地使用表格或层实现效果。 （2）背景颜色以淡绿色为主、白色为辅，文字颜色以绿色为主、黑色和淡绿色为辅。 （3）文字内容丰富、知识性强，标题简洁明了，字体一般采用宋体，大小一般为12像素。 3．构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整的栏目和内容的层次结构。本案例的“别墅设计网”的栏目结构如表17-1所示。 表17-1　　“别墅设计网”的栏目结构 一级栏目 二级栏目 三级栏目及内容页面 首页 index.html 设计风格：sjfg.html wyjch_xx_xx.html 经典案例：jdal.html wyjq_xx_xx.html 作品展示：zpzs.html wytx_xx_xx.html 公司简介：gsjj.html wysc_xx_xx.html 为了简化对网站的浏览过程，大部分网页通过二级栏目就能浏览内容页面，首页的主菜单包括4个菜单项：设计风格，经典案例，作品展示，公司简介。 4．规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于日后的修改。“别墅设计网”的目录结构，各文件夹的所存放文件类型如表17-3所示。 表17-3　　网站的目录结构及其存放的文件类型 文件夹名称 存放的文件类型 css CSS样式文件。 flash 动画文件、视频文件。 image 图像文件、照片。 text 文字素材。 webpage_1 一级页面文件，该文件夹又有多个子文件夹，例如webpage_1_01。 webpage_2 二级页面文件，该文件夹又有多个子文件夹，例如webpage_2_01。 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就会自动检测并予以提示和询问是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件夹或文件重新命名了，系统会自动更新所有的链