本文由binglengpeng贡献
doc文档可能在WAP端浏览体验不佳。建议您优先选择TXT,或下载源文件到本机查看。
简体中文版入门教程( Dreamweaver MX 2004 简体中文版入门教程(一) 之新功能简介
Macromedia Dreamweaver MX 2004 (简称 DW MX 2004),是 Macromedia 最新开发的 的 HTML 编辑器,用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。 DW MX 2004 包含有一个崭新、简洁、高效的界面,且性能也得到了改进。此外,还包含了 众多新增的功能, 改善了软件的易用性并使您无论处于设计环境还是编码环境都可以方 便地生成页面。
【DW MX 2004 MX 2004 的新功能简介】 ▲简洁高效的设计和开发界面:界面更易于使用,可使您的工作效率和工作质量均 得到提高。 ▲“插入”栏的改进:简洁高效的新外观,占用更少的工作区空间。还新增加了一 个“收藏”类别,您可以对“插入”栏进行自定义,将最常使用的对象放置在该栏上。 ▲表格编辑可视化:在表格中进行列调整操作时能看到实际效果。 ▲用户界面改进:可得到最大的可用工作区,更清晰地显示上下文和焦点,更易于 使用和更具逻辑性。 ▲起始页:使您能够访问最近使用过的文件,创建新文件和访问 DW MX 2004 资源。 起始页会在您启动 DW MX 2004 或尚未打开文档时显示。 ▲保存桌面选项:使您可以选择当您重新启动 DW MX 2004 时重新打开您上一次使 用的文档。 ▲完全支持 Unicode:DW MX 2004 支持 Internet Explorer 所支持的所有文本编 码方式。您可以使用几乎所有您的
系统中安装的语言字体,DW MX 2004 会正确地显示 和保存这些字体。 ▲安全 FTP:使您能够完全加密所有文件传输。 ▲新式的页面布局和设计环境。 ▲增强的 CSS 功能:提供了一个更为精巧的方法来进行样式设计及提高设计交互 性。 ▲动态跨浏览器验证:在您保存文档时自动检查当前文档的跨浏览器兼容性问题。
本教程针对 DW MX 2004 简体中文版进行讨论,供学习网页制作创建静态网站的朋 友们参考。因本人水平有限,不当之处在所难免,欢迎批评指正。
【图象处理软件】 Photoshop:制作图文并茂的网页,需要处理图片, PS 是最好的图象处理软件。 最新版为 Photoshop CS(俗称 8.0)版本。对初学者来说稍微专业了。您可以使用简单易 学、功能强大的的 Photoshop Elements(即:PSE),对于网页图片文件制作 PSE 就足 够用了。。 Fireworks:最新为 MX 2004 版本,网页制作三剑客之一。能和 DW 无缝链接。该软 件请您自行收集下载。 Flash: 最新为 MX 2004 版本,网页制作三剑客之一。网上最火的动画制作软件。 该软件请您自行收集下载。 Ulead
GIF Animator:友立公司开发的功能强大的 GIF 动画软件。该软件请您自行 收集下载。
【其他软件】 CuteFTP:是专业的 FTP 上传软件,用于往服务器端上传文件用。 Dreamweaver MX 2004 有此功能,而且功能强大。但是,不少人还是习惯用专业的 FTP 软件。该软件请 您自行收集下
载。dw怎么制作网页
最终您还需要有一个网络空间。以便您的大作让更多的人浏览。
简体中文版入门教程( Dreamweaver MX 2004 简体中文版入门教程(二) 之窗口布局
窗口布局
Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工 作区中,全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局
或面向手工编码人员需求的布局。首次启动 Dreamweaver 时,会出现一个工作区设置 对话框(如下图):
您可以从中选择一种工作区布局。如果您不熟悉编写代码,请您选择“设计者”。 如果您以后想更改工作区,可以使用编辑菜单“首选参数”对话框切换到一种不同的工 作区。编辑菜单“首选参数”对话框如下图:
【栏目说明】
“插入”栏(如下图):包含用于将各种类型的“对象”(如图像、表格和层)插 入到文档中的按钮。 每个对象都是一段 HTML 代码, 允许您在插入它时设置不同的属性。 例如,您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插 入”栏而使用“插入”菜单插入对象。
“文档”窗口 显示您当前创建和编辑的文档。
“属性检查器”(如下图): 用于查看和更改所选对象或文本的各种属性。nibble
“面板组”(如下图) 是分组在某个标题下面的相关面板的集合。若要展开一个 面板组,请单击组名称左侧的展开箭头;若要取消停靠一个面板组,请拖动该组标题条 左边缘的手柄。
“文件”面板(如下图) 使您可以管理您的文件和文件夹,无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。 “文件”面板还使您可以访问本地磁 盘上的全部文件,类似于 Windows 资源管理器。
Dreamweaver MX 2004 提供了多种此处未说明的其他面板、检查器和窗口。若要打 开其它面板,请使用“窗口”菜单。
简体中文版入门教程( Dreamweaver MX 2004 简体中文版入门教程(三) 之菜单概述
菜单概述
本节提供 Dreamweaver MX 2004 中各菜单的简要说明。下图为菜单条:
以下分别叙述菜单选项:
文件菜单 编辑菜单
“文件 菜单 包含“新建”、 文件”菜单 “打开”、 “保存”、 “保 文件 存全部”, 还包含各种其他命令, 用于查看当前文档 或对当前文档执行操作,例如“在浏
lovephp是什么意思览器中预览”和 “打印代码”。 “编辑 菜单 包含选择和搜索命令,例如 编辑”菜单 编辑 “选择父标签”和“查和替换”。“编辑”菜单还提 供对 DW 菜单中“首选参数”的访问。
查看菜单
插入菜单
“查看 菜单 使您可以看到文档的各种视图 查看”菜单 查看 (例如“设计”视图和“代码”视图),并且可以显示
“插入 菜单 插入”菜单 用于将 插入 菜单提供“插入”栏的替代项, 对象插入您的文档。
和隐藏不同类型的页面元素和 DW 工具及工具栏。
修改菜单
文本菜单
oracle文档“修改 菜单 使您可以更改选定页面元素或项 修改”菜单 修改 的属性。使用此菜单,您可以编辑标签属性,更改 表格和表格元素,并且为库项和模板执行不同的操 作。 命令菜单 站点菜单 式。 “文本 菜单 文本”菜单 文本 菜单使您可以轻松地设置文本的格
“站点 菜单 提供用于管理站点以及上传 站点”菜单 站点 “命令 菜单 提供对各种命令的访问;包括一个根 和下载文件的菜单项。 命令”菜单 命令
据您的格式首选参数设置代码格式的命令、一个创 建相册的命令等。 窗口菜单 帮助菜单
“帮助 菜单 提供对 Dreamweaver 文档 帮助”菜单 帮助 “窗口 菜单 提供对 DW 中的所有面板、 窗口”菜单 检查 的访问,包括关于使用 Dreamweaver 以及创建 窗口 器和窗口的访问。 Dreamweaver 扩展功能的帮助系统,还包括各 种语言的参考材料。
除了菜单栏菜单外,Dreamweaver 还提供多种右键显示上下文菜单,您可以利用它 们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单,右击窗口中的 某一项。
简体中文版入门教程( Dreamweaver MX 2004 简体中文版入门教程(四) 之常用工具栏
“插入”栏包含用于创建和插入对象(如表格、层和图像)的按钮。当鼠标指针滚动到 一个按钮上时,会出现一个工具提示,其中含有该按钮的名称。
某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时,该选项将成为该 按钮的默认操作。例如,如果从“图像”按钮的弹出菜单中选择“图像占位符”,下次 单击“图像”按钮时,Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一 个新选项时,该按钮的默认操作都会改变。
“插入”栏按以下的类别进行组织:
“常用”类别使您可以创建和插入最常用的对象,例如图像和表格。 常用”类别 “布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图 布局”类别 中进行选择:“标准”(默认)、“扩展表格”和“布局”。当选择“布局”模
式后, 您可以使用 Dreamweaver 布局工具:“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。 表单”类别
“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。 文本”类别
“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。 HTML”类别
“服务器代码”类别仅适用于使用特定服务器语言的页面,这些类别中的每一个都 服务器代码”类别 提供了服务器代码对象,您可以将这些对象插入“代码”视图中。
“应用程序”类别使您可以插入动态元素,例如记录集、重复区域以及记录插入和 应用程序”类别 更新表单。
元素”类别使您可以插入 Flash 元素。 “Flash 元素”类别
“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。 收藏”类别
文档工具栏
文档工具栏中包含按钮, 这些按钮使您可以在文档的不同视图间快速切换: “代码” 视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。
工具栏中还包含一些与查看文档、 在本地和远程站点间传输文档有关的常用命令和 选项。
以下对选项进行说明:
显示代码视图 仅在“文档”窗口中显示“代码”视图。
显示代码视图和设计视图 在“文档”窗口的一部分中显示“代码”视图,而在另 一部分中显示“设计”视图。当选择了这种组合视图时,“视图选项”菜单中的“在顶 部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视 图。
显示设计视图 仅在“文档”窗口中显示“设计”视图。
标题 允许您为文档输入一个标题,它将显示在浏览器的标题栏中。如果文档已经 有了一个标题,则该标题将显示在该区域中。
没有浏览器/ 没有浏览器/检查错误 使您可以检查跨浏览器兼容性。伽马函数有什么用
文件管理 显示“文件管理”弹出菜单。
在浏览器中预览/ 在浏览器中预览/调试 在浏览器中预览或调试文档。从弹出菜单中选择一个浏览 器。
刷新设计视图 当您在“代码”视图中进行更改后刷新文档的“设计”视图。
视图选项 允许您为“代码”视图和“设计”视图设置选项。
状态栏
状态栏提供与您正创建的文档有关的其它信息。
mvc模式容易吗标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何 标签以选择该标签及其全部内容。比如:单击 可以选择文档的整个正文。 窗口大小 弹出菜单(仅在“设计”视图中可见)用来将“文档”窗口的大小调整
到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间
简体中文版入门教程( Dreamweaver MX 2004 简体中文版入门教程(五) 之定义站点
设置站点
Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建 完整的 Web 站点。 创建 Web 站点的第一步是规划。 为了达到最佳效果, 在创建任何 Web
站点页面之前,应对站点的结构进行设计和规划。决定要创建多少页,每页上显示什么 内容,页面布局的外观以及页是如何互相连接起来的。
请执行以下操作: 启动 Dreamweaver MX 2004: 选择“站点”>“管理站点”(即,从“站点”菜单选择“管理站点”)。 出现“管 > 理站点”对话框。 在“管理站点”对话框中,单击“新建”,然后从弹出式菜单中选择“站点”。 出 现“站点定义”对话框。 如果对话框显示的是“高级”选项卡,则单击“基本”。 出现“站点定义向导” 的第一个界面,要求您为站点输入一个名称。
在文本框中,输入一个名称以在 Dreamweaver MX 2004 中标识该站点。该名称可以 是任何所需的名称。 单击“下一步”。出现向导的下一个界面,询问您是否要使用服务器技术。
选择“否”选项,指示目前该站点是一个静态站点,没有动态页。 单击“下一步”。出现向导的下一个界面,询问您要如何使用您的文件。
选择标有“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”的选 项。 在站点开发过程中有多种处理文件的方式,初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话 框。
单击“下一步”, 出现向导的下一个界面,询问您如何连接到远程服务器。从弹 出式菜单中选择“无”。
您可以稍后设置有关远程站点的信息。目前,本地站点信息 对于开始创建网页已经足够了。单击“下一步”,该向导的下一个屏幕将出现,其中显 示您的设置概要。
单击“完成”完成设置。 随即出现“管理站点”对话框,显示您的新站点。单击 “完成”关闭“管理站点”对话框。 现在,已经为您的站点定义了一个本地根文件夹。下一步,可以编辑自己的网页了
简体中文版入门教程( Dreamweaver MX 2004 简体中文版入门教程(六) 之创建页面
页面编辑
本节介绍如何应用 Dreamweaver MX 2004 创建自己的网页。 从头创建自己的页面,可以使用 Dreamweaver MX 2004 起始页创建新页,或者可以 选择“文件”
>“新建”,弹出如下对话框:
从各种预先设计的页面布局中选择一种。比如:选择“基本页”HTML,点击创建按 钮。Dreamweaver MX 2004 即展开工作区界面(一个空白页):
您可以在这个空白页添加表格和输入文本进行编辑。 如果您要向页面添加图片或其 它元素,应先保存这个空白页。选择“文件”>“另存为”,在“另存为”对话框中, 浏览到站点本地根文件夹下。填入文件名,保存退出。
简体中文版入门教程( Dreamweaver MX 2004 简体中文版入门教程(七) 之页面制作
现在,以下边的简单网页为例,叙述一下制作过程。简单网页如下图:
在开始制作之前,我们先对这个页面进行一下分析。看看这个页面用到了那些东西。 □网页顶端的标题“我的主页”是一段文字。 □网页中间是一幅图片。 □最下端的欢迎词是一段文字。 □网页背景是一深紫红颜。 知道了这个网页的结构以后我们就来可以制作了。 首先启动 Dreamweaver MX 2004,确保你已经用站点管理器建立好了一个网站(根 目录)。
为了制作方便, 请您事先打开资源管理器, 把要使用的图片收集到网站目录 images 文件夹内。
【插入标题文字 插入标题文字】 插入标题文字
进入页面编辑设计视图状态。在一般情况下,编辑器默认左对齐,光标在左上角闪 烁, 光标位置就是插入点的位置。 如果要想让文字居中插入, 点属性面板居中按钮即可。 启动中文输入法输入“我的主页”四个字。字小不要紧,我们可以对它进行设置。
【设置文字的格式】 选中文字,在上图属性面板中将字体格式设置成默认字体, 设置文字的格式】 大小可任意更改字号。并选中“B”将字体变粗。 B
【设置文字的颜】首先选中文字,在属性面板中,单击颜选择图标,在弹出的 设置文字的颜】 颜选择器中用滴管选取颜即可。
【设置网页的标题和背景颜 设置网页的标题和背景颜】 设置网页的标题和背景颜 点击“修改”菜单选“页面属性”。系统弹出页面属性对话框(如下图)
请在标题输入框填入标题“我的主页”。 设置背景颜: 网页背景可以是图片,也可以是颜。此例是颜。如上图打开 背景颜选择器进行选取。如果背景要设为图片,点击背景图象“浏览”按钮,系统弹 出图片选择对话框,选中背景图片文件,点击确定按钮。
设计视图状态,在标题“我的主页”右边空白处单击鼠标,回车换一行,按照以下 的步骤插入一幅画图片,并使这张图片居中。您也可以通过属性面板中的左对齐按钮让 其居左安放。
【插入图像】选择以下
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论