Dreamweaver实例教学

Dreamweaver mx2004 实例教学（实例1--实例10）

实例1 站点的建立

了解和掌握怎么建一个网站,这是做网站的第一步,因此必须掌握。

要对Dreammeaver mx2004的工具栏有一定的了解，还要熟悉其的用途。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

（1）启动Dreamweaver mx2004,如图1.1.1所示.

图1.1.1 启动后所示的界面

(2) 选择菜单栏的站点(S)→站点管理(M)命令,打开对话框,如图1.1.2所示.

图1.1.2 “站点管理”对话框

(3) 单击”站点管理”对话框的新建(N)出现”站点(S)和FTP与RDS服务器(F)”,选择其中的”站点(S)”出现对话框,如图1.1.3所示.

图1.1.3 “站点定义1”对话框

(4) 在文本框里可以为你的站点起个名字,然后按下一步出现对话框,如图1.1.4所示.

图1.1.4 “定义站点2”对话框

(5) 在对话框中,根据自己所做的网站选择”否”或者”是”.如果你做的是静态网页,那么就可以选择”否”,如果你做的是动态网页,那你就要选择”是”,然后在下拉菜单中选择你所用的服务器技术类型.我做的是静态网页,因此我选择”否”,然后再按下一步出现对话框,如图1.1.5所示.

图1.1.5 “站点定义3”对话框

(6) 选择系统推荐的选项,在文本框里可以填入你所建网站的保存路径,也可以不变系统默认的路径,然后按下一步出现对话框,如图1.1.6所示.

图1.1.6 “站点定义4”对话框

(7) 根据你自己的实际情况,如果你想下传到某服务器上的话,那你就从下拉菜单中选择你所用的上传方法,如果不想上传的话,就选择”无”,然后再按下一步,出现对话框,如图1.1.7所示,按完成,出现图1.1.8所示,再按完成这就完成了建一个站点的过程.

图1.1.7 “站点定义5”对话框图1.1.8 “站点定义6”对话框

实例2 布局表格

学会制作表格,能熟悉掌握表格的作用,现在大部分网页都运用到了表格,它是做网页不可缺少的技术,也要熟悉掌握.最终效果如图:.

主要应用布局表格和布局单元表格来绘制表格,同时在表格中插入图片和添加文本,或者

flash等等,最终实现你所想的效果. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

创作步骤

(1)启动Dreamweaver mx 2004 软件.

(2)选择文件→新建(N) …Ctrl+N命令,打开新建文档对话框,如图1.2.1所示,单击创建

(R)按钮,创建一个空白HTML文档,如图1.2.2

图1.2.1 “新建文档”对话框

图1.2.2 新建空白HTML文档

(3)选择菜单栏的修改→页面属性(P)…Ctrl+J命令,弹出页面属性对话框,如图1.2.3所示,

在标题(T):栏中输入文字作为标题,如现在输入”布局表格”,再按确定,返回主界面.

图1.2.3 “页面属性”对话框

(4)单击工具栏的按钮,切换到”布局视图”工作界面,如图1.2.4所示.

图1.2.4 “布局视图”工作界面

(5)单击在工具栏上的布局表格按钮,在页面中拖曳鼠标绘制一个布局表格,如图1.2.5所示. 还可以根据你的需要来调整表格的大小.

图1.2.5 绘制布局表格

(5)单击工具栏上的绘制布局单元格按钮,在需要添加布局单元格的位置拖曳鼠标,绘制布局单

元格,如图1.2.6所示.

图1.2.6 绘制布局单元格

(6)重复第(4)和(5)步的操作,绘制其它布局表格和布局单元格,如图1.2.7所示.

图1.2.7 绘制其它单元格

(7)在布局单元格添加文本和图像,如图1.2.8所示.

图1.2.8 表格添加内容

(8) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.2.9所示.

图1.2.9 浏览器中的效果

实例3 层的运用

学会使用层的技术,虽然现在的大部分

的网页是没有用到层,但要制作一些比较特别的网页

时,用层比用表格简单得多.

本例要用到层的技术,建层,改变层的属

性等,制作一些布局比较简单的网页. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤

(1)启动Dreamweaver MX 软件.

(2)按上例创建一个名为”层的运用”的网页,如图1.3.1所示.

图1.3.1 “层的运用”网页的建立

(3)选择插入(I)→布局对象→层(Y)命令,插入一个层,如图1.3.2所示.

图1.3.2 层的建立

(4)点击层的里面便可对层的内容进行编辑,你可插入图片也可插入文字,现在就来插入图片,选择插入(I)→图像(I)…Ctrl + Alt +I打开对话框,如图1.3.3所示

图1.3.3 “打开”的对话框

(4)选择你所定好的图片,然后再按确定,再调整图的大上和层的位置,最后可得效果如图1.3.4所示.

图1.3.4 插入图片

(5)重复步骤3再插入一个层,输入文字在层里,根据你的需要移动和调整层的位置大小,也可以在”

属性”修改层,最后效果如图1.3.5所示.

图1.3.5 最终效果

(6) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中