网页设计教案（最新）

《网页设计教案（最新）》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计教学教案2016-2017学年度第一学期指导老师：区钊庭、钟子荣课程名称：网页设计授课班级：15动漫新会机电中专计算机组36江门市新会机电职业技术学校教案课题：初识DreamweaverCS5科目：网页设计授课班级：课时数：2+4（实践）授课日期：第一周授课地点：授课教师：选取章节教学目标1、认知目标：掌握工作界面的操作。2、技能目标：掌握工作界面的操作。3、情感目标：引发学生学习动机，启发学生思维，养成主动探究问题的习惯。教学重点熟练掌握DreamweaverCS5工作界面的基本操作。教学难点在DreamweaverCS5中站点的建立及编辑。教学方法任务驱动法项目

2、式教学法教具多媒体教学用具教学过程讨论问题：1、DreamweaverCS5中的网页分为哪几种网页？2、在DreamweaverCS5中有哪几种方法可以创建站点？同时本地站点与远程站点有什么区别？内容大纲：具体可结合本项目的PPT课件进行配合讲解。1.1　操作界面1.1.1　【操作目的】1.1.2　【操作步骤】1.1.3　【相关工具】1．开始页面2．不同风格的界面3．伸缩自如的功能面板4．多文档的编辑界面5．插入面板6．更完整的CSS功能1.2　创建网站框架1.2.1　【操作目的】1.2.2　【操作步骤】1.2.3　【相关工具】36教学过程1.3　管理站点1.3.1　【操作

3、目的】1.3.2　【操作步骤】1.3.3　【相关工具】1．站点管理器2．创建文件夹3．定义新站点1.4　网页文件头设置1.4.1　【操作目的】1.4.2　【操作步骤】1.4.3　【相关工具】1．插入搜索关键字2．插入作者和版权信息3．设置刷新时间4．设置描述信息5．设置页面中所有链接的基准链接6．设置当前文件与其他文件的关联性小结：1、熟练掌握DreamweaverCS5界面的操作方法和技巧。2、熟练掌握在DreamweaverCS5中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。教学后记36江门市新会机电职业技术学校教案课题：文本与文档科目：网页设计授课

4、班级：课时数：2+4（实践）授课日期：第二周授课地点：授课教师：选取章节教学目标1、认知目标：了解文本与文档的创建方法和使用技巧。2、技能目标：掌握项目符号和编号列表使用方法和区别。3、情感目标：培养学生探索精神，提高他们的分析能力与实践能力。教学重点1、熟练掌握文本的多种创建方法和编辑技巧。2、熟练掌握项目符号、编号列表和水平线的使用方法。教学难点能够正确输入文本并编辑相关属性。教学方法任务驱动法　项目式教学法教具多媒体教学用具教学过程讨论问题：1、在DreamweaverCS5中可以有哪几种方法创建文本？2、在DreamweaverCS5中如何输入多个连续空格？3、在D

5、reamweaverCS5中如何更改文字颜色、字号等设置？内容大纲：具体可结合本项目的PPT课件进行配合讲解。2.1　果蔬网2.1.1　【案例分析】2.1.2　【设计理念】2.1.3　【操作步骤】1．设置页面属性2．输入空格和文字2.1.4　【相关工具】1．输入文本2．设置文本属性3．输入连续的空格4．设置是否显示不可见元素5．设置页边距6．设置网页的标题7．设置网页的默认格式2.1.5　【实战演练】——青山别墅网页36教学过程2.2　电器城网店2.2.1　【案例分析】2.2　电器城网店2.2.1　【案例分析】2.2.2　【设计理念】2.2.3　【操作步骤】1．添加字体2．

6、改变文字外观2.2.4　【相关工具】1．改变文本的大小2．改变文本的颜色3．改变文本的字体4．改变文本的对齐方式5．设置文本样式6．段落文本7．插入换行符8．设置项目符号或编号9．修改项目符号或编号10．设置文本缩进格式11．插入日期12．特殊字符2.2.5　【实战演练】——鲜花速递网页2.3　艺术摄影网页2.3.1　【案例分析】2.3.2　【设计理念】2.3.3　【操作步骤】2.3.4　【相关工具】1．水平线2．显示和隐藏网格3．标尺2.3.5　【实战演练】——数码科技前线网页2.4　综合演练——化妆品网页2.4.1　【案例分析】2.4.2　【设计理念】2.4.3　【知识

7、要点】2.5　综合演练——养生食品网页2.5.1　【案例分析】2.5.2　【设计理念】2.5.3　【知识要点】36教学过程小结：1.熟练掌握文本的使用方法和技巧。2.了解并掌握项目符号和编辑列表的使用方法和技巧。2.4.1　【案例分析】化妆品的主要受众群体是女性，所以本例要求化妆品网站要符合女性特点，在设计风格上要表现出化妆品的功能与效果，能吸引消费主体。2.4.2　【设计理念】在网页设计制作过程中，背景采用了紫色渐变使整个页面看起来典雅秀美。左侧蓝色的化妆品图片，在紫色的背景映衬下非常显眼，使产品信息更加突出，右