首页 > 代码库 > Dreamweaver8下定义WEB功能页面介绍

Dreamweaver8下定义WEB功能页面介绍

dreamweaver8下定义WEB功能页面介绍

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

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

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

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

image

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

image

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

image

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

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

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

image

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

<head></head>

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

image

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

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

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

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

<dt></dt>
<dd></dd>

编码定义:

<dl>
<dt>开发项目</dt>
<dd>html</dd>
<dd>java</dd>
<dd>jsp</dd>
<dd>c++</dd>
</dl>

image

image

<ol></ol>数字标签
<ul></ul>符号标签

image

预览效果:

image

<hr /> 定义水平线:

image

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

image

预览效果

image

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

image

<img src=http://www.mamicode.com/”” alt> 定义图片

image

image

调整图片大小:

htight=”300”width="200" >

image

image

接下来我们就是 表格了;

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

<tr></tr>定义一行

<td></td>定义一列

<table border="1">
<tr>
<td>表格一</td>
<td>表格二</td>
</tr>
</table>

image

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

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

image

添加背景颜色

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

image

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

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

image

接下来我们定义超链接

<a href="http://www.mamicode.com/www.baidu.com">百度

image

image

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

target="_blank"

image

image

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

image  

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

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

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

image

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

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

image

image

接下来定义邮件超链接:

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

image

添加迅雷下载超链接:

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

image

image

单击开始下载:

image

标记符号:

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

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

<a name="top">

image

预览效果:

image

页面的最后后:

<a href="http://www.mamicode.com/#top"回到顶部

image

预览效果:

image

本文出自 “高文龙” 博客,请务必保留此出处http://gaowenlong.blog.51cto.com/451336/1549421

Dreamweaver8下定义WEB功能页面介绍