下载文档原格式
项目一网页制作基础任务二初识Dreamweaver CS5一、教学目标1、知道创建站点。
2、掌握创建网站的首页及子页。
二、学生特征分析学生利用Dreamweaver cs5软件，尝试创建站点，首页、子页，并制作一个简单的首页页面。
三、课型实训课四、教学重点创建一个网站站点：名称为“青春我美丽”。
五、教学难点创建一个首页，另创建子页名称为“新闻、文章、下载、图片”。
六、课前准备机房七、课时安排2课时（45分钟×2）八、教学过程1、复习思考与组织教学初步创建站点，首页、子页及首页页面。
2、引入新课老师先讲解步骤方法及演示引入课题。
3、讲授新课在首页中编辑内容《见素材》。
1、准备好网页素材。
2、创建青春我美丽的站点。
3、创建子页“新闻、文章、下载、图片”并在主页中编辑内容。
4、保存并用浏览器浏览网页看其较果。
如下图所示。
4、巩固深化尝试建立首页页面。
5、课堂小结A、教学内容与时间分配：第一节课：一、在软件中定义站点（10分钟）二、在软件中管理站点（10分钟）三、网站文档的基本操作（25分钟）第二节课上机操作（45分钟）B、教学活动：通过软件功能解析深入学习软件功能和制作特点。
C、教师活动：通过软件相关功能的解析学习Dreamweaver CS5工作界面的基本操作和设置文件头的基本方法。
D、学生活动：除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
布置作业上机作业（见素材）。
九、板书设计十、教学反思我和学生一起学习了怎样建立一个自己的站点，并且在自己的站点内建立一张网页，然后在这张网页内输入文字、插入图片、设置网页背景等，并进行一些格式的设置。
但仍然有一小部分学生没有完成，于是我就查看了一下学生的来源，发现有的学生初中来自农村中学，动手能力相对较差一点。
规则”对话框，直接单击
图１１－３７ 新建文件 图１１－３８ 创建ＤＩＶ 图１１－３９ 设置方框样式
（4） 依次单击按钮确认设置，然后删除默认的文本，使用相同的方法创建一个名称为“top”的DIV，设置大小为“1000×404”像素，初学者为了便于查找和观看，可先为其设置一个背景颜色，这里设置将该标签背景设置为“＃FC9”，如图11－40所示。
（5） 将插入点定位到名称为all的DIV中，再次插入一个名称为“maid”的DIV，大小为“1000×499”像素，设置背景颜色为“＃”，效果如图11－41所示。
（6）使用相同的方法在底部创建一个名称为“
图１１－４０ 设置ｔｏｐ样式 图１１－４１ 设置ｍａｉｄ样式 图１１－４２ 设置ｂｏｔｔｉｏｎ样式）将插入点定位到名称为的DIV中，再次插入一个名称为“top＿tb”的DIV，大小为“1000×121”像素，设置背景颜色为白色。
在“top”中单击定位插入点，选择【插入】→【布局对象】→【Div标签】菜单命令，插入一个AP Div标签，选择该标签，在“属性”面板中设置大小为“606×121”像素，背景颜色为白色。
）选择创建的AP Div标签，然后在“CSS面板”中单击“编辑”按钮，在打开的面板中。
使用Dreamweaver搭建网站的基本步骤第一步：准备工作在使用Dreamweaver搭建网站之前，我们需要先完成一些准备工作。
首先，我们需要确定网站的目标和需求，包括网站的主题、页面结构以及所需功能等。
其次，我们需要规划网站的导航结构，确定各个页面之间的联系和布局。
第二步：创建网站在打开Dreamweaver之后，我们需要按照以下步骤创建一个新的网站：1. 点击菜单栏的“文件”，选择“新建”。
2. 在弹出的对话框中，选择“网站”选项，并点击“下一步”。
3. 在“站点名”栏中输入你的网站名称，并选择一个文件夹作为网站的保存位置。
4. 在“网址”栏中输入你的网站域名或者本地测试服务器的地址。
5. 选择合适的服务器技术和目录，然后点击“完成”。
第三步：设计网页在创建好网站之后，我们可以开始设计网页了。
以下是一些设计网页的基本步骤：1. 在“文件”菜单中选择“新建”，创建新的网页文件。
2. 在页面中添加标题、页眉、页脚等基本元素。
3. 使用工具栏上的各种工具来添加图片、文本框、按钮等页面元素。
4. 调整页面元素的位置、大小、颜色等属性。
5. 使用CSS样式来对页面进行排版和美化。
第四步：建立导航一个好的导航系统对于网站的用户友好性至关重要。
以下是建立导航的一些基本步骤：1. 创建一个导航栏，可以使用水平导航栏或者垂直导航栏。
2. 将各个页面之间的链接嵌入到导航栏中。
3. 使用CSS样式来美化导航栏，并在选中状态下给予特殊样式。
第五步：添加内容网站的内容是吸引用户的关键，以下是添加内容的基本步骤：1. 创建一个新的网页，供添加内容使用。
2. 使用文字工具添加网站的文字内容。
3. 添加图片、视频或者其他媒体以丰富网站的内容。
4. 使用表格或者列表来结构化和组织内容。
第六步：测试和发布在完成网站设计和内容添加之后，我们需要进行测试和发布。
以下是一些测试和发布的基本步骤：1. 使用预览功能来测试网站在不同浏览器和设备上的显示效果。
Dreamweaver CS5网页设计教程课程设计一、教学目标本课程的主要目标是：1.了解网页设计的基本原理与规范。
2.掌握Dreamweaver CS5的使用方法和网页设计技巧。
3.能够独立完成基本网页设计与制作。
二、教学内容2.1 网页设计概述本章主要介绍网页设计的概念和原理，阐述网页设计的规范和流程。
包括以下内容：1.网页设计的概念和作用。
2.网页设计的规范和流程。
3.网页设计中常用的设计软件和工具介绍。
2.2 Dreamweaver CS5入门本章主要介绍Dreamweaver CS5的基本界面和功能，让学生熟悉Dreamweaver CS5的基本操作。
包括以下内容：1.Dreamweaver CS5的安装和界面介绍。
2.Dreamweaver CS5的基本功能介绍。
3.Dreamweaver CS5的基本操作。
2.3 网页设计基础本章主要介绍网页设计的基础知识和技巧，包括页面布局、图片处理、文字处理和颜色搭配等。
包括以下内容：1.页面布局的概念和方法。
2.图片处理和文字处理的技巧。
3.颜色搭配的原则和方法。
2.4 网页设计实战本章主要介绍如何使用Dreamweaver CS5实现网页设计，通过实战让学生熟练掌握Dreamweaver CS5的使用和网页设计的流程。
包括以下内容：1.Dreamweaver CS5实现网页设计的流程。
2.网页设计实战案例介绍和指导。
3.指导学生独立完成网页设计任务。
三、教学方法本课程采用教师授课和学生实践相结合的教学方法。
具体包括：1.教师讲课。
2.演示Dreamweaver CS5的使用。
3.学生模仿和操作。
4.学生独立完成网页设计任务。
四、考核方式本课程的考核方式主要采用网页设计实战任务和学生作业。
具体包括：1.网页设计实战任务：由教师给出网页设计题目，要求学生独立完成。
任务要求设计符合规范、美观大方的网页，并在规定时间内提交。
2.学生作业：要求学生根据教师课堂讲解和演示，完成与课程相关的作业。
第二课：制作网页的基本操作2-1 添加文本1
1、网页文本的输入方式
(1)、导入预先保存的文档
(2)、直接输入或复制粘贴2、首页命名
3、网页的背景图
片通过下方的页
面属性来设置。
2-2 添加文本2
1、在网页中添加一个能自动更新的日期时间。
2、在网页中连续输入多个空格的设置。
在“编辑”菜单中选择“首选参数—常规--允许多个连续的空格”，确定。
3、添加水平线。
选中需要添加的位置，选择“插入—HTML—水平线”
在下放的属性面板中设置水平线
水平线的颜色需要通过代码进行设置，<hr>代码表示一条水平线，括号内加空格设置属性，保存后预览即能看见设置的效果。
4、特殊字符的插入。
2-3 编辑文本
1、网页文件中的文本输入、删除、复制和粘贴等编辑与DOC文档的操作相似。
2、搜索网页中查找或替换某一字词
搜索结果的显示点击每一项即显示精确位置替换和撤销Ctrl+Z
2-4 设置文字样式
1、网页文件中文本的样式通过下方的属性面板设置
在Dreamweaver CS5中在设置文本样式时可能需要新建CSS规则
2、在网页设计中使用的特殊字体，可能会因为浏览者电脑上没有安装这个字体而不能正常显示。
所以在网页设计过程中我们一般会选择“宋体”或“黑体”等常见字体。
为了保证特殊的字体能在网页中正常显示，我们通常用PS等制图软件把特殊字体制作成图片的格式添加到网页中。
2-5 段落设置
1、段落的分段、换行、缩进、编号
2、文本段落编号样式的更改设
置
3、选择文本即可使用预设标题效果。
“页面属性”中“标题CSS”的设置。
2-6 网页中使用的图片格式2-7 插入图片
1、网页文件中插入图片的两种方式，此外还有直接拖拽的方式添加图片。
插入图片时输入的“替换文本”内容在网页浏览过程中鼠标放置到图片上时显示可以使浏览者了解这个图片的主题
2、下方的属性面板显示图片的各种属性。
ID表示每个图片的识别编号 ..∕表示的站点根目录（或上一层文件夹）
如果不需要图片的边框就把边框设置为“0”
3、图片在页面中的对齐方式与文本对齐方式类似
2-8 图文混排
图片与文字段落混排的对齐可以使用底部的对齐选项变换不同的混排方式
水平边距可以控制图片水平方向上与文字之间的距离，垂直边距控制垂直方向2-9 使用Dreamweaver编辑图片
在Dreamweaver内对图片调整尺寸大小后必须“瘦身”
图片的裁切，亮度对比和锐化对比度。
2-10 优化图片
图片的优化要在保证画质的前提下尽可能的减小图片的数据量。
还可以转化图片的格式。
使用第三方软件进行图片处理
“首选参数”中第三方编辑软件的添加和相应图片格式的编辑器设置。
2-11 鼠标经过更换图片特效
1首先要准备好两张不同效果的图片
2、将光标定位在需要添加的位置。
