网页设计公开课教案

创建站点教案一. 引言网站是现代社会中最重要的信息传播和交流媒体之一。

无论是企业宣传还是个人展示，都离不开一个精美、易用的网站。

因此，学习如何创建一个站点是非常有价值的技能。

本教案旨在帮助学生们掌握创建站点的基本知识和技能。

二. 教学目标1. 了解什么是网站，以及网站的重要性。

2. 学习使用HTML和CSS创建基本的网站页面。

3. 掌握网站的结构和布局设计原则。

4. 学会使用各种工具和资源来优化网站的用户体验。

5. 实际操作中分析和解决常见的网站设计和开发问题。

三. 教学内容和步骤1. 什么是网站1.1 介绍网站的定义和作用。

1.2 分享网站在不同领域的应用案例。

2. 基本网页制作技术2.1 学习使用HTML创建网页的基本结构。

2.2 掌握使用CSS样式表定义网页的外观和布局。

3. 网站结构和布局设计原则3.1 介绍常见的网站结构和布局设计原则，如流线型布局、层次结构等。

3.2 分析和讨论各种网站布局的优缺点。

3.3 实践操作中演示如何设计一个具有良好结构和布局的网站。

4. 优化网站用户体验4.1 学习使用图像、颜色、字体等元素来提高网站的视觉吸引力。

4.2 了解响应式设计和移动优先原则，以适应不同设备和屏幕尺寸。

4.3 探讨网站导航和搜索功能的设计要点。

4.4 分享使用工具和技术来提高网站加载速度和性能。

5. 解决网站设计和开发问题5.1 分析和讨论常见的网站设计和开发问题，如浏览器兼容性、跨平台支持等。

5.2 掌握使用调试工具和技术来解决网站的问题。

5.3 实际操作中演示如何改进和优化一个存在问题的网站。

四. 教学方法1. 讲解：通过讲解的方式介绍相关概念和知识。

2. 演示：使用具体的案例演示如何创建站点和解决问题。

3. 实践：让学生亲自动手实验和操作，提高技能和经验。

4. 分组讨论：将学生分组，让他们共同讨论和解决问题，促进合作和学习。

五. 教学资源和评估1. 教学资源：- 电脑和互联网连接：用于学生实验和操作。

第10章表单新课导语：在上一次课里，我们共同学习了CSS样式，通过学习我们知道了CSS样式在专业的网页制作过程中应用非常广泛，是不是只有CSS样式在网页制作过程中应用广泛呢！不是的，今天我们就再共同学习一个在网页制作过程中应用非常广泛的元素。

在学习这个网页元素之前，让我们共同看三张图片。

提问：通过这三张图片，同学们看到了什么共同点？答案：都有文本框，这就是我们本次课要学习的新的网页元素——表单。

板书：10 表单（居中）讲解：本章的学习目标有3点：1、熟练掌握创建表单和插入文本域的方法2、掌握复选框和单选按钮的应用技巧3、掌握列表和菜单的创建方法和技巧讲解：本次课的学习目标是熟练掌握创建表单和插入文本域的方法，下面我们就来学习：使用表单。

讲解：10.1 使用表单板书：10.1 使用表单讲解：什么是表单呢，我们先看看表单的定义。

教材上没有将表单的定义特别明确化，但是我们可以根据教材提供的知识，这样定义表单。

板书：1、表单的定义表单的定义：一个容器，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理。

在这个定义当中，我们应该注意这两个要点：1）表单是容器，2）表单是用来存放表单对象的。

表单的定义我们知道了，那么如何使用表单呢，首先就需要先建立表单板书:10.1.1 创建表单讲解：如何创建表单呢？大家请看大屏幕。

10.1.1创建表单在文档中插入表单的具体操作步骤如下。

（1）在文档窗口中，将插入点放在希望插入表单的位置。

（2）启用“表单”命令，文档窗口中出现一个红色的虚轮廓线用来指示表单域。

表单创建分为两种方法：1、单击“插入”面板“表单”选项卡中的“文本字段”按钮，在文档窗口的表单中出现一个单行文本域。

2、选择“插入>表单>文本域”命令，在文档窗口的表单中出现一个单行文本域。

操作：网页制作系统，建立两个空白网页，分别采用以上两种方法在上面插入表单。

讲解：通过对网页制作的学习，我们知道网页中插入的任何元素，都需要对其进行属性的设置。

