Dreamweaver实验3
dreamweaver网页设计实验指导书
网页设计实验指导书（一）DreamWeaver静态网页制作第一章网站规划 ................................................................................................... - 3 - 第二章Dreamweaver静态网页设计实验 ...................................................... - 8 - 实验一在Dreamweaver中建立一个站点.................................................. - 8 - 实验二在网页中使用文本........................................................................... - 15 - 实验三超级链接的建立............................................................................... - 21 - 实验四网页图像的应用............................................................................... - 29 - 实验五网页表格操作 ..................................................................................... - 36 - 实验六利用表格进行网页布局..................................................................... - 39 - 实验七利用层进行网页布局....................................................................... - 48 - 实验八行为和图层的应用............................................................................. - 53 -实验九框架型网页的制作........................................................................... - 66 - 实验十一交互式表单的应用..................................................................... - 84 - 实验十二HTML语言基础应用 .................................................................... - 90 - 实验十三网页动态效果辑............................................................................. - 97 - 实验十四CSS样式表的创建及运用....................................................... - 106 -第一章网站规划一、网站建设的基本流程网站建设的基本流程是：网站规划，网页设计，网上安家以及网站维护与管理，如图1-1所示。
网页设计dw实验报告
网页设计dw实验报告1. 实验目的本实验的目的是通过使用Adobe Dreamweaver（简称DW）软件，学习并掌握网页设计的基本原理和技巧。
2. 实验环境与工具2.1 实验环境- 操作系统：Windows 10- 浏览器：Google Chrome- 软件：Adobe Dreamweaver CS62.2 工具介绍Adobe Dreamweaver是一款功能强大的网页设计软件，它可以帮助开发人员创建富有创意的网站和应用程序。
DW提供了可视化的设计界面，同时也支持手动编辑HTML、CSS和JavaScript代码，让开发人员能够根据自己的需求灵活地进行网页设计。
3. 实验过程3.1 新建网页首先，打开DW软件并创建一个新的网页文件。
在DW的主界面中，选择“文件”->“新建”->“网页”，在弹出的对话框中选择“空白页”作为页面类型，然后设置页面的宽度、高度和背景色，并点击“创建”按钮，即可新建一个空的网页文件。
3.2 设计页面布局在新建的网页文件中，可以通过拖拽和调整页面元素的方式设计页面的布局。
通过DW的工具栏和属性面板，可以方便地添加和编辑各种元素，如文字、图片、链接等。
3.3 设置样式和格式DW提供了丰富的样式和格式设置选项，可以让开发人员对页面进行个性化的设计。
通过选择元素并修改其属性，或者直接编辑CSS代码，可以实现各种效果，如字体样式、字号、颜色、背景等。
3.4 导出网页文件完成网页的设计后，可以使用DW提供的导出功能将网页文件保存为HTML格式。
在DW的菜单中选择“文件”->“导出”，然后选择保存的路径和文件名，点击“保存”按钮即可。
4. 实验结果与分析使用DW进行网页设计时，可以快速、方便地创建美观且具有交互效果的网页。
DW提供了丰富的工具和选项，使得开发人员能够根据需求进行自由的设计和定制。
通过实验，我成功地创建了一个简单的网页，并对其进行了布局和样式设置。
5. 实验总结通过本次实验，我学习到了使用DW进行网页设计的基本流程和方法。
实习三 CSS基本语法
实习三CSS基本语法一、实验目的1. 了解XHTML；2. 掌握在网页中引用CSS 的方法；3. 掌握CSS 的基本语法规则；4. 掌握CSS 的常用选择器；5. 掌握使用Dreamweaver 定义CSS 的方法。
二、实验内容1. CSS 的引入和基本选择器应用；2. 利用CSS 对网页进行控制；3. 利用W3school 网站进行CSS 的练习。
三、实验步骤1.CSS 的引入和基本选择器应用；(1)内嵌样式表将定义的样式以<Style type=”text/css”>样式定义<Style>形式插入到文档的Head区，此种方法样式将影响当前整个页面。
建立网页Css1.htm，代码如下：<html><head><title>Css 技术的应用一</title><Style type=”text/css”>H1{color:red; Font-family:”华文行揩”,”宋体”;}Body{color:black;Font-size:9pt;}.fnt{color:blue;Font-family:”隶书”; Font-size:14pt;}</style></head><body><h1>这是标题一</h1>这是正文…..<p class=fnt>这是使用Fnt 类后的效果</body></html>(2) 行内样式将定义的样式以标记的属性形式插入，如：<P Style=”color:blue”>,此种方法样式只影响当前标记所影响的区域。
建立网页Css2.htm，代码如下：-8-<html><head><title>Css 技术的应用一</title><Style type=”text/css”>H1{color:red; Font-family:”华文行揩”,”宋体”;}Body{color:black;Font-size:9pt;}.fnt{color:blue;Font-family:”隶书”; Font-size:14pt;}</style></head><body><h1>这是标题一</h1>这是正文…..<p class=fnt>这是使用Fnt 类后的效果<p style=”color:tea;font-size:30”>这是中效果只使用于此段….</body></html>(3) 外部样式表将所有样式的信息存放在一个单独的文件中（扩展名为Css），然后用<LINK>把它链接到每个HTML 页面中。
实验三 网站设计
实验三个人网站设计一、实验目的1．掌握网站制作的技巧。
2．掌握HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标签及属性，能设计出多窗口网页、动态网页；3．使用FrontPage或Dreamwaver独立设计WEB站点。
二、实验内容1. 按如下要求组织网站以自己的学号命名文件夹，并以此根文件夹创建站点；根文件夹下，应包含如下子文件夹，严格按类存放站点中的所有文件；◆Image文件夹：存放图片文件◆Sound文件夹：存放声音文件◆Movie文件夹: 存放视频和动画文件2.网站主题为“教务网络管理系统”，要求如下：设计有3个窗口的框架集网页，框架集网页文件命名为index.html。
框架集网页中，左侧窗口中放置导航栏目网页，右下侧窗口作为导航栏被链接网页的“目标”窗口，用于显示被链接的网页。
右上侧窗口显示网站主题、网站制作者学号、姓名。
3.分别制作4个网页，要求如下：a)导航栏网页网页的功能是网站导航，围绕站点主题，设置3个导航栏目。
●教务动态●调查问卷●上课时间建立每个栏目与之相应的网页之间的链接，并指定被链接的网页在“目标”窗口显示。
b)网页1-教务动态滚动显示10条消息标题c)网页2-调查问卷要求：使用表单，做1个网上调查表●插入表单域，在表单域中插入如下表单元素：●参与调查人员的性别：男；●（设定为：单行文本框（宽度32字符））；●年龄（设定为：字符宽度2）；●本科生每学期选课分几轮？（使用“列表/菜单”表示，列表项有：一次、二次、三次）●提交按钮、重置按钮。
d)网页3-上课时间使用表格规划页面，左列显示学校上课时间表，右列显示本人课表；。
Html设计实验报告
山东信息职业技术学院《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的HTTP地址（URL）是什么”文本框中填入申请的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
Dreamweaver实验报告 - 副本
实验报告教技1101班 1103014032 苏永吉一、实验目的要求1.熟悉Dreamweaver的操作界面，能够创建站点和文档，利用其基本功能进行简单的编辑操作；2.能够使用Dreamweaver软件制作简单的网页。
二、实验仪器设备、软件一台能够正常运行的计算机，Dreamweaver软件。
三、实验原理：在Dreamweaver的操作环境中，利用其基本的操作功能制作一份网页。
四、实验内容步骤：实验内容：建立一个网站，至少有五个网页网站主题不限、制作方法不限,本次制作网站主要采用层的形式。
实验步骤：（一）确立网站主题我的网站简介，是我自己对自己的简单介绍。
（二）在网上搜集自己制作网站所需的素材：图片、音乐、自己所需的文章等。
（三）设置站点打开Dreamweaver软件，单击“站点”命令，选择“新建站点”，在弹出的对话框中，对所建站点进行命名、选择不使用服务器、选择存储位置、在“如何连接到远程服务”下选择“无”，最后单击“完成”按钮，即可完成站点创建。
（四）页面内容制作首先新建6个文件夹，在六个文件夹中依次建立.html页面，其中5个为主页面依次命名为：“首页.html”、新闻收藏.html”、“动我的学习html”、“我的旅游.html”、“英语天地.html”“我的收藏.html”。
1.进站页。
插入一个三行三列的表格，给每个单元格设置固定的高度、宽度。
然后插入网络图片。
将每个插入的图片的宽度、高度设置的与单元格的宽度高度相同。
最后，在中间的表格中插入层，将层托至适当大小，在层中输入文字“首页”表换字体格式大小、颜色、样式。
2.首页插入一个四行一列的表格，大小为1366X给整个表格设置背景t 图片，在第一行插入图片，同时插入两个层，将层的高度设置的和第一行的高度相同，插入相应的图片。
第二行插入一个一行五列的表格，并且依次输入“首页、、我的旅游、我的收藏、英语天地”，然后对其背景和字体颜色进行设置。
计算机基础实训作业-第3章 网页设计实验
第三章网页设计实验1 网站的创建和管理一、实验目的1、学会创建网站。
2、理解网站与网页的概念，了解网站结构。
3、掌握网站中网页的基本编辑方法。
二、实验内容和步骤1、创建一个新站点在Dreamweaver中使用“站点定义向导”创建一个本地新站点。
（1）选择“站点”|“新建站点”命令，打开站点定义对话框的“基本”选项卡，在“您打算为您的站点起什么名字”文本框中输入新建站点的名称，如图3-1所示。
图3-1站点定义对话框（2）单击“下一步”按钮，在“编辑文件，第2部分”选项区中，显示是否选择使用的服务器技术，这里选择“否，我不想使用服务器技术”单选按钮。
（3）单击“下一步”按钮，在“编辑文件，第3部分”选项区的“您将把文件存储在计算机的什么位置？”文本框中输入站点文件存放的位置或者点击右边的文件夹图标在本地计算机选择一个文件夹（例：E:\MySite\），没有输入或选择将使用系统默认值。
（4）单击“下一步”按钮，将站点定义对话框的“共享文件”选项区的“您如何连接到远程服务器”下拉列表框中选择“无”选项。
（5）单击“下一步”按钮，将站点定义对话框的“总结”选项区中，将显示以上设置步骤的详细信息。
（6）单击“完成”按钮，一个本地新站点已经创建完成。
此时选择“窗口”|“文件”命令，在打开的“文件”面板中将显示创建的新站点，如图3-2所示。
图3-2 “文件”面板（7）要设置本地文件夹，可以选择“站点”|“管理站点”命令，将打开管理站点对话框，如图3-3所示。
在左侧的列表中选择“我的站点”或对应的站点，在右侧选择“编辑”命令，将显示“本地信息”的所有参数设置选项，如图3-4所示。
如果显示的是如图3-1的站点定义对话框，点击上面的“高级”标签即可切换到如图3-4所示。
图3-3 管理站点对话框图3-4 本地信息对话框2、在站点中创建一个新的网页（1）在文档窗口中，选择“文件”|“新建”命令，在打开的“新建文档”对话框中选择要创建的文档类型，如图3-5所示。
Html设计实验报告分析
《网页设计》实验报告（2010—2011学年第二学期）班级：姓名：学号：指导老师：实验一认识Dreamweaver CS3一、实验目的1、熟悉Dreamweaver CS3环境。
2、了解HTML文件结构。
二、实验环境计算机三、实验内容创建站点有两种方式：使用向导有序地进行设置，或者通过在“管理站点”对话框中设置“高级”选项卡信息来创建。
无论哪种方式，都要事先在本地磁盘上建立一个用来存放站点的文件夹，这个文件夹就是本地站点的根目录。
下面介绍一下这两种方式的具体操作步骤。
1．使用向导建立站点使用向导建立站点的步骤如下：（1）打开建立站点向导的方法有3种。
①在进入Dreamweaver的起始页界面中选择“新建”→“Dreamweaver站点”命令，如图所示。
②选择“站点”菜单中的“新建站点”命令。
③选择“站点”菜单中的“管理站点”命令，打开如图所示的“管理站点”对话框，执行“新建”→“站点”命令。
起始页中新建站点“管理站点”对话框（2）打开“站点定义为”对话框，在“您打算为您的站点起什么名字？”文本框中输入站点名字，如travel。
若已申请域名则可以在“您的站点的HTTP地址（URL）是什么？”文本框中填入申请的域名地址。
如图所示。
设置站点名和URL地址（3）单击“下一步”按钮，询问是否使用服务器技术，如图所示。
若是静态站点则选中“否，我不想使用服务器技术”单选按钮，若是动态站点可以进一步设置使用哪一种服务器技术。
选择是否使用服务器技术（4）单击“下一步”按钮，在“您将把文件存储在计算机上的什么位置？”文本框中直接输入站点根目录的路径，或者单击“浏览”按钮，选择文件夹目录。
（5）单击“下一步”按钮，在“您如何连接到远程服务器？”下拉列表框中选择一种连接到远程服务器的方式，这里选择“无”选项。
（6）单击“下一步”按钮，将显示前几步设置的总结信息，若需修改可单击“上一步”按钮返回重新设置，若确定设置则单击“完成”按钮。
《网页设计与制作基础》实验指导
实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览；3、熟悉HTML基本标记的使用。
实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。
实验重点及难点◆熟悉HTML的结构、语法。
◆熟悉HTML基本标记的使用。
实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。
2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。
3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。
4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。
5、通过附录1的练习熟悉HTML基本标记的使用。
（可参考第二章内容）实验二 Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。
实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。
实验重点及难点◆文字的插入及设置。
◆图像的插入及设置。
◆各种超链接的创建。
实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。
2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。
3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。
Dreamweaver实验大纲
《网页制作》实验大纲湖南郴州职业技术学院计算机系2004-8-25编写《网页制作》实验大纲一、实验目标与要求使学生掌握网页处理的流程及方法、网页制作软件——DreamWeaver MX、flash、firework 的使用技巧和会熟练运用Dreamweaver MX ，能综合运用Dreamweaver、Flash和firework制作网页。
二、实验内容与学时分配实验课时：30课时，共15次实验实验一了解Dreamweaver的界面及站点的建立实验目的要求：了解Dreamweaver工作界面熟悉Dreamweaver的工作流程3、Dreamweaver站点的建立实验内容及步骤：1、参照书中的介绍操作一些菜单和面板组，熟习Dreamweaver的界面。
2、建立自己的第一个站点，具体步骤如下：实验二简单的网页制作实验目的：通过一个简单的网页制作，使学生能够掌握文字图片的添加文字的排版和各种属性的设置图文混排。
实验内容及步骤：1、文字的添加和排版：2、插入图形和图文混排实验三用表格制作网页（1）实验目的：表格的插入、嵌套、背景颜色、背景图片的设置；表格的编辑。
实验内容及步骤：1、插入第一个表格。
2、、制作第二个表格3、表格的嵌套实验四用表格作网页（2）实验目的：通过学习超链接，完成表格中各种链接的操作。
实验内容与步骤：1、文本的链接2、电子邮件链接3、图形链接实验五层的使用实验目的：使学生掌握图层在表格中的应用。
实验内容与步骤：实验内容：1、首先建立一个新层（如何插入层），宽250，高30。
2、在层中插入一个一行三列的表格。
3、在每个单元格中分别输入我的父亲、我的母亲、我的哥哥。
把这三个分别建立超链接。
4、把层隐藏起来5、中我的家庭，打开行为面版，选中“显示-隐藏层”把层1显示出来。
6、修改事件为“onmouseover”7、保存表格，浏览网页查看效果。
实验六css样式的使用实验目的：使学生掌握css样式的初步使用。
Dreamweaver实验三 简单网页设计
空格
打开“编辑”菜单 选择“首选参数” 在“首选参数”对话框中选择”分类”列 表中选择“常规” “编辑选项”中选择””允许”多个连续 的空格” “确定”
添加特殊字符
制作网页的过程中,经常需要一些特殊 字符,如版权符号和注册商标等. “插入”菜单—”HTML”—”特殊字符”
图像
插入—超级链接 图像属性检查器的相关参数
id 宽 高 源文件 链接 替换 垂直边距 水平边距 对齐 边框
添加图像热点超链接
在属性检查器中选择热点工具 使用热点工具在图像上绘制热点区域 给图像上的热点区域添加超链接
示例
临沂大学在线邮局: /mail%5Fe/
换行<br/>
按下enter键，我们的说法都是“回车换 行”，所以，意识里面，都认为是换行！但事实 是，在Dreamweaver里面根本不是换行，而是 换段！这个可以去dw产生的代码中看到，换行 应该是<br/>，但dw中产生的是<p>.<p>表 示段落！ 所以，要产生换行的效果，我们应该用软回 车，所谓软回车就是按住shift键的同时，再按 enter键。软回车才能产生<br/>.
超链接
文本超链接极大的方便了浏览者对网 站的访问,可以轻松实现页面间的跳转以及 对其他资源的访问,如下载文件等.一般用 来链接某个页面或图片、动画、声音、压 缩文件等网络资源，这些页面或资源可以 是网站内部的，也可以是互联网上的。
超链接
链接:链接的页面或资源的路径 目标:指定链接的页面或资源的打开方式 “插入”菜单—”超级链接”或者设置”属 性检查器”中的”链接”和”目标”
《Dreamweaver网页制作实训教程》教学课件 第3章
4．设置列表项
列表分为工程列表和编号列表，工程列表常应 用在“列举〞类型的文本中，编号列表常应用 在“条款〞类型的文本中，这种方式使得文本 更直观、明了。
选中所要设置的文本，然后单击属性面板上的 “工程列表〞按钮 ，即可设置列表项。
3.1.3 插入水平线和特殊字符
1．水平线
如果网页文档由很长的内容构成，可在内容中 间插入水平线，从而使网页内容更容易理解， 阅读起来也更轻松。要插入水平线，先将插入 点定位在要插入水平线的位置，然后选择“插 入记录〞>“HTML〞>“水平线〞菜单即可。
3.2.4 制作导航条
导航条在网站中起着不可替代的作用，它把网 站中的各个页面连接起来，每一个网站都有自 己的导航条。利用与制作鼠标经过图像类似的 方法，可制作具有可变效果的导航条。
PNG〔便携网络图像〕格式：集JPEG和GIF格式的优 点于一身，既能处理照片式的精美图像，又能包含 透明区域，且可以包含图层等信息，是Fireworks 的默认图像格式。
3.2.1 插入与编辑图像
在Dreamweaver中插入图像的方法非常简单。首 先在要插入图像的位置单击确定插入点，然后 单击“常用〞插入栏中的“图像〞按钮，翻开 “选择图像源文件〞对话框，从中选择要插入 的图像，然后单击“确定〞按钮即可。
第3章 输入与编辑根本网页元 素
输入与编辑文本 应用图像
3.1 输入与编辑文本
3.1.1 输入文本
在Dreamweaver中输入文本的方法非常简单， 只要将插入点定位在网页的某个位置，然后输 入文本就可以了。
对于大量的外部文本，用户可利用剪贴板将其 拷贝到网页文档中。
3.1.2 设置文本的段落格式和字符格式
2．插入特殊字符
dreamweaver 实训报告(留言板 个人网站)
《Dream weaver个人网站设计》实训专业班级：信息1101学生姓名：学号：2011321105指导教师：日期：2013年6月2013年 6 月14 日目录摘要 (2)第1章绪论 (3)1.1 概述 (3)1.2 实验需求分析 (3)1.3 软件介绍 (4)1.4 数据库的选择 (5)1.5 实训任务 (6)1.7 实验设计说明 (7)第2章数据库的设计 (8)2.1 数据库 (8)第3章实验设计 (9)3.1 搭建服务器平台与建立站点 (9)3.1.1 组装IIS同时进行配置 (9)3.1.2 新建站点 (10)3.1.3创建数据库同时进行链接 (11)3.2各个模块 (12)3.3 留言板功能的实现 (14)第4章总结与致谢 (19)4.1 总结 (19)4.2 致谢 (20)4.3 文献参考 (20)摘要Dream weaver MX 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。
无论您愿意享受手工编写 HTML 代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dream weaver 都会为您提供有用的工具，使您拥有更加完美的 Web 创作体验。
Dream weaver 使您可以使用服务器技术(例如 CFML、、ASP、JSP 和 PHP)生成由动态数据库支持的 Web 应用程序。
第1章绪论1.1 概述MacromediaDreamweaver 8是建立Web站点和应用程序的专业工具。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
从对基于CSS的设计的领先支持到手工编码功能，Dreamdreanweaver8的工作界面和图标、Dreamdreanweaver8提供了专业人员在一个集成、高效的环境中所需的工具。
开发人员可以使用Dream weaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。
dreamweaver实验报告
实验报告课程名称网页设计指导教师段小林学院通信与信息工程学院专业班级 0101010学生姓名许在魁学号2010210338一实验目的和要求1.熟悉Dreamweaver操作界面，文档和本地站点的创建；2.练习使用Dreamweaver编辑网页；二实验原理掌握Dreamweaver的操作环境，利用其提供的功能完成各种网页文档及本地站点的创建，简单编辑操作;三主要仪器设备Dreamweaver软件;四实验内容与步骤1.站点设置2.3.1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。
4.5.6.7.2）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。
在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。
8.9.4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。
10.页面图像设置1) 在“页面属性”对话框中设置页面的背景图像。
2) 在页面文档中单击,经过鼠标插入图像。
3.表格制作1) 在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。
2) 选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。
3) 在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”（#ffffff）。
4) 设置完毕，保存页面，按下“f12”键预览。
4.创建锚点链接1)在页面中插入1行4列的表格，并在各单元格中输入导航文字。
2)3)2) 分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。
4)5)3) 在文档中输入文字并设置锚记名称“01”，按下“ enter”键换行，输入一篇文章。
6)7)4) 在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“ enter”键换行，输入一篇文章。
实训(实验)教案 - 网页设计 Dreamweaver
实习法
实训指导书或实训大纲：
网页设计Dreamweaver
实训总结：
本节课充分体现了实训课程的目的----实用性，网页制作实用性很强，激发学生学习本节课的兴趣和动力，带动了学生学习的自主性，真正做到学以致用。
教研室主任意见：
**学院实训教案
课程名称：网页设计Dreamweaver
任课教师（职称）：
实训主要内容与教学方法：
实训主要内容：
制作“网站导航”网页
制作“设计新闻栏目”网页
教学方法：
实习法
实训指导书或实训大纲：
网页设计Dreamweaver
实训总结：
以学生为本，强调学生的自我操作，强调学生的自我学习，发挥学生的主体，任务设置的比较好
通过上机实训，学生的技能不断加强，实效性强。
教研室主任意见：
实训题目（章节）：第二章
带教者：
实训基地：611机房
课时安排：2
实训主要设备用物：计算机
实训目的：
图片布局
图文混排
实训重点*、难点#：
浮动float: left;
图片边框border:1px solid #664a2c;
实训主要内容与教学方法：
实训主要内容：
制作“图片布局”网页
制作“中国的传统节日”网页
教学方法：
讲授法、直观演示法、练习法、任务驱动法
实训指导书或实训大纲：
网页设计Dreamweaver
实训总结：
学生把规范整齐写代码的良好习惯养成了。培养学生的自主协作学习能力和动手操作能力，同时加强培养同学们的团结协作精神。
教研室主任意见：
**学院实训教案
课程名称：网页设计Dreamweaver
Dreamweaver网页设计实训报告-03
4．差：不能够完成实训任务书中的各项任务。
说明：1．浅灰色部分由学生填写
2．白色部分为教师判分用
3．本报告与学生实际作品相关联
广播电视大学
实训报告书
姓名
学号
专业/班级
课程名称
Dreamweaver
网页设计
教材
网页设计与制作――Macromedia Dreamweaver 8
任务编号
03
任务名称
插入Flash及多媒体内容
制作难点及
解决方法
插入并设置Flash动画、按钮、文字查找资料解决问题
插入音视屏文件查找资料解决问题
思考题
1、怎样在页面中插入Flash动画、按钮、文字？
动画：菜单中【插入】->媒体-> Flash然后在弹出的文件框中选择Flash文件确定即可；
按钮：菜单中【插入】->媒体-> Flash按钮设置按钮文本等 Flash文本设置文本等信息确定即可
2、嵌入Java的文件格式是什么？
文件名.class
考核内容及标准
分值
作品评语及成绩评定
学生互评成绩
20
能熟练的使用学到的技术，20分
设计与制作得分
50
心得及思考题得分
30
综合评语
总分
考核标准
（分4个等级）
1．优：在较好的完成实训任务书中的各项任务的基础上，有自己的创新，并能够应用所学的知识实现学生自己的设计想法。
2．良：能够按照要求完成实训任务书中的各项任务。
Web高级开发技术---实验记录-Dreamweaver网页设计与制作
项目4
图文并茂的网页—文本与图像的应用
本周实验 名称：文本与图像的应用 内容： 掌握文本、特殊字符的插入、编辑方法（列表） 掌握图像与图像占位符的插入、编辑方法（导 航条） 乐途网首页的文本与图像应用实例 个人简介与乐淘网首页的文本与图像应用实例 P76
项目5
丰富视听效果——应用多媒体元素
本周实验 名称：多媒体元素的应用 内容： 掌握插入Flash动画、文本及其属性设置的方法 掌握插入Shockwave对象及其属性设置的方法 掌握插入Java Applets程序的方法 掌握插入ActiveX控件的方法 掌握在网页中插入背景音乐、视频的方法 乐途网“目的地”多媒体页面的制作实例 乐淘网多媒体页面制作实例P98
Web高级开发技术---实验记录 －Dreamweaver网页设计与制作
课程简介 Dreamweaver网页设计与制作 项目驱动，教练结合，实践为主 课程考核方式 期末X55%＋期中X15%平时成绩X30% 作品要求： 独立制作的完整网站作品 涉及DW所有网页制作技术 创意加分（个人/单位网站、管理信息系统等） 作品展示＋报告递交 －截止时间：最后一课
项目7
使用CSS样式美化和布局网页
本周实验
名称：CSS样式（层叠样式表） 内容： 了解CSS基本概念及其语法规则
• 三种样式类型－类样式、HTML标签样式、高级样式 • 两种保存方式：网页内部和网页外部（样式表文件）
掌握CSS样式的创建、使用、编辑与管理方法 掌握CSS样式属性设置方法
• 类型（文本）、背景、区块（段落）、方框、边框、列表、定 位、扩展样式（滤波器）
乐途网“商旅管理”等页面的CSS样式应用实 例 乐淘网首页等页面的CSS样式应用实例P143