Dream weaver教案.docx

1、Dream weaver教案Dream weaver教案站点的构建一、 简介Macromedia Dreamweaver MX是最佳静态页面制作工具，与Flash、Fireworks统称为“网页三剑客”Macromedia Dreamweaver MX 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论您愿意享受手工编写 HTML 代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 都会为您提供有用的工具，使您拥有更加完美的 Web 创作体验。二、 系统要求 Intel Pentium II 处理器或等效处理器，30

2、0 MHz 或更快 Windows 98、Windows 2000、Windows NT、Windows ME 或 Windows XP Netscape Navigator 4.0 版或更高版本或 Microsoft Internet Explorer 96 MB 的可用内存 (RAM)（建议采用 128 MB 内存） 275 MB 的可用磁盘空间 分辨率可达 800x600 像素的 256 色显示器（建议颜色为百万颜色，分辨率达到 1024x768像素） CD-ROM 驱动器三、 工作界面标题栏、菜单栏、插入栏、文档工具栏、文档窗口、标签选择器、属性检查器、面板组四、 规划站点在了解了Dr

3、eamweaver的工作界面之后，下面就要进入制作网页第一步了，无论是一个网页制作新手，还是一个专业的网业设计师，都要从搭建站点开始，理清网站的结构。关于站点规划和设计 Web 站点：一组位于服务器上的页，使用 Web 浏览器访问该站点的访问者可以对其进行浏览。 远程站点：服务器上组成 Web 站点的文件，这是从您的（创作者的）角度而不是访问者的角度来看的。 本地站点：与远程站点上的文件对应的本地磁盘上的文件。您在本地磁盘上编辑文件，然后将它们上传到远程站点。设置站点的常规做法是在本地磁盘上创建一个包含站点所有文件的文件夹（称作本地站点），然后在该文件夹中创建和编辑文档。当准备好发布站点并允许

4、公众查看时，再将这些文件拷贝到 Web 服务器上（称作远程站点）。这种方法要比在实时公共 Web 站点上创建和编辑文件好，因为它允许您在公开各种更改之前，在本地站点先测试这些更改，然后在完成后立即上传本地站点文件并更新整个公共站点。本地站点和远程 Web 站点应该具有完全相同的结构。如果您使用 Dreamweaver 创建本地站点，然后将全部内容上传到远程站点，则 Dreamweaver 确保在远程站点中精确拷贝本地结构。1、确定目标 确定站点的目标是创建 Web 站点时应该采取的第一步。向自己或客户提出有关站点的问题。您希望通过 Web 站点来实现什么目标？写下目标，以便在设计过程中时刻提醒

5、自己。目标使您可以集中注意力，针对特定的需要来设计和规划 Web 站点。2、选择目标用户 确定了Web 站点的目标之后，需要确定希望谁访问站点？这看起来可能是一个愚蠢的问题，因为大多数人希望每个人都访问他们的 Web 站点。但是，创建世界上每个人都能使用的 Web 站点是很困难的。人们使用不同的浏览器，以不同的速度连接，并且可能有也可能没有媒体插件。所有这些因素都会影响站点的使用。这就是需要确定目标用户的原因。考虑一下谁将被您的 Web 站点吸引或者您希望吸引谁。您认为他们将使用何种计算机？哪种平台可能占主导地位（Macintosh、Windows等）？平均连接速度是多少？他们将使用何种浏览器

6、和何种显示器尺寸？所有这些因素会极大地影响您的网页对访问者显示的方式。选择了用户并确定他们将使用何种计算机、连接速度和浏览器后，就可以确定设计目标了。 3、收集资料规划站点结构收集创建站点所需要的资料，如：文字资料、图片、声音、动画、代码等收集资料之后，要整理这些资料，把这些资料分门别类的放到不同的文件夹中，这个便于管理整个站点4、创建设计外观如果在实际使用 Dreamweaver 开始工作之前规划了设计和布局，在以后的设计中就可以节省许多时间。方法很简单：根据所需的站点布局外观，在纸上创建一个实物模型图。还有更高级的方法，就是使用诸如 Macromedia FreeHand 或 Firewo

7、rks 等软件创建站点的合成图。重要的是要有一个布局和设计的实物模型，以便以后建立站点时可以按照它来操作。五、 创建站点站点面板创建站点具体规划站点布局（创建WEB页和创建文件夹）站点的管理（站点的新建、复制、删除）六、 插入栏的使用（常用、字符、文件头） “常用”选项图像占位符：现在创建占位符来代替您将在稍后添加的图像帮助我们对页面进行布局。 鼠标经过图像：鼠标经过图象是一种网页中最觉见的互动技术，即当鼠标经过图象时，图像会随之发生变化。鼠标经过图象效果由两张图组成：一张称为主图，一张称为次图。主图像是首次载入网页时显示的图像，次图像是鼠标经过时更换的另一张图像。一般要求主图像和次图像的大小

