3、使用Dreamweaver3.0制作网站页面|英文网页设计,重庆网站设计,重庆网页设计,网站网页设计制作,建网站价格,重庆网站制作,重庆网页设计：：：

动态网页制作dreamweaver的应用(3)

使用Dreamweaver3.0制作网站页面

Dreamweaver3.0是一个相当强大的专业级网页制作软件，但是其易学易用性可以让一位完全不懂网页制作的“门外汉”快速掌握网页制作的技巧，轻松地制作出精彩的网页。现在我们就“追梦”为例向大家详细地介绍一下使用dreamweaver3.0制作网页的过程。

　　第一部分：新建首页及图片文件夹

　　首先选择好将进行建设的网站，然后在右边编辑框的蓝色光带上点击鼠标右键，你将会看到有一个下拉菜单弹出，请选择第一项New File，这时dreamweaver3.0将会在你的网站下建立一个新文件，请将此新文件命名为index.html，对应前面建立网站时讲到的首页名index.html，这就是我们将要进行编辑的“追梦”首页！
　　重复上面的步骤，在下拉菜单中选择New Folder，同样地，dreamweaver3.0将会建立一个新的文件夹，将其取名为images，供以后存放主页上的图片文件用。
　　这里要请大家注意，请不要将图片文件同html文件放在同一个目录下面，而应该为图片文件单独建立一个存放目录，这样做的好处是方面管理、维护，这也是一个网页制作者应该具备的良好习惯。

　　第二部分：网页的具体制作过程

　　在这里，我们将以“追梦”网站为例，详细地介绍dreamweaver3.0制作网页的五个最基本的技术，掌握了这五个最基本的技术，你也就掌握了dreamweaver3.0的精华，加上你的创意，完全可以制作出非常经典的个人网页。这五个基本的技术就是：TEXT文字的插入和设置、Image图像的插入和基本的属性设置、Table表格的插入和设置、Frame框架的建立和设置以及Form表单的插入和设置。

Ａ、TEXT文字的插入和设置

　　网页在字体应用上建议多采用CSS技术，CSS字体工整美观，给人一种亲切感。CSS字体常用的有9pt和12pt两种，考虑到“追梦”首页文字较多，我们选用了9pt。文字颜色我们选择了大众色——黑色，这样网页看上去更大气。在超级链接上，首页链接较多，为了不使其看上去影响整个网页的色调，我们将超级链接的颜色以及访问过的超级链接的颜色都设置为文字颜色——黑色。只是在鼠标悬停于超链上时，超链变为红色加下划线，使其突出醒目。

　　具体过程如下：
（1）双击index.html，dreamweaver3.0弹出新窗口进行index.html的编辑。
（2）选择菜单“Windows”下的子菜单“CSS styles”（快捷键F7），打开“Styles”对话框，点击对话框底部的按键“Open Style Sheet”，弹出“Edit Style Sheet”对话框；

（3）在“Edit Style Sheet”对话框中选择“New”按键；弹出“New Style”对话框。在“Type”选项里选择“Redefine HTML Tag”，在下面的“Tag”下拉菜单中选择“body”，然后点击“ok”，弹出“Style definition for body”对话框，在这个对话框中将对整个页面的字体、字形、颜色等属性进行定义。

　　我们先在“Type”栏的“Font”下拉菜单中选择将要使用的字体——“宋体”。如果下拉菜单中没有“宋体”这一项，你可以选择其中的“Edit Font List”这一项，在弹出的对话框中把“宋体”添加到下拉菜单中就行了！

　　然后“Size”栏选择9、points。对应前面提到的9pt。“Color”选黑色。然后“ OK”就行了，这样BODY的字体、字形以及颜色就定义完了。你可能要问，还有这么多的属性选择项没有选呢。呵呵，其它我们没有选择的都是dreamweaver3.0的高级应用，我们这里还不需要，而且我们现在是入门教材，对吧？有兴趣的朋友自己慢慢摸索吧。

　　接下来依照上面的步骤依此定义br、p、以及table的字体、字形以及颜色，这里就不再详细介绍了，相信大家都能举一反三。

