用DreamWeaver打造留言板上Word文档格式.docx
《用DreamWeaver打造留言板上Word文档格式.docx》由会员分享，可在线阅读，更多相关《用DreamWeaver打造留言板上Word文档格式.docx（29页珍藏版）》请在冰豆网上搜索。
4、单击“下一步”进入下一个步骤。
出现向导的下一个屏幕，询问您是否要使用服务器技术。
选择“否”选项指示目前该站点是一个静态站点，没有动态页。
如图3所示。
图3建站向导——静态和动态网站选择
5、单击“下一步”进入下一个步骤。
出现向导的下一个屏幕，询问您要如何使用您的文件，如图4所示。
●选择标有“编辑我的计算机上的本地拷贝，完成后再上传到服务器（推荐）”的选项。
●文本框允许您在本地磁盘上指定一个文件夹，Dreamweaver将在其中存储站点文件的本地版本。
若要指定一个准确的文件夹名称，通过浏览指定要比键入路径更加简便易行，因此请单击该文本框旁边的文件夹图标。
随即会出现“选择站点的本地根文件夹”对话框，在对话框中浏览到本地磁盘上可以存放所有站点的文件夹。
然后单击“确定”。
图4建站向导——定义站点文件的存储位置
6、单击“下一步”进入下一个步骤。
出现向导的下一个屏幕，询问您如何连接到远程服务器。
从弹出式菜单中选择“无”。
▲如果你有远程的FTP服务器空间，在这一步骤可以按照如图5所示进行连接到远程服务器的设置。
图5建站向导——连接到远程服务器的设置
7、单击“下一步”进入下一个步骤。
该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。
▲完成站点的建立之后，在文件面板中你会看到如图6所示的类似结果（本地视图）。
图6文件面板中的本地视图
三、用系统模板创建站点的第一个页面
上面我们利用建站向导创建了一个站点，下面我们在这个站点中创建一个页面。
先查看这个页面的效果：
lesson1_mo.htm
这个页面是用DreamweaverMX的系统模板创建的，以下是创建步骤：
1、执行“文件/新建”命令，弹出“新建文档对话框”。
在此对话框中选择“常规/页面设计/文本：
文章C”，然后单击“创建”按钮，如图7是示意图。
图7利用模板创建新文档示意图
2、现在我们在页面编辑区得到一个新页面，并且页面中已包含了一些模板内容。
这个页面很简单，包括一些文本和一个图像。
我们首先将那些英文文本换成一些中文文本（你可以将教程中示例页面中的文本复制过来）。
3、对图像进行处理。
我们在页面中看到的是一个图像占位符，下面我们要用一个具体的图像替换它。
单击这个图像占位符，并展开相应的占位符属性面板，如图8所示。
●如果图像已经创建好，就在占位符属性面板中的源文件处进行设置。
●如果图像还没有创建，就单击占位符属性面板中的创建按钮，在FireworksMX中创建。
图8占位符属性面板
4、在属性面板中设置文本的属性，由于我们的页面上的文本实际上都是在表格中，所以实际上是设置表格的单元格属性，如图9所示。
图9单元格属性面板
5、关于图像和文本的距离的设置。
我们以后在编辑网页时会经常遇到图像和文本之间的距离问题，如图10所示。
我们可以先选中图像，然后在图像属性面板中设置图像和文本之间的距离，如图11所示。
图10图像和文本间的距离示意图 图11设置图像和文本距离
6、保存文件。
执行“文件/保存”命令，将文档保存到我们站点文件夹中。
如果我们文件的存储路径是:
c:
\Inetpub\wwwroot\mysite1\lesson1_mo.htm，则可以在浏览器中用以下地址访问它：
http:
//localhost/mysite1/lesson1_mo.htm或者http:
//127.0.0.1/mysite1/lesson1_mo.htm。
经过上一课的学习，我们对DreamweaverMX的工作环境以及如何创建一个站点和编辑页面文档有了一个初步的认识。
从这次课开始我们要系统的来学习如何创建一个留言板站点。
通过这个留言板站点的建立，我们要讨论在DreamweaverMX中经常用到的一些工具和命令。
一、创建留言板动态站点
上一次课我们建立了一个静态的站点，这一课我们首先建立一个包含服务器端脚本（ASP）的动态站点。
以下是创建步骤：
1、执行“站点/新建站点”命令，得到建站向导，在第1步中，给你的站点起个名字。
比如是：
liuyanban。
2、单击下一步，在下一个步骤画面中进行服务器脚本技术的有关设置，如图1所示。
图1建站向导——服务器脚本技术设置
3、单击下一步，进入到建站向导的下一个画面，这个步骤是关于站点的URL的内容，如图2所示。
图2建站向导——站点URL
4、以下步骤按照建站向导的默认设置。
最后单击完成按钮即可。
二、在站点中创建资源文件夹
▲在创建了本地站点之后，如果您已为该站点创建了资源（图像、Flash动画或其他内容片断），则将这些资源放置在本地站点根文件夹内的一个文件夹中。
那么当您要向页中添加内容时，这些资源将随时可用。
现在我们就在留言板站点根文件夹中创建新文件夹，并把相应的资源文件复制到资源文件夹中。
1、假设我们的留言板站点的根文件夹路径为：
\Inetpub\wwwroot\liuyanban\。
2、打开站点面板，展示留言板站点的本地视图，右键单击留言板站点，在弹出的快捷菜单中执行“新建文件夹”命令。
按照这种方法，先创建两个文件夹：
images（用来放图像文件）和swf（用来放Flash动画）。
图3在站点视图创建新文件夹
▲请下载以下资源，并把它们放在相应的文件夹中。
在站点面板中可以象资源管理器一样管理文件和文件夹。
●留言板系统用户头像图像（10个图像文件）。
放在images文件夹中。
下载（rar文件）
●留言板系统导航条图像。
下载
●Flash动画文件（1个）。
放在swf文件夹中。
按照上面的步骤把站点中的资源文件部署好以后，在资源面板中就可以看到我们部署好的相应的资源，如图4所示。
我们可以将资源面板中的资源直接拖放到站点文档中使用。
图4资源面板
三、创建留言板站点的第一个页面（文件名：
shuoming.htm）
下面我们创建留言板站点的第一个页面，这个页面是个普通的不包含服务器脚本的静态页面。
它用来对我们的留言板系统进行说明。
1、执行“文件/新建”命令，在弹出的新建文档对话框中选择“基本页/html”，然后单击“创建”按钮，如图5所示。
图5新建基本html文档
2、编辑页面文档（页面效果参考）
●输入页面标题“留言板系统说明”。
如图6所示。
图6定义页面标题
●输入页面文字内容并定义它们的字体、颜色等属性。
具体的属性设置可以在属性面板中实现。
●关于连续空格的输入：
执行“编辑/参数选择”命令，在弹出的参数选择对话框中选择“允许多个连续空格”复选框，如图7所示。
图7参数选择——允许多个连续空格
●对于中文用户来说，我们习惯于中文的段落格式，比如段前空两格。
可以这样实现：
将中文输入法切换到“全角”方式，然后连续按两次空格，完了以后再切换到“半角”方式进行文字内容的输入。
●关于段落：
每按一次Enter（回车）键就代表一个新段落的开始。
如果你想在段落中换行，请按“Shift+Enter”组合键。
●关于图像的插入，我们可以用以下两种方法中的任意一种：
①将光标定位到要插入图像的位置。
用鼠标单击“插入栏”中“常用”标签下的图像按钮，如图8所示。
然后找到要插入的图像文件。
图8插入图像和水平线
②打开资源面板，单击图像资源类别，选择要插入的具体图像资源，用鼠标拖放到插入处。
●关于水平线的插入，如图8所示。
我们还可以在属性面板设置它的简单属性，但不能直接在属性面板设置它的颜色。
插入的水平线默认是灰色的，要更改它的颜色，我们需要这样操作：
选中水平线，切换到代码视图。
将光标定位在br标签后，单击空格键，这时会弹出一个下拉菜单，如同9所示，我们再在其中双击color属性标签，这样就会弹出调色板，在其中选择你需要的颜色就可以了。
图9在代码视图设置水平线颜色属性
3、保存页面文档。
执行“文件/保存”命令，把文档保存到站点的根目录下。
文件名：
shuoming.htm。
只须输入主文件名shuoming就可以了，扩展名是系统自动加上的。
本次课开始我们要设计留言板的主页面了。
复杂的页面一般都要先用表格布局，我们就从留言板主页面的表格布局开始学习。
除了表格布局，利用层布局页面也是一种选择。
但层的兼容性和可控制性就比表格差多了，本次课也要讨论DreamweaverMX中有关层布局，以及层和表格相互转换的知识。
首先让我们先看看留言板站点主页面将来大概是个什么摸样。
单击这里打开页面效果，具体设计步骤如下：
1、创建主页面新文档（main.asp）
这个主页面将来是个包含ASP脚本的动态页面。
所以它的类型是动态脚本页面文档，文件扩展名是asp。
你可以选择以下两种方法中的任意一种创建它：
●执行“文件/新建”命令，在弹出的新建文档对话框中做如图1所示的操作。
保存文档时，文件命名为main。
图1新建ASPVBScript动态文档
●打开站点面板，在留言板站点本地视图下面的窗口中右键单击站点名，在弹出的快捷菜单中执行“新建文件”命令，然后将文件名的主文件名改为main。
2、创建表格
在DreamweaverMX中创建表格有两种模式，一种是在标准视图下插入表格，一种是在布局视图下直接画表格。
▲在标准视图下插入表格：
“标准”视图是默认的DreamweaverMX设计视图。
若要在“标准”视图中创建表格，可以使用“插入表格”命令。
Dreamweaver将根据您在“插入表格”对话框中选择的选项创建一个表格，如图2所示。
图2插入表格和定义表格
在本例中我们插入两个表格：
一个是1行1列，宽度是755像素。
另一个是3行3列，宽度是600像素。
▲在布局视图下绘制表格：
在“布局”视图中，可以绘制布局单元格或布局表格以定义文档的设计区域。
这给了我们更大的灵活性，想一想在页面上画表格的滋味吧！
我们需要在插入栏中切换到布局标签下，并单击布局视图，如图3所示。
单击绘制布局表格或单元格按钮以后就可以用鼠标直接绘制了。
图3布局视图
3、编辑表格
通过合并和拆分单元格以及插入行和列，可以很容易地修改初始表格结构以创建更复杂的设计。
我们还可以使表格的边框变得不可见，然后用表格单元格（在表格中每一行与列的交叉处所创建的框）来控制Web页中文本和图像的位置。
当观众在浏览器中查看页面时就不会看到设计的基础结构。
这些都是对表格的编辑。
通常情况下，表格编辑在标准视图下进行。
●关于表格和单元格的选中常有两种方法：
①用鼠标直接指向表格选中它们。
用鼠标指向表格的边框或者是内部，根据鼠标的状态来判断选中整个表格、某一行还是某个单元格。
②在表格中的任意一个单元格单击鼠标，然后在标签检查器选择相应的标签，以实现选中表格或者单元格的目的，如图4所示。
图4通过标签检查器选择表格
●关于表格的尺寸基于百分比还是基于像素：
◇基于百分比的表格会根据浏览器窗口宽度的变化而伸展或收缩。
（例如，如果您指定表格使用75%的宽度，则不管浏览器窗口有多大，表格都会伸展以填充75%的水平间距。
这在某些情况下会很有用，例如，在调整窗口大小时确保导航菜单总能显示。
◇基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。
一般我们在用表格布局页面时，喜欢采用基于像素的表格，这样设计出来的页面更精确。
本课实例就是用基于像素的表格布局页面的。
●关于调整布局单元格大小有两种方法：
◇用鼠标直接移动到单元格的边框，拖动鼠标调整单元格的大小。
◇在属性面板直接输入单元格的宽和高，来精确的控制调整单元格的大小。
●表格和单元格的其它属性的设置都可以在属性面板中完成。
4、使用层进行布局
◇用层进行页面布局，给设计者更大的灵活性。
因为可以这样说，你可以将层放在页面上你想让它占据的任何位置。
如图5是创建层和在层面板管理层的示意图。
图5创建层和在层面板管理层
◇虽然用层进行布局给设计者更大的灵活性，但用层布局缺乏更大的兼容性，在不同的浏览器中看到的结果可能是不一样的，甚至在一些浏览器中根本就不支持你的层。
当然我们可以将层转换为表格（表格是最兼容的页面元素了），但是我还是建议不用层布局为好，比如重叠的层就不能转换为表格。
我们可以这样进行层和表格之间的互相转换：
执行“修改/转换/层到表格”或者“修改/转换/表格到层”就可以实现层和表格之间的互换了。
▲用表格布局页面是设计网页的基础，表格的布局是很灵活的，大家要多练习，尝试不同的布局变化，这样才能找到和掌握更多的规律。
经过前面三课的学习，我们已经在留言板站点创建两个页面了，一个是说明页面（shuoming.htm），一个是主页面（main.asp）。
下面我们首先挑毛病，挑一挑两个页面的创建过程和创建结果的毛病。
1、在浏览器中打开这两个页面，然后执行浏览器中的“查看/文字大小/最大”命令。
咣当！
字大了，段落也乱了！
怎么这个效果啊！
2、在页面的编辑过程中，每次按Enter（回车）键是一个新段落的开始，但段落间的距离怎么那么大啊？
也找不到控制距离的命令。
：
（
3、仔细再看一看页面效果，怎么超级链接的文字下面都有一个下画线啊？
这多不好看啊，能不能去掉呢？
4、我想文字段落前空两个汉字的位置，每次都要按空格键设置，能不能在新段落前自动前空两格？
5、我想表格线更细一些，可在属性面板里面好象完成不了这个目的？
……………………
我们还可以找到很多毛病和不如意的地方，怎么解决？
哈哈，今天就让一个重量级选手出场吧，它叫CSS层叠式样式表。
它可是设计网页的重要技术，有了它，我们刚才找到的那些问题就马上可以解决掉。
一、关于CSS样式表
层叠样式表（CSS）是一系列格式规则，它们控制网页内容的外观。
使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。
CSS样式使您可以控制许多仅使用HTML无法控制的属性。
例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、点数等等）。
通过使用CSS样式和以像素为单位设置字体大小，可以确保以更一致的方式在多个浏览器中处理页面布局和外观。
除了设置文本格式外，还可以控制网页中块级别元素的格式和定位。
例如，可以设置边距、边框、其他文本周围的浮动文本等等。
CSS样式表的主要优点是提供便利的更新功能；
更新CSS样式时，使用该样式的所有文档的格式都自动更新为新样式。
在DreamweaverMX中主要通过“CSS样式面板”创建CSS样式、查看CSS样式的属性以及将CSS样式应用于文档中的元素。
选择执行“窗口/CSS样式”命令可以打开“CSS样式面板”，如图1所示。
CSS样式面板中有两种视图，一个是应用样式视图，另一个是编辑样式试图，如图1和图2所示。
●应用样式视图：
在这个视图下可以选择应用于文档元素的类（class）样式。
“应用样式”视图只显示自定义（class）样式。
该窗格中不显示重定义的HTML样式和选择器样式。
●编辑样式视图：
在这个视图下可以查看与当前文档关联的样式定义。
“编辑样式”视图显示自定义（class）CSS样式、重定义的HTML标签和CSS选择器样式的样式定义。
图1CSS样式面板
图2CSS样式面板——编辑样式面板
二、在网页文档内部定义和引用CSS样式
在DreamweaverMX中打开留言板站点的说明文件（shuoming.htm），我们在这个页面文档内部定义和引用CSS样式。
▲重定义html标签body的属性样式
1、打开CSS样式面板，选择编辑样式面板视图。
2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图3所示。
请按照图3所示进行设置。
图3新建CSS样式对话框——重定义body属性
3、设置完成以后，单击确定按钮，进入body标签的属性设置对话框中，如图4所示。
图4body属性样式设置——类型属性
▲重新定义文本超级链接属性样式
2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图5所示。
请按照图5所示进行设置。
图5新建CSS样式——重新定义超级链接属性
3、设置完成以后，单击确定按钮，进入a:
link的属性设置对话框中，如图6所示。
只设置“修饰”和“颜色”，其它不设置。
图6a:
link的类型属性样式设置
4、重复步骤2、步骤3，分别再重新定义a:
visited和a:
hover的属性样式。
和前面重新定义a:
link唯一的不同是文字颜色的设置，分别设置成灰色和红色，其他的设置都一样。
●a:
link 超级链接文字的正常外观属性。
a:
visited 超级链接文字访问过以后的外观属性
hover 当鼠标经过超级链接文字时的外观属性
●经过前面对body和a标签的属性重新定义以后，定义的CSS样式会自动套用到页面的元素上。
这是最终的页面效果：
shuoming_css.htm
三、定义和附加外部样式表
上面我们是在文档内部重新定义了一些html标签的属性样式，定义的CSS样式只对本文档起作用，如果换了一个新文档，又要重复上面的操作，这样也太麻烦了！
实际上，对于一个站点，站点内的页面大多要求一致的外观和效果，如果我们针对一个站点定义一次CSS样式，然后把定义的结果套用到整个站点的页面文档，那么我们设计网站和管理网站的效率就大大提高了。
DreamweaverMX的外部样式表就是用来实现这个目的的。
让我们开始外部样式表的应用吧，先在DreamweaverMX中打开留言板站点的主页面文档（main.htm），我们要以这个文档为实例完成我们的学习。
▲定义外部CSS样式表文件
1、打开CSS样式面板，单击右下角的新建样式按钮，则弹出新建样式对话框，如图7所示。
请按照图7进行设置。
图7新建CSS样式——外部样式文件
2、完成图7的设置后，单击确定按钮，则弹出保存外部样式表对话框，如图8所示。
请按照图8所示进行设置和操作。
图8保存外部样式表对话框
3、完成图8的设置并单击保存按钮后，会弹出body的CSS样式定义对话框，如图4所示，请按照图4进行设置。
▲在这个外部CSS样式表文件中继续定义CSS样式
1、单击右下角的新建样式按钮，则弹出新建样式对话框，如图9所示。
请按照图9进行设置。
图9新建CSS样式——td的属性样式
2、单击确定按钮以后，就弹出td的CSS样式定义对话框，它的设置和body的设置一样。
也可参看图4。
3、重复步骤1、步骤2，在这个外部CSS样式表中继续定义a:
link、a:
visited、a:
4、重定义p标签的“盒子”属性样式可以设置段落间距，如图10所示。
图10p标签的盒子属性样式
图11外部CSS样式表
△定义的外部CSS样式表最终结果如图11所示。
▲附加外部样式表
升级会员 