用dreamweaver制作网页的实践报告

2024-05-03

用dreamweaver制作网页的实践报告（共4篇）

篇1：用dreamweaver制作网页的实践报告

用Dreamweaver MX制作个人网页

实验目的（1）了解网站的制作过程，会收集、制作网页素材。

（2）熟悉Dreamweaver MX的基本功能。

（3）掌握网站设计工具Dreamweaver MX的使用。

（4）掌握简单网页制作的步骤与方法。

二、实验总结：

网站制作过程包括：策划、设计图纸、切割网页、DMX制作网页，而DMX设计过程大概可以分为整体规划、网站栏目功能规划、根目录策划、数据库规划、编写网站后台、测试修改和发布。

Dreamweaver的功能有包括（1）可视化的编辑器与HTML检视器同步（2）简便易行的对象插入功能(3)跨浏览器的支持功能（4）可制定工作环境（5）强大的网站管理功能。

Dreamweaver MX的工作窗口有菜单栏插入栏文具工具栏等，分别对不同对象进行编辑。

制作网页首先要定义好站点，新建页面后，对于学生来说由于对网站设计代码还不熟悉，我们会选用显示设计视图，让我们这些以图形化操作设计网页。

其他操作包括新建页面，插入层，在层里输入文字，插入图片，插入Flash效果，增加周边装饰，添加邮件链接和添加背景音乐。完成后要把网页和网页所需用到的各种素材材料放在同一个文件夹中，不然的话打开网页不能显示出素材。

Dreamweaver MX是我操作的第一款制作网页的软件，它操作相对简单，方便上手，也可以进阶操作，实用性强。通过操作Dreamweaver MX我学会了简单的网页设计，并且了解了“网页三剑客”的用途和它们之间的联系，我从中收获良多。

简答题：

（1）图层在网页设计中的作用是什么？

答：层如同含有文字、图片、表格、插件等元素的胶片，一张张按顺序叠放在一起，组合起来最终形成页面的最终效果。层除了可以像表格一样设置背景、位置、自由移动、响应事件、控制显示外，还可以使网页中的对象通过层在垂直方向互相重叠，还可以利用层的可隐藏属性配合时间轴的使用，轻松地制作出动感效果的层。

（2）哪些工具可以用来布局网页。

答：图像及动画方面可以用Photoshop 和Flash这两个软件，加上Dreamweaver这三个布局网页就可以做到基本简单的网页了。

（3）网站与网页的关系是什么？

答：网站和网页最直接的关系：

网站是具有独立域名，独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页。要了独立域名和空间，那怕只有一个页面也叫网站。

网页是网站的组成部分。有了很多网页没有独立的域名和空间，也只能说是网页，例如博客、企业建站系统里的企业页面等，尽管有很多页面和很多功能，但也不能叫网站。

（4）网页设计模板是什么，怎么利用网页设计模板？

答：基本上很多网页模板都是一张制作好了而且风格比较统一的图片，用户使用之前应该对模板加以修改使之更适合自己使用。使用之前用户应该对模板加以修改使之更适合自己使用再根据实际制作进行图片切割然后在制作软件里设计布局.布局好之后在把切成一块块的图片.在布局中拼起来,仅仅是装饰的部分作为图片插入,有连接或者文字等其他东西的图片部分作为背景图片.假如是表格,那么该部分的布局长宽就该和图片一样,让图片刚好在布局部位完全显示.

篇2：用dreamweaver制作网页的实践报告

一、准备工作

１、站点的管理（创建、修改和删除站点）

２、网站与网页的关系：首页+子页＝网站

index.htmlp1.htmlp2.htmlp3.html

３、网页的页面属性：“修改”——“页面属性”

二、网页制作过程

１、页面布局：采用几个小表格叠加的方式

（１）表格大小：最外层表格以像素（px）为单位

内层嵌套表格以百分比（%）为单位

