Dreamweaver CS6的基本使用教程

前言

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

1、 什么是Dreamweaver?

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

2、HTML的基本结构

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

在这里插入图片描述

3、创建与管理站点

首先双击桌面的Dreamweaver图标,在弹出的窗口点击一下“HTML”。这样我们就能新创建一个HTML文件,默认名称是untitled-1。
在这里插入图片描述

在这里插入图片描述

4、修改页面属性

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述
在这里插入图片描述

6、超链接

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

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

在这里插入图片描述

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

在这里插入图片描述

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,此时会我们可以随意布置一个任意大小的矩形框,然后我们在里面插入图片,此时我们点击图片,在下方工具栏有个可见性,我们就可以在此时修改显示或者隐藏了。

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

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8、结尾

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

当然可以!下面是一个简单的 Dreamweaver 网页制作教程: 第一步:安装 Dreamweaver 下载并安装最新版本的 Adobe Dreamweaver。安装完成后,打开软件。 第二步:创建新网页 在 Dreamweaver 中,点击 "文件" 菜单,选择 "新建"。接着,选择 "HTML" 作为页面的类型,并选择一个模板或者空白页面。 第三步:设计页面布局 在 Dreamweaver 的 "设计" 视图中,你可以使用拖放功能来添加和排列页面元素。你可以从左侧的工具栏中选择不同的元素,如文本、图像、按钮等,并将它们拖放到页面上。 第四步:编辑页面内容 在 Dreamweaver 的 "代码" 视图中,你可以直接编辑 HTMLCSS 代码。通过编辑代码,你可以修改页面的布局、样式和内容。如果你不熟悉 HTMLCSS,可以在 "设计" 视图中使用 Dreamweaver 提供的可视化编辑工具。 第五步:添加交互功能 如果你想要在网页中添加交互功能,如表单、导航菜单或轮播图等,可以使用 Dreamweaver 提供的组件或者手动编写 JavaScript 代码来实现。 第六步:预览和测试 在 Dreamweaver 中,你可以通过点击 "预览" 按钮来预览你的网页在浏览器中的效果。确保在不同的浏览器和设备上进行测试,以确保你的网页在各种情况下都能正常显示和工作。 第七步:发布网页 完成网页制作后,你可以将文件导出为 HTML 文件,并将其上传到你的服务器上,以便其他人可以访问和浏览你的网页。 这只是一个简单的 Dreamweaver 网页制作教程,希望对你有所帮助!如果你有更多特定的问题或需要更深入的指导,请随时向我提问。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

tyro达令

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值