网页设计与制作课程设计

一、 设计目的

通过一个月的网页设计学习,设计一个简单的网站来检测自己的学习成果,看看哪些东西还没有掌握,需要进一步的去巩固!网页的设计区别于实体化的一些东西,其多为多媒体的存在,意味着它可以容纳更多的信息以及更多的展示形式,网页设计则要求设计者具备一些特殊技能以营造特定浏览情景。网页设计可以在短时间内增强我们的洞察力以更好察觉使用者的兴趣点,只有这样才能满足他们的需要。

二、 设计要求

   运用所学的知识设计一个简单的网站,类型不限

三、 需求分析

   网页设计是将技术性与艺术性融为一体的创造性活动。网页设计是以功能行为第一指导原则,以技术因素为主要考虑对象,以完成或实现必要的功能为目标。近几年随着网络的发展而逐渐受到人们的重视,它本身已网络为载体,把各种信息以快捷、方便的方式传达给受众,在这种标准的要求下,逐步产生了审美需求和功能需求等。人们对美的追求是不断深入的,网页设计同样如此。如何使受众能更好的和有效率地接受网页上的信息,这就需要从审美方面入手。网页设计的审美需求是对视觉设计美学的一种继承和延伸,两者的表现形式和目的都有一定的相似性。

网页设计的主题为我的篮球网,它是我根据自己的兴趣做出来的网站,内容非常简单,但却富有深意!它融合了当今大多数青少年朋友的兴趣爱好,可以说是一个大众化的网站!

四、 制作过程的内容及结果

1、   网站目录

打开dreamweaver cs4,建立站点,放到F盘里,在目录下有images(包括图片、flash)、scripts、shipin、web(建立的网站)文件夹。如下图示:

2、   我的篮球网(首页)

主要代码:

      <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>我的篮球网</title>

<style type="text/css">

<!--

#apDiv1 {

    position:absolute;

    left:44px;

    top:316px;

    width:376px;

    height:29px;

    z-index:1;

}

#apDiv2 {

    position:absolute;

    left:439px;

    top:405px;

    width:337px;

    height:41px;

    z-index:2;

}

#apDiv3 {

    position:absolute;

    left:791px;

    top:340px;

    width:100px;

    height:120px;

    z-index:3;

}

a:link {

    text-decoration: none;

}

a:visited {

    text-decoration: none;

}

a:hover {

    text-decoration: none;

}

a:active {

    text-decoration: none;

}

-->

</style>

</head>

<a href="index1.html"><body background="../images/NBA.gif">

<div id="apDiv1"><font  color="#0033FF" face="方正舒体" size="+3">我的篮球世界与你共分享</font></div>

<div id="apDiv2"><font color="#99FF99"" face="华文行楷" size=+3>篮球之旅从这里起航...</font></div>

<div id="apDiv3">

  <map name="Map" id="Map">

   

    <area shape="rect" coords="150,82,159,83" href="#" />

  </map>

<img src="../images/gif002.gif" width="98" height="127" / border="0"></div>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><font  color="#00CCFF" face="方正舒体" size="+3">欢迎进入我的篮球网</font></p>

<p>&nbsp;  </p>

<p>&nbsp; </p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</body>

</html>

图示:

3、   主页

主要代码:

<body background="../images/22691_20090202150243_HnbOR.jpg">

<div id="apDiv3"><font face="华文彩云" color="#FFFF00" size="+4">无限精彩,我的篮球</font></div>

<div id="apDiv4"><img src="../images/d119ad345b95b480d0a2d3cf.gif" width="120" height="171" />

</div>

<div id="apDiv5"><img src="file:///E|/我的篮球网/动态/gif004.gif" width="49" height="48" />

</div>

<div id="apDiv6"><img src="../images/gif004.gif" width="49" height="48" /></div>

<div id="apDiv7">

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="935" height="400">

    <param name="movie" value="../images/39.swf" />

    <param name="quality" value="high" />

    <param name="wmode" value="transparent" />

    <embed src="../images/39.swf" width="935" height="400" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent" ></embed>

  </object>

</div>

<div id="apDiv8"><strong><font size="+3" face="华文琥珀" color="#0066FF">棒棒篮球</font></strong></div>

<div id="apDiv9"><strong><font color="#FF6633" face="方正少儿简体" size="+3">魅力四射,哇哇</font></div>

<h1 align="center"><font color="#FF0000" face="华文隶书">主页</font></h1>

<hr>

<p><a href="index.html"><font color="#00FF00" size="+2">首页</font></a> <a href="index2.html"><font color="#00FF00" size="+2">篮球简介</font></a>   <a href="index3.html"><font color="#00FF00" size="+2">偶像姚明</font></a>  <a href="index4.html"><font color="#00FF00" size="+2">精彩瞬间 </font></a> <a href="index5.html"><font color="#00FF00" size="+2">视屏天地</font></a>

