Dreamweaver-教学思路-教案

重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智1重庆电讯职业学院教案2013-2014学年第1学期系部计算机与传媒系教研室(实验室)艺术设计课程名称Dreamweaver授课班级12级计算机多媒体平面1班主讲教师徐顺智职称讲师总课时64重庆电讯职业学院教务处制重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智2教学进度计划表周周节教学内容备注1、第1章Dreamweaver8简述和操作界面2、第2章规划站点3、第3章创建文档1、第4章编辑文本2、第5章图像的应用1、第6章使用CSS样式2、第7章网络多媒体应用1、第8章使用链接2、第9章使用表格1、第10章使用表格的“布局模式”2、第11章层的使用1、第12章创建交互式菜单2、第13章使用行为1、第14章使用框架和框架集2、第15章使用模板和库1、第16章站点管理2、第17章综合实例（课程设计）重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智3前言课程名称Dreamweaver课程编码总计：64学时讲课：40学时实训：24学时类别必修课（√）选修课（）理论课（）实践课（）任课教师计算机与传媒系-----徐顺智职称讲师授课对象12级计算机多媒体平面1班授课方式课堂提问、课堂训练、作业讲评、辅导答疑及课堂模拟等实践环节。执笔人徐顺智参考资料《网站规划与网页设计》谢成开，孙丹丽编著，西南师范大学出版社《网页设计与配色经典案例解析》旭日东升主编，星辰副主编，电子工业出版社。教学目的要求目的：建立站点，添加页面元素，使用CSS样式和交互行为要求：该教程使用DreamweaverCS5作为开发工具，结合老师的网站开发经验，为大家讲解网页制作的每个环节。希望通过本套课程的学习，大家能灵活运用Dreaweaver完成网站的开发。Adobe公司发布了DremweaverCS5，作为网页制作最便捷的开发工具，它拥有操作便捷高效，可视化开发界面，丰富的站点管理功能等优点。在保持原有特点的同时，最新版本的推出为我们带来不少惊喜，更简洁、人性化的用户界面；对CSS更丰富的设置；实时视图导航；PHP代码提示等。教学概况概述：AdobeDreamweaverCS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器，DreamweaverCS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。dw是设计网站的所见即所得工具，非常的方便，是适合设计人员，非常容易上手。打个比喻，.一个完整的网站可以看成是一份作业，dw是你的笔，代码是你的作业空间和域名相当于作业本。dw是一个方便你编写代码的工具。dw只是编写代码的工具你需要知道怎么用，也就是看你的作业题（和解析作业题。同时还需要一个能解析题的工具，fw将作业题解析（切片）。作为一只笔，你只需要知道怎么用它就可以。重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智4教学内容与手段本科程的具体内容包括：1网页设计基础2制作网页的基本操作3建立网页链接4了解HTML5表格处理6框架结构7插入多媒体元素8APDIV元素9行为特效10应用CSS样式11DIV层布局与Spry构建12网站发布授课的基本手段为：多媒体教学演示及实践环节。对学生的建议：1．掌握网页设计整体的策略性思考方法；2．学会网页设计中“网页三剑客”软件；3．在学习过程中，配合课堂学习，注意观察和研究生活中的实际网页设计案例；4．选择必要的参考资料，配合本课程的学习，能制作出静态网站。重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智5授课时间课次1授课方式（请打√）理论课√讨论课□实践课√习题课√其他□课时安排2教学单元（教学章、节或主题）：第一章网页设计基础目的、要求:通过本章的学习，了解网页基础及制作流程，有目的、有重点地培养艺术设计复合型人才打下良好的基础。知识要点：网站的概述——网页设计基础与制作流程网页的组成元素AdobeDreamweaverCS5简介，安装，应用界面网页文件的基本属性设置网页外观属性如何创建站点设置默认图像文件夹重点：网页的组成元素难点：如何创建站点教学步骤：基础知识讲解——实践操作讲解——学生实践教具及教学手段：（如：举例讲解、多媒体讲解、模型讲解、实物讲解、挂图讲解、音像讲解等）电脑，资料光盘，案例讲解，多媒体讲解，实践操作课后分析与小结：重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智6第一课：网页设计基础导入：在网络高速发展的今天，网站已经成为一个自我展示和宣传的平台，一个网站是由多个相关联的网页构成的。一般网页上都会有文本和图像信息，复杂一些的网页上还会有声音、视频、动画、多媒体。要制作出精美的网页，不仅需要能够熟练的使用软件，还需要掌握一些网页制作的相关知识。现在我们常用的浏览器有IE,火狐，欧朋，谷歌，搜狗，360，遨游，百度浏览器，hao123浏览器，腾讯TT。这些国产的浏览器大部分是以IE为内核的。因为浏览器的内核不同，所以同样的代码在浏览器上的显示可能不一样。如果制作页面的话，我建议用火狐或者IE。一、网站的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。举例：(搜狐网)(百度网)(优酷网)等等。2、浏览网页的工具-浏览器浏览器：用于打开显示网页的软件。最常见的是Windows系统自带的IE浏览器。还有火狐Firefox、360安全浏览器、遨游、腾讯TT等等。1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。3、认识网页的组成元素二、初识DreamweaverDreamweaverCS5是一款由Adobe公司大力开发的专业HTML编辑器，用于对WEB站点，WEB页面和WEB应用程序进行设计、编码和开发。利用Dreamweaver中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。1、制作网站的流程规划网站类型及主题搜集资料素材使用软件进行网页制作测试及发布网页标题文本LOGO视频图片表单超级链接导航栏重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智72、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。Dream：梦想weaver：织布者，织工早期是Macromedia公司推出的“网页三剑客”之一。“网页三剑客”指的是Dreamweaver、Flash、Fireworks这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的可视化网页开发工具，前两年Macromedia公司被Adobe公司收购，DMCS5是最新推出的版本。【操作演示】启动Dreamweaver实例：制作一个简单页面(两种方法对照)重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智8三、Dreamweaver的用户界面提高：工作窗口的设置、保存、恢复【操作演示】关闭Dreamweaver菜单栏插入面板文档编辑窗口浮动面板文档工具栏属性面板状态栏重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智9四、网页文件的基本操作基本网页的文件类型为HTML文档，保存的文件扩展名为“.html”1.创建网页文档（HTML文档）•文件→新建→新建文档→常规→类别→基本页2.保存指定文件（编辑中的文件如果文件名后面带有“*”号，表示未保存）•文件→保存（或Ctrl+S)•文件→另存为•文件→保存全部注意：1、网页文件要用英文或数字进行命名，莫用中文。2、基本网页的扩展名为.html3.打开已建的HTML文档•文件→打开•右击文件，选择Dreamweaver打开。•拖动到Dreamweaver4.关闭文件•文件→关闭还未保存的网页（*），关闭时会提示你是否保存。其他操作：1）多个编辑文件的切换选择2）预览编辑中的网页(快捷键F12)五、设置网页外观属性网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。六、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。2、创建站点《我的足球网》站点根目录为D：//jc七、设置默认图像文件夹八、管理站点1、在“文件”面板中实现以下操作选择编辑网页文件创建文件或文件夹剪切、粘贴、复制、删除、重命名文件或文件夹2、站点管理编辑站点复制站点删除站点重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智10实际操作设置站点：1执行“站点》新建站点”命令，弹出“站点设置对象”对话框，在该对话框中的“站点名称”文本框中输入站点的名称，单击“本地站点文件夹”文本框后面的“浏览”按钮，弹出“选择根文件夹”对话框，可以浏览到本地站点的位置。2，单击“选择”按钮，确定本地站点根文件的位置，打开“站点设置对象”对话框。单击“保存”按钮，即可完成本地站点的创建。执行“窗口》文件”命令，打开“文件”面板，在“文件”面板中显示出刚创建的本地站点。在大多数情况下，都是在本地站点中编辑网页，再通过FTP上传到远程服务器。还可以执行“站点》管理站点”命令，在弹出的“管理站点”对话框中单击“新建站点”按钮，同样可以弹出“站点设置对象”对话框。重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智11设置服务器1)如果用户需要使用Dreamweaver连接远程服务器，将站点中的文件通过Dreamweaver上传到远程服务器，则在创建站点时需要设置“服务器”选项卡中的相关选项，否则不需要设置“服务器”选项卡上的相关选项。在“站点设置对象”对话框中单击“服务器”选项，可以切换到“服务器”选项卡，在该选项卡中可以指定远程服务器和测试服务器。2)单击“添加新服务器”按钮，可以弹出“服务器设置”对话框3)服务器的基本选项1，在“服务器设置”窗口中分为“基本”和“高级”两个选项卡，在“基本”选项卡中可以对服务器的相关基本选项进行设置。2，服务器名称：在该文本框中可以指定服务器的名称，该名称可以是用户任意定义的名称。3，连接方法：再该选项的下拉列表中可以选择连接到远程服务器的方法，在Dreamweaver中提供了七种连接远程服务器的方法。重庆电讯职业学院计算机与传媒系课程：《Dreamweaver》教案执笔人：徐顺智12FTP：该选项为默认的远程服务器的连接方法，大多数情况下都是通过FTP来连接到远程服务器的，FTP也是目前最常用的链接远程服务器的方法。其他比较复杂，有心情的可以自己研究，也不好解释，自己动手，丰衣足食啊。4，FTP地址：在该文本框种输入要将站点文件上传到其中的FTP服务器的地址。FTP服务器的地址是计算机系统中完整的Interner名称。注意，在这里需要输入完整的FTP地址，并且不要输入任何多余的文本，特别是不要在地址前面加上协议名称。5，端口：端口21是接收FTP链接的默认端口，可以通过编辑右侧的文本框更改默认的端口号。6，用户名和密码：分别在“用户名和密码”文本框中输入用于连接到FT