Dreamweaver基础教程和制作技巧
|
|
|
|
作者：佚名
来源：www.rensinetwork.com 加入时间：2005-4-19 |
|
一、有关网页的基本知识
1、在制作网页之前，首先需要了解一些与网页有关的知识。
在Internet的飞速发展，WWW（英文全名为World wide Web，中文称“万维网”）是一个不容忽视的角色，它是由Internet上的信息服务器连成的网络，可以显示文字、图片、声音等交互性超媒体对象，并可以让普通人方便地访问。
URL（英文全名这Uniform Resource Locator，中文称“统一资源定位器”），URL好比Internet的门牌号码，它可以帮助用户在Internet的信息海洋中定位到所需要的资料。在网上的每一个文件都有一个用URL来标识的地址，它的结构也可以理解为DOS中的目录结构。例如：http://www.163.net/myweb/mfxx.htm（此网址为假设）。其中http是超文本传输协议，即盘符；www.163.net是站点名，即根目录；myweb是子目录；mfxx.html是文件名。
协议（Protocol）是关于信息格式及信息交换规则的正式描述。在信息技术中，协议就是一些特殊的规则集合，它被通信的接收方和发送方认可，接收到的信息和发送的信息均以这种规则加以解释。在网络的各层中存在着许多协议，它是定义通过网络进行通信的规则，接收方的发送方同层的协议必须一致，否则一方将无法识别另一方发出的信息，以这种规则规定双方完成信息在计算机之间的传送过程。协议就好比每个国家都有自己特定的交流准则和交流方式，在Internet上，它统一了人们在网上的交流方式。HTTP协议（英文全名为Hypertext Transfer Protocol，中文称“超文本传输协议”）它是用来在Internet上传送超文本的传送协议。它是运行在TCP/IP协议族之上的HTTP应用协议，它可以使浏览器更加高效，使网络传输减少。任何服务器除了包括HTML文件以外，还有一个HTTP驻留程序，用于响应用用户请求。您的浏览器是HTTP客户，向服务器发送请求，当浏览器中输入了一个开始文件或点击了一个超级链接时，浏览器就向服务器发送了HTTP请求，此请求被送往由IP地址指定的URL。驻留程序接收到请求，在进行必要的操作后回送所要求的文件。其实您只要记住它是专门为World Wide Web设计的协议就行了。
网页是WWW的基本文档，它是用HTML（Hypertext Markup Laguage即超文本标识语言）编写的。HTML语言严格来说并不是烦人的编程语言，其实它只是一些能让浏览器看懂的标记，当网页中包含正常文本和HTML语言标记时，浏览器会“翻译”由这些HTML语言标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来，而不是显示一堆奇怪的标记。您现在所看到的这个页面就是网页了。
超文本（Hypertext）是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。只要用鼠标点一下文本中通常带下划线的条目，便可获得相关的信息。我们通常所说的网站或网页，就是由一个或多个超文本组成的，而我们进入网站首先看到的那一页称首页或主页（HomePage）。网页的出色之处在于能够把超链接（Hyperlink）嵌入网页中，这使用户能够从一个网页站点方便地转移到另一个相关的网页站点。它可以指向其他网页、文、多媒体文件、图像甚至程序。超链接是内嵌在文本或都图像中的，文本超链接在游览器中通常是带下划线，而图像超链接是看不到的，但如果用户的鼠标碰到它，鼠标的指标通常会变成手指状（文本超链接也是如此）。
2、网页制作的基本设计思路
要设计出一个精美的网站前期工作是必不可少的。一个网页的成功与否，很重要的一个因素在于它的构思，好的创意及丰富详实的内容才能够让您的网页充满勃勃生机。
1、 网页的选题
在制作自己的网页之前，首先要确定自己网页的内容。个人网页的设计内容可以从自己的专业或兴趣爱好多做些考虑。例如自己在计算机、书法、绘画等方面有独到的工夫，可以此专题做为网页的内容。但网页涉及的内容切勿过广，这样虽然内容比较丰富，但往往涉及各个方面的内容会比较肤浅。
2、 网页的组织结构
网页的选题确定好以后，接下来就要确立网站的总体结构了。总体结构的确立至关重要，它是网站设计能否成功的关键所在。如果我们对网站的总体结构了如指掌，设计起来就会得心应手，游刃有余，但是如果网站的总体结构比较混乱，在设计的过程中也就会颠三倒四，无法将自己的想法表达出来，这样的网站一般不会很成功。一般网页的组织结构是采用树形结构。
3、 资料的收集与整理
在对自己未来的网页有了一个初步的构思后，还需要有丰富的内容去充实。网页的基本组成元素有三个：文字内容、图片和超级链接。而Internet的最迷人之处在于它信息的极大丰富，如果你的网而只有漂亮的外观而实质内容很少，那么就不会有多少人在你的网页中停留。要注意的一点是，网站的内容必需合法。
4、 选择网页的设计方法
要建立一个网站，要选择用何种方法来实现它。现在，能够用来设计网站的方法有很多，可以使用HTML语言来编辑，也可以使用网页制作工具（如：ProntPage）来设计网站。对于一个初学者来说，建议您使用所见即所得的网页制作工具来设计出网站的框架，然后再用Java和JavaScriptT等编辑语言来对网站进行修饰。
5、 设计网页要注意的问题
（1）网页的标题要简洁，明确。
（2）在文本要使用水平线，以分割不同部分。
（3）对重点段落要强调显示。
（4）网页中插入的图片要尽量的小。
（5）图形要附加文字说明，以便关闭图象时查看。
（6）网页中引用的资料及商标（或图标），不能侵犯版权。
二、建站造页篇
千里之行，始于足下。在做网页之前第一步就是要学会做网站。作为一个网站，里面有很多的图片、网页文件甚至Flash动画，如果不进行管理归档，分散在硬盘的各个地方就无法进行网页发布了。因此建网站就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面以便进行网页的制作和管理。
下面我们就来用Dreamweaver 3建立一个网站。
启动Dreamweaver
进入Dreamweaver，一般首先会进入页面编辑器。在页面编辑器中，选择菜单Site-〉Newsite。系统弹出站点定义对话框。
下面我们需要做这几步工作：
Site name：填上网站的名称。名称没有规定，您可以填入您想要的名称。
Local Root：站点本地目录。在这个地方，您必须给您的网站在硬盘上指定一个目录。以后所有的网页文件就都放在该目录里面。相当于造房子先选地址一样。单击黄色文件夹，系统弹出对话框。
可以选择目录。选好目录以后按“打开”，再按“保存”即可。如果没有建立过目录，也没关系。在这个对话框中一样可以建立。只要再对话框中按右键选择“新建文件夹”马上可以建立目录了。
选中Refresh Local File List Automatically选项：自动刷新本地文件列表。这个功能有了以后，当你往网站的目录中复制文件的时候，网站文件列表会自动的刷新。为了方便起见我们选择。
选中Cache：选项。Cache不少读者肯定不会陌生，就是“缓存”。这个选项非常有用，他可以自动跟踪网站内的文件链接情况。当你的文件改名、移动、删除以后。原来指向这个文件的链接会段掉。有了Cache就可以及时发现问题，并加以纠正。
OK，所有的工作都完了。一个空白的网站就做好了。
下面我们来仔细观察站点管理器。网站内所有的文件都会显示在管理器的右侧。怎么样看上去是不是有点象windows的资源管理器啊？大家可以发现一点，就是这里的“根目录”就是先前我们选择的目录。这是因为相对于要做的网站而言，所有文件都是放在这个目录里面的。所以这个目录就是网站的根目录。
做网页的时候会用到很多的图片，把所有的图片文件都归档在一个目录里这是一种比较好的习惯。下面我们在站内先建立一个“images”目录用于存放图片文件。在站点管理器右侧空白处，单击右键弹出菜单。选择New Folder新建目录，输入目录名即可。
一个网站建立好以后，下次启动Dreamweaver时。会自动打开这个网站，那么您所做的每一个文件都保存在这个站内。如果您建立了很多网站的话就要确保您要的网站是否打开了。可以在页面编辑器中选择打开的网站。使用菜单Site->Open site。
如何快速进入站点管理器呢？我们可以用快速启动栏。在快速启动栏中第一个按钮就可以快速切换到站点管理器。在页面编辑器的右下脚，也有一个袖珍的启动栏。可以同样操作。
好，本次教程我们主要学习了怎样制作一个站点。一个站点，简单的说就是搭一个网站的架子。所有的网页和相关的文件都必须放在站内。网站所在的目录就是网站的根目录。大家可能觉得有些枯燥吧？没关系，有了这些基础，下一次我们就可以进入到正式的网页制作中来了。
和大家探讨了怎样用Dreamweaver 制作一个网站，现在来实际制作一张简单的网页。 先对这个页面进行一下分析：
网页的标题栏有“机器猫的小窝”字样
网页中的“机器猫的小窝”标题是一张Gif图片
左下角的机器猫是一张gif图片
当中是一段文字，设置了文字的字型和颜色
网页背景用图片制作
先启动Dreamweaver3，确保你已经用站点管理器建立好了一个网站，并且打开了这个网站。
1、插入标题图片
进入页面编辑器。在对象面板中单击按钮。（如果对象面板看不见，可以按Ctrl+F2打开面板）系统弹出插入图片对话框。在硬盘中找到这个图片。选中后，对话框右侧会看到这个图片的预览图。按“Select”按钮确定。
系统弹出一个信息框，大致意思是说要求插入图片后保存网页。按OK确定。
接下来的对话框提示大家，这个图片不在站点目录内，当前的站点目录是“D:\5dmedia”是否要将这个图片文件复制到站点内。还记得我们上一期反复强调的重点么？和网站相关的所有文件都必须放在站内！如果不这样做，会导致发布网页时候图片“失踪”。所以，理所当然。我们选择“是”。
系统弹出复制文件“Copy file as”对话框。我们为了文件管理的方便，把这个图片放在“images”目录下面。（注：这个目录是为了方面自己建立的。您也可以直接把图片放在站点根目录，或者随便什么站内的目录中）。直接按“保存”即可。注意文件名不能用中文，否则要出现一些意想不到的情况。
一个标题图片就插入完毕了。接下来要让标题图片居中安放。单击图片，在属性面板中（如果面板不出现，按Ctrl+F3打开）。选择面板中的居中按钮将图片居中。（如果面板中看不见这个按钮，是因为面板没有展开。可以按面板右下角的按钮展开面板）。
知道了这张网页的结构以后我们就来可以制作了。
2、插入机器猫图片插入文字
回车换一行，按照上面的步骤插入机器猫图片。这张图片要求不用居中。如果图片继承上面的格式居中。可以通过属性面板中的按钮让其居左安放。
接着我们开始按照上面的样例输入文字。大家会发现文字并没有按照期望的那样排在图片周围。而是出现在图片的下方。这是因为没有设置图片的对齐方式。
单击机器猫图片，在属性面板中。Align对齐方式选择Left（图片出现在文字的左边）。图片的周围会出现一个黄色的标记。这是Dreamweaver专用的对齐符号。不会影响任何显示和效果。
文字就都按照我们期望的方式和图片对齐了。下面我们来设置文字的格式。选中第一第二行文字。在属性面板中将Format字体格式设置成为Heading 3标题三号。并选中“B”将字体变粗。
选中第三行，在属性面板中将Format字体格式设置为Heading 2标题二号。选中“I”将字体变斜。设置“机器猫”的颜色。首先选中这三个字，在属性面板中，单击颜色盒，在弹出的颜色盒中用吸管吸取颜色即可。同样设置其他后面文字的颜色。
最后的三行文字我们想让他们前面带有项目符号的小圆点。单击属性面板中的按钮。选中的文字就带有列表符号了。
3、设置网页的标题和背景图片
选择菜单Modify->Page Properties。系统弹出Page Properties页面属性对话框。在Title域中输入标题文字“机器猫的小窝”在Background Image处单击Browse按钮，系统弹出图片选择对话框。选中背景图片，如果图片在站外将其保存在站内。
按“OK”关闭对话框。网页的标题和背景图片设置完毕。
在页面编辑器中按F12预览网页效果。嗯？怎么凡是图片的地方都是一个叉呢？原因很简单在前面插入图片的时候要求我们将网页文件存盘。选择File->Save。网站中的第一页(也就是首页)，我们通常存盘取名为index.html。重新预览，网页的效果就出现了。
小结：在今天的教程中我们制作了一张完整的网页。实际上对于三大部分进行了操作。
文字：可以设置文字的格式。首先选中文字，然后在属性面板中可以使用Format域设置文字的格式，还可以设置文字加粗加斜的样式和文字的颜色。列表分为有序和无序列表今天我们使用的是无序列表即圆点项目符号。文本可以设置对齐方式分别是左、中、右。
插入图片可以通过对象面板来实现。插入图片要注意一定要保存在网站内，这样才能保证图片的正确显示。图片也象文字一样有对齐方式。另外图片有Align对齐方式，这种对齐方式指图片和文字怎样对齐。
设置页面属性，我们操作了两个地方。其一设置网页的标题。这会在浏览器的标题栏中显示出来。还可以制定背景图片。网页的背景图片是一张小图片，他在网页中重复贴，充满整个网页。
最后是预览。预览用于观察网页在浏览器中的实际效果。直接按F12就可以预览。如果出现图片不出现的情况，要先将网页存盘观看效果。
三、页面之间的超级连接
网站肯定有很多的页面，如果页面之间彼此是独立的。那么网页就好比是孤岛。为了建立起网页之间的联系我们必须使用超级链接。为什么说它是超级链接呢？他什么都能链，连网页，连下载文件，连网站地址、邮件地址……。下面我们就来谈谈怎样在网页中指做超级链接。
在网页中，最多见的就是这种超级链接。在网页中，单击了某些图片或者有下划线就会跳转到相应的网页中去。好了我们下面开始制作。
1、在网页中选中要做超级链接的文字或者图片。
2、在属性面板中单击黄色文件夹，选中相应的网页文件。就OK了。做好超级链接的文字下面会有蓝色的下划线。
3、预览网页。光标移到超级链接的地方就会变成手型。
提示：你也可以手工在链接域中输入地址。给图片加上超级链接的方法和文字完全相同。在Frontpage中制作过超级链接的图片会有蓝色的边框，那是因为Border属性没有设置成为0的缘故。在Dreamweaver中超级链接的图片边框Border属性自动设置为0所以不会有蓝色边框出现。要想看到边框可以把图像的边框Border属性设置成为非0就可以看到边框了。
如果超级链接指向的不是一个网页文件。而是其他文件例如zip文件等等，单击链接的时候就会下载文件。
超级链接也可以直接指向地址而不是一个文件，那么单击链接直接跳转到相应的地址。例如，在链接域里写上http://www.fm365.com/。那么，单击链接就可以跳转到相应的网站。
四、邮件地址的超级连接
在网页制作中，还经常看到这样的一些超级链接。单击了以后，会弹出邮件发送程序，连联系人的地址也已经写好了。这也是一种超级链接。在Dreamweaver 3之前的版本，做一个邮件地址链接比较麻烦需要手动的写。在Dreamweaver 3中新增了一个插入邮件地址的对象。在对象面板中单击这个对象，系统弹出对话框。在对话框Text域中填上相应的文字。E-Mail中填上地址。OK一个连接就做好了。
提示：还可以选中图片或者文字，直接在地址栏中填写“mailto：邮件地址”就可以了。
除了上面的写法，还可以有更加复杂的参数。参数之间用问号分隔。
Subject=邮件的标题
CC=抄送邮件地址
BCC=暗送邮件地址
Body=正文内容
这些都是可以指定的例如下面的样子。单击以后的效果为 mailto:rudolf@sina.com?Subjec=biaoti&CC=rudolf@a.com&BCC=rudolf@21cn.com&body=这是我的意见
五、书签锚点的制作
前面所介绍的超级链接单击以后会直接跳转到相应的页面。如果想在同一个页面里面进行跳转，或者直接跳转到别的页面的某一个地方那该如何制作呢，这就需要用到一个小东西叫做锚点（Anchor）在以前的Frontpage中叫做书签（Bookmark）。锚点概念很形象，在某一个地方抛锚，然后超级链接指向锚，单击链接就可以跳转过去。下面我们来做一个简单例子。假设一个网页中有这样的一本象书的页面。
想要完成这样的功能，单击目录就会跳转到相应的章节。首先要在章节的头上安放一个锚点。然后将目录中的文字做上超级链接指向锚点就可以了。下面step by step 开始。
1、将光标定位在第一章开头的飞狐外传前面
2、选择菜单Insert->Nanmed Anchor 插入锚点。系统弹出插入对话框。输入相应的锚点名称。注意不能使用中文作为名字。
3、单击“OK”结束锚点的制作。页面中出现一个锚点的标记。这个标记只是页面中用于标记锚点的，在正式浏览网页的时候不会出现。
4、接下来我们会使用一个瞄准器来制作指向锚点的链结。选中文字，在属性面板中拖拽瞄准器到锚点上面，就可以了。
5、按F12预览网页效果就做好了。
注意观察指向锚点的超级链接，在属性面板中这种连接指向的地址是#开头后面加上一个锚点的名称。例如上面例子中的超级链接地址指向的就是#chapter1。若是想要将链接指向某一页中的某一个地方可以在链结域中输入XXXX.htm#XXX就是某页的某书签。
六、制作图片上的超级链接Imagemap
注意，我们这里所说的Imagemap是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张世界地图的照片，单击了不同的州跳转到不同的网页。这张图片就是一个imagemap，可点的区域就是热区。下面我们就来制作一个简单的例子，来体会制作方法。
1、首先插入一张图片。
2、单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。并且选择相应的文件。
3、预览网页就可以看到效果。
提示：对于复杂的热区图形我们可以直接选择多边形工具来进行描画。其中Alt域是用来填写说明文字的。填写了说明文字以后，光标移上热区就会显示出相应的说明文字。
七、网页制作技巧
（一）、灵活运用DREAMWEAVER的SITE功能
在DREAMWEAVER中，有一个SITE菜单，利用它可以实现对网站设计阶段的管理。有了它，可以大大减少在网站开发阶段的维护工作量。下面我们具体看看它的一些功能：
1、利用Site更改文件名
在制作网站的过程中往往需要更改文件名，但是，这些文件名可能是某些超级连接所链接的对象。如果我们按照常规的方法去更改文件名，不仅工作量大，而且有可能由于工作的疏忽而造成某些链接找不到相应的链接对象，从而影响到网站的形象。利用dreamweaver的site功能可以大大简化这一工作。
点击site菜单下的open site命令，选择要打开的site名。这里我们选择hongen site。这时dreamweaver便会弹出一个site的操作窗口，如要将jiqiao001.html改为jiqiao003.html，我们便选中jiqiao001.html文件，然后按F2键，遍可以为jiqiao001.html更名，输入新的文件名后，dreamweaver会弹出一个对话框如图所示：
提示是否需要对整个site文件进行更新(update)，选择yes，系统便会自动的更改与该文件相关的所有链接 。
2、利用site查找链接错误和检查浏览器支持程度
在开发建设网站的过程中，如果我们的页面越来越多，则链接出错的可能性会很大，单凭我们人力去检查这些链接显然是特别麻烦的，而且有些隐蔽的链接我们也不会一一点击，有没有自动检查链接错误的功能呢？其实Dreamwaver为我们提供了一个很好的链接检查器，让它帮我们检查不但速度快而且准确，为何不试一试呢？
点击“File”菜单下“Check Links”项(快捷键为Shift+F8),Dreamwaver便开始检查当前Site下的所有连接，如果发现了链接的错误则会在弹出的“Link Checker”对话框中列出链接错误所在的页面，接下来我们要做的只是记下出错页面，然后打开页面修改错误，既快又方便。
由于我们制作的网页上传后，并不能知道网友使用何种浏览器，而我们应用在网页制作中的有些技巧，并不是所有的浏览器都能支持的，也就是说别人也许看不到网页应有的效果，甚至是一团糟，所以我们必须保证自己的网页被主流的浏览器所支持。Dreamwaver提供了这样一个功能，即检查目标浏览器，我们在Site中选中要测试的文件，然后在“File”菜单中找到“Check Target browser”并单击，这时会弹出一个对话框。
我们一般选择“IE 4.0”和“Netscape4.0”检查即可，如果检查结果发现有浏览器不支持的地方，我们在测试结果窗口中能够看到是哪个语句有问题，我们只须做相应的修改即可。
（二）、使用Dreamweaver工具加入CSS码
在页面中加入CSS码，改变页面的显示，但是对于不动CSS语法规则的人来说，使用Dreamweaver同样能加入CSS码来改变显示，这儿有两个小例子。
1、改变链接显示。
通常页面的文字链接显示会自动加上下划线，这样看起来比较清晰，让阅读这一看就知道这里有链接，但是整个页面的美观度有损。在Dreamweaver中只要设定Styles就可以轻易的加入CSS码，改变链接显示。
具体制作如下：
（1）选择菜单“Windows”下的子菜单“styles”，打开“Styles”对话框，点击对话框底部的按键“StyleSheet……”，弹出“Edit Style Sheet”对话框；
（2）在“Edit Style Sheet”对话框中选择“New”按键；弹出如下对话框
如上图红线所圈的图示选择，然后选择确定，弹出对话框“Styler defination for a：link”，在其中设定Text-decoration为none；
同上设定a：visted的Text-decoration为none；
以上述步骤设定a：hoverText-decoration为underline；
打开该页面的Html文档，可以发现在文件头有如下代码：
<style type="text/css"><!-
a:link(text-decoration:none)
a:visted(text-decoration:none)
a:hover(text-decoration:underline)
-></style>
这样你可以不必了解有关CSS的各项规则语法，就可以轻松加入CSS码，而在页面中的链接处文字就不会有下划线出现，但当鼠标移到其上时会有下划线出现。你还可以用这种方法设定链接处文字的颜色、文字背景等，增加页面的美观度。
2、创建自己喜爱的字体
你一定会发现，一般页面中的default字体往往是12pt的宋体，显得有些大大咧咧，不够细腻，同时过大的字体会让文章占用过多的篇幅，怎么办，教你一招。同上面的（1）、（2）步骤，打开“New style”对话框，所不同的是这次我们选择“Make Custome Styler（class）”，在下面的文本输入框中输入：“·useFont”，选择确定，弹出对话框“Styler defination for·useFont”，在其中设定字体为宋体，字体大小为9points，然后选择确定，我们可以看到在Styles窗口中出现了“userFont”的选项；在需要使用该字体的段落，再在“Styles”窗口中选择“userFont”即可。这个字体就是你在我的页面上看到的，是不是觉得细腻多了，页面也显得文气多了？
（三）、利用BEHAVIORS创建动态网页
1、在WINDOWS菜单上选择BEHAVIORS或直接按F8键就会弹出Behaviors浮动面板。
2、选中您想加上action的元素，比如说一个按钮，或者一个超级连接，或一个div，然后点击behaviors浮动面板上的“+”按钮，则会弹出一个菜单，然后选择您想要的action，再设置相应的参数,确认后您就会看到behaviors浮动面板中列出了您刚设置的action。注意它有两列，一列显示的是当发生什么事件时执行该动作，另一列即为动作的名称。您可能会注意到，它的缺省的事件都是“onClick”，我想这在很多情况下不是您想要的，所以您还需要修改该动作执行的条件。方法是先选中该条action，然后点击出现的黑色小三角形，选择列出的事件。dreamweaver可以使您毫不费力的生成动态网页。
下面，我们以几个例子来说明如何使用。
例一：打开新窗口
1、建一个按钮或者一个超级连接。
2、选中该按钮或者该超级连接。
3、点击behaviors浮动面板上的“+”。选择“open browser windows”。
4、设定要打开的url及窗口的式样。
或者，也可为超连接加上一段javascript代码，如：
<a href=”javascript:window.open(‘url’,’标题’,’width=x,height=y’)”>超连接文字</a>
例二：可拖动的层
1、创建一个层。
2、选中该层。
3、点击behaviors浮动面板上的“+“。选择“drag layer”。
4、选择要设置成可拖动的层的名字及相关属性。
注意：该action只适用于IE4.0及以上版本。如果您的behaviors浮动面板上的Events For为"4.0 Browsers"，则该action是不可选的。如果您一定要使用它，请将Event For改为"IE 4.0"。
例三：显示状态栏信息
1、选定您想设定显示帮助信息的元素。
2、选择action“display status message”。
3、填入您想显示的内容并确定。
注意事项：
1、利用action应以不影响网页浏览的正常速度和不妨碍浏览者阅读为前提。
2、注意不同浏览器的兼容性。
（四）、实现有立体感的表格边框
请看下面的例子，这是一个具有立体感的左边条。这个表格给人很精致的感觉，如果把它放在网页的一侧，做为你的网站的导航，一定回会为你的网页增色不少。好，下面我们一起看看怎样用表格实现这样的效果。
如果你用Dreamwaver实现起来十分简单：
1、我们先来插入一个表单：选择“Insert”－>“Table”，在弹出的对话框中设置为7行1列，设置宽度为125 Pixels，然后点击确定；
2、选择“Windows”菜单，点击“Properties”项，“调出“Properties(属性)”窗口；
3、将鼠标在刚才插入的表格中点一下，然后按下“Ctrl+A”,选中整个表格，这时属性框中显示的是表格的属性；
4、修改表格属性：
把“CellPad”设为1，“CellSpace”设为0，边框宽度“Border”设为1，将亮边框“Light Brdr”设为较深的颜色(比背景色要深)，将暗边框“Dark Brdr”设为白色，最后设置背景色为“#FF66CC”以完成设置。
（五）、中文网页制作中段落缩进的方法
在利用Dreamweaver制作有关文档资料内容的网页时，如果是英文书写格式，段落一般不缩进（不支持半角空格）；如果需要缩进往往需要人为的加入两个中文全角空格，才能够显示出位置缩进效果。
除了上面所说的外，还有下面几种方法，可以值得一试，现介绍如下：
1、预格式(PRE)
用预格式编写的源文件，在显示时照源文件中的排版字样显示，空行和空格都能很清楚地区别开来。如源文件为：
<pre>－－预格式显示……</pre>
网页就会按照你预先设置好的显示方式显示，即在“预格式显示”的前面就会空两个汉字的位置。
2、插入点图或透明图形
点图是指图片中只有一个或几个像素点，用肉眼看不出来。当我们在段落开头插入这样一个点图，并用HSPACE和VSPACE属性来调整点图的左右和上下的空格，以达到段落缩进。
同样可以插入一个透明图形，这种方式用IMG的WIDTH和HEIGHT属性调整图形大小，以达到缩进。
插入图形的方法，需要我们掌握好HSPACE和VSPACE大小的尺度，使之刚好留出两个汉字的位置，这样才比较美观。
3、插入没有边框和内容的表格
这种方式与上述的插入图形方式类似，该表格没有边框和内容，是空表格。用TABLE的WIDTH和HEIGHT属性调整表格大小适合缩进的需要。
利用表格来定位一般来说比较可靠，我常常就采用这种方式来对比较复杂的页面进行定位。不过这种方法有一个问题，就是可能是页面的源文件变大。因此也不见得是格式控制的首选。
4、插入特殊的空格字符“＆nbsp”
“＆nbsp”代表非显示空格字符。插入若干个“＆nbsp”字符，中间用分号(；)或者空格隔开，也可以实现中文段落缩进。不过在Netscape 3.01中只能写小写字母，而在IE中大小写都可以。
这四种方法主要是针对利用HTML的语言编写网页而言。在一些网页制作工具，如网景浏览器中有专门加入空格的工具条，也可以完成段落缩进。
5、 插入几个与背景相同的文字，也可以实现中文段落缩进。
（六）、如何去掉主页超链接的下划线
在访问一个页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？
更简单的方法是我们在<HEAD>...</HEAD>之间插入下面的代码
<style><!--
a {text-decoration:none}
a:hover {color: red;text-decoration:none}
--!></style>
下面我们在看一看效果，试着将鼠标移动到下面的超级链接上去，是不是超级链接不会产生下划线了。
（七）、如何制作HTML字幕动画效果
我们在浏览网页的时候，有时会看到网页中有些文字会循环往复的移动。这种动画效果是如何制作的呢？这里我们就来看一看。
当然我们可以利用flash或者采用Gif动画来实现，但是这种方式往往占用的空间比较大，而且不如HTML标记来得那么简单。这个标记就是Marquee标记，中文翻译为“跑马灯”。IE3.0以上版本的浏览器中支持这个HTML标记，而NetScape则不支持。因此我们在设计网页的时候需要考虑这个问题。
Marquee标记的基本语法结构如下所示 ：
<MARQUEE ALIGN=″alignment″ BEHAVIOR=″type″ BGCOLOR=″color″ DIRECTI ON=″direction″ SCROLLAMOUNT=″n″ SCROLLDELAY=″n″ LOOP=″n″WIDTH=″x″ HEIGHT=″y″ HSPACE=″x″ VSPACE=″y″>洪恩在线，12亿中国人的网上大学</MARQUEE>
其中ALIGN可以用来指定滚动字幕与左右文字的对齐方式，它的值可以有top、middle、bottom等；
BEHAVIOR用来指定滚动字幕的滚动方式，它的属性值有scroll、slide和alternate三个，scroll表示滚动字幕内容向同一方向重复滚动，slide表示滚动字幕内容从一端向另一端滚动并在另一端停止，alternate表示滚动字幕内容在两端之间来回往复滚动；
DIRECTION指定滚动字幕的滚动方向，它的属性值有left和right两个，分别表示滚 动字幕由右向左和由左向右滚动；SCROLLAMOUNT用来设置多次滚动之间的间隔距离，其 单位是pixels（像素）；
SCROLLING用来指定滚动字幕滚动一次所需要的时间，单位是ms（千分之一秒）， 其值的大小将直接影响滚动字幕的滚动速度；
LOOP属性是用来指定滚动字幕的滚动次数 的，当它的值为“－1”时，滚动字幕将连续滚动直到浏览器载入下一个页面；
HSPACE和 VSPACE则分别用来指定滚动字幕与其上一级页面在水平方向和竖直方向上的距离。
下面我们看一看跑马灯的效果。(注意：这种跑马灯的效果只在Internet Explorer中能看到，Netscape不支持marquee标记)
（八）、超级链接时如何设定目标窗口
目标窗口是页面链接所指内容显示的窗口，也就是当你单击了页面某一个链接后，该链接所指的内容在那个窗口显示。大多数情况下，我们无需关心它，因为一般都是在同一窗口显示。但是有时我们需要弹出一个新的窗口，而不是替代原来的窗口，怎么办呢？很简单，这里我们只要在超级链接的源代码target属性就可以了。
下面我们就看一看TARGET属性：TARGET是链接标签的属性，它的作用就是指定目标窗口，TARGET有以下几个值：
_self-将链接指向的内容装载到当前页的窗口或框架中；
_top-完全取代当前页面的所有框架；
_blank-为链接指向的内容打开一个新的窗口
_parent-把链接指向的内容装入当前页〈FRAMESET〉父窗口中
下面这段代码，便会使超级链接产生一个新的窗口：
<a href="www.aweb.com.cn" target="_blank">洪恩在线</a>。
（九）、如何使图片与浏览器窗口无缝接合
大家有时候发现想把一幅图片与浏览器窗口边框无缝接合很难，总会有点距离。这是因为你没有设置页面边距，在你的页面<BODY>中加入以下代码：
topmargin="0" leftmargin="0"
topmargin为与浏览器窗口顶部距离，此时为0，图片与浏览器窗口无缝接合。
leftmargin="0"为与浏览器窗口左边距离，此时为0。
（十）、如何让下拉式菜单中的链接来打开一个新的窗口
先把下拉式菜单设置好，如：
<form method="POST" ><select name="D1" size="1">
<option value="http://member.netease.com/~tiatnao/">田涛站点</option>
<option value="http://webfaq.126.com/">网页制作常见问题解答</option>
</select><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset"
name="B2"></p></form>
然后把<select name="D1" size="1">改为
<select onChange="javascript:window.open(this.options[this.selectedIndex].value)" > 即可。
十一、添加水平线：
按水平线按钮 或选择Tags > Horizontal Rule (CTRL+SHIFT+H)。 在水平线标记编辑器里，选居中对齐，设置颜色为黑色。80%宽度。按 Apply。 使用<HR> 插入一个水平线。你可以设置水平线的对齐、颜色、厚度、宽度。“<HR ALIGN="CENTER" WIDTH="80%" COLOR="BLACK" NOSHADE>”宽度相对于页面而言。你也可以使用绝对的像素值。加上 NOSHADE 使之成为一条实线，而没有阴影。
十二、为什么Dreamweaver表格里的背景预览不出来
这要看背景图是设在<tr>里还是设在<td>里，设在<td>里时背景图就可以显示了。这个好象应该是IE的问题。
十三、调查表单以Email形式发送
先在页面上作一个调查表单，再将<form>标签内的代码改为下面形式：
<form name="testform" method="post" action="mailto:abc@sina.com?subject=调查信息" enctype="text/plain">
[文章录入员:sky365] |
|
|
|
|