（２）表格的修改与编辑：合并单元格，拆分单元格，插入行列，删除行列２、模板的制作：至少包含一个可编辑区域（按住ctrl键单击单元格）

完成各页共有内容（站标，导航，设置导航超链接，版权）

“文件”——“另存为模板”

３、模板的应用：在建好的空白页面中，“修改”—“模板”—“套用模板到页”

4、网页元素的添加

（１）插入网页标题（标题栏中显示的内容）“页面属性”——“标题/编码”（２）文字的添加

（３）图像的效果：图像的替换文字（图片属性替代框）

交换图像效果

图像的滚动效果

5、完善网页

（１）超链接

（2）滚动效果

**（３）制作行为：

弹出信息设置状态栏文本

篇3：用dreamweaver制作网页的实践报告

http:// 初步介绍

当然，我知道现在有成千上万个关于用CSS处理圆角的教程，但不管怎么说，我仍然想把这篇文章展示给您。也希望您会发现这篇文章会非常有用。需要重点指出的是，这篇教程彻底地应用高级CSS技术，但是，我会尽力使初学者看起来简单。CSS3 在这里还没有得到完全的应用，所以，知道现在，我会保持W3C验证的有效。

第一步: 创建我们的 Sprite

1、为矩形圆角图片处理选择一款编辑器(在这个案例中我选择的是Firework).2、切割并且导出圆角到本地临时位置(我们将会在之后用到).3、新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。

4、合成四个圆角为一张图片, 并用 1px 的红线来区分它们.5、导出合成图片，sprite 也就大功告成了。第二步: HTML 代码

首先，我们会给容器 div 一个.roundedBox 类 :

篇4：用dreamweaver制作网页的实践报告

第一章Dreamweaver MX的新增功能

1.设计界面的新功能（改进的工作空间布局，预定义范例页面和代码、改进的层叠样式表（CSS）支持、增强的Dreamweaver模板）

2.代码编写方面的新功能（面向编码人员的工作空间布局、编码提示、代码片段标签、标记编辑器）

3.应用开发方面的新功能（Gold Fusion MX支持、ASP.NET支持、PHP支持）

第二章Dreamweaver MX的界面与右键菜单一．焕然一新的界面 1.标题栏如：

2.主菜单：如

3.插入快捷栏

该快捷栏是Dreamweaver MX中新增加的功能，它把插入菜单中的各种功能做成了快捷图标集成在一起。

二：方便快捷的右键菜单： 1.文本类型右键菜单：

在编辑窗口空白处单击鼠标右键，或选定文本内容后单击鼠标右键，会弹出文本类型右键菜单。

2．图片类型右键菜单：例;插入图片：

步骤一：新建一个网页（文件→新建），单击插入快捷栏Common类下的图片快捷图标，插入图片。

步骤二：选择图片，如：

如果图片不在当前站点内，会弹出如下对话框：

选择确定即可；

步骤三：图片插入完成，如下所示：

3.表格类型右键菜单：例;在内容编辑区插入表格, 新建一个网页（文件→新建），单击插入快捷栏Common类下的表格快捷图标，插入表格，会弹出以下对话框：

设置好参数后，点击确定，得到如下所示表格:

表格做好后，将鼠标移到表格的任一单元格内单击右键，出现表格类型右键菜单，与文本类型右键菜单大同小异，仅仅比文本的右键菜单多了一个表格选项，如下所示：

选择表格：选择整个表格；

合并单元格：合并选定的单元格，注意：只能合并相邻的单元格；插入行或列，单击后有选项：

增加行宽：可以合并上下两个单元表格，如：

增加列宽：可以合并左右两个单元格，如：

第三章站点

一．定义站点面板

选择主菜单命令站点→新建站点，打开定义站点面板，如下所示：

顶部选项卡中有两种定义站点方法的标签供选择，普通标签和高级标签，使用普通方法定义本站点时有提示，如同定义本地站点向导，可按照提示定义一个本地站点，使用高级方法，首先打开定义站点面板，切换到高级标签，如下所示：