8、是相等的，如果不相等，Dreamweaver会以主图像大小为准调整次图的大小。 导航条、水平线、日期、插入Flash动画“文件头”选项MeTa:关键字：许多搜索引擎装置（自动浏览网页为搜索引擎收集信息以编入索引的程序）读取关键字 meta 标签的内容，并使用该信息在它们的数据库中将您的页面编入索引。因为有些搜索引擎限制索引的关键字或字符的数目，或者当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。在标记为“关键字”的文本框中输入关键字，并以逗号隔开。 说明： 许多搜索引擎装置（自动浏览网页为搜索引擎收集信息以编入索引的程序）读取说明 meta 标签的内容。有些使用该信

9、息在它们的数据库中将您的页面编入索引，而有些还在搜索结果页面中显示该信息（而不只是显示文档的前几行）。有些搜索引擎限制索引字符的数目，所以最好将说明限制为几个字（例如，Pork barbecue catering in Albany, Georgia佐治亚州的奥尔巴尼市提供猪肉烧烤 或 按合理的价格为全球客户进行 Web 设计）。 在标记为“说明”的文本框中输入描述性文本。刷新： 使用刷新元素可以指定浏览器在一定的时间后应该自动刷新页面 - 重新载入页面或转到不同的页面。该元素通常用于在显示了说明 URL 已改变的文本消息后，将用户从一个 URL 重定向到另一个 URL。 延迟是在浏览器刷新页

10、面之前需要等待的时间（以秒为单位）。若要使浏览器在完成载入后立即刷新页面，请在该文本框中输入 0。动作指定在指定的延迟后，浏览器是应该转到另一个 URL 还是刷新当前页面。若要打 另一个 URL 而不是刷新当前页面，请单击“浏览”按钮，然后浏览并选择要载入的页面。基础：使用基本元素可以设置页面中所有文档相对路径相对的基本 URL。链接：使用链接元素可以定义当前文档与其它文件之间的关系。七、 使用Photoshop /CorelDR /IIIustrator /Freehand 创建一个页面(练习切片的使用) 表格排版一、 页面规划布局在制作网页的过程中，对页面元素进行规划可以使用“标准视图”、

11、“布局视图”以及“层”三种方法。 层：IE4.0以下的浏览器不支持，很难实现网页元素居中对齐（层与表格可以互相转换） 布局视图：布局视图表格过于复杂，所以做大型网站或精益求精的网站，还是使用表格进行排版为好二、 表格的使用-(标准视图)1、插入表格：插入表格（Ctrl+Alt+T） 插入栏表格按钮在插入表格时，设置表格宽度和高度时会遇到两种单位： 像素为单位：特点是表格的大小是固定的，表格的大小不会随着浏览器窗口的大小而变化。 百分比为单位：特点是表格的大小会随着浏览器窗口的大小变化而自动调整。也就是说前者是表格的绝对 尺寸，而后者则是表格的相对尺寸，各有各的好处。2、表格大小的调整以及表格的

12、格式化表格大小的调整、单元格的选定，行与列的插入与删除、表格边框和背景的设置以及格式化表格3、表格的应用技巧 一般情况下，网页最外层的表格，一定要使用象素做为度量值，否则表格的宽度随着浏览器的大小而变化，那页面上的内容将不甚不目。如果是嵌套的表格，可用百分比做单位，因为该表格所在的单元格宽度是一定的，所以使用百分比或象素都可以。 一般情况下，不建议使用嵌套表格，应该使用单元格来代替表格，这样可以减少浏览器渲染的时间，但要综合考虑，单元格之间需要配合，修改一个单元格的属性，很可能牵扯到其它单元格，所以，一般情况下，宁愿使用嵌套表格。如果使用嵌套表格，最好不要超过4级。 一般情况下，在网页排版时很

13、少会去设置表格的高度，因为当表格内放置文字或图片时，文字或图片就会自动把表格的高度往下撑开，因此设置表格的高度通常显得意义不大。4、格式化表格 / 表格排序命令格式化表格(表格排序)三、 表格的使用-(布局视图)表格的布局视图是Dreamweaver中新增加的功能，主要是为了改善原有的表格操作方式，避免使用传统的方法创建表格时经常出现的一些问题。在表格的布局视图中，我们可以任意摆放单元格的位置，只要使用鼠标拖拽的方式就能轻松地规划出十分复杂的网页版面。（设置间隔图像：当我们不对每一个单元格都设置宽度时，也就是让单元格的宽度自动延伸时，往往会将有些单元格挤压到非常小甚至不可见，或者在使用表格拼合