</p>

</body>

图示:

4、   篮球简介

主要代码:

<body background="../images/2505-110QG10I351.jpg">

<h1 align="center"><font color="#FFFF00" face="宋体"> 篮球简介</font>

</h1>

<p>&nbsp;&nbsp;&nbsp;&nbsp;篮球运动是1891年由美国马萨诸塞州斯普林菲尔德市基督教青年会训练学校体育教师詹姆士·奈史密斯博士发明的。当时,由于在寒冷的冬季,人们缺乏室内进行体育活动的球类竞赛项目,奈史密斯便从工人和儿童用球向“桃子筐”投准的游戏中得到启发,设计将两只桃篮分别钉在健身房内两端看台的栏杆上,桃篮口水平向上,距地面10英尺,以足球为比赛工具向篮内投掷,入篮得1分,按得分多少决定胜负。因为这项游戏最初使用的是桃篮和球,遂取名为篮球。1893年铁质球篮取代了桃篮并挂上了线网。1895年篮筐开始固定在4×6英尺的篮板上并逐渐深入场内,到1913年,由于每次投篮命中后都需要将球从篮筐内捞出太麻烦,于是人们将篮网底部剪开,形成了近似现代的篮板和球篮。</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;最初的篮球比赛规则很简单,对于场地大小、参加人数多少、比赛时间长短都没有统一的规定。1892年奈史密斯制定了第一部13条的原始规则,目的是使篮球游戏在公平对等的条件下进行,同时不允许粗野动作的发生。1915年美国制定了全国统一的篮球竞赛规则,并翻译成多种文字,向全世界发行。1932年,刚诞生的国际篮联以美国大学使用的篮球规则为基础,制定了第一份世界统一的竞赛规则。随着篮球运动的发展,场地设备得到改进和完善,规则也不断地增删和变化,现行规则共有61条和57个手势图。<br />

  <br />

 &nbsp;&nbsp;&nbsp;&nbsp; 篮球运动诞生后,传播得很快。1892年传入加拿大和墨西哥,1893年传入法国,1895年传入中国,1901年传入日本和波斯(今天的伊朗),1905年传入俄国。1904年美国青年会男子篮球队在第3届奥运会上进行了表演,此后,篮球运动逐步在全世界开展起来。1932年6月18日在瑞士日内瓦成立了国际业余篮球联合会(简称国际篮联)。1936年第11届奥运会上,男子篮球被列为正式比赛项目。1950年和1953年分别举行了第一届世界男篮和女篮锦标赛。1948年起,在许多国家的少年儿童中开始出现小篮球活动,受到国际篮联的重视,于1968年成立了“国际小篮球委员会”。1976年第21届奥运会又增加了女子篮球比赛。<br />

  <br />

  &nbsp;&nbsp;&nbsp;&nbsp;1936年至1948年间,由于规则的不断修改,促进了篮球攻防战术的变化运用,提高了攻防的速度。进入50年代,世界各强队普遍重视和发展高度,成为这一时期的显著特点。在1952年第15届奥运会篮球比赛中,出现了身高2米以上的高大队员。他们在高空争夺中占有明显的优势,掌握了比赛的主动权。但那时的高大队员灵活性差,技术单调,篮下死打硬攻,因而战术呆板,使比赛速度受到影响。针对上述情况,国际篮联对规则进行了修改,扩大限制区,增加了30秒(后改为24秒)和干扰球规则。<br />

  <br />

 &nbsp;&nbsp;&nbsp;&nbsp; 20世纪60年代各国在重视发展高度的同时,加强了高大队员技术和灵活性的训练。有些强队,如巴西队,尽管身高相对矮些,但他们以短跑运动员的速度和娴熟的技术,充分发挥快速、灵活的特长,在1963年第四届世界男篮锦标赛上夺取冠军,震动了世界篮坛。60年代中期,美国迪安·史密斯提出攻守平衡的理论,使世界各国开始重视进攻和防守的均衡发展,特别是防守有了新的发展和突破。防守不再是消极的,在防守的选位上改变了过去“以人为主”、“以区域为主”的观念,而是“以球为主”,使防守具有集体性、积极性、攻击性和破坏性。<br />

  <br />

  &nbsp;&nbsp;&nbsp;&nbsp;20世纪70年代世界强队的身高增长到惊人的程度,参加第八届世界男篮锦标赛的队员,身高2米以上的多达48人。前苏联队平均身高2.02米,前南斯拉夫队平均身高1.99米,美国队平均身高1.98米。这些高大队员既有高度,又有速度,能里能外,技术全面,充分体现了“大个队员小个化”的特点。快攻成为各队进攻中首先采用的锐利武器。高空优势体现在篮下的争夺,篮板球的争抢在篮圈水平面之上,投篮技术中出现了空中换手投篮,各种单、双手扣篮。高超的技巧表现在传球、运球动作熟练,运用自如。投篮命中率高达50%以上,比分迅速提高,在第八届世界男篮锦标赛全部59场比赛中,有30场比赛获胜的一方得分超过100分。<br />

  <br />

 &nbsp;&nbsp;&nbsp;&nbsp; 在历届奥运会上,美国队和(前)苏联队一直保持着较高的水</p>

