1.概述
Dreamweaver 是一款集网页制作和管理网站于一身的所见即所得网页编辑器,在开发前端视图页面的时候,用这个工具,能让代码更清晰化,界面更整洁,可以大大的提升Web前端开发效率。
基于数通畅联的AEAI DP开发平台可以直接生成JSP前端页面,通常在AEAI DP中使用JSP编辑器编辑JSP页面,但是JSP编辑器强于在JSP页面上写JAVA代码片段,但调整页面里的表单元素以及CSS样式等不方便,因此,一般采用AEAI D跟Dreamweaver配合进行前端JSP页面扩展开发。本文对Dreamweaver的常见用法进行说明,为相关技术人员提供参考。
2.预计读者
数通畅联软件新进技术人员
数通畅联合作伙伴的技术人员
外部IT从业者
3.介质安装
3.1安装及下载
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表格
点击表格按钮
后,如下图