学校网站的设计与实现文档格式.docx
- 文档编号:3910404
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:18
- 大小:866.28KB
学校网站的设计与实现文档格式.docx
《学校网站的设计与实现文档格式.docx》由会员分享,可在线阅读,更多相关《学校网站的设计与实现文档格式.docx(18页珍藏版)》请在冰点文库上搜索。
2.2开发工具的选用及介绍
2.2.1Dreamweaver8.0
Dreamweaver8是一个生产和管理网页网站强大的编辑软件,主要用于制作屏幕的外观,使用更方便。
它的内容丰富、自称系统、实例众多、是网页设计者的首选工具。
Dreamweaver有灵活便捷的编写方式、可视化的编写界面、CSS属性功能支持、浏览器验证、强大的web站点管理功能、图形编辑功能、强大的集成特性、丰富的媒体支持功能、以及第三方插件的扩展等多方面的功能。
2.2.2Photoshop
PS图象处理软件是一个图形图像编辑软件,具有软件性能的优化设置,被广泛应用于网页制作。
Photoshop包括了强大的快速浏览功能、颜色匹配方便快捷、调色板种类齐全、阴影或加亮的修正功能、支持多种模式的图像输入功能、支持快速查看、flash输入、沿路径放置文本、还可以自定义快捷键。
[3]
2.2.3Flash
Flash是广泛应用于多媒体,动画,MTV,短短几年,Flash正以惊人的速度发展。
在此期间flash发展日新月异,直到2007年,Adobe公司正式发布了Adobecreatesuite3系列产品。
它的出现为设计人员在印刷、web、移动、交互、影音编辑等各方面的创意设计提供了广泛选择。
它的强大功能,无论是动画的应用驱动的设计或施工,这是一个最好的产品,用户会感觉到它史无前例的功能。
[6]
3方案选择
3.1网站布局
1.网站名称:
本网站定名为商丘师范学院与学校名字一致。
简单明了、易于搜索。
体现了网站的定位。
2.网站主题:
本网站主题是帮助大家方便快捷掌握学校动向,了解学校情况。
致力于制作出符合大众心理以及使用习惯的学习网站,传统与创新结合。
3.网站的导航:
本网站根据不同需要设计了学院首页、院系概况、新闻公告等多个导航。
并选用了有学校名称、校训字体的图片。
4.颜色设计:
本网站主要采用白底黑字,以浅蓝色为主色调。
简单大方,不会因繁杂的颜色产生浏览疲倦感。
使用户喜欢这一网站,对网站产生持久的兴趣
5.字体设计:
本网站的文字主要采用的是标准的宋体,符合总体使用习惯。
3.2整体构思
这一网站的设计包括了学院首页、本系概况、新闻公告、教学科研、组织机构、教学工作、图片展示、用户的联系留言设计等几个方面。
他们之间的联系密切,各自实行独立的功能,为网站的实现做了支持。
大体的图解如图1所示
图1
3.3网站栏目介绍
1.学院首页:
首页是对学校整体布局的设计,使用技术最多,也是最为重要的一栏。
它决定了读者是否被吸引。
因此,我设计了站内搜索、学生通知、图片滚动播放、以及用户的登陆等用来是网页更加美观。
2.新闻公告:
这是为了实时更新新闻而设计的,可以使大家在最短的时间内了解热点新闻,掌握学校动向,为新闻爱好者提供了快速阅读的通道。
3.图片展示:
为大家展示了学校的无限旖旎风光,使用Photoshop将图片美化,使图片更加美观使用户喜欢这一网站,对网站产生持久的兴趣。
4.教学科研:
为大家提供了众多学习资料,一些著名的论文,供大家学习。
5.组织机构:
可供大家了解学校师资力量、实验基地,将理论联系实际发挥到极致。
致力于制作出符合大众心理以及使用习惯的学习网站。
同时加入了自己的创新,在传统的理论基础上加入了新的元素,整个制作相得益彰。
6.用户联系:
这一板块的设计是为了更好地实现信息交流,使之更加便捷畅通。
而且根据用户在网站的反馈信息更好的改进网站,使无生命的网站变得富有人性化,更有活力与趣味。
4详细设计
4.1网站制作过程
4.1.1定义站点
站点制作时,第一步是对网站的定义。
用定义的站点来储存网站中的很多图片、文字、界面等。
方便对网站内容的管理。
单击“站点”-----“管理站点”----“新建”------“命名”即可完成。
如图2所示
图2
4.1.2.导航条的制作
在导航适当防置的位置插入一行表格、设置设和页面的宽度和高度。
然后输入导航条的链接。
分别为:
学院首页、本系概略、新闻动态、学习科研、组织机构、教学工作、图片展示、联系我们等。
如图3所示
图3
代码实现为:
<
tdwidth="
96"
>
ahref="
#"
spanclass="
STYLE13"
学院首页<
/span>
/a>
/td>
<
10"
||<
80"
本系概况.html"
本系概况
12"
图片展示.html"
图片展示<
class="
STYLE24"
联系我们<
4.1.3主页的制作
在使用的开发工具Dreamweaver中点击“文件”,然后单击“新建”,把新建的网页取一个名字为index.html[1]。
如图4所示
图4
4.1.4登陆系统的制作
首先插入表格为3行2列,两列分别输入文本“用户名”、“密码”;
然后设置宽度为212、高度为132;
设置背景颜色为#66FFFF,然后插入按钮在第三行再出现的对话框内输入“登陆”、“注册”按钮。
依照此方法,还设计了修改密码的页面。
如图5所示
图5
代码实现如下:
tablewidth="
212"
height="
132"
border="
0"
tr>
73"
40"
valign="
baseline"
divalign="
right"
用户名:
/div>
122"
formaction="
"
method="
post"
name="
form3"
id="
label>
inputname="
textfield2"
type="
text"
size="
16"
maxlength="
/>
/label>
/form>
/tr>
&
nbsp;
密&
码:
tdvalign="
form4"
textfield3"
tdheight="
44"
STYLE23"
登录<
td>
left"
注册.html"
target="
_blank"
注册<
/table>
4.1.5动态图片设计
具体步骤为:
首先在站点下新建一个文件夹命名为图片,将需要用到的图片储存到文件夹中,然后在适当位置选取图片。
如图6所示
图6
实现代码如下:
598"
100"
115"
90"
imgsrc="
图片/8.jpg"
width="
4.1.6滚动文字制作
首先在网站“设计”页面中,将光标移动到需要滚动的位置。
然后,单击“插入”菜单下的“web组件”选项,选择“动态效果”,在出现的下拉菜单中选择“字幕”。
最后单击“完成”,在弹出的对话框“文本”中输入文字。
如图7所示
图7
代码实现如下:
198"
50"
bordercolor="
#CBFCFA"
STYLE14"
STYLE15"
◇<
我系动态网站正式开通<
毕业生提交论文注意事项<
4.1.7CSS属性设计
(1)字体属性:
font主要有字体族科、字体的样式、字体的大小、字体变粗等几类属性。
[1]设计的属性如图8所示
图8
(2)文本属性:
Text、Letter大致运用了字符间距、文字修饰、文本排版、文本的缩进、行高等[1]。
设置的属性如图9所示:
图9
(3)色彩和背景属性:
color属性可以为元素指定一个相适应的色彩;
背景属性background能够控制元素的背景色彩。
如图10所示
图10
(4)边框属性:
border属性主要有上、下、左、右四种边框,此外还有无边框以及设计的样式。
如图11所示
图11
(5)列表属性:
type属性,包括符号类型、缩进外侧边框、加入空心圆、实心圆、罗马文字、英文字母等。
如图12所示
图12
CSS属性的代码实现:
divid="
Layer3"
800"
tralign="
center"
bgcolor="
#F7F7F7"
#Layer14{
position:
absolute;
left:
497px;
top:
175px;
width:
83px;
height:
29px;
z-index:
1;
}
.STYLE24{font-size:
12px}
/style>
/head>
body>
Layer1"
110"
4.1.8Flash文字特效
首先使用Flash的遮罩效果和补间动画制作出名为“商丘师范学院.fla”字样的flash的多媒体文件,下一步要在Dreamweaver中插入之前创做好的动画片段。
插入Flash的步骤为单击“插入”在下拉菜单中选择“媒体”再选择Flash(或者使用快捷键组合Ctrl+Alt+F),在出现的下一步步骤中选择制作好的媒体文件接下来点击“确定”便可插入。
最后,设计合适的大小使页面看起来更加简洁美观[5]。
图13
实现的代码为:
objectclassid="
clsid:
D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="
552"
title="
flash"
paramname="
movie"
value="
Scripts/商丘师院.fla"
quality"
high"
embedsrc="
quality="
pluginspage="
application/x-shockwave-flash"
/embed>
/object>
4.1.9图片的PS处理
用Photoshop的强大图片处理功能,将用到的图片进行美化加工,将图片进行色偏调整、色阶调整、制作边框、制作色彩等。
制作完成的图片储存于站点显得图片文件中。
4.1.10锚点链接的设置
为了使网站中的各个页面随意切换,使用了锚点连接设置。
以主页为例,首先选中“学院首页”,在属性一栏的链接中拖动到一个文件即可创建链接。
其他的页面方法也和这种设置方法类似。
4.2网站布局设计图
在Word中根据索要设计网页的大小,对页面进行初步的划分,每个页面的具体设计都依据布局的设置。
布局图示在站点下的布局文档中。
设计完成后如图14所示:
图14
结束语
经过一个多月的努力,我所编写的学校网站制作论文终于完成了。
心情有点激动也有点伤感。
因为这意味着大学生活即将结束,我们即将告别学生生涯。
有不舍有怀念。
四年时间稍纵即逝,这段论文写作为大学生活画上了一个圆满的句号,但我相信“结束学生生涯,学习还有很长的路要走,需要学习的还有很多,茫茫学海刚刚起航。
大学四年有过收获,也有过遗憾。
但这才是生活的真正意义!
只要脚踏实地,一步一步进行,最终肯定会完成一篇优秀的论文。
从论文开题时的束手无策,到论文的真正完成,心态也渐渐发生了变化,从论文的制作中学会了许多,也深化了许多。
虽然四年以来学到了不少的理论知识,但到实际应用时才知道自己是如此孤陋寡闻,知道自己在各方面都存在不足。
除了论文的不断完善,我也学会了自身的不断完善。
毕业论文是每个大学毕业生必不可少的一项作业,他锻炼了我们的耐心和细心,以及对专业的敏感度。
以前对作业的各种烦躁,在制作过程中也渐渐消磨殆尽,从焦虑不安到淡定如常。
只要努力就一定会有收获的。
在制作中,我运用了平时所学,经过不断修改,最终完成制作。
或许,这个网站不是那么华丽,也不是那么精深,但是它简单实用、便捷大方。
它凝聚了我的全部心血。
我将大学所学到的理论知识在设计中综合运用,知道了自己的优势与不足。
平时觉得学的太多太杂,此时竟有种书到用时方恨少的感觉。
终于,经过一次次的修正,完善,完成了我的论文。
最后,希望毕业论文成为学校的终点作业,却是踏入社会的起点作业。
希望我们都能记住这一次的深刻经历,在以后的每一次工作中都以好的心态对待,最终实现自己的目标!
参考文献
【1】詹斌编著Dreamweaver8图解教程【M】清华大学出版社
【2】杨格曾双明林祥光等编制Dreamweaver8全程自学手册(视频教程版)电子工业出版社
【3】雪茗斋电脑教育研究室编著Photoshop图像艺术效果100例人民邮电出版社
【4】吴涛FlashMX2004ActionScript动画设计北京科海电子出版社
【5】赵更生编著Flash动画制作培训讲座实录人民邮电出版社
【6】周建国编著Flashcs4开门与实战人民邮电出版社
致谢
四年的大学生活在此即将画上一个句号。
首先感谢我的指导老师乔丽老师给我的指导与帮助。
是她不厌其烦的给我们讲解、分析。
才能让我的论文逐步完善。
还要感谢我亲爱的室友们,在网站制作中遇到困难时,是她们热心的帮助我,克服我一个个的难题。
在心情不好时,是她们开导我、支持我。
和她们一起做网站,一起写文字。
终于我们如期完成了论文。
最后,还要感谢图书馆的老师,是他推荐我专业课的书籍,告诉我哪方面的书比较适合我的论文。
谢谢你们,帮助我顺利完成论文。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 学校 网站 设计 实现