Dream Weaver教案.doc

授课班级授课日期授课题目：第一章 开发环境的认识和本地站点的创建目的要求：掌握Dreamweaver CS3的工作界面、创建本地站点、使用文本进行格式化处理重点难点：创建本地站点、使用文本进行格式化处理组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：Internet相关知识，网络上的多种网页引入如何设计网页提问：1、什么是Internet？2、网络上的网页都一样么？有什么不同？3、知道哪些编辑网页的工具？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：第1章 开发环境的认识和本地站点的创建理论部分理论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之间的数字组成，数字之间用圆点隔开（如：6），称为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、MAV、MP3和AIF等。一般来讲，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。可以在网页中添加一个链接来打开声音文件作为背景音乐，让播放音乐变得可以控制。浏览器的不同，处理声音文件的方式也会有很大的差异和不一致的地方，最好将声音文件添加到Flash影片中，然后嵌入SWF文件以改善一致性。视频在网页中视频文件格式也非常多，常见的有RealPlayer、MPEG、AVI和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） 标签选择器：标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击可以选择文档的整个正文。若要设置标签选择器中某个标签的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之后，然后在需要插入文本的位置单击鼠标左键定位插入点，然后输入文字。如果需要开始新的一段，按键即可，对应的HTML标签是；如果想换行显示一段内容，可以按组合键，对应的HTML标签是；如果输入的文字超出一行的范围，输入的文本将自动换行。2输入连续空格在Dreamweaver 8.0中一般只能输入一个空格，若要输入连续的空格时，可以采用下面几种方法中的一种：执行菜单命令“编辑/首选参数”，打开“首选参数”对话框后，选定“分类”栏中的“常规”选项，然后在右边编辑选项中勾选“允许多个连续的空格”复选框即可。将光标定位到需要输入多个空格的位置，切换到代码视图即HTML源文档中连续输入多个“ ”，或者单击插入工具栏文本分类中的“字符”对象，弹出下拉菜单，选择“不换行空格”选项即可。切换到中文输入法，设置为全角输入状态，然后在欲连续输入空格的位置按空格键。3输入特殊字符编辑文字1设置文字标题与段落设置文字段落与标题的方法基本相同，方法如下： (1)将光标定位到应用段落样式或文本样式的文本中，或直接选取文本。 (2)单击属性面板中的格式选择框，在弹出的下拉列表中选择“段落”或“标题”。切换到代码视图，我们就会发现，字符属性面板的“格式”列表框中的“段落”、“标题1”、“标题2”、“标题3”、“标题4”、“标题5”、“标题6”和“预先格式化的”等选项，分别对应HTML语言中的、和标记。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插入表格讲解：表格的基本结构 ：行、列、单元格表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。表格由三个基本部件组成：行、列、单元格。具有宽度、高度、间距、边框等属性。插入表格的方法：选择菜单“插入记录”“表格”命令 选择插入栏的“布局”或“表格”类别中的“表格”按钮在Dreamweaver中插入表格的方法如下：1、将光标定位到要插入表格的位置。2、执行“插入”“表格”命令或单击“常用”面板上的表格按钮或单击“布局”面板上的表格按钮，打开“表格”对话框。3、在“行数”文本框中输入表格的行数；在“列数”文本框中输入表格的列数；在“表格宽度”文本框中输入表格在网页中的宽度(可用像素和百分数表示)；在“边框粗细”框中输入表格边框的宽度，值为0时，表格线将隐藏起来；在“页眉”中指定表格标题的位置，一般选择“无”。4、单击【确定】按钮，即可在光标位置插入一个表格。表格常用属性介绍设置“表格”对话框选项如下：l行数：表格的行数目，本例为“1”。l列数：表格的列数目，本例为“2”。l表格宽度：以像素为单位或按以窗口宽度的百分比来指定表格的宽度，本例为“700”象素。l边框粗细：表格边框的宽度。l单元格边距：单元格边框和单元格内容之间的像素数。l单元格间距：相邻的表格单元格之间的像素数。l“页眉”选项组中一共4个标题选项：无、左侧、顶部、两者。无：对表格不启用列或行标题。左侧：将表格的第一列作为标题列，以便为表格中的每一行输入一个标题。顶部：将表格的第一行作为标题行，以便为表格中的每一列输入一个标题。两者：在表格中输入列标题和行标题。l标题：显示在表格外的表格标题。l对齐标题：表格标题相对于表格的位置。l摘要：表格的说明信息。相关理论2单元格的拆分与合并 讲解：单元格的拆分单元格的合并表格由一个或多个单元格构成，单元格是指表格内的每个小格子。在表格中可以插入文字，也可以插入图片等对象。在表格中直接输入文本时，当输入文本的长度超过单元格宽度时，单元格会自动扩展增宽。使用方向键，可在不同的单元格之间进行切换。按TAB键可移到下一个单元格，按Shift+Tab键可将光标移到前一个单元格。在最后一个单元格中按Tab键，会自动添行。也可以选择“文件”“导入”“表格式数据”菜单命令或选择“插入”“表格对象”“导入表格式数据”菜单命令将在另一个应用程序（如 Microsoft Excel）中创建并以分隔文本的格式（其中的项以制表符、逗号、冒号、分号或其他分隔符隔开）保存的表格式数据导入到 Dreamweaver 中并设置为表格的格式。嵌套表格是将新表格插入到当前表格的某一单元格中。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其宽度由它所在单元格的宽度决定。在表格单元格中嵌套表格的基本做法如下：单击现有表格中的一个单元格。执行“插入”“表格”菜单命令。 在“插入表格”对话框中进行设置，插入嵌套表格前的表格.需要注意的是，表格不宜嵌套太多，最多三层；使用的嵌套越多，页面的浏览速度越慢。 相关理论3表格美化格式的设置讲解：表格格式化的属性嵌套表格的使用插入内容小结插入表格的方法有哪些？如何修改表格宽度和高度？如何实现插入背景图像？理论案例2淘宝首页布局完成案例：淘宝首页布局 涉及的知识点：插入表格表格的格式化 嵌套表格相关理论1页面布局的概述 讲解：网页布局意义网页布局原则 1. 条理清晰2. 主次分明 3. 色彩对比度适当 4. 布局疏密适当 网页布局的步骤 1. 构思 2. 初步布局 3. 填充内容 4. 细化布局、内容 相关理论2常见的网页布局形式 讲解：“上左右”型布局 “上左中右”型布局 对称布局 pop布局（海报布局） 不规则布局 相关理论3创建表格进行布局 总结表格的用途主要是什么？ 制作表格页面的主要步骤什么？ 插入表格的两种方法是什么？表格布局的主要步骤有哪些？上机部分相关理论回顾表格有哪些用途？表格的格式化包含什么？ 表格布局的应用上机目标拍拍首页布局 拍拍商品展示页 实练案例1拍拍首页布局需求描述拍拍首页布局实现思路插入表格应用拆分、合并和嵌套生成各个模块的布局实练案例2拍拍商品展示页需求描述拍拍商品展示页实现思路插入表格应用拆分、合并和嵌套生成各个模块的布局总结巩固：会绘制简单的表格、会制作跨行、跨列的复杂表格、会使用表格设计较简单的页面布局布置作业：p63 2-4参考资料：教材教学后记：编写日期：2010年11月3日编写人员：朱小燕授课班级授课日期授课题目：第三章 图像和多媒体的应用目的要求：在网页中编辑图像、在网页中插入背景音乐文件、在网页中插入FLASH文件 重点难点：在网页中编辑图像、在网页中插入背景音乐文件组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：图像通常用来添加图形界面、具有视觉感染力的内容或交互式设计元素， Web页中通常使用的只有三种，即GIF、JPEG和PNG。提问：1. 表格有哪些用途？2. 使用表格布局的主要步骤？3. 如何实现单元格的拆分与合并？ 4. 如何实现表格的格式化？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：第三章 图像和多媒体的应用理论部分理论案例1灌篮高手介绍页 完成案例：灌篮高手介绍页涉及的知识点：插入图像设置图像属性编辑图像使用图像占位符相关理论1图像简介 讲解：图像在网页中的应用Logo、Gif动画、广告图像、按钮图像、产品图像、背景图像网页上常用的图像类型Gif 图像Jpg 图像Png 图像相关理论2设置图像讲解：插入图像（快捷键Ctrl+Alt+I）插入图像在Dreamweaver中插入图像的基本方法是：1将光标置于要插入图像的位置，在插入工具栏的“常用”类中单击“图像”按钮或选择“插入”菜单中的“图像”命令，打开“选择图像源文件”对话框。2在对话框中显示有图像文件名、文件类型和图像源的路径URL(每个网页都有一个唯一的地址，称作统一资源定位器即URL)。我们选取存放在站点中的图像文件，然后单击【确定】按钮将显示“图像标签辅助功能属性”对话框，在“替代文本”和“详细描述”文本框中输入内容，单击“确定”按钮，即可将图片插入到指定区域。3如果所选择的图像文件不在用户设定的当前站点，则将打开“Macromedia Dreamweaver”对话框。提示是否将图像文件复制到根文件夹，单击【是】按钮，然后打开“复制文件为”对话框，定位到站点中用于存放图像文件的文件夹images，最后单击【保存】按钮即可。设置图像属性在网页中插入图像后可以对图像的各种相关属性进行设置，若要设置图像属性，请执行以下操作：1.图像名称及大小：使用缩略图下面的文本框设置名称，以便在使用 Dreamweaver 行为(如“交换图像”)或脚本语言(如 JavaScript 或 VBScript)时可以引用该图像。而缩略图右侧标明了所插入图像的大小。2.宽和高:以像素为单位指定图像的宽度和高度。当您在页中插入图像时，Dreamweaver 自动用图像的原始尺寸更新这些文本框。在“宽”和“高”文本框中输入新值，实现图像大小改变，但却与图像的实际宽度和高度不相符，若要恢复图像原始值，可单击“宽”和“高”文本框右侧的“恢复图像到原始大小”按钮重设大小。3.源文件：指定图像的源文件。单击文件夹图标以浏览到源文件，或者直接键入路径。4.链接：指定图像的超级链接。将“指向文件”图标拖到“站点”面板中的某个文件，或单击文件夹图标浏览到站点上的某个文档，或手动键入URL。5.对齐:可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。当图像与图像在网页中对齐时，可由属性面板中的按钮、来确定，当图像与文本、插件或其它元素对齐时，可将图像视为一般字符，运用属性面板中的列表来确定。6.替代：指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。7.地图名称和热点工具：允许您标注和创建图像映射。8.垂直边距和水平边距：沿图像的边缘添加边距(以像素为单位)。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。若图像和文字贴得太近，容易使人产生压迫感。因此，适当调整图像间边距可以使浏览者在浏览网页时更加舒适。9.目标：指定链接的页应当在其中载入的框架或窗口。(当图像没有链接到其它文件时，此选项不可用。)当前框架集中所有框架的名称都显示在“目标”列表中。也可选用下列保留目标名： _blank:将链接的文件载入一个未命名的新浏览器窗口中。 _parent:将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果包含链接的框架不是嵌套的，则链接文件加载到整个浏览器窗口中。 _self:将链接的文件载入该链接所在的同一框架或窗口中。此为默认值。 _top:将链接的文件载入整个浏览器窗口中，因而会删除所有框架。10.低解析度源：指定在载入主图像之前应该载入的图像。11.边框:以像素为单位的图像边框的宽度。默认无边框。12.编辑：启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图像。13.优化：打开“优化”对话框,使用 Fireworks优化图像。14.裁剪：修剪图像大小，删除不需要的区域。15.重新取样：对已调整大小的图像重新取样，提高图片在新的大小和形状下的品质。16.亮度和对比度：调整图像的亮度和对比度设置。17.锐化：调整图像的清晰度。相关理论3编辑图像讲解：编辑图像裁剪 亮度/对比度 锐化相关理论4图像占位符的使用 讲解：图像占位符的简介插入图像占位符的方法替换图像占位符的方法插入图像占位符在Dreamweaver中插入图像占位符的基本操作：1.将光标置于要插入图像占位符的位置，在插入工具栏的“常用”分类中选择“图像占位符”按钮或选择“插入”菜单中的“图像对象”中的“图像占位符”命令，打开“图像占位符”对话框。2.在对话框中进行设置：(1)在“名称”文本框中，输入要作为图像占位符的标签文字显示的文本。名称可有可无，必须以字母开头，且只能包含字母和数字；不允许使用空格和高位 ASCII 字符。(2)在“宽度”和“高度”文本框中，以像素为单位键入数字以设置图像大小。 (3)为图像占位符选择一种颜色，可以使用颜色选择器或直接输入颜色的十六进制值(如 #FF0000)或输入网页安全色名称(如 red)。(4)在“替代文本”中，为使用只显示文本的浏览器的访问者输入描述该图像的文本。3单击“确定”。网页文档中即会出现图像占位符。插入“鼠标经过图像”鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时，图像变为另一幅图像；而鼠标指针离开时，图像又恢复为原始图像。这种效果通常用于导航条、图像互动等。它由两幅图像组成，一是首次载入时显示的图像即原始图像，二是鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像；如果这两个图像大小不同，Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性。小结如何实现插入图像？编辑图像主要包括哪几种形式，如何使用？说出如何插入、替换图像占位符？理论案例2带音乐的灌篮高手介绍页 完成案例：带音乐的灌篮高手介绍页 涉及的知识点：插入背景音乐控制音乐的属性 教师讲解实现思路 相关理论插入背景音乐 讲解：常用音频格式介绍MP3、MIDI、WMA、WAV、RM插入背景音乐 理论案例3灌篮高手动画宣传页 完成案例：灌篮高手动画宣传页 涉及的知识点：插入Flash文件编辑Flash文件相关理论设置Flash文件 讲解：插入Flash文件（快捷键Ctrl+Alt+F） 编辑Flash文件总结网页上常用的图像类型主要有哪几种？ 如何实现图文混排？ 如何直接对图像进行编辑 ？如何制作插入背景音乐的网页？上机部分相关理论回顾如何设置图像属性？如何插入背景音乐？ 如何在网页中插入Flash文本？ 上机目标拍拍网-变形金刚玩具宣传页 拍拍网-变形金刚20周年宣传页面 实练案例1变形金刚玩具宣传页 需求描述 变形金刚玩具宣传页实现思路 构思布局通过插入文本、图像和背景音乐并进行设置来实现丰富的页面实练案例2变形金刚20周年宣传页面需求描述拍拍网-变形金刚20周年宣传页面实现思路插入文本插入Flash文件并进行设置来实现文字与Flash文件混排 总结巩固：在网页中编辑图像、在网页中插入背景音乐文件、在网页中插入FLASH文件布置作业：p95 2-5参考资料：教材教学后记：编写日期：2010年11月3日编写人员：朱小燕授课班级授课日期授课题目：第四章 HTML与Dreamweaver的代码视图目的要求：读懂Dreamweaver CS3代码视图中的代码；了解HTML文档的结构；认识常用HTML标记 重点难点：设计视图与代码视图的关系；HTML文档的结构；常见标记以及属性组织教学：点名考勤；复习；引入新课；讲解理论知识；实例演示；指导学生练习；总结总结复习导入新课：当畅游Internet时，透过浏览器所看到的网页，实际上都由HTML所构成。HTML是创建网页的基础语言。前面几章学习了使用Dreamweaver CS3制作网页，对么本章就要了解Dreamweaver CS3背后的HTML代码。提问：v 如何设置图片属性？v 如何使用Dreamweaver CS3来调亮图像？v 如何使用图像占位符？v 如何在网页中插入背景音乐？如何在网页中插入Flash文件？教学方式、手段、媒介：教学手段：讲授、多媒体；媒介：教材授课内容：第四章 HTML与Dreamweaver的代码视图 理论部分本章目标：相关理论HTML语言简介 讲解：什么是HTML语言：HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。HTML文档源代码的查看方式：1、在浏览器中查看源文件2、在Dreamweaver CS3中的代码视图中察看源代码在浏览器中使用“另存为”的方式将网页存到本机上，使用拆分视图相互对照进行研究，是非常有效率的一种自学方式。HTML标记的组成 HTML语言规范标记符：1、单标记 ： 2、双标记 ：内容3、属性 小结：1、HTML与XHTML的区别是什么？2、标记符分为几种？写出各自的格式？3、HTML属性的格式及使用规则是什么？理论案例1淘宝网商品详细信息页 完成案例：淘宝网商品详细信息页 涉及的知识点：1、文本相关标记2、图像标记3、嵌套表格4、移动标记相关理论1HTML文档结构讲解：HTML文档结构包括：HTML部分 、HEAD部分 、BODY部分。DOCTYPE声明部分：DOCTYPE声明部分是网页中重要的一部分，但不在HTML文档范围内。相关理论2常见标记以及属性 讲解：文本相关标记：1、标题标记2、字体标记3、段落标记4、换行标记5、图像标记 图像标记中常用的属性有：（1）、src属性：该属性值指示引用图像文件的路径。（2）、alt属性：该属性值用于在鼠标指向该图像时显示的文字说明。该属性的另一个作用。（3）、是，如果浏览器