网页设计课程设计说明书参考

福建林业职业技术学院《网站建设与网页制作》设计说明书

课程名称网站建设与网页制作

设计题目个人求职网站

专业班级计算机信息管理0604班

学生姓名蔡秀萍学号20064010307

指导教师蔡尊煌

起止日期2010年1月11日至1月16日

个人求职网站制作说明

一、网站开发目的和功能简介

随着网络技术的发展与互联网的普及，网站建设与网页制作越来越来成为各行各业以及个人宣传自己的有利工具。个人网站在当今时代被越来越多的人用来做为宣传自己，它在网站建设中占据着重要地位，制作个人网站成为一个热点。通过个人网站的制作可以向用人单位、老师、同学、亲朋好友提供了解我个人的一个互联网平台。本站功能主要在方便用户查询本人的相关资料。

二、网站的设计

2.1网站名称：瓶子个人网站

2.2网站栏目划分：

根据本网站的目的和功能规划网站内容，包括各章节内容、实例演示、制作要点、案例素材库、成品欣赏、实训、关于我的更多、与我联系、友情连接、版权声明等基本内容。（1）各章节内容——对个人详细情况的介绍；（2）实例演示——列举了蔡秀萍工作实践经历和获得的许多奖项；（3）制作要点——利用移动标签让文字和图片产生动态的效果；（4）案例素材库——蔡秀萍个人的相关素材资料；（5）成品欣赏——个人网站的建设成品展示；（6）实训——与各模块相结合的实验内容；（7）友情连接——友情连接到蔡秀萍个人提供的完整材料等；（8）版权声明

具休如下图示：

2.3网站导航应用于所有页面提高网站的操作友好性。

2.4网站的风格与色彩选择：页面以浅绿和浅黄色为主。浅绿色体现了活力，字体实用浅棕色和淡淡的灰色给人一种清析、稳重的感觉。所有页面色调统一，布局相似。

2.5网站目录结构设计合理：不同素材采用不同学文件夹分开存放。如声音放在sound 文件夹、图片放在images文件夹，照片放在photos、FLASH动画放在flash文件夹、作业成果图放在works等。

三、首页的制作过程

3.1网站首页以1024X768为基准分辨率进行布局。利用样式布局网页来统一网站风格。新建网页保存制作如下布局。

版面分栏结构，即页头、导航栏、内容、版权（如下图）

整个页面分为四部分，第一部分是动态的文字，主要是个人自信心的体现的主题声明；第二部分是导航栏；第三部分是详细内容，其中网页中的文字排得整齐紧凑，这样能给人一种舒服的感觉。在网页适当的地方加一些图片，每张画面再加一些不同的文字说明，使得网页显得更加的精美；第四部分是版权声明。采用这种布局，主要是给浏览者一种简单、清晰、明了的感觉，使网站整齐划一。

具体首页布局如下图所示。

3.2制作过程简述：本网页制作分为三个部分：顶部包括瓶子个人网站动画的制作、设为首页、收藏本站、与我联系、导航。中部又分为左右两个部分，左边为相册和名言警句，其中在我的相册中添加行为，并利用imageready制作动态的图片，是的图片自动变化，当鼠标放在图片上，使得图片停止变化，鼠标移开时恢复；右边为我的日志。底部为版权信息。我还为网页设置了背景图片，设定单元格局中显示，设定文字样式，还为页面增加状态栏运动文字的效果。

四、求职意向制作过程

4.1新建一个页面，命名为求职意向（qzyx），其页面是以1024X768为基准分辨率进行布局。

4.2在页面属性的外观中设置四边边距为0，文本颜色设为：#77c7c，背景颜色设为：#5F564D，大小设为12像素；在链接中设置下划线样式为：始终无下划线；在标题中设置标题1（1）为12像素，颜色为：#a0672e；在标题/编码中，设置标题为：个人求职网站。单击应用或确定按钮，确认以上设置。

4.3利用样式定义各个部分的高宽，将images/main_bg.gif设为背景图片。其样式代码如

下：

#main_container{

width:950px;

height:auto;

margin:auto;

background:url(images/main_bg.gif) no-repeat top center #f0f0d8;

}

#center_content{

width:895px;

margin:auto;

}

#header{

width:895px;

height:130px;