公开课教案课程名称《网页制作》教程课题名称：Dreamweaver中超链接的应用授课班级：任课教师：授课时间：时间分配教学内容及过程教学方法及教学内容的拾漏补遗17’第三环节：教师演示、讲解操作步骤 Dreamweaver中超链接的应用一、超链接的含义超链接由源端点和目标端点两部分组成，其中设置了链接的一端称为源端点，跳转到的页面或对象称为目标端点。

二、超链接的分类1、按照源端点的不同，可以将超链接分为文本链接、图像链接和表单链接3种。

文本链接：是指以文字作为超链接源端点的链接。

图像链接：是指以图像作为源端点的超链接。

表单链接：需要与表单结合使用，当用户单击表单中的按钮时，会自动跳转至相应页面。

2、根据目标端点的不同，超链接可分为内部链接、外部链接、锚点链接和电子邮件链接4种。

内部链接：其目标端点是本站点中的其他网页或文件。

外部链接：指链接的目标端点与源端点不在同一个站点中。

锚点链接：如果网页太长，可用锚点链接实现跳转到当前网页或其他网页中的某一指定位置。

电子邮件链接：单击电子邮件链接，将打开系统默认的电子邮件收发程序。

三、设置链接属性在没有选中任何对象的前提下，单击“属性”面板上的“页面属性”按钮，打开“页面属性”对话框，首先在左侧列表中选择“链接”选项，然后在右侧设置各项链接属性。

演示提问讨论讲授、演示、讨论时间分配教学内容及过程教学方法及教学内容的拾漏补遗30’四、设置常规超链接常规超链接包括内部超链接和外部超链接，内部超链接是指目标文件位于站点内部的链接；外部超链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。

1．内部超链接内部超链接的设置非常灵活，在选中要设置超链接的文本或图像后，可以在“属性”面板上的“链接”编辑框中直接输入要链接对象的相对路径；也可以通过单击“属性”面板上“链接”编辑框右侧的“浏览文件”按钮，在弹出的“选择文件”对话框中选择链接对象。

2．外部超链接外部超链接只能采用一种方法设置，就是在选中对象后，在“属性”面板上的“链接”编辑框中直接输入要链接网页的网址。

20级电子商务网页制作专业课教案2、修改网页属性：在该对话框中可以设置网页的各种属性，如:页面文字的设置、页面背景的设置、页面边距的设置、链接文字的设置以及标题编码的设置等，根据属性分类不同，分为六个类别：技巧快捷键：(CTRL+N)（1）、外观（CSS):在“外观（CSS）”分类中，可以设置如下属性，如图3-14所示页面字体：设置页面字体格式。

可以快速定义整张页面的字体。

大小：文字的大小，默认单位为像素。

文本颜色：文字的颜色。

背景颜色：页面背景颜色。

背景图像：背景图片的位置链接。

重复：背景图片的显示是否重复。

左右上下边距：页面距离左右上下的距离。

(2)、外观（HTML）:在“外观（HTML）”分类中，可以设置如下属性：如图3-15所示背景图像：背景图片的位置链接。

背景：页面背景颜色。

文本：文本的颜色。

已访问链接：已经访问过的文本链接的颜色。

链接颜色：文本链接的颜色。

活动链接颜色：文本活动链接的颜色。

边距和边距高度：距离页面左、上的距离,高度单位默认为像素。

(3)、链接（CSS）:在“链接（CSS）”分类中，可以设置如下属性：如图3-16所示链接字体：链接文字的字体格式和加粗倾斜属性。

大小：字体的大小，默认单位为像素。

链接颜色：文本链接的颜色变换图像链接颜色：变换图像链接时文本的颜色已访问链接颜色：已经访问过的文本链接的颜色。

活动链接颜色：文本活动链接的颜色。

下滑线样式：链接时是否显示下划线。

(4)、标题（CSS）:在“（标题CSS）”分类中，可以设置如下属性：如图3-17所示标题字体的格式、大小和颜色，设置标题1至6个，在字体属性面板中直接指定文字为某号标题后，该文字直接套用该标题的属性。

（5）、标题/编码:如图3-18所示标题和编码：对于任何一张页面来说，标题都非常重要，它能在浏览者浏览该网页的时候了解该网页的内容，如果页面没有设置标题，则默认标题名为“无标题文档”，而不能直接的表达出该页面的内容，因此我们建议每个页面都应该设置标题。

