2-01：规划系部网站并熟悉网站开发环境.ppt

《2-01：规划系部网站并熟悉网站开发环境.ppt》由会员分享，可在线阅读，更多相关《2-01：规划系部网站并熟悉网站开发环境.ppt（52页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、学习情境一：网站初建任务二:规划系部网站并熟悉网站开发环境1知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评知识能力目标知识能力目标知识能力目标：知识能力目标：了解网站开发流程、网站规划的要求、网了解网站开发流程、网站规划的要求、网页设计的原则页设计的原则了解常用网页制作工具了解常用网页制作工具认识认识Adobe Dreamweaver CS4Adobe Dreamweaver CS4开发环境开发环境能够规划网站能够规划网站能够创建、管理、操作本地站点能够创建、管理、操作

2、本地站点能够制作简单网页并会保存、打开、预览能够制作简单网页并会保存、打开、预览网页网页2知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评项目效果展示项目效果展示项目效果图项目效果图3知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评任务描述任务描述任务描述任务描述1规划电子系网站规划电子系网站从网站的需求分析、主题和内容、整体风格、结构等方面对网站项

3、目进行整体规划，同时设计出网站Logo和主要网页的版式。2熟悉网站开发环境熟悉网站开发环境启动Adobe Dreamweaver CS4后熟悉工作界面上的菜单栏、文档工具栏、文档选项卡式面板栏、文档编辑区、状态栏、功能面板等。3本地站点创建、管理与操作本地站点创建、管理与操作创建名为“电子系网站”的站点，站点根文件夹为本地磁盘的myweb文件夹。先在myweb中创建若干子文件夹和文件，再对站点进行管理和操作。4制作站长简介网页制作站长简介网页根据自身具体情况制作站长简介网页。4知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实

4、施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评知识讲解知识讲解1.1 1.1 网站和网页概述网站和网页概述 1.1.基本基本术语术语WWW WWW（World Wide WebWorld Wide Web）建立在建立在InternetInternet上的全球性的图形信息系统，上的全球性的图形信息系统，是超文本文是超文本文档的集合档的集合。URL(URL(统一资源定位器统一资源定位器)是是WebWeb服务器的地址，也称网址。它是一种访问服务器的地址，也称网址。它是一种访问InternetInternet上上信息资源的方法。信息资源的方法。HTMLHTML（HyperTextHyperTe

5、xt Markup Language Markup Language）H HTMLTML是是一一种种用用于于编编写写网网页页的的主主要要标标记记语语言言，是是纯纯文文本本文文件件。但但存存在在的的缺缺点点，使使它它不不能能适适应应越越来来越越多多的的网网络络设设备备和和应应用用的的需需要要，于于是是W3CW3C又又制制定定了了XHTMLXHTML（Extensible Extensible HyperTextHyperText Markup LanguageMarkup Language）。）。XHTMLXHTML是一种增强的是一种增强的HTMLHTML。HTTPHTTP（Hypertext

6、Transfer ProtocolHypertext Transfer Protocol）HTTPHTTP是一种在网络上传输数据的协议，是用于从是一种在网络上传输数据的协议，是用于从WebWeb服务器服务器传输超文本到本地浏览器的传输协议。传输超文本到本地浏览器的传输协议。5知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评知识讲解知识讲解网站与网页网站与网页网网站站（站站点点）是是若若干干个个相相关关网网页页的的集集合合，各各个个网网页页通过超级链接相联系。通过超级链接相

7、联系。网网页页是是指指由由文文本本、图图像像、动动画画、音音频频、视视频频等等内内容容组组成成的的超超文文本本文文档档。其其中中，文文本本或或图图像像等等网网页页元元素素还可以指向其他文档，这种功能称为超级链接。还可以指向其他文档，这种功能称为超级链接。CSSCSS（Cascading Style SheetCascading Style Sheet）CSSCSS是一组格式设置规则，用于控制页面内容的外观，是一组格式设置规则，用于控制页面内容的外观，如特定字体和字大小、表格的边框、文本颜色和背如特定字体和字大小、表格的边框、文本颜色和背景颜色、链接颜色和链接下划线等，并可确保在多景颜色、链接颜

8、色和链接下划线等，并可确保在多个浏览器中以更一致的方式显示。个浏览器中以更一致的方式显示。6知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评知识讲解知识讲解2 2.网站建立方式网站建立方式使用自己的使用自己的WebWeb服务器。服务器。采用托管服务器。采用托管服务器。采用虚拟主机，即租用采用虚拟主机，即租用ISPISP硬盘空间，有独立的域名和共享或独立的硬盘空间，有独立的域名和共享或独立的IPIP地址，按空间大小和网络宽带资源收费。地址，按空间大小和网络宽带资源收费。3.

9、3.中小型网站开发的一般流程中小型网站开发的一般流程网站规划与网页设计阶段：网站规划与网页设计阶段：网站需求分析网站需求分析确定网站主题和内容确定网站主题和内容规划网站的整体风格规划网站的整体风格规划网站结构规划网站结构设计页面版式和效果设计页面版式和效果网页制作阶段：网页制作阶段：页面布局页面布局页面内容编排页面内容编排各个网页相链接各个网页相链接根据需要实现动态功能根据需要实现动态功能测试发布与管理维护阶段：测试发布与管理维护阶段：网站测试与完善网站测试与完善网站空间申请、发布、推广网站空间申请、发布、推广网站维护、更新网站维护、更新7知识能力目标知识能力目标项目效果展示项目效果展示知识讲

10、解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评知识讲解知识讲解1.21.2 开发工具概述开发工具概述 1 1.与网页设计与制作相关的常用工具与网页设计与制作相关的常用工具 常用的网页制作软件工具有：Frontpage（所见即所得）Dreamweaver系列Homesite（所见即所得）Hotdog HomePage（制作含多个分栏的页面)Golive（类似于Dreamweaver）常用的网页素材处理工具有:Photoshop、FireworksFlash、LiveMotion（类似于Flash）、ShockwaveFree