最后我们将对超级链接的属性进行定义，同前面的步骤，点开“New Style”对话框，不同的是现在在“Type”选项里选择“Use CSS Selector”，然后在“Selector”的下拉菜单中选择“a:link”，这是对正常条件下的超级链接的属性的定义，点击“OK”。这时将会弹出“Style definition for a:link”对话框，选择字体为“宋体”，“Size”为9、point，颜色为黑，最后要注意的是的，在“decoration”属性“none”前的方框中打勾。点击“OK”就完成了对a:link的定义。同理，我们需要对“a:active”（超级链接触发时的动作）、“A:hover”（鼠标悬停于超级链接上的动作）和“a:visited”（访问过的超级链接的动作）三个动作进行定义。这三个动作的字体、字形属性均为“宋体”、“9、point”，不同的是“a:hover”的“decoration”值为“underline”，“color”为红色。其余的属性值均同“a:link”的一样，这里就不再详细讲述了。

　　整个TEXT文字属性的设置就完成了，是不是很简单？如果你还觉得麻烦的话，那么点击右下角的“Show HTML Source”的按钮，在弹出的源文件的</title>和</head>标签之间加如下面的这段代码就行了。

<style type="text/css">

</style>

　　对文本的编辑这里需要提几个值得大家注意的问题：

　　在进行文本换行的时候（注意，这里指的换行是指没有使用表格的情况下进行的换行，因为表格内自动换行），如果直接键入回车键，那么dreamweaver3.0将会默认你是在分割一个段落，它会在两行之间直接加入<p> </p>标签，两行之间将会出现非常大的间隔，所以在段落内换行的时候应该使用组合键“Shift+Enter”，这和FrontPage里的用法是相同的。

　　我们在实际的制作过程中还遇到了一个问题，就是在文本输入的时候，只能输入一个空格，对于我们需要录入文章的时候十分头疼（因为中文习惯段落头排空两格），于是我们采用了两种处理方法：

1、在头两格输入四个半角符号或字母，然后将其颜色设为和背景色一样，效果同空格一样。
2、在输入法中使用“Shift+空格”将输入法转换为全角方式，然后再输入空格。

　　对文本的控制是非常简单的，但是要控制得恰到好处却不是件容易的事，相信大家在经过多次使用过后也会发现许多窍门的。

Ｂ、Image图像的插入和基本的属性设置

　　现在我们将要开始编辑网页的图象了，在这之前，我们先将事先准备好的将要使用的图象图片拷贝到前面建立的images子目录中。

为了使网页适应不同的显示分辨率，防止在不同分辨率下的显示错乱，我们决定采用Layer（层）技术对网页的图象、文字和表格进行定位。

　　首先，我们建立一个层：选择Insert->Layer，这样一个层就建好了。够快吧？！不用担心层的大小，因为一会它会被自动“撑”大的。

　　接着，我们需要在层中建一个表格来安排我们事先制作分割好的四个导航图图片：选择Insert->Table，弹出“Insert Table”对话框，在“Rows”和“Columns”两个属性中分别填1、4，代表一排四列的一个表格，“Border”、“Cell Padding”和“Cell Spacing”均填0，而“Width”只需将下拉菜单选择为“Pixels”就行了，大小可以不用管，因为和层的道理一样，图片会将其撑大。OK就行了！

　　图象的插入也是非常简单的，我们先将导航图插入到前面建好的位于Layer层中的表格里。将光标移动到表格的第一个单元格内，选择Insert->Image，弹出“Select Image Source”对话框，在对话框中选择将要插入的图片文件x1.gif，然后点击“Select”即可。现在我们将剩下的三张分割好的导航图图片依次插入刚才建立的表格的单元格内。导航图就已经建设完了。

　　下面需要做的就是设置导航文字，导航文字仍然需要用到Layer（层），在“Objects”面板里点击“Draw Layer”图标，这时光标将变为一个十心箭头，在需要放置Layer的地方按住鼠标左键不放，拉出一个大小合适的层。因为有时候可能层放置的位置不太正确，所以需要移动层，移动层的方法很简单，将鼠标移动到层的边缘上，鼠标就变成了一个十字形，然后点击左键，这样你就可以看到层被一个黑框框住了，然后按住左键不放，拖动层到你想放置它的位置就行了。最后在层中写上导航文字，一切就这么轻松地搞定了！

