移动互联网站设计课件

移动互联网站设计移动互联网站设计大赛考核要求v大赛将综合考核学生的专业知识和操作技能，每个大赛将综合考核学生的专业知识和操作技能，每个阶段命题既有基础知识的考核，又有拔高的题目，阶段命题既有基础知识的考核，又有拔高的题目，以便更好的分出层次，选拔出进入下一赛程的人才。以便更好的分出层次，选拔出进入下一赛程的人才。拔高题目依据赛制的深入而变化；拔高题目依据赛制的深入而变化；预赛命题原则v预赛主要考察学生对比赛科目所涉及的基础知识点预赛主要考察学生对比赛科目所涉及的基础知识点的全面了解及掌握程度。的全面了解及掌握程度。v预赛题目除考察专业基本知识及软件常用操作功能预赛题目除考察专业基本知识及软件常用操作功能外，还包含解决实际问题这部分的考核内容，即注外，还包含解决实际问题这部分的考核内容，即注重实际应用过程中应掌握的相关知识及技能的考核；重实际应用过程中应掌握的相关知识及技能的考核；（本届要加强这方面考核本届要加强这方面考核）复赛命题原则v复赛和决赛命题则突出实用技能的考核，重点考核复赛和决赛命题则突出实用技能的考核，重点考核学生的实际操作技能、综合应用能力、解决实际问学生的实际操作技能、综合应用能力、解决实际问题能力及一定的创新能力；题能力及一定的创新能力；v复赛主要考察学生操作技能的熟练掌握程度以及解复赛主要考察学生操作技能的熟练掌握程度以及解决较为复杂问题的能力。决较为复杂问题的能力。决赛命题原则v决赛重点考察学生解决复杂问题的能力以及自主发决赛重点考察学生解决复杂问题的能力以及自主发挥与创新的能力。命题内容将适当结合实际工作岗挥与创新的能力。命题内容将适当结合实际工作岗位或具体工作项目的需求，不但可以引导学生学习位或具体工作项目的需求，不但可以引导学生学习并掌握实用信息技术，并且对学校的教学起到积极并掌握实用信息技术，并且对学校的教学起到积极的引导和促进作用。的引导和促进作用。2 2、比赛说明解析、比赛说明解析5 5 附注附注4 4 比赛大纲解析比赛大纲解析3 3 题型、题量、考试方式和时间题型、题量、考试方式和时间2 2 软件要求与硬件要求软件要求与硬件要求1 1 往届数据统计往届数据统计教育部教育管理信息中心教育部教育管理信息中心二、软件要求与硬件要求v软件要求软件要求Dreamweaver CS3或以上简体中文版本开发语言：PHP运行环境：PHPnow套装v硬件要求硬件要求硬件配置：处理器：Intel Pentium IV 或更高版本处理器。浏览器：Microsoft Internet Explorer 6.0 SP 1或更高版本。RAM：至少1G内存，推荐2G以上内存。硬盘：10G磁盘空间（仅限于安装Myeclipse7开发环境）。显示器：1024x768 VGA，真彩色，需要支持 Windows 的显示适配器。网卡：标准以太网卡运行环境：推荐Windows XP系统。三、题型、题量、考试方式和时间v预赛题预赛题题型为选择题。题量是80道，其中单选题60道，每道题1分；多选题20道，每道题2分，合计100分。考试方式采用网络在线考试，系统自动阅卷。考试时间为100分钟。v复赛题复赛题题型为主观操作题。题量为四道操作题+两道附加题。试卷满分为150分，其中附加题为50分。考试方式采用上机操作。考试时间为3小时。v决赛题决赛题题型为复杂或者创造性比较高的操作题，内容涉及网站界面设计、CSS高级使用和简单的PHP后台开发。题量为2道，其中一道考察解决复杂问题的能力，另外一道考察创造性发挥能力。试卷满分为120分。考试方式为上机操作。考试时间为5小时。四、比赛大纲解析v参赛基本要求参赛基本要求v预赛部分预赛部分v复赛部分复赛部分v决赛部分决赛部分4.1参赛基本要求v基本要求基本要求具有计算机基础知识了解Internet基本知识，掌握HTML语言，了解CSS样式表。学习网站规划管理，了解网站制作的基本流程和技术要点熟练使用Dreamweaver软件进行网页设计和制作了解动态网页等网站制作的新技术4.2预赛部分v预赛主要考察参赛者对移动互联网站建设与管理等预赛主要考察参赛者对移动互联网站建设与管理等相关知识的全面了解程度以及对移动互联网站方案相关知识的全面了解程度以及对移动互联网站方案设计的掌握，具体内容如下：设计的掌握，具体内容如下：一、网站建设与管理部分：（一）认识网站建设的过程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复赛部分v复赛主要围绕网页制作的一些高级应用，考察参赛复赛主要围绕网页制作的一些高级应用，考察参赛者比较完备和实用的网页制作及一定的设计能力，者比较完备和实用的网页制作及一定的设计能力，具体考察内容如下：具体考察内容如下：（一）网页基本元素运用1）使用CSS样式表调整元素属性2）综合使用表格、层、框架排版（二）网站管理1）模板和库的使用2）全站页面管理（三）动态页面1）复杂的行为脚本设计2）使用Javascrip简单判断表单往届复赛题分析v第五届第五届-复赛题分析复赛题分析v第一题：版式设计（第一题：版式设计（30分）分）v参照素材中的“设计草图.gif”文件，使用DIV层+CSS样式方式排版，不同的版块用不同的颜色区分示意，最后效果参见“参考图片.jpg”。文件命名为“index.html”，存储在“01”文件夹下，“01”文件夹存储在考号命名的文件夹下。基本要求：1、版式主体内容居中对齐。窗口大小改变时应该可以自动居中。2、要求使用DIV层排版，用不同的背景颜色或者示意文字等方式表明不同的版块。使用表格或框架会相应扣分。提高要求：3、将版块继续细分，设置SideBar边栏和MainBody主版块内部的版块，比如相关链接、插入的图片框等等，可以加入说明文字或示意文字。本题主要考查版式制作和设计能力，能继续细化版块、实用性强的会有相应加分。4、有余力的参赛者可以调整版块的配色方案，以及文字的CSS样式等。v第二题：新闻模板（第二题：新闻模板（70分）分）v设计制作某网站的新闻模板，命名为“news.dwt”模板文件，将提供的两条新闻制作成网页，按照其发生的时间分别命名为“20090708001.html”、“20091020001.html”，并套用定义好的新闻模板。要求：1、可以使用任意方式排版，注意代码的优化即可。2、应创建站点进行管理，模板和制作好的新闻页面全都保存在“02”文件夹中，“02”文件夹存储在考号命名的文件夹中。3、可以使用提供的图片和文字素材，也可以再自行编辑，可以使用CSS做格式定义。4、新闻页面应该简洁大方、网页小巧、读取速度快，符合网民阅读习惯，网站导航合理、美观、实用，在模板设计时要注意这些特点。5、除了超级链接允许空链接之外，其他部分都应该以实用为准，尽量制作完整。可以自行在页面上添加文字，相关链接、相关图片等其他内容。6、不建议套用Dreamweaver自带模板，鼓励参赛者自行创作和设计，会有相应加分。v附加题：互动网页制作（附加题：互动网页制作（50分）分）v制作一个在网页上玩的小游戏。（测试、问答计分形式的也可以）要求：1、游戏的首页命名为“index.html”，连同相关文件全部保存在“03”文件夹下，“03”文件夹存储在考号命名的文件夹下。2、可以利用Dreamweaver的行为来制作，也可以自己直接编写JavaScript脚本。不能使用flash或者其他软件来制作游戏程序主体。3、在页面的适当位置上要有对游戏玩法的简单介绍和操作说明等。4、可以使用多个页面。5、游戏要尽量制作完整，要有意思，有一定的可玩性。或者也可以制作其他具有游戏性质的小程序，比如测试、机智问答等。6、可以利用提供的素材图片参照“参考效果1.jpg”、“参考效果2.jpg”、“参考效果3.jpg”中的效果制作拼图游戏。利用鼠标拖动图片，放到合适位置，全部放好之后点击“我拼好了”按钮，程序可以判断是否拼好。4.4决赛部分v要求参赛能够做出独出心裁的页面设计及实用性高要求参赛能够做出独出心裁的页面设计及实用性高的作品。决赛除要求参赛者能够熟练掌握预赛、复的作品。决赛除要求参赛者能够熟练掌握预赛、复赛所考察的知识点外，还应掌握界面设计、赛所考察的知识点外，还应掌握界面设计、CSS高高级使用、使用级使用、使用PHP制作动态网站的简单应用等技术。制作动态网站的简单应用等技术。往届决赛题分析v第五届第五届-决赛题分析决赛题分析v第一题：多媒体展示系统界面设计第一题：多媒体展示系统界面设计由于HTML语言使用方便，扩展性强，各平台兼容性好，可以包含各种多媒体元素。所以也经常被用来开发多媒体软件。比如：多媒体光盘、多媒体触摸一体机、多媒体信息查询系统等。v题目要求：题目要求：假设现在做一个多媒体终端机，让人们可以自己操作，观看介绍以及查询。下面有两个备选主题主题一：某火车站多媒体查询系统主题二：某中学的多媒体介绍系统v1、请参赛者从上面两个展览的主题中任选一个设计。为设计方便，可以自行为车站或学校命名。2、请参赛者阐述对于题目设计的思路，比如界面设计和结构、内容安排、导航安排、色彩搭配、图像使用、版式设计等等，保存为“设计概述.txt”文件。3、利用Dreamweaver设计制作首页和内容页的多媒体界面。参考图二图三所示。注意：本题并不是要求完整的制作多媒体系统，只要求进行界面设计。4、在界面设计中需要出现的文字内容可以根据题目要求自己合理想象加以补充。5、注意：多媒体系统的使用环境与网络浏览不同。大多是在局域网、或者单机运行；浏览者需要快速找到信息，而不是上网冲浪；文字太多太小不便于阅读等等。注意针对多媒体展示这些的特点进行设计。v第二题：主题网站设计制作第二题：主题网站设计制作从下面提供的两个背景环境中任选一个进行创意，设计并制作一个主题网站。v一、建国60周年阅兵式2009年，中国最受瞩目的大事之一，无疑是新中国成立60周年大庆。国庆60周年阅兵10月1日上午在天安门广场成功举行。由人民解放军、武装警察部队和民兵预备役部队8000余名官兵组成的受阅方阵，以坚定豪迈的步伐、排山倒海的气势、巨龙临空的雄姿，展示了我军有效履行新世纪新阶段历史使命，建设信息化军队、打赢信息化战争的坚强决心，展示了我军捍卫国家安全与发展利益、维护世界和平的强大力量。v这是我国第14次、也是新世纪的第一次阅兵。自1949年以来，我国先后举行了13次国庆阅兵，其中影响较大且具代表意义的是开国大典、新中国成立5周年、10周年、35周年和50周年的5次大阅兵二、2010年世博会即将在我国上海举行时间：2010年5月1日至10月31日地点：上海市中心黄浦江两岸，南浦大桥和卢浦大桥之间的滨江地区主题：城市，让生活更美好副主题：城市多元文化的融合 城市经济的繁荣 城市科技的创新 城市社区的重塑 城市和乡村的互动目标：吸引200个国家和国际组织参展，7000万人次的参观者v要求：要求：1、上述两段文字是提供给参赛者的创意点，或者说是背景环境。选择其中一个进行创作。2、参赛者需要发挥自己的创意，选择创作的主题。考虑到制作的时间比较短，建议参赛者要考虑主题涵盖的内容多少是否适合。设计制作小而精的网站。切忌选题过大，难以制作完整。比如：可以选择“2009国庆阅兵分列式方阵介绍”、“阅兵的军种和武器”、“世博会的历史”、“2010年上海世博会场馆”等作为网站主题。v说明：说明：1、参赛者将制作完整的网站保存在“02”文件夹中，“02”文件夹保存在准考证号命名的文件夹中。网站首页命名为“index.html”，网站内文件夹和文件命名方式参赛者自己把握，不做要求。2、要求网站结构完整，内容丰富。不允许出现空链接以及无法访问的链接。网站主体内容必须是本地页面。网站起码要有首页和内页两种不同的页面设计。网站页面的总量不低于15页。切忌内容简单、枯燥无味。3、在网站中，无需制作与主题无关的内容。4、试题素材中提供有新华社国庆阅兵报道的专题网站，在“xinhua”文件夹中，双击“start”即可用浏览器浏览。同样，世博会的选题，在“expo2010”文件夹中，双击“start”即可浏览。其中的文字和图片均可作为素材使用，但是不能直接使用原网站的版式设计、配色和样式。参赛者制作的网站与原网站过于类似会大幅度减分。（素材网站并不是全部都可以使用，部分链接已经失效，请参赛者注意运用提供的内容。另外因为在本地浏览，浏览器对脚本运行会有安全警告，选择允许运行即可。）5、除了提供的素材，参赛者可以利用计算机中的软件自行加工处理素材或者创作。要求：最终的页面中不应该出现其他网站的标志，带有其他网站水印的素材应做相应的处理。6、除了文字和图片之外，有能力的参赛者也可以利用提供的软件自行制作动画等其他多媒体元素。4.5附注v1 网站建设与管理案例教程，北京大学出版社，网站建设与管理案例教程，北京大学出版社，徐洪祥，徐洪祥，2010年年5月。月。v2 边用边学边用边学Dreamweaver CS3 网页制作，网页制作，清华大学出版社出版社，马威，清华大学出版社出版社，马威，2009年年3月。月。3 3、移移动动互互联联网开发注网开发注意意事项探讨事项探讨4 4 迭代式开发、测试迭代式开发、测试3 3 事先验证技术方案事先验证技术方案2 2 目标清晰目标清晰1 1 分工合作分工合作5 5 重视社文档建设重视社文档建设6 6 其他注意项其他注意项教育部教育管理信息中心教育部教育管理信息中心一、分工合作v根据各人水平及项目要求分配不同的工作，大致有根据各人水平及项目要求分配不同的工作，大致有以下的角色需要安排：以下的角色需要安排：项目经理：负责项目前分需求量分析及项管理。服务端程序员，负责编写服务器端程序，偏php或其他后台语言。网站前端开发员，负责网站界面的开发，编Javascript与html。测试人员。美术设计师。二、目标清晰v制定明确的工作目标和计划，时时检查工作进度。制定明确的工作目标和计划，时时检查工作进度。在立项时要考虑以整体工期、人力成本等因素。将每个大任务分解成多个小任务，逐个完成。不断的查看开发进展。三、事先验证技术方案v对于不熟悉的技术方案，一定要先试验之后才能引对于不熟悉的技术方案，一定要先试验之后才能引入到项目中，否则一但选择型不对，那对整个项目入到项目中，否则一但选择型不对，那对整个项目 很麻烦的后果。很麻烦的后果。四、采用迭代式开发、测试v迭代式开发的好处迭代式开发的好处v调整系统的功能调整系统的功能v每日测试每日测试五、重视文档建设v需求分析文档需求分析文档v系统设计文档系统设计文档v详细设计文档详细设计文档v系统操作说明系统操作说明v系统安装文档系统安装文档v系统测试文档系统测试文档v系统运维文档系统运维文档六、其他注意事项v移动互联网的发展阶段移动互联网的发展阶段WAP 1.0、WAP 1.2、WAP 2.0、HTML 4.01、HTML 5v数据库的使用数据库的使用SQL Server、MySQL、Postgresql、DB2、Oraclev调试工具的使用调试工具的使用Eclipse、Firebugv协同工作工具的使用协同工作工具的使用BugZilla、BugFree、MantisCVS、SVN、VSS4 4、教学方法研讨、教学方法研讨5 5 实践教学形式多样，并提供开放的实验环境实践教学形式多样，并提供开放的实验环境4 4 努力实施项目教学和案例教学，提高学生实际应用能力努力实施项目教学和案例教学，提高学生实际应用能力3 3 广泛实施启发式教学广泛实施启发式教学2 培养学生自主学习和创新的能力培养学生自主学习和创新的能力1 1 注重兴趣的培养注重兴趣的培养教育部教育管理信息中心教育部教育管理信息中心6 6 经典案例分析经典案例分析1 注重兴趣的培养注重兴趣的培养v兴趣是最好的老师，在知识学习过程中，有没有兴兴趣是最好的老师，在知识学习过程中，有没有兴趣，学习的效果是大不一样。趣，学习的效果是大不一样。v一般来说学生在第一堂课时学习状态是积极的，一般来说学生在第一堂课时学习状态是积极的，兴趣也很浓厚。为此我们抓住学生的这种心理，在兴趣也很浓厚。为此我们抓住学生的这种心理，在第一次上课时就要激发学生的求知欲，强调移动互第一次上课时就要激发学生的求知欲，强调移动互联网的应用领域，引发学生的认可感。联网的应用领域，引发学生的认可感。2培养学生自主学习和创新的能力v信息技术的快速发展信息技术的快速发展,要求人们不断地提高和更新自要求人们不断地提高和更新自己的知识水平结构。己的知识水平结构。v移动互联网已是无所不在的应用移动互联网已是无所不在的应用,在其教学过程中如在其教学过程中如何提高学生的学习效率何提高学生的学习效率;培养学生自主学习和创新的培养学生自主学习和创新的能力能力,是我们应该认真思考的问题。教学的功能要从是我们应该认真思考的问题。教学的功能要从单纯注重知识的传授单纯注重知识的传授,转变为引导学生学会学习、学转变为引导学生学会学习、学会应用会应用;3广泛实施启发式教学v为培养学生逻辑思维和创新能力，在教学过程中，为培养学生逻辑思维和创新能力，在教学过程中，教师遵循启发式教学原则，通过各种教学方式和手教师遵循启发式教学原则，通过各种教学方式和手段激发学生的学习欲望，积极投入到学习活动中，段激发学生的学习欲望，积极投入到学习活动中，积极思维，发现问题，提出问题，并逐步解决问题。积极思维，发现问题，提出问题，并逐步解决问题。例如，在讲解程序设计举例时，不是简单地给出程例如，在讲解程序设计举例时，不是简单地给出程序清单，而是从分析问题入手，继而找出解决问题序清单，而是从分析问题入手，继而找出解决问题的方法，再给出算法，最后编写出完整的程序，而的方法，再给出算法，最后编写出完整的程序，而在这一全过程，最关键的是每一步都采用与学生一在这一全过程，最关键的是每一步都采用与学生一起探讨的方式，让学生在启发下思考，在思考中解起探讨的方式，让学生在启发下思考，在思考中解决问题，从而掌握独立分析问题、解决问题的方法。决问题，从而掌握独立分析问题、解决问题的方法。4努力实施项目教学和案例教学，提高学生实际应用能力v为培养学生综合应用知识的能力，通过对完整的项为培养学生综合应用知识的能力，通过对完整的项目的系统分析，培养学生良好的编程习惯，善于获目的系统分析，培养学生良好的编程习惯，善于获取他人经验的能力以及掌握综合运用所学知识的能取他人经验的能力以及掌握综合运用所学知识的能力，从而真正提高编程水平。而案例教学则贯穿在力，从而真正提高编程水平。而案例教学则贯穿在课程的主要章节中，通过课程的主要章节中，通过“典型程序案例典型程序案例”“语语法，实践知识点说明法，实践知识点说明”“模仿编程模仿编程”“实践提实践提高高”的教学组织方式，培养学生实际应用能力。的教学组织方式，培养学生实际应用能力。5实践教学形式多样，并提供开放的实验环境v除传统的课堂实验外，还实施了课程设计、项目分除传统的课堂实验外，还实施了课程设计、项目分析与设计等实践环节，并要求教师组织移动互联网析与设计等实践环节，并要求教师组织移动互联网程序设计兴趣小组、移动互联网程序设计大赛，组程序设计兴趣小组、移动互联网程序设计大赛，组织学生参与科研开发等。学校机房全天向学生开放，织学生参与科研开发等。学校机房全天向学生开放，并安排指导教师给予一定的指导。开放式的实验环并安排指导教师给予一定的指导。开放式的实验环境不仅增加了学生上机实践的时间，同时也为培养境不仅增加了学生上机实践的时间，同时也为培养学生较好的自主学习习惯打下了良好的基础。学生较好的自主学习习惯打下了良好的基础。6经典案例讲解v在有条件的情况下，可对学生讲解一些经典案例，在有条件的情况下，可对学生讲解一些经典案例，从系统设计到产品实施，到验收等过程，让学生学从系统设计到产品实施，到验收等过程，让学生学习到基础技能的同时，又能学习到经典的设计理念习到基础技能的同时，又能学习到经典的设计理念与方法。与方法。谢谢 谢谢!教育部教育管理信息中心谢谢46、我们若已接受最坏的，就再没有什么损失。卡耐基47、书到用时方恨少、事非经过不知难。陆游48、书籍把我们引入最美好的社会，使我们认识各个时代的伟大智者。史美尔斯49、熟读唐诗三百首，不会作诗也会吟。孙洙50、谁和我一样用功，谁就会和我一样成功。莫扎特