11、Hand（矢量绘图）、Illustrator（矢量绘图）CorelDraw（矢量绘图，创建印刷或Web广告或附属物，如工艺品、徽标、海报）GIF AnimatorCool3D（3D特效文字）Anfy(Java特效生成工具，如树状菜单、3D效果、图像处理特效，为共享软件)8知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评知识讲解知识讲解2 2Adobe Dreamweaver CS4Adobe Dreamweaver CS4简介简介 代表了网页设计领域最先进的设计理念与技术

12、是一款可视化的网页设计和网站管理工具，是网页设计人员、网页开发人员与视觉设计人员的理想工具。是建立Web站点和应用程序的专业工具。具体应用 大型综合网站企业内部经营管理系统交互式的网上教学网站企业网站、个人网站9知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范任务任务任务任务1-1 1-1 规划系部网站规划系部网站规划系部网站规划系部网站 1网站赏析 10知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技

13、能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评首页色彩运用大面积首页色彩运用大面积的蓝色渐变为底色，的蓝色渐变为底色，以蓝色和绿色为主进以蓝色和绿色为主进行搭配，和谐统一，行搭配，和谐统一，文字内容不多。文字内容不多。模块划分清晰。模块划分清晰。正文区采用了动画，正文区采用了动画，从静态中突出灵动感。从静态中突出灵动感。整体给人温馨、和谐整体给人温馨、和谐梦幻的感觉。梦幻的感觉。页头页头图片简单清晰，显示图片简单清晰，显示出清新、大气、和谐出清新、大气、和谐的简单之美。的简单之美。（1）班级网站班级网站11知识能力目标知识能力目标项目效果展示项目效果展示知识讲解

14、知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评以黄、绿色调为主，以黄、绿色调为主，采用了类似色的搭配，采用了类似色的搭配，给人以清新、和谐的给人以清新、和谐的视觉美感。视觉美感。正文区中间部分的各正文区中间部分的各个板块标题颜色和形个板块标题颜色和形式统一式统一,下面部分的下面部分的各个板块标题颜色不各个板块标题颜色不同。总体感觉是清晰，同。总体感觉是清晰，和谐统一中又有变化。和谐统一中又有变化。首页列出了导航菜单首页列出了导航菜单和网站地图，一目了和网站地图，一目了然。正文区采用了然。正文区采用了“左、中、右左、中、右”三

