CSS教学教案-网页设计

《DreamweaverCS4网页设计案例教程》配套教学教案第1讲课时内容初识DreamweaverCS4授课时间90分钟课时2教学目标掌握工作界面的操作。掌握网站框架的创建。掌握站点的管理。掌握网页文件头的设置。教学重点熟练掌握DreamweaverCS4工作界面的基本操作。熟练掌握DreamweaverCS4的站点。教学难点在DreamweaverCS4中站点的建立及编辑。教学设计1、教学思路：（1）通过对课堂实训案例的讲解掌握界面操作和站点设置的方法；（2）通过软件相关功能的解析学习DreamweaverCS4工作界面的基本操作和设置文件头的基本方法。2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能解析深入学习软件功能和制作特点。3、教学资料及要求：除了课堂实训案例中讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。教学内容讨论问题：1、DreamweaverCS4中的网页分为哪几种网页？2、在DreamweaverCS4中有哪几种方法可以创建站点？同时本地站点与远程站点有什么区别？内容大纲：具体可结合本项目的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、熟练掌握DreamweaverCS4界面的操作方法和技巧。2、熟练掌握在DreamweaverCS4中站点的创建、编辑、复制、删除和导出的方法，掌握新建、保存的技巧。第2讲课时内容文本与文档授课时间180分钟课时4教学目标了解文本与文档的创建方法和使用技巧。掌握项目符号和编号列表使用方法和区别。掌握水平线、网格与标尺的使用方法和技巧。教学重点熟练掌握文本的多种创建方法和编辑技巧。熟练掌握项目符号、编号列表和水平线的使用方法。教学难点能够正确输入文本并编辑相关属性。教学设计1、教学思路：（1）通过对课堂实训案例的讲解掌握精装别墅网页、西点美食网页和办公用品网页的制作方法；（2）再通过软件相关功能的解析学习输入文本和编辑文本相关属性，以及进行区分使用项目符号和编号列表方法和技巧；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）最后通过课后综合演练消化所学软件知识，提高制作网页的能力。2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。3、教学资料及要求：在网上找一些简单的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。教学内容讨论问题：1、在DreamweaverCS4中可以有哪几种方法创建文本？2、在DreamweaverCS4中如何输入多个连续空格？内容大纲：具体可结合本项目的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.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.5综合演练——美味比萨网页小结1.熟练掌握文本的使用方法和技巧。2.了解并掌握项目符号和编辑列表的使用方法和技巧。作业2.4综合演练婚礼策划网页输入文字，使用“属性”面板改变文字的字体、大小、颜色。2.5综合演练美味比萨网页使用“属性”面板改变文字的大小和颜色，使用“页面属性”命令设置网页的标题和页边距。第3讲课时内容图像和多媒体授课时间180分钟课时4教学目标掌握插入图像的方法和技巧掌握图文混排方法和技巧。掌握多媒体在网页中的应用。教学重点熟练掌握图像的格式与模式。熟练掌握Flash文件的插入与设置。教学难点能够正确使用图像和图像的属性设置、Flash文件的格式及设置属性。教学设计1、教学思路：（1）通过对课堂实训案例的讲解掌握家具特卖网页、数码相机网页和圣诞装饰网页的制作方法；（2）再通过软件相关功能的解析学习图像的插入与使用技巧，以及进行动画的使用；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）最后通过课后综合演练消化所学软件知识，提高图像与动画的使用能力。2、教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。3、教学资料及要求：在网上找一些带有图像和动画的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。教学内容讨论问题：1、在DreamweaverCS4中插入图像后在浏览器中不能正常显示图像，是哪几种原因造成？如何解决？2、在DreamweaverCS4中如何设置插入的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【案例分析】33.3.2【设计理念】3.3.3【操作步骤】3.3.4【相关工具】1．插入Flash动画2．插入FLV3．插入Shockwave影片4．影片插入Applet程序5．插入ActiveX控件3.3.5【实战演练】营养美食网页3.4综合演练——数码冲印网页3.5综合演练——野生动物网页小结1.熟练掌握图像的格式与插入方法和使用技巧。2.掌握Flash动画的插入和属性的设置。作业3.4综合演练数码冲印网页使用“图像”按钮插入图像，使用“属性”面板改变图像的大小和边距。3.5综合演练野生动物网页使用SWF按钮为网页文档插入Flash动画效果，使“播放”按钮在文档窗口中预览效果。使用“图像”按钮插入图像。使用“属性”面板设置图像边距。第4讲课时内容超链接授课时间180分钟课时4教学目标了解超链接的概念与路径知识掌握文本超链接的创建方法和技巧。掌握图像超链接的创建方法和技巧。掌握命名锚记超链接的创建方法和技巧掌握热区链接的创建方法和技巧教学重点简单了解超链接的概念与路径知识。熟练掌握超链接的分类及每种类型的创建方法。教学难点能够正确给所需文本添加超链接，以及锚记超链接的使用方法和技巧。教学设计1.教学思路：（1）通过对课堂实训案例的讲解掌握咖啡销售网页、时尚彩妆网页的制作方法；（2）再通过软件相关功能的解析学习超链接的种类，以及进行不同类型的超链接创建；（3）再通过课堂实战演练巩固软件功能及网页制作技巧；（4）最后通过课后综合演练消化所学软件知识，提高制作超链接的能力。2.教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。3.教学资料及要求：在网上找一些多级页面进行制作，来加深学员对知识点的理解和提高实际操作能力。教学内容讨论问题：1、在DreamweaverCS4中超链接有哪几种类型？分别是哪几种？2、在DreamweaverCS4中使用哪种超链接可以跳至指定的位置？内容大纲：具体可结合本项目的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.4综合演练——首饰珠宝网页小结1.熟练掌握超链接的概念与路径。2.熟练掌握超链接的类型与创建方法的技巧。作业4.3综合演练艺术画廊网页使用“命名锚记”链接制作锚记链接效果，使用“属性”面板为图片制作空链接效果。4.4综合演练首饰珠宝网页页使用“鼠标经过图像”按钮插入图像，使用“属性”面板改变图像的对齐方式，使用多边形热点创建超链接。第5讲课时内容使用表格授课时间270分钟课时6教学目标了解表格的简单操作掌握网页中的数据表格。掌握利用表格进行页面布局的方法和技巧。教学重点简单了解表格在制作网页中的作用。熟练掌握表格的插入与属性的设置。教学难点能够正确使用表格的嵌套制作复杂的网页页面。教学设计1.教学思路：（1）通过对课堂实训案例的讲解掌握时尚购物网页、电子科技网页的制作方法；（2）再通过软件相关功能的解析学习表格的插入与属性的设置，以及进行表格数据的导入与导出；（3）再通过课堂实战演练巩固软件功能及表格的使用技巧；（4）最后通过课后综合演练消化所学软件知识，提高网页制作的能力。2.教学手段：（1）通过课堂实训案例熟悉设计理念和软件功能；（2）通过软件功能解析深入学习软件功能和制作特点。（3）通过课堂实战演练和课后综合演练提高学生的实际应用能力。3.教学资料及要求：在网上找一些简单的网页页面进行制作，来加深学员对知识点的理解和提高实际操作能力。教学内容讨论问题：1、在DreamweaverCS4中如何向表格一次添加多行或多列？方法分别是？2、在DreamweaverCS4中tr标签可否添加背景图像？内容大纲：具体可结合本项目的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．导入表格式数据2．排序表格5.2.4【相关工具】1．导入和导出表格的数据2．排序表格3．复杂表格的排版5.2.5【实战演练】设计家园网页5.3综合演练——百货折扣网页5.4综合演练——手机频道网页小结1.熟练掌握表格的插入及表格属性的设置方法和技巧。2.熟练掌握表格嵌套布