标签：html dreamweaver 开发平台 网页制作
Dreamweaver 是一款集网页制作和管理网站于一身的所见即所得网页编辑器，在开发前端视图页面的时候，用这个工具，能让代码更清晰化，界面更整洁，可以大大的提升Web前端开发效率。
基于数通畅联的AEAI DP开发平台可以直接生成JSP前端页面，通常在AEAI DP中使用JSP编辑器编辑JSP页面，但是JSP编辑器强于在JSP页面上写JAVA代码片段，但调整页面里的表单元素以及CSS样式等不方便，因此，一般采用AEAI D跟Dreamweaver配合进行前端JSP页面扩展开发。本文对Dreamweaver的常见用法进行说明，为相关技术人员提供参考。
数通畅联软件新进技术人员
数通畅联合作伙伴的技术人员
外部IT从业者
下载地址如下：http://pan.baidu.com/s/1c0vqeK4#path=%252F%25E5%2589%258D%25E7%25AB%25AF%25E5%25BC%2580%25E5%258F%2591%25E5%25B7%25A5%25E5%2585%25B7%252FDreamweaver
解压到指定文件夹，点击安装
Deramweaver站点是网站中使用的所有文件的资源的集合。Dreamweaver站点通常包含两个部分：可在其中存储和处理文件的计算机上的本地文件夹，以及可在其中将相同文件发布到Web上的服务器上的远程文件夹。我们在开发及调试过程中主要使用本地文件夹站点，下面会详细介绍。
在菜单站点à新建站点后，填入弹出的对话框中需要的信息，如下
站点名称：任意，例如aeaihr。
本地站点文件：一般直接选择开发平台生成的工程的WebRoot目录
保存后，如下图，这样可以方便我们直接查找和修改文件，双击JSP、CSS、JS文件都可以直接在主界面上打开。
插入功能可以直接在页面上插入一些页面元素
通过点击菜单—》窗口---》插入，如下图。一般同时选中“属性”项。
以下对插入面板里面的各类功能进行介绍：
点击超链接功能直接点入设计页面里，出现下图，只要在文本里添加上超链接标签名称（任意起）:
点击确定后，如下图，
代码部门 body元素里有了a标签，然后在设计页面里有了连接。然后在页面下方找到 
按钮，然后点击按住指向站点管理的某个页面文件。
释放按键后再来看代码部门的变化
然后到浏览器页面上超链接可跳转到上方的连接路径里。
电子邮件链接也是超链接，这是跳转到电子邮件里，而不是其他的页面。
点击电子邮件链接功能，出现信息框，文本是名称（随意起），电子邮件里填上要发送目标的电子邮箱地址。
点击确定以后，如下图。
保存后，切换到页面测试
点击dw连接后将跳转发送邮件功能，如下图。
锚点链接，此类链接跳转至文档内的特定位置。
首先要定位找到需要跳转的位置，如图所示：
将光标留在箭头处，然后点击锚链接 
按钮，弹出命名框体，如下图。
我将名称命名为dw，确定后，#15前会出现个锚标记 。
下一步，我们设计界面拉到上面将光标#1上，然后我们观察工具下方的属性。将连接名字改为#+锚点命。
然后，进入网页测试，首先在网页顶部，然后点击#1直接跳入#15位置。
在页面上添加一条水平线美观，添加后如下。
页面测试效果图如下。
点击表格按钮 
后，如下图
可以跟据自己的需求调整表格的行数，列和大小宽度，点击确定后，如下图
可以表格添加需要的字符，如果不加默认为 占位符，页面测试结果如下图：
可以使用 div 标签创建 CSS 布局块并在文档中对它们进行定位。如果将包含定位样式的现有 CSS 样式表附加到文档，这将很有用。Dreamweaver 使您能够快速插入 div 标签并对它应用现有样式。
点击Div按钮 
后，如下图：
插入：可用于选择 div 标签的位置以及标签名称（如果不是新标签的话）。
类：显示了当前应用于标签的类样式。如果附加了样式表，则该样式表中定义的类将出现在列表中。可以使用此弹出菜单选择要应用于标签的样式。
ID：可让您更改用于标识 div 标签的名称。
图像
点图像图标边的箭头后，选择第一个。
下一步，如图所示找到对应图像文件
确定后会提示，文件在站点根文件以外需要拷贝到，根文件里，点击“是”。
下一步，点击保存，复制到站点根文件里。
下一步，点击确定即可。
图像添加成功如下图
页面测试效果图，如下：
图像占位符
图像占位符，是在界面上显示图片，用来占位。根据下图点击。
下一步，弹出窗口，名称为图像name的值（随意起），然后点击确定。
然后，代码和设计界面如下图。
如果掌握不好宽度与高度，可以直接在设计页面里直接拉拽图像。
效果测试，如下图：
鼠标经过图像
主要现象是，当鼠标悬浮在原始图片上，变为新的图片。根据下图点击。
下一步，图像名称为id元素的值，原始图像为鼠标经过前的图像。设置好后按确定。
然后，代码和设计界面如下图。
页面测试：鼠标经过前后的图像
Fireworks HTML
在 Fireworks 中，可以使用“导出”命令将优化后的图像和 HTML 文件导出并保存到 Dreamweaver 站点文件夹下的某个位置。然后，可以在 Dreamweaver 中插入该文件。Dreamweaver 允许您将 Fireworks 生成的 HTML 代码连同相关图像、切片和 JavaScript 一起插入到文档中。
按照下图点击
下一步
1.在 Dreamweaver 文档中，将插入点放在希望图像出现的位置，然后执行下列操作之一：
选择“插入”>“图像”。
2.在“插入”面板的“常用”类别中，单击“图像”按钮或将其拖动到文档中。
导航到所需的 Fireworks 导出文件，然后单击“确定”(Windows) 或“打开”(Macintosh)。
注： 如果 Fireworks 文件不在当前 Dreamweaver 站点中，则会显示一条消息，询问是否要将该文件复制到根文件夹。单击“是”。
Dreamweaver 提供了一个方便的日期对象，该对象使您可以以喜欢的格式插入当前日期（包含或不包含时间都可以），并且您可以选择在每次保存文件时都自动更新该日期。
在页面上插入日期，点击按钮 
后，如下图
按照个人需求选择格式信息后确定，页面会显示出时间，如下图，每次刷新界面，同时也会刷新时间。
点击注释按钮 
后，代码页面会出现注释元素，可以在里面备注一些文字，或者代码，此处的代码不会被程序运行。具体如下图。
您可以通过下列方式在“代码”视图和“设计”视图中使用客户端 JavaScript 和 VBScript：
在不退出“设计”视图的情况下，为页面写入 JavaScript 或 VBScript 脚本。
在不退出“设计”视图的情况下，在文档中创建指向外部脚本文件的链接。
在不退出“设计”视图的情况下编辑脚本。
如下图：
可以基于现有文档（如 HTML、Adobe ColdFusion 或 Microsoft Active Server Pages 文档）创建模板，也可以基于新文档创建模板。
使用“标签选择器”可以将 Dreamweaver 标签库（包括 ColdFusion 标签库和 ASP.NET 标签库）中的任何标签插入您的页面中。
点击标签选择器选项后，如下图，选择指定标签，单击确定即可。
这里主要对布局里面的表格进行介绍说明。首先点击表格 
按钮，弹出选择框，如下图，根据需求扩展行数和列，如果宽度掌握不好，也可以在设计页面里拉拽。
点击确定后，代码和设计界面预览，如下图，为拉拽后效果图，也可以表格内填写字符。
界面测试效果图如下：
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
首先点击表单按钮，弹出选择框如下图，方法有两个get和post，两种方法为提交表单方式，决定于调用servlet的都doget或dopost方法。名称是name属性的值。
点击确定后如下图，红色虚线框体内为表单域，也就是标签form里。
首先点击文本字段按钮，弹出选择框体如下图。
类型有很多种，可以根据需求更改，可以参考下图，名称为name属性的值，类型为type属性的值，值是value属性的值，大小是size属性的值，最大长度是maxlength属性的值。
下图为测试页面效果图。
隐藏域在网页中不会有任何显示，只是用来在网页之间传递信息。它是下个比较特殊的表单元素，在某种程度上可以保留网页的某些值。网页的运行是不保留状态的，一个网页浏览完毕，所有的内容都不会保留，通过隐藏域就可以保留一些网页运行过程中的一些值。
比如在一个from时放一个用户名，密码等资料，这些是可见的，如果你放在隐藏域，当它点击的时候不但把用户名和密码的值传出去，还会把隐藏域你设定好了的值传给服务器。
首先可点击 
按钮，在表单域里生成隐藏域，如下图：
首先在点击文本区域按钮，弹出选择框，如下图根据需求填写ID和标签属性，点击确定。
然后会在表单内出现一块可编辑的文本域，如下图
下图为测试页面效果图。
首先在点击选择框按钮，弹出选择框，如下图根据需求填写ID和标签属性，点击确定。
然后会在表单内出现一个可选择的复选框和单选按钮，如下图
下图为测试页面效果图，可以勾选。
首先在点击选择框按钮，弹出选择框，名称是name属性的值，可点击+号和-号曾复选框和单选按钮的数量，点击确定。
然后会在表单内出现一个可选择的复选框组和单选按钮组，如下图
下图为测试页面效果图，可以勾选。
首先在点击选择（列表/菜单）和跳转菜单按钮，弹出选择框，如下图，点击确定。
然后会在表单内出现一个可选择的选择（列表/菜单）和跳转菜单，如下图
下图为测试页面效果图
首先点击图像域按钮弹出选择框，如下图，可以根据需求找到对应图片，实现在表单中添加图像。
然后会在表单内出现一个图像域。
下图为测试页面效果图
首先点击文件域，弹出选择框，如下图，根据需求设置ID和标签，点击确定。
然后会在表单内出现一个图像域。
下图为测试页面效果图，点击浏览…弹出查找文件选择框。
首先点击按钮的按钮，弹出选择框，如下图，根据需求设置ID和标签，点击确定。
然后表单内会生成一个按钮，按钮默认type类型为submit，value为提交。如下图
下面为测试页面的效果图。按钮可点击，默认类型为submit，所以点击时就是提交，因为没有设置，所以只能刷新页面。
首先点击标签按钮，在表单域里增加标签。如下图：
然后可以在里添加字符。设为标签，在页面中不可修改的固定字符。如下图：
字段集fieldset元素一种标签，作用是将它所包围的元素用线框衬托出来。
首先点击字段集按钮，如下图：
然后在表单域里生成了字段集，如下图
然后扩展下代码，在fieldset标签内legend标签外，添加字符，如下图。
下面为页面测试效果图。
Spry框架是一个JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。
首先点击Spry菜单栏按钮，然后选择水平或者垂直，点击确定。如下图：下图两个功能都实现了。
下面是页面测试效果图：
首先点击Spry选项卡按钮，代码和设计页面会直接弹出选项卡。如下图
下面是页面测试效果图，点击标签1或标签2可以来回切换。
首先点击Spr折叠式按钮，代码和设计页面会直接弹折叠式。如下图
下面是页面测试效果图，点击标签1或标签2可以来回切换。
首先点击Spr可折叠式面板按钮，代码和设计页面会直接弹可折叠式面板。如下图：
下面是页面测试效果图，点击蓝条标签后内容部分折叠起来。
以上内容仅对Dreamweaver的插入功能相关部分进行介绍，实际使用过程中还会使用属性面板来设置选中元素的相关属性。一旦对HTML各标记以及对应属性、style属性熟练后，通常在代码视图编辑HTML代码，切换设计或者实时视图来查看、验证效果，此时Dreamweaver亮点就在于代码自动完成了。
Dreamweaver简明手册---常用功能介绍原文 下载
本文出自 “数通畅联门户集成平台” 博客，请务必保留此出处http://aeaiportal.blog.51cto.com/9300497/1628032
标签：html dreamweaver 开发平台 网页制作
原文地址：http://aeaiportal.blog.51cto.com/9300497/1628032