最新DreamWeaver网页制作公开课教案一、课程简介1. 课程目标：通过本课程的学习，使学员掌握DreamWeaver的基本操作，能够独立制作出满足需求的网页。

2. 课程内容：主要包括DreamWeaver的安装与使用、网页基本结构、HTML 代码、CSS样式、表单、JavaScript等。

3. 适用对象：无基础或有一定基础想进一步学习的网页制作爱好者。

二、教学资源1. 教材：最新版DreamWeaver教程。

2. 软件：DreamWeaver CC 2024。

3. 辅助工具：浏览器、代码编辑器。

三、教学安排1. 课时：共计30课时。

2. 上课方式：线上授课。

3. 课程进度：每课时1小时，每周安排2课时。

四、教学方法1. 讲授：讲解DreamWeaver的基本操作和功能。

2. 演示：展示实例，边操作边讲解。

3. 练习：学员跟练，老师辅导。

4. 答疑：学员提问，老师解答。

五、课程大纲1. 第一课时：DreamWeaver的安装与使用1.1 安装DreamWeaver CC 2024 1.2 启动与界面简介1.3 创建第一个网页2. 第二课时：网页基本结构2.1 HTML基本结构2.2 DreamWeaver的代码视图2.3 插入与编辑文本3. 第三课时：HTML代码3.1 标签3.2 段落与换行3.3 列表标签4. 第四课时：CSS样式4.1 了解CSS4.2 添加内部样式表4.3 应用外部样式表5. 第五课时：表单5.1 表单概述5.2 插入表单元素5.3 表单的高级应用六、第六课时：插入图像与多媒体6.1 插入图像6.2 设置图像属性6.3 插入Flash动画6.4 插入音频与视频七、第七课时：超与锚点7.1 创建超7.2 管理超7.3 创建锚点7.4 使用命名锚点八、第八课时：表格8.1 插入表格8.2 设置表格属性8.3 表格样式与布局8.4 表格排序功能九、第九课时：框架与框架集9.1 了解框架与框架集9.2 创建框架集9.3 插入框架9.4 管理框架内容十、第十课时：HTML5与CSS310.1 HTML5新特性10.2 新增HTML5标签10.3 CSS3样式10.4 响应式设计初步十一、第十一课时：响应式网页设计基础11.1 响应式网页设计概念11.2 使用DreamWeaver的Responsive Design视图11.3 媒体查询的使用11.4 实战：创建一个简单的响应式网页十二、第十二课时：移动端网页优化12.1 移动端网页设计原则12.2 触摸事件与滑动手势12.3 移动端布局技巧12.4 实战：优化一个移动端网页十三、第十三课时：网页布局与排版13.1 盒子模型13.2 浮动与清除13.3 定位与层叠13.4 实战：制作一个排版精美的网页十四、第十四课时：JavaScript基础14.1 JavaScript简介14.2 在DreamWeaver中编写JavaScript14.3 基本语法与数据类型14.4 实战：实现一个简单的JavaScript效果十五、第十五课时：综合实战与作品展示15.1 课程回顾与总结15.2 学员作品展示与点评15.3 网页制作常见问题与解决方法15.4 展望未来：网页制作与发展的趋势重点和难点解析本文主要介绍了最新DreamWeaver网页制作公开课的教案，涵盖了从安装与使用、网页基本结构、HTML代码、CSS样式、表单、JavaScript等基础知识，到响应式网页设计、移动端网页优化、网页布局与排版等高级应用。

收藏网页教学设计导言如今，互联网已经成为人们生活中不可或缺的一部分。

我们每天都会浏览各种网页，并且经常有一些网页资源非常有用，需要收藏起来方便日后查看。

但是，对于一些刚刚接触互联网的人来说，可能不太清楚如何正确地收藏网页。

本文将介绍几种常用的收藏网页的方法和技巧，帮助您高效地收藏喜欢的网页。

一、浏览器收藏夹在常用的浏览器中，都会有一个收藏夹功能，这是最常见的收藏网页的方法。

您可以将喜欢的网页直接添加到收藏夹中，方便随时打开。

具体操作如下：1. 打开您喜欢的网页。

2. 在浏览器的导航栏中找到一个图标，通常是一个星星或者一个书签。

3. 点击该图标，弹出一个收藏夹界面。

4. 在收藏夹界面中，您可以选择将网页添加到现有的文件夹中，也可以创建一个新的文件夹来保存。

5. 点击“完成”或者“保存”按钮，完成收藏。

