Dreamweaver简明手册——经常使用功能介绍

1.概述

Dreamweaver 是一款集网页制做和管理网站于一身的所见即所得网页编辑器，在开发前端视图页面的时候，用这个工具，能让代码更清晰化，界面更整洁，能够大大的提高Web前端开发效率。
基于数通畅联的AEAI DP开发平台能够直接生成JSP前端页面，一般在AEAI DP中使用JSP编辑器编辑JSP页面，可是JSP编辑器强于在JSP页面上写JAVA代码片断，但调整页面里的表单元素以及CSS样式等不方便，所以，通常采用AEAI D跟Dreamweaver配合进行前端JSP页面扩展开发。本文对Dreamweaver的常见用法进行说明，为相关技术人员提供参考。

2.预计读者

1. 数通畅联软件新进技术人员

2. 数通畅联合做伙伴的技术人员

3. 外部IT从业者

3.介质安装

3.1安装及下载

下载地址以下：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
解压到指定文件夹，点击安装

 

3.2主界面预览

 

4.使用说明

4.1建立站点

Deramweaver站点是网站中使用的全部文件的资源的集合。Dreamweaver站点一般包含两个部分：可在其中存储和处理文件的计算机上的本地文件夹，以及可在其中将相同文件发布到Web上的服务器上的远程文件夹。咱们在开发及调试过程当中主要使用本地文件夹站点，下面会详细介绍。
在菜单站点à新建站点后，填入弹出的对话框中须要的信息，以下
站点名称：任意，例如aeaihr。
本地站点文件：通常直接选择开发平台生成的工程的WebRoot目录



保存后，以下图，这样能够方便咱们直接查找和修改文件，双击JSP、CSS、JS文件均可以直接在主界面上打开。

4.2插入功能

插入功能能够直接在页面上插入一些页面元素



经过点击菜单—》窗口---》插入，以下图。通常同时选中“属性”项。



如下对插入面板里面的各种功能进行介绍：

4.1.1经常使用

4.1.1.1超连接

点击超连接功能直接点入设计页面里，出现下图，只要在文本里添加上超连接标签名称（任意起）:



点击肯定后，以下图，


代码部门 body元素里有了a标签，而后在设计页面里有了链接。而后在页面下方找到 按钮，而后点击按住指向站点管理的某个页面文件。



释放按键后再来看代码部门的变化



而后到浏览器页面上超连接可跳转到上方的链接路径里。

4.1.1.2电子邮件连接

电子邮件连接也是超连接，这是跳转到电子邮件里，而不是其余的页面。
点击电子邮件连接功能，出现信息框，文本是名称（随意起），电子邮件里填上要发送目标的电子邮箱地址。



       点击肯定之后，以下图。


 
保存后，切换到页面测试



点击dw链接后将跳转发送邮件功能，以下图。

4.1.1.3命名锚记

锚点连接，此类连接跳转至文档内的特定位置。
首先要定位找到须要跳转的位置，如图所示：


将光标留在箭头处，而后点击锚连接 按钮，弹出命名框体，以下图。


我将名称命名为dw，肯定后，#15前会出现个锚标记 。



下一步，咱们设计界面拉到上面将光标#1上，而后咱们观察工具下方的属性。将链接名字改成#+锚点命。



而后，进入网页测试，首先在网页顶部，而后点击#1直接跳入#15位置。

  

4.1.1.4水平线

在页面上添加一条水平线美观，添加后以下。



页面测试效果图以下。

4.1.1.5表格

点击表格按钮 后，以下图



能够跟据本身的需求调整表格的行数，列和大小宽度，点击肯定后，以下图



能够表格添加须要的字符，若是不加默认为 占位符，页面测试结果以下图：
 

4.1.1.6Div标签

可使用 div 标签建立 CSS 布局块并在文档中对它们进行定位。若是将包含定位样式的现有 CSS 样式表附加到文档，这将颇有用。Dreamweaver 使您可以快速插入 div 标签并对它应用现有样式。
点击Div按钮 后，以下图：



插入：可用于选择 div 标签的位置以及标签名称（若是不是新标签的话）。
类：显示了当前应用于标签的类样式。若是附加了样式表，则该样式表中定义的类将出如今列表中。可使用此弹出菜单选择要应用于标签的样式。
ID：可以让您更改用于标识 div 标签的名称。

4.1.1.7图像

1. 图像

点图像图标边的箭头后，选择第一个。



下一步，如图所示找到对应图像文件



