中文版简介。
中文版建站流程
中文版建站初步。
文件命名及修改默认扩展名 。
页面属性的设置 。
强大的颜色选取功能。
用表格搭建页面。
版式设计。
选择适用的工作区。
调整工作区大小、在布局视图中添加内容 。
移动布局单元格和表格及调整它们的大小 。

Q: Dreamweaver MX中文版简介。
A: Macromedia公司推出的Dreamweaver MX中文版，不仅是专业人员制作网站的首选工具，而且普及到广大网页制作爱好者中，相对于其它网页制作工具和以前版本，有以下这些优势：

◇ 对简体中文良好的支持，不会出现一些不兼容中文的现象。例如，在早期的Dreamweaver4.0中，制作Flash按钮时会出现乱码。

◇ 使用Dreamweaver MX中文版，可以在可视化界面制作出ASP，ASP，NET，JSP，PHP， ColdFusion站点。

◇ Dreamweaver MX中文版自带大量模板，简化了用户的制作过程。

◇ Dreamweaver MX中文版支持数量众多的第三方插件，大大增强了Dreamweaver MX的功能。

◇ 通过配置 Dreamweaver MX 生成符合 XHTML 的代码，确保用最新的 HTML 设计标准及时更新站点。



如何获取Dreamweaver MX简体中文版

从Macromedia中文官方网站，可以下载到试用版的Dreamweaver MX。

Macromedia中文官方网站：http://www.macromediachina.com/

也可以使用google搜索引擎：http://www.google.com以Dreamweaver MX简体中文版+下载，作关键词搜索并下载些软件。

Dreamweaver MX十大新功能：

◇       直观的新工作区

通过标记的文档窗口、可对接的面板组、可自定义的工具条和集成的文件浏览，节省宝贵的开发时间。  

◇ 更加强大的模板

为开发人员设置尖端的规则，以便在不影响站点设计的情况下输入内容。嵌套的模板支持更为自定义的布局控制，而可编辑和可选的地区则允许开发人员更加灵活地输入内容。

◇  广泛的代码库

使用预置的代码库创建插入和更新表单、记录集导航页和用户认证页。通过用现场数据填充设计视图来测试布局。

◇ 新服务器技术支持

Dreamweaver MX 新增了对构建 ColdFusion MX、ASP.NET 和 PHP 网站的支持，以及对开发 ASP、JSP 和传统 ColdFusion 应用程序的支持。

◇ 帮助您起步的示例内容

利用专业质量的、预置的布局和代码，包括站点结构、表单、可访问的模板和 JavaScript 客户机方交互功能。运用能够即时为动态站点、静态站点或 ISP 托管的站点配置站点信息的站点设置向导，快速创建新站点。

◇ XML 和 Web 标准支持

     通过 XML 支持保持前沿领先优势，包括编辑、确认和导入纲要。轻易地自省ColdFusion、.NET 和 Java 中基于 XML 的 web 服务。通过 XHTML 输出的默认创建及标准 HTML 到 XHTML 的简单转换，确保标准一致性。

◇ 改进的级联样式表 2 (CSS2) 支持

使用 Dreamweaver MX 中改进的 CSS 渲染和设计工具，构建符合最新 CSS 标准的站点。Dreamweaver MX CSS 面板经过增强，可显示内外部定义的样式，并支持仅设计时间样式表。

◇ 高性能的新编码功能

利用高性能的编码功能（如代码提示、标记编辑器、可扩展的颜色编码、标记选择器、代码片段和代码确认，更快地编写自己的代码。

◇ 辅助功能

利用页面和站点的符合性检查功能、产品内含的参考内容及辅助功能有源创作模式，随时了解最新的美国法律和国际标准。

◇ 为 ColdFusion MX 开发而优化

 ColdFusion 的初学者会发现站点向导、代码示例和参考材料很有帮助意义。而高级开发人员可以利用最新的 ColdFusion MX 功能，包括 ColdFusion 组件、web 服务以及集成的调试和跟踪。

作者:痴心不改    出处：5D多媒体

Q: Dreamweaver MX中文版建站流程
A: 现在最流行的就是上网了，看到一个个精美的个人网站，是不是也有种冲动想自己来做网站？做网站可得做得好啊！Dreamweaver MX中文版的出现，使制作一个功能强大的网站，变得很容易，可以轻易的做出以前被认为很复杂的ASP，PHP网站。很重要的一点，它是中文版的，大家以后不会为看不懂英文头痛了J我知道大家的心情，很想快速学好制作网页，特别是一些想从事这个行业的人，学习网页制作时寄托了很高的期望，任何一个不明白的地方，都有可能被卡住。在接下来的教程中，将会给大家讲的尽量通俗易懂，一看就会。因为是中文版，有些简单的部分只会稍作介绍，容易出错和价值很高的部分，将作为重点。通过几个建站实例，一步一步的带大家掌握网页制作技术。我觉得做网站制作中，首先要了解的就是制作流程了。

