dreamweaver8网页设计教程
Dreamweaver8网页超链接教学设计
ｐａｔｒ ｎｄ ｐｐｉａｉｎ ｓ ｆｗａ ｅ ａ ｈ ａｒｅ．Ｗ ｉｈ ｔ ｅ ” ｂ ｌｎ ｓ ａ ｘ ｍｐ ｅ ｏ ｔ ｓｇ ｔｅ ｃ ｕ ｓ ａ ｅ ｏ ｓｕ ｎ ｓ ｔ ｎ ａ ａ ｌ ｔ ｏ ｔ ｒ ｓ ｔｅ ｃ ｒｉｒ ｅ ｃ ｏ ｔ ｈ ｗｅ ｉ ｋ ” ｓ ｅ ａ ｌ ．ｈ ｗ ｏ ｄｅｉｎ ｈ ｏ ｒｅ ｂ ｓ ｄ ｎ ｔｄｅ ｔ
３ 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ，所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ，碰 到 困 难 要 想 办 法 ，通 过
Ｔｅ ｃ ｉ ｓｇ ｏ ｈｅ Ｄ ｒ ａ ｗｅ ｖ ｒ Ｗ ｅ ｎ ａ ｈ ｎｇ Ｄｅ ｉ ｎ ｆ ｔ ｅ ｍ ａｅ ８ ｂ Ｌｉ ｋｓ
ＧＵＡＮ Ｌｌ ｉ ｉ
（ ｉ ｎｊ ｎ ｉ ｌＨ ｓａ ｄｙ ＆ Ｖｅｅ ｎ ｒ ｏ ａｉｎ ｌＣ ｌ ｇ，Ｈｅｌｎ ｊ ｎ １０ １ Ｈｅｌ ｇｉ ｇ Ａｎｍａ ｕ ｂ ｎ ｒ ｏ ａ ｔｒ ａ Ｖ ｃｔ ａ ｏｌ ｅ ｉ ｙ ｏ ｅ ｉ ｇｉ ｇ ５ １ ） ｏ ａ １
完 成 对 知 识 点 的学 习 与 掌 握 ．增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 ， 让 基 础 一 般 的 学 生 能 对
Ｄ ｅ ｍｗ ａ ｅ８ 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ｒａ ｅ ｖ ｒ
解 ，能掌 握 其 巾的 部 分 内容 ，学 会 学 习 方 法 ，为 以 后
２１ ０ １年 第 ２期
Ｄｒａ ｍｗｅ ｖ ｒ ｅ ａ ｅ８网 页 超 链 接 教 学 设 计
《Dreamweaver-8基础与实例教程》省名师优质课赛课获奖课件市赛课一等奖课件
3.选中表格列
选中表格列旳措施与选中表格行旳措施类似，这里不再 赘述。
4.选中单元格
（1）在要选择旳单元格中按下鼠标左键，并拖，即可选中该单元格。
（1）表旳大小用width=“数值”和height=“数值”属 性阐明。前者为表宽，后者为表高，数值是为像素数 或占窗口旳百分比。
（2）定义表格旳粗细由border=“n”阐明，n取整数， 单位是像素（假如省略，则不带边框）。将border设 成不同旳值，可产生不同旳效果。
（3）表格间距用cellspacing="数值"表达，"数值"旳单 位是像素。
2.该对话框允许您指定表格旳排序方式，若要完毕“排序表格”对话框， 请执行下列操作：
排序按：能够拟定哪个列旳值将用于对表格旳行进行排序。 顺序：拟定是按字母还是按数字顺序以及是以升序（A 到 Z，小数字到大
数字）还是降序对列进行排序。 再按/顺序：拟定在不同列上第二种排序措施旳排序顺序。在“再按”弹
4.5 实例制作
4.5.1虚线表格 4.5.2几种特殊表格旳制作 4.5.3圆角表格 4.5.4利用表格排版制作页面
4.5.1虚线表格
在浏览Internet时，会发觉诸多网站排版所用旳表格 都是经过多种美工制作旳，非常漂亮，不但起到了网 页排版旳作用，而且在很大程度上美化了网页，使网 页看起来非常清爽、简洁。虚线表格就是其中一种。
其基本定义格式如下： <table>…</table> 定义表格； <tr>…</tr> 定义表行 <th>…</th> 定义表头 <td>…</td> 定义表项（单元格）
Dreamweaver8系列DIV+CSS教程网页标准布局实例教程(二)
div+css网页标准布局实例教程（二）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。
先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。
另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话，那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
dw网页制作教程
dw网页制作教程DW（Dreamweaver）是Adobe公司的一款专业网页制作软件，功能强大、易于使用，已经成为众多网页设计师的首选工具之一。
下面是一份简单的DW网页制作教程。
第一步：新建网页打开DW软件后，点击“文件”菜单中的“新建”选项，弹出新建文件的对话框。
选择“空白页面”中的“HTML”选项，点击“创建”按钮，即可新建一个空白网页。
第二步：页面布局在DW软件中，可以使用所见即所得的方式设计网页布局。
点击左边的“插入”面板，选择“表格”选项，然后拖动鼠标在网页上划分表格的排列。
在表格中可以添加文本、图片、链接等内容。
第三步：编辑内容通过双击表格中的单元格，可以进入编辑模式，添加文字或图片等内容。
同时，可以在DW软件中选择字体、颜色、对齐方式等格式选项，使网页内容更加美观。
第四步：插入链接点击“插入”面板中的“超链接”选项，选择需要链接的文本或图片，然后填写目标网页的地址，即可添加链接。
第五步：CSS 样式CSS（Cascading Style Sheets）可以实现网页的样式设计，让网页更加美观和易于维护。
点击“窗口”菜单中的“CSS样式表”选项，弹出样式面板。
可以通过样式面板设置文字样式、背景样式、边框样式等。
第六步：网页预览与编辑点击软件界面右上方的“设计视图”按钮，即可在浏览器中预览网页的效果。
同时，可以切换到“代码视图”查看和编辑网页的HTML代码。
第七步：保存与发布点击软件界面上方的“文件”菜单中的“保存”选项，输入文件名和保存位置，即可保存网页。
要发布网页，需要将网页文件和相关资源文件（如图片）上传到服务器，并确保服务器的正确配置。
以上就是DW网页制作的基本流程和操作方法。
当然，这只是一个简单的入门教程，如果想要掌握更多高级技巧和功能，还需要进一步学习和实践。
希望这份教程对您有所帮助！。
Dreamweaver8教程
Dreamweaver8教程1、Flash透明化：插入Flash动画后，点击Flash图画，在属性中选择“参数”，在参数对话框左侧参数处填“wmode”，在右侧值的对应处填“transparent”，再点击“确定”即可。
2、设置滚动字幕：把光标插入点放在需要插入滚动字幕的地方，点击插入面板的“标签选择器”图标，选择“HTML标签”下的“页标签”中的“marquee”。
再转到代码视图，选择“窗口”——>“标签检查器”，在属性中单击未分类前面的“+”，可以在“标签检查器”中设置标签的各种用法。
点击“behavior”设置项右边的下拉箭头，选择滚动字幕内容的运动方式（“alternate”指内容在相反两个方向滚动，“scroll”指内容在同一方向滚动，“slide”指内容接触到字幕边框就停止滚动），direction属性设置字幕内容的滚动方向（down 向下滚动，left向左滚动，right向右滚动，up向上滚动），scrollamount属性设置字幕滚动的速度，scrolldelay属性设置字幕内容滚动时停顿的时间（单位毫秒），width属性设置字幕宽度，style属性设置字幕内容的样式，loop属性设置字幕内容滚动次数（默认或-1为无限）；在“行为”面板中，onMouseOver事件设置鼠标移动到滚动字幕时的动作（常设置为停止滚动），onMouseOut事件设置鼠标离开滚动字幕时的动作（常设置为开始滚动）。
（例:向上滚动字幕代码<marquee behavior=”scroll”direction=”up”width=”200”height=”150”loop=”-1”scrollamount=”1”scrolldelay=”1”style=”front:12px;”onMouseOver=”this.stop();” onMouseOut=”this.start();”>滚动字幕内容</marquee>3、插入关键字：（关键字用来帮助搜索引擎寻找网页的）选“插入”、“HTML”、“文件头标签”、“关键字”，在空白处输入关键字（多个关键字之间用逗号隔开）。
dreamweaver8网页设计 第六章 使用超链接和行为
1．“弹出信息”行为 弹出信息”
有时候，我们在打开某个网页或单击网页中的某 个元素时可以看到弹出信息框。应用“弹出信息” 行为可以轻松实现该功能，本节我们就来看看 “弹出信息”行为的应用。
2．“设置状态栏文本”行为 设置状态栏文本”
所谓“状态栏文本”，就是在网页运行时浏览器 下方的状态栏中显示的文本。好多个人网站都设 置了状态栏文本，以表达网站主人的心声。本节 我们来看看如何为网页设置状态栏文本。
6.1.3 设置图片链接和下载链接
所谓图片链接，就是在单击网页中的某个小图片 时在新窗口中打开一幅大图片；下载链接是指单 击某个超链接时会打开一个“文件下载”对话框 （或自动启动下载工具），通过在该对话框中单 击“打开”或“保存”按钮，可以打开或下载文 件。
6.1.4 设置电子邮件链接
很多网站上留有电子邮件地址，单击该地址可 打开“Outlook Express”的“新邮件”窗口，这 是一种特殊类型的链接，又叫电子邮件链接。
综合实例2 综合实例2—为“SM”网站主页添加伴随窗 SM” 口
本例将在综合实例1中制作好的“index.html”网页 文档的基础上，为网站主页添加伴随窗口。
“行为”面板是应用行为所不可缺少的工具，本 节来认识一下“行为”面板。选择“窗口”>“行 为”菜单，或按【Shift+F4】组合键，即可打开 “行为”面板。
6.2.3 应用行为
如果要对某个对象应用行为，需要先选中该对象， 然后单击“行为”面板上方的“添加行为”按钮 ， 在打开的行为列表中选择动作，并在打开的窗口 中设置效果，最后指定设定的动作在什么情况下 发生，也就是指定事件。
3．“打开浏览器窗口”行为 打开浏览器窗口”
应用“打开浏览器窗口”行为，可实现单击目标 文字或图片打开固定大小窗口的效果。许多站点 都使用这种方式来弹出重要的通知、广告信息等 页面。
dreamweaver8网页设计教程
d re a m w e a v e r8网页设计教程本页仅作为文档封面，使用时可以删除This document is for reference only-rar21year.March《dreamweaver8网页设计》目录第一章遨游DREAMWEAVER8精彩世界错误!未定义书签。
第二章创建与规划站点错误!未定义书签。
第三章文本及其格式化错误!未定义书签。
第四章表格错误!未定义书签。
第五章图像错误!未定义书签。
第六章框架错误!未定义书签。
第七章页面布局视图的使用错误!未定义书签。
第八章链接错误!未定义书签。
第九章层与时间轴错误!未定义书签。
第十章表单错误!未定义书签。
第十一章行为错误!未定义书签。
第十二章制作动态页面错误!未定义书签。
第十三章代码片断、库项目和模板错误!未定义书签。
第十四章网页的制作错误!未定义书签。
第十五章网站的测试与上传错误!未定义书签。
第十六章使用FIREWORKS 8处理网页图像错误!未定义书签。
第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用FrontpageDreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
中职网页设计与实训整套课件完整版ppt教学教程最全电子讲义教案最新
黄 色
#FFFF00
yellow
白 色
#FFFFFF
white
任务3.2 网页的基本制作
知识3.2.1 页面属性
建立网页时，需要对网页的“外观”、“链接”、“标题”等进行基本的设置，这些设置需要在“页面属性”中完成。
页面属性对话框
知识3.2.2 META标记
知识2.1.2 网站规划
一 ．确定目标群体
在创建一个站点之前，首先要确定站点是给什么人访问的，即确定站点的用户群体，以便于确定在站点内添加的内容、为网站设计不同的视觉内格、色彩效果等。
化妆品网
二 ．确定站点功能
确定了站点的目标群体后，就要设计网站需要为这些用户实现哪些愿望和功能，以确定网站各方面的内容及效果要求，例如如果是企业网站，就应立足于企业形象来展开，如果是购物网站，就要强化网站的在线购物等功能。
任务4.1 文本基本操作
文本作为网页中最基本的信息载体，以最直接、最直观的方式使用户获取信息，在网页中有着不可替代的地位与作用，它涵盖的信息量大，插入、编辑操作简便，容易被浏览器下载，不会像图片一样占用太长的等待时间，因此掌握好文本的操作，对于网页制作是最基本的技能。
知识4.1.1 选择性粘帖
Dreamweaver 8网页设计与实训
走进Dreamweaver8
创建本地站点
网页基础知识和基本制作
文本编辑
图像与多媒体的应用
网站链接
表格和布局
框架
表单
模板和库
CSS样式
行为和JavaScript
层和时间轴
整站建设、测试与上传
动态网站制作
项目一 —走进Dreamweaver 8
Dreamweaver 8中文版实用教程 第1章_认识Dreamwaver
II.
III. 使用“CSS样式”面板还可以在“ 全部”和“正在”模式下修改CSS 属性
“正在”模式下的 “CSS样式”面板
“全部”模式 下的“CSS样式” 面板
CSS布局的可视化
I. II.
应用可视化助理来描画CSS布局 边框或为CSS布局加上颜色； 应用可视化助理可揭示出复杂 的嵌套方案，并改善所选内容
后台文件传输
“插入Flash视频”命令
缩放工具
功 能：
•
放大并检查图像，使用复杂的嵌
套表格布局
II.
缩小可预览页面的显示方式
缩放工具
辅助线
功能： I. 测量页面布局，将页 面布局和页面模型加 以比较，精度可达像 素级别 可视化反馈有助于准 确地测量距离，并且 支持智能靠齐 辅 助 线
II.
后台文件传输
可以在获取或上传文件期间执行其他与服务器无关的活动。背景文件传输 对于Dreamweaver所支持的所有传输协议都适用：FTP、 SFTP、LAN、 WebDAV、Microsoft Visual SourceSafe和RDS。
在文件传输期间无法执行的与服务器相关的活动包括： 上传/获取/存回/取出文件。 撤消取出。 创建数据库连接。 绑定动态数据。 预览动态数据。 插入 Web 服务。 删除远端文件或文件夹。 在测试服务器上的浏览器中预览。 将文件保存到远程服务器。 从远程服务器插入图像。 从远程服务器打开文件。 在保存时自动上传文件。 将文件拖动到远端站点。 剪切、复制或粘贴远端站点上的文件。 刷新“远程”视图。
2005年8月, 美国 Macromedia公司推出了Dreamweaver 8 Dreamweaver是目前主流的网页设计工具，不仅具有强大的 页面 设计功能，而且具有完善的站点管理能力，使用Dreamweaver设计网 页将是一个便捷、高效的工作流程 Dreamweaver 8结合了Dreamweaver 的可视化排版功能，融合了
第8章 网页制作工具Dreamweaver 8
图8-14 站点参数设置
8.2 站点管理
所谓站点，可以看做是一系列文档的组合，这些文档之 所谓站点，可以看做是一系列文档的组合， 间通过各种链接关联起来，可能拥有相似的属性，例如， 间通过各种链接关联起来，可能拥有相似的属性，例如，描 述相关的主体，采用相似的设计，或者实现相同的目的等， 述相关的主体，采用相似的设计，或者实现相同的目的等， 也可能只是毫无意义的链接。利用浏览器， 也可能只是毫无意义的链接。利用浏览器，就可以从一个文 档跳转到另一个文档，实现对整个网站的浏览。 档跳转到另一个文档，实现对整个网站的浏览。 8.2.1 本地站点和远端站点 严格地说，站点也是一种文档的磁盘组织形式， 严格地说，站点也是一种文档的磁盘组织形式，它同样 是由文档和文档所在的文件夹组成的。 是由文档和文档所在的文件夹组成的。设计良好的网站通常 具有科学的结构，利用不同的文件夹， 具有科学的结构，利用不同的文件夹，将不同的网页内容分 门别类地保存，这是设计网站的必要前提。结构良好的网站， 门别类地保存，这是设计网站的必要前提。结构良好的网站， 不仅便于管理，也便于更新。 不仅便于管理，也便于更新。
图8-12 常规参数设置中更改工作区
8.1 Dreamweaver简介 Dreamweaver简介
8.1.2 Dreamweaver 8的参数设置 8的参数设置 2．新建文档参数设置 新建文档参数设置用于建立默认的新文档类型和首选参数。 新建文档参数设置用于建立默认的新文档类型和首选参数。 选择“分类”列表中的“新建文档”选项， 选择“分类”列表中的“新建文档”选项，对话框右侧显示出相关 的属性，如图8-13所示。 的属性，如图8 13所示。 所示
图8-5 文档工具栏的常用命令和选项
8.1 Dreamweaver简介 Dreamweaver简介
Dreamweaver8教程(三)
Dreamweaver8.0创建模板在我们制作网站的过程中，为了统一风格，很多页面会用到相同的布局、图片和文字元素。
为了避免大量的重复劳动，可以使用Dreamweaver8提供的模板功能，将具有相同版面结构的页面制作为模板，将相同的元素（如导航栏）制作为库项目，并存放在库中可以随时调用。
一、创建模板模板的创建有三种方式。
1、直接创建模板选择“窗口/资源”命令，打开“资源”面板，切换到模板子面板，如下图所示。
单击模板面板上的“扩展”按钮，在弹出菜单中选择“新建模板”这是在浏览窗口出现一个未命名的模板文件，给模板命名。
然后单击“编辑”按钮，打开模板进行编辑。
编辑完成后，保存模板，完成模板建立。
2、将普通网页另存为模板打开一个已经制作完成的网页，删除网页中不需要的部分，保留几个网页共同需要的区域。
选择“文件/另存为模板”命令将网页另存为模板。
在弹出的“另存模板”对话框中，“站点”下拉列表框用来设置模板保存的站点，课选择一个选项。
“现存的模板”选框显示了当前站点的所有模板。
“另存为”文本框用来设置模板的命名。
单击“另存模板”对话框中的“保存”按钮，就把当前网页转换为了模板，同时将模板另存到选择的站点。
单击“保存”按钮，保存模板。
系统将自动在根目录下创建Template文件夹，并将创建的模板文件保存在该文件夹中。
在保存模板时，如果模板中没有定义任何可编辑区域，系统将显示警告信息。
我们可以先单击“确定”，以后再定义可编辑区域。
3、从文件菜单新建模板选择“文件/新建”命令，打开“新建文档”对话框，然后再类别中选择“模板页”，并选取相关的模板类型，直接单击“创建”按钮即可。
Dreamweaver8.0定义可编辑区域模板创建好后，要在模板中建立可编辑区，只有在可编辑区里，我们才可以编辑网页内容。
可以将网页上任意选中的区域设置为可编辑区域，但是最好是基于HTML代码的，这样在制作的时候更加清楚。
在文档窗口中，选中需要设置为可编辑区域的部分，单击常用快捷栏的“模板”按钮，在弹出菜单中选择“可编辑区域”项。
Dreamweaver8¸0网站与网页制作教程
Chapter 5 Table and CSS
页面的布局对于网页制作来说很重要，在进行 布局时可使用表格、层和框架等网页布局工具， 使页面布局更合理、更美观。表格、层和框架 各有优点、缺点，在布局页面时应结合使用多 种布局工具，设计出理想的页面。
“亘”字型网页布局结构：适合内容较少、整个 站点页面内容相似的网站。 “目”字型布局结构：该结构页面信息量大，一 般应用于大型网站。 “匚”右框型布局结构：这种布局方式在网页制 作中较为广泛，初学者容易上手。
1. 选择整个表格 法一：单击表格的左上角或单击右边或 底部边缘的任意位置 法二：单击表格中的任意单元格，然后 在文档窗口左下角的标签选择器中选择 table标签 法三：单击单元格，选择“修改”菜单 下的“表格”子菜单中的“选择表格”
5.2 表格的选定
Selecting the table
典型案例——用CSS样式设置文本格式
下面练习用CSS样式为“银杏树”网页进行文 本格式设置。
最终效果图
让背景不跟随内容 滚动
背景图片是很多网页设计者经常添加的东西， 当网页内容超出一屏时，拖动滚动条，背景图 片会与内容相对静止的一起滚动，那么能否锁 定背景不跟随滚动呢？当然可以。下面就来试 一下。
4）列表
– “位置”下拉列表框：在其中可以选
择列表文本是否换行和缩进。其中 “内”选项表示当列表过长而自动换 行时不缩进；“外”选项表示当列表 过长而自动换行时以缩进方式显示。
设置“列表”样式对话框
3．应用CSS样式
自定义样式通常是针对网页中个别元素 进行设置时而用到的。其名称前必须以 “.”开始，在网页中自定义样式元素有 两种方法：
第二章Dreamweaver网页设计技术
用布局表格设计页面举例，如图所示。
2.6 层的使用
层可以放在网页任何位置，比表格更灵活，常用来作为表格的补充。 层中不但可以插入文本、图像、表格等对象，还可以在层中嵌套层。
2.保存文档
“文件”菜单→“保存”→选择与逻辑站点相关联的本地站点（如： e:\weblx）→为文件起名→单击“保存”→在Dreavweaver站点面板中单 击刷新按钮。可以看到新建的文件被显示在站点面板中。
3.页面属性
“修改”菜单→“页面属性”，打开“页面属性”对话框，如图所示.
4.使用CSS样式格式化文本
4. 用布局模式布局页面
布局表格用来完成稍微复杂一点的页面布局，还可以与标准表格相互 转换。先用布局表格给页面划分大的区域，再用布局单元格对页面做细致的 划分。 如图所示。
（1）绘制布局表格和嵌套的布局表格
最外层的布局表格只能上下排列，嵌套的布局表格可以上下左右排列。 如图所示。
（2）绘制布局单元格
(4) 拆分单元格
单击一个单元格→“修改”菜单→“表格”→“拆分单元格”→在对话 框中定义拆分的行数或列数，或单击属性面板中的“拆分单元格”按钮。 (5) 使用剪切、复制、粘贴命令对所选单元格进行操作，能保留单元格
的格式设置。
3. 设置表格属性 选定表格后，在表格的属性面板中设置表格属性。如图所示。
2.文档位置和路径 超链接有3种类型：绝对路径、相对路径和基于站点的相对路径。 (1)如果超链接路径中包含所使用的协议，而且与链接源点所处位置无关， 称这种链接路径为绝对路径，例如，一个使用http协议的绝对路径可以写 为：/index.htm。 (2)如果超链接路径描述源点与锚点相对位置，也就是由当前文件所在位 置引起的路径，称这种连接路径为相对路径。使用相对路径的站点结构 和文档相对位置不变，整个本地站点上传到服务器时文档之间的链接关 系不变。所以，提倡使用相对路径。 (3)从站点根目录开始的路径称为站点根目录相对路径，提供从站点文件 夹到文档的路径，与起始端点的位置无关，用斜线“/”表示站点根目录。 例如：/liran/index.htm。这种路径能够保持站点结构和文档相对位置不变， 也被提倡使用。
dreamwaver8.0教程全面完整【范本模板】
Dreamweaver8学习教程一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置"对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。
我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框"来隐藏它。
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建"3个方便实用的项目,建议大家保留.新建或打开一个文档，进入Dreamweaver8的标准工作界面。
Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题显示栏启动Macromedia Dreamweave 8后,标题栏将显示文字Macromedia Dreamweave 8。
0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。
2、菜单栏Dreamweave 8的菜单共有10个,即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。
其中,编辑菜单里提供了对Dreamweaver菜单中［首选参数］的访问。
文件:用来管理文件。
例如新建，打开，保存，另存为，导入，输出打印等。
编辑：用来编辑文本。
例如剪切，复制，粘贴，查找,替换和参数设置等。
查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入:用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。
修改：具有对页面元素修改的功能,例如在表格中插入表格，拆分、合并单元格，对其对象等。
文本：用来对文本操作，例如设置文本格式等.命令：所有的附加命令项站点:用来创建和管理站点窗口:用来显示和隐藏控制面板以及切换文档窗口帮助：联机帮助功能。
中文版中文版Dreamwear_8网页设计_第1章
网页的分类
➢按所处位置分类 ➢按表现形式分类
按所处位置分类
按网页在网站中所处的位置可将 网页分为主页和子页两类。
按表现形式分类
按网页的表现形式可将网页分为静 态网页和动态网页。
网页中的常用术语
➢ 万维网（www） ➢ 浏览器 ➢ 统一资源定位符（URL） ➢ 文件传输协议（FTP） ➢ IP地址 ➢ 域名 ➢ 超级链接 ➢ 超级文本标记语言（HTML）
软件。 ➢ 图像处理软件
制作网页图像的软件种类繁多，大多数网页 设计人员选择的是Fireworks或Photoshop。 ➢ 动画制作软件
网页动画制作中最常用的软件非Flash莫属。
认识Dreamweaver 8
使用Dreamweaver 8制作网 页之前，需先将该软件安装 到电脑中，其方法与安装其 他软件相似，用户可根据提 示操作。
网页是由 HTML（超级文 本标识语言）或 者其他语言编写 的，通过IE浏览 器编译后供用户 获取信息的页面， 它又称为Web页， 其中可包含文字、 图像、表格、动 画和超级链接等 各种网页元素。
什么是网站
网站就是一个或多个网页的集合。 从广义上讲，网站就是当网页发布到 Internet上以后，能通过浏览器在 Internet上访问的页面 。 ➢门户网站 ➢职能网站 ➢专业网站 ➢个人网站
设计网页的原则
➢ 整体规划 ➢ 鲜明的主题 ➢ 善用图像 ➢ 醒目的导航 ➢ 及时更新 ➢ 易记的网站名称 ➢ 通用网页 ➢ 动画适量
网页设计的一般步骤
➢规划网站 ➢收集整理资源 ➢配置站点 ➢创建页面 ➢测试站点 ➢发布站点 ➢维护、更新站点
网页制作的常用工具
➢ 网页设计软件 Dreamweaver是目前使用最多的网页设计
Dreamweaver 8入门经典教程
Dreamweaver 8入门经典教程我们已经描绘了小屋的蓝图，从现在开始，为我们的小屋添砖加瓦吧。
打开01.html，制作一个图文混排的简单页面。
一、页面的总体设置1、设置页面的头内容头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。
鼠标左键单击插入工具栏最左边按钮旁的下拉小三角，在弹出菜单中选择“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以进行头内容的设置了。
设置标题，网页标题可以是中文、英文或符号，显示在浏览器的标题栏中。
我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑了。
插入关键字，关键字用来协助网络上的搜索引擎寻找网页。
要想让更多的人看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键字”对话框，填入关键字即可。
插入META，META标记用于记录当前网页的相关信息，如编码，作者，版权等，也可以用来给服务器提供信息。
单击上图所示的“META”项，弹出“META”对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可以定义相应的信息。
author—作者信息，copyright—版权声明，generator—网页编辑器。
2、设置页面属性单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。
设置外观，“外观”是设置页面的一些基本属性。
我们可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。
我们设置页面的所有边距为0。
设置链接，“链接”选项内是一些与页面的链接效果有关的设置。
“链接颜色”定义超链接文本默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上时文本的颜色，“已访问链接”定义访问过的链接的颜色，“活动链接”定义活动链接的颜色。
“下划线样式”可以定义链接的下划线样式。
设置标题，“标题”用来设置标题字体的一些属性。
如下图所示，在左侧“分类”列表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应用在具体文章中各级不同标题上的一种标题字体样式。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《dreamweaver8网页设计》课程教案目录第一章遨游DREAMWEAVER8精彩世界 (1)第二章创建与规划站点 (3)第三章文本及其格式化 (12)第四章表格 (15)第五章图像 (19)第六章框架 (23)第七章页面布局视图的使用 (27)第八章链接 (30)第九章层与时间轴 (34)第十章表单 (38)第十一章行为 (41)第十二章制作动态页面 (44)第十三章代码片断、库项目和模板 (48)第十四章网页的制作 (51)第十五章网站的测试与上传 (55)第十六章使用FIREWORKS 8处理网页图像 (58)第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
2、讲授新课（1） Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。
3、巩固练习练习使用界面中的各个工具七、作业处理根据本节所学的内容，课堂上练习创建一个空白网页，并且输入一段文字，在文本的左边插入一张图片八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
第二章创建与规划站点课题：规划站点及创建静态站点一、教学基本内容1、站点规划概念2、站点规划的方法3、站点的组成4、定义站点二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、站点组成2、如何创建静态站点难点：1、站点的定义2、编辑、删除站点五、教学目的1、掌握建立静态站点的流程2、掌握静态站点的基本操作六、教学过程1、复习引入由上节所学习的建立HTML网页引出站点概念2、讲授新课（1）站点规划概念及方法概念：所谓本地站点，就是指定本地硬盘中存放远程站点所有文档的文件夹方法：规划网站一般需要从3个方面去思考，即网站的主题、网站的内容和网站的对象。
（2）创建本地站点站点组成：Dreamweaver 8站点由3部分组成，具体内容取决于环境和所开发的Web站点类型。
包括本地文件夹、远程文件夹、动态页文件夹定义站点：（01）选择“站点”|“新建站点”选项，或者选择“站点”｜“管理站点”选项，在弹出的“站点管理”对话框中单击“新建”按钮，弹出对话框，在“基本”选项卡的站点名称输入框中输入所要创建站点的名称，如图2-5所示（02）输入站点名称后，单击“下一步”按钮，在弹出的是否使用服务器技术对话框中，根据自己所制作网页的类型，确定是否使用服务器技术。
在此制作静态页面，因此不使用服务器技术，如图2-6所示。
（03）单击“下一步”按钮，在弹出的设置站点文件夹对话框中，选择或输入一个本地文件夹作为“本地站点文件夹”，如图2-7所示。
（04）选择了本地站点文件夹后，单击该对话框中的“下一步”按钮，进入设置是否与远程服务器相连的对话框，在这里选择“无”，设置为不与远程服务器相连，如图2-9所示。
（05）单击“下一步”按钮，便会显示在站点定义向导中所选择设置的详细报告，如果感觉满意，单击“完成”按钮，完成本网站的创建，如图2-10所示；否则单击“上一步”按钮重新修改各项设置。
（3）站点的基本操作其基本操作包括编辑、复制、删除站点。
3、巩固练习练习站点的建立，及其基本操作。
七、作业处理在课堂上要求每一个同学在F盘下建立一个名为“我的站点”的文件夹，在dreamweaver中创建一个静态站点，将站点信息存放到我的站点文件夹中。
八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
课题：搭建动态网站服务器及创建动态站点一、教学基本内容1、安装IIS2、动态站点与静态站点的区别3、搭建动态站点二、课型：新授课三、课时：2个课时四、教学重点与难点重点：动态站点与静态站点的区别难点：1、虚拟目录的概念2、动态站点的定义3、站点测试五、教学目的1、学会安装IIS，知道IIS的作用2、学会创建虚拟目录3、会创建动态站点六、教学过程1、引入先提出静态站点的作用及限制性，引入动态站点的功能2、讲授新课（1）安装并启动IIS（现场操作）（2）定义一个动态站点步骤：<01>设置虚拟目录。
（1）在本地磁盘“C:\”下新建一个site文件夹作为本地站点的根文件夹。
（2）设置web共享。
找到“C:\site”文件夹，选中并右击该文件夹，从弹出的快捷菜单中选择“共享和安全”选项。
在打开的“site属性”对话框中，选择“Web共享”选项卡，如图2-19所示（3）设置“编辑别名”对话框。
选中“共享文件夹”单选按钮，在弹出的“编辑别名”对话框中将“别名”设置为site；在“访问权限”中选择“读取”；在“应用程序权限”中选择“脚本”，如图2-20所示。
最后单击“确定”按钮关闭对话框，便完成了定义动态站点的准备工作。
<02>进入“高级”选项卡。
（1）选择“站点”|“新建站点”选项，选择“站点定义”对话框中的“高级”选项卡。
（2）从“分类”列表框中选择“本地信息”（默认选项）选项，如图2-21所示。
<03>设置“本地信息”的各参数（见图2-22<04>设置“测试服务器”的各参数（见图2-23）。
<05>显示结果。
（3）测试站点<01>将ch02\ test.asp文件复制到C:\site文件夹中，并使用Dreamweaver 8 打开test.asp。
<02>单击浏览器中“预览/调试” 按钮，或者按F12键在浏览器中运行test.asp页面。
出现如图2-25所示的成功页面。
若浏览器提示找不到服务器，则需重新搭建ASP服务器。
3、巩固练习练习站点的建立，及其基本操作。
七、作业处理在课堂上要求每一个同学在F盘下建立一个名为”我的动态站点”的文件夹，将其设置为虚拟目录，在dreamweaver中创建一个动态站点，将站点信息存放到我的动态站点文件夹中。
八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
第三章文本及其格式化课题：输入文本及其格式化一、教学基本内容1、输入普通文本2、插入符号、日期3、使用项目列表二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、插入符号、空格和日期2、使用项目列表难点：1、项目列表五、教学目的1、掌握文本输入方法2、掌握日期的插入3、掌握项目列表的使用六、教学过程1、引入首先例用一个已完成的网页，让学生来看别人的设置，由此引入文本的格式化。
2、讲授新课（1）文本的输入两种方法：a:直接在文档窗口中输入文本。
即先选择要插入文本的位置，然后直接输入文本。
b:在其他编辑器中复制已经生成的文本，然后切换到Dreamweaver 8文档窗口中，将选取插入点，然后选择“编辑”|“粘贴”选项。
（2）创建项目列表类型：无序列表、有序列表、定义列表、目录列表和菜单列表。
（3）插入日期3、巩固练习练习各种项目列表的使用七、作业处理要求每一个同学建立一个名为“我的网页”的空白文档，在网页中输入文字，然后在右下角插入日期，在内容当中便用有序列表。
八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
课题：CSS样式一、教学基本内容1 、演示并讲解 CSS 的应用2 、 CSS 的基本概念3 、 CSS 的特点4 、 CSS 样式定义5 、 CSS 常用属性与值二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、掌握 CSS 样式定义2、掌握 CSS 常用属性与值难点：1、掌握 CSS 样式定义2、CSS 常用属性与值3、能独立完成 CSS 样式的应用五、教学目的1 、掌握 CSS 的基本概念2 、掌握 CSS 样式定义3 、掌握 CSS 常用属性与值六、教学过程向学生演示多个项目：成品站点，分阶段演示和分析此网页的设计流程和过程，在每个阶段演示完毕后，让学生对此阶段进行巩固。
讲解完毕后学生完成课后作业，教师实施指导。
第一步：演示并讲解用 CSS 样式制作的网页。
第二步：分步演示并讲解 CSS 样式的基本概念。
第三步：讲解并分析 CSS 常用属性与值。
第四步：结合 CSS 样式的使用制作网页第四步：课程小结。
七、作业处理课堂上进行计论：第一步：演示并讲解用CSS 样式制作的网页。
第二步：分步演示并讲解CSS 样式的基本概念。
第三步：讲解并分析CSS 的知识点。
第四步：结合CSS 样式的使用制作网页第四步：课程小结。
八、教具所用的教室为多媒体实验室，因此所要板书的内容及使用的工具均在计算机上用PPT课件进行演示。
第四章表格课题：表格创建及设置一、教学基本内容1 、创建表格2 、添加表格对象3 、自动套用表格格式二、课型：新授课三、课时：2个课时四、教学重点与难点重点：1、创建表格2、自动套用表格格式难点：套用表格格式五、教学目的1 、掌握创建表格的基本方法2 、会使用自动套用表格格式六、教学过程1、引入网页需要进行排版，由报纸的排版引入网页的排版，由此提出表格的作用2、讲授新课（1）创建表格步骤：<01>将光标停放在页面需要创建表格的位置。
<02>如果未打开“插入”工具栏，可以在文档窗口单击按钮。
如果在文档窗口中找不到该按钮，可使用Ctrl+F2快捷键切换“插入”工具栏的显示或隐藏状态，<03>在“常用”标签中，单击“表格”按钮<04>弹出“表格”对话框输入要插入表格的行数，在此输入2。