大一上学期,学院组织了全院(包括研究生在内)的一次网页设计大赛。参赛的一支队伍一般是4个人,而我和另外一个男生组成了一支队伍。当时也是有种初生牛犊不怕虎的感觉,觉得自己可以。当然啦,事实证明确实可以。当时还有两支大一的队伍都是一个人一支队,他们是从初高中就开始学习网页的,最后也是他们两支队伍各占一、二名。我们是第三名。对于这个成绩,本人是很满意的。毕竟我自己初高中不是搞这一方面的,仅仅是大学上了半个学期专业课SSD1,外加做的时候不会的自己百度或者找队友帮忙。
说了这么多,也没有讲到自己的网页本身。不到一个月的时间,两个人,打造出纯手工72KB全彩高清自适应完整生动简洁极速的小网站。 在内容上有些不充实或者缺失等问题,这原因呢,就是当时实在想不出可以再放些什么有关的东西上去了,所以导致有些页面是整一版都是图片配文字来填充。答辩的时候,也看到其他同学的作品展示。给我印象最深刻的就是其中一个作品中有个网页是一个3D视角的模仿电影院的,具体怎么描述出来我也不是很会。我就暂且描述一下它的功能吧,大家将就着看功能有这样的:
- 一进到那个页面,是一个电影院放映室,正中间是放映幕,旁边是椅子。
- 随着鼠标的移动,视角也会随着移动。
- 好像是可以点击椅子的,点击椅子的话就相当于你坐在这个椅子上看电影了,你的位置就不会变,但是视角还是可以模仿你左右看的。
放映幕播放一个电影,可以通过点击放映幕实现播放的暂停和开始。
当时看了觉得好神奇啊。当然啊,人家是使用了网上的模板做出来的。先撇开这个的技术问题,我的水平也不知道这是怎么实现的。当时他们的主题就是为我们学院做一个院网,他们说这是一个我们院的在线电影院。个人认为,这个东西很强词夺理啊,学院网站应该用不到这些东西吧。
一进入首页,就是一个用javascript写的动画,因为我不是负责写这个的,所以关于这个,我也不能说什么。往下浏览就是我负责写的图标、链接、配字啦。我大概写了一部分的时候,队友告诉我有个叫CSS的东西。在CSS中,一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合每个人的爱好。(以上来自百度百科)
下面就是我们在主页的CSS样式表。运用样式表能减少很多重复的代码。
div#index{
background-color:#0041D8;
}
object#index-flash{
min-width:100%;
}
div#wapper{
margin-top:-20px;
padding-top:40px;
}
div#title-sub1{
margin:80px;
margin-top:40px;
margin-bottom:40px;
}
div#title-sub1 h1{
width:40%;
border-left: 10px solid #22a1c4;
padding: 30px 30px 20px 30px;
background: #f6f7f9;
}
div#body-sub1{
position:relative;
float:left;
width:40%;
margin-left:5%;
}
div.info{
height:120px;
}
@media screen and (min-width: 1200px) {
div.info{
height:180px;
}
}
@media screen and (min-width: 1500px) {
div.info{
height:200px;
}
}
div.info img{
position:relative;
float:left;
width:30%;
margin-right:5%;
}
div.text{
position:relative;
float:left;
width:65%;
border-top:5px solid #00C3FF;
margin-top:10px;
padding-top:10px;
line-height:140%;
letter-spacing:1px;
}
div.text a{
display:block;
padding-bottom:5px;
}
div#body-sub2 img{
position:relative;
float:left;
max-width:50%;
margin-left:3%;
margin-top:5%;
}
div.claerfloat{
clear:both;
}
div#footer{
clear:both;
}
比如上面的代码,有div#title-sub1 h1,意思就是定义html中的凡是title-sub1 h1的,宽度都占屏幕的40%等。在html文件中引用css文件的时候就是这样:<link rel="stylesheet" type="text/css" href="css/index.css"/>
以下是部分index.html的代码。我觉得刚接触写代码的,必须要注意!!
代码的良好风格很重要啊啊!! 因为写网页的标签是成对的,一旦没有把成对标签对齐的话,当系统报错少了一个标签,找错会找的崩溃的。亲身经历。可能以下给的代码里面有错误示范,大家不要学。
<div id="wapper">
<div id="title-sub1">
<h1>学风大比拼</h1>
<br>
<hr align="left" color="#FCD76A" width="75%">
</div>
<div id="body-sub1">
<div id="info1" class="info">
<a href="introduction.html"><img src="images/index/boy2.png" alt=""></a>
<div id="text1" class="text">
<a href="introduction.html">活动简介</a>
<p>学风大比拼是我院为响应学校学风建设而进行的活动,目的在于激发同学们对生活、学业的积极性。</p>
</div>
</div>
<div id="info2" class="info">
<a href="environment.html"><img src="images/index/girl1.png" alt=""></a>
<div id="text2" class="text">
<a href="environment.html">学术环境</a>
<p>中南大学学子在这里拥有与众不同的有利环境,从生活环境到学习环境,无不充满着美丽与希望。</p>
</div>
</div>
<div id="info3" class="info">
<a href="development.html"><img src="images/index/boy1.png" alt=""></a>
<div id="text3" class="text">
<a href="development.html">建设进展</a>
<p>各班积极建设班级的方式各有侧重点,他们建设班级的方式也体现了各个班的班级文化各有千秋。</p>
</div>
</div>
</div>
<div id="body-sub2">
<img src="images/index/styleofstudy.jpg" alt="">
</div>
<div class="claerfloat"></div>
</div>
写到这里呢,就暂且告一段落吧,刚刚收到通知,今早没交高数作业的童鞋要今晚10点补交。。。。噩梦