网页设计教案（最新）.doc

网页设计教学教案2016 - 2017 学年度第 一 学期指导老师： 区钊庭、钟子荣 课程名称： 网页设计 授课班级： 15动漫 新会机电中专计算机组江门市新会机电职业技术学校教案课题：初识Dreamweaver CS5科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第一周授课地点： 授课教师： 选取章节教学目标1、认知目标：掌握工作界面的操作。2、技能目标：掌握工作界面的操作。3、情感目标：引发学生学习动机，启发学生思维，养成主动探究问题的习惯。教学重点熟练掌握Dreamweaver CS5工作界面的基本操作。教学难点在Dreamweaver CS5中站点的建立及编辑。教学方法任务驱动法 项目式教学法教具多媒体教学用具教学过程讨论问题：1、Dreamweaver CS5中的网页分为哪几种网页？ 2、在Dreamweaver CS5中有哪几种方法可以创建站点？同时本地站点与远程站点有什么区别？内容大纲：具体可结合本项目的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【相关工具】教学过程1.3管理站点1.3.1【操作目的】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、熟练掌握Dreamweaver CS5界面的操作方法和技巧。2、熟练掌握在Dreamweaver CS5中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。教学后记江门市新会机电职业技术学校教案课题：文本与文档科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第二周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解文本与文档的创建方法和使用技巧。2、技能目标：掌握项目符号和编号列表使用方法和区别。3、情感目标：培养学生探索精神，提高他们的分析能力与实践能力。教学重点1、 熟练掌握文本的多种创建方法和编辑技巧。2、 熟练掌握项目符号、编号列表和水平线的使用方法。教学难点能够正确输入文本并编辑相关属性。教学方法任务驱动法项目式教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中可以有哪几种方法创建文本？ 2、在Dreamweaver CS5中如何输入多个连续空格？ 3、在Dreamweaver CS5中如何更改文字颜色、字号等设置？内容大纲：具体可结合本项目的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【实战演练】青山别墅网页教学过程2.2电器城网店2.2.1【案例分析】2.2电器城网店2.2.1【案例分析】2.2.2【设计理念】2.2.3【操作步骤】1添加字体2改变文字外观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【知识要点】2.5综合演练养生食品网页2.5.1【案例分析】2.5.2【设计理念】2.5.3【知识要点】教学过程小结：1.熟练掌握文本的使用方法和技巧。2.了解并掌握项目符号和编辑列表的使用方法和技巧。2.4.1【案例分析】化妆品的主要受众群体是女性，所以本例要求化妆品网站要符合女性特点，在设计风格上要表现出化妆品的功能与效果，能吸引消费主体。2.4.2【设计理念】在网页设计制作过程中，背景采用了紫色渐变使整个页面看起来典雅秀美。左侧蓝色的化妆品图片，在紫色的背景映衬下非常显眼，使产品信息更加突出，右侧的产品介绍简单明确，画面设计清爽整洁，下方的导航设计方便浏览者查找需要的产品。整体设计风格符合女性的审美和需求，优雅并且时尚。2.4.3【知识要点】使用“页面属性”命令设置页面的边距、网页标题效果；使用“属性”面板改变文字的大小；使用“加粗”按钮将文字加粗；使用“编辑字体列表”命令改变文字的字体；使用“颜色”按钮改变文字的颜色；使用“其他字符”命令插入特殊符号效果。教学后记江门市新会机电职业技术学校教案课题：图像和多媒体科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第三周授课地点： 授课教师： 选取章节教学目标1、认知目标：掌握插入图像的方法和技巧。2、技能目标：掌握多媒体在网页中的应用。3、情感目标：培养学生在网页设计中的美感。教学重点1、 熟练掌握图像的格式与模式。2、 熟练掌握Flash文件的插入与设置。教学难点能够正确使用图像和图像的属性设置、Flash文件的格式及设置属性。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中插入图像后在浏览器中不能正常显示图像，是哪几种原因造成？如何解决？ 2、在Dreamweaver CS5中如何设置插入的Flash动画为透明背景？内容大纲：具体可结合本项目的PPT课件进行配合讲解。3.1建筑工程网页3.1.1【案例分析】3.1.2【设计理念】3.1.3【操作步骤】3.1.4【相关工具】1网页中的图像格式2插入图像3设置图像属性4插入图像占位符5跟踪图像3.1.5【实战演练】儿童相册网页3.2野生动物园网页3.2.1【案例分析】3.2.2【设计理念】3.2.3【操作步骤】教学过程3.2.4【相关工具】调整图像与文本的相对位置3.2.5【实战演练】数码相机网页3.3女性化妆品网页3.3.1【案例分析】3.3.2【设计理念】3.3.3【操作步骤】3.3.4【相关工具】1插入Flash动画2插入FLV3插入Shockwave影片4影片插入Applet程序5插入ActiveX控件3.3.5【实战演练】五谷杂粮网页3.4综合演练酒店订购网页3.4.1【案例分析】3.4.2【设计理念】3.4.3【知识要点】3.5综合演练数码世界网页3.5.1【案例分析】3.5.2【设计理念】3.5.3【知识要点】小结：1.熟练掌握图像的格式与插入方法和使用技巧。2.掌握Flash动画的插入和属性的设置。3.4.1【案例分析】面对现在快速便捷的生活节奏，网上的酒店预订符合现代人的生活需求，所以网页设计要求突出对酒店的介绍，体现出该酒店的优势和特色。3.4.2【设计理念】在网页设计制作过程中，使用温馨舒适的酒店照片作为网页的背景，能瞬间抓住人们的视线，达到宣传的目的；明快鲜亮的色彩搭配在网页设计上十分突出，增强了网页的视觉效果和观赏性，突出舒适这一主题，下方房间的介绍直观明了，方便消费者选择。教学过程3.4.3【知识要点】使用“SWF”按钮为网页文档插入Flash动画效果；使用“播放”按钮在文档窗口中预览效果。教学后记江门市新会机电职业技术学校教案课题：超链接科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第四周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解超链接的概念与路径知识。2、技能目标：掌握文本超链接的创建方法和技巧。3、情感目标：提高同学们在网页设计中的感知能力和成就感。教学重点1、 简单了解超链接的概念与路径知识。2、 熟练掌握超链接的分类及每种类型的创建方法。教学难点能够正确给所需文本添加超链接，以及锚记超链接的使用方法和技巧。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中超链接有哪几种类型？分别是哪几种？ 2、在Dreamweaver CS5中使用哪种超链接可以跳至指定的位置？内容大纲：具体可结合本项目的PPT课件进行配合讲解。4.1实木地板网页4.1.1【案例分析】4.1.2【设计理念】4.1.3【操作步骤】1制作电子邮件超接2制作下载文件链接4.1.4【相关工具】1超链接的概念与路径知识2创建文本链接3文本链接的状态4下载文件链接5电子邮件链接4.1.5【实战演练】摩托车改装网页4.2口腔护理网页4.2.1【案例分析】4.2.2【设计理念】4.2.3【操作步骤】教学过程1制作鼠标经过2创建热点链接4.2.4【相关工具】1图像超链接2鼠标经过图像链接3命名锚记链接4创建热区链接4.2.5【实战演练】花卉百科网页4.3综合演练茶文化网页4.3.1【案例分析】4.3.2【设计理念】4.3.3【知识要点】4.4综合演练绿色食品网页4.4.1【案例分析】4.4.2【设计理念】4.4.3【知识要点】小结：1.熟练掌握超链接的概念与路径。2.熟练掌握超链接的类型与创建方法的技巧。4.3.1【案例分析】茶文化包括茶叶品评技法、艺术操作手段的鉴赏、品茗美好环境的领略等整个品茶过程的美好意境。其过程体现形式和精神的相互统一，是饮茶活动过程中形成的文化现象。它起源久远，历史悠久，文化底蕴深厚，网页设计要求突出茶文化的文化底蕴，以及它的美好意境。4.3.2【设计理念】在网页设计、制作过程中，淡雅朴素的色彩给人悠闲舒适的印象；素雅古朴的茶具和新鲜的茶叶搭配清新自然之感油然而生，具有民族特色和中国文化的特点，配上关于茶的诗词，更加提升了画面的中国文化气息；整体风格符合茶文化的特色，画面搭配舒适和谐。4.3.3【知识要点】使用输入链接地址制作外部链接效果；使用“电子邮件链接”命令制作电子邮件链接效果；使用“链接”按钮为文字添加下载链接效果。教学过程4.4.1【案例分析】由于生活水平的提升居民对食物的要求提升，对绿色食品相当追求，绿色食品在中国是对具有无污染的安全、优质、营养类食品的总称，是无污染、无公害、安全、优质、营养型的食品。网页设计要求突出绿色食品健康无污染等特色。4.4.2【设计理念】在网页设计、制作过程中，网页背景采用纯白色，起到衬托的效果；导航设计的栏中绿色的运用给人健康、自然的印象；色彩丰富的蔬菜在体现新鲜感的同时，丰富了画面颜色；网页分类明确，方便浏览，整体风格设计直观明了，画面丰富自然，使浏览者观看起来赏心悦目。4.4.3【知识要点】使用“热点”工具制作链接效果。教学后记江门市新会机电职业技术学校教案课题：使用表格科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第五周授课地点： 授课教师：选取章节教学目标1、认知目标：了解表格的简单操作。2、技能目标：掌握利用表格进行页面布局的方法和技巧。3、情感目标：提高同学们在网页设计中的自由度和成就感。教学重点1、 简单了解表格在制作网页中的作用。2、 熟练掌握表格的插入与属性的设置。教学难点能够正确使用表格的嵌套制作复杂的网页页面。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中如何向表格一次添加多行或多列？方法分别是？ 2、在Dreamweaver CS5中标签可否添加背景图像？内容大纲：具体可结合本项目的PPT课件进行配合讲解。5.1布艺沙发网页5.1.1【案例分析】5.1.2【设计理念】5.1.3【操作步骤】5.1.4【相关工具】1表格的组成2插入表格3表格各元素的属性4在表格中插入内容5选择表格元素6复制、粘贴表格7缩放表格8删除表格和表格内容9合并和拆分单元格10增加和删除表格的行和列5.1.5【实战演练】租车网页5.2健康美食网页5.2.1【案例分析】教学过程5.2.2【设计理念】5.2.3【操作步骤】1导入表格式数据5.2.4【相关工具】1导入和导出表格的数据2排序表格3复杂表格的排版5.2.5【实战演练】设计家园网页5.3综合演练流行音乐网页5.3.1【案例分析】流行音乐风格多样，形态丰富，所以流行音乐网站要突出流行、时尚等元素，符合年轻人的特点和需求，网页设计要求突出视觉上的效果，迎合年轻人的喜好和风格。5.3.2【设计理念】在网页设计、制作过程中，网页背景采用深蓝色，在给人沉稳感的同时，增强了画面的神秘的气息；人物的剪影以及炫酷的效果在画面的中心更加突出，与背景形成对比，展现出动静结合的画面；下方歌曲的目录介绍直观清晰便于人们浏览；整体风格时尚丰富，符合年轻人的特点。5.3.3【知识要点】使用“导入表格式数据”命令导入外部表格数据；使用“属性”面板改变表格的宽度、单元格的高度和表格的对齐方式；使用“CSS样式”命令调整文字的颜色、字体和大小。5.4综合演练建筑信息资讯网页5.4.1【案例分析】建筑信息网提供建筑行业资讯、工程信息、项目管理、建筑百科、合同大全、教学过程专家观点、房地产业、建筑论文、机械设备、建筑考试、家装宝典等建筑咨询，网页设计要求符合建筑行业的特色。5.4.2【设计理念】在网页设计、制作过程中，浅灰色的背景给人整洁的印象；向外飞散的蓝色块使画面形成动静结合的画面，引发人们的好奇，突出宣传的主题；设计图纸的使用使网页更具专业性；整体画面丰富整齐、给人信赖感。5.4.3【知识要点】使用“页面属性”命令设置页面的边距和标题；使用“表格”按钮插入表格；使用“图像”按钮插入图像。小结：1、熟练掌握表格的插入及表格属性的设置方法和技巧。2、熟练掌握表格嵌套布局。教学后记江门市新会机电职业技术学校教案课题：使用框架科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第六周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解框架与框架集的作用。2、技能目标：掌握框架的属性设置方法和技巧。3、情感目标：灵活的使用网页制作的办法，提高工作效率。教学重点1、 简单了解框架的作用。2、 熟练掌握框架布局的应用。教学难点能够正确使用框架布局制作部分跳转页面。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中框架分为哪几种类型？每种类型用在哪些方面？ 2、在Dreamweaver CS5中修改其中一个框架页时其他框架页是否有影响？内容大纲：具体可结合本项目的PPT课件进行配合讲解。6.1超齐运动网页6.1.1【案例分析】6.1.2【设计理念】6.1.3【操作步骤】1新建框架并编辑2插入图像6.1.4【相关工具】1建立框架集2为框架添加内容3保存框架4框架的选择5修改框架的大小6拆分框架7删除框架6.1.5【实战演练】运动休闲网页6.2美发网页6.2.1【案例分析】教学过程6.2.2【设计理念】6.2.3【操作步骤】1设置保存文档2插入表格与图像3创建图像超链接6.2.4【相关工具】1框架属性2框架集的属性3框架中的链接6.2.5【实战演练】干果批发网页6.3综合演练时尚灯具网页6.3.1【案例分析】随着现代生活水平的不断提高，灯具除具有照明功能外，还展现出丰富多样的款式和不同的功能。本例是为某公司设计制止的时尚灯具网页，在设计上要求合理的进行配色和编排，展现出时尚、简约的特点。6.3.2【设计理念】在网页设计、制作过程中，银灰色的背景展现出低调的华丽感和时尚的品质感；清晰明快的编排方式给人简约、大气的印象，与网页的主题相呼应；整体设计简洁直观，让人一目了然，宣传性强。6.3.2【知识要点】使用“新建”命令创建框架网页；使用“保存全部”命令将框架全部保存；使用“图像”按钮制作完整的框架网页效果。6.4综合演练海洋馆网页6.4.1【案例分析】海洋馆包含了众多海洋生物，是观光旅游的好地方，适合家庭旅游，能带给大家欢乐。网页设计要求体现海洋生物的魅力，体现编排的合理性。6.4.2【设计理念】在网页设计、制作过程中，网页设计的主要图形是一个不规则形状的海底照片，俏皮可爱；波光粼粼的海底世界以及成群的鱼，增强了画面的丰富感和美感，充分展示出了海洋的魅力；白色文字搭配恰到好处；整个画面简单精致，富有美感。教学过程6.4.3【知识要点】使用“链接”选项，设置链接效果。小结：1.熟练掌握框架的插入方法和技巧。2.熟练掌握框架页之间的超链接。教学后记江门市新会机电职业技术学校教案课题：使用层科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第七周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解掌握层的基本操作方法和技巧。2、技能目标：掌握应用层设计表格的方法和技巧。3、情感目标：灵活的使用网页制作的办法，提高工作效率。教学重点1、 掌握层的插入方法和应用技巧。2、熟练层的属性设置。教学难点能够正确使用层命令来布局元素的位置。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中层的作用是？ 2、在Dreamweaver CS5中有哪几种方法调整层的顺序？内容大纲：具体可结合本项目的PPT课件进行配合讲解。7.1时尚前沿网页7.1.1【案例分析】7.1.2【设计理念】7.1.3【操作步骤】7.1.4【相关工具】1创建层2选择层3设置层的默认属性4AP元素面板5更改层的堆叠顺序6更改层的可见性7调整层的大小8嵌套层9移动层10对齐层11层靠齐到网格7.1.5【实战演练】手机导航网页教学过程7.2化妆品公司网页7.2.1【案例分析】7.2.2【设计理念】7.2.3【操作步骤】7.2.4【相关工具】1将AP Div转换为表格2将表格转换为AP Div7.2.5【实战演练】有机蔬菜网页7.3综合演练我的音乐世界7.3.1【案例分析】我的音乐世界网站，拥有庞大、完整的曲库，还有MV在线视听，歌曲更新迅速，试听流畅等，设计网页时要注意音乐的特色，要能表现出音乐的魅力。7.3.2【设计理念】在网页设计、制作过程中，粉色的背景绚丽明亮，与狂欢的人物剪影以及星光点点的装饰形成对比，起到丰富画面效果的作用，形象明快的标志设计，让人一目了然，达到宣传的目的；整个网页设计集时尚、浪漫、现代为一体，并且体现出音乐的动感和欢乐。7.3.3【知识要点】使用“绘制AP Div”按钮绘制层；使用“属性”面板设置文字的大小及颜色；使用“移动层”命令调整层的位置制作阴影效果。7.4综合演练天使卡通网页7.4.1【案例分析】卡通也就是漫画，不光是儿童，许多成人也对其喜爱有加，因此卡通的影响力非常大，具有非常广阔的市场。天使卡通网站主要针对儿童，所以要求网页设计迎合儿童的喜好。7.4.2【设计理念】在网页设计、制作过程中，蓝绿色的背景色给人沉稳大气的感觉，起到衬托的效果，突出了画面中的主要形象；下方的分栏采用手绘单线卡通的形式，即可爱又具有特色，与整个网页设计相呼应；可爱的形象、丰富多变的图形、亮丽的用色都符合网页设计的主题，能吸引儿童的注意力。教学过程7.4.3【知识要点】使用“绘制AP Div”按钮绘制层；使用“图像”按钮插入图像。小结：1.熟练层的插入方法及属性设置。2.熟练掌握层转为表格的方法和技巧。教学后记江门市新会机电职业技术学校教案课题：CSS样式科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第八周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解CSS样式2、技能目标：掌握CSS样式的类型与创建方法。3、情感目标：灵活的使用网页制作的办法，提高工作效率。教学重点1、掌握如何应用CSS样式控制标签。2、熟练掌握CSS的属性设置。教学难点能够正确使用不同类型的样式控制标签。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中CSS样式分为哪几种类型？每种类型的具体作用？ 2、在Dreamweaver CS5中使用CSS样式定位时需注意什么事项？内容大纲：具体可结合本项目的PPT课件进行配合讲解。8.1跑酷网页8.1.1【案例分析】8.1.2【设计理念】8.1.3【操作步骤】8.1.4【相关工具】1CSS样式的概念2“CSS样式”面板3CSS样式的类型4创建重定义HTML标签样式5创建CSS选择器6创建和应用自定义样式7创建和引用外部样式8编辑样式8.1.5【实战演练】新车上市资讯网页8.2山地车网页8.2.1【案例分析】教学过程8.2.2【设计理念】8.2.3【操作步骤】1插入表格并输入文字2设置CSS属性8.2.4【相关工具】1类型2背景3区块4方框5边框6列表7定位8扩展8.2.5【实战演练】科技公司网页8.3足球在线网页8.3.1【案例分析】8.3.2【设计理念】8.3.3【操作步骤】1插入图片8.3.4【相关工具】1可应用过滤的HTML标签2CSS的静态过滤器3CSS的动态过滤器8.3.5【实战演练】办公用品网页8.4综合演练照片美化网页8.4.1【案例分析】随着生活水平的提高，人们对照片美化的要求也随之提高。照片美化是将图片进行一定的处理、修调，从而达到需要的效果。本例将制作照片美化的网页，要求体现出照片美化的技术和功能。8.4.2【设计理念】在网页设计、制作过程中，背景采用非常亮眼的天蓝色，营造出宁静清新的氛围，给人轻松和自在的感觉；将照片作为网页设计的主体，醒目直观的展示出网页的宣传主题，让人心旷神怡，与背景颜色相呼应；简洁直观的设计让人一目了然，易于查看浏览。8.4.3【知识要点】使用“Blur”滤镜制作照片模糊效果。教学过程8.5综合演练抒情散文网页8.5.1【案例分析】抒情散文以抒发主观情感为出发点，以空灵飘逸见长，着力点在于准确表达感情色彩的语言运用上。本例将制作抒情散文网页，在设计上希望体现出作者清新、自然、悠闲的心境。8.5.2【设计理念】在网页设计、制作过程中，采用绿色的背景，淡雅优美的画面处理，营造出自然、闲适的氛围，给人清新、悠闲的感觉，符合抒情散文的特色；艺术化处理的文字和虚幻的花朵图案，增添了画面的美感，与宣传的主题相呼应；整个设计简洁直观，没有多余的修饰，让浏览者一目了然。8.5.3【知识要点】使用“Blur”滤镜制作图像的渐变效果；使用“Alpha”滤镜把图像设定为透明效果。小结：1.熟练掌握CSS样式的概念。2.熟练掌握CSS样式的分类及使用方法和技巧。教学后记江门市新会机电职业技术学校教案课题：模板和库科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第九周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解“资源”控制面板。2、技能目标：掌握模板和库的创建方法和使用技巧。3、情感目标：灵活的使用网页制作的办法，提高工作效率。教学重点1、掌握模板的使用方法。2、熟练库面板的应用。教学难点能够正确应用模板的所有属性。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中有几种方法创建模板？分别是？ 2、在Dreamweaver CS5中库面板的具体作用是？内容大纲：具体可结合本项目的PPT课件进行配合讲解。9.1美极养生网页9.1.1【案例分析】9.1.2【设计理念】9.1.3【操作步骤】1创建模板2创建可编辑区域9.1.4【相关工具】1“资源”面板2创建模板3定义和取消可编辑区域4创建基于模板的网页5管理模板9.1.5【实战演练】房产资讯网页9.2老年生活频道9.2.1【案例分析】9.2.2【设计理念】9.2.3【操作步骤】教学过程1把经常用的图标注册到库中2利用库中注册的项目制作网页文档3修改库中注册的项目9.2.4【相关工具】1创建库文件2向页面添加库项目3更新库文件9.2.5【实战演练】热点话题跟踪9.3综合演练美女购物网页9.3.1【案例分析】购物网站就是提供网络购物的站点，足不出户即可购买到你所喜欢的商品，符合现代人的生活方式，便捷的购物模式受到了人们的欢迎。美女购物网站的主要受众群体是女性，所以网页设计要求搭配合理，能吸引女性消费者。9.3.2【设计理念】在网页设计、制作过程上，采用十分女性化的紫色渐变作为网站的背景，让人感觉十足的女人味，能吸引女士的注意；配上可爱亮丽的卡通少女展现出青春时尚的气息，给人活泼可爱的印象；个性化的导航设计与宣传的主题相呼应，突显出网页独特的特点。9.3.3【知识要点】使用“另存模板”命令将页面存为模板；使用“可编辑区域”按钮添加可编辑区。9.4综合演练婚礼策划网页9.4.1【案例分析】婚礼策划，是指为客人量身打造婚礼而进行的策划，涵盖各种婚礼形式和各种婚礼形式的组合体。所以网页设计上要求时尚大气，营造出浪漫温馨的氛围。9.4.2【设计理念】在网页设计、制作过程上，背景采用淡雅柔和的淡黄色作为主体，营造出浪漫温馨的氛围；婚礼上浪漫的玫瑰和新娘照片突出了网页的主题和特色；字体的渐变效果增强了画面的质感，凸现出时尚大气的感觉；明确清晰的网页版式，让人一目了然。9.4.3【知识要点】教学过程使用“库”面板添加库项目；使用库中注册的项目制作网页文档。小结：1.熟练掌握模板的创建、编辑、应用。2.熟练掌握库面板的应用。教学后记江门市新会机电职业技术学校教案课题：表单与行为科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第十周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解表单工具的使用2、技能目标：掌握表单的使用方法和技巧。3、情感目标：增加人与人，人与电脑之间的沟通，有利于事情的更好发展。教学重点1、掌握如何创建表单 2、熟练掌握行为面板的使用方法。教学难点能够正确使用不同类型的表单制作网页。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中表单分为哪几种类型？如果想制作上传照片的效果应该应用哪种表单属性？ 2、在Dreamweaver CS5中表单是否可以用CSS样式控制？内容大纲：具体可结合本项目的PPT课件进行配合讲解。10.1留言板网页10.1.1【案例分析】10.1.2【设计理念】10.1.3【操作步骤】1插入文本字段和文本区域2插入单选按钮3插入复选框10.1.4【相关工具】1创建表单2表单的属性3单行文本域4隐藏域5单选按钮6单选按钮组7复选框8创建列表和菜单9创建跳转菜单教学过程10创建文件域11创建图像域12提交、无、重置按钮10.1.5【实战演练】用户注册页面10.2海上运动杂志订阅10.2.1【案例分析】10.2.2【设计理念】10.2.3【操作步骤】1添加页面晃动效果2添加状态栏文本10.2.4【相关工具】1“行为”面板2应用行为3调用JavaScript4打开浏览器窗口5转到URL6检查插件7检查表单8交换图像9设置容器的文本10设置状态栏文本11设置文本域文字12设置框架文本10.2.5【实战演练】摄影作品网页10.3综合演练娱乐小屋游戏网页10.3.1【案例分析】娱乐小屋游戏网页包含了各种简单的益智小游戏，提供给玩家欢乐的网上休闲时光，是玩家放松休闲的最佳选择。网页设计要求带给浏览者轻松娱乐的氛围。10.3.2【设计理念】在网页设计、制作过程中，背景采用蓝色渐变和线条形成不断扩展的空间；使用发光喷溅的水花，形成视觉中心，突出宣传主体；上方的游戏名称和下方的图片相互映衬，给人可爱丰富、轻松欢快的印象；整体设计简洁清晰，让人一目了然，增强了游戏的吸引力。10.3.3【知识要点】使用“弹出信息”命令制作弹出信息界面效果。教学过程10.4综合演练会员登录界面10.4.1【案例分析】会员登录界面是需要提供账号密码验证的界面，有控制用户权限、记录用户行为，保护操作安全的作用。网页设计要求简单直观，使会员快速方便的进行操作。10.4.2【设计理念】在网页设计、制作过程中，浅淡的背景将彩色的导航栏和网页名称突显出来，给人清晰明快的印象，让人一目了然，宣传性强；中心的会员登录界面醒目直观，使用户操作方便快捷；整体设计简洁大气，便捷适用。10.4.3【知识要点】使用“文本字段”按钮插入文本区域和密码域；使用“属性”面板设置文本域的属性。小结：1.熟练掌握表单的类型及应用。2.熟练掌握行为面板。教学后记江门市新会机电职业技术学校教案课题：网页代码科目： 网页设计授课班级： 课时数： 2+4（实践）授课日期： 第十一周授课地点： 授课教师： 选取章节教学目标1、认知目标：了解网页代码。2、技能目标：掌握如何编辑代码。3、情感目标：化繁为简，降低学习的难度，提高同学们学习的兴趣。教学重点1、熟练掌握HTML标签。2、熟练掌握脚本语言。教学难点能够正确的编写代码。教学方法任务驱动法 项目教学法教具多媒体教学用具教学过程讨论问题：1、在Dreamweaver CS5中有哪几种方法可以添加所需的标签？ 2、在Dreamweaver CS5中如何快速选中所需的标签？内容大纲：具体可结合本项目的PPT课件进行配合讲解。11.1音乐世界网页11.1.1【案例分析】11.1.2【设计理念】11.1.3【操作步骤】11.1.4【相关工具】1使用“参考”面板2代码提示功能3使用标签库插入标签4使用标签选择器插入标签5使用标签检查器编辑代码6使用标签编辑器编辑代码11.1.5【实战演练】卡动漫游记网页11.