网页设计与制作实训指导书.doc

《网页设计与制作实训》指导书--以“五岳独尊泰山”为例一、,要确定好网站的主题,每个网站都应该具有一个明确的主题。本次所创建的网站是一个名山宣传类网站,主要以五岳独尊泰山为主题,包括泰山简介、泰山文化、泰山名吃、泰山地质、环境和神话传说等内容。,就要根据该主题选择站点的风格。由于本次所创建的网站是一个名山宣传类网站,要求结构清晰,能够展现出泰山的魅力所在。本网站的主要特点如下:(1)设计风格要大众化,为了提高浏览速度,精选图片,同时尽量减少图片的使用,更多地使用层、表格实现效果。(2)背景颜色以灰色和白色为主,文字颜色以黑色为主、蓝色和红色为辅。(3)文字内容丰富、知识性强,标题简洁明了,字体一般采用宋体,大小一般为14像素。(4)首页的版式结构采用典型的“三”字型结构,首页如图1-1所示。图1-1首页设计浏览效果二级页面采用与首页统一的风格设计。该网站名称为“五岳独尊泰山”,所有网页的标题为“五岳独尊—泰山”,个人根据所定主题确定。英文名称为“MountTai”。,经过反复推敲,最后确定完整的栏目和内容的层次结构。“五岳独尊泰山”的栏目结构如表1-1所示。表1-1 “五岳独尊泰山”的栏目结构五岳独尊泰山首页泰山简介泰山文化泰山名吃泰山自然………为了简化对网站的浏览过程,大部分网页通过栏目就能浏览内容页面,首页的主菜单包括9个菜单项:泰山简介、泰山文化、泰山名吃、泰山自然、泰山地质、神话传说、泰山景点、泰山美图、寄语泰山。,创建站点目录,一个网站的目录结构要求层次清晰、井然有序,首页、栏目页、内容页区分明确,有利于日后的修改。“五岳独尊泰山”的目录结构,各文件夹的所存放文件类型如表1-2所示。※注意※文件夹和文件的名称建议不要使用中文名,因为中文名在HTML文档中容易生成乱码,导致链接产生错误。表1-2 网站的目录结构及其存放的文件类型文件夹名称存放的文件类型cssCSS样式文件。flash动画文件、视频文件。image图像文件、照片。js外部脚本文件。Templates模板文件Library库文件。music音乐、音频文件。,网站的目录结构指站点的文件存放结构,一般只有设计人员可以直接看到,而网站的链接结构指网站通过页面之间的联系表现的结构,浏览者浏览网站能够观察到这种结构。本网站的链接结构采用“网状”链接结构,结构图如图1-2所示。图1-2 “五岳独尊泰山”+DIV对首页的布局结构草图进行设计如图1-3所示。整个网站中其它页面的设计可参考首页设计进行,所以可以将该首页制作成模板(但不要求用模板)。图1-3 主页的布局结构草图二、准备素材根据网站的栏目、内容设计,链接结构设计,首页的布局结构,,可以从各类网站、各种书籍中搜集文字资料,然后制作成word文档或文本文件,注意各种文字资料的文件名命名要科学合理,避免日后找不到所需的文本内容。,Logo标志要与本网站的主题相符,要有新意。、有些图片、按钮需要自己利用图像处理软件制作。注意图片文件要尽可能小。,起到画龙点睛之功效。动画一般利用flash软件制作,本网站主页和导航页的标题动画就是利用flash软件量身定做。,例如版权区,但不可使用。三、,首先要定义站点。因为网页只是网站的一个组成部分,所有设计的网页和相关文件都要放置于站点之中。定义站点的好处是:定义站点以后的所有操作都是在站点统一监控之下进行。如果使用了外部文件,Dreamweaver就会自动检测并予以提示和询问是否将外部文件复制到站点内,以保持站点的完整性。如果某个文件夹或文件重新命名了,系统会自动更新所有的链接,以保证原有的链接关系的正确性。创建站点之前,要求先建立一个文件夹,以便创建站点时为站点指定存储位置。在Windows操作系统中,打开“资源管理器”,在E盘创建一个名为“五岳独尊泰山”的文件夹。创建站点已详细介绍,在此只作简要说明。定义站点的操作步骤如下:在DreamweaverCS6主窗口中,单击菜单【站点】→【新建站点】,将弹出如图1-6所示站点定义对话框。在该对话框中先输入站点的名称,选择本地站点文件夹,如图1-6所示。