Dream Weaver教案

授课题目：第一章开发环境的认识和本地站点的创建
目的要求：掌握Dreamweaver CS3的工作界面、创建本地站点、使用文本进行格式化处理
重点难点：创建本地站点、使用文本进行格式化处理
组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结
总结复习导入新课：
Internet相关知识，网络上的多种网页引入如何设计网页
提问：
1、什么是Internet？
2、网络上的网页都一样么？有什么不同？
3、知道哪些编辑网页的工具？
教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材
授课内容：
第一章开发环境的认识和本地站点的创建
理论部分
理论1—网站简述
讲解：
网站的基本术语
网站
在因特网中有许多用于存放信息和发布信息的计算机，“网站”就是存放于这些机器上的一系列文档的组合，也称为“站点”。

网站中信息的发布用“网页”来实现。

网站中的文档通过超链接关联起来，利用浏览器可以从一个文档跳转到另一个文档，实现整个网站的浏览。

通过超链接还可以与因特网中任何一个网站关联起来，实现在整个因特网上的浏览。

可以这样说，网站是因特网的灵魂。

本地机与服务器
浏览网站的用户所使用的计算机被称为本地计算机，启动浏览器、打开网页等操作，都在本地计算机上完成。

Internet服务器是指提供Internet服务的计算机，如WWW服务、FTP服务、Email服务。

Internet 服务器主要用于存贮Web站点和页面，浏览网页时只要在地址栏中输入网址按下回车键，就能实现对网页的访问，不需要知道存贮该网页的服务器的实际位置。

本地计算机与Internet服务器之间通过各种通信线路连接，以实现相互通信。

本地站点与远端站点
我们把存贮在本地机上的站点称为本地站点，把存贮在Internet服务器上的站点称为远端站点。

远端站点的网站文件和磁盘组织形式，一般都在本地机上做好并调试完毕后，上载到Internet服务器，
在本地机上构建站点框架，完成站点设计，进行站点测试，上传到Internet后便形成远端站点。

在本地机上对站点文档编辑、修改、管理，测试成功后，上传到Internet便实现对远端
站点的管理和修改。

WWW和超文本
WWW（World Wide Web）是建立在Internet上的网络服务，称为“万维网”，是全球性、交互、动态、多平台、分布式、图形信息系统。

它遵循HTTP协议（Hypertext Transfer Protocol 超文本传输协议），使用加入图片、声音、动画、影视等内容的超文本（Hypertext），可以从一个从一个文件跳转到另一个文件，与世界各地站点相连。

IP地址和域名
Internet为每个站点分配一个惟一的地址，由4个从0到255之间的数字组成，数字之间用圆点隔开（如：202.102.138.66），称为IP地址。

IP地址也称为URL（Unique Resource Location），译为“统一资源定位器”。

域名地址
由几个具有一定意义的英文单词组成，之间用圆点隔开（如：），字母不区分大小写，除字母之外还可以使用阿拉伯数字、减号和下划线。

域名地址和IP地址代表同一个网站，访问一个站点时输入哪种地址都可以，用域名转换服务器转换。

因为IP地址在Internet中是惟一的，所以域名地址在Internet中也是惟一的。

有些域名后面带有本国域名。

例如新浪网址：，cn代表该网站属于中国。

超级文本传输协议
HTTP（HyperText Transfer Protocol）即超级文本传输协议，它是WWW服务器使用的最主要的协议。

通过这一跨平台的通讯协定，在WWW任何平台上的电脑都可以阅读远方服务器上的文件。

该协议经常用来在网络上传送WEB页。

当用户以“http://”开始一个链接的名字时，就是告诉浏览器去访问使用HTTP的WEB页。

主页和网页
网站主页是用户登陆到网站后看到的第一个页面，是最重要的一页。

被主页调用的网页称为子页，子页又可以调用其他子页，通过超链接实现。

网站的中主页使用规定的文件名，不能随便起。

不同的服务器对主页默认名称规定不相同，其文件名多为index.htm或index.html或default.htm或default.html。

采用了动态页面作为主页的网站，主页文件名后缀是诸如asp、php、jsp等。

在浏览器中输入网址后，主机会自动执行默认主页。

主页的一个重要的功能是导航，利用超链接指引用户浏览本网站或其他网站的信息。