15、个板三个板块。块。导航菜单中各个小图导航菜单中各个小图片的选用别具一格。片的选用别具一格。（2 2 2 2）教育培训网站）教育培训网站）教育培训网站）教育培训网站新东方教育网站新东方教育网站（www.neworiental.orgwww.neworiental.org）12知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评首页清新、爽朗。首页清新、爽朗。颜色对比较为强烈，重颜色对比较为强烈，重点突出。采用灰色和玫点突出。采用灰色和玫瑰红为主，灰色清爽、瑰红为主，灰色清爽、雅

16、致，玫瑰红温馨、浪雅致，玫瑰红温馨、浪漫。漫。分分“上、中、下上、中、下”三个三个版块，中间分为版块，中间分为“左、左、中、右中、右”三个版块。三个版块。二级导航采用横式排列，二级导航采用横式排列，别具一格。别具一格。页头动画体现了海尔集页头动画体现了海尔集团的理念和品质，让人团的理念和品质，让人既想到家的感觉又能记既想到家的感觉又能记住该品牌。导航栏引人住该品牌。导航栏引人注目。注目。（3 3 3 3）公司网站）公司网站）公司网站）公司网站海尔集团（海尔集团（）13知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结

17、归纳总结课堂作业课堂作业演示与点评演示与点评首页给人的视觉效果是一首页给人的视觉效果是一种古朴的气息迎面扑来。种古朴的气息迎面扑来。整体色彩、图文搭配协调，整体色彩、图文搭配协调，咖啡色的运用和图片的搭咖啡色的运用和图片的搭配和谐。配和谐。板块划分清晰。板块划分清晰。页头凤凰古城图片恰到好页头凤凰古城图片恰到好处，突出了主题，也起了处，突出了主题，也起了广告作用。广告作用。导航栏的文字颇具特色。导航栏的文字颇具特色。（4 4 4 4）旅游网站）旅游网站）旅游网站）旅游网站凤凰古城旅游网凤凰古城旅游网（）14知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作

18、示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评引导页简洁、现代感较强。背引导页简洁、现代感较强。背景用大块的深绿色，给人安景用大块的深绿色，给人安静、稳重的感觉。静、稳重的感觉。在字体的运用上有大有小，有在字体的运用上有大有小，有长有短，显得有对比，文字长有短，显得有对比，文字居中对齐，显得庄重。居中对齐，显得庄重。图片的动态效果突出主题，产图片的动态效果突出主题，产生运动的视觉感受。生运动的视觉感受。首页整体视觉感受清晰、和谐。首页整体视觉感受清晰、和谐。整体颜色采用绿色，既统一又整体颜色采用绿色，既统一又有变化，主题突出。有变化，主题突出。（5 5 5

19、 5）体育类网站）体育类网站）体育类网站）体育类网站中国大众体育网中国大众体育网（）15知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范提问：网站规划包括哪些内容？提问：网站规划包括哪些内容？提问：网站规划包括哪些内容？提问：网站规划包括哪些内容？.网站规划步骤网站需求分析网站需求分析确定网站主题和内容确定网站主题和内容规划网站的整体风格规划网站的整体风格规划网站结构规划网站结构网站网站LogoLogo设计设计主要页面设计主要页面设计16知识能力目

20、标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范（1）网站需求分析）网站需求分析要弄清开发的网站有哪些类型的用户使用，各个用户又有要弄清开发的网站有哪些类型的用户使用，各个用户又有要弄清开发的网站有哪些类型的用户使用，各个用户又有要弄清开发的网站有哪些类型的用户使用，各个用户又有哪些不同的需求，网站的功能是什么等等，为网站设计提哪些不同的需求，网站的功能是什么等等，为网站设计提哪些不同的需求，网站的功能是什么等等，为网站设计提哪些不同的需求，网站的功能是什么

