《网页设计与制作实训》指导书
--以“五岳独尊泰山”为例
、规划网站
1 .策划网站主题
在着手设计网站之前，要确定好网站的主题，每个网站都应该具有 一个明确的主题。本次所创建的网站是一个名山宣传类网站，主要以五 岳独尊泰山为主题，包括泰山简介、泰山文化、泰山名吃、泰山地质、 环境和神话传说等内容。
2. 确定网站风格
确定好站点主题后，就要根据该主题选择站点的风格。由于本次所 创建的网站是一个名山宣传类网站，要求结构清晰，能够展现出泰山的 魅力所在。本网站的主要特点如下：
(1) 设计风格要大众化，为了提高浏览速度，精选图片，同时尽 量减少
图片的使用，更多地使用层、表格实现效果。
(2) 背景颜色以灰色和白色为主，文字颜色以黑色为主、蓝色和 红色为
辅。
(3) 文字内容丰富、知识性强，标题简洁明了，字体一般采用宋 体，大小一般为14像素
(4)
版式结构采用典型的“三”字型结构，首页如图 示。
MOUNT TA.I QMMH
首页的1-1所
昔秦山保平安
应比Ml
「直岳紳-?山丽呻卜五底中?不上芍卄4-airy,^Jl中露― 二首W礼品酗丸曲宕划?常匹中凶祿吐孔曲轉祜■理 ?山鼻中?史渤 .山旺即q驴1叭山-赵就■甘黔.*!\>C.￥.IUF帼甲■
為?.PW7丹山：■■电宦曲不申HF』i?崔：M侶刘rw「寥冃叭■虫■亦浒事甲凰Sli博+
SarftE 血皿.垣厉理，圭曲2上?札 —山\?山.把田乱 ■估吕+常貞j 一邸山牛审甲百H矯爾EEWR.啊!耳芒P呻育■号山￡yd■“粘
中曲杆丘史.HMT中
F#?TT<
?山W酬蚯直l.汩\
W ?甄呼屋.?量?斛士鼻- E*a- ■科畫atm/丈曲ifia. ■山?L買 图1-1 首页设计浏览效果 二级页面采用与首页统一的风格设计。 该网站名称为“五岳独尊泰山”，所有网页的标题为“五岳独尊 一 泰山”，个人根据所定主题确定。英文名称为“ MountTai ”。 3. 构思网站栏目结构 先在纸上绘制网站的栏目结构草图，经过反复推敲，最后确定完整 的栏目和内容的层次结构。“五岳独尊泰山”的栏目结构如表 1-1所示。 表i-i “五岳独尊泰山”的栏目结构 五岳独尊泰山 首页 泰山简介 泰山文化 泰山名吃 泰山自然 为了简化对网站的浏览过程，大部分网页通过栏目就能浏览内容页 面，首页的主菜单包括9个菜单项：泰山简介、泰山文化、泰山名吃、 泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。 4. 规划网站目录结构和链接结构 根据网站策划确定的栏目结构，创建站点目录，一个网站的目录结 构要求层次清晰、井然有序，首页、栏目页、内容页区分明确，有利于 日后的修改。“五岳独尊泰山”的目录结构，各文件夹的所存放文件类 型如表1-2所示。 ※注意※ 文件夹和文件的名称建议不要使用中文名，因为中文名在 档中容易生成乱码，导致链接产生错误。 表1-2 文件夹名称 css flash image js HTML文 网站的目录结构及其存放的文件类型 存放的文件类型 csS羊式文件。 动画文件、视频文件。 图像文件、照片。 外部脚本文件。 Templates Library music 模板文件 库文件。 音乐、音频文件。 in dex.html 主页 网站的链接结构与目录结构不同， 网站的目录结构指站点的文件存 放结构，一般只有设计人员可以直接看到，而网站的链接结构指网站通 过页面之间的联系表现的结构，浏览者浏览网站能够观察到这种结构。 1-2所示 本网站的链接结构采用“网状”链接结构，结构图如图 寸机Hi;?勺住中 件耳中'勺 im国忸 i nH冲\htnI 騰人科内.rrnM i --- 十：；…' 莒立恫两将靱IDI r 5中角文卓U I 图1-2 5. 主要页面布局设计 使用CSS+DIV寸首页的布局结构草图进行设计如图 不要求用模板）。 n 、■■嘗 44MJT ■床嶽?MKB If*■山 网站中其它页面的设计可参考首页设计进行，所以可以将该首页制作成 模板（但 “五岳独尊泰山”中的链接结构 1-3所示。整个 Frrmpt 刖i&却悒 S.^BV -*4 ?砂4r 图1-3 主页的布局结构草图 二、准备素材 根据网站的栏目、内容设计，链接结构设计，首页的布局结构，准 备所需素材 1 ?准备文本 准备大量网页中所需的文字资料，可以从各类网站、各种书籍中搜 集文字资料，然后制作成 word文档或文本文件，注意各种文字资料的 文件名命名要科学合理，避免日后找不到所需的文本内容。 2. 准备Logo 利用Fireworks 或Photoshop量身定做本网站的 Logo标志，Logo 标志要与本网站的主题相符，要有新意。 3. 准备图片及按钮 根据需要到网上或素材光盘中搜集所需的图片和按钮、有些图片、 按钮需要自己利用图像处理软件制作。注意图片文件要尽可能小。 4. 准备动画 网站中的动画最好能突出主题，起到画龙点睛之功效。动画一般利 用flash软件制作，本网站主页和导航页的标题动画就是利用 件量身定做。 flash软 5. 建立库项目 网页中经常用到的项目，例如版权区， 三、创建网站 1. 创建本地站点 在开始着手设计网页之前，首先要定义站点。因为网页只是网站的 一个组成部分，所有设计的网页和相关文件都要放置于站点之中。定义 站点的好处是：定义站点以后的所有操作都是在站点统一监控之下进 行。如果使用了外部文件，Dreamweaver就会自动检测并予以提示和询 问是否将外部文件复制到站点内，以保持站点的完整性。如果某个文件 夹或文件重新命名了，系统会自动更新所有的链接，以保证原有的链接 关系的正确性。 创建站点之前，要求先建立一个文件夹，以便创建站点时为站点指 定存储位置。在 Windows操作系统中，打开“资源管理器”，在E盘创 建一个名为“五岳独尊泰山”的文件夹。 创建站点已详细介绍，在此只作简要说明。 定义站点的操作步骤如下： (1)在Dreamweaver CS6主窗口中，单击菜单【站点】?【新建 站点】， 将弹出如图1-6所示站点定义对话框。在该对话框中先输入站 点的名称，选择本地站点文件夹，如图 1-6所示。接着单击【下一步】 按钮，进入到下一步操作。 但不可使用 DrHdiiiVTHd'/ei站点是阴站中更闫&T所育交件和贺凜笊集今-Dradiriwecivei 站点運常邑全两个韶分：可在苴中存储和 处理文件的廿茸机上的本地交件 夹，以及可在其中将相同文件发布到Web上的服务審上的远程文：牛夷匚 站点设置对软五岳耗尊蠡山 峦町以狂此处节Dr謨画e册獣站点速拝车却文件夹和:S稱. 站点名称：五岳独尊黍山 本地站点丈件夹；|尸；适岳掘尊赢I?