静态网页
静态网页是一个html或htm文件，服务器传送HTML代码的文件到浏览器，再由浏览器解释为可见的对象呈现给浏览者。

动态网页
动态网页的格式通常有3种：
1.ASP
2.JSP
3.PHP
动态网站＝动态网页文件＋数据库
网站建设的流程
1.网站的策划与效果图的设计
2.设计与开发
3.测试与发布
构成网页的元素
网页包括的主要元素有：
文本、图像、动画、声音、视频、表格、表单等。

1.文本
文本是人类最重要的信息载体和交流的工具，网页的主体一般以文本为主。

在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。

文本在网页中的主要功能是显示信息和超级链接，文本通过文字的具体内容与不同的格式来显示信息的重要内容，这是文本的直接功能。

此外，文本作为一个对象，往往又是超级链接的触发体，通过文本表达的链接目标指向相关内容。

2.图像
图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。

图像可以用作标题、网站标志、网页背景、链接按纽、导航条、网页主图等，网页中使用图像的格式主要有：GIF、JPEG、PNG等格式。

3.动画
动画实质上就是动态的图像。

在网页中使用动画可以有效地吸引浏览者的注意。

由于活动的对象比静止的对象更具有吸引力，因而，网页上通常有大量的动画。

网页中使用较多的动画是GIF动画和Flash动画。

4.声音
声音是多媒体网页的一个重要组成部分。

用于网络声音文件格式非常多，常用的是MIDI、MA V、MP3和AIF等。

一般来讲，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。

可以在网页中添加一个链接来打开声音文件作为背景音乐，让播放音乐变得可以控制。

浏览器的不同，处理声音文件的方式也会有很大的差异和不一致的地方，最好将声音文件添加到Flash影片中，然后嵌入SWF文件以改善一致性。

⒌视频
在网页中视频文件格式也非常多，常见的有RealPlayer、MPEG、A VI和DivX、flash等。

⒍表格
表格是一种用来控制网页中页面布局的有效方式。

为了达到理想的视觉效果，通常都不显示边框，我们所看到的网页如果具有横竖分明的风格，一般都是用表格来辅助布局的。

许多设计人员使用表格对网页进行布局。

Dreamweaver提供两种方式来查看和操作表格：标准视图和布局视图。

在标准视图中，表格显示为行和列的网格，而布局视图允许创建者在将表格用做基础结构的同时在网页上绘制、移动方框以及调整方框的大小。

⒎表单
表单是一种特殊的网页元素。

表单的主要用途是：收集联系信息、接受用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录。

登录的用户名、密码、搜索引擎等都是表单。

表单由不同功能的表单元素组成，最简单的表单也要包含一个输入区域和一个提交按钮。

站点浏览者填写表单的方式通常是输入文本、选中单选按钮和复选框，以及从下拉列表框中选择选项。

根据表单功能和处理方式的不同，通常可以将表单分为用户反馈表单、流言簿表单、搜索表单和用户注册表单等类型。

网页设计中遵循的准则：
1.严格遵循策划方案（客户的需求）
2.明确网站的定位
3.界面设计要注重友好性
理论2—开发工具的介绍
讲解：
常用的网页编辑工具介绍
Dreamweaver CS3工作界面
Dreamweaver标准工作界面大致可以分为以下几个区域:
⒈标题栏:
⒉菜单栏：
文件：用来管理文件。

插入：用来插入各种元素.
修改：具有对页面元素修改的功能。

文本：用来对文本操作。

命令：所有的附加命令项
站点：用来创建和管理站点
窗口：用来显示和隐藏控制面板以及切换文档窗口
帮助：联机帮助功能。

⒊文档工具栏：
“文档”工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。

工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。

文档窗口显示当前文档。

可以选择下列任一视图：
（1）设计视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。

在该视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。

（2）代码视图：是一个用于编写和编辑HTML、JavaScript、服务器语言代码（如PHP或ColdFusion标记语言）以及任何其它类型代码的手工编码环境。

（3）代码和设计视图：可以在单个窗口中同时看到同一文档的代码视图和设计视图。

当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。

如果您做了更改但尚未保存，Dreamweaver 将在文件名后显示一个星号。

⒋“插入”栏：
插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。

有常用、布局、表单、文本、HTML、应用程序、Flash元素和收藏夹共8个二级菜单共167个按钮。

插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。