21、等等，为网站设计提供可靠的依据。供可靠的依据。供可靠的依据。供可靠的依据。电子系网站电子系网站电子系网站电子系网站是一个典型的系部网站，用来全面展示电子系是一个典型的系部网站，用来全面展示电子系是一个典型的系部网站，用来全面展示电子系是一个典型的系部网站，用来全面展示电子系的办学情况和提供的服务等，以便本校和兄弟院校的的办学情况和提供的服务等，以便本校和兄弟院校的的办学情况和提供的服务等，以便本校和兄弟院校的的办学情况和提供的服务等，以便本校和兄弟院校的老师老师老师老师和学生和学生和学生和学生、关心本系发展的、关心本系发展的、关心本系发展的、关心本系发展的高中学生和家长高中学生和家长高中学生和

22、家长高中学生和家长、寻求技术支持、寻求技术支持、寻求技术支持、寻求技术支持和服务的和服务的和服务的和服务的企业人员企业人员企业人员企业人员、寻求继续深造的、寻求继续深造的、寻求继续深造的、寻求继续深造的社会人员社会人员社会人员社会人员、教育管理、教育管理、教育管理、教育管理部门部门部门部门领导领导领导领导能及时了解到系部办学概况和系部荣誉、教学管能及时了解到系部办学概况和系部荣誉、教学管能及时了解到系部办学概况和系部荣誉、教学管能及时了解到系部办学概况和系部荣誉、教学管理、学生管理、招生就业、技术服务、继续教育等方面的理、学生管理、招生就业、技术服务、继续教育等方面的理、学生管理、招生就业、技

23、术服务、继续教育等方面的理、学生管理、招生就业、技术服务、继续教育等方面的信息。信息。信息。信息。17知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范（2）确定网站主题和内容确定网站主题和内容主题主题主题主题是网站所要表达的主要内容，是网站所要表达的主要内容，是网站所要表达的主要内容，是网站所要表达的主要内容，内容内容内容内容要为主题服务。要为主题服务。要为主题服务。要为主题服务。如旅游类网站如旅游类网站如旅游类网站如旅游类网站主题是主题是主题是主

24、题是旅游情况介绍，旅游情况介绍，旅游情况介绍，旅游情况介绍，内容是内容是内容是内容是旅游景点、旅游景点、旅游景点、旅游景点、旅游线路、旅游价格、旅行社、土特产品等介绍。公旅游线路、旅游价格、旅行社、土特产品等介绍。公旅游线路、旅游价格、旅行社、土特产品等介绍。公旅游线路、旅游价格、旅行社、土特产品等介绍。公司网站司网站司网站司网站主题主题主题主题是展示公司形象做好产品宣传，是展示公司形象做好产品宣传，是展示公司形象做好产品宣传，是展示公司形象做好产品宣传，内容内容内容内容介绍介绍介绍介绍公司的理念和特色、管理情况、产品情况、售后服务公司的理念和特色、管理情况、产品情况、售后服务公司的理念和特色

25、、管理情况、产品情况、售后服务公司的理念和特色、管理情况、产品情况、售后服务等内容。等内容。等内容。等内容。电子系网站的主题电子系网站的主题电子系网站的主题电子系网站的主题是介绍系部办学情况，所有内容都是介绍系部办学情况，所有内容都是介绍系部办学情况，所有内容都是介绍系部办学情况，所有内容都要围绕这一主题展开。要围绕这一主题展开。要围绕这一主题展开。要围绕这一主题展开。内容内容内容内容应该包括系部简介、系部应该包括系部简介、系部应该包括系部简介、系部应该包括系部简介、系部机构设置、师资力量、办学特色、实训基地及实践教机构设置、师资力量、办学特色、实训基地及实践教机构设置、师资力量、办学特色、实