margin:auto;

}

#middle_box{

width:895px;

height:278px;

clear:both;

margin:auto;

background:url(images/middle_bg.jpg) no-repeat center;

}

#footer{

width:895px;

height:48px;

margin:auto;

color:#508aa1;

border-top:1px #b2bbbb dashed;

}

4.4瓶子个人网站动画的制作

（1）打开已经安装好的SWFText，在影片中设置宽度为：358，高度为：40，速度（帧频）为：11；在背景中勾选背景透明；在背景特效中的使用背景特效选择圆环，将颜色设为嫩绿色，以便制作的网页相搭配；在文本中利用编辑按钮，在文本框中输入瓶子个人网站，单击确定；在文本特效中选择随机振动；在字体中设置颜色为棕色；在声音中勾选在flash 影片中播放背景音乐或声音，点击浏览，在声音文件中插入名为：big world.mp3的音乐文件。

（2）制作完成后，单击发布，将制作好的flash保存到制作中的网站的名为flash的文件夹底下。

（3）将制作好的flash插入到网页头部中，并调整其位置。

4.5在网页头部绘制图层，在图层中输入首页、我的资料、我的相册、我的作品、求职意向设置其样式，并设置其连接。代码如下：

#menu{

width:460px;

height: auto;

float:left;

padding:105px 0 0 70px;

}

#menu ul{

list-style:none;padding:0px;margin:0px;display:block; font-weight:bold;

}

#menu ul li{

list-style:none;display:inline;float:left;width:auto;height:12px;padding:0px;font-size:12px;

}

#menu ul li a{

height:12px; width: auto;float:left;text-decoration:none;padding:0 8px 0 17px; margin:0px;color:#9d8f9b; font-weight:bold;

}

#menu ul li a:hover{

height:12px;width: auto;text-decoration:none;color: #857283;

background:url(images/menu_checked.gif) no-repeat left;

}

#menu ul li a.current{

height:12px;width: auto;float:left;text-decoration:none;padding:0 8px 0 17px;color: #857283;background:url(images/menu_checked.gif) no-repeat left;

}

4.6我的心语页面的设置，其样式的定义代码如下：

#middle_box{

width:895px;

height:278px;

clear:both;

margin:auto;

background:url(images/middle_bg.jpg) no-repeat center;

}

.middle_box_content{

width:370px;

padding:20px 0 0 30px;

}

（1）“我的心语”使用STYLE1样式,心语内容使用more样式，“关于我的更多”使用STYLE2样式。其中样式设置如下：