<p>&nbsp; </p>

</body>

图示:

5、   偶像姚明

主要代码:

<div id="apDiv2"><img src="../images/gif003.gif" width="121" height="94" /></div>

<div id="apDiv3"><a href="index1.html"><font color="#0066FF" size="+1">主页</font></a><a href="index2.html"><font color="#0066FF" size="+1"> 篮球简介</font></a><a href="index4.html"><font color="#0066FF" size="+1"> 精彩瞬间</font></a> <a href="index5.html"><font color="#0066FF" size="+1">视频天地</font></a></div>

<h1 align="justify"><font color="#FF0000" face="华文行楷">姚明--中国篮球的骄傲</font></h1>

<p><img src="../images/01300000362281131447269771853.jpg" width="500" height="388" / align="right">

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">中文名: 姚明 </font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">外文名: Yao Ming </font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">别名: 小巨人 移动长城</font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">国籍: 中国 </font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">民族: 汉族 </font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">出生地: 上海 </font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">出生日期: 1980年9月12日</font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">身高: 7英尺6英寸(2.29米)</font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">体重: 140.6kg </font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">运动项目: 篮球 </font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">所属运动队: 中国国家篮球队 NBA火箭队</font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">专业特点: 20英尺外精确跳投</font></p>

<p>&nbsp;&nbsp;&nbsp;<font color="#00FF00" size="+2">主要奖项: NBA全明星赛(7次)

ESPN全球最有潜力运动员奖(2000)

劳伦斯世界最佳新秀奖(2003)

中国篮球杰出贡献奖 </font></p>

图示:

 

6、   精彩瞬间

主要代码:

<h1 align="center"><em><font color="#FFFF00" face="黑体">精彩瞬间</font></em></h1>

<p>&nbsp;</p>

<p><marquee behavior="scroll" direction="right"><a href="../images/N.jpg" width="200" height="165".html"><img src="../images/N.jpg" width="200" height="165" /></a><a href="../images/B.jpg" width="200" height="165".html"><img src="../images/B.jpg" width="200" height="165" /></a><a href="../images/L.jpg" width="200" height="165".html"><img src="../images/L.jpg" width="200" height="165" /></a><a href="../images/K.jpg" width="200" height="165".html"><img src="../images/K.jpg" width="200" height="165" /></a><a href="../images/F.jpg" width="200" height="165".html"><img src="../images/F.jpg" width="200" height="165" /></a><a href="../images/j.jpg" width="200" height="165".html"><img src="../images/J.jpg" width="200" height="165" /></a><a href="../images/H.jpg" width="200" height="165".html"><img src="../images/H.jpg" width="200" height="165" /></a><a href="../images/I.jpg" width="200" height="165".html"><img src="../images/I.jpg" width="200" height="165" /></a><a href="../images/M.jpg" width="200" height="165".html"><img src="../images/M.jpg" width="200" height="165" /></a><a href="../images/pic1910.jpg" width="200" height="165".html"><img src="../images/pic1910.jpg" width="200" height="165" /></a>

</marquee></p>

<p>&nbsp;</p>

<hr  />

<p>&nbsp;</p>

<p><marquee behavior="scroll" direction="left"><a href="../images/P.jpg" width="200" height="165".html"><img src="../images/P.jpg" width="200" height="165" /></a><a href="../images/X.jpg" width="200" height="165".html"><img src="../images/X.jpg" width="200" height="165" /></a><a href="../images/W.jpg" width="200" height="165".html"><img src="../images/W.jpg" width="200" height="165" /></a><a href="../images/V.jpg" width="200" height="165".html"><img src="../images/V.jpg" width="200" height="165" /></a><a href="../images/U.jpg" width="200" height="165".html"><img src="../images/U.jpg" width="200" height="165" /></a><a href="../images/T.jpg" width="200" height="165".html"><img src="../images/T.jpg" width="200" height="165" /></a><a href="../images/Q.jpg" width="200" height="165".html"><img src="../images/Q.jpg" width="200" height="165" /></a><a href="../images/pic1910.jpg" width="200" height="165".html"><img src="../images/pic1910.jpg" width="200" height="165" /></a><a href="../images/O.jpg" width="200" height="165".html"><img src="../images/O.jpg" width="200" height="165" /></a><a href="../images/images/3_20100807095934122fh.jpg" width="200" height="165".html"><img src="../images/3_20100807095934122fh.jpg" width="200" height="165" /></a></marquee></p>