26、训基地及实践教机构设置、师资力量、办学特色、实训基地及实践教学情况、教学管理与教学研究、学生培养、学生活动、学情况、教学管理与教学研究、学生培养、学生活动、学情况、教学管理与教学研究、学生培养、学生活动、学情况、教学管理与教学研究、学生培养、学生活动、招生专业及招生情况、就业情况、毕业生情况、学生招生专业及招生情况、就业情况、毕业生情况、学生招生专业及招生情况、就业情况、毕业生情况、学生招生专业及招生情况、就业情况、毕业生情况、学生成果及荣誉、继续教育相关情况、提供的技术支持与成果及荣誉、继续教育相关情况、提供的技术支持与成果及荣誉、继续教育相关情况、提供的技术支持与成果及荣誉、继续教育相关情

27、况、提供的技术支持与服务等。服务等。服务等。服务等。18知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范（3）规划网站的整体风格）规划网站的整体风格网站的整体给浏览者的综合感受，通过各个页面体现网站的整体给浏览者的综合感受，通过各个页面体现网站的整体给浏览者的综合感受，通过各个页面体现网站的整体给浏览者的综合感受，通过各个页面体现（页面的版式结构页面的版式结构页面的版式结构页面的版式结构、色彩搭配色彩搭配色彩搭配色彩搭配、图像动画的使用图像动画的使

28、用图像动画的使用图像动画的使用等）等）等）等）。最主要的是主页最主要的是主页最主要的是主页最主要的是主页 。电子系网站电子系网站电子系网站电子系网站属于教育类网站，既要体现出严谨、科学，属于教育类网站，既要体现出严谨、科学，属于教育类网站，既要体现出严谨、科学，属于教育类网站，既要体现出严谨、科学，又要体现出科技（电子、计算机技术发展、更新快）、又要体现出科技（电子、计算机技术发展、更新快）、又要体现出科技（电子、计算机技术发展、更新快）、又要体现出科技（电子、计算机技术发展、更新快）、热情温暖、希望。热情温暖、希望。热情温暖、希望。热情温暖、希望。版面设计版面设计版面设计版面设计上主页用杂合

29、型布局，总体比较对称，显得上主页用杂合型布局，总体比较对称，显得上主页用杂合型布局，总体比较对称，显得上主页用杂合型布局，总体比较对称，显得严谨、格调高雅，而次页左列为二级导航栏，右列为严谨、格调高雅，而次页左列为二级导航栏，右列为严谨、格调高雅，而次页左列为二级导航栏，右列为严谨、格调高雅，而次页左列为二级导航栏，右列为具体的链接内容，这样能给人留下信息丰富的印象。具体的链接内容，这样能给人留下信息丰富的印象。具体的链接内容，这样能给人留下信息丰富的印象。具体的链接内容，这样能给人留下信息丰富的印象。色彩色彩色彩色彩上选用蓝色为主色调，红、黑、黄为搭配色，体上选用蓝色为主色调，红、黑、黄为搭

30、配色，体上选用蓝色为主色调，红、黑、黄为搭配色，体上选用蓝色为主色调，红、黑、黄为搭配色，体现出电子及计算机行业和相应专业的飞速发展，体现现出电子及计算机行业和相应专业的飞速发展，体现现出电子及计算机行业和相应专业的飞速发展，体现现出电子及计算机行业和相应专业的飞速发展，体现出电子系是热情温暖、充满活力和希望的大家庭。各出电子系是热情温暖、充满活力和希望的大家庭。各出电子系是热情温暖、充满活力和希望的大家庭。各出电子系是热情温暖、充满活力和希望的大家庭。各个页面上选择能突出电子系师生精神风貌的个页面上选择能突出电子系师生精神风貌的个页面上选择能突出电子系师生精神风貌的个页面上选择能突出电子系师

31、生精神风貌的系列图片系列图片系列图片系列图片或动画或动画或动画或动画。19知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范说明说明页面布局类型（版式类型）：上下型、左右型、杂合型、封页面布局类型（版式类型）：上下型、左右型、杂合型、封面型、面型、FlashFlash动画型等。动画型等。网页色彩设计知识：网页色彩设计知识：计算机屏幕的色彩是由红、绿、蓝三种原色组成。计算机屏幕的色彩是由红、绿、蓝三种原色组成。色彩三要素：色彩三要素：色相：是色彩的相貌