图层、框架、表单、Flash和ActiveX等网页元素。

⒌文档窗口：
“文档”窗口显示当前文档。

可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。

在该视图中，Dreamweaver 8.0显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。

“代码”视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。

“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。

⒍属性栏(属性检查器)：
属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。

例如，当前选择了一幅图像，那么属性面板上就出现该图像的相关属性；如果选择了表格，那么属性面板会相应的变化成表格的相关属性。

⒎状态栏：
文档窗口”的底部的状态栏提供了与你正在创建的文档的有关其他信息。

“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。

标签选择器显示环绕当前选定内容的标签的层次结构。

单击该层次结构中的任何标签以选择该标签及其全部内容。

单击可以选择文档的整个正文。

（1）标签选择器：标签选择器显示环绕当前选定内容的标签的层次结构。

单击该层次结构中的任何标签以选择该标签及其全部内容。

单击<body>可以选择文档的整个正文。

若要设置标签选择器中某个标签的class或id 属性，请右键单击(Windows)或按住Control键并单击
(Macintosh)该标签，然后从上下文菜单中选择一个类或ID。

标签选择器是选择标签的首选方法，因为它可以确保您始终准确地选择标签。

（2）手形工具：可以用来单击文档并将其拖入“文档”窗口。

（3）“缩放”工具和“设置缩放比率”：“缩放”工具和“设置缩放比率”弹出式菜单可以让您为文档设置缩放比率。

（4）“窗口大小”弹出式菜单：该菜单仅在“设计”视图中可见。

用来将“文档”窗口的大小调整到预定义或自定义的尺寸。

“窗口大小”弹出式菜单的右侧是页面的文档大小和估计下载时间。

⒏浮动面板组：
站点的目录结构常识
理论案例1—创建taobao站点
完成案例：
创建taobao站点
涉及的知识点：
使用向导方式创建
Dreamweaver 站点提供一种组织所有与Web 站点关联的文档的方法。

通过在站点中组织文件，可以利用Dreamweaver 将站点上传到Web 服务器、自动跟踪和维护链接、管理文件以及共享文件。

若要充分利用Dreamweaver 的功能，需要定义一个站点。

Dreamweaver 站点由三部分组成，具体取决于开发环境和所开发的Web 站点类型：（1）本地文件夹：是您的工作目录。

Dreamweaver 将该文件夹称为“本地站点”。

此文件夹可以位于本地计算机上，也可以位于网络服务器上。

这就是为Dreamweaver 站点所处理的文件的存储位置。

（2）远端文件夹：是存储文件的位置，这些文件用于测试、生产、协作等，具体取决于开发环境。

Dreamweaver 在“文件”面板中将该文件夹称为“远端站点”。

一般说来，远端文件夹位于运行Web 服务器的计算机上。

（3）测试服务器文件夹：是Dreamweaver 处理动态页的文件夹。

定义一个新的站点步骤如下：
（1）在C盘新建一个文件夹。

打开“我的电脑”，打开C盘，点鼠标右键，选择“新建”，选择“文件夹”选项，此时，C盘下会出现一个新建文件夹图标。

（2）现在开始在Dreamweaver 8中把web这个文件夹定义为站点。

打开Dreamweaver 8，在菜单栏上，点击站点菜单，选择新建站点。

（3）接下来需要给站点起一个名字，可以起任意一个名字，这里输入“个人主页”。

（4）按下一步按钮，选择“是否使用服务器技术”。

因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。

（5）按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。

（6）按下一步，选择要定义的本地根文件夹。

这里选择web文件夹。

点“选择”按钮，然后单击“下一步”按纽。

因为没有使用远程服务器，就选择“无”。

（7）然后单击“下一步”。

（8）按完成按钮，一个站点就定义好了。

同样，我们还可以使用“站点定义”对话框中的“高级”设置来设置Dreamweaver 站点。

“高级”设置使您可以根据需要分别设置本地、远端和测试文件夹。

1、设置本地文件夹
本地文件夹是Dreamweaver 站点的工作目录。

此文件夹可以位于本地计算机上，也可以位于网络服务器上。

设置本地文件夹，可以按如下步骤：
（1）选择“站点”>“管理站点”，将出现“管理站点”对话框。

（2）单击“新建”，出现“站点定义”对话框。

（3）如果未显示“高级”设置，请单击“高级”按钮。

