网页利器Dreamweaver MX
建站流程
使用Dreamweaver也可以制作出整个网站，只是Dreamweaver本身不适合处理图片，需要Photoshop或者Fireworks的配合。下面是使用Dreamweaver制作静态站点的流程（动态站点流程将在以后介绍）：新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→转换到布局视图→添加内容→插入导航条→转换到标准视图工作→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。 【新建站点】
建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上（Internet上有一些免费的虚拟空间可申请）。接下来主要介绍本地站点的建立，站点文件命名。
简明步骤：在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。
目标是做一个个人网站。打开“我的电脑”，打开C盘，点鼠标右键，选择新建。
选择文件夹选项
C盘下会出现一个新建文件夹图标
输入你想要的站点名称，这里输入media,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，因为Dreamweaver不能处理中文的文件夹和文件名。
第 1 页
网页制作——网页利器Dreamweaver MX
现在开始在Dreamweaver MX中把media这个文件夹定义为站点。 打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点
接下来需要给站点起一个名字，可以起任意一个名字。
这里起名为media,按下一步
第 2 页
网页制作——网页利器Dreamweaver MX
按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
按下一步，选择要定义的本地根文件夹
这里选择media文件夹
第 3 页
网页制作——网页利器Dreamweaver MX
点“选择”按钮，因为没有使用远程服务器，就选择“无”。
按下一步
按完成按钮，一个站点就定义好了
第 4 页
网页制作——网页利器Dreamweaver MX
【站点文件命名】
站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。并给新建的文件输入名称
新建文件夹与新建文件类似，就不重复了。在文件命名和站点结构方面，养成良好的习惯很重要。
网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，
团队开发时，有统一的命名规则相当重要。例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名成英文，可以是me。论坛这个栏目的命名，大家都是用bbs作文件夹名称。 【定义页面属性】
双击media站点中的index.htm，打开一个空白的页面。我们将从这个空白页面开始制作，了解页面属性的设置和作用。
在工作区点鼠标右键，选择页面属性。
打开页面属性对话框
第 5 页
网页制作——网页利器Dreamweaver MX
下面是我设置的一个页面属性
在标题上输入5dmedia，在背景，文本，链接，访问过的链接，活动链接几部分选取颜色(Dreamweaver MX有强大的颜色选取功能，将在下一篇中详细介绍)。如果不设置左边界，顶部边界，边界宽度，边界高度，就会与顶部和左边有明显的空隙用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。 打开颜色选取面板
【网页配色】 „„
【插入表格】
现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显
示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。 采用象素为单位，是以使用最多的显示器为参照的，现在数量最多的显示器是15英寸和17英寸的，所以页面使用象素为单位时，是以15英寸为标准，常用800×600的分辨率。
使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显
第 6 页
网页制作——网页利器Dreamweaver MX
示。下面分别介绍这两种方法。
简明步骤：打开一个页面→插入表格→设置表格宽度
在以前建立的media站点中，新建index.htm文件，双击打开。
点击插入表格图标
打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0
第 7 页
网页制作——网页利器Dreamweaver MX
一个可以在各种显示器上全屏幕显示的网页就搭建好了。以后要做的是在表格里填充内容
下面介绍象素大小的表格设置，选择像素为单位，值为778（极限值，不会产生下滚动条，如果不设页面属性边距值为759）。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。
不要使用与显示器宽度一样的象素值，不然页面会过宽，使下方出现滚动条。 如果用100％，在任何显示器上都是全屏显示
使用像素作单位时，可以用不同的值，下面是一些站点的宽度值： 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”等。用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。
第 8 页
网页制作——网页利器Dreamweaver MX
完全下载一个表格的内容，才能在IE中显示出来。如果页面文件小，可以只有一个表格放内容。如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完，提高显示速度。下面是Apple中国主页的结构
设计精美的网站，都是采用了优秀的版式设计。做一个网页，先要规划好版式。本篇主要介绍制作网页时的版式设计。 主要内容：
几种常用的版式（分栏结构），LOGO（标志）尺寸，Banner（横幅）尺寸，导航栏类型，导航菜单位置，网页内容，版权声明。
第 9 页
网页制作——网页利器Dreamweaver MX
以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。
中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。
下面一个表格，一行一列，放版权声明。
几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。 LOGO: 88×31
实际中Banner和LOGO尺寸是根据设计需要选择大小，并不受标准的限制。常见的LOGO在页面的左上方，Banner在页面的右上方。也有相反的例子。例如三星电子http://www.isamsung.com.cn/ ，Logo就在右上方。说明在设计时，并不受什么标准的限制。 常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：
最下面的表格，一行一列，放版权声明，联系方式。
导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。 如果是以内容为主的网页，直接放入文字作为栏目，以键盘上的“|”分隔，一行一列的表格，如果栏目多，可以变成二行一列的表格。常见于门户网站，如http://www.163.com
如果内容很多，兼顾美观，推荐使用弹出式菜单，在Dreamweaver MX中文版中可以直接做出弹出式菜单，不象以前的版本那么复杂，将在以后的文章中介绍。
第 10 页
网页制作——网页利器Dreamweaver MX
【转换到布局视图】 点“布局” 切换到布局视图
在布局视图中，您可以在页上绘制布局单元格和布局表格。当您不在布局表格中绘制布局单元格时，Dreamweaver 会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。
单击插入栏“布局”分类中的“绘制布局单元格”按钮
将鼠标指针放置在页上要开始绘制单元格的位置上，然后拖动指针以创建布局单元格。若要创建多个单元格而不用每次都单击“绘制布局单元格”按钮，请按住 Ctrl 键并拖动指针来创建每个布局单元格。
第 11 页
网页制作——网页利器Dreamweaver MX
绘制一个布局表格: 单击插入栏“布局”分类中的“绘制布局表格”按钮, 将鼠标指针放置在页上，然后拖动指针以创建布局表格。若要绘制多个布局表格而不必重复单击“绘制布局表格”按钮，请在单击“绘制布局表格”按钮时按住 Ctrl 键。
绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。单击插入栏“布局”分类中的“绘制布局表格”按钮。鼠标指针变为加号 (+)，指向现有布局表格中的空白（灰色）区域，然后拖动指针以创建嵌套布局表格。
转换到标准视图下的表格就是
第 12 页
网页制作——网页利器Dreamweaver MX
将内容添加到布局单元格中：在布局单元格中输入文字。单击插入栏“常用”类别中的“插入图像”按钮插入图像。
如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小，如图： 调整图片大小使图片适应表格 使表格适应图片（如下）
【添加内容】
在向网页填充内容之前，需要准备素材，包括网站的LOGO，Banner，图片，Flash动画，各种按钮，声音文件，用于布局参考的参考图像。把这些内容复制到站点中。教程的实例是把图片复制到站点中的images文件夹，参考图像复制到image文件夹。
简明步骤：准备各种素材复制到站点中→设置页面的跟踪图像→插入表格确定尺寸→布局→从资源面板中把资源拖到页面。
第 13 页
网页制作——网页利器Dreamweaver MX
在布局视图中可以设置各种对象的属性，本篇的主要内容是了解各种设置的作用。 1 给图像描边
作用：增加图片的美观。
简明步骤：选中一个图像，边框设置为1，就给图像加了一个像素的边框。选中页面中的一个图像。
在属性面板\"边框\"中填1。
经过描边后的图像在浏览器中显示如下图。
第 14 页
网页制作——网页利器Dreamweaver MX
设置图文混排
图文混排的作用：当没有设置图文混排，页面看起来很不美观。要使图像和文字在一起美观，必须设置好图文混排。
简明步骤：选中图片，在属性面板中设置对齐方式为左对齐或者右对齐。 采用默认设置时的图片和文字
选中图片，在属性面板中选择对齐方式为\"左对齐\"。
图文混排的结果
给图片增加提示
作用：使用浏览者知道所选择项目的内容。
简明步骤：选中一个图片，在属性面板的替代下拉栏，输入提示文字。 选中一个图片。
第 15 页
网页制作——网页利器Dreamweaver MX
在属性面板的替代下拉栏，输入提示文字。
在浏览器中，当指向这个图片时，就会出现文字提示。
创建图像地图
作用：当点击一个图像的不同部分，可以链接到一个新的网页。也可以在当前窗口打开。 简明步骤：选中目标图片→选择属性面板中的热点工具→用热工具在图片中画出热点区域→在属性面板中输入链接地址，选择目标窗口打开方式。 选中目标图片，选择属性面板中的矩形热点工具。
用热工具在图片中画出热点区域。
在属性面板中输入链接地址，选择目标窗口打开方式。
第 16 页
网页制作——网页利器Dreamweaver MX
5 设置图像边距
作用：设置图像边距，可以使图像和表格边框产生一个边距，也会和相邻的文字或者其它图片产生一个边距。有时候设置边距为一个非0的数值可以起到美观的作用。但是有的时候输入数值为0的边距可以使用页面紧凑。
简明步骤：选中一个图片，在属性面板中，给垂直边距和水平边距输入数值。 没有设置边距的图片：
输入了垂直边距和水平边距的效果，明显和表格边框有距离。
1 给单元格设置颜色
简明步骤：选中单元格，在属性面板中，选择一种背景颜色。
把鼠标放在单元格内，出现红色边框时，单击，就可以选中单元格了。
在属性面板中，选择一种背景颜色。
设置了背景颜色的单元格：
第 17 页
网页制作——网页利器Dreamweaver MX
2 设置单元格的对齐方式
作用：可以使单元格里的内容，从不同的地方开始。在“垂直”下拉栏选择顶端，输入的文字可以从最上面一行开始；选择中间，文字就开始从中间开始。在“水平”下拉栏，选择“左对齐”，文字和单元格左对齐；选择“右对齐”，文字和单元格右对齐。
简明步骤：选中一个单元格，在属性面板中的“水平”，“垂直”下拉栏选择一个参数。 在属性面板中的垂直选项栏选择“中间”，输入的文字从单元格中间开始。
在属性面板中的垂直选项栏选择“顶端”，输入的文字从单元格顶端开始。输入文字常选择这种方式。
第 18 页
网页制作——网页利器Dreamweaver MX
在属性面板中选择水平对齐方式为右对齐：
在属性面板中，如果不想文字换行，不要选中“不换行”。这种方式可以保持其它表格不变形。
如果选中“不换行”，文字会沿一行扩张，其它表格也被挤压变形。
第 19 页
网页制作——网页利器Dreamweaver MX
设置列为自动伸展的作用：自动伸展列可以随着浏览器调整大小。 选择自动伸展后的效果如下图。
选择固定的宽，输入数值可以改变单元格的高度。
【转换到标准视图工作】
虽然您能够在“布局”视图中调整绝大部分设计元素，但有一些改变却必须在“标准”视图中才能完成。本文主要内容是表格的使用。 主要内容：
（1） 理解单元格，表格，间距，填充，边框。 （2）调整行和列的宽度、高度。 （3）制作一象素表格。 （4）拆分和合并单元格。 第一部分：
当单元格边距和单元格间距没有指定数值时，Netscape Navigator，Microsoft Internet Explorer和Dreamweaver都将以间距2，填充1的设置显示表格。 填充：单元格内容和单元格边框之间的距离（单位：象素）。 间距：单元格之间的距离（单位：象素）。
插入一个表格，为了便于分析表格，这里单元格间距设置为10。
第 20 页
网页制作——网页利器Dreamweaver MX
插入一个表格：
◇单元格：在表格中点击以选定单元格，也可以在标签选择器里点击
| 标签选择一行。本实例是以一个一行二列的表格为基础的。 第 21 页 网页制作——网页利器Dreamweaver MX ◇一个“一行一列”的表格，至少有两个边框。设置边框为1边框颜色黑色的表格如下图。 ◇红色为表格边框，绿色为单元格边框。表格边框和单元格边框的颜色可以分别指定。 间距：边框和边框之间的距离就是间距 第 22 页 网页制作——网页利器Dreamweaver MX 为了便于观看填充的效果，在属性面板中，填充输入为30。 ◇填充：单元格边框和内容之间的距离就是填充。 第二部分：调整行和列的宽度 ◇鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。 第 23 页 网页制作——网页利器Dreamweaver MX 鼠标放在一行的左边，出现横向的箭头时，单击，就可以选中一行。在属性面板中可以设置所选 行的宽和高。 第三部分：制作一像素表格 ◇制作一像素的表格，实质上是设置间距的大小和颜色。实例为便于观看效果，把间距设置为10。单元格填充和边框设置为0。单元格填充和边框不输入数值效果类似。 在单元格中点击，或者选中标签选择器中的 | 选中单元格。设置单元格的背景颜色为白色。 选中表格，设置表格的背景颜色为黑色。一个10象素宽的表格就做好了。实际上是把间距的颜 第 24 页 网页制作——网页利器Dreamweaver MX 色设置成了黑色。 把间距改成1。 发布在浏 览器中的效果。 第四部分：拆分和合并单元格 第 25 页 网页制作——网页利器Dreamweaver MX ◇嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表 ◇合并单元格：按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。 合并后的效果： 拆分单元格：插入一个表格。 ◇在单元格中单击，选中单元 第 26 页 网页制作——网页利器Dreamweaver MX 格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。 拆分为二行一列的表格如下图。 【层的插入】 层可以理解为浮动在网页上的一个页面，它可以被准确地定位于网页的任何地方，并且可以规定它的大小。层在Dreamweaver中被认为是一个对象；这样就具有更多的特性／例如可以给层设定时间线，控制层的运动时间和路线可以随事件的触发而进行一些动作，例如用按钮控制层的隐现等。如果想构建一个十分‘酷’的网页，层的利用几乎是少不了的，用它可以做出许多出入意料的效果。 任何事物都不可能完美，层也一样，如果大量运用层也会带来负面影响。目前的浏览器IE经常会发生层的位置偏移的情况，而且只能通过手工修改代码来解决。 描绘（插入）层 第 27 页 网页制作——网页利器Dreamweaver MX 按下“描绘层”按钮，或者打开插入菜单，选择层命令。 在编辑区中找到合适的位置，按下并向右下拖动鼠标，画出层，然后释放鼠标左键。 层的嵌套和表格的嵌套有些类似，就是在层里面再建立一个层。和表格嵌套不同的是：母表格肯定是大干子表格的，但是层的嵌套就不同，子层可以超出母层。就是说，子层可以完全在母层之外。层的关系。如果两个层有交又，它们可以有两种关系：重叠与嵌套。重叠就是两个层是独立的，任何一个层改变时，不影响另外一个层。而嵌套是子层会随母的某些属性的变化(例如位置移动)而变化，而母层不随子层发生变化。 建立一个完全处于母层之外的子层。如果想建立一个完全处于母层之外的子层，不能通过直接在母层之外建立子层的方法进行。而是要首先在母层内建立一个子层，然后将予层移动到母层外面。打开Windows——>其他——>层。可以暂时显示隐藏其它层，方便操作。 层的属性设置 ●在层编号下的输入框中可以输入层的名字。 ●在 左 与 上 选项中输入数值，改变层相对于浏览器左上角的位置在 宽 与 高 中输入数值，改变层的大小。 ●在Z轴输入数值，改变层的深度。 ●在 显示 选项中进行选择，设置层是否可见。 ●在 背景图像 中选择层的背景图案。 ●在 背景颜色 中选择层的背景色。 ●在Overflow选项中选择当内容溢出层时的处理情况。 ●在Clip中输入四个剪裁角的坐标，对层进行剪裁操作。 层使得浏览器具有了三维的特征，就是除了宽度和高度外，又增加了深度。Z轴就是层的深度数值，它可以是任意整数，Z轴的值越大，这个层的位置就越靠上，也就是说，当与其他层有重叠时，可以遮盖其他Z值小的层。 【添加链接】 第 28 页 网页制作——网页利器Dreamweaver MX 指向文档，图象，多媒体文件或可下载软件的超文本链接称作超级链接, 我们可以为文档内任何地方的任何文本或图象创建链接，包括在标题，列表，表格，层或框架中的任何文本或图象。 超级链接的作用是，可以把一个网站的网页连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。 本文主要内容：各种链接的功能和实现方法。 1 导航链接：实现站点内文档的链接。方法一，使用属性检查器；方法二，指向文件图标链接文档；方法三，使用拖放创建链接。相关内容：在链接时使用的路径；目标文件的打开方式。 2 链接到文档中的指定位置，使用锚； 3 空链接：是一个无指向的链接。使用空链接可以为页面上的对象或文本附加行为。 4 创建javascript脚本链接：用于执行JavaScript代码或者调用JavaScript函数，这样可以让来访者不用离开当前Web页面就可以得到关于一个项目的其他信息。当来访者点击某指定项目时，脚本链接也可以用于执行计算，表单确认和其他处理任务。 5 创建电子邮件链接 6 链接到站点中的文档或者其它站点，可以使用跳转菜单，跳转菜单是文档中的一种来访者可以看见的弹出式菜单，其中列出了链接的文档或文件。 7 给链接增加提示，给链接增加快捷键。 第一部分：创建导航链接 ◇使用指向文件图标链接文档：选中图像，将“属性”检查器的“链接”域右边的“指向文件”图标拖动到站点窗口的文档中。这种方法方便快捷，推荐使用。示例中指向一个文件夹，如果发布到网上后，自动会打开这个文件夹下的默认首页文件index.htm。 ◇使用属性检查器：选中示例中的图像，也可以是文字，点击属性面板中的“浏览文件”图标。 第 29 页 网页制作——网页利器Dreamweaver MX ◇选中一个文件。会出现一个文件相对于“文档”，“站点根目录的选择”。文档相对路径是最适合用于本地链接的路径类型，适合绝大多数Web站点，推荐使用 ◇根相对路径：如果在一个使用多台服务器的大型Web站点或一台服务器上有多个站点的情况 第 30 页 网页制作——网页利器Dreamweaver MX 下工作，可能需要使用这种类型的路径。很少用到这种路径。如果没有服务器的控制权限，不要使用这种方式！ ◇绝对路径：完整的URL，称作绝对路径。例如在链接域输入http://vip.5dmedia.com/fuguotao ◇从打开文档的选取中创建链接：选中文字，按Shift键，拖动出现“指向文件”图标，把“指向文件”图标拖向目标文件，就会建立链接。 ◇选择被链接文档要打开的位置： 若要使被链接文档不出现在当前窗口或框架中，从属性面板的“目标”弹出式菜单选取一个选项。 _blank 在新的未命名的浏览器窗口中加载链接文档。 _parent 在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。 第 31 页 网页制作——网页利器Dreamweaver MX _self 将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。 _top 将在整个浏览器窗口中加载链接文件，同时移除所有框架。 一个网站中，第一级链接或者导航链接选择_self，第二级链接和友情链接选择_blank。 第二部分：使用锚 简明步骤：选中文本→在目标文档中插入锚标记→命名→拖动“指向文件”图标到文本。 ◇链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击常用面板上的命名锚记工具。 键入锚记名称，一个站点中的锚记名称只可以是唯一的，否则会出现错误。 在文档中选取要创建链接的文本，打开您需要链接的命名锚记所在文档，不一定要是当前文档，可以是站点中的其它文档，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记 第 32 页 网页制作——网页利器Dreamweaver MX 处。 第三部分：创建javascript脚本链接 1. 在文档窗口中选取文本，图象或对象 2. 在“属性”检查器的“链接”栏中键入javascript:，其后紧接JavaScript代码或函数调用。 例如在链接栏中键入javascript:alert('哈哈你上当了')创建一个链接，点击链接后就会出现一个警告框 第四部分：创建电子邮件链接 方法一：选取需要创建链接的文本或者图像，点击常用面板中的“电子邮件链接”工具，输入邮件地址。 方法二：选取需要创建链接的文本或者图像，在属性面板中的链接栏输入mailto:邮件地址。 第 33 页 网页制作——网页利器Dreamweaver MX 第五部分：创建跳转菜单，例如制作一个友情链接。 首先将插入点放在要插入链接的位置。点击表单面板中的跳转工具 在插入跳转菜单对话框中，点添加项添加新链接。 在属性面板中选择类型为“菜单”。 第 34 页 网页制作——网页利器Dreamweaver MX 在浏览器中发布如图： 在属性面板中选择类型为“列表”高度为3。 在浏览器中发布如图： 点击属性面板中的列表值，可以修改列表值。 第六部分：给链接增加提示，给链接增加快捷键。 首先将插入点放在要插入链接的位置。 点击常用面板上的超级链接工具。 第 35 页 网页制作——网页利器Dreamweaver MX 设置链接参数。 标题是指当指向链接会出现提示。 【使用模板】 访问键是指按键盘上的快捷键会选中链接。例如在实例中按Alt+D键会选中5D多媒体。 当需要制作大量布局基本一致的网页时，使用模板是最好的方法。 本文介绍的是基于一个网页创建模板的方法。 简明步骤：打开一个已经存在的网页→另存为模板→新建可编辑区域→保存。 打开示例站点中已经建好的index.htm文件，打开“文件”，点击“另存为模板”。 第 36 页 网页制作——网页利器Dreamweaver MX 选择模板存放的站点，在“另存为”中为模板输入一个唯一的名称，单击保存按钮。 在“插入栏”选择“模板”，然后单击“可编辑区域”。 在“名称”文本框中为该区域输入唯一名称。 建好的模板如下图。 打开“文件”菜单，单击“保存”。一个模板就做好了。 在制作了模板之后，可以基于这个模板创建网页。 简明步骤：文件→新建→打开“模板”选项卡→选择模板→删除模板里多余的文字→输入网页内容→保存→选择保存路径。 1.打开“文件”菜单，点击“新建”。 第 37 页 网页制作——网页利器Dreamweaver MX 2.打开“模板”选项卡，选择模板文件，单击“创建”按钮。 3.选中可编辑区域 4.删除其中多余的文字。 5.在里面输入网页的内容。 6.输入内容后，点击“文件”菜单中的“保存”，选择保存路径，一个页面就做好了。 【定义及应用CSS】 要想做出精美的网页一定要用到CSS。层叠样式表 (CSS) 是一系列格式规则，它们控制网页内容的外观。CSS 样式使您可以控制许多仅使用 HTML 无法控制的属性。CSS的重要性就不多说了，要说清楚CSS可以写成一本大书。本文的目的，是想通过一篇文章，掌握CSS最基本最重要的应用。 第一部分：要实现的目标：把一个网页的文字变成好看的12象素（px）大小。 实现方法：通过“重定义HTML”标签，定义td（td是单元格的标签）的字体大小为12象素（px）。因为整个网页内容放在表格中的，也是放在单元格中的，所以，可能通过重定义单元格样式，改变所有放在单元格里的内容。当然，重定义表格标签table，也可以实现同样的效果。 简明步骤：打开样式面板→在类型中选择“重定义HTML”标签→选择要重定义的标签，例如td→给所选标签（例如td）定义CSS→一个定义了标签的网页就做好了。 第 38 页 网页制作——网页利器Dreamweaver MX 1打开一个网页文档。 2.打开样式面板。 3．点击“新建CSS样式“按钮。 4.在“类型”中，选择“重定义HTML”标签。 5.选择td标签。Td标签代表单元格。6．选择分类中的“类型”。 第 39 页 网页制作——网页利器Dreamweaver MX 7.设置字体：选择字体，如果没有需要的字体，可以编辑字体列表，见第二部分。 大小：设置字体大小，好看的中文字大小有12象素（px）和9点数（pt）两种，两者效果差不多。 行高：行高是一行文字与另一行文字之间的距离，为了方便阅读，行高设置大点吧。可以设置在15像素到25像素之间。实例中使用20像素。 修饰：对于普通文本，选择无。对于链接，可以选择下划线，上划线加下划线，无等几种。 颜色：黑色最适合阅读，其次就是灰色，白色。链接默认的蓝色，颜色太深，如果整个页面都是链接，使用蓝色根本起不到分辨的作用，并且十分难看。建议页面不要使用默认的蓝色！ 第 40 页 网页制作——网页利器Dreamweaver MX 8.按“确定”按钮后，一个应用了CSS的网页就做好了。 第二部分：编辑字体列表。 单击字体栏的下拉箭头，打开编辑字体列表。 在编辑字体列表窗口中，点击加号按钮。 选择一种字体，如宋体，按左箭头按钮。 4.继续添加字体，选择一种字体，如Arial，按箭头按钮添加。 说明：一个字体列表中有多种字体，比如“方正，宋体，黑体，华文中宋”，访问者电脑从最开头的方正字体开始执行，如果没有对应的方正字体，就执行宋体，没有宋体，就执行黑体，如果列表中的字体都没有，就用系统默认的字体替代 5.可以重复以上的步骤，添加其它组合的字体。 第三部分：重定义body标签，使表格之外的内容应用样式。如果在一个网页中，在表格之外还有内容，就需要定义body标签。 1.定义了单元格而没有定义body的网页。 2.选择重定义“body”标签。按照第一部分的方法，定义“body”标签。 第 41 页 网页制作——网页利器Dreamweaver MX 3.定义了body的网页。 第四部分：定义锚标签。也就是有关链接的标签。锚对应的标签是a。 1默认锚标签的网页，链接有下划线，蓝色。这种链接很难看 在标签下拉栏中选择a。 3.定义a的CSS样式。大小选择12象素；修饰选择无；颜色选择一种深灰色，就可以和采用黑色的文本区分开来。 第 42 页 网页制作——网页利器Dreamweaver MX 4.重定义了锚标签的网页。 第五部分：修改样式表。 在CSS样式面板中，单击“编辑样式”单选按钮，再点击右下角的“编辑样式表”按钮。 2.对CSS样式做一些修改。实例中是把颜色变得更淡。 一个网页需要定义的基本样式就定义好了，网页会直接应用上新定义的样式。根据需要，还可以定义其它标签的样式，例如定义水平条的标签hr的颜色。 第 43 页 网页制作——网页利器Dreamweaver MX 创建“外部CSS样式表”。 选择“新建样式表文件”。 选择保存在的文件夹→给CSS文件命名→选择相对于文档→保存。 定义CSS样式。 一个“外部CSS样式表”就做好了。 第 44 页 网页制作——网页利器Dreamweaver MX 3. 链接“外部CSS样式表”文件。 使用外部CSS的优点是：只要修改外部的CSS样式表文件，所有链接到该样式表文件的文档格式都会自动发生改变。 简明步骤：打开一个网页文档→打开CSS样式面板→点击“附加样式表”按钮→点击“浏览”按钮→选择需要的外部CSS样式表文件→点击“确定”按钮。 3.1打开一个要应用CSS的网页文档。 3.2打开CSS样式面板。 3.3点击“附加样式表”按钮。 3.4点击“浏览”按钮。 3.5选择需要的外部CSS样式表文件。 3.6点击“确定”按钮。之后文档就会应用外部样式。 在CSS样式中，定义链接的各种状态，也是必须掌握的。绝大多数站点的CSS中定义了链接的各种状态。定义链接的各种状态，可以理解成定义锚标签a的各种状态。 a:link 没有接触过的链接 a:visited 访问过的链接。 a:hover 鼠标放在链接上的状态。 a:active 在链接上按下鼠标时的状态。 在接下来，将通过实例，让大家了解各种链接的状态，还有创建的方法。 1. 没有定义链接样式的网页。采用默认蓝色，下划线，文字也很大。 个人认为，设计精良的网站，都没采用这种默认的蓝色。下划线是为了容易分辨链接，但是如果链接很多，下划线反而不利于阅读。有一个好的导航就够了，所以也没必要使用下划线。 第 45 页 网页制作——网页利器Dreamweaver MX 2.点击“CSS样式”面板右下角的“新建CSS样式”按钮。 3.在“类型“中选择“使用CSS选择器”。定义在“仅对该文档”。 4.点击“选择器”旁边的下拉按钮。弹出各种状态的锚标签。 以a:link为例 定义字体为宋体，修饰选择“无”就可以去掉下划线，行高为20像素，颜色为#333333灰色，以和文本默认的黑色有差别。 第 46 页 网页制作——网页利器Dreamweaver MX 各种链接状态的用途： “a:link”（没有接触过的链接）：用于定义了链接的常规状态。如果希望各种链接都相同，就只需要定义这种链接状态。这种链接状态是基本的，推荐至少要定义这种链接。 “a:hover”（鼠标放在链接上的状态）：用于产生视觉效果。鼠标放到一个链接上，链接就会产生变化。推荐“a:hover”链接颜色使用红色，红色链接能产生极好的视觉效果。当鼠标离开这个链接时，这种状态的链接就消失。多用于讲究视觉效果的网站。 “a:visited”访问过的链接：用于阅读文章，能清楚的判断已经访问过的链接。“a:visited”链接状态的颜色要和普通文本的链接和其它状态颜色不同。多用于以内容为主的网站。讲究视觉效果的网站可以不用。 “a:active”在链接上按下鼠标时的状态：用于表现鼠标按下时的链接状态。实际中应用很少。如果没有特别的需要，可以定义成和“a:link”状态或者“a:hover”状态一样的。 如果一个网页中的各部分内容需要使用不同的样式，或者多个网页之间需要使用不同的样式，就可以使用自定义样式（class）解决这个问题。本文介绍创建和应用自定义样式的方法。 实现方法：创建自定义样式（class）。创建好样式后，选中文档中的对象，点“CSS样式”面板上的CSS名称应用所选样式。 实例：给一个网页各行文字应用上不同的颜色。 没有应用样式的网页。 2.点击“CSS样式”面板右下角的“新建CSS样式”按钮。 3.在类型中选择“创建自定义样式（class）。 4.在名称中输入一个以.开头的名称。不能忽略这个小点“.”。 第 47 页 网页制作——网页利器Dreamweaver MX 定义CSS样式。实例中定义字体为宋体，大小12像素，行高20像素，修饰无，颜色#FF6600。按“确定”按钮后，一个CSS样式就创建好了。 6.继续创建CSS样式。 7.定义CSS样式。 8.定义好在样式显示在“CSS样式”面板上。自定义样式并不直接应用在网页中。 第 48 页 网页制作——网页利器Dreamweaver MX 9.选中网页中的内容，点击“CSS样式”面板上的样式名称。样式就应用到所选范围了。 10.应用“red”样式后的网页。 11.继续选择一行文本，点击一种样式名称。 第 49 页 网页制作——网页利器Dreamweaver MX 设置个别链接的CSS样式。 在类型中选择“使用CSS选择器”，选择器中选择“a:link”，把插入点放在a后面 在a后面输入.名称，实例中输入.love。 3.定义样式。 4.定义好的样式在样式面板中显示出来。 5.选择一个链接。 6.点击样式名称。样式应用到所选链接 【技巧】 1.在字符之间添加空格 要插入连续空格，在“插入”栏中，选择“字符”，然后单击“非换行的空格”图标。或者按 Ctrl+Shift+空格键 。 实际上在代码中添加了 这几个字符。 2.添加段落换行： 按 Enter 键 。 实际上在文字前后加了 标签。 3.添加换行符： 按 Shift+Enter 键。实际上在文字后面加了 在“插入”栏中，选择“字符”类别并选择所需的字符。 5.创建项目列表和编号列表 ： 选中文本>打开“插入”菜单>“文本对象”>选择“项目列表”或者“编号列表”。 6.对齐文本： 选择要对齐的文本，单击属性检查器中的对齐选项（“左对齐”、“右对齐”或“居中对齐”）。 7.作为代码显示： 选中要作为代码的文字>文本>样式>代码 8.设置文本为粗体： 在“插入”栏，选择“字符”，点击B按钮。 9.设置文本为标题： 在“插入”栏，选择“字符”，点击h1,h2,h3等按钮。 10.使用文本的“已编排格式”： 使用文本的“已编排格式”，可以保留文本中的空格，回车等格式，是一个很有用的功能。 在“插入”栏，选择“字符”，点击PRE按钮 11.定义段落首行缩进两个文字： 重定义段落的标签“p”，2字体高。 12.定义换行的行距： 重定义 【站点进行测试，检查无用链接】 打开窗口菜单>结果>链接检查器，或者按“Ctrl+Shift+F9”快捷键 第 50 页
因篇幅问题不能全部显示，请点此查看更多更全内容 |