搜索
1云南城市建设职业学院网页设计课程标准系（部）：机电与信息工程系课程名称：网页设计编制教师：张捷编制时间：2015年5月2前言《网页设计》是职业院校计算机领域的一门主干专业课程，也是计算机及相关专业人才培养计划中的一门专业课程，在大二第二学期开设，课程总学时为108学时，主要是为了让学生掌握网站建设必备的基础知识、基本技能和基本素养，其主要任务是通过网页设计基础学习和实训两方面内容培养学生制作网页、建立维护网站的能力，使学生了解网页制作的方法，掌握网页三剑客与其它多媒体软件相结合开发网站的技能。同时达到培养高素质劳动者和网站建设专门人才的目的，为今后学生就业和继续学习打下良好的基础。当今正处于网络化和信息化时代，很多工作都离不开互联网。网站是政府、企事业单位、企业公司信息化的核心，更是其应用宣传信息的关键媒体。所以特依据人才培养方案要求制订以下网页设计课程标准。一、课程基本信息1．课程名称：网页设计2．课程类别：专业课基础课3．课程编码：4．学时：1085．适用专业：计算机、网络、移动通信等相关专业。1.1课程的性质与作用1.课程的性质网页设计课程是高职计算机、网络、移动通信等相关专业重点建设的核心课程之一，是学生职业教育的核心课程。通过本课程的学习，使学生了解网页设计、网站项目创建实施的流程及方法，具备网页设计、网站建设与维护的基本能力，为今后学生到相应的职业岗位工作打下基础。计算机、网络、电子商务等相关专业是为适应市场经济发展需要，培养能在政府、企业、企事业单位从事算机系统维护、网络维护、网页设计、网站建设管理维护、中小型信息系统开发等工作的高技能人才、让学生具有良好的职业道德、熟练的专业技能和可持续发展的计算机应用技术领域的高级应用型人才。本课程是一门既包含理论知识又包含实践性、技能都相对较强的课程。2．课程作用本课程相关的典型工作岗位是：前端（网站策划师、网页美工）、后台（网站开发工程师），对其进行典型工作任务与职业能力分析后，归纳提炼出岗位核心能力为“网站建设”，再按照各个典型工作任务的先后顺序设置支撑的项目课程群。《网站建设》的先行课程为《图像处理photoshop》，《HTML，CSS，DIV》和《Dreamweaver网页设计》《flash》《T1基础能力美术，图案,色彩基础》《网站建设实训》等，详细的可见下表，它们是支撑“网站建设”核心能力的基础课程。基础能力扩展能力高级能力T1:网页设计师HTML，CSS，DIVPHP（或ASP，JSP）等动态网站开发工具基础能力HTML+div+cssDreamweaver快速建站模板工具Ajax等最新技术FireWorkFireWork网页效果图制作3PhotoShop基础一定的语言表达、沟通能力图形图像处理Flash网站商业广告宣传动画制作能力广告宣传动画flash图片制作T2:网页美工T1基础能力美术，图案,色彩基础熟练掌握PhotoShopLogomaker软件应用标志设计网站标志设计制作T3:网站建设T1基础能力IIS(服务器配置)数据库设计能力项目网站建设，美化数据库（SQL或ACCESS）使用能力动态网站开发工具高级能力T5：网站分析和设计T3全部能力数据库设计能力软件工程分析能力策划、分析能力网站需求分析能力理解领域业务的能力语言表达、沟通能力通过网站项目开发的教学，使学生掌握网站开发的过程及网页的设计制作方法和步骤，该课程主要内容有网站规划与网页设计、静态网页制作、CSS规则的应用、网站测试发布与维护的知识和技能，为后续课程的学习提供网页设计与制作的理论基础和技能支持。本课程无论对培养学生的创新思维、协作精神、正确的设计理念和方法、信息处理能力、解决问题能力、自我学习能力、高级能力，还是对培养网页、网站制作的实践操作技能、满足职业岗位需求以及对后继课程的学习，都具有十分重要的作用。1.2课程的基本理念1．突出学生职业能力的培养本课程以建设企业网站项目为载体，以网站项目的建设与维护工程流程为主线，通过项目全面学习网站建设与维护的相关知识和技能，及步骤方法，使学生对真实的建设网站项目的流程有一个较全面的认识，形成职业岗位所需的基本能力，为今后从事相关职业岗位作前期准备。2．以学生主体，从实践中锻炼学生能力本课程在实施过程中，按工作流程将项目分解为具体的工作任务，教学中实施任务驱动，同时，引导学生组建项目团队，以学生为主体，团队在教师的启发、提示下自主地开展学习，学生根据任务，通过团队讨论，主动查阅资料，养成独立策划、分析问题和解决问题的能力。3．尊重个体差异，注重过程评价本课程在教学实施过程中，倡导学生自主学习，鼓励多元思维方式，并将其表达出来，尊重个体差异，发挥不同类型学生的长处，建立由形成性评价和总结性评价相结合的评价体系，教学过程中以形成性评价为主，注重学生学习的积极和自信心，总结性评价注重评价学生做成事的能力。1.3课程标准的设计思路在课程标准的设计过程中以网页设计基础为必须掌握知识，以实训企业网页设计项目的完整创建过程对各环节知识、技能进行知识巩固和运用，围绕预设能力目标，对学习目标、学习任务、能力要求、教学内容、活动设计和教学建议等都均参照人才培养方案。41.4教学方法在教学网页设计基础中主要采用案例、讲解、实做的方式来进行，通过理论、案例的讲解和演示，让学生能够清楚到实践的操作，掌握本课程的相关知识。图表表示如下教学方法对比法任务驱动法讨论教学法案例教学法教学方法讲授法理实结合法案例教学法：教学过程中。老师举例子讲解一个网站创建的过程和方法，其它相关类网站的创建就可以用第一个网站建设中的一些方法去完成。讨论式教学：注重课堂教学整体设计，通过引入问题，如建设网站的市场分析，可以组织学生通过讨论寻找答案，让学生参与交流、分享自己的看法，并进行总结和归纳。通过讨论，学生真正做到了积极参与课堂学习。分析问题、解决问题的能力，又加强了理论知识在实际的应用。还有其它的一些方法如讲授法、任务驱动法等，再此就不多说。二、课程目标2.1课程的总体目标通过本课程的学习，使学生掌握网页设计的整个工作流程和方法，能够使用网页三剑客及其它相关软件完成网站前端相关工作（如网页效果图制作、网页布局、用代码生成网页等），在教学过程中，通过团队开发，形成基本的职业道德规范和职业素养，及团队合作精神。三、内容标准第一章HTML网页基础教学内容一、［教学目的和要求］51、目的：1）掌握HTML文件编写方法；2）使用浏览器浏览HTML源文件；3）了解html基本概念2、要求：掌握常用的浏览器打开网页方法（IE、火狐、360浏览器、谷歌浏览器等），掌握网页设计的一些基本概念；二、［教学重点与难点］重点：网页设计相关概念难点：网页设计相关属性三、[教学方法与手段]讲授、案例演示、实际操作、作业通过理论讲授的方式让学生了解本章的理论的内容四、[内容部分]1、经典网页欣赏1）蓝色代表海洋，宇宙，大海。是一种博大的颜色。此网页采用主色为蓝色。代表了一种博大的精神。也代表了本公司的科技领域强项。不同的蓝色的转换给人一种轻松的感觉。网页右边加以黄色区域来烘托出产品的外形，以及独特。网页整体简单明了。正是这种公司所需要的。2）网页是一则汽车的网页，和传统汽车网页一样采用黑色的背景，凸显出一种高贵，科技的感觉。文章的文字部分采用高明度灰色，体现了主题。汽车轮子处的火，表现了激情，兴奋。使主题更加生化一步。给人庄重稳重的同时，不失激情活跃的一面。2、网页设计相关概念1）统一资源定位器（绝对路径、相对路径）2）超链接3）网站、静态网页、动态网页、主页、网页三剑客4）Html语言概念5）常见的浏览器6）Html语言的基本结构及语法五、[作业]1）使用浏览器打开网页源代码；2）写出html超文本标记语言的主体结构；第二章文字与段落标记教学内容一、［教学目的和要求］1、目的：1）掌握网页中文字编排、美化方法；62）掌握网页中图像插入的方法2、要求：1）掌握标题标记2）掌握文本基本标记、文本格式化标记3）掌握段落标记、水平线标记二、［教学重点与难点］重点：掌握文本基本标记、文本格式化标记难点：单、双标记的区分三、[教学方法与手段]讲授法、案例演示、讨论法四、[内容部分]1、设置段落的标记段落标记是一个双标记，每个标记对表示一个段落；语法格式：p这里表示段落/p2、换行标记换行标记是单标记，即不会成对出现，是在尖括号中加一个/br的单标记；语法格式：…………./br3、给代码添加注释添加注释是不会再网页中显示的语法格式：!——注释——4、粗体和斜体1）粗体标记，是一对双标记，起到强调的作用语法格式：b标题文字/b2）斜体标记语气较弱语法格式：i表示斜体标记/i5、下划线与删除线标记为了使部分文字特别显示，可以使用下划线或者删除线标记,也是一对双标记；语法格式：u下划线的/us删除线的/s6、上标和下标双标记语法格式：sup上标/supsub下标/subH2o;H2so4;a2+b2=c27、文字标记：是一个双标记语法格式：fontcolor=”颜色值”文字/font8、标题标记对齐属性h1-h6(h1:表示文字标题最大—h6表示文字标题最小)对齐属性：align(left、center、right)如：h1align=“center”标题居中/h179、文本标记的属性1）字体属性face如fontface=“需要的字体”云南城市建设职业学院/font2)设置字体大小属性：size如fontsize=“值”云南城市建设职业学院/font绝对值：1-7相对值：-4—4的整数，字体相对于3号放大和缩小字号注意：属性与属性之间用空格隔开3）字体的颜色属性:color如fontcolor=“颜色值”云南城市建设职业学院/font可以用英文单词或者二进制代码10、粗体标记：b与strong语法格式：b需要加粗的文字/bstrong需要加粗的文字/strong标记是可以嵌套的11、斜体的标记1)i、em、cite语法格式：i需要变为斜体的文字/iem需要变为斜体的文字/emcite需要变为斜体的文字/cite12、大字号和小字号标记）big和small语法格式big需要加大的文字＜／big＞ｓｍａｌｌ需要加大的文字＜／ｓｍａｌｌ＞加大：在原来定义的字体大小基础上加大一个级别；变小：在原来定义的字体大小基础上变小一个级别；１３、不自动换行的标记1)nobr语法格式：nobr不换行的文字/nobr14、水平线标记1）hr/水平线标记的属性：width（宽度）、color（颜色）、size（高度）、noshade（无阴影）、align（对齐）15、其他特殊标记1）空格： 2);<3);>五、[作业]制作一个公司简介页面（包含标题、文字、下划线、图片、橫线）8第三章使用图像教学内容一、［教学目的和要求］1、目的：1）掌握网页中图形图像的格式；2）掌握网页中图像插入的方法及图像的超链接；2、要求：1）掌握常用图像的格式2）掌握网页中插入图像的方法，及插入图像的标记二、［教学重点与难点］重点：网页中图像插入的方法及图像的超链接难点：超链接中图像的地址三、[教学方法与手段]讲授法、案例演示、讨论法、习题法四、[内容部分]1、常见的一些图像格式1）jpeg压缩图像格式,不支持透明，1670万像素，图像要求比较绚丽的时候使用；2）Gif（图形交换格式）支持透明，256色，支持动画（由多张位图连续播放形成）3）Png（firework）支持透明1670万像素，是网络可移植格式；2、如何在网页中插入图像img:单标记语法格式：imgsrc=“地址”Src：表示指定图像的位置（路径）绝对地址：具有详细的位置，即提供目标文档的完整主机名称、路径信息、及文档的全称；相对地址：从当前文档开始的地址1）如果当前文档和目标文档位置平行，则直接书写目