“站点定义”对话框的“高级”选项卡显示“本地信息”类别选项，输入“本地信息”选项。

（4）如果已经做好了设置远端服务器的准备，请跳过剩下的步骤；选择左侧的“远端信息”类别，然后完成该对话框。

（5）单击“确定”，即可完成站点的设置工作。

2、设置远端文件夹
为Dreamweaver 站点设置本地文件夹后，可以设置远端文件夹。

根据开发环境的不同，远端文件夹是您存储用于进行测试、协作、生产、部署等的文件的位置。

设置远端文件夹的步骤同设置的步骤如下：
（1）选择“站点”>“管理站点”。

出现“管理站点”对话框。

（2）选择现有的Dreamweaver 站点。

如果没有定义任何Dreamweaver 站点，请在继续前创建一个本地文件夹。

（3）单击“编辑”。

出现“站点定义”对话框。

(4）如果未显示“高级”设置，请单击“高级”按钮。

（5）从左侧的“类别”列表中选择“远程信息”。

（6）选择一个“访问”选项。

（7）单击“确定”即可。

淘宝网本地站点
相关理论1—创建本地站点
讲解：
创建本地站点
定义站点
通过站点定义向导创建站点
单击“窗口”|“文件”命令或按“F8”键，打开“文件”面板，单击该面板上的“管理站点”超链接；或从左侧的下拉列表框中选择“管理站点”选项，弹出“管理站点”对话框。

单击“新建”按钮，在弹出的下拉菜单中选择“站点”选项，打开“站点定义”对话框1，选择“基本”选项卡，然后,按照提示进行选项设置.。

直接定义站点
选择“站点”|“新建站点”命令，弹出“站点定义”对话框，在对话框中选择“高级”选项卡，从“分类”列表框中选择“本地信息”选项，然后,按照提示进行选项设置。

站点的基本操作
打开站点
如果要打开站点，先打开站点管理窗口，打开“显示”下拉列表框（如图2-35所示），选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。

复制站点
若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“编辑站点”命令，打开“编辑站点”对话框。

选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。

执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“拷贝”字样的站点名称。

编辑站点
如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“编辑站点”对话框，选中一个站点后单击“编辑”按钮，即可打开该“站点定义为”对话框，选择“高级”选项卡进行站点编辑。

删除站点
在Dreamweaver 8中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击“删除”按钮就可以删除选中的站点。

注意：此删除操作并未真正删除站点文件夹和其中的内容，而只是无法再用Dreamweaver 8管理该文件夹而已。

如果需要再次用Dreamweaver 8管理该文件夹，只要用新建站点的方式再次将该文件夹指定为站点根目录即可。

在当前站点添加页面并保存
页面属性的设置
页面属性是指网页的一般属性信息，例如，网页标题、网页背景颜色、背景图像、超链接颜色、跟踪图像等。

1.设置网页标题及编码
2. 设置网页其他属性
(1)外观
(2)链接
(3)跟踪图像
小结
什么是网页、网站、HTML?
网站建设的流程有哪些？
一般站点有哪三部分组成？
理论案例2—淘宝新闻页的制作
完成案例：
淘宝新闻页的制作
涉及的知识点：
插入文本、文本格式化、设置段落、设置列表
相关理论1—设置文本
讲解：
插入文本
文字处理主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。

输入文字
1．输入文字：
打开Dreamweaver 8.0之后，然后在需要插入文本的位置单击鼠标左键定位插入点，然后输入文字。

如果需要开始新的一段，按<Enter>键即可，对应的HTML标签是<p>；如果想换行显示一段内容，可以按<Shift+Enter>组合键，对应的HTML标签是<br>；如果输入的文字超出一行的范围，输入的文本将自动换行。

2．输入连续空格
在Dreamweaver 8.0中一般只能输入一个空格，若要输入连续的空格时，可以采用下面几种方法中的一种：
①执行菜单命令“编辑/首选参数”，打开“首选参数”对话框后，选定“分类”栏中的“常规”选项，然后在右边编辑选项中勾选“允许多个连续的空格”复选框即可。

②将光标定位到需要输入多个空格的位置，切换到代码视图即HTML源文档中连续输入多个“&nbsp;”，或者单击插入工具栏文本分类中的“字符”对象，弹出下拉菜单，选择“不换行空格”选项即可。

③切换到中文输入法，设置为全角输入状态，然后在欲连续输入空格的位置按空格键。

3．输入特殊字符
编辑文字
1．设置文字标题与段落
设置文字段落与标题的方法基本相同，方法如下：
(1)将光标定位到应用段落样式或文本样式的文本中，或直接选取文本。

(2)单击属性面板中的格式选择框，在弹出的下拉列表中选择“段落”或“标题”。

切换到代码视图，我们就会发现，字符属性面板的“格式”列表框中的“段落”、“标题1”、“标题2”、“标题3”、“标题4”、“标题5”、“标题6”和“预先格式化的”等选项，分别对应HTML语言中的<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>和<pre>标记。

2．设置文字字体及大小
(1)设置字体
(2)设置字号
3．设置文本颜色
4．设置方本对齐方式
插入水平线
水平线对于组织信息很有用。

在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。

1、插入水平线
将光标移到要插入水平线的位置，执行菜单“插入”→“HTML”→“水平线”命令或者在“插入”栏中，选择“HTML”，然后单击“水平线”按钮，插入一条默认宽度和粗细的水平线。

2、修改水平线
选定插入的水平线，打开属性面板，设置水平线的高度、宽度、对齐方式以及是否有阴影等属性
3、设置水平线的颜色
选中水平线，然后单击属性面板中的快速标签编辑器按钮，打开编辑标签窗口，键入代码，如将水平线设为红色，键入代码：color=“red”。

插入更新日期
Dreamweaver提供了一个方便的日期对象，该对象使用户可以以喜欢的格式插入当前日期，还可以选择在每次保存文件时都自动更新该日期。

1.插入日期、星期和时间
2.插入更新日期
3.修改日期
要修改网页中已插入的日期，有两种方法：
(1)若没有勾选“储存时自动更新”，则直接手动修改日期。

(2)若勾选了“储存时自动更新”，则选中日期后在属性面板中单击按钮，同样弹出“插入日期”对话框，在其中编辑修改日期格式。

文本格式化
相关理论2—设置段落
讲解：
段落：段落对齐、段落缩进。

列表：项目列表、编号列表。

总结
网页构成元素都有哪些？
如何创建本地站点？
制作淘宝新闻页涉及到本章学到的哪些知识？
上机部分
相关理论回顾
构成网页的元素有哪些？
Dreamweaver CS3工作界面包括哪几部分？
如何设置文本格式化？
上机目标
创建paipai站点
拍拍网新闻页制作
实练案例1－创建paipai站点
需求描述
创建paipai本地站点
实现思路
在建站前创建好站点根目录
使用高级方式创建本地站点和存放图像的文件夹img
实练案例2－拍拍商品展示页
拍拍商品展示页
实现思路：
打开提供的素材
设置网页标题和属性
制作标题部分
制作文章内容部分
总结巩固：掌握Dreamweaver CS3的工作界面、创建本地站点、使用文本进行格式化处理布置作业：p31 2-5
参考资料：教材
教学后记：
编写日期：2010年11月3日
编写人员：朱小燕
授课题目：第二章表格的运用
目的要求：会绘制简单的表格、会制作跨行、跨列的复杂表格、会使用表格设计较简单的页面布局
重点难点：会制作跨行、跨列的复杂表格、会使用表格设计较简单的页面布局
组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结
总结复习导入新课：
表格是网页中常用的信息展示方式，是页面布局极为有用的设计工具。

大部分网站中的主页是用表格来布局的。

表格可以控制文本和图形在页面上出现的位置。

在设计页面时，往往要利用表格来定位页面元素，通过设置表格和单元格的属性，可实现对页面元素的准确定位，合理地利用表格来布局页面，有利于协调页面结构的平衡。

创建好表格后，可以在表格中输入文字、插入图像、修改表格属性、嵌套表格等。

提问：
1.什么是网站、网页？
2.Dreamweaver CS3界面主要包括哪几部分？
3.如何创建本地站点？
4.如何实现文本格式化？
教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材
授课内容：
第二章表格的运用
理论部分
理论案例1—淘宝公告栏
完成案例：
淘宝公告栏
涉及的知识点：
插入表格
插入背景图像
嵌套表格
插入文本
相关理论1—插入表格
讲解：
表格的基本结构：行、列、单元格。