Dreamweaver MX简体中文版入门教程
Macromedia Dreamweaver MX (简称DW MX ),是Macromedia 最新开发的的HTML 编辑器,用于对Web站点、Web页和Web应用程序进行设计、编码和开发。DW MX 包含有一个崭新、简洁、高效的界面,且性能也得到了改进。此外,还包含了众多新增的功能,改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方便地生成页面。
目录:(点击相应目录)
一、认识Dreamweaver MX 窗口布局
二、设置站点
三、创建自己的第一个网页
四、认识html
五、在网页中插入图片
六、创建HTML表格
认识Dreamweaver MX 窗口布局
首次启动Dreamweaver 时,会出现一个工作区设置对话框(如下图):
系统默认为Dreamweaver MX 工作区,我们直接点击“确定”即可。
"设计"视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中,Dreamweaver 显示文档的完全可编辑的可视化表示形式,类似于在浏览器中查看页面时看到的内容。
"代码"视图是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如asp)以及任何其它类型代码的手工编码环境。
"代码和设计"视图使您可以在单个窗口中同时看到同一文档的"代码"视图和"设计"视图。
设置站点
Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的Web 站点。创建Web 站点的第一步是规划。为了达到最佳效果,在创建任何Web 站点页面之前,应对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的。
请执行以下操作:
启动Dreamweaver MX:
如果发现刚才建立站点的时候弄错了,还可以点击上图的“编辑站点”来修改:
现在,已经为您的站点定义了一个本地根文件夹。下一步,可以编辑自己的网页了。
创建自己的第一个网页
从头创建自己的页面,可以使用Dreamweaver MX起始页创建新页,或者可以选择“文件”>“新建”,弹出如下对话框:
从各种预先设计的页面布局中选择一种。比如:选择“基本页”HTML,点击创建按钮。Dreamweaver MX即展开工作区界面(一个空白页):
您可以在这个空白页添加表格和输入文本进行编辑。如果您要向页面添加图片或其它元素,应先保存这个空白页。选择“文件”>“另存为”,在“另存为”对话框中,浏览到站点本地根文件夹下。填入文件名,保存退出。
如果你的网页是以前已经保存好的,现在只是来编辑它,则直接点击“文件”>“保存”,
也可以用快捷键:Ctrl + S ,就可以实现保存操作。
认识html
什么是HTML文件?
HTML的英文全称是Hypertext Marked Language,中文叫做“超文本标记语言”。
和一般文本的不同的是,一个HTML文件不仅包含文本内容,还包含一些Tag,中文称“标记”。
一个HTML文件的后缀名是.htm或者是.html。
用文本编辑器就可以编写HTML文件,也可以用专门的网页制作软件来编写。
【标签解说】
BODY之间则为主要语法所在,也是网页的主要呈现部分。
以上看到的就是一篇最简单架构的网页。没错,网页其实就是一堆标签(所谓标签就是指被<>包起来的语法)集合起来的,透过浏览器的消化整理,就便成了美仑美奂的网页了。
简单而言,通常一份完整的网页包含了二个部份:文件头部(HEAD)、文件本体(BODY)。也就是各位在上面所看到的
以及。这一组标签,是告诉浏览器说:我是一份HTML文件喔!也就是说它是
一个网页的格式啦!通常都包在网页的最上下两端,将所有的原始码都包起来。
在
和之间的内容,是Head信息。Head信息是不显示出来的,你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词,有助于搜索引擎能够搜索到你的网页。在
在
和之间的信息,是正文。注意:html 标签都是成对出现的!以<>开始,以 >结束。
如下图所示输入内容并保存:
在浏览器中浏览的方法有两种:一为上图所示,二为按F12 键。效果为:
下面来看看具体的代码:
段落划分
在HTML里用
和
划分段落。即输入完内容后直接按回车键。换行
通过使用
,可以在不新建段落的情况下换行。
用
换行是个坏习惯,正确的是使用
。
在网页中插入图片
首先,在根目录下建立“image”文件夹,用于存放网页用到的图片。
接下来,把你准备用到的图片复制到“image”中
插入图片后的效果图为:
保存网页。