动态网站设计制作与维护 教学课件 史桂红 项目1.pdfVIP

动态网站设计制作与维护 中国水利水电出版社 参考资料 1、参考书目  《Dreamweaver8完美网页设计— 白金案例篇》 中国电力出版社 何海霞编著  《Dreamweaver网页设计与制作100例》 人民邮电出版社 4U2V工作室编著 》 电子工业出版社 沈大林编著  《ASP动态网页设计与应用 2、参考网站 / / / 课程主要内容 主要内容 项目一 规划网站 项目二 环境的搭建与调试 项目三 主页的设计与制作 项目四 分支页的设计与制作 项目五 网站的测试、发布与维护 知识技能目标 1、欣赏优秀网页，学习他人之长； 2、分析优秀网页的布局结构、颜色搭配、视觉效果； 3、清楚网页的组成元素及网站的建设流程； 4、会规划网站，会书写网站建设方案； 工作任务列表 任务一：欣赏优秀网站 任务二 ：规划班级网站，书写网站建设方案 任务一：欣赏优秀网站 一、公司类网站欣赏 欣赏海尔集团的网站： 　　启动IE浏览器，输入网址： 任务一：欣赏优秀网站 海尔网站首页特色  该首页给人以清新、爽朗的感受，首页的整体布局为 “上、中、 下”三个版块，中间的主体内容又分为 “左、右”二个版块。 颜色上主要采用玫瑰红色为主，玫瑰红给人温馨、浪漫的感受， 并与网站的logo标志颜色达到和谐统一的效果。  首页题头的动化效果为Haier公司的产品广告,既达到了产品 宣传的目的，又达到了美化的效果。  导航栏的颜色鲜明，文字仍采用玫瑰红色，文字与背景色对 比强烈，引人注目。二级导航采用横式排列，占据了中间主体 部分。 任务一：欣赏优秀网站 二、旅游类网站欣赏 欣赏“虎丘旅游网”的网站： 　　启动IE浏览器，输入网址： 网站带有引导页： 任务一：欣赏优秀网站 虎丘引导页特色 将虎丘的名景点以动画的形式显示在页面的右方 苏轼的题词以动画的形式缓慢展示出来 蝴蝶的翩翩起舞与金鱼的自由自在的畅游结合在一起，给人一 种清闲之感 各种语言（简体中文、繁体中文、日本语、英语等）的引导 框显示在右下方 当欣赏完引导页的优美意境后，默认进入简体中文主页面。 任务一：欣赏优秀网站 虎丘主页 任务一：欣赏优秀网站 虎丘主页特色 各类边框体现了古典的特色 题头的图片和文字的动画效果展示了虎丘景点的级别及 多角度的美景展示 主页的整体布局为“上、中、下”三个版块，中间的主体 内容又分为“左、右”二个版块，布局清晰 任务一：欣赏优秀网站 三、体育类网站欣赏 欣赏“中国大众体育网”的网站： 　　启动IE浏览器，输入网址： 任务一：欣赏优秀网站 中国大众体育网主页特色 　　  背景、字体为红色，给人以阳光、活力向上的感觉。  在字体的运用上有大有小，有长有短，显得有对比， 庄重。  图片的动态效果突出主题，产生运动的视觉感受。  该网站的首页整体视觉感受清晰、和谐。  整体颜色采用红色，既统一又有变化，主体突出。 任务一：欣赏优秀网站 四、新闻类网站欣赏 欣赏“新浪网站新闻页” ： 　　启动IE浏览器，输入网址：/ 任务一：欣赏优秀网站 新浪网站新闻页特色 　各类新闻用标题栏加以划分，简洁明了、排列整齐， 使得较大的信息量显示有条有理。 　颜色的搭配上主要采用蓝色，左右两侧版块的字体大 小相同，字体颜色为蓝色，给人以清新、和谐的视觉美感。 该网页给人的视觉感受是和谐美观，在模块的划分上比 较明显，采用“左、中、右”三个版块，内容充实。 任务一课堂实践 1．浏览以下站点，对所浏览网站首页的特色和不足进行赏析说 明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、 图片效果、动画效果、音频效果等。 （1）狮子林