14、图片时产生不必要的间隙。惟一解决方法是在单元格内放置一张“透明”的间隔图片，撑住单元格的宽度，这样就能保证表格效果不变。间隔图片是一张长度和宽度都只有1像素的透明图片，因此在表格中几乎感觉不到它们的存在，它只会在表格最下一行撑住表格的宽度。默认的间隔图像名称为space.gif，选择“编辑”参数选择，即可创建间隔图像。）四、 HTML语言基础HTML是一种超文本标识语言，在网页的编辑中，用于标识网页中的不同元素。一般由一个封闭的标记组成。HTML文件是分层组织的，最外层是标记，在html标记内一般由headt和body两层。在这些标记内可以嵌套其它标记。与区域中包含有：网页的标题，所设置的值以

15、及该文档中所用到的CSS样式标记等。与区域中包含的是网页内容的显示部分。与区域中所标注的是一段文字。与区域中所标注的是一个表格中所包含的所有内容。其中与区域所标注的是一个表格中一行单元格的内容。与区域中所标注的是一个表格中一个单元格的内容，可以通过单击窗口左下角的标签检查器上的标签选定一或一个单元格。图像标记，一般格式为选中标记栏中标记，均可选中所对应的图像。五、 历史记录面板 撤消一步或多步操作 重放：单击“重放”按钮，则上面选中的步骤会重复执行一次。 拷贝所选步骤到剪贴板：可以将所选中的步骤拷贝到剪贴板，应用到其它文档中去。 将定的步骤保存为命令：将特定的步骤保存为命令，被保存的命令可以长

16、期使用，即使退出 Dreamweaver也不会丢失 命令菜单“开始录制”：对步骤进行录制，自动完成某些操作。（但退出Dreamweaver后就会消失）六、 复杂表格排版实例 链接一、 超级链接基础超级链接是Internet的魅力所在，为了把Internet上众多的网站和网页联系起来，构成一个有机的整体，在网页中就少不了超级链接。只有通过网页上的超级链接，才能真正地实现网络无国界，做到真正的“互联”。Dreamweaver作为如此优秀的网页编辑工具，在管理超级链接方面也有它独到之处。下面我们就来学习如何创建与管理超级链接。1、超级链接的概念所谓超级链接就是从一个网页转换到另一个网页。我们可以从一

17、个网站的首页转到其它页面，也可以从一个站点转到另一个站点2、超级链接的分类网页中的超级链接如果按照链接的范围来分的话大致可以分为三类： 内部链接：在同一个站点的不同网页之间建立的链接就是内部链接。 外部链接：从一个站点转到另一个站点。 锚记链接：同一个页面不同的部分3、链接的路径使用超级链接前，大家有必要掌握一下网址路径的概念。特别是对于初学者来说，如果不能很好的理解各种路径的概念，在制作网页中的超级链接时可能会出现很多错误，导致网页无法正常显示。路径一般分为两种，即相对路径和绝对路径绝对路径：绝对路径非常明确地指出了所链接的网页位置或是文件位置，无论用户怎样修改网站的目录结构，都不会影响绝对

18、路径所指向的对象或路径，所以不用考虑源文件的位置。一般来说，只有当你在页面中创建处部链接的时候才必须使用绝对路径。（相对路径：相对路径不能明确给出所链接的网页的位置或文件的位置，而是以站点根目录为基准给出文件的相对位置。一般内部链接都采用相对路径。二、 创建超级链接1、直接创建超级链接单击“插入”栏中的“创建超级链接”按钮弹出创建超级链接的对话框v _blank，将链接的文件载入一个未命名的新浏览器窗口中。 v _parent，将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件。v _self，将链接的文件载入该链接所在的同

19、一框架或窗口中。此目标为默认值，因此通常不需要指定它。v _top，在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。 v 在“Tab 键索引”域中，输入 Tab 键顺序的编号。v 在“标题”域中，输入超链接的标题。v 在“访问键”域中，输入键盘等价键（一个字母）以便在浏览器中选择该超链接。2、为文本和图片创建超级链接A、选中要创建链接的文本或图片在属性检查器链接项里输入链接的地址/指向文件/浏览文件B、选中需要设置链接的文本或图像后，按住Shift键，托动鼠标指向链接的目标位置C、如果要为同一个图片的不同部分创建链接，需要设置图片热点区3、创建电子邮件链接在网页上创建电子邮件超级链接，

