论文《关于河南大学生网站的建设》文档格式.docx
- 文档编号:21925352
- 上传时间:2023-02-01
- 格式:DOCX
- 页数:24
- 大小:30.66KB
论文《关于河南大学生网站的建设》文档格式.docx
《论文《关于河南大学生网站的建设》文档格式.docx》由会员分享,可在线阅读,更多相关《论文《关于河南大学生网站的建设》文档格式.docx(24页珍藏版)》请在冰豆网上搜索。
本设计使用的是VB.NET编程,所以系统需要支持.NET技术。
从微软的官方网站可以下载到.NETFRAMEWORKSDK的软件包并安装,此程序组中包含有Tools、.NETFrameworkSDKOverview、DocumentationGuide、ReferenceDocumentation和SamplesGuide。
这些工具和文档中比较重要的是DocumentationGuide,使用它可以打开一个CHM格式文档,这样,如果在学习过程中遇到不能解决的问题我就可以在这个文档中寻找到相应的解决办法。
五、根据题意建立目录。
为方便起见我决定在网站根目录中开设images、common、temp、data三个子目录,images目录中放不同栏目的页面都要用到的公共图片,例如个人主页的标志、banner条、菜单、按钮等等;
common子目录中放css、js、asa、include等公共文件;
temp子目录放客户提供的各种文字图片等等原始资料;
data目录存放数据库文件(如:
access的*.mdb文件);
media子目录中放flash、avi、quicktime等多媒体文件。
这样统一管理起来很清晰明了,易于阅读。
第二章设计过程
要想使网页受欢迎首先就要使主页能既表现出网站的风格、内容,又美观、醒目,吸引浏览者的注意力。
因为主页是所有浏览者首先看到的地方,会给人以先入为主的印象。
一、设计网站标志
现在设计网页都讲究有自己独立的标志,这样才能使人印象深刻。
所以我特别为本站设计了LOGO。
图标的开发工具是CORELDRAW。
由于本网站是大学生的网站,所以标志一定要有校园气息;
另外要有中文和英文两种名称,这样比较正规。
根据以上两点我设计了一个以学生在校学习的最明显标志——书为主题的LOGO,象征大学生勤奋刻苦,勇于奋斗的精神;
也表现了当代大学生是有知识有文化的新一代国家栋梁。
二、设计版面布局(组织结构)
建立网页首先就是要考虑版面的大小问题,也就是如何显示的问题。
因为每个人的显示器的分辨率不同,所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。
当今我们最常见的浏览方式都是使用800*600以上分辨率的,考虑到兼容的问题本网站设计使用800*600分辨率。
另外版面的创意布局也是一个非常重要的问题。
本设计的版面布局是按照以下步骤进行设计的:
1.草案
新建页面没有任何表格、框架和约定俗成的东西,所以我在设计初使用纸和笔进行绘图,并使用Photoshop软件加以实现观看效果。
因为是创造阶段,所以并不讲究细腻工整,也不必考虑细节功能,只以粗陋的线条勾画出创意的轮廓。
直到最后选定一个满意的作为继续创作的脚本。
当然在制定草案的时候要把制定的内容分类定出来。
我设计的是河南大学生网娱乐板块的网页,所以内容当然是跟娱乐有关的了,我一共制定了三部分内容:
娱乐资讯(有关大学生关心的娱乐报道,新闻评述,最新信息);
休闲娱乐(时尚笑话,校园幽默,FLASH欣赏等);
音乐在线(制作音乐库,提供在线试听和下载);
星座物语(有关星座的话题,包括运势、爱情等大学生现下最流行话题)。
2.定案
定案在草案的基础上,将确定需要放置的功能模块安排到页面上。
这些功能模块主要包含网站标志,主菜单,搜索,友情链接,广告条,版权信息等。
为了突出重点、平衡谐调,留出最显眼,最突出的位置作为本站的标志、主菜单等的待定位置,然后在考虑次要模块的排放,将粗略布局精细化,具体化。
在布局过程中,我遵循的原则有:
●正常平衡---亦称"
匀称"
。
多指左右、上下对照形式,主要强调秩序,能达到安定诚实、信赖的效果。
●异常平衡---即非对照形式,但也要平衡和韵律,当然都是不均整的,此种布局能达到强调性、不安性、高注目性的效果。
●对比---所谓对比,不仅利用色彩、色调等技巧来表现,在内容上也可涉及古与今、新与旧、贫与富等对比。
●凝视---所谓凝视是利用页面中人物视线,使浏览者仿照跟随的心理,以达到注视页面的效果,一般多用明星凝视状。
●空白---空白有两种作用,一方面对其他网站表示突出卓越,另一方面也表示网页品位的优越感,这种表现方法对体显网页的格调十分有效。
●尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感,特别有效。
图片解说的内容,可以传达给浏览者的更多的心理因素。
●合理规划页面布局,尽量采用表格或框架技术,把屏幕区分为不同的块来安排内容,一般不要超过三块,主次要分明。
通常在网页的上部和左侧放置可以链接到其他网页的文字或图片作为目录,而在网页中间部分是要显示的主要内容。
●图文并茂,相得益彰,文字和图片具有一种相互补充的视觉关系,页面上文字太多,就显得沉闷,缺乏生气。
页面上图片太多,缺少文字,必然就会减少页面的信息容量。
因此,最理想的效果是文字与图片的密切配合,互为衬托,既能活跃页面,又使主页有丰富的内容。
3.使用CSS式样来美化布局
用CSS层式样来定义table、td、文字、连接等元素的属性,是非常理想的。
本站采用了CSS层式样(<
linkrel="
stylesheet"
href="
images/CSS.CSS"
type="
text/css"
>
),被定义的式样可以当作“类”一样可以使用了,下面是本版面的式样代码:
TD{FONT-SIZE:
11px;
color:
#000000;
font-family:
"
Arial"
"
Helvetica"
sans-serif"
}
P{FONT-SIZE:
LI{FONT-SIZE:
text-decoration:
none;
INPUT{FONT-SIZE:
A:
link{COLOR:
#006600;
TEXT-DECORATION:
none}
visited{TEXT-DECORATION:
#006600}
active{COLOR:
hover{COLOR:
#0099FF;
none
4.确定好浏览导航的设计
为了方便浏览者的浏览本板块浏览导航设计的较为简便,即在主页上的导航条分成四项,每一项指向与之相对应的一个板块内容。
而每一个分项我都设计了不同的导航,随时都可以跳转到浏览者想去的任何位置。
除了在网页的左边放置一个菜单条以外,我还用到了FLASH中制作下拉菜单的功能,是网页的动态效果更为明显。
所以进入我的网页中的浏览者无论何时,只要他们迷失在站点的浏览中,都可以通过简单的一次点击就能准确地知道目前所处的位置。
5.色彩搭配
色彩搭配在网站的设计中是非常重要的,有局部色彩和整体色彩,网页的色彩是树立网站形象的关键之一。
为了使网页的颜色和谐,给人舒适的感觉,网页的背景、文字、图标、边框、超链接,都应该制定相应的色彩。
河南大学生网的主站是以蓝色为主基调的,而作为它的分页,其中的一个版面,当然要和它的颜色搭配,所以我是以淡蓝色作为主页的主色调的。
当然作为自己设计的一个版面当然要有自己的风格特色,我的版面是属于娱乐性质的,要给人清新活泼的印象,所以在色彩的搭配上不能太单调,如果一直使用同一种色调难免会使人乏味。
不同的颜色会给浏览者不同的心理感受。
红色---是一种激奋的色彩。
刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。
它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
蓝色---是最具凉爽,清新,专业的色彩。
它和白色混合,能体现柔顺,淡雅,浪漫的气氛。
白色---具有洁白,明快,纯真,清洁的感受。
黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。
◆根据我所设计的页面内容,选择了以下几种颜色作为我不同内容板块的主色调。
♦娱乐资讯——紫红色,在红色与蓝色之间的颜色激情与浪漫并存体现娱乐圈丰富多彩的特点。
♦休闲娱乐——绿色,使人在这里真正得到放松,感到舒适。
♦音乐在线——蓝色,秉承娱乐地带主页的色彩特色,是本站的特色网页之一,继续将幽雅舒适的氛围带给浏览者。
♦星座物语——橙色,时尚线条时尚的颜色,突出大学生的喜好。
♦每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。
所以在我的每一个网页上都有明暗对比等差别。
三、生成网页
除了使用DREAMWEAVER实现网页的生成,我还使用手工生成即直接用记事本编辑HTML超文本语言。
在使用HTML标记语言时我发现了以下值得注意的问题:
脚本编写应该有一个脚本整体风格一致的概念,意思是一个月后和一个月前的你写的脚本风格保持一致,以及同一个工作组中不同的开发人员编写的脚本风格保持一致。
这样当我们毕业走了,这个网站还可以继续由别人维护,不用担心人员变更的问题。
1.使用HTML文件的通用模板:
<
html>
/style>
这里尤其要注意的是a:
linka:
visiteda:
hovera:
actived的排列顺序一定要严格照上面的样例代码,否则或多或少会出问题。
另外我们规定重定义的最先,伪类其次,自定义最后,便于自己和他人阅读!
为了保证不同浏览器上字号保持一致,字号我使用点数pt和像素px来定义,pt一般使用中文宋体的14pt和11pt,px一般使用中文宋体12px和14.7px这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px的字号比较合适。
在写<
table>
互相嵌套时,严格按照的规范,对于单独的一个<
来说,<
tr>
对齐,<
td>
缩进两个半角空格,<
中如果还有嵌套的表格,<
也缩进两个半角空格,如果<
中没有任何嵌套的表格,<
/td>
结束标记应该与<
处于同一行,不要换行。
比如要注意在源代码中不应有这样的代码:
<
imgsrc=“images/index_top1.gif”>
而应该是这样的:
这是因为浏览器认为换行相当于一个半角空格,以上不规范的写法相当于无意中增加一个半角空格。
属于同一个级别的<
一定是左首对齐的,另外不允许没有任何内容的空的单元格存在,高度大于等于12px的单元格应该在<
和<
之间写一个空格如果高度小于12px,则应该在<
之间插入一个1*1大小的透明的gif图片,这是因为某些浏览器认为空单元格非法而不会予以解释。
如果代码顺序较乱,则要进行重新整理!
2.Width和height的写法也有统一的规范,一般情况下只有一列的表格,width写在<
的标签内,只有一行的表格,height写在<
的标签内,多行多列的表格,width和height写在第一行或者第一列的<
标签内。
总之遵循一条原则:
不出现多于一个的控制同一个单元格大小的height和width,保证任何一个width和height都是有效的,也就是改动代码中任何一个width和height的数值,都应该在浏览器中看到变化。
3.在排布表格之前,一定要好好思考一个最佳的方案,表格的嵌套尽量控制在三层以内,并且应该尽量避免<
colspan>
rowspan>
两个标记,经验表明,这两个标记会带来许多麻烦。
4.一个网页要尽量避免用整个一张大表格,所有的内容都嵌套在这个大表格之内,因为浏览器在解释页面的元素时,是以表格为单位逐一显示,如果一张网页是嵌套在一个大表格之内,那么很可能造成的后果就是,当浏览者敲入网址,他要先面对一片空白很长时间,然后所有的网页内容同时出现。
如果必须这样做,请使用<
tbody>
标记,以便能够使这个大表格分块显示。
5.排版中经常会遇到需要进行首行缩进的处理,不要使用或者全角空格来达到效果,规范的做法是在样式表中定义p{text-indent:
2em;
}然后给每一段加上标记,注意,一般情况下,尽量不要省略<
/p>
结束标记。
6.原则上,我禁止用<
imgwidth=?
height=?
来人为干预图片显示的尺寸,而且<
img>
标签中不带上width和height两个属性,这是因为制作过程中,图片往往需要反复的修改,这样可以避免人为干预图片显示的尺寸,尽可能的发挥浏览器自身的功能;
但是这样的一个副作用是当网页还未加载图片时,不会留出图片的站位大小,可能会造成网页在加载过程中抖动(如果图片是插在一个固定大小的表格里的,不会有这个现象),尤其是当图片的尺寸较大时,这种现象会很明显,所以当预料到这种会明显导致网页抖动的情况会发生时,一定在最后给<
附上width和height属性。
7.为了最大程度的发挥浏览器自动排版的功能,在一段完整的文字中请尽量不要使用来人工干预分段。
8.所有的字号都应该尽量使用样式表来实现,减少页面中出现<
fontsize=?
标记的次数。
9.在脚本中要适当的加一些注解,便于阅读。
第三章用javascript实现网页特效
网页要做的五彩缤纷,各有特色。
就需要加入网页特效了。
JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。
使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。
从而可以开发客户端的应用程序等。
它是通过嵌入或调入在标准的HTML语言中实现的。
它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择.本网站就利用了javascript实现了本站的各种特效显示。
如娱乐资讯网页中的标题栏根据鼠标的移动而变色,并且当鼠标移动到指定连接上时出现文字的效果,就使用javascript实现的与表格嵌套相结合的网页特效。
以下是实现的程序:
divalign="
center"
onMouseOut="
this.style.backgroundColor='
'
"
onMouseOver=this.style.backgroundColor='
#ffffff'
pclass="
unnamed1"
ahref="
index.aspx"
onmouseover="
MM_setTextOfLayer('
Layer1'
'
欢迎回到\n娱乐地带!
)"
onmouseout="
娱乐地带<
/a>
/div>
第四章用ASP.NET实现网页与数据库的连接
一、用ASP.NET实现投票与反馈系统
在我设计的网站中有几个板块时应该与数据库相连的。
其一是学生投票与反馈系统。
有浏览者给我们的网站打分这已经是比较常见的交流形式了,除了投票以外还可以根据网友们的投票数统计出投票路率反馈给浏览者。
这是典型的与数据库相连的小系统,可以由ASP.NET很方便的做出。
其中投票程序代码实现如下:
%@importnamespace="
system.data.oledb"
%>
system.data"
HTML>
body>
center>
<
formid="
Form1"
method="
post"
runat="
server"
H3align="
fontsize="
-1"
您对我们的评价是什么?
/font>
/H3>
FONTface="
宋体"
&
nbsp;
/FONT>
asp:
RadioButtonListid="
candidate"
/>
p>
ButtonRunat="
Text="
投票"
OnClick="
vote_click"
id="
Button1"
看统计"
view_click"
Button2"
LabelRunat="
ID="
msg"
ForeColor="
red"
/form>
scriptlanguage="
vb"
dimprovider="
provider=Microsoft.jet.oledb.4.0"
dimdatabase="
datasource="
server.mapPath("
music.mdb"
)
subpage_load(senderasobject,easeventargs)
ifnotispostbackthen
dimconnasoledbConnection
dimcmdasoledbcommand
dimrdasoledbDataReader
dimSQLasstring
conn=newoledbConnection(provider&
;
&
database)
conn.open()
SQL="
select*fromvote"
cmd=newoledbCommand(SQL,conn)
rd=cmd.ExecuteReader()
whilerd.read()
candidate.items.add(rd.item("
投票内容"
))
endwhile
conn.close()
endif
endsub
subvote_click(senderasobject,easeventargs)
msg.text="
'
检查是否有选取某一个选择按钮
ifnotcandidate.selecteditemisnothingthen
dimselasstring=candidate.selecteditem.text
dimconnasoledbConnection,cmdasoledbcommand
dimrdasoledbDataReader,SQLasstring
dimnextTimeasinteger
database)
'
检查上次投票时间是否已经超过10分钟
dimIP=request.ServerVariables("
REMOTE_ADDR"
)
select*fromvoteRecordwhereIP='
IP&
orderbyvoteTimedesc"
cmd=newoledbCommand(SQL,conn)
ifrd.read()
nextTime=10-dateDiff("
n"
rd.item("
voteTime"
),now)
endif
rd.close()
ifnextTime<
=0then
表示没投过票或10分钟以内没有没有投票'
将票数加1
SQL="
updatevoteset得票数=得票数+1where投票内容='
sel&
cmd=newoledbCommand(SQL,conn)
cmd.executeNonQuery()
'
记录IP及投票时间
dimTm=format(now(),"
MM/dd/yyyyHH:
mm:
ss"
insertintovoteRecord(IP,voteTime)values('
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 关于河南大学生网站的建设 论文 关于 河南 大学生 网站 建设
![提示](https://static.bdocx.com/images/bang_tan.gif)