　　整个网站的制作流程：在Photoshop或者Fireworks中作出效果图→切图→在Dreamweaver中添加文字，定义样式。

　　使用Dreamweaver也可以制作出整个网站，只是Dreamweaver本身不适合处理图片，需要Photoshop或者Fireworks的配合。下面是使用Dreamweaver制作静态站点的流程，动态站点流程将在以后介绍。

　　新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→转换到布局视图→添加内容→插入导航条→转换到标准视图工作→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。

　　还有一些很重要的功能，是进阶必须掌握的技术。我认为下面的一些技术，是很重要的。

1　分析一个站点的方法

2　使用模板

3　使用框架

4　表格的应用技巧

5　使用插件

6　使用多页

7　在代码视图设计

8　实用的代码片断

9　层

10　时间轴

11　使用颜色

12　查找与替换功能

13　库

   以上是一个静态网站建设流程和需要掌握的技术。在后面的几篇文章中，将通过建立一个网站实例，具体介绍这些内容。 

作者：痴心不改      出处：5D多媒体


Q: Dreamweaver MX中文版建站初步。
A: 建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。现在免费的网页空间很少了，在http://www.51.net还可以申请到可以使用几个月的免费空间，这对于学习网页制作已经够了。接下来主要介绍本地站点的建立，站点文件命名。 

简明步骤：在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。

目标是做一个个人网站。打开“我的电脑”，打开C盘，点鼠标右键，选择新建。

 

选择文件夹选项

 

C盘下会出现一个新建文件夹图标

 

输入你想要的站点名称，这里输入media,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！

 

现在开始在Dreamweaver MX中把media这个文件夹定义为站点。

打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点

 

接下来需要给站点起一个名字，可以起任意一个名字。

 

这里起名为media,按下一步

 

按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。

 

按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。

 

按下一步，选择要定义的本地根文件夹

 

这里选择media文件夹

 

点“选择”按钮，因为没有使用远程服务器，就选择“无”。

 

按下一步

 

按完成按钮，一个站点就定义好了。




原作者：痴心不改 出处：5D多媒体 

Q: 文件命名及修改默认扩展名 。
A:站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。

 

给新建的文件输入名称

 

新建文件夹与新建文件类似，就不重复了。在文件命名和站点结构方面，养成良好的习惯很重要。

网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名成英文，可以是me。论坛这个栏目的命名，大家都是用bbs作文件夹名称。

应该有人发现了，怎么Dreamweaver MX默认扩展名是.htm，可我的空间默认扩展名是.html啊，难道要一个一个改扩展名？有办法的！修改Dreamweaver MX的一个配置文件，就可以把默认扩展名从.htm改到.html。

以windows2000操作系统，Dreamweaver MX默认安装路径为例，找到  

文件名（MMDocumentTypes.xml）这个文件，此文件位于：C:\Program Files\Macromedia\Dreamweaver MX\Configuration\DocumentTypes文件夹下。

双击MMDocumentTypes.xml，在Dreamweaver MX中打开

 

把第三行的html移动到"htm,html,shtml,shtm,stm,lasso,xhtml"这部分最前面的位置，就是改成"html,htm,shtml,shtm,stm,lasso,xhtml"。

 

保存文件。重新打开Dreamweaver MX，新建一个文件，默认扩展名变成.html了，其它扩展名修改方法类似。


原作者：痴心不改 出处：5D多媒体 

　

Q: 页面属性的设置 。
A:双击media站点中的index.htm，打开一个空白的页面。我们将从这个空白页面开始制作，了解页面属性的设置和作用。

在工作区点鼠标右键，选择页面属性。

 

打开页面属性对话框

 

下面是我设置的一个页面属性

 

在标题上输入5dmedia，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色。Dreamweaver MX有强大的颜色选取功能，将在下一篇中详细介绍。设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。

 

如果不设置设置左边界，顶部边界，边界宽度，边界高度，就会与顶部和左边有明显的空隙

 

在中国大陆，使用的是简体中文（GB2312）编码。繁体网站，使用的是繁体中文（big5码）。

