移动互联网站设计课件

移动互联网站设计移动互联网站设计移动互联网站设计全国信息技术应用培训教育工程教育部教育管理信息中心内容概要教育部教育管理信息中心大赛命题原则比赛说明解析开发注意事项研讨教学方法研讨大赛考核要求大赛将综合考核学生的专业知识和操作技能，每个阶段命题既有基础知识的考核，又有拔高的题目，以便更好的分出层次，选拔出进入下一赛程的人才。拔高题目依据赛制的深入而变化；预赛命题原则预赛主要考察学生对比赛科目所涉及的基础知识点的全面了解及掌握程度。预赛题目除考察专业基本知识及软件常用操作功能外，还包含解决实际问题这部分的考核内容，即注重实际应用过程中应掌握的相关知识及技能的考核；（本届要加强这方面考核）复赛命题原则复赛和决赛命题则突出实用技能的考核，重点考核学生的实际操作技能、综合应用能力、解决实际问题能力及一定的创新能力；复赛主要考察学生操作技能的熟练掌握程度以及解决较为复杂问题的能力。决赛命题原则决赛重点考察学生解决复杂问题的能力以及自主发挥与创新的能力。命题内容将适当结合实际工作岗位或具体工作项目的需求，不但可以引导学生学习并掌握实用信息技术，并且对学校的教学起到积极的引导和促进作用。2、比赛说明解析5附注4比赛大纲解析3题型、题量、考试方式和时间2软件要求与硬件要求1往届数据统计教育部教育管理信息中心二、软件要求与硬件要求软件要求DreamweaverCS3或以上简体中文版本开发语言：PHP运行环境：PHPnow套装硬件要求硬件配置：处理器：Intel®Pentium®IV或更高版本处理器。浏览器：MicrosoftInternetExplorer6.0SP1或更高版本。RAM：至少1G内存，推荐2G以上内存。硬盘：10G磁盘空间（仅限于安装Myeclipse7开发环境）。显示器：1024x768VGA，真彩色，需要支持Windows的显示适配器。网卡：标准以太网卡运行环境：推荐WindowsXP系统。三、题型、题量、考试方式和时间预赛题题型为选择题。题量是80道，其中单选题60道，每道题1分；多选题20道，每道题2分，合计100分。考试方式采用网络在线考试，系统自动阅卷。考试时间为100分钟。复赛题题型为主观操作题。题量为四道操作题+两道附加题。试卷满分为150分，其中附加题为50分。考试方式采用上机操作。考试时间为3小时。决赛题题型为复杂或者创造性比较高的操作题，内容涉及网站界面设计、CSS高级使用和简单的PHP后台开发。题量为2道，其中一道考察解决复杂问题的能力，另外一道考察创造性发挥能力。试卷满分为120分。考试方式为上机操作。考试时间为5小时。四、比赛大纲解析参赛基本要求预赛部分复赛部分决赛部分4.1参赛基本要求●基本要求具有计算机基础知识了解Internet基本知识，掌握HTML语言，了解CSS样式表。学习网站规划管理，了解网站制作的基本流程和技术要点熟练使用Dreamweaver软件进行网页设计和制作了解动态网页等网站制作的新技术

