课件类：专题网站的设计与制作规划设计

1、专题网站的设计与制作,规划设计 讲师：吴声乐,专题网站的开发流程,规划设计 素材准备 制作测试 发布维护,任务介绍,请各位老师调查某一学科或多个学科的教学需求，规划设计一个专题学习网站。,专题网站设计的四个基本要素,目标 内容 技术 外观,技术,外观,目标,内容,外观第一,设计的第一步,1/5 明确目标和专题,目标设计基本要求：明确而具体,1/5 明确目标和专题,专题选取原则： 专题不等同于单个知识点，也不等同于课程，它是由一系列具有相关知识特征的知识点提炼而成，体现知识的有机融合。这些知识点可以取自一门学科也可以覆盖多门学科。专题选取的切入点要小而精，便于“小题大做”，对专题做深入透彻的研究

2、，避免专题过大，蜻蜓点水式的空泛而谈，同时专题的选取要体现科学性和艺术性、新颖性和独特性的有机统一。,2/5 用户分析,通过问卷调查、现场访谈、非正式交流或对有关用户的一般思考，建立关键、综合但实用的用户特征描述，其中特征应该考虑用户共性，但同时应该考虑差异性。,2/5 用户分析,访问我的网站的学生有多大？技术熟练程度如何？多大年纪？ 在访问网站时，会干些什么？想实现什么目标？ 他们会在网站上呆多长时间？是否有可能再返回站点？,3/5 内容分析内容选择,确定栏目，分析网站上需要提供的文本、图像、声音、动画、视频等媒体的内容、形式等。,3/5 内容分析内容选择,内容组织原则： 紧紧围绕专题展开，

3、详细具体，具有针对性；它不是文字教材的简单搬家，而是将相关的知识点非线性地有机组织融合在一起，形成科学的逻辑体系，设立与专题相关的多个知识点，符合学生的认知结构。,3/5 内容分析整体结构设计,站点结构图：关键点是对用户容易导航,4/5 技术设计,提供站点应该使用的技术的综述，如HTML、ASP、VBScript、JavaScript、CGI、Java等。,用户需要的功能有哪些？ 你现在具备的开发能力是什么？,5/5 外观设计,确定用户界面设计的轮廓 基本方法： 先确定主页，再到子页； 先考虑块，再考虑块内各种媒体的形式、位置和关系。 需要注意的问题： 响应时间，尽量避免较大的图片和视频； 不

4、要偏离主流站点确定的通用界面规则； 进行与用户设备无关的设计。,微软每一个网页都是制作的样板。从网页我们就可以看出微软公司的风格、作风，以及雄厚的实力。,专题网站规划设计的流程图,明确目标,内容分析,用户分析,技术设计,外观设计,为了让大家理解该如何设计专题网站，本课程将随课程同步建立一个“信息学竞赛专题学习网站”，下面进行分析。,奥赛网站的目的以及定位,目标：通过该专题学习网站，访问者可以获得竞赛相关信息，以及获得竞赛的学习内容，培养和造就更多高素质的信息技术人才； 主题：信息学竞赛； 名称：信息学竞赛专题学习网站； 注意：要求陈述简单明了，可以实现。,用户分析,用户特征：对信息学竞赛有兴趣

5、的中学学生，层次包括入门者、有一定基础者以及提高者，所以提供的内容应该是阶梯式，并且紧紧围绕信息学竞赛专题； 访问站点理由：从内容的角度来说这是获取有关信息学竞赛的信息，以及可以学习和交流的网站。网站内容组织全面，形式新颖，页面美观。,内容分析,各位老师在准备自己的规划设计时，一定要把它作为重点来处理，精心挑选、精心准备； 内容选择：语言基础（包括Pascal和C两种语言），基本算法，数据结构，典型题目等； 素材准备，包括文本、图片、动画、视频、音频等。,整体结构设计站点结构图,Pascal语言基础,C语言基础,常用算法,论坛,学习日志,精彩文章,算法策略,语言概述,预备知识,顺序结构,选择结

6、构,循环结构,数据类型,函数与过程,集合与指针,数据结构,栈,队列,串,树,二叉树,图,枚举,归纳,递归,贪心,模拟,分治,动规,排序,选择,查找,串匹配,深搜和广搜,图论算法,数学建模,计算几何学,主页,语言入门,宏与常量,字符串,函数,键盘操作,数学,文件目录磁盘,数组指针结构,技术需求,静态网页的制作：Frontpage； 动态网页的制作：基于asp的交互网页；,整体风格设计,风格是站点的整体形象给浏览者的综合感受，整体形象包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、价值、意义等诸多因素。比如网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的等

7、。,信息学竞赛网站的整体风格,专业、有实力的专题网站（内容）； 以幻想的天蓝色为主色调（色彩搭配）； 网站象狮子一样自信威猛（形象Logo）； 与其它网站相比，网站具有可信赖、交流方便等特征。,整体风格界面布局,网页尺寸：主要是设计网站的宽度，如果用像素为单位，这里设计成800像素，大部分网站没有长度限制，但是不能过长，从使用习惯上来说，在主页上拖动滚轮2下为佳，这符合一般人的习惯； 布局结构：主要是考虑导航、必要信息与正文之间的布局关系，本专题网站布局方式是顶部放置logo和标语以及导航条，下面采用等分或者不等分的二栏、三栏、多栏，具体视内容而定，采用背景或者线条加以区分；,整体风格界面设计,配色原理：网站的主色调，根据内容和精神选择色彩，由设计者的主观性决定； 文本设置：文本是网页中最重要的设计元素，建议采用磅为单位，最适合网页正文显示的字体大小为12磅，小字号容易产生整体感和精致感，但是可读性较差，在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩 。从平台无关性的角度来考虑，正文最好采用缺省字体，采用不常用的字体，最好制成图片； 网站CI：logo、色彩、字体、