可看出面板被分成左右两部分，左边的分类栏中列出了建站的各种选项类别，右边是各类别的详细参数设置和介绍。

远程信息：远程站点信息，设置远程服务器类型，如下所示：

测试服务器设置：

遮盖：也叫过滤设置,如下所示：

可让自己的网站过滤特殊的文件，如果勾选复选框遮盖具有以下扩展名的文件，添上要过滤的文件的后缀名，就会让站点内操作不会影响到他们，比如查找替换和全站点链接更新等等。设计备注：如下所示：

它记录了你对网站的设置、变动

维护设计备注默认状态下是勾选的，即保持设计笔录，若不想保留笔录，取消勾选即可。站点地图布局：如下所示：

在主页中输入首页名称（包括后缀），一切设置好后，选择主菜单的站点→站点地图命令可以打开站点地图第四章页面

一．页面的基本操作通过快捷键或菜单

1.新建页面：Ctrl+N,或者单击菜单file|new命令，弹出如下所示窗口：

2.打开页面

通过快捷键或菜单：ctrl+O或者单击菜单file|open命令，弹出open对话框，如下所示：

二．页面属性

在内容编辑区空白处（注意不是在表格、图片或其他元素下）单击右键，选择右键菜单下的最下面的页面属性命令，弹出对话框如下：

三．在文档中选择元素

在文档窗口的设计视图中选择元素是时，单击该元素即可，如果元素不可见，在选择之前应该使其可见

1.选择元素：在文档中选择可见元素，可以单击元素或拖动鼠标选择元素。

2.选择不可见元素时，应先选择主菜单的view|visual aids|invisible Elements命令，显示这些元素，然后在文档窗口中单击元素标记

3.如果选择的是整个标记，可单击文档窗口底部标记选择器上的标记四．设计页面时使用可视向导、1.使用标尺、网格与捕捉功能

可利用主菜单“查看”|标尺命令来显示或隐藏标尺、复位标尺原点，以及设置标尺单位等，如下所示：

2.要设置标尺的零点，可在标尺的左上角区域单击，然后拖到设计区中的适当位置，释放鼠标按钮后，该位置就会成为新标尺的原点，如下所示：

3.若标尺零点位置不在左上角，要恢复到左上角，可在窗口左上角标尺交点处双击鼠标选择主菜单查看|网格|显示网格，对网格还可进行颜色、间距的设置。4.设置文档链接

标记定义了文档之间的链接关系。要设置文档链接可按如下步骤进行：

步骤一：单击超级链接快捷图标，打开如下所示对话框：

步骤二：在链接编辑框中，输入链接资源所在的url地址

步骤三：对编辑框参数设置好之后，单击确定按钮，此时在文档的HTML代码中会自动生成相应的代码信息。第五章设计页面布局

在网页设计中，页面布局尤为重要 1.使用布局单元和表格：在Dreamweaver mx 2004中，选择Insert快捷栏的Laylou标签切换到布局视图(Laylout View),如下所示：

用户可在页面中添加布局单元，这些单元能够帮用户设计页面布局，当在页面中创建布局单元时在Dreamweaver mx 2004会自动创建一个布局表格，用来放置布局单元。

注意：布局单元不能存放在布局表格之外，用户在创建页面布局时可以在同一个布局表格中放置多个布局单元，或创建多个布局表格。使用多个布局表格可以将页面布局分割成区域，当在一个区域中编辑时，不会影响其他的区域，这一特性对于那些在布局单元中添加对象时引起布局单元尺寸增大的情况非常有效，当布局单元增大时，他只会影响与其它单元之间的距离，因为布局单元不能重叠，如果使用多个布局表格创建页面布局，表格的长宽不会因为其它布局表格的改变而受到影响。I/绘制布局单元和表格