4.2预赛部分预赛主要考察参赛者对移动互联网站建设与管理等相关知识的全面了解程度以及对移动互联网站方案设计的掌握，具体内容如下：一、网站建设与管理部分：（一）认识网站建设的过程1）网站的基本知识2）网站的开发流程3）网站相关重要法律法规（二）域名注册及备案1）域名的概念、备案、解析2）域名的选择与注册3）网站空间的申请（三）网站设计与开发技术1）常用的网站后台开发平台介绍：ASP、ASP.NET、PHP、JSP2）常用的网站设计工具介绍：Dreamweaver、Photoshop、Fireworks、flash3）CMS网站系统4）网站常用特效（四）网站发布1)网站上传2)网站测试（五）网站服务器搭建与管理1）网站服务器设计2）网站服务器搭建流程3）网站服务器管理（六）网站管理1）网站管理概念2）网站日常管理3）网站更新与升级（七）网站的搜索引擎优化（SEO）1）SEO概念2）SEO工作原理3）SEO关键技术（八）网站运营与推广1）认识网站运营2）网站盈利模式3）常见的几种网站推广模式（九）移动互联网1）移动互联网基本概念2)移动互联网相关技术：3G、WAP、云计算等3）移动互联网发展趋势二、Dreamweaver网页设计部分：（一）网页制作基础1）网页制作基础知识2）网页制作基本步骤3）HTML语法标记4）Dreamweaver的操作环境（二）创建站点与文档1）创建本地站点2）创建文档（三）在网页中使用文字1）与文字相关的HTML标签2）在Dreamweaver中使用文字（四）层叠样式表1）内部CSS和外部CSS的添加方法2）编辑CSS属性，3）使用CSS进行页面排版，创建各种CSS效果4）使用样式表定义其他元素（图片、表格、层等）的格式（六）建立超级链接1）使用Dreamweaver设置超级链接和Email链接2）从HTML角度理解超链接（七）表格与页面布局1）在Dreamweaver中使用表格2）表格在网页排版中的作用3）使用页面布局模式进行网页排版的方法（八）框架1）创建框架和框架集2）编辑框架3）内嵌框架iframe的使用（九）层1）创建图层2）调整图层属性3）使用图层排版（十）资源、模板和库1）模板的创建、编辑，2）定义模板可编辑区域3）资源管理4）创建、管理和编辑库项目（十一）动态网页1）使用Dreamweaver预置的FLASH对象2）了解Javascript脚本3）使用Dreamweaver行为创建Javascript脚本4）使用Dreamweaver行为制作复杂的动态页面4.3复赛部分复赛主要围绕网页制作的一些高级应用，考察参赛者比较完备和实用的网页制作及一定的设计能力，具体考察内容如下：（一）网页基本元素运用1）使用CSS样式表调整元素属性2）综合使用表格、层、框架排版（二）网站管理1）模板和库的使用2）全站页面管理（三）动态页面1）复杂的行为脚本设计2）使用Javascrip简单判断表单往届复赛题分析第五届-复赛题分析第一题：版式设计（30分）

参照素材中的“设计草图.gif”文件，使用DIV层+CSS样式方式排版，不同的版块用不同的颜色区分示意，最后效果参见“参考图片.jpg”。文件命名为“index.html”，存储在“01”文件夹下，“01”文件夹存储在考号命名的文件夹下。基本要求：1、版式主体内容居中对齐。窗口大小改变时应该可以自动居中。2、要求使用DIV层排版，用不同的背景颜色或者示意文字等方式表明不同的版块。使用表格或框架会相应扣分。

提高要求：3、将版块继续细分，设置SideBar边栏和MainBody主版块内部的版块，比如相关链接、插入的图片框等等，可以加入说明文字或示意文字。本题主要考查版式制作和设计能力，能继续细化版块、实用性强的会有相应加分。4、有余力的参赛者可以调整版块的配色方案，以及文字的CSS样式等。

第二题：新闻模板（70分）

设计制作某网站的新闻模板，命名为“news.dwt”模板文件，将提供的两条新闻制作成网页，按照其发生的时间分别命名为“20090708001.html”、“20091020001.html”，并套用定义好的新闻模板。要求：1、可以使用任意方式排版，注意代码的优化即可。2、应创建站点进行管理，模板和制作好的新闻页面全都保存在“02”文件夹中，“02”文件夹存储在考号命名的文件夹中。3、可以使用提供的图片和文字素材，也可以再自行编辑，可以使用CSS做格式定义。

4、新闻页面应该简洁大方、网页小巧、读取速度快，符合网民阅读习惯，网站导航合理、美观、实用，在模板设计时要注意这些特点。5、除了超级链接允许空链接之外，其他部分都应该以实用为准，尽量制作完整。可以自行在页面上添加文字，相关链接、相关图片等其他内容。6、不建议套用Dreamweaver自带模板，鼓励参赛者自行创作和设计，会有相应加分。

附加题：互动网页制作（50分）