英文网站使用的是西欧语系（Latinl）。

    用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。


原作者：痴心不改  出处：5D多媒体 

　

Q: 强大的颜色选取功能
A: 网页设计中，颜色是最关键的，决定了一个网站在美工方面是否成功。Dreamweaver MX提供了强大的颜色选取功能。可以精确定义只要是网页设计中成立的颜色。

   现在流行的网页设计配色，采用黑、白、灰这些无彩色作基调，采用一种精确的有彩色作为主色调，大多使用一种颜色的渐变，让人感觉只有一种有彩色，颜色渐变是在Photoshop、Fireworks中处理的，不在本文讨论范围。在下面，主要针对相近颜色，无彩色和有彩色的精确选取三部分。

下面将以调整页面属性的颜色为实例，选择颜色选取框，

 

打开颜色选取面板

 

◇     精确选取有彩色：

如果要精确选取各种颜色，特别是各种有彩色，就要使用“系统颜色拾取器”

 

单击“系统颜色拾取器”，打开颜色面板

 

拖动最右边的滑块，调整高度。

 

◇ 选择连续色调，在网页设计时，常使用相近的颜色。点三角形按钮，选“连续色调”

 

◇ 无彩色的选取：选择“灰度级”，可以选取从白到黑各种无彩色。

 

不要选中“调整到网页安全色”，如果选中这一项，会减少可选择的颜色数。




原作者：痴心不改   出处：5D多媒体    

Q: 用表格搭建页面.
A: 现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。

采用象素为单位，是以使用最多的显示器为参照的，现在数量最多的显示器是15英寸和17英寸的，所以页面使用象素为单位时，是以15英寸为标准，常用800×600的分辨率。                         

使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显示。下面分别介绍这两种方法。

简明步骤：打开一个页面→插入表格→设置表格宽度

在以前建立的media站点中，新建index.htm文件，双击打开。

 

点击插入表格图标

 

打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0

 

在下面直接按确定

 

一个可以在各种显示器上全屏幕显示的网页就搭建好了。以后要做的是在表格里填充内容。

 

下面介绍象素大小的表格设置，选择像素为单位，值为768。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。

 

使用像素作单位时，可以用不同的值，下面是一些站点的宽度值：

5D多媒体http://www.5dmedia.com/首页：宽760像素。

Microsoft 中文主页http://www.microsoft.com/china/ms.htm：宽100％

Apple中国主页http://www.apple.com.cn：宽680像素。

三星电子http://www.isamsung.com.cn/：宽700像素。

联想http://www.legend.com/：宽725像素。

以上这些站点的网页宽度，说明宽度没有一个固定值。

做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。

用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。

 

   完全下载一个表格的内容，才能在IE中显示出来。如果页面文件小，可以只有一个表格放内容。如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完。下面是Apple中国主页的结构




原作者：痴心不改 出处：5D多媒体 

Q: 版式设计.
A: 设计精美的网站，都是采用了优秀的版式设计。做一个网页，先要规划好版式。本篇主要介绍制作网页时的版式设计。

主要内容：

    几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页内容，版权声明。

 

    以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。

    中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。

    下面一个表格，一行一列，放版权声明。

    几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。

LOGO: 88×31

    实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。也有相反的例子。例如三星电子http://www.isamsung.com.cn/ ，说明在设计时，并不受什么标准的限制。

    常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：

 

最下面的表格，一行一列，放版权声明，联系方式。

    导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。

    如果是以内容为主的网页，直接放入文字作为栏目，以键盘上的“|”分隔，一行一列的表格，如果栏目多，可以变成二行一列的表格。常见于门户网站，如http://www.163.com

    如果内容很多，兼顾美观，推荐使用弹出式菜单，在Dreamweaver MX中文版中可以直接做出弹出式菜单，不象以前的版本那么复杂，将在以后的文章中介绍。

    如果是个人网站，内容较少，可以使用尺寸较大的图片作菜单，应用CSS滤镜后，可以有很好的效果。

    现在最流行的就是Flash导航菜单了，晃到一个按钮上时，有动画有声音，效果非常好。但是在没有装Flash播放器的电脑上，不能显示。

    现在国内使用较多的是使用按钮做导航。

    在Dreamweaver MX中文版提供了直接制作Flash按钮的功能，输入文字就可以做出中文的Flash按钮。

    导航栏有横排的、竖排的，也有两种都有的，横排的例如:V6艺术精英http://www.v6dp.com这个站点页面采用的是百分比，在任何电脑上显示都是全屏幕的。



    坚排的如三星电子http://www.isamsung.com.cn/ 另外这个站点LOGO在右上角。

 

    横排坚排均有的：联想http://www.legend.com联想的菜单栏还使用了弹出式菜单。

 

    网页的内容主要是文字和一些图片，为了方便阅读，两行文字之间的距离不宜太近。需要在CSS中设置行距，将在以后的文章中介绍。


