dreamweaver8下定义WEB功能页面介绍

说到dreamweaver8,相信大家都比我熟悉,也许有人说dreamweaver8是一个开发工具,那开发工具多了,我自己是这么认为的,dreamweaver8是专业的网页开发工具;由于自己是做运维的,所以在开发的角度我算是一个绝对的菜鸟,可以说是一窍不通,之前就没做过开发先关的东西,现在才开始慢慢接触,所以每天晚上回家看看java、html、jsp相关的文档学习,同时,我们大家都知道一般正常的页面程序文件通过新建超级文本文件来修改扩展名来定义文本格式,默认的超级文本文件格式化的扩展名是.txt,我们将txt修改成html就成了一个简单的web文件了,扩展名有很多,根据自己的需求来修改扩展名。其实大家都很了解,web程序下还有一个.jsp的文件。也是一个java下的web程序应用,其实有很多,在这就不多介绍了。相信大家比我熟悉。

昨晚上兴致一来就想通过dreamweaver8实现第一个自己的web程序。该程序我准备用来注册用户相关的信息,所以就定制了一个自己的需求页面,所以在此分享一下。

首先是下载dreamweaver8程序,然后就是安装了。再次就不多说了,

接下来我们就通过dreamweaver8创建一个html文件来定义自己的页面,定以前,我们首先理解一下dreamweaver8的功能使用。首先通过dreamweaver8创建一个网页

Dreamweaver8下定义WEB功能页面介绍_第1张图片

创建完成,接下来我们对以下内容进行简单分析:

Dreamweaver8下定义WEB功能页面介绍_第2张图片

我们保存一下,发现新建了一个扩展名为html的超级文本文件:

Dreamweaver8下定义WEB功能页面介绍_第3张图片

我们知道在html内注释需要用符号定义:

 
  

大家都知道,html文件内容必需是以 开始结束的。

Dreamweaver8下定义WEB功能页面介绍_第4张图片

接下来,我们要定义一个标题:所以需要应用到

 
  

然后在此域内定义显示的标题即可

Dreamweaver8下定义WEB功能页面介绍_第5张图片

接下来就是定义显示内容:

将显示的内容定义到内即可

Dreamweaver8下定义WEB功能页面介绍_第6张图片

接下来我们开始编辑显示及属性了

Dreamweaver8下定义WEB功能页面介绍_第7张图片

保存后我们开始预览效果。

Dreamweaver8下定义WEB功能页面介绍_第8张图片

页面出来了,日常我们修改字体大小及颜色呢:

Dreamweaver8下定义WEB功能页面介绍_第9张图片

那就是需要用户属性了:size、color了,那提前需要将修改的内容用扩起来

Dreamweaver8下定义WEB功能页面介绍_第10张图片

我们在内添加相应的功能即可

Dreamweaver8下定义WEB功能页面介绍_第11张图片

修改后,我们再次预览效果。

Dreamweaver8下定义WEB功能页面介绍_第12张图片

接下来,我们定义一个列表文件,列表文件一般都是树状结构。通过相应的代码会自动缩进

比如我们定义一个名称为:开发项目,下又分java,html,jsp

列表文件表示为

编码定义:

开发项目
html
java
jsp
c++

Dreamweaver8下定义WEB功能页面介绍_第13张图片

Dreamweaver8下定义WEB功能页面介绍_第14张图片

    数字标签
      符号标签

      Dreamweaver8下定义WEB功能页面介绍_第15张图片

      预览效果:

      Dreamweaver8下定义WEB功能页面介绍_第16张图片

       定义水平线:

      Dreamweaver8下定义WEB功能页面介绍_第17张图片

      定义水平线属性:线的粗细、颜色

      Dreamweaver8下定义WEB功能页面介绍_第18张图片

      预览效果

      Dreamweaver8下定义WEB功能页面介绍_第19张图片

      然后,我们给该页面添加一个图片,那应该怎么做呢

      Dreamweaver8下定义WEB功能页面介绍_第20张图片

       定义图片

      Dreamweaver8下定义WEB功能页面介绍_第21张图片

      Dreamweaver8下定义WEB功能页面介绍_第22张图片

      调整图片大小:

      htight=”300”width="200" >

      Dreamweaver8下定义WEB功能页面介绍_第23张图片

      Dreamweaver8下定义WEB功能页面介绍_第24张图片

      接下来我们就是 表格了;

      注:

      定义一个表格

      定义一行

      定义一列

      
      
      表格一
      表格二
      
      

      Dreamweaver8下定义WEB功能页面介绍_第25张图片

      为了更好的体现该功能,添加表格颜色

      Dreamweaver8下定义WEB功能页面介绍_第26张图片

      添加背景颜色

      Dreamweaver8下定义WEB功能页面介绍_第27张图片

      调整表格的分辨率及显示格式

      Dreamweaver8下定义WEB功能页面介绍_第28张图片

      接下来我们定义超链接

      百度

      Dreamweaver8下定义WEB功能页面介绍_第29张图片

      Dreamweaver8下定义WEB功能页面介绍_第30张图片

      超链接定义完后,我们在页面打开该超链接会通过当前页面打开,那如果我们正常打开超链接是希望在新的页面打开超链接的,所以我们为了解决这个问题需要在超链接下添加新建链接

      target="_blank"

      Dreamweaver8下定义WEB功能页面介绍_第31张图片

      Dreamweaver8下定义WEB功能页面介绍_第32张图片

      我们进行测试:我们发现打开百度是在不同的页面下跳转打开的

      Dreamweaver8下定义WEB功能页面介绍_第33张图片  

      接下来我们再次为超链接定义功能,单击图形进行超链接打开操作

      我们先下载一个图片:然后定义一个超链接:

       

      Dreamweaver8下定义WEB功能页面介绍_第34张图片

      然后图片比较大,所以我们需要定义图片大小:

       

      Dreamweaver8下定义WEB功能页面介绍_第35张图片

      Dreamweaver8下定义WEB功能页面介绍_第36张图片

      接下来定义邮件超链接:

      联系我们 

      Dreamweaver8下定义WEB功能页面介绍_第37张图片

      添加迅雷下载超链接:

      上海滩抢先版

      p_w_picpath

      Dreamweaver8下定义WEB功能页面介绍_第38张图片

      单击开始下载:

      Dreamweaver8下定义WEB功能页面介绍_第39张图片

      标记符号:

      如果当前也面的内容较多,为了方便预览,通过标记符号来定义:

      首先是标记最顶部,然后在最后编辑跳转到top即可。

      Dreamweaver8下定义WEB功能页面介绍_第40张图片

      预览效果:

      Dreamweaver8下定义WEB功能页面介绍_第41张图片

      页面的最后后:

       
        

      Dreamweaver8下定义WEB功能页面介绍_第42张图片

      预览效果:

      Dreamweaver8下定义WEB功能页面介绍_第43张图片