制作一个在网页上玩的小游戏。（测试、问答计分形式的也可以）要求：1、游戏的首页命名为“index.html”，连同相关文件全部保存在“03”文件夹下，“03”文件夹存储在考号命名的文件夹下。2、可以利用Dreamweaver的行为来制作，也可以自己直接编写JavaScript脚本。不能使用flash或者其他软件来制作游戏程序主体。3、在页面的适当位置上要有对游戏玩法的简单介绍和操作说明等。

4、可以使用多个页面。5、游戏要尽量制作完整，要有意思，有一定的可玩性。或者也可以制作其他具有游戏性质的小程序，比如测试、机智问答等。6、可以利用提供的素材图片参照“参考效果1.jpg”、“参考效果2.jpg”、“参考效果3.jpg”中的效果制作拼图游戏。利用鼠标拖动图片，放到合适位置，全部放好之后点击“我拼好了”按钮，程序可以判断是否拼好。

4.4决赛部分要求参赛能够做出独出心裁的页面设计及实用性高的作品。决赛除要求参赛者能够熟练掌握预赛、复赛所考察的知识点外，还应掌握界面设计、CSS高级使用、使用PHP制作动态网站的简单应用等技术。往届决赛题分析第五届-决赛题分析第一题：多媒体展示系统界面设计由于HTML语言使用方便，扩展性强，各平台兼容性好，可以包含各种多媒体元素。所以也经常被用来开发多媒体软件。比如：多媒体光盘、多媒体触摸一体机、多媒体信息查询系统等。题目要求：假设现在做一个多媒体终端机，让人们可以自己操作，观看介绍以及查询。下面有两个备选主题主题一：某火车站多媒体查询系统主题二：某中学的多媒体介绍系统

1、请参赛者从上面两个展览的主题中任选一个设计。为设计方便，可以自行为车站或学校命名。2、请参赛者阐述对于题目设计的思路，比如界面设计和结构、内容安排、导航安排、色彩搭配、图像使用、版式设计等等，保存为“设计概述.txt”文件。3、利用Dreamweaver设计制作首页和内容页的多媒体界面。参考图二图三所示。注意：本题并不是要求完整的制作多媒体系统，只要求进行界面设计。4、在界面设计中需要出现的文字内容可以根据题目要求自己合理想象加以补充。5、注意：多媒体系统的使用环境与网络浏览不同。大多是在局域网、或者单机运行；浏览者需要快速找到信息，而不是上网冲浪；文字太多太小不便于阅读等等。注意针对多媒体展示这些的特点进行设计。第二题：主题网站设计制作从下面提供的两个背景环境中任选一个进行创意，设计并制作一个主题网站。

一、建国60周年阅兵式2009年，中国最受瞩目的大事之一，无疑是新中国成立60周年大庆。国庆60周年阅兵10月1日上午在天安门广场成功举行。由人民解放军、武装警察部队和民兵预备役部队8000余名官兵组成的受阅方阵，以坚定豪迈的步伐、排山倒海的气势、巨龙临空的雄姿，展示了我军有效履行新世纪新阶段历史使命，建设信息化军队、打赢信息化战争的坚强决心，展示了我军捍卫国家安全与发展利益、维护世界和平的强大力量。