使用收藏夹，您可以对收藏的网页进行分类管理，方便您查找。

另外，收藏夹还支持导入和导出功能，您可以在不同的设备之间同步收藏夹，确保收藏的网页随时可用。

二、在线书签除了使用浏览器的收藏夹功能，还有一些在线服务可以帮助您收藏网页。

这些在线书签服务可以让您在不同的设备上同步收藏，并且提供更多的收藏和管理功能。

1. 常用在线书签服务- Pocket：一个功能强大的在线书签服务，可以将网页保存到您的 Pocket 账户中，并且支持离线阅读。

- Evernote：一个知名的笔记软件，也提供了在线书签功能，可以将网页链接保存到您的 Evernote 账户中，并且可以添加标签和笔记。

- Diigo：一个专注于网页收藏和注释的在线服务，可以将网页保存到您的 Diigo 账户中，并且支持在线标注和共享。

2. 使用在线书签服务的步骤- 注册一个账户并登录到相应的在线书签服务网站。

- 添加要收藏的网页链接或者直接导入浏览器收藏夹。

- 对收藏的网页进行分类、添加标签和笔记等操作。

- 在不同的设备上安装相应的应用或者浏览器插件，以便随时随地访问和管理您的在线书签。

制作网页文字滚动效果一、教学内容分析“制作网页文字滚动效果”是中等职业教育规划新教材《Dreamweaver网页制作》第二章的内容，该知识是学生掌握了在Dreamweaver网页中文本的插入与编辑后的内容。

学习《制作网页文字滚动效果》这一课，目的在于掌握插入滚动文字的方法，设置滚动文字的属性。

二、教学目标设计【知识目标】1、认识设置“滚动文字”代码。

2、掌握插入滚动文字的方法并设置滚动文字属。

【技能目标】通过引导、欣赏、学习、操作使学生掌握插入滚动文字的方法，设置文字滚动属性，从而激发学生的学习兴趣。

并将所学的知识灵活运用，获得制作网页的愉悦。

【教学重点】掌握滚动文字的插入方法、认识插入滚动文字代码及设置滚动文字属性。

【教学难点】滚动文字属性的理解与设置方法。

三、教学对象分析：本节课的教学对象是的中职二年级的学生，他们已具备计算机基本操作能力和office办公软件操作知识，并且掌握了在《Dreamweaver》网页中插入文本的相关知识。

对于“插入滚动文字”这一知识，对于基础好的学生，他能够通过老师讲解和演示后完成具体的操作，理解代码属性；但是一些基础差的学生，还要在老师的引导、讲解、示范、自己动手操作并书写笔记等过程的帮助下才能够理解掌握这部分内容。

四、教学方法设计：为了落实重难点，我选择了“效果展示、提问、对比、讲解、演示”为主的教学方法，通过观看欣赏、思考、动手操作等方式完成本课学习任务。

为了完成目标，解决教学的重难点，我在教学中设计了以下几个教学环节：欣赏网页、引出任务→演示操作、学习新知识、学生操作、学生思考→巩固新知识→知识拓展、布置作业。

教学过程【引入】欣赏网页，分析网页。

（效果展示法）【新课学习】一、插入滚动文字学生看学案，预习插入滚动文字的方法。

明确完成该任务需要用到代码，代码的作用。

教师演示操作在网页中插入滚动文字“大家好”，抽学生表述步骤归纳方法：Ⅰ、定位插入点Ⅱ、执行“插入对象”→“标签”（提示：将自动切换到“折分”视图）Ⅲ、选择“HTML标签”→选取“marquee”指令代码→插入强调：“marquee”为滚动文字代码Ⅳ、关闭对话框，在Dreamweaver窗口代码视图中“<marquee></marquee>”代码插入点处输入文字提示：1、输入文字后，不按回车键结束，鼠标在设计视图中任意位置单击2、在网页编辑窗口中无法显示滚动效果，需要按F12键在浏览器中查看。

公开课《dtnl》教案一、课题安排1.本课时课题：加密与媒体新闻审查系统（DTNL）2.授课时间：90分钟3.教学内容：（1）DTNL简介；（2）实用性及其重要性；（3）DTNL的特点；（4）DTNL的工作原理及主要功能；（5）DTNL应用案例。

二、教学目标1.学习DTNL的概念，实现对加密和媒体新闻审查系统（DTNL）的深入理解；2.了解DTNL的特点以及其在加密与媒体新闻审查中的应用；3.获取扎实的DTNL的技术知识基础，以便在其应用中有所作为。