在页面布局视图中可以绘制布局单元和表格，在创建布局单元时，在Dreamweaver mx 2004会自动创建用来放置布局单元的布局表格。绘制布局单元步骤：

步骤一：在布局视图模式下，单击插入快捷栏的Laylout标签的Draw Laylout cell按钮，此时鼠标指针将变为“+”号。

步骤二：在页面上拖动鼠标，绘制布局单元

绘制布局表格步骤与绘制布局单元方法类似，注意：布局表格不能相互重叠。2.为布局单元添加内容

布局视图的布局单元中可以添加文本或媒体插件。当创建一个布局表格时，表格以灰色填充，表示该区域不能被显示，并且不能插入内容，因此，必须在表格中创建布局单元，才能在布局单元中插入相应的文本、图像或媒体。如下所示：

3.清除自动单元高度

在创建布局单元时，Dreamweaver mx 2004会自动为创建的所有单元设置一个高度，当在单元中插入内容时，就不再需要这些高度了。清除单元高度可执行下列操作：

在布局表格上单击标尺上的向下箭头，从弹出的菜单中选择清除自动单元高度命令，如下所示：

4.移动和调整布局单元和表格

在页面布局中，能够移动或调整单元和表格的位置或尺寸，有利于用户设计网页布局，具体操作时，可以使用网格线辅助进行移动或调整 5.格式化布局单元和表格格式化布局单元;选中布局单元，对弹出的属性快捷栏中进行宽度、高度、背景、水平、对齐方式的设置即可。如下所示：

格式布局单元: 选中布局表格，对弹出的属性快捷栏中参数进行设置即可，如下所示：

第六章表格

表格在网页制作中起到了至关重要的作用。1.插入表格：步骤如下：

步骤一：在文档中定位插入点。

步骤二：选择“插入”-表格命令，此时出现

步骤三：在对话框里设置表格行数及列数，并对其余参数也进行设置，即可。在表格中添加文本内容：可直接在表中键入文本，也可粘贴文本。如下所示：

在表格中添加图片内容，如下：

22.格式化表格’

选择表格，其属性栏如下：

对其中参数进行设置即可。3.格式化行、列或单元格

当选择行、列、单元格后快捷栏如下：

可以合并单元格如下：

4.调整表格的整体尺寸、列宽与行高

要调整表格的整体尺寸，可在选定表格后将光标移至表格的边或角控制点处，然后根据箭头方向拖动鼠标，如下所示：

5.添加与删除行、列和表格嵌套

将光标定位于某个单元格中，然后单击选择“修改”-“插入行或插入列”或“删除行或列”命令如下：插入行：

插入列：

删除行：

删除列：

第七章框架

在网页中，框架主要用于分离多个HTML页面。1．创建框架

方法一：用户自己设计框架；方法二;使用系统预定义的框架。步骤如下：

步骤一：将插入点置于需要分割的框架窗口中；步骤二：选择“插入”-“框架”命令即可。2.选择框架集或框架

框架集或框架都是独立的HTML文档，要改变框架或框架集，必须首先选中该框架集或框架，选择框架集或框架使用“窗口”-“其他”-“框架”命令。3.保存框架集文件或框架：

步骤一：将插入点置于需要保存的框架中步骤二：执行“文件”-“保存”命令 4.设置框架和框架集的属性

选中框架，对弹出的属性快捷栏中各参数进行设置即可。第八章资源

资源是建立页面或站点的基本元素。

在Dreamweaver mx 2004中，资源标签提供了两种方法来查看站点中的资源，一是站点列表，用于显示站点中的所有资源，二是喜欢的资源列表，用于显示用户已经选择的资源

第九章文本

1.插入文本和对象插入日期步骤如下：

步骤一：在文档窗口中，将插入点置于需要插入日期的位置。步骤二：执行“插入”-“日期”命令，此时对话框如下：

选择好日期即可完成在文本中插入日期的设置，如下：

2.插入特定的文本字符

步骤一：在文档窗口中，将插入点置于需要插入特殊字符的位置。