作者：痴心不改 出处：5D多媒体 

Q: 选择适用的工作区
A: Dreamweaver MX 提供了两种可供选择的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非类似于 Dreamweaver 4 的浮动布局。第一次运行Dreamweaver MX需要选择一种工作区布局。

 

选择Dreamweaver MX工作区

 

两种布局的喜好因人而异，如果选择的是Dreamweaver MX工作区，想改成Dreamweaver 4工作区，可以使用“参数选择”对话框切换。

 

选择更改工作区

 

Dreamweaver MX 工作区是一个使用 MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。建议大多数用户使用它。

HomeSite/代码编写者样式的 Dreamweaver MX 工作区是同样的集成工作区，但是将面板组停靠在左侧，布局类似于 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所用的布局，而且“文档”窗口在默认情况下显示“代码”视图。建议 HomeSite 或 ColdFusion Studio 用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。若要选择这种布局，请选择“Dreamweaver MX 工作区”选项，然后选择“HomeSite/代码编写者样式”选项。 

Dreamweaver 4 工作区是一种与 Dreamweaver 4 中所用布局相类似的工作区布局，其中每个文档都位于自己的独立浮动窗口中。面板组停靠在一起，但并不是停靠在一个更大的应用程序窗口中。仅建议喜欢使用更熟悉的工作区的 Dreamweaver 4 用户使用这种布局。

 

选择一种布局后，下一次启动Dreamweaver MX就可以生效。

如果因为改变面板位置，无法恢复原先的菜单或者面板位置，也可以采取切换工作区布局的方法恢复。从Dreamweaver MX 工作区切换到Dreamweaver 4 工作区，再从Dreamweaver 4 工作区切换到Dreamweaver MX 工作区，就可以恢复Dreamweaver MX 工作区布局。


作者：痴心不改 出处：5D多媒体 

Q: 调整工作区大小、在布局视图中添加内容
A: 使用Dreamweaver MX工作区，默认的界面中，工作区很小，如果要把工作区变大，选择三角形按钮，就可以隐藏面板组和属性面板。

 

如果要使用面板组，再点击三角形按钮。

  
在Dreamweaver MX中，可以在表格中添加内容，但是内容只是在表格的中间出现。这时需要从标准视图切换到布局视图，精确定位网页内容。

 

（图三）

点“布局” 切换到布局视图

 

在布局视图中，您可以在页上绘制布局单元格和布局表格。当您不在布局表格中绘制布局单元格时，Dreamweaver 会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。

单击插入栏“布局”分类中的“绘制布局单元格”按钮
 

将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。若要创建多个单元格而不用每次都单击“绘制布局单元格”按钮，请按住 Ctrl 键并拖动指针来创建每个布局单元格。

 

绘制一个布局表格: 单击插入栏“布局”分类中的“绘制布局表格”按钮, 将鼠标指针放置在页上，然后拖动指针以创建布局表格。若要绘制多个布局表格而不必重复单击“绘制布局表格”按钮，请在单击“绘制布局表格”按钮时按住 Ctrl 键。

 

绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。单击插入栏“布局”分类中的“绘制布局表格”按钮。鼠标指针变为加号 (+)，指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。

 

转换到标准视图下的表格就是

 
将内容添加到布局单元格中：在布局单元格中输入文字。单击插入栏“常用”类别中的“插入图像”按钮插入图像。如（图三）所示。

作者：痴心不改 出处：5D多媒体 

Q: 移动布局单元格和表格及调整它们的大小
A: 调整布局单元格的大小: 选择一个单元格，按住 Ctrl 键的同时单击该单元格中的任何位置，该单元格周围出现选择控制点。拖动选择控制点来调整单元格的大小。




移动布局单元格: 按住 Ctrl 键的同时单击该单元格中的任何位置, 将该单元格拖到其布局表格中的另一个位置。按箭头键移动该单元格，每次移动 1 个像素。在按住 Shift 键的同时按箭头键移动该单元格，每次 10 个像素。

 
 

调整布局表格的大小: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。



移动布局表格: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。 将表格拖到页上的另一个位置。(只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格)。

 


作者：痴心不改 出处：5D多媒体