C2-1--吴建洪--DW项目教案.doc

编号：QMSD/JWC-13-10授课日期07年 9 月 4 日 第 2 周授课班级06计算机(1)(2)(中)授课课时6授课形式理实一体授课章节名 称项目一：制作“我的个人介绍”任务一：网页的建立与保存任务二：文字的输入与排版使用教具多媒体教室、多媒体机房学习目标1、初识网页2、认识HTML3、制作我的第一张网页4、制作“我的个人介绍”学习重点网页制作的一般步骤学习难点规划、创建站点更新、补充、删节内 容无课外作业完善“我的第一张网页”和“我的个人介绍教学后记学生通过网页制作工具的介绍和网站的浏览，学会认识了Dreamweaver工具，能够正确理解站点的规划与创建，对网页制作的一般步骤也有了一定认识。授课主要内容或板书设计【任务要求】制作我的第一张网页【观察认识】网络以其独特的优势渗入到人们的生活中，它已成为人们生活需要的一个重要组成部分。在学习制作网页前，需要了解网页制作的一些基本知识，如网页的定义、分类，制作网页的软件以及网页制作的基本步骤和规则。【预备知识】一、网页制作基础知识1、网页的定义和分类（1）按位置分类a）主页 b）内页（2）按表现形式分类a）静态网页 b）动态网页2、网页制作中的基本概念（1）URL：指全球资源定位器，用来指明通信协议和地址的方式。http:/形式的URL用于表示网页的Internet位置。（2）域名：网站的网址。（3）站点：管理网页文档的场所。（4）发布：指把制作好的网页上传到网络上的过程。（5）浏览器：是一种把在互联网上的文本文档和其他类型的文件翻译成网页的软件。（6）超级链接：超级链接能起到将不同页面链接起来的功能，可以是同一站点页面之间的链接，也可以是与其他网页页面之间的链接。超级链接有文字链接和图象链接。（7）导航条：如同一个网站的路标（8）表单：具有交互性的动态网页，用于在申请会员和邮箱时提交用户信息。（9）页面的基本组成元素a）文本 b）图象（10）认识网站a）门户网站 b）个人网站 c）专业网站 d）职能网站3、网页制作的一般步骤（1）收集、整理资料（2）规划、创建站点（3）制作网页a）页面框架的构建 b）导航条 c）返回首页链接 d）添加网页元素（4）站点测试（5）网页发布4、网页的制作原则（1）整体规划（2）站名要有创意（3）鲜明的主题（4）通用网页（5）动画不能过多（6）导航要明朗（7）图象优化（8）定期更新【任务解决方案】一、启动与退出Dreamweaver MX 2004a)启动Dreamweaver MX 2004b)退出Dreamweaver MX 2004二、Dreamweaver MX 2004的工作界面a)插入栏 b)“文档”工具栏 c)“属性”面板 d)浮动面板组【技能训练】为一家名为诚与广告公司的网站收集资料。这是一个公司网站，所以必须收集该公司的介绍、企业文化和业务范围等资料；该公司是一个广告公司，故还需要收集大量公司作品的图片资料；广告公司都有一定的长期客户，因此收集合作公司的资料是必不可少的。资料收集尽量要详细、丰富，收集好的资料一定要分类妥善管理。【作业】完善“我的第一张网页”和“我的个人介绍8编号：QMSD/JWC-13-10授课日期07年 9 月 6 日 第2-3 周授课班级06计算机(1)(2)(中)授课课时6授课形式理实一体授课章节名 称项目二：制“作我的心灵小站”任务一：站点的建立与管理任务二：FIREWORKS图片的制作与加入任务三：FLASH动画制作与加入使用教具多媒体教室、多媒体机房学习目标1、知道怎样规划自己的网站2、如何打造自己的个性化站点3、学会编辑我的站点学习重点创建与管理站点学习难点创建与管理站点更新、补充、删节内 容/课外作业完善“我的心灵小站”教学后记学生通过“我的心灵小站”站点的创建与管理，基本学会了规划自己的网站，但还有部分学生对站点的创建与管理还是不能很好的理解。授课主要内容或板书设计【任务要求】制作“我的心灵小站”、 规划“天书”站点【观察认识】站点是管理网页文档的场所，本章将介绍站点的规划、创建以及对站点的管理和操作，还将介绍网页制作的一些基本操作。【预备知识】一、规划站点(1)站点的概念a)本地站点 b)远程站点 c)测试站点(2)规划站点结构(3)创建导航草图二、创建与管理站点(1)创建站点(2)管理站点a)编辑站点 b)添加文件夹或文件 c)删除文件或文件夹d)重命名文件或文件夹 e)编辑文件 f)删除站点三、 页面的创建、保存及属性设置(1)创建新页面(2)打开已有网页(3)预览网页效果(4)网页的保存a)直接保存 b)另存为(5)页面设置a)外观 b)链接 c)标题 d)标题/编码 e)跟踪图象【任务解决方案】一、将为一个名为“天书”的文学网站进行站点结构的规划。其操作步骤如下：(1)将网站名称的tianshu作为站点名称，在本地磁盘中创建一个名为tianshu的文件夹。(2)在tianshu文件夹中创建一个名为zhuye的文件夹，存放主页中的对象文件。(3)由于网站主要分为“小说”、“诗词”、“散文”、“经典”、“评论”5个板块，因此在tianshu文件夹中创建5个名称分别为xiaoshuo、shici 、sanwen、 jingdian 、pinglun的字文件夹。(4)在每个子文件夹中创建一个名为pic的文件夹，以存放个板块网页中的图片文件。(5)如有需要还可在个板块中细分网页内容，如为个板块的分页面创建一个文件夹以存放其网页内容。(6)为站点绘制导航草图。二、创建tianshu站点。其操作步骤为：（1）选择“站点/管理站点”命令打开“站点管理”对话框，单击新建按钮。（2）在弹出的菜单中选择“站点”命令，弹出“未命名站点1的站点定义为”对话框，在“基本”选项卡中的“您打算为您的站点起什么名字？”文本框中输入站点名称tianshu。（3）单击下一步按钮，在打开的对话框中选择是，我想使用服务器技术单选按钮，在“哪种服务器技术？”下拉列表框中选择JSP选项。（4）单击下一步按钮，选中在本地进行编辑和测试单选按钮，在“您将把文件存储在计算机上的什么位置？”文本框中输入本地站点存储的位置F:tianshu。（5）单击下一步按钮，在“您应该使用什么URL来浏览站点的根目录？”文本框中输入所需的URL。（6）单击下一步按钮，在打开的对话框中选中否单选按钮。（7）单击下一步按钮，在打开的对话框中将显示站点信息，单击完成。（8）此时“管理站点”对话框左侧列表中显示新建的站点，单击完成按钮完成站点的创建。【技能训练】活动一：为“我的个人网站”作准备活动二：规划自己的网站活动三：打造自己的个性化站点活动四：编辑我的站点【知识整理】1、创建和管理站点 2、为网页设置页面属性【作业】 1）简述用Dreamweaver MX 2004创建站点的过程。2）简述进行站点结构规划的主要步骤。3）制作“我的心灵小站”编号：QMSD/JWC-13-10授课日期07年 9 月13日 第 3-4 周授课班级06计算机(1)(2)(中)授课课时4授课形式理实一体授课章节名 称项目三： 制作唐诗网站任务一： 加入特殊字符任务二： 插入列表与其他元素任务三： 设置网页属性使用教具多媒体教室、多媒体机房学习目标1、学会特殊字符的加入2、知道列表与其他元素的使用3、能够设置网页的属性学习重点1、插入特殊符号2、设置段落格式学习难点设置段落格更新、补充、删节内 容无课外作业制作“文化沙龙”网页教学后记通过讲解文字的编辑和网页属性的设置，绝大部分学生学会了编辑文档和对象，对文字的编辑掌握得比较好，对网页属性的设置不很明白其作用，要多作解释。授课主要内容或板书设计【任务要求】制作唐诗网站【观察认识】文本是网页传递信息的重要载体之一，也是网页中不可缺少的元素。文本的样式将会影响到网页的整体外观，因此在网页中插入和设置文本格式是至关重要的。本项目将学习在网页中插入文本的方法及文本的格式设置，包括基本样式、段落样式的设置等。另外，还将学习利用CSS样式设置文本。【预备知识】一、插入文本1、“文本”插入栏2、插入普通文本（1）直接输入文本（2）从其他文本中复制文本3、插入不换行空格在Dreamweaver MX 2004中无论按多少次空格键都只会出现一个空格，因为Dreamweaver MX 2004中的文档格式都是以HTML的形式存在，而HTML文档只允许字符之间包含一个空格。在网页中插入空格可以选择“插入/HTML/特殊字符/不换行空格”命令，还可以按Shift+Ctrl+空格键。4、插入水平线（1）插入水平线（2）编辑水平线5、插入日期 插入/日期6、插入特殊符号插入/HTML/特殊字符二、设置文本格式1、基本样式设置（1）设置文字的字体、大小（2）更改文本颜色2、设置段落格式 （1）设置段落缩进（2）设置文本对齐【任务解决方案】一、为chengyu站点创建主要文件夹及文件。其操作步骤如下：（1）选择“窗口/文件”命令打开“文件”面板，在下拉列表框中选择chengyu选项。（2）在面板中右击站点，在弹出的快捷菜单中选择“新建文件夹”命令，并将新建文件夹命名为shouye。（3）用同样的方法在站点根目录添加名为jieshao、wenhua、 yewu 、huwai、lianxi 和hezuo的文件夹。（4）在面板中右击shouye文件夹，在弹出的菜单中选择“新建文件”命令，并将其命名为shouye.htm。（5）用同样的方法在其他几个文件夹下添加相应的.htm文件。二、在标题和文本之间添加一条水平线，并在属性面板中取消水平线的阴影效果使其高度为3。其操作步骤如下：（1）在网页文档中输入文本，将光标插入点定位在标题后，按Shift+Enter键换行。（2）选择“插入/HTML/水平线”命令插入水平线。（3）选中该水平线，在属性面板中取消阴影复选框的选中状态，在高文本框中输入3。三、在网页文档中插入当前的时间和日期。其操作步骤如下： （1）将光标插入点定位到插入日期或时间的位置，选择“插入/日期”命令，打开“插入日期”对话框。（2）在“星期格式”下拉列表框中选择“星期四”选项；在“日期格式”下拉列表框中选择“1974年3月7日”选项；在“时间格式”下拉列表框中选择22：18选项；选中存储时自动更新。（3）单击“确定”按钮关闭对话框。【技能训练】一、为网页添加文本。其操作步骤如下：（1）打开if.htm文档（2）将光标插入点定位到文档顶部，选择“插入/HTML/水平线”命令插入一条水平线。（3）将光标插入点定位到水平线下方，切换到所需的输入法，输入文本“如果”。（4）直接按空格键换行，输入文本“有河流过”。（5）将插入栏切换到“文本”插入栏，空两格插入不换行空格，然后输入文本“有人经过 剩下你 还有我”。（6）打开“如果.txt”文本文档，选中其中的文本，复制到剪切板。（7）切换到DM窗口，光标定位点定位到先前文本下方，粘贴到文档中，最后在文本下方再添加一条水平线。二、在网页文档中文本“风雨天一阁”设置字体为“华文行楷”，字号为36，颜色RGB值为003399。操作步骤如下：（1）在编辑窗口输入文本“风雨天一阁”。（2）选中输入的文本，在属性面板的“字体”下拉列表框中选择“华文行楷”，选择36大小。（3）选择RGB值为#003399。三、设置网页文本格式：为“如果”网页中的文本进行格式设置，要求文本标题样式与正文不同，正文中某些字体需要突出，以达到美化网页文本的目的。操作步骤如下：（1）插入文本（2）设置文本格式【自主训练】制作唐诗网站【作业】制作“文化沙龙”编号：QMSD/JWC-13-10授课日期07年 9 月 20 日 第 4 周授课班级06计算机(1)(2)(中)授课课时4授课形式理实一体授课章节名 称项目四：制作“世界杯足球网”任务一：网页布局任务二：表格和布局单元格任务三：数据表格的制作任务四：编辑表格任务五：美化表格使用教具多媒体教室、多媒体机房学习目标1、掌握布局表格和单元格的绘制方法，使用布局表格和单元格设计页面布局2、掌握布局表格和单元格的编辑方法，合理使用嵌套表格3、掌握创建表格的方法，导入表格式数据4、对表格内的数据进行排序，拆分、合并单元格，掌握表格的编辑方法。5、通过自动嵌套现有表格和自定义表格，完成表格的美化。学习重点布局表格、布局单元格学习难点网页布局的方法更新、补充、删节内 容/课外作业补充教学后记通过项目实例来学习布局表格和布局单元格的制作，效果比较好，前面已学过一般网页的制作步骤，所以学习网页布局时相对来说比较容易接受。授课主要内容或板书设计【任务要求】任务一、绘制网页布局任务二、编辑布局表格和布局单元格任务三、数据表格的制作任务四、编辑我的表格任务五、美化我的表格【预备知识】一、绘制网页布局1、网页布局的概念和意义2、绘制布局表格和单元格（1）绘制布局表格 （2）绘制布局单元格3、布局表格和单元格的区别二、编辑布局表格和布局单元格1、插入布局单元格的行和列2、移动布局表格和单元格3、添加嵌套布局表格4、设置布局表格和布局单元格的属性5、设置布局宽度6、设置布局模式的参数三、数据表格的制作1、标准模式、扩展表格模式和布局模式2、插入表格3、导入表格式数据4、插入嵌套表格5、添加表格行或列（1）添加行和列 （2）删除行或列 （3）在“属性”面版中添加删除行或列四、编辑我的表格1、对表格数据排序2、合并和分割单元格3、复制和粘贴单元五、美化我的表格1、自动套用表格格式2、设置表格属性3、设置单元格属性【技能训练】1、建立站点并新建网页2、绘制网页中的布局表格与布局单元格3、绘制布局表格并设置相关参数4、绘制布局单元格，使用参数设置大小，并插入相关图片5、制作网页左侧主体内容的文字及图片6、制作网页右侧主体内容的文字及图片7、设置整个页面，完成主页的制作8、制作首页数据表格9、 制作分页表格110、制作分页表格211、对表格数据排序12、合并单元格13、复制单元格内容14、利用“属性”面版美化首页表格15、利用“属性”面版美化分页表格16、利用“格式化表格”命令美化分页表格117、利用“格式化表格”命令美化分页表格218、设置提示图片与链接【作业】补充编号：QMSD/JWC-13-10授课日期07年 10 月 9 日 第 7 周授课班级06计算机(1)(2)(中)授课课时4授课形式理实一体授课章节名 称项目五：制作上海新貌任务一：图像的添加任务二：设置图像的属性任务三：插入图像对象任务四：使用FIREWORKS编辑图像任务五：打造网站相册使用教具多媒体教室、多媒体机房学习目标1、知道网页中图象的分类及其特点，熟练掌握在网页中添加图象的方法。2、学会图象属性的设置方法，其中还包括给图象添加文字提示和创建图象热点区域。3、会在网页中添加图象占位符、Fireworks HTML文件、图象的变换效果以及导航条的方法。4、通过设置图象的编辑器，会使用内置的Fireworks MX 2004工具编辑图象。5、知道创建网站相册的方法。学习重点图象的插入与编辑学习难点网站相册的建立更新、补充、删节内 容/课外作业完成项目报告五教学后记通过项目训练，不断巩固知识点，效果比较好，学生对于图象的插入与编辑和网站相册的建立有了一定认识，能较好地解决学习重点和难点，完成项目。授课主要内容或板书设计【项目要求】一、为网页添加图象1、图象分类及其特点2、在网页中添加图象二、设置图象的属性1、设置图象属性2、给图象添加提示文字3、创建图象热点区域三、在网页中插入图象对象1、图象占位符2、Fireworks HTML文件3、图象的变换效果4、导航条【任务解决方案】活动一、为网页添加图象1、图象分类及其特点2、在网页中添加图象步骤1、建立站点并新建页面步骤2、设计网页布局并制作标题处图标步骤3、制作页面主要内容步骤4、设置页面属性活动二、设置图象的属性1、设置图象属性2、给图象添加提示文字3、创建图象热点区域步骤1、制作上海国务购物分页步骤2、制作上海饮食分页与上海建筑分页步骤3、创建图象热点区域活动三、在网页中插入图象对象1、图象占位符2、Fireworks HTML文件3、图象的变换效果4、导航条步骤1、添加图象变换效果步骤2、插入图象占位符活动四、使用编辑器编辑网页中的图象1、设置图象编辑器2、使用内置Fireworks工具编辑图象3、启动Fireworks编辑PNG格式的图象源步骤1、设置图象编辑器步骤2、使用内置Fireworks工具编辑图象步骤3、启动Fireworks编辑图象源活动五 为站点打造网站相册执行“命令/创建网站相册”，可以为站点建立相册。在使用这个功能时，我们要建立一个文件夹，作为相册图象及系统自动生成链接偶各张图象缩略图的网页存放的地点。当单击缩略图时，系统自动跳转到原始尺寸的图象上。1、建立相册目录2、建立网站相册【技能训练要点】活动一、二、三、四、五【作业】 项目报告编号：QMSD/JWC-13-10授课日期07年 10 月 11 日 第 7-8 周授课班级06计算机(1)(2)(中)授课课时4授课形式理实一体授课章节名 称项目六：制作四川旅游网任务一：用不同的方式链接网页任务二：给网页添加邮件链接和书签链接任务三：巧用无址链接和脚本链接任务四：管理站点链接资源使用教具多媒体教室、多媒体机房学习目标1、 理解站点和链接的概念，其中包括URL、绝对路径和相对路径的概念。2、 学会在网页中设置文字和图片超级链接的方法。3、学会在网页中设置邮件链接和设置书签链接的方法。4、知道无址链接和脚本链接的含义，掌握制作的方法。5、学会站点链接资源的管理方法。学习重点学会管理站点链接资源，能够用各种方式链接网页学习难点创建超级链接更新、补充、删节内 容/课外作业完成项目报告六教学后记基本上都学会了管理站点链接资源，能够用各种方式链接网页关系、创建超级链接操作较好，有关无址链接和脚本链接的问题还有一些学生不能很好的理解。授课主要内容或板书设计【项目要求】一、用不同的方式链接网页二、给网页添加邮件链接和书签链接三、巧用无址链接和脚本链接四、管理站点链接资源【预备知识】一、用不同的方式链接网页1、链接简介2、URL地址解析3、理解和编写绝对路径和相对路径4、快速在站点内创建超级链接5、超级链接的目标窗口6、超级链接的文本提示二、给网页添加邮件链接和书签链接1、邮件链接2、书签链接三、巧用无址链接和脚本链接1、无址链接2、脚本链接四、管理站点链接资源1、“站点”选项2、“收藏”选项【观察认识】超级链接将许多毫无关联的网页通过文字、图片、Flash等元素联系起来，用户只需轻点鼠标便可访问链接的网页。【技能训练】活动一、用不同的方式链接网页1、链接简介2、URL地址解析3、理解和编写绝对路径和相对路径4、快速在站点内创建超级链接5、超级链接的目标窗口6、超级链接的文本提示步骤1：新建站点及相关网页步骤2：设计网页布局步骤3：使用多种方法设置超级链接步骤4：设置超级链接的目标窗口和文本提示步骤5：设置网页属性活动二、给网页添加邮件链接和书签链接1、邮件链接2、书签链接步骤1：设置邮件链接步骤2：制作书签链接活动三、巧用无址链接和脚本链接1、无址链接2、脚本链接步骤1：创建无址链接步骤2：创建脚本链接活动四、管理站点链接资源1、“站点”选项2、“收藏”选项步骤1：“站点”选项的设置步骤2：“收藏”选项的设置【作业】完成项目六编号：QMSD/JWC-13-10授课日期07年 10 月 18 日 第8 周授课班级06计算机(