　　如果有多个层重叠，那么就会有一个哪个层在上面的问题，这时候就需要调整各层的Z-Index，我们可能通过Layers面板(Window->Layers)来进行，只要修改右边Z下边的数字就可以调整各层的Z-Index值。

　　同样地，我们采用以上的这几个方法，很快地便把首页制作完成了，效果非常不错，在640x480、800x600和1024x768三种分辨率下均显示正常。不过前提是使用的浏览器必须支持Layer技术，好在现在大家用的浏览器普遍都支持Layer。

Ｃ、Table表格的插入和设置

　　表格的插入和设置在前面的“Image图像的插入和基本的属性设置”部分中根据需要顺带着提到了一点，下面将进行详细的介绍。

在首页中，我们有一个位置专门用来放置网站的更新情况以及网站的动向的。为了让每一条消息都井井有条地进行排列，就得设计一个表格来安排每一条消息的位置和秩序。

　　选择“Insert->Table”或者直接在“Objects”浮动面板上点击“Insert Table”按钮，系统弹出一个“Insert Table”对话框。对话框有Rows、Columns、Width、Border、Cell Padding和Cell Spacing几个属性选项。我们准备一次最多放置六条消息，按一排放置一条消息计算，Rows这一项取值为六；一条消息占据的纵行为一列，但是考虑到以后的表格扩展和方便控制消息行的左右位置，我们在Columns这一栏取2这个值，专门空出一列进行表格的单元格宽度调整；Width这一栏使用默认值100，因为大小是可以在表格设计完以后再根据需要用鼠标拉大拉小的，至于下拉菜单中的单位我们选择Pixels，因为这个单位是将表格的大小固定为多少像素，而如果是Percent，那么在不同的显示分辨率下，表格大小可能就会发生巨大的变化，严重影响版面的布局；在某些场合，有边框的表格是很难看的，在我们的首页中也不例外，所以Border这一项我们选择了0，这样我们就看不到表格的存在了；Cell Padding是指表格元素与格线之间的像素值，这一项对我们的实用性不大，因此我们不取值；Cell Spacing是指内部表格线的宽度，为了让两条消息间有足够的间隔以便区分和美观，我们填上3这个比较适中的值；最后点OK就完成了表格的设置。

　　如果在表格设置好以后又突然觉得某项或某几项参数没设置正确，那么大可不必将表格删掉重建，你需要做的仅仅是用鼠标点击表格将其选中，然后可以看到“Properties”浮动属性面板已经将表格的所有属性显示出来了，只需要改动一下就行了。

　　如果要插入一个表格但又不想先指定上述选项，请选择Edit>Preferences(编辑>参数)，关闭General（一般）参数中的 Show Dialog When Inserting Objects（插入对象时显示对话框）选项。

Ｄ、Frame框架的建立和设置

　　在“追梦”的子栏目“巴山夜话”和“神雕俠侣”中，均采用了Frame框架的技术，Frame框架带来的好处是方便浏览、易于管理。缺点就是较难控制其在不同分辨率下的正常显示。

　　现在以“巴山夜话”为例，向大家介绍一下Frame框架的建立。

　　1、使用快捷键“ctrl+F10”打开“Frames”的控制面板。然后选择Modify->Frameset->Split Frame Left，屏幕被分成两半了，可是一分为二的屏幕简直太老土了，得进行调整，点中中间的分割线，向左拉至合适的位置。不过中间一根粗粗的分割线的确不好看，有什么办法让他不可见呢？很简单，先选中分割线，这时“Properties”浮动属性面板中会有两个属性选择——“Borders”和“Border Width”，在“Border Width”里填上0，然后在“Borders”的下拉菜单中选择“NO”，于是刚才影响“市容”的分割线不见了。