步骤二：执行“插入”-“特殊字符”命令，选择合适的字符，即可在插入点插入字符。若要插入其他字符，则执行“插入”-“特殊字符”-“其他”命令 3.创建项目列表步骤一：在设计视图中，将插入点置于需要设置项目的行位置。

步骤二：选择“文本”-“列表”菜单中的Unordered list,创建项目列表步骤三：输入文本，在结束位置按下Enter按钮。步骤四：创建完项目后，可连续按两次Enter键

4.使用HTML样式格式化文本

使用HTML样式：执行“窗口”-“HTMLStyle”标签。

应用HTML样式：步骤一：若要设置段落样式，将光标定位于段落中。步骤二：在“HTMLStyle”标签中选择段落样式，若选择了自动运用复选框，则可自动对相应的段落文本应用选中的样式，若没有选择了自动运用复选框，则可单击应用按钮，应用选中的样式。第十章图像

图像是网页的重要组成部分

1.插入图像

步骤一：将插入点放置在需要插入图像的位置步骤二：执行“插入“-“图像”命令,如下：

选择图片确定后如下：

2．设置图像属性

步骤一：在文档中选中图像，然后打开属性快捷栏，如下所示：

对其中参数进行设置之后即可。

2.创建图像热点：

步骤一;在文档窗口中选择图片

步骤二：在属性快捷栏的地图编辑框中，输入唯一的热点集名称，注意：如果在同一个文档中使用多个图像热点集，必须确保每一个热点集都有唯一的名称。步骤三：若要定义图像热点，可执行下列操作之一：

选择圆形工具，在图像上拖动鼠标，创建一个圆形热点，如：

选择矩形工具，在图像上拖动鼠标，创建一个矩形热点选择多边形工具，在图像上拖动鼠标，创建一个多边形热点步骤四：一旦热点被创建，将显示属性热点快捷栏：

对属性快捷栏中各参数进行设置后即可。3.创建翻转图像

步骤一：在文档窗口中，将插入点置于需要插入翻转图像的位置。步骤二：插入翻转图像，对对话中各参数进行设置即可。第十一章链接和导航条 1．链接路径

绝对路径、相对路径和居于根目录的路径

创建超链接：例如用户在文档中输入文字“主页”，并为其创建了一个指向index.html文档的超级链接，则该超级链接的html源代码如下：主页如果要创建一个指向文档位置的链接，首先应该创建一个锚点名称，如：a name=”to_top”，然后创建页面的链接，指向该锚点名，如a herf=*to_top” 2.使用属性和文件图标创建链接文档，使用文件夹图标或link编辑框创建链接：

步骤一：在文档窗口的设计视图中，选择文本或图像

步骤二：打开属性快捷栏，然后执行单击链接编辑框右边的文件夹按钮，选择链接文件：如下：

3.链接到文档的指定位置

创建命名锚点：步骤一：在文档设计视图中，将插入点置于需要设置命名锚点的位置。步骤二：选择INSERT快捷栏中常用标签下的命名锚记，如下所示：

在编辑框中，输入锚点名称，单击确定按钮，此时在文档中将出现一个锚点标记。链接命名锚点：

步骤一：在文档设计视图中，选择需要创建链接的文本或图像

步骤二：在属性快捷栏的链接编辑框中，输入锚点名称和前缀，如：在当前文档中链接到锚点名称为top的位置，可输入“#top”

在相同文件夹的不同文档中链接锚点名称为top的位置，可输入“filename.html#top”。注意：锚点名称区分大小写。

4.创建导航条：

插入导航条：执行”插入”-“图像对象”-“导航条”命令，如下所示：

对对话框中各参数进行设置后即可。第十二章插入媒体对象

1．在页面中插入媒体对象：将插入点置于需要插入媒体对象的位置，然后单击常用标签中的适当按钮，将常用标签中的对象按钮拖到文档中需要插入媒体对象的位置