图示:

7、   视频天地

主要代码:

<body background="../images/3694895_131951042447_2.jpg">

<div id="apDiv1"><a href="index1.html"><font color="#FFFF00">主页</font></a></div>

<div id="apDiv2"><a href="index2.html"><font color="#FFFF00">篮球简介</font></a></div>

<div id="apDiv3"><a href="index3.html"><font color="#FFFF00">偶像姚明</font></a></div>

<div id="apDiv4"><a href="index4.html"><font color="#FFFF00">精彩瞬间</font></a></div>

<h1 align="center"><font color="#FF0066" face="仿宋"><strong>魅力展现</strong></font></h1>

<p align="center">

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="512" height="288" id="FLVPlayer">

    <param name="movie" value="FLVPlayer_Progressive.swf" />

    <param name="quality" value="high" />

    <param name="wmode" value="opaque" />

    <param name="scale" value="noscale" />

    <param name="salign" value="lt" />

    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=../shipin/2010%EF%BC%8D2011.&amp;autoPlay=false&amp;autoRewind=false" />

    <param name="swfversion" value="8,0,0,0" />

    <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->

    <param name="expressinstall" value="../Scripts/expressInstall.swf" />

    <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->

    <!--[if !IE]>-->

    <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="512" height="288">

      <!--<![endif]-->

      <param name="quality" value="high" />

      <param name="wmode" value="opaque" />

      <param name="scale" value="noscale" />

      <param name="salign" value="lt" />

      <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=../shipin/2010%EF%BC%8D2011.&amp;autoPlay=false&amp;autoRewind=false" />

      <param name="swfversion" value="8,0,0,0" />

      <param name="expressinstall" value="../Scripts/expressInstall.swf" />

      <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->

     

      <!--[if !IE]>-->

    </object>

    <!--<![endif]-->

  </object>

</p>

<p align="center">

 

</p>

<h1 align="center"><strong><font color="#00FF00" face="仿宋">帅气科比</font></strong></h1>

<p align="center">

  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="512" height="288" id="FLVPlayer1">

    <param name="movie" value="FLVPlayer_Progressive.swf" />

    <param name="quality" value="high" />

    <param name="wmode" value="opaque" />

    <param name="scale" value="noscale" />

    <param name="salign" value="lt" />

    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=../shipin/%E7%A7%91%E6%AF%94%E4%B8%8B%E5%9C%BA&amp;autoPlay=false&amp;autoRewind=false" />

    <param name="swfversion" value="8,0,0,0" />

    <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->

    <param name="expressinstall" value="Scripts/expressInstall.swf" />

    <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->

    <!--[if !IE]>-->

    <object type="application/x-shockwave-flash" data="FLVPlayer_Progressive.swf" width="512" height="288">

      <!--<![endif]-->

      <param name="quality" value="high" />

      <param name="wmode" value="opaque" />

      <param name="scale" value="noscale" />

      <param name="salign" value="lt" />

      <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=../shipin/%E7%A7%91%E6%AF%94%E4%B8%8B%E5%9C%BA&amp;autoPlay=false&amp;autoRewind=false" />

      <param name="swfversion" value="8,0,0,0" />

      <param name="expressinstall" value="Scripts/expressInstall.swf" />

      <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->

     

      <!--[if !IE]>-->

    </object>

    <!--<![endif]-->

  </object>

</p>

<script type="text/javascript">

<!--

swfobject.registerObject("FLVPlayer1");

//-->

</script>

</body>

图示:

五、 设计总结

通过这次网页课程的设计,激发了学习兴趣,调动学习的自觉性,提高了自己动脑、动手,动口的能力,运用网络资源,结合教材及老师的指导,通过自身的实践,创作出积聚大众风格的篮球网页。总体来说,整个小学期的学习过程,我学会了很多知识。

在此次网页设计中,我充分利用了这次设计的机会,全心全意投入到网页世界,去不断的学习、不断的探索;同时去不断的充实、不断的完善自我,在网络的天空下逐渐的美化自己的人生!

做好页面,并不是一件容易的事,它包括主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好,页面过于简单,创新意识薄弱,这是我需要提高的地方。需要学的地方还有很多,需要有耐心、坚持,不断的学习,综合运用多种知识,才能设计出好的web页面。

总体来说,通过这次的网页课程设计,有收获也有遗憾,不足的地方还很多,但我想,我已经迈入了网页设计的大门,只要我再认真努力的去学习,去提高,凭借我对网页设计的热情和执着,我将来设计出的网页会更加专业,更完善!

相关推荐