1、黄冈职业技术学院计科系:孙小英第第2 2单元：茶文化网站的设计单元：茶文化网站的设计任务任务4 4：二级页面的设计：二级页面的设计目目 录录一、教学目标一、教学目标四、考核与反馈四、考核与反馈二、教学内容二、教学内容五、学法指导五、学法指导三、教学设计三、教学设计一、教学目标一、教学目标-课程描述课程描述 网页设计与制作网页设计与制作这门课程是我院计算机网络技术专业的一门专业这门课程是我院计算机网络技术专业的一门专业核心课程核心课程 。 本课程的先修课程是本课程的先修课程是网页美工网页美工，与其后续课程，与其后续课程动态网页设计动态网页设计、 DIV+CSSDIV+CSS 相结合，形成满足职业
2、岗位实际工作需要的课程体系。相结合，形成满足职业岗位实际工作需要的课程体系。 一、教学目标一、教学目标-课程目标课程目标知识目标知识目标掌握网站规划、网站测试发布、维护管理方法掌握网站规划、网站测试发布、维护管理方法；掌握文字、图像的处理方法；掌握表格的布；掌握文字、图像的处理方法；掌握表格的布局方法；掌握模板、框架的使用方法；掌握局方法；掌握模板、框架的使用方法；掌握CSSCSS的运用。的运用。职业能力目标职业能力目标具备初步的网站开发、维护和管理能力；具备具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等科技文件的基本能力独立撰写网站制作说明等科技文件的基本能力具备信息收集、处
3、理、加工的能力；具备静态具备信息收集、处理、加工的能力；具备静态网页设计的基本能力，能独立设计一个内容完网页设计的基本能力，能独立设计一个内容完整、图文并茂、技术运用得当的网站；整、图文并茂、技术运用得当的网站；职业素质目标职业素质目标培养学生按时守信的诚实作风；乐观向上的敬培养学生按时守信的诚实作风；乐观向上的敬业精神；沟通协作的团队意识；知识获取和应业精神；沟通协作的团队意识；知识获取和应用的自主学习能力；探索实践的创新能力。用的自主学习能力；探索实践的创新能力。一、教学目标一、教学目标-本次课的教学目标本次课的教学目标本次教学目标本次教学目标知识目标：知识目标：u掌握模板的创建与保存方法
4、；掌握模板的创建与保存方法；u掌握模板中可编辑区域的设置；掌握模板中可编辑区域的设置；u掌握模板在网页中的应用；掌握模板在网页中的应用；能力目标：能力目标：u能熟练运用模板完成多个具有相同或相似布能熟练运用模板完成多个具有相同或相似布局的页面的设计局的页面的设计 素质目标：素质目标：u培养学生沟通协作的团队意识；知识获取和培养学生沟通协作的团队意识；知识获取和应用的自主学习能力；探索实践的创新能力。应用的自主学习能力；探索实践的创新能力。二、教学内容二、教学内容-教学内容的选取依据教学内容的选取依据 本课程教学的侧重点就在于页本课程教学的侧重点就在于页面的布局设计，在网页的设计中，面的布局设计
5、，在网页的设计中，最重要同时也是最难、最费时间的最重要同时也是最难、最费时间的就是各页面的版式布局设计。就是各页面的版式布局设计。1、依据教学目标的要求2：依据网站设计风格的一致性要求3：依据网站的更新要求 在网页设计中还有一个重要的设计在网页设计中还有一个重要的设计原则：网站应保持设计风格的一致性。原则：网站应保持设计风格的一致性。而网站风格的一致性除了对文字格式、而网站风格的一致性除了对文字格式、配色方案的要求外，还体现在页面布局配色方案的要求外，还体现在页面布局风格的一致性要求上。在一个网站中，风格的一致性要求上。在一个网站中，除了首页独立采用一种布局方案外，一除了首页独立采用一种布局方
6、案外，一般要求所有的二级页页采用相同或相近般要求所有的二级页页采用相同或相近的布局，对所有的三级页面的设计要求的布局，对所有的三级页面的设计要求也是如此也是如此。 利用模板设计多个布局相同或相近利用模板设计多个布局相同或相近的页面的共享结构，既可以节省设计时的页面的共享结构，既可以节省设计时间，又可以保持页面布局风格的一致性间，又可以保持页面布局风格的一致性，同时也利于页面的更新操作。，同时也利于页面的更新操作。二、教学内容二、教学内容-教学内容的载体教学内容的载体1 1、教学任务：完成、教学任务：完成“凤凰旅游网凤凰旅游网”二级页面的设计（学生分组完成）二级页面的设计（学生分组完成）二、教学
7、内容二、教学内容-教学内容的载体教学内容的载体2 2、训练任务：完成、训练任务：完成“凤凰旅游网凤凰旅游网”二级页面的设计（学生独立完成）二级页面的设计（学生独立完成）二、教学内容二、教学内容-教学重点、难点教学重点、难点教学重点教学重点教学难点教学难点模板的创建、保存与应用模板的创建、保存与应用模板的保存位置；模板中可模板的保存位置；模板中可编辑区域的定义与修改；编辑区域的定义与修改；三、教学设计三、教学设计-时间安排时间安排复习旧课复习旧课任务布置任务布置及分析及分析讲练结合讲练结合扩展任务训练扩展任务训练与评价与评价项目项目时间时间5分钟分钟15分钟分钟70分钟分钟90分钟分钟90分钟分
8、钟三、教学设计三、教学设计-教学准备工作教学准备工作分组情况按第一次上课时分组情况按第一次上课时时确定的方案执行时确定的方案执行上课之前将相关资料、上课之前将相关资料、素材分发给学生。素材分发给学生。素材准备素材准备确定分组确定分组教学组织流程教学组织流程一、一、复习旧课并复习旧课并引入新课引入新课二二. 分析任务分析任务三三. 提出解决提出解决方案方案四、学生实施任四、学生实施任务、老师指导务、老师指导三、教学设计三、教学设计-教学步骤教学步骤六、学生继续六、学生继续实施任务实施任务五、疑难问题五、疑难问题讲解讲解七、归纳总结七、归纳总结八、完成训练八、完成训练任务及评价任务及评价1 1、复
9、习旧课、复习旧课布局表格的特点布局表格的特点标准表格与布局表格的区别标准表格与布局表格的区别如何根据页面的版式设计需求合理选择相应表格如何根据页面的版式设计需求合理选择相应表格三、教学设计三、教学设计-具体过程具体过程2 2、布置本次设计任务、布置本次设计任务 打开茶文化网站各二级页面，展示网页效果，确定本次任务目打开茶文化网站各二级页面，展示网页效果，确定本次任务目标。标。3、任务分析、任务分析（）各子页面在布局上存在的共同点：（）各子页面在布局上存在的共同点： 三、教学设计三、教学设计-具体过程具体过程各子页在布局上基本是相同或相近的各子页在布局上基本是相同或相近的（2 2）利用已学知识实
10、现布局结构相同的网页的设计方法）利用已学知识实现布局结构相同的网页的设计方法方法方法1 1：每个页面单独进行设计每个页面单独进行设计方法方法2 2：设计好一个页面后，在已经设计好的页面上直设计好一个页面后，在已经设计好的页面上直接进行修改，再通过接进行修改，再通过“另存为另存为”保存为其它网页保存为其它网页思考：以上设计方法有何缺点？思考：以上设计方法有何缺点？（通过此问题引入模板这一应用。）（通过此问题引入模板这一应用。）4、提出解决方案、提出解决方案 如果将所有子页面相同的格式设为模板，再通过模板建立不同的网页，如果将所有子页面相同的格式设为模板，再通过模板建立不同的网页，即可解决上述问题
11、即可解决上述问题解决方案一：解决方案一：、先设计一个子页面（如、先设计一个子页面（如about.html) about.html) 2 2、通过、通过“文件文件”“另存为模板另存为模板”，将已设计好的页面存为模板，将已设计好的页面存为模板3 3、创建其它各个子页面并将模板应用于其中、创建其它各个子页面并将模板应用于其中解决方案二：解决方案二：、先创建一个模板，在该模板中设计所有子页面相同或相近的布局格式、先创建一个模板，在该模板中设计所有子页面相同或相近的布局格式2 2、保存模板、保存模板3 3、通过模板创建各个子页面、通过模板创建各个子页面三、教学设计三、教学设计-具体过程具体过程5、学生开
12、始实施任务、老师指导、学生开始实施任务、老师指导 对设计方案作简单的说明后，要求学生按上课前所发的资料中提供对设计方案作简单的说明后，要求学生按上课前所发的资料中提供的详细设计方案开始实施任务。在这一过程中，老师积极参与指导并记录的详细设计方案开始实施任务。在这一过程中，老师积极参与指导并记录下学生在任务实施过程中存在的问题。下学生在任务实施过程中存在的问题。（由于在前一次课中已利用表格完（由于在前一次课中已利用表格完成了其中一个子页面的设计，所以对于此次设计任务要求学生用第一种方成了其中一个子页面的设计，所以对于此次设计任务要求学生用第一种方案去实施。案去实施。）三、教学设计三、教学设计-具
13、体过程具体过程6、疑难问题分析与讲解、疑难问题分析与讲解 针对学生在任务实施过程中出现的问题进行详细的分析与讲解。针对学生在任务实施过程中出现的问题进行详细的分析与讲解。7、学生继续完成任务、学生继续完成任务 7 7、归纳总结、归纳总结三、教学设计三、教学设计-具体过程具体过程 对学生完成任务的情况进行点评，对学生完成任务的情况进行点评，并针对典型问题进行讲解。最后对模板并针对典型问题进行讲解。最后对模板的设计知识进行归结总结。的设计知识进行归结总结。8 8、训练任务、训练任务要求学生按要求学生按第二种方案第二种方案完成完成“凤凰旅游网凤凰旅游网”所有二级页面的设所有二级页面的设计计三、教学设
14、计三、教学设计-具体过程具体过程9 9、训练任务质量评价、训练任务质量评价通过训练任务既通过训练任务既考核考核学生对于模板应用学生对于模板应用的掌握程度，又的掌握程度，又加强加强学生对表格布局的学生对表格布局的运用。运用。扩展功扩展功能能:重复区域的使用四、考核反馈四、考核反馈-考核方式考核方式模板的创建与运用模板的创建与运用页面布局的整体方案及效果页面布局的整体方案及效果站点配置的合理性站点配置的合理性考核内容考核内容:图片文件是否单独存放于图片文件是否单独存放于images文件文件夹中；图片及网页的文件名是否使用合理的名称夹中；图片及网页的文件名是否使用合理的名称分值比例分值比例:10%考
15、核内容考核内容:模板的创建与运用模板的创建与运用分值比例分值比例:60%考核内容核内容:布局方案的合理性；布局效果的美观性布局方案的合理性；布局效果的美观性分值比例分值比例:30%针对学生对于扩展针对学生对于扩展任务的完成质量进任务的完成质量进行评价行评价评价方式：采用学评价方式：采用学生自评与教师评价生自评与教师评价相结合的方法相结合的方法四、考核反馈四、考核反馈-教学反馈教学反馈反馈反馈课堂反馈课堂反馈p教师提问教师提问p学生提问学生提问p学生完成任务质量学生完成任务质量课后反馈课后反馈pQQQQ群群p电子邮箱电子邮箱五、学法指导五、学法指导多看多看1多问多问2多思考多思考3勤练习勤练习4
16、平时多看一些优秀的网站平时多看一些优秀的网站，学习他人之长，学习他人之长 遇到不懂的问题要及时地遇到不懂的问题要及时地向老师或同学请教向老师或同学请教 对于教学中的设计任务或对于教学中的设计任务或课后浏览到的优秀网页，课后浏览到的优秀网页，要多思考、分析要多思考、分析 在课内、课外一定要多动在课内、课外一定要多动手手 根据课程的特点对学生实施行根据课程的特点对学生实施行之有效的学习指导方法之有效的学习指导方法六、资源设计六、资源设计p电子课件：主要包括知识点、设计的详细步骤及注电子课件：主要包括知识点、设计的详细步骤及注意事项。意事项。p训练素材训练素材p学习参考网站（精品课程网站）学习参考网站（精品课程网站）http:/