.STYLE1 {

font-size: 18px;

color: #A0672E;

font-weight: bold;

｝

a.more {

display:block;

text-decoration:none;

float:right;

margin:5px 0 15px 0;

}

.STYLE2 {color: #A0672E}

#Layer1 {

position:absolute;

left:772px;

top:54px;

width:179px;

height:31px;

z-index:1;

}

4.7添加时间特效：在靠“我的心语”的右边绘制一个图层，将图层代码拖至关于我的更多的两个/div后面，在绘制的图层中，粘贴特效代码。

4.8制作内容部分。

（1）利用样式定义内容部分，其中内容又分为两个部分（左右），其代码如下：

.left_content{

width:480px;

height:auto;

float:left;

padding:10px 10px 15px 0;

}

.right_content{

width:390px;

height:auto;

float:left;

padding:10px 0 0 10px;

}

利用层调用样式，使得排版分为左右两边。左边的内容有“求职意向”“留言板”，右边的内容有“自荐信”。

（2）使用层对内容进行布局,其中文字“求职意向”“留言板”“自荐信”都使用上面已

经定义的STYLE1样式，具体说明文字使用news_tab样式，（news_tab的字体大小为12像素，字体颜色为＃777c7c）

（3）留言板的具体制作：在标准视图下插入2行4列的表格，设置表格边距、填充距等为0，设置在表格的第一列和第三列中分别输入：您的称呼、您的性别、您来自、联系方式，在表单视图下分别在文字的右侧绘制3个文本字段和两个单选按钮（在标签文字中分别输入男和女）。为了美观，把可输入文本的表格设置为只显示下划线，其操作方法为：定义一个类样式，样式代码如下

.liuyan {

border-top-style: none;

border-right-style: none;

border-bottom-style: solid;

border-left-style: none;

border-top-color: #B2BBBB;

border-right-color: #B2BBBB;

border-bottom-color: #B2BBBB;

border-left-color: #B2BBBB;

border-bottom-width: 1.5px;

background-color: transparent;

选中文本域，将其样式选为liuyan。

再接着的下面绘制一个2行1列的表格，在第一行中输入您的留言，第二行中用文本区域绘制一个字符跨度为50，行数为5的多行文本。最后是添加提交、取消按钮。为了使其有提交效果的显示，在行为中为提交添加弹出信息的对话框。当用户点击提交，就会弹出对话框，在对话框中会显示“谢谢您！我将及时给予您答复！”这样的字段。点击取消按钮则会弹出提示“提交失败！您的留言未提交！！！”

（4）自荐信的制作：自荐信的内容是用层来布局的，文字运用到marquee标签。其大概参数代码如下：

内容

4.9友情连接的制作。

（1）在内容的底部插入一个table（表格），在表格里面输入：友情链接：百度新浪腾讯搜狐易网谷歌好123，设置友情连接的样式为STYLE1,其他的文字样式设为

STYLE5.（文字样式为：大小14像素，颜色为：＃777c7c）

（2）为其添加连接：选中要连接的文字，在属性栏的链接中直接输入网址。

4.10版权的制作

定义页面footer样式及网页链接。

4.11制作页面状态栏运动文字的效果，使其能不断的在页面的状态栏中自右向左运动。

网页的最终效果如下图：

·五、设计技术总结

为了使我们的网站更加实用、内容丰富，我们在网站里用了很多的技术，包括flash fireworks photoshop 等图片处理和动画，运用dreamweaver中相关知识制作各种特效比如图层运用、时间轴运用等，本网站中还运用知识点运用swishmax 和fireworks 相结合制作出banner.还包括javascript等动态脚本语言。

5.1在素材收集和处理上本人花费了大量时间处理网站动画、真实照片收集、个人信息。如应用PHOTOSHOP对相片进行整体处理。利用SWFText制作了广告动画。

5.2文字滚动效果，代码如下：

Scrolldelay="5"onMouseOver="this.stop()"onmouseout="this.start()">内容

5.3设为首页,其代码如下所示：

设为首页

5.4收藏本站,其代码如下所示：

收藏本站

5.5 为页面增加状态栏运动文字的效果，其代码如下所示：

5.6为网友添加时间代码，使其在页面的头部显示现在的时间日期。

5.7为相册添加特效，使其自行从左自右运动，当鼠标移动到相册下的小照片的时候，照片会自动放大，并显示在图层中。

5.8为网叶添加切换特效，其代码如下：

六、实习心得

本次网站主要是运用本学期学过的知识来布局应用、制作动画效果，通过本次的网站设计，运用了本学期所学到的知识这样不仅复习了本学期学过的一些知识，同时也加深所学知识的内容，这次的网页制作使我学会了很多，有关怎么收集资料，怎样用最快的方法收集资料，怎样收集有效的资料，怎样整理资料，怎样使自己的下载的资料便于查找，也学会了网页的制作，学会了运用网页特效，怎样的特效才能凸现网页主题。在制作网站的过程中，也碰到了不少的不明白的地方通过老师同学的帮助也解决了不少问题，通过循序渐进的学习慢慢地完成了本次的网站建设，这次做的网页虽不是很好看，有不足之处，比如动态页面的制作、脚本的运用、一些效果的运用等运用的不够灵活，同时网页布局也不是很完善，可是我花了很多时间来完成它，所以呢，它对我以后做网页有很大的帮助。在此次做网页的过程中也让我学到了很多东西，所以呢从我内心来说我是很满意我的这次经历，同时也要谢谢老师安排这样的实习周，为什么呢？因为在制作过程中我不仅学到了书上没有的东西，也培养了我独立思考问题的能力，同时还增强了同学之间的团结互助的友谊。因此，不论从哪个角度来说，老师此次布置的任务是上大学以来唯一把知识用于实践的第一回，再一次谢谢你老师。总之这次设计就是在不断的“发现问题——>解决问题——>再发现问题——>再解决问题——>”这个学习过程中完成的。今后我将继续努力，把网页设计的更好。