这是我国第14次、也是新世纪的第一次阅兵。自1949年以来，我国先后举行了13次国庆阅兵，其中影响较大且具代表意义的是开国大典、新中国成立5周年、10周年、35周年和50周年的5次大阅兵二、2010年世博会即将在我国上海举行时间：2010年5月1日至10月31日地点：上海市中心黄浦江两岸，南浦大桥和卢浦大桥之间的滨江地区主题：城市，让生活更美好副主题：城市多元文化的融合城市经济的繁荣城市科技的创新城市社区的重塑城市和乡村的互动目标：吸引200个国家和国际组织参展，7000万人次的参观者要求：1、上述两段文字是提供给参赛者的创意点，或者说是背景环境。选择其中一个进行创作。2、参赛者需要发挥自己的创意，选择创作的主题。考虑到制作的时间比较短，建议参赛者要考虑主题涵盖的内容多少是否适合。设计制作小而精的网站。切忌选题过大，难以制作完整。比如：可以选择“2009国庆阅兵分列式方阵介绍”、“阅兵的军种和武器”、“世博会的历史”、“2010年上海世博会场馆”等作为网站主题。说明：1、参赛者将制作完整的网站保存在“02”文件夹中，“02”文件夹保存在准考证号命名的文件夹中。网站首页命名为“index.html”，网站内文件夹和文件命名方式参赛者自己把握，不做要求。2、要求网站结构完整，内容丰富。不允许出现空链接以及无法访问的链接。网站主体内容必须是本地页面。网站起码要有首页和内页两种不同的页面设计。网站页面的总量不低于15页。切忌内容简单、枯燥无味。3、在网站中，无需制作与主题无关的内容。4、试题素材中提供有新华社国庆阅兵报道的专题网站，在“xinhua”文件夹中，双击“start”即可用浏览器浏览。同样，世博会的选题，在“expo2010”文件夹中，双击“start”即可浏览。其中的文字和图片均可作为素材使用，但是不能直接使用原网站的版式设计、配色和样式。参赛者制作的网站与原网站过于类似会大幅度减分。（素材网站并不是全部都可以使用，部分链接已经失效，请参赛者注意运用提供的内容。另外因为在本地浏览，浏览器对脚本运行会有安全警告，选择允许运行即可。）5、除了提供的素材，参赛者可以利用计算机中的软件自行加工处理素材或者创作。要求：最终的页面中不应该出现其他网站的标志，带有其他网站水印的素材应做相应的处理。6、除了文字和图片之外，有能力的参赛者也可以利用提供的软件自行制作动画等其他多媒体元素。4.5附注[1]网站建设与管理案例教程，北京大学出版社，徐洪祥，2010年5月。[2]边用边学DreamweaverCS3网页制作，清华大学出版社出版社，马威，2009年3月。3、移动互联网开发注意事项探讨4迭代式开发、测试3事先验证技术方案2目标清晰1分工合作5重视社文档建设6其他注意项教育部教育管理信息中心一、分工合作根据各人水平及项目要求分配不同的工作，大致有以下的角色需要安排：项目经理：负责项目前分需求量分析及项管理。服务端程序员，负责编写服务器端程序，偏php或其他后台语言。网站前端开发员，负责网站界面的开发，编Javascript与html。测试人员。美术设计师。二、目标清晰制定明确的工作目标和计划，时时检查工作进度。在立项时要考虑以整体工期、人力成本等因素。将每个大任务分解成多个小任务，逐个完成。不断的查看开发进展。三、事先验证技术方案对于不熟悉的技术方案，一定要先试验之后才能引入到项目中，否则一但选择型不对，那对整个项目很麻烦的后果。四、采用迭代式开发、测试迭代式开发的好处调整系统的功能每日测试五、重视文档建设需求分析文档系统设计文档详细设计文档系统操作说明系统安装文档系统测试文档系统运维文档六、其他注意事项移动互联网的发展阶段WAP1.0、WAP1.2、WAP2.0、HTML4.01、HTML5数据库的使用SQLServer、MySQL、Postgresql、DB2、Oracle调试工具的使用Eclipse、Firebug协同工作工具的使用BugZilla、BugFree、MantisCVS、SVN、VSS4、教学方法研讨5实践教学形式多样，并提供开放的实验环境4努力实施项目教学和案例教学，提高学生实际应用能力3广泛实施启发式教学2培养学生自主学习和创新的能力1注重兴趣的培养教育部教育管理信息中心6经典案例分析1注重兴趣的培养兴趣是最好的老师，在知识学习过程中，有没有兴趣，学习的效果是大不一样。一般来说．学生在第一堂课时学习状态是积极的，兴趣也很浓厚。为此我们抓住学生的这种心理，在第一次上课时就要激发学生的求知欲，强调移动互联网的应用领域，引发学生的认可感。2培养学生自主学习和创新的能力信息技术的快速发展,要求人们不断地提高和更新自己的知识水平结构。移动互联网已是无所不在的应用,在其教学过程中如何提高学生的学习效率;培养学生自主学习和创新的能力,是我们应该认真思考的问题。教学的功能要从单纯注重知识的传授,转变为引导学生学会学习、学会应用;3广泛实施启发式教学为培养学生逻辑思维和创新能力，在教学过程中，教师遵循启发式教学原