20、可以方便地让访问者反馈意见，访问者只需要单击页面上的电子邮件链接即可启动默认的邮件发送客户端程序。A、单击“插入”菜单电子邮件链接命令或“插入”栏中的插入链接铵钮或者选定页面中的文本也可从弹出的对话框中设置电子邮件链接B、可先选定要创建电子邮件链接的文本或图片 然后在“属性检查器”面板创建链接文本框中输入链接的邮箱地址即可 如：mailto:fenghuijuanC、还可以使用一些附加参数来提高E-mail链接的功能，例如： mailto:info?subject=您好！可以为邮件增加主题 mailto:info?subject=您好！&cc=advice可以为邮件增加抄送地址4、在页面中添加

21、锚点链接锚点链接可以让你在同一个页面的不同部分进行跳转锚记，也称为书签，用来编辑网页文档中的特定位置，使其可以跳转到当前文档或其他文档中的标记位置。（1）把光标定在要插入锚记的地方，一般是将光标放置在一行或是一段文字的开头部分 （2）输入锚记名称，锚记命名不支持中文，只能使用字母和数字，区别英文字母的大小写，中间不能含有空格或特殊字符（3）在“属性检查器”面板“链接”文本框中输入符号#和已创建锚记的名称或：选中需要设置锚记链接的文本或图像后，按住Shift键，托动鼠标指向锚记或：按住属性面板上的“指向文件”按钮，并拖动鼠标指向锚记，也可实现锚记链接效果三、 管理超级链接1、设置超级链接的颜色A

22、、 可使用“修改”“页面属性”B、 可使用“命令”“设定配色方案”2、利用站点地图管理超级链接A、单击站点面板右边的“展开/折叠”按钮选择“站点地图”B、更新超级链接：在制作网页过程中，可能你为了某种特定的需要，必须改变站点某个文件的文件名，可是这样的话，那些链接此网页的链接目标名称也必须更换，如果一个一个地手动更新的话，不仅麻烦而且极易产生差错。可以利用“站点地图”功能来更新超级链接。更新方法：首选单击选取中你要改名的文件再次单击该文件名，输入一个新的名称后按回车键即可，此时会弹出一个“更新文件”对话框，我们选择“更新”即可3、检查链接把所有页面制作好后准备上传站点以前，为了有保证上传之后的

23、站点能够顺利运转，你需要在本地对站点的各个方面进行检查，包括链接、使用目标浏览器检查页面的兼容性等。（1）利用“链接检查器”，可在当前文档或整个站点或是选定的区域中检测链接的情况窗口结果链接检查器(Shift+Ctrl+F9)断掉的链接：显示包含有断裂超级链接的网页名称。外部链接：显示包含外部超级链接的网页的名称。孤立文件：显示网站中没有被使用到的或没有被链接到的文件，即叫孤立文件。（2）修复站点中断开的超级链接 A、双击“文件”栏中的文件名，打开网页（在你打开网页时断裂的超级链接会被自动选择），然后你就可以使用属性面板中的“链接”选项进行修改。 B、单击“无效链接”栏中的文件名，在文件名的右

24、侧即出现一个文件夹按钮，你可以单击此按钮重新选择链接的目标。（3）处理处部超级链接在“链接检查器”浮动面板的“显示”标识符后的下拉列表框中选择“外部链接”选项，则Dreamweaver将自动列出网站中所有的外部链接，但是Dreamweaver并不会自动检查这些外部链接是否正常，所以你必须亲自动手链接外部网站进行检查。通常，在此面板检查外部链接有如下两种方法：A、双击网页文档名称，打开网页查看是否有出错的超级链接。B、单击列表栏中的超级链接，则此超级链接的地址被选中，你可以把它复制到浏览器的地址输入框中检查中否正确地连接到网站。四、 有关超级链接注意事项2、 一个页面不要超过20个链接3、 链接

25、不要超过4层4、 巧妙使用锚点（如果页面太长，一般不要超过3屏）5、 首页和上一层：有时访问者不是从网站的首页进入，所以设置首页和上一层的链接，会使访问更清晰。CSS样式五、 CSS样式（级联样式表/风格样式表/层叠样式表）CSS样式就是用来美化页面的。随着网页语言的发展，使用CSS样式排版的网页逐渐成为主流。无论是文字、段落背景还是图像，CSS都能很好的去设置它们的格式。1、CSS样式分类（1）嵌入式：就是独立于文档应用的CSS样式（2）外部链接式：应用于多个文档，生成专门的*.CSS文件2、创建CSS样式先定义样式的类型设定样式处观应用样式（1）CSS样式类型： 创建自定义样式： 自定义样