肯定后会提示，文件在站点根文件之外须要拷贝到，根文件里，点击“是”。



下一步，点击保存，复制到站点根文件里。



下一步，点击肯定便可。



图像添加成功以下图



页面测试效果图，以下：


 

1. 图像占位符

图像占位符，是在界面上显示图片，用来占位。根据下图点击。


 
下一步，弹出窗口，名称为图像name的值（随意起），而后点击肯定。



而后，代码和设计界面以下图。



若是掌握很差宽度与高度，能够直接在设计页面里直接拉拽图像。



效果测试，以下图：

1. 鼠标通过图像

主要现象是，当鼠标悬浮在原始图片上，变为新的图片。根据下图点击。



下一步，图像名称为id元素的值，原始图像为鼠标通过前的图像。设置好后按肯定。



而后，代码和设计界面以下图。



页面测试：鼠标通过先后的图像
  
 

1. Fireworks HTML

在 Fireworks 中，可使用“导出”命令将优化后的图像和 HTML 文件导出并保存到 Dreamweaver 站点文件夹下的某个位置。而后，能够在 Dreamweaver 中插入该文件。Dreamweaver 容许您将 Fireworks 生成的 HTML 代码连同相关图像、切片和 JavaScript 一块儿插入到文档中。
按照下图点击



下一步
1.在 Dreamweaver 文档中，将插入点放在但愿图像出现的位置，而后执行下列操做之一：
选择“插入”>“图像”。
2.在“插入”面板的“经常使用”类别中，单击“图像”按钮或将其拖动到文档中。
导航到所需的 Fireworks 导出文件，而后单击“肯定”(Windows) 或“打开”(Macintosh)。
注： 若是 Fireworks 文件不在当前 Dreamweaver 站点中，则会显示一条消息，询问是否要将该文件复制到根文件夹。单击“是”。

4.1.1.8日期

Dreamweaver 提供了一个方便的日期对象，该对象使您能够以喜欢的格式插入当前日期（包含或不包含时间均可以），而且您能够选择在每次保存文件时都自动更新该日期。
在页面上插入日期，点击按钮 后，以下图



按照我的需求选择格式信息后肯定，页面会显示出时间，以下图，每次刷新界面，同时也会刷新时间。

4.1.1.9注释

点击注释按钮 后，代码页面会出现注释元素，能够在里面备注一些文字，或者代码，此处的代码不会被程序运行。具体以下图。

4.1.1.10脚本

您能够经过下列方式在“代码”视图和“设计”视图中使用客户端 JavaScript 和 VBScript：
在不退出“设计”视图的状况下，为页面写入 JavaScript 或 VBScript 脚本。
在不退出“设计”视图的状况下，在文档中建立指向外部脚本文件的连接。
在不退出“设计”视图的状况下编辑脚本。
以下图：

4.1.1.11模板

能够基于现有文档（如 HTML、Adobe ColdFusion 或 Microsoft Active Server Pages 文档）建立模板，也能够基于新文档建立模板。

4.1.1.12标签选择器

使用“标签选择器”能够将 Dreamweaver 标签库（包括 ColdFusion 标签库和 ASP.NET 标签库）中的任何标签插入您的页面中。
点击标签选择器选项后，以下图，选择指定标签，单击肯定便可。

4.1.2布局

这里主要对布局里面的表格进行介绍说明。首先点击表格 按钮，弹出选择框，以下图，根据需求扩展行数和列，若是宽度掌握很差，也能够在设计页面里拉拽。



点击肯定后，代码和设计界面预览，以下图，为拉拽后效果图，也能够表格内填写字符。



界面测试效果图以下：

4.1.3表单

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和通常按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还能够用表单按钮来控制其余定义了处理脚本的处理工做。

4.1.3.1建立表单

首先点击表单按钮，弹出选择框以下图，方法有两个get和post，两种方法为提交表单方式，决定于调用servlet的都doget或dopost方法。名称是name属性的值。



点击肯定后以下图，红色虚线框体内为表单域，也就是标签form里。

4.1.3.2文本字段

首先点击文本字段按钮，弹出选择框体以下图。
类型有不少种，能够根据需求更改，能够参考下图，名称为name属性的值，类型为type属性的值，值是value属性的值，大小是size属性的值，最大长度是maxlength属性的值。



下图为测试页面效果图。

4.1.3.3隐藏域