三、教学内容1. DTNL简介DTNL加密和媒体新闻审查系统（Digital Text Newsroom），是一种针对网上媒体新闻的审查、批准以及登录系统。

它能够将各种文本资料的全部内容进行加密并存储起来，使原文资料能够管控到理想的安全状态。

它专门设计用来帮助新闻机构在其活动中快速有效地管理新闻信息，从而实现安全可靠、全面有效的媒体新闻审查过程。

2.实用性及其重要性DTNL审查系统在新闻机构活动中有着杰出的实用性，它不仅能够加强媒体的内部活动的安全性，更为新闻机构提供建立安全可靠的审查程序，有效地管控新闻信息，保证媒体新闻内容安全性和保密性。

它的实施和使用可大大提高对新闻内容的管理水平，有效地防止意外泄露，为新闻机构活动带去巨大便利。

DTNL审查系统能够支持多种文件格式，支持在线阅读和处理，可实现远程性审查，简化审查流程。

同时，DTNL审查系统还具有安全可靠、高效易用的特点。

它的加密技术保证新闻内容的安全性和保密性，使审查程序安全可靠，能够有效解决媒体新闻审查中的种种隐患。

4.DTNL的工作原理及主要功能DTNL审查系统使用高度安全的加密技术来保护新闻内容，它的主要功能有：（1）支持多格式文件：DTNL支持通常使用的所有文件类型，文件将被加密存储，因此新闻机构无需关心新闻内容的发布及能够确保新闻内容的安全性；（2）可视化编辑：DTNL支持在线编辑网页新闻，操作者可以根据需要进行快速的新闻创作及发布，能够最大程度地提升新闻学习与处理的效率；（3）审查功能：DTNL支持多种审查类型，处理者可以在实现审查程序的过程中，从而获得最佳协作以及发布新闻的准时性；（4）保密性：DTNL支持内置加密和抗破解技术，能够有效保护新闻内容，每个新闻可以面向不同的访问者发布不同的内容，有效防止意外泄露媒体新闻内容。

15、展评网页教学目标：1.了解网页的类型。

2.认识网页评价的多种方法。

3.培养沉重审美能力、评价能力、提高学生的信息素养。

重点、难点或关键：教学重点：网页的类型及网页评价的多种方法。

教学难点：对网站评价方法的理解和认识。

课时安排：1学时教学流程：一、欣赏作品，导入新课（3分钟）1、展示上节课学生制作的名作欣赏专题网站，并引导学生说一说。

（1）对设计的名作欣赏专题网站的整体印象是什么？（2）最喜欢的版面是什么？有什么不足之处？（3）在什么地方还需要改进？2、根据学生的反馈教师小结如下：评价反馈是网站建设流程中不可缺少的一个重要环节，网站建设者要具有不断改进，要具有敢于自我否定的勇气，追求尽善尽美的品质。

3、出示课题:第15课《评价网页》二、认识网页的类型1、布置学生阅读教材P85~86的“开阔视野”（1）想一想：网页的类型有哪些？你是怎么区分？（2）做一做：打开下面两个网址，引导学生判断是属于动态网页还是静态网页。

、引导学生反馈。

3、根据学生的反馈小结如下：静态网页：以.html..htm 或.shtml 等作为文件扩展名。

动态网页：以.asp..aspx..jsp 或.php等作为文件扩展名。

Flash整站：整个网站由Flash动画组成。

三、探究活动：评价网页（1）描述性评价1、教师打开迪斯尼网站和新浪网站，引导学生观察思考：这两个网站的风格有什么区别？在创意设计上有什么区别？2、引导学生反馈。

3、根据学生的反馈教师小结如下：新浪网站是平易近人，迪斯尼网站是生动活泼的，这是网站给人们留下的整体印象。

4、展示教材p87图15-4并讲授：描述性评价主要从两方面对网站作品做出诊断性评价。

①网站的主题和内容表达方面。

②制作技术和艺术性方面。

（2）量化评价。

1、出示教材P88图15-1所示的网站评价表，引导学生观察：①评价项目设置了几项？②与描述性评价相比，有什么区别？2、讲授：数字往往更具有说服力，更客观。

网页制作教学设计（公开课）一、引言在当今信息时代，网页制作已经成为一项重要的技能。

为了提高学生的综合能力，培养他们在网络环境中灵活运用技术的能力，本课程旨在教授学生如何进行网页制作。