32、，即区分各类色彩的名称，如色相：是色彩的相貌，即区分各类色彩的名称，如红色、绿色、橙色等。色相由波长决定，如蓝色、红色、绿色、橙色等。色相由波长决定，如蓝色、天蓝、靛蓝是同一色相。天蓝、靛蓝是同一色相。饱和度：又叫纯度，是指色彩的纯净程度，即色相饱和度：又叫纯度，是指色彩的纯净程度，即色相感觉鲜艳或灰暗的程度。感觉鲜艳或灰暗的程度。明度：是指色彩的明暗程度，体现颜色的深浅。明度：是指色彩的明暗程度，体现颜色的深浅。黑色、白色和灰色只有明度特征，没有色相和饱和度的区黑色、白色和灰色只有明度特征，没有色相和饱和度的区别。别。20知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描

33、述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范说明说明颜色的计算机表示：以颜色的计算机表示：以#开头的开头的6 6位或位或3 3位十六进位十六进制数，或使用预设的颜色名称（如制数，或使用预设的颜色名称（如blackblack、redred、blueblue、graygray、greengreen、yellowyellow、whitewhite、purplepurple、silver silver、oliveolive等）。等）。颜色与心里感觉：当看到不同的颜色时，会产颜色与心里感觉：当看到不同的颜色时，会产生不同的

34、心里感觉生不同的心里感觉:21知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范22知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范说明说明页面色彩的搭配技巧页面色彩的搭配技巧色彩要鲜明、独特色彩要鲜明、独特 注意色彩联想注意色彩联想 色彩要搭配合理色彩要搭配合理 讲究艺术性讲究艺术性 合理使用邻近色合理

35、使用邻近色 合理使用对比色合理使用对比色 巧妙使用背景色巧妙使用背景色 严格控制色彩的数量严格控制色彩的数量 页面中图像和动画使用：页面中图像和动画使用：要有良好的视觉吸引力。要有良好的视觉吸引力。要简洁明确地传达网站要简洁明确地传达网站信息。信息。要有强而有力的诱导作要有强而有力的诱导作用，造成鲜明的视觉用，造成鲜明的视觉感受效果，从观看过感受效果，从观看过程中产生愿望和欲求。程中产生愿望和欲求。23知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示

36、范（4 4）规划网站结构）规划网站结构包括：包括：包括：包括：栏目结构栏目结构栏目结构栏目结构（即各关键网页之间的关系，尤其是主（即各关键网页之间的关系，尤其是主（即各关键网页之间的关系，尤其是主（即各关键网页之间的关系，尤其是主页与次页）、页与次页）、页与次页）、页与次页）、链接结构链接结构链接结构链接结构（即导航机制）、（即导航机制）、（即导航机制）、（即导航机制）、目录结构目录结构目录结构目录结构（即（即（即（即各个网页文件的存放位置）各个网页文件的存放位置）各个网页文件的存放位置）各个网页文件的存放位置）电子系网站电子系网站电子系网站电子系网站可分为主页、系部概况、教学管理、继续教可分

37、为主页、系部概况、教学管理、继续教可分为主页、系部概况、教学管理、继续教可分为主页、系部概况、教学管理、继续教育、支部工作、技术服务、精品课程、网上留言育、支部工作、技术服务、精品课程、网上留言育、支部工作、技术服务、精品课程、网上留言育、支部工作、技术服务、精品课程、网上留言8 8 8 8大栏目大栏目大栏目大栏目，其中，系部概况包括本系简介、机构设置、现任领导、其中，系部概况包括本系简介、机构设置、现任领导、其中，系部概况包括本系简介、机构设置、现任领导、其中，系部概况包括本系简介、机构设置、现任领导、骨干教师骨干教师骨干教师骨干教师4 4 4 4个二级栏目，教学管理包括个二级栏目，教学管理

