动态网站设计制作与维护电子教案史桂红 项目1.pptVIP

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