26、式就是生成一个新的样式，在应用样式的时候，首先选中对象，然后选择样式即可。是一种最灵活的样式，自定义样式首先要命名。命名的方式以一个英文句号开始（如果没有，Dream weaver会自动添加），然后是英文的名字，这里不可以使用中文命名。 重定义HTML标签：就是将现有的HTML标签赋上样式。很多标签都是成以出现的，所以成对的标签之间的对象就会应用CSS样式。 标签样式的缺点是不具有选择性，如果定义了某个HTML标签，网页上该标签之内的对象都会应用该样式。 使用CSS选择器：CSS选择器是一种特殊类型的样式，是针对链接的文字设定属性的a: link：设定正常状态下链接文字的样式 a: activ

27、e：设定鼠标单击时链接文字的样式a: visited：设定访问过的链接文字的样式 a: hover：设定鼠标放置在链接文字之上时文字的样式（2）CSS样式外观参数设置类型：定义样式的基本类型设置字符格式目前大型网站中几乎全部使用的都是宋体、9 points（点数）字。因为“点数”是计算机字体的标准单位，这一单位的好处是设定的字号会随着显示器分辨率的变化而调整大小，可以防止不同分辨率显示器字体大小不一致的现象。正文推荐使用9 pt的字，9 pt的字和软件界面上的文字字号是一样大小的。10.5pt、12pt也是常用的正文文字字号。还有其他的单位，但都没有“点数”常用。 在CSS样式中定义9点数字，

28、可定义Body和Td标签 行高 这项设置在实际制作中很常用。设置行高，可以选择“正常”，让计算机自动调整行高。也可以使用数值和单位。需要注意的是，单位应该和文字的单位一致。行高的数值是包括字号数值在内的。例如，文字设定为9 pt高，如果要创建一倍的行高，则行高则应该为18 pt。 闪烁：为文字添加闪烁的效果，只有在Netscape浏览器下能显示出这一效果 粗细：可以是相对也可以具体数值，在实际制作中不常用 大小写：IE浏览器不支持这一效果。背景：定义样式背景区块：定义样式空格和对齐方式盒子：宽/高 定义图像大小 填充/边界 定义元素与其它元素之间的空间大小边框：定义样式设置以控制围绕元素的边框

29、列表：设置项目符号和编号定位：定位元素设置扩展：它是更多的对自定义样式功能扩展。但现在大多数浏览器不支持，或者仅受 Internet Explorer 4.0 和更高版本的支持。（3）应用与编辑CSS样式应用“自定义样式” /编辑 /复制 /删除样式（4）创建外部链接的CSS样式及应用要将一个样式应用到同一个站点的不同页面中，就要创建“外部样式”在创建样式时，“定义在”选择“新建样式表文件”把CSS样式保存为一个独立的文件，每次创建网页时只要导入该文件即可层、表单一、层1、层的概念层属于CSS样式一部分，是一种网页元素定位技术。层在网页中主要有两个方面的应用：A、一是制作动态效果：层可以自由地

30、移动，可以显示隐藏，这是应用层创建动态效果的重要原因；B、二是排版：因为层比表格有更大的自由度，可以自由地放置，同时还可以相互嵌套、叠加，所以在很大程度上弥补了表格排版的不足。C、但是，层的定位问题始终得不到解决。编辑窗口中的定位和浏览器中的定位不一致，不同版本的浏览器中的定位也不一致，所以使用层排版的网页注定要产生变形。直到现在，完全使用层排版的网页十分罕见。但是层与表格之间可以互相转换，这是一种折衷的方法。2、层的创建A、 插入菜单层 B、插入栏描绘层 C、直接把“插入栏”中的“描绘层”按钮托到窗口中（按住Ctrl键可以连续画多个层） D、嵌套层：选中要嵌套的层插入层（子层随父层移动/层面板也可判断层是否嵌套） E、分离嵌套层：层面板中可将其直接托出3、层的编辑层的选定：Shift单击或层面板层的大小及位置的改变：Ctrl+Alt方向键（次/象素）Ctrl+Shift+方向键（次/10象素）层的复制（Ctrl+C/Ctrl+V）、删除DEL4、层的属性设置 A、层编号：实际上就是层的名称B、 左和上：到左侧和顶端的距离C、 宽和高：设置层的大小D、 Z轴：设定层的叠加顺序E、 背景图象及背景颜色F、 显