38、包括个二级栏目，教学管理包括个二级栏目，教学管理包括6 6 6 6个二级栏目，继个二级栏目，继个二级栏目，继个二级栏目，继续教育包括续教育包括续教育包括续教育包括6 6 6 6个二级栏目，支部工作包括个二级栏目，支部工作包括个二级栏目，支部工作包括个二级栏目，支部工作包括4 4 4 4个二级栏目和个二级栏目和个二级栏目和个二级栏目和部分三级栏目，技术服务包括部分三级栏目，技术服务包括部分三级栏目，技术服务包括部分三级栏目，技术服务包括4 4 4 4个二级栏目，精品课程和个二级栏目，精品课程和个二级栏目，精品课程和个二级栏目，精品课程和网上留言不含任何二级栏目或根据需要设置。网上留言不含任何二级

39、栏目或根据需要设置。网上留言不含任何二级栏目或根据需要设置。网上留言不含任何二级栏目或根据需要设置。在主页上采用在主页上采用在主页上采用在主页上采用下拉菜单导航下拉菜单导航下拉菜单导航下拉菜单导航便于组织众多的栏目，次页便于组织众多的栏目，次页便于组织众多的栏目，次页便于组织众多的栏目，次页上一级栏目采用横排导航，二级栏目采用竖排导航，显上一级栏目采用横排导航，二级栏目采用竖排导航，显上一级栏目采用横排导航，二级栏目采用竖排导航，显上一级栏目采用横排导航，二级栏目采用竖排导航，显得整体感较强。得整体感较强。得整体感较强。得整体感较强。在站点根文件夹中在站点根文件夹中在站点根文件夹中在站点根文件

40、夹中创建与各个栏目对应的子文件夹创建与各个栏目对应的子文件夹创建与各个栏目对应的子文件夹创建与各个栏目对应的子文件夹和用和用和用和用来存放图像、动画、样式、脚本等公共文件的一些公共来存放图像、动画、样式、脚本等公共文件的一些公共来存放图像、动画、样式、脚本等公共文件的一些公共来存放图像、动画、样式、脚本等公共文件的一些公共文件夹。文件夹。文件夹。文件夹。24知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范说明说明栏目结构的规划：将网站中所要涉及的信

41、息进行细栏目结构的规划：将网站中所要涉及的信息进行细分和合理组织，可分为三种子类型：分和合理组织，可分为三种子类型：层次结构层次结构线性结构线性结构网状结构网状结构链接结构的规划：链接结构的规划：导航样式：横排导航、竖排导航、多排导航、导航样式：横排导航、竖排导航、多排导航、图片式导航、下拉菜单导航等。图片式导航、下拉菜单导航等。导航的表现形式：菜单、站内搜索引擎、当前导航的表现形式：菜单、站内搜索引擎、当前浏览位置等。浏览位置等。25知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点

42、评演示与点评技能操作示范技能操作示范说明说明目录结构的规划：目录结构的规划：各个栏目对应的网页分别存放到建立的对应的子各个栏目对应的网页分别存放到建立的对应的子文件夹中。文件夹中。主页使用的或公共的图像、动画、脚本、主页使用的或公共的图像、动画、脚本、CSSCSS样样式、下载的内容、数据库也分别存放到对应的子式、下载的内容、数据库也分别存放到对应的子文件夹中。文件夹中。需要经常更新的内容可单独存放到一个子文件夹需要经常更新的内容可单独存放到一个子文件夹中。中。在各个栏目对应的子文件夹中还可再创建一些子在各个栏目对应的子文件夹中还可再创建一些子文件夹，以便存放其独有的图像、动画、脚本、文件夹，以

43、便存放其独有的图像、动画、脚本、更深层次的网页等文件，但目录的层次不宜过深，更深层次的网页等文件，但目录的层次不宜过深，最好不要超过最好不要超过4 4层。层。26知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范说明说明文件夹、文件命名：文件夹、文件命名：文件夹、文件命名：采用英文单词、汉语拼音或缩文件夹、文件命名：采用英文单词、汉语拼音或缩写，并尽量用小写，命名时可以包括数字和下划线写，并尽量用小写，命名时可以包括数字和下划线（不能以数字开头）。（

