Dreamweaver8下定义WEB功能页面介绍-优快云博客

本文详细介绍如何使用Dreamweaver8创建基本的网页，并通过实例演示如何构建包含文本、图片、表格、链接等元素的简单注册页面。

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

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

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

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

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

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

我们知道在html内注释需要用<!-->符号定义：

 
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

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

 
         <
         head
         ></
         head
         >

然后在此域内定义显示的标题<tatle></tatle>即可

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

将显示的内容定义到<body></body>内即可

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

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

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

那就是需要用户属性了：size、color了，那提前需要将修改的内容用<font></font>扩起来

我们在<font></font>内添加相应的功能即可

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

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

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

列表文件表示为<dl></dl>

编码定义：

预览效果：

 
         <
         hr 
         /> 定义水平线：

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

预览效果

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

 
         <
         img 
         src=”” alt> 定义图片

调整图片大小：

 
         htight=”300”width="200" >

接下来我们就是表格了；

注：<table></table>定义一个表格

<tr></tr>定义一行

<td></td>定义一列

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

 
    
         <
         table 
         border
         =
         "1" 
         bordercolor
         =
         "#FF3366"
         > 
        

  

添加背景颜色

 
    
         <
         table 
         border
         =
         "1" 
         bordercolor
         =
         "#FF3366" 
         bgcolor
         =
         "#FFFF33"
         > 
        

  

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

 
    
         <
         table 
         border
         =
         "1" 
         bordercolor
         =
         "#FF3366" 
         bgcolor
         =
         "#FFFF33" 
         cellpadding
         =
         "4" 
         ;70%" 
         cellspacing
         =
         "10"
         > 
        

  

接下来我们定义超链接

<a href="www.baidu.com">百度

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

 
         target="_blank"

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

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

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

 
    
         <
         a 
         href
         =
         "www.baidu.com"
         > <
         img 
         src
         =
         "download.gif" 
         /> 
        

  

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

 
    
         <
         a 
         href
         =
         "www.baidu.com"
         > <
         img 
         src
         =
         "download.gif" 
         height
         =
         "30" 
         ;40" /> 
        

  

接下来定义邮件超链接：

 
    
         <
         a 
         href
         =
         "mailto:gaowenlong@qq.com?subject=call us"
         />联系我们 <
         a
         /> 
        

  

添加迅雷下载超链接：

 
         <
         a 
         href
         =
         "thunder://www.baidu.com"
         >上海滩抢先版

单击开始下载：

标记符号：

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

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

预览效果：

页面的最后后：

 
         <a href="#top"回到顶部

预览效果：

本文转自高文龙 51CTO博客，原文链接：http://blog.51cto.com/gaowenlong/1549421，如需转载请自行联系原作者