本文将详细介绍网页制作教学设计，旨在为教师提供参考和指导。

二、教学目标1. 培养学生的网页制作能力，使他们能够独立创建简单的网页。

2. 培养学生的团队合作意识，通过小组项目使学生能够合作完成一个较为复杂的网页制作任务。

3. 提高学生的创新思维和问题解决能力，培养他们在网页设计中的审美意识。

三、教学内容1. 网页基础知识a. 介绍什么是网页以及网页的组成部分。

b. 介绍HTML、CSS和JavaScript等网页制作的基本语言和工具。

2. 网页设计原则a. 介绍网页设计的基本原则，如布局、色彩和字体选择等。

b. 引导学生学习如何设计美观、易用的网页。

3. 网页制作实践a. 给学生提供一些简单的网页制作例子，通过实践来巩固学习的知识。

b. 组织学生分小组设计和制作一个较为复杂的网页项目。

四、教学方法1. 授课结合案例分析，通过实例讲解网页制作的基本原理和技巧。

2. 班级讨论和小组合作，鼓励学生互相交流和分享网页设计的经验和想法。

3. 实践操作，让学生通过实际制作网页来巩固学习的知识。

4. 评估和反馈，及时对学生的作品进行评估和指导，帮助他们改进和提高。

五、教学评价1. 过程评价a. 观察学生在课堂上的参与情况，包括提问、回答问题和小组讨论。

b. 评估学生在实际网页制作过程中的表现，包括技术运用和创新思维等。

2. 产品评价a. 评估学生设计和制作的网页，包括美观程度、用户友好性和功能完整性等方面。

六、教学资源1. 电脑实验室或者个人电脑，安装有网页制作所需的软件和工具。

2. 网络资源，提供给学生一些优秀的网页示例和学习材料。

3. 课堂教学辅助工具，如投影仪和白板等，用于展示网页制作的案例和实例。

七、教学时间安排本课程将分为十次课，每次课时为90分钟。

⽹页制作教学设计（公开课）⼀体化课程教案（⾸页）⼀体化课程教案（内页）123567创意型⽹站开发——主题⽹站建设学习任务：建设主题⽹站学习⽬标通过完成本次任务，学⽣能够●通过多⽅调研明确客户需求，撰写需求确认分析说明书；●通过组内讨论，做好⽹站开发详细计划，撰写项⽬⼯作计划表；●通过⼩组分⼯合作，⾃主探究学习，设计有特⾊的⽹站；●通过测试，发现存在问题并提出解决⽅案；●能够展⽰⼩组作品的优势和特⾊，并能客观评价他⼈；●通过基于⼯作情境的⾓⾊扮演，熟悉⽹站开发的⼯作流程，并从中获得沟通表达，解决问题的经验，体验团队合作与信息共享的乐趣。

建议课时：16课时【任务描述】⼩李刚刚通过应聘进⼊了⼀家⽹页制作公司，公司规模不⼤，主要业务是承接各类⽹站的制作。

现在公司刚接了四个不同的制作⽹站业务，分别是花卉、海洋公园、环保、潮流，由于公司⼈数不多，所以⼩李要独⽴负责其中⼀个⽹站的建设，由于时间紧迫，现要求⼩李选择其中⼀个⽹站，并与策划部进⾏快速沟通和需求分析，完成资料的整理和素材的简单加⼯，设计出基本框架，再通过⽹页编辑⼯具完成⽹页版⾯的制作和内容元素的编辑，最后通过公司服务器发布⽹站到互联⽹上。

明确任务后，教师帮助学⽣理解任务要求、分析任务，并介绍创建站点、绘制草图、表格在页⾯布局中的作⽤，同时提供获取资讯的⽅法和途径等信息。

学⽣根据⽼师的提⽰及任务，寻找完成任务所需要的资料。

例如：1、浏览相关主题⽹站，参考⽹页布局结构2、制作⽹站总体设计说明书3.收集⽹页素材资源，包括图⽚、介绍⽂字、视频等。

决策在教师协调下学⽣⾃愿分组，进⾏探究式学习，学⽣经过讨论以⼩组⽅式拟定⼯作过程，确定⽹页素材，⽹页表格的添加⽅式，辅助的选⽤，美化设计等，教师听取学⽣的决策意见，提出可⾏性⽅⾯的质疑，提供指导意见，帮助形成⽅案并指导学⽣进⾏⽅案优化，最终做出决策，形成团队实施⽅案。

