☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
第五个任务：使用dreamweaver建立站点之一
第四天，早上刚一上班小问号就兴致勃勃地来到我的办公室。
小问号：蒋老师，真没想到photoshop工具还能做网页呢？以前我怎么也没有想到photoshop能和做网站联系在一起，看来这里面的学问大着呢，我要学的东西还很多！
蒋老师：恩，悟性不错，既然知道了自己要学的东西还很多，那就再接再厉！
小问号：Yes. sir！
蒋老师：会用dreamweaver建立站点和制作静态网页吗？
小问号：这个没问题，还参加过学校组织的校园比赛呢！
蒋老师：那好，继续吧，有不明白的到美工部问问。
小问号：OK！
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
1、使用dreamweaver建立站点
（1）、在你电脑的工作区中建立一个文件夹，命名为GovWeb,这个文件夹就是用来存放我们要做的“中原市国土资源局网站”内容的，名字你也可以随意起，但是一定要用英文或拼音，表达意思要明确。文件夹建立好后把之前你用Photoshop导出的图片文件夹images拷贝进去，好，到此我们已经创建好了网站存放的位置。
（1）、启动dreamweaver，如图：
然后依次点击菜单栏中的“站点”-->“新建站点”，如图：
,
这时会打开站点创建窗口，如图：
我们在“站点名称”框中输入站点的名字，这里我们叫做“中原市国土资源局门户网站” ，然后在“本地根文件夹”中选择刚才创建好的“GovWeb”文件夹，在“默认图像文件夹”中选择 “GovWeb”文件夹中的“images”文件夹，如图：
最后点击“确定”按钮就创建好了站点，站点创建好后dreamweaver右侧的文件窗口的界面为：
（由于版本的不同及个人设置不同，文件窗口有可能出现在左侧）
2、使用dreamweaver制作静态首页面
在dreamweaver右侧的“文件栏”中右键“站点”，在弹出的菜单中选择“新建文件”，如图1，然后将这个文件命名为“index.html”，如图2，这个页面文件就是我们网站的主页了。
现在我们就开始制作主页了，首先在“标题”栏中输入“中原市国土资源局门户网站”，这就是我们网站首页的标题，然后在dreamweaver下方的属性栏中点击“页面属性”按钮，弹出页面属性对话框，我们设置页面文字的大小为12px，页面左边距、右边距、上边距下、边距均为0，如图3：
这时按下Ctrl+S保存一下吧，以后做东西的时候大家要养成及时保存的好习惯，以免突然断电或机器死机等带给我们的不便。到此空的首页已经创建好了。
3、布局首页面
现在要开始插入表格来布局首页面了，依次点击菜单栏中的“插入”-->“表格”，这时会弹出“表格对话框”，我们依次设置表格属性:行数:1 ,列数:3 ,表格宽度:1003 ,边框粗细:0 ,单元格边距:0 ,单元格间距:0 ,如图4：
设置好参数后，点击“确定”按钮,表格就插入到了页面中，然后我们选中这个表格，设置表格对齐方式为“居中对齐”如图：
，设置第一列的宽度为11px，第二列的水平对齐为“居中对齐”，垂直对齐为“顶端”，第三列的宽度为12px，这时主表格大致设计好了。
现在我们开始往表格里插入图片和背景图像了，需要说明的是，这里面我们用的图片是上一章节中提供下载的“切割好的图片”，你可以直接下载并使用，也可以使用你自己动手切割的图片，但是每个图片的名字请与我们保持一致。
好，现在开始做。
设置第一列的背景图像为“images/index_blank_01.gif”，第三列背景图像为“images/index_blank_03.gif”，将表格的总高度设置为500px(这个高度你可以随意定义，只是为了我们能看清楚效果，将来表格会根据里面的内容自动增高)，好了，到这里我们的页面已经有点小效果了，如图5：
老规矩，先保存...
怎么样？是不是有点感觉了？那就继续吧。
好,现在做中间的部分，我们先分析一下首页的布局，大致可分为头部、中间主体、尾部三个部分，如图6：
好，根据页面的布局，我们现在插入一个三行一列的表格用来存放头部、中部和尾部内容。表格设置为3行1列，宽度为980px，边框、边距、间距均为0，将这三行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
（1）、制作第一行内容（头部）：
现在分析一下第一行要放的内容，如图7：
好，根据分析我们需要在第一行中再插入一个4行1列的表格，用于放头部内容。
插入一个4行1列表格，宽度为980px，边框、边距、间距均为0，将这四行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
·在第一行的高度设为120px，插入一张图片“images/index_top.gif”。
·将第二行的高度设为32px，背景设为“images/index_title_bg.gif”，这一行是用作放网站菜单的，我们现在就制作菜单，在第二行中插入一个1行10列的表格，表格宽度为750px,每一列的宽度全部设成75px，水平对齐设为“居中对齐”,第一列的背景图片设为“images/index_title_btn2.gif”，其他9列的背景图片设为“images/index_title_btn1.gif”，然后在这10个格子中分别输入“首页、机构概况、通知通告、工作动态、政务公开、政策法规、办事大厅、交易大厅、**举报、网上办公”，接下来选中这10个格子，在属性栏中设置字体大小为14px，颜色为#FFFFFF。
·将第三行的高度设为25px，背景图片设置为“images/index_blank_10.gif”。
·将第四行的高度设为100px，插入一张图片“images/index_blank_12.gif”。
OK，到此网站头部已制作完毕了如图8，小庆祝一下吧，但是别忘了保存呦。。。
2、制作第三行内容（底部）：
现在我们开始制作首页的底部，你也许会问，首页中间还空着呢怎么先做底部了？告诉你，没关系的，先做好头部和底部，整个页面的框架就成型了，再填充中间部分就得心应手了。
将第三行的高度设置为74px，背景图片设置为“images/index_bottom.gif”，这时底部的样子已经出来了，我们只需要在里面输入一些版权信息的文字就完成底部的创建了。
我们依次输入:“
中原市国土资源局版权所有 技术支持：跟我学编程
-->Shift+回车键（或直接在代码中输入<br>）
-->Copyright2008-2010 中原市国土资源局 zhongyuanshi.gov.cn All Rights Reserved
-->Shift+回车键（或直接在代码中输入<br>）
-->master@zhongyuanshi.gov.cn 豫ICP20100101号 地址：中原市东方红路108号 邮编：456250
”，将这部分文字选中设置颜色为#FFFFFF,大小为12px,行间距设置为20px。好，到此我们的首页底部就做好了，底部效果如图11，怎么样？依然很简单吧?再次给自己庆贺一下吧！（提示：你别忘记按下Ctrl+S）
（3）、制作第二行内容（中部）：
现在我们开始制作首页的中部，这里是这次课的重点，但是大家不要怕，难度并不大，相信你自己的能力，一定要动手做出来哦！
老方法，先分析中部内容的布局，请看图12。
很清晰就可以看出，中部内容大致分为左右两部分，所以我们需要建立一个一行两列的表格，来放置中部内容。
在第二行中插入一个1行2列的表格，宽度为980px，边框、边距、间距均为0，将这两列的垂直对齐都设成“顶端”，将第一列的宽度设置为750px，水平对齐设置为“左对齐”，将第二列的水平对齐方式设置为“右对齐”。
A、制作第一列内容：
我们现在分析一下第一列内容的布局，如图13：
那么我们现在该怎么做呢？
恭喜你说对了，我们现在插入一个5行1列的表格，宽度为747px，边框、边距、间距均为0，将这五行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
<1>第一行内容： 第一行中包括轮换图片新闻和工作动态两部分内容，所以我们再插入一个一行两列的表格，宽度为747px，边框、边距、间距均为0，将这五行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。
·将第一列的宽度设为343px，高度设为311px，插入图片“images/index_blank_13.gif” 。
·在第二列中插入一个3行一列的表格，宽度为404px，高度为311px，边框、边距、间距均为0，将这三行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。将第一行的高度设为37px，设置背景图像为“images/index_blank_14.gif”，将第二行的高度设为263px，背景图像设为“images/index_blank_19.gif”，将第三行的高度设为11px，并插入图片“images/index_blank_25.gif”。
好了，到此第一行的内容做好了，大家运行一下看看效果，是不是像那么回事了？如图14：
<1>第二行内容： 第二行中包括滚动图片，将高度设为88px，插入图片“images/index_blank_26.gif”。
<3>第三行内容： 第三行用于放置三块黄色背景的专题版块。插入一个一行三列的表格，宽度为747px，边框、边距、间距均为0，将三列的宽度全部设为249px，垂直对齐设为“顶端”，将第一列的水平对齐设为“左对齐”，第二列的水平对齐设为“居中对齐”，第三列的水平对齐设为“右对齐”。
·第一列：第一列中再插入一个3行1列的表格，宽度设为240px,高度设为184px，边框、边距、间距均为0，将这3行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。 将第一行的高度设为32px，背景图片设为“images/index_blank_32.gif”，将第二行高度设为150px，背景设为“images/index_blank_34.gif”，将第三行中插入图片“images/index_blank_38.gif”，高度设为2px。好了，到此第一列的板块就做好了。
·第二列：将刚刚在第一列中做那个三行一列的表格复制进来。
·第二列：将刚刚在第一列中做那个三行一列的表格复制进来。
好了，到此第三行的内容做好了，大家运行一下看看效果，是不是更像那么回事了？如图15：
<4>第四行内容：第四行中放置了一条红色的分割线，很好实现。只需要将第四行高度设置为10px，然后切换到代码视图，在第四行<td></td>中间写入“<hr color="#FF0000" width="100%" size="1" />”这一句代码即可。
<5>第五行内容：第五行中放置了六块文章版块，很显然需要插入一个三行两列的表格，每一行放两个版块。现在插入一个3行2列的表格，宽度设为747，边框、边距、间距均为0，将这六块的垂直对齐方式设为“顶端”，高度全部设为204px。将左边三块的水平对齐方式设为“左对齐”，宽度设为273px。将右边三块水平对齐方式设为“右对齐”，宽度设为274px。在第一块中插入一个3行1列的表格，宽度设为369px，高度设为204px，边框、边距、间距均为0。将这3行的水平对齐都设成“居中对齐”，垂直对齐都设成“顶端”。 将第一行的高度设为39px，背景图片设为“images/index_blank_40.gif”，将第二行高度设为162px，背景设为“images/index_blank_43.gif”，将第三行中插入图片“images/index_blank_45.gif”，高度设为3px。好了，到此第一个板块就做好了。接下来将做好的这个版块分别粘贴到其他五块中就OK了。
好了，到此我们左边部分的内容就全部做完了，效果如图16：
我要看效果 我要下载
怎么样？是不是特有成就感呢？那我们就接着完成右半部分的内容吧
（2）、制作第二列内容：
还是老规矩，先分析下第二列内容的布局，如图17：
根据分析现在我们在第二列中插入一个8行1列的表格，表格宽度设为230px,边框、边距、间距均为0,将这8格的水平对齐方式均设为“居中对齐”，将第1、3、4、5、6、7、8格的垂直对齐方式设为“顶端”，将第2格的垂直对齐设为“底部”，下面详细介绍这8个格的设置：
<1>第一格内容：在第一格中插入一个3行1列的表格，将表格宽度设为230px，高度设为203px，将这三行的水平对齐设为“居中对齐”，垂直对齐设为“顶端”。设置第一行的高度为37px，背景图像为“images/index_blank_16.gif”，设置第二行的高度为163px，背景图像设置为“images/index_blank_18.gif”，将第三行的高度设置为3px，插入图片“images/index_blank_22.gif”。
<2>第二格内容：设置第二格的高度为125px，并插入图片“images/index_blank_24.gif”。
<3>第三格内容：在第三格中插入一个3行1列的表格，将表格宽度设为230px，高度设为150px，将这三行的水平对齐设为“居中对齐”，垂直对齐设为“顶端”。设置第一行的高度为28px，背景图像为“images/index_blank_28.gif”，设置第二行的高度为118px，背景图像设置为“images/index_blank_30.gif”，将第三行的高度设置为4px，插入图片“images/index_blank_36.gif”，第三格中的内容到以后做程序时再设置。
<4>第四格内容：将第四格的高度为40px，背景颜色设为#f5fff4。
<5>第五格内容：完全复制第二格内容。
<6>第六格内容：完全复制第二格内容。
<7>第七格内容：完全复制第二格内容。，第七格中的内容到以后做程序时再设置。
<8>第八格内容：完全复制第二格内容。
好了，到此整个首页我们已经制作完了，开始庆贺吧，但是请不要使劲摔鼠标哦。（注：目前主页中间部分的左右两边高度可能不太一样，这没关系，以后做程序的时候根据情况来调整每个版块显示的条数就可以使左右对齐了）
扫一扫
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
