Dreamweaver CS6的基本使用教程

前言

我在大学学这门课程的时候有个难受的回忆,就是封校待在寝室里学的,不允许线下上课,只能线上学,大部分还是我自学的,不过只要认真学那我们学的还是挺不错的,B站现在有很多软件资源可以下载,没有的也可以找我要下载资源。

1、 什么是Dreamweaver?

Dreamweaver cs6(或者5)是世界顶级软件厂商adobe推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页,对于初级人员,你可以无需编写任何代码就能快速创建web页面。
Dreamweaver CS6的基本使用教程_第1张图片

2、HTML的基本结构

HTML文件是标准的ASCII文件,且其后缀名为htm或html的文件。HTML文件看起来像是加入了许多被称为链接签(tag)的特殊字符串的普通文本文件。从结构上讲,HTML文件由元素(element)组成,组成HTML文件的元素有许多种,用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”, 即它有起始标记和结尾标记。元素的起始标记叫做起始链接签(start tag),元素结束标记叫做结尾链接签(end tag),在起始链接签和结尾链接签中间的部分是元素体。 每一个元素都有名称和可选择的属性,元素的名称和属性都在起始链接签内标明。

Dreamweaver CS6的基本使用教程_第2张图片

3、创建与管理站点

首先双击桌面的Dreamweaver图标,在弹出的窗口点击一下“HTML”。这样我们就能新创建一个HTML文件,默认名称是untitled-1。
Dreamweaver CS6的基本使用教程_第3张图片

Dreamweaver CS6的基本使用教程_第4张图片

4、修改页面属性

页面属性一般都是使用默认的,但如果你有需要修改的需求,便可自行修改,能修改的属性有非常多,比如:页面字体大小、文本颜色、背景颜色、背景图片等等,这个大家可以试着每样都去修改试试。

Dreamweaver CS6的基本使用教程_第5张图片

5、插入图像、视频和音乐

图像:
我们可以直接在上方工具栏找到插入,点击后再选择图像,接着在本地文件中选择已经保存好的图片即可。

Dreamweaver CS6的基本使用教程_第6张图片

视频以及音频:
我们在上方插入中找到媒体,再从媒体中点击插件,接着选择你本地文件里保存好的视频或者音频即可(注意插件内存不能太大)。

Dreamweaver CS6的基本使用教程_第7张图片
Dreamweaver CS6的基本使用教程_第8张图片

6、超链接

超文本链接指针是指把并不连续的两段文字或两个文件联系起来。超链接是HTML最吸引人的优点之一,可以这样说,如果没有超文本链接指针,就没有万维网。使用超文本链接指针可以使顺序存放的文件具有一定程度上随机访问的能力,这更加符合人类的踊跃思维方式。

(1)在HTML文件中用链接指针指向一个目标。其基本格式为:
zzz
其中zzz可以是文字或图片,当用户单击它时,浏览器就会显示由href属性中的统一资源定位器(URL)所指向的目标,实际上这个zzz在HTML文件中充当指针的角色,它一般显示为蓝色。href中的h表示超文本,而ref表示“访问”或“引用”的意思。
例如: 黑龙江八一农垦大学
用户用鼠标单击“黑龙江八一农垦大学”,即可看到主页内容。在这个例子中, 充当指针的是“黑龙江八一农垦大学”。(此处我应用了超链接哦,不信你点开试试?)

Dreamweaver CS6的基本使用教程_第9张图片

(2)同一个文件中的链接—锚链接
超链接可以指向自己的计算机中的某一个文件,这种链接方式叫做本地链接。前面曾提到过一个超文本链接指针包括两个部分,一个指向目标的链接指针,另一个是被指向的目标。
标识一个目标的方法为:…….</A>
NAME属性将放置该标记的地方标记为“KKK”,KKK是一个全文唯一的标记串,
之间的内容可有可无。这样,就把放置标记的地方做了一个叫做“KKK”的标记。
转向下一处
这时就可以点击“转向下一处”这段文字,浏览器就从标记名为KKK的部分开始显示此HTML文件的内容了。

Dreamweaver CS6的基本使用教程_第10张图片

7、AP元素

在Dreamweaver中,AP元素通常是指具有绝对定位的div标签,习惯称AP Div (它是Dreamweaver默认插入的AP元素类型)。AP Div是指存放用Div标记描述的HTML内容的容器,用来控制浏览器窗口中元素的位置、层次。APDiv最主要的特性就是它是浮动在网页内容之上的,也就是说,可以在网页上任意改变其位置,实现对AP Div的准确定位。
在Dreamweaver CS6环境下,可以利用AP Div灵活方便的进行页面布局。其作为网页的容器元素,不仅可在其中放置图像,还可以放置文字、表单、插件等网页元素。把页面元素放在AP Div中,可以控制AP Div堆叠次序、显示或隐藏等性质。

显示或隐藏:首先呢,我们在上方工具栏选择插入–布局对象–AP div,此时会我们可以随意布置一个任意大小的矩形框,然后我们在里面插入图片,此时我们点击图片,在下方工具栏有个可见性,我们就可以在此时修改显示或者隐藏了。

Dreamweaver CS6的基本使用教程_第11张图片
Dreamweaver CS6的基本使用教程_第12张图片
拖动AP元素:首先我们通过上方工具栏中的 “窗口” 找到 “行为”,然后在右方行为面板中点击+,再点击拖动AP元素即可,若有需要可按自己的需求修改。!!!注意:由于这里行为中涉及到 javacsript语言,所以我们要允许阻止访问内容!

Dreamweaver CS6的基本使用教程_第13张图片

Dreamweaver CS6的基本使用教程_第14张图片
Dreamweaver CS6的基本使用教程_第15张图片
Dreamweaver CS6的基本使用教程_第16张图片
Dreamweaver CS6的基本使用教程_第17张图片

8、结尾

好了,我介绍的内容大概就到这了,DW大家学起来是不是挺容易,这个软件其实真的是超级好学,超级好用,大家如果还有什么不懂的地方可以随时在下面评论问我,欢迎留言!

你可能感兴趣的:(新手使用教程,html,前端,javascript,经验分享,其他,1024程序员节)