隐藏域在网页中不会有任何显示，只是用来在网页之间传递信息。它是下个比较特殊的表单元素，在某种程度上能够保留网页的某些值。网页的运行是不保留状态的，一个网页浏览完毕，全部的内容都不会保留，经过隐藏域就能够保留一些网页运行过程当中的一些值。
       好比在一个from时放一个用户名，密码等资料，这些是可见的，若是你放在隐藏域，当它点击的时候不但把用户名和密码的值传出去，还会把隐藏域你设定好了的值传给服务器。 
首先可点击 按钮，在表单域里生成隐藏域，以下图：

4.1.3.4文本区域

  首先在点击文本区域按钮，弹出选择框，以下图根据需求填写ID和标签属性，点击肯定。



而后会在表单内出现一块可编辑的文本域，以下图



下图为测试页面效果图。

4.1.3.5复选框和单选按钮

首先在点击选择框按钮，弹出选择框，以下图根据需求填写ID和标签属性，点击肯定。



而后会在表单内出现一个可选择的复选框和单选按钮，以下图


 
下图为测试页面效果图，能够勾选。

4.1.3.6复选框组和单选按钮组

  
首先在点击选择框按钮，弹出选择框，名称是name属性的值，可点击+号和-号曾复选框和单选按钮的数量，点击肯定。





而后会在表单内出现一个可选择的复选框组和单选按钮组，以下图



下图为测试页面效果图，能够勾选。

4.1.3.7选择（列表/菜单）和跳转菜单

首先在点击选择（列表/菜单）和跳转菜单按钮，弹出选择框，以下图，点击肯定。



而后会在表单内出现一个可选择的选择（列表/菜单）和跳转菜单，以下图



下图为测试页面效果图

4.1.3.8图像域

首先点击图像域按钮弹出选择框，以下图，能够根据需求找到对应图片，实如今表单中添加图像。




而后会在表单内出现一个图像域。




下图为测试页面效果图

 

4.1.3.9文件域

  首先点击文件域，弹出选择框，以下图，根据需求设置ID和标签，点击肯定。




而后会在表单内出现一个图像域。




下图为测试页面效果图，点击浏览…弹出查找文件选择框。

4.1.3.10按钮

首先点击按钮的按钮，弹出选择框，以下图，根据需求设置ID和标签，点击肯定。




而后表单内会生成一个按钮，按钮默认type类型为submit，value为提交。以下图




下面为测试页面的效果图。按钮可点击，默认类型为submit，因此点击时就是提交，由于没有设置，因此只能刷新页面。

4.1.3.11标签

首先点击标签按钮，在表单域里增长标签。以下图：




而后能够在里添加字符。设为标签，在页面中不可修改的固定字符。以下图：





 

4.1.3.12字段集

字段集fieldset元素一种标签，做用是将它所包围的元素用线框陪衬出来。

首先点击字段集按钮，以下图：




而后在表单域里生成了字段集，以下图




而后扩展下代码，在fieldset标签内legend标签外，添加字符，以下图。



下面为页面测试效果图。



 

4.1.4Spry

Spry框架是一个JavaScript 库，Web 设计人员使用它能够构建可以向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可使用 HTML、CSS 和极少许的 JavaScript 将XML 数据合并到 HTML 文档中，建立构件（如折叠构件和菜单栏），向各类页面元素中添加不一样种类的效果。 

4.1.4.1Spry菜单栏

首先点击Spry菜单栏按钮，而后选择水平或者垂直，点击肯定。以下图：下图两个功能都实现了。




下面是页面测试效果图：

 

4.1.4.2Spry选项卡面板

首先点击Spry选项卡按钮，代码和设计页面会直接弹出选项卡。以下图




下面是页面测试效果图，点击标签1或标签2能够来回切换。
  
 

4.1.4.3Spry折叠式

首先点击Spr折叠式按钮，代码和设计页面会直接弹折叠式。以下图




下面是页面测试效果图，点击标签1或标签2能够来回切换。

 

4.1.4.4Spry可折叠面板

首先点击Spr可折叠式面板按钮，代码和设计页面会直接弹可折叠式面板。以下图：




下面是页面测试效果图，点击蓝条标签后内容部分折叠起来。

 

5.总结说明

以上内容仅对Dreamweaver的插入功能相关部分进行介绍，实际使用过程当中还会使用属性面板来设置选中元素的相关属性。一旦对HTML各标记以及对应属性、style属性熟练后，一般在代码视图编辑HTML代码，切换设计或者实时视图来查看、验证效果，此时Dreamweaver亮点就在于代码自动完成了。


Dreamweaver简明手册---经常使用功能介绍原文             下载