1、⽤户访谈，收集需求通过“策划部门充分沟通，了解专题⽹站的基本要求，浏览策划部门提供的资料，收集各种需求2、引导需求要点1.通过与⽤户沟通，引导⽤户提出具体需求2.指导⽤户选择与⽹站主题相关的域名，要便于访问者使⽤3.根据所能提供的条件，明确⽹站建设的规模4.根据⽤户的实际情况确定主页要呈现的内容和⽅式6.明确页⾯的宽度和⾊彩风格7.明确导航项⽬和⼦页内容呈现⽅式8.明确开发时间和后期维护要求3、需求说明确认计划在需求分析的基础上，⽹站建设负责⼈根据实际情况，明确实施⽬标，确定实施⽅案，并将其递交给客户，由其负责⼈签字确认⼯作计划表：实施学⽣根据计划⽅案完成设计和模拟，做好相关资料的记录，教师监督学⽣的学习过程，通过【引导问题】和【学习思考】培养学⽣分析问题、解决问题的能⼒，纠正学习偏差。

最新DreamWeaver网页制作公开课教案一、课程简介1. 课程目标：通过本课程的学习，使学员掌握DreamWeaver的基本操作，能够独立制作出满足需求的网页。

2. 课程内容：涵盖DreamWeaver的安装与启动、界面熟悉、基本操作、HTML 代码编辑、CSS样式设置、表单创建、特效实现等。

3. 适用对象：无网页制作经验的初学者，以及对DreamWeaver有一定了解，希望进一步提高的学员。

二、教学准备1. 软件环境：安装有最新版DreamWeaver的计算机。

2. 硬件环境：投影仪、计算机、投影屏幕等。

3. 教学资料：教案、PPT、案例文件、素材文件等。

三、教学安排1. 课时：共计10课时，每课时45分钟。

2. 课程安排：第1课时：DreamWeaver的安装与启动、界面熟悉第2课时：DreamWeaver基本操作第3课时：HTML代码编辑第4课时：CSS样式设置第5课时：表单创建与编辑第6课时：图像与多媒体操作第7课时：超的使用第8课时：表格制作第9课时：框架页面布局第10课时：综合案例实战四、教学方法1. 讲授法：讲解DreamWeaver的基本操作、功能及使用技巧。

2. 演示法：通过实际操作，展示如何制作网页，使学员更好地理解与掌握。

3. 练习法：安排课后练习，巩固所学知识，提高实际操作能力。

4. 案例教学法：通过分析与制作案例，使学员掌握网页制作的实际应用。

五、课程评价1. 课堂参与度：评估学员在课堂上的积极参与程度，提问、回答问题等。

2. 课后练习：评估学员课后练习的完成情况，包括正确性和创新性。

3. 课程总结：要求学员在课程结束后，提交一份课程总结报告，概括所学内容、收获及改进建议。

4. 综合案例实战：评估学员在综合案例实战中的表现，包括设计思路、制作技巧等。

六、教学内容1. 图像与多媒体操作插入与编辑图像插入与编辑多媒体文件图像映射的使用数据检查器的应用2. 超的使用管理超创建网站地图检查的有效性七、教学内容3. 表格制作创建表格调整表格结构应用表格样式利用表格进行页面布局4. 框架页面布局创建框架设置框架属性处理框架中的内容消除框架边框八、教学内容5. CSS样式设置CSS基本概念创建与应用样式管理样式表利用CSS进行页面美化6. 表单创建与编辑添加表单元素设置表单属性验证表单数据九、教学内容7. 网站项目管理规划网站结构管理网站资源优化网站性能部署与维护网站8. 综合案例实战案例一：个人博客页面制作案例二：产品展示页面制作案例三：在线问卷调查制作案例四：响应式网页制作十、教学内容9. 扩展学习与资源探索DreamWeaver扩展插件了解网页设计趋势与技术推荐学习资源与社区参与评估自身学习成果与设定目标10. 课程总结与反馈回顾课程重点与个人收获分析学习中的挑战与解决方案提交课程反馈与改进建议规划后续学习路径与目标设定通过上述十个章节的教学内容，学员将能够全面掌握DreamWeaver网页制作的基本技能，并能够独立完成网页设计与制作任务。

最新DreamWeaver网页制作公开课教案第一章：DreamWeaver简介1.1 课程目标：了解DreamWeaver的发展历程、功能特点和应用领域。