44、不能以数字开头）。主页命名：主页命名：index.htmlindex.html、index.aspindex.asp、index.jspindex.jsp等。等。多个单词或汉语拼音的连接：多个单词或汉语拼音的连接：骆驼命名法：首字母小写，随后的每个单词或汉骆驼命名法：首字母小写，随后的每个单词或汉语拼音的第一个字母大写，如语拼音的第一个字母大写，如subTitlesubTitle、jiXuJiaoYujiXuJiaoYu。PascalPascal命名法：与骆驼命名法类似，但首字母大命名法：与骆驼命名法类似，但首字母大写如写如JiXuJiaoYuJiXuJiaoYu。下划线命名法：在命名中加入下

45、划线，如下划线命名法：在命名中加入下划线，如news_listnews_list。连字符命名法：使用连字符连接，如连字符命名法：使用连字符连接，如sidebar-sidebar-menumenu。27知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范（5 5）网站网站LogoLogo设计设计设计创意来自网站的名称和内容：设计创意来自网站的名称和内容：网站有代表性的人物、动物、植物、物品网站有代表性的人物、动物、植物、物品等，可以用它们作为标志，必要时

46、可以以等，可以用它们作为标志，必要时可以以其作为设计蓝本加以卡通化和艺术化。如其作为设计蓝本加以卡通化和艺术化。如皮皮网的调皮的小狗标志、中国银行的铜皮皮网的调皮的小狗标志、中国银行的铜板标志等。板标志等。用自己网站的中文、英文名称或相关的典用自己网站的中文、英文名称或相关的典型字母，采用不同的字体、字母的变形制型字母，采用不同的字体、字母的变形制作标志。如海尔、中国联通等公司网站的作标志。如海尔、中国联通等公司网站的LogoLogo。28知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示

47、与点评演示与点评技能操作示范技能操作示范电子系网站电子系网站的的LogoLogo设计可以有多种，教学网站中使用设计可以有多种，教学网站中使用了第二种设计方法，用了第二种设计方法，用C C和和E E分别代表系部由两大专业分别代表系部由两大专业类组成，即电子（类组成，即电子（ElectronicsElectronics）和计算机）和计算机（ComputerComputer），），A A寓意飞速发展，圆环表示系部是一个寓意飞速发展，圆环表示系部是一个和谐的大家庭。和谐的大家庭。29知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施

48、归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范。（6 6）主要页面设计）主要页面设计网页设计的基本原则网页设计的基本原则：用户至上原则用户至上原则易用性原则易用性原则实用性原则实用性原则 30知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范31知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操

49、作示范技能操作示范说明说明网页版面尺寸规范网页版面尺寸规范:网页的的总宽度（含边距、边框宽度、补白、内网页的的总宽度（含边距、边框宽度、补白、内容宽度）：容宽度）：800800600600分辨率时不超过分辨率时不超过770px770px，10241024768768分辨率时不宜超过分辨率时不宜超过1000px1000px。网页的长度：不宜超过网页的长度：不宜超过3 3屏屏(最佳长度最佳长度1.81.82.52.5屏屏 )。网页文件大小：主页不宜超过网页文件大小：主页不宜超过60KB60KB，二级页面文，二级页面文件不宜超过件不宜超过90KB90KB。广告尺寸：应为标准尺寸，全尺寸广告尺寸：应为

50、标准尺寸，全尺寸bannerbanner不宜超不宜超过过30KB30KB。网页元素设计网页元素设计:页头：定义页面主题，常放置页面标题、公司标页头：定义页面主题，常放置页面标题、公司标志以及旗帜广告。志以及旗帜广告。页脚：与页头相呼应，放置副标题、公司信息、页脚：与页头相呼应，放置副标题、公司信息、制作者版权信息、浏览器分辨率要求等。制作者版权信息、浏览器分辨率要求等。32知识能力目标知识能力目标项目效果展示项目效果展示知识讲解知识讲解任务描述任务描述技能操作示范技能操作示范任务实施任务实施归纳总结归纳总结课堂作业课堂作业演示与点评演示与点评技能操作示范技能操作示范说明说明页面内容编排页面内容