　　2、现在对左边框架进行设置。在Frames控制面板里点左边框架，这时可以看到“Properties”浮动属性面板又变样了，在“Src”里选择左边框架所要显示的页面，也可以直接在主窗口的左边框架对左页面进行编辑，“巴山夜话”的左框架比较简单，页面仅有一幅背景图；插入这幅背景图的办法很简单，首先点鼠标右键，可以看到弹出一个下拉菜单，选择最后一项“Page Properties...”，于是又弹出一个窗口，在“Background Images:”这一栏点“Browse...”选择事先准备好的背景图片，最后“Select”、“OK”就行了。

　　之后在“Frame Name”里填上contents给左框架起一个名，在“Scroll”下拉菜单中选择NO，表示本框架永远不使用滚动条，（这里需要注意，如果这一页显示内容过多过长，而又没有设置滚动条，那么浏览者就很有可能看不完整这一页的内容，因为有一部分无法滚动出来，所以一定要准确的控制好。）在“No Resize”前面的框中打勾，表示禁止浏览者自己改变左右框架的分配比例。OK，左边框架的设置就完成了。

　　3、对右边框架进行设置。右边框架和左边框架的设置大同小异，只是因为右边框架是用来显示较大的主页面的，都是一些较长的文章，所以“Scroll”的值我们选择了AUTO，表示让浏览器自动确定是否需要使用滚动条，如果内容在能显示的范围内能够显示完，那么浏览器将不显示滚动条，否则将提供一个滚动条。最后，使用SAVE ALL，将Frame的三个文件保存！

Ｅ、Form表单的插入和设置

　　Form表单是交互页面必不可少的一个部分，它可以通过CGI对信息进行采集或者查询，提供一个人机对话的接口。

　　这里我们简单介绍一个留言板的表单实例。

　　选择“Insert->Form”，页面上即建立了一个Form框架，光标停在了框架内，“Properites”浮动属性面板出现了三个属性选项Form Name（表单名）、Action（动作）和Method（提交方式）；在Form Name里给表单起一个名字——liuyan；Action里需要填入表单所连接的CGI地址或者是电子邮件地址，这里为了简单，我们采用电子邮件提交，写入“mailto:52013@netease.com”；Method提交方式采用默认的Post方式。Form框架属性就设置完成了。

　　我们现在只需要向框架中加入需要的对象就行了，我们的留言板需要留言的朋友提供三个资料就行了，即姓名、电子邮件地址和留言，所以需要放置三个“Text Field”（文本编辑框）。

　　首先放置第一个”姓名”文本编辑框：这时光标应该在表单框架中，选择“Insert->Form Object->Text Field”，可以看到一个单行（Single Line）的编辑框就建好了。
　　通过“Properties”浮动属性面板的“Char Width”值的大小来改变单行编辑框的长度；通过“Max Chars”的值来控制单行编辑框中能填写的最大字符串长度，然后就OK了！是不是非常简单？而且是所见即所得哟！

　　然后用同样的方法放置第二个“电子邮件”文本编辑框。

　　最后是留言框，留言框同上面两个有些不同，因为留言框不能是单行的，怎么办呢？其实细心的朋友早就看见了，在“Properties”浮动属性面板上有一个“Multi line”选项是可以将单行编辑框转变成多行编辑框的。
一切就这么简单！

　　所有的编辑框都建好了，可用户怎么提交呢？别急，在最后我们需要建两个按钮，一个用来提交，一个用来撤消，大家跟着我做。选择“Insert->Form Object->Button”，这样一个提交按钮就做好了，在“Properties”浮动属性面板”的Label栏内给这个提交按钮换个名字吧。撤消按钮的做法同提交按钮只有一点不同，就是在“Properties”浮动属性面板里将它的Action属性改为“Reset Form”。真是简单得让人不敢相信，这就是Dreamweaver3.0的威力！

　　到此为止，Form表单的插入和设置也简单的向大家介绍完了，具体的其它功能还需要我们一起去摸索去掌握。

　　“追梦”工作室的网站就是在上面这几个具体的步骤下建设出来的，但是实际做起来却比刚才说的要难，原因就是一个网站的建设不光是会Dreamweaver3.0就够了，还需要许多其他方面的知识，希望大家同我们工作室的三位成员一起共同努力学习网站建设技巧，做出人见人爱的精彩网站。