1.2 教学内容：1.2.1 DreamWeaver的起源和发展历程1.2.2 DreamWeaver的功能特点1.2.3 DreamWeaver的应用领域1.3 教学方法：采用讲解、演示、互动问答等方式进行教学。

1.4 课后作业：搜索其他网页制作软件，了解它们的功能特点和优缺点，下节课分享。

第二章：DreamWeaver界面与操作2.1 课程目标：熟悉DreamWeaver的界面布局和基本操作。

2.2 教学内容：2.2.1 DreamWeaver的界面布局2.2.2 工具栏和面板的基本操作2.2.3 文件的基本操作2.3 教学方法：采用讲解、演示、实践操作等方式进行教学。

2.4 课后作业：练习DreamWeaver的基本操作，如创建、保存、关闭文件等。

第三章：HTML基础3.1 课程目标：了解HTML的基本结构和常用标签。

3.2 教学内容：3.2.1 HTML的基本结构3.2.2 常用的文本标签3.2.3 常用的图片标签3.2.4 常用的超标签3.3 教学方法：采用讲解、演示、实践操作等方式进行教学。

3.4 课后作业：练习使用HTML编写一个简单的页面，包括文本、图片和超。

第四章：CSS样式4.1 课程目标：掌握CSS的基本概念和应用方法。

4.2 教学内容：4.2.1 CSS的基本概念4.2.2 设置CSS样式的方法4.2.3 常用的CSS选择器4.2.4 CSS的继承和优先级4.3 教学方法：采用讲解、演示、实践操作等方式进行教学。

4.4 课后作业：练习使用CSS设置一个页面的样式，包括字体、颜色、布局等。

第五章：DreamWeaver的网页布局功能5.1 课程目标：掌握DreamWeaver的网页布局功能，如表格、框架和Div 布局。

5.2 教学内容：5.2.1 表格布局5.2.2 框架布局5.2.3 Div 布局5.2.4 响应式布局5.3 教学方法：采用讲解、演示、实践操作等方式进行教学。

一、打开“我的电脑”、“F盘”新建文件夹，改为你的班级和姓名，再打开这个文件夹，新建一个文件夹，改为myschool；二、打开FrontPage 2003,新建空白网站，把网站地址指定到新建的文件夹myschool；新建空白网页，选择“框架网页”，最后一个网页模板“自顶向下的层次结构”；三、保存页面，选择菜单“文件、保存文件”，分别将上、中、下3个框架页和整个页面保存为top1.htm\top2.htm\top3.htm 和default.htm；四、设置框架属性和网页属性五、制作top1.htm页面1、插入一个3行1列的表格，对齐方式为居中，指定宽度778像素，2、在表格第一行插入图片title-top.gif,在第二行依次插入图片tm1.gif\tm2.gif\tm3.gif,3、设置表格第三行的单元格属性（鼠标放在第三行上单击右键，选择单元格属性），勾选“使用背景图片”，选择tn1.gif作为背景图片，指定宽度和高度分别为778、39像素，在第三行插入一个2行2列的表格，指定宽度和高度为100百分比，在最后一个单元格里输入一级栏目的文字（首页、美丽校园、校园快报、学科知识、时尚娱乐、原创作品、心理驿站），打开网页属性，勾选“背景图片”选项，将bg.gif 图片作为背景图片，点击保存六、制作top2.htm页面，插入一个1行2列的水平居中的表格，将宽度、高度分别设置为778、22像素，使用to1.gif图片作为背景图片，打开网页属性，勾选“背景图片”选项，将bg.gif图片作为背景图片，点击保存。

七、制作二级子页，在top2.htm页面中表格的第二列中输入“学校简介/校园图片”，选择菜单“文件/另存为”，将页面另存为top2-1.htm；在“文件夹列表栏”内复制top2-1.htm文件，将其分别粘贴为top2-2.htm、top2-3.htm、top2-4.htm、top2-5.htm、top2-6.htm，分别在top2-2.htm页面中表格的第二列中输入“活动预告/获奖消息/校园热点”，top2-3.htm页面中输入“英语角/阅读楼/探索窗”，top2-4.htm 页面中输入“流行地带/我爱明星/脑筋急转弯”，top2-5.htm页面中输入“奇思妙想/成长烦恼/校园幽默/动漫乐园”，top2-6.htm页面中输入“心理知识/心理测试/心理咨询”，分别保存。