《网站设计与网页制造》设计说明书
我的家乡网页制作过程
一、 网站开发目的和功能简介
    随着网络技术的发展与互联网的普及，网站建设与网页制作越来越成为各行各业以及个人宣传自己的有利工具，、网站在当今时代被越来越多的人用来宣传，通过网站的制作可以让老师、同学以及朋友更好的了解自己以及别人想要知道的事情，我现在做的是关于我的家乡，为别人提供了一个更深入了解自己的一个平台，本网站主要功能是让更多的人去了解我了解我的家乡
二、 网站的设计
2.1 网站的名称：我的家乡
2.2 网站栏目划分
    根据本网站的内容和功能划分为：我的心语、导航链接、各地方的简介、体现家乡的图片、
版权声明等。
（1）我的心语——对我们宿舍的六个简介，提示对照网站的主题体现我们的家乡；
（2）导航链接——链接到各自设置的网页各自的家乡；（3）各地方的简介——简单介绍了我们各自的家乡，了解了家乡的知识文化；（4）图片——列举了每个地方的代表图片，用另一种方式展现出不同的风采；（5）版权声明——声明了网站的建设者
2.3网站导航应用于所有页面提高网站的操作友好性。
2.4网站的风格与彩选择：页面以浅绿和浅黄为主。浅绿体现了活力，字体实用浅棕和淡淡的灰给人一种清析、稳重的感觉。所有页面调统一，布局相似。
2.5网站目录结构设计合理：不同素材采用不同学文件夹分开存放。如图片放在image文件夹、flash放在flash文件夹内、完成作业放在以自己名字命名的文件夹内等
三、 聊城首页的制作过程
3.1首页版图：
首页、导航链接、内容、个网页链接
                    3-1
整个页面分为四部分，第一部分是以一个flash文件显示动态的图片，主要是网站的突出显示；第二部分是导航栏；第三部分是详细内容，其中网页中的文字排得整齐紧凑，这样能给人一种舒服的感觉。在网页适当的地方加一些图片，每张画面再加一些不同的文字说明，使得网页显得更加的精美；第四部分是各网页链接。采用这种布局，主要是给浏览者一种简单、清晰、明了的感觉，使网站整齐划一。
具体的布局显示如下所示：
                              3-2
3.2制作过程：：本网页制作分为三个部分：顶部是用flash制作的页头。中部又分为左右两个部分，左边为家乡简单的介绍和链接，制作的动态图片使用时间轴让图片自动播放，还有
从顶部滑下的图片自动循环播放；右边为家乡的各景点的见解。我还为网页设置了背景图片，在最后利用spry选项卡添加的图片。
四、聊城首页制作过程
4.1新建一个页面，命名为聊城首页（index）
4.2在页面属性的外观中设置四边边距为0，文本颜设为：#9900CC，大小设为18像素；在链接中设置下划线样式为：有下划线；链接颜为：#0000FF。
4.3（1）首页（index）制作
利用样式定义各个部分的高宽，将./image/195911NM-10.gif设为背景图片。页头图片为水城明珠.jpg设置flash动画为左右橘.swf代码如下：
页头图片的设计代码：（图如上3-2）
<div id="Layer3" ><span class="STYLE3"><a href="liaocheng.html"><img src="../image/201042717165.jpg" name="
Image1" width="186" height="174" /></a></span></div>
<a name="dingbu" id="dingbu"></a>
<table width="967" height="817" border="1" align="center" bordercolor="#000000">
  <tr>
    <td height="190" colspan="2" valign="top" bgcolor="#FFFFFF"><img src="../image/水城明珠.jpg" width="956" height="202" /></td>
  </tr>
Flash动画设置代码如下：
<div id="Layer2">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','download.macromedia/pub/shockwave/cabs/fl
ash/swflash.cab#version=7,0,19,0','width','957','height','210','src','../FLASH/左右橘','quality','high','pluginspage','www.macromedia/go/getflashplayer','wmode','transparent','movie','../FLASH/左右橘' ); //end AC code
  </script>
  <noscript>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="957" height="210">
    <param name="movie" value="../FLASH/左右橘.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <embed src="../FLASH/左右橘.swf" width="957" height="210" quality="high" pluginspa
ge="www.macromedia/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
  </object>
  </noscript>
</div>
（2）景阳冈（jyg）页设计
此网页运用了一些代码实现了文字的滚动代码：<td width="213" <td width="213" height="363" bgcolor="#FFFFFF"><marquee direction="left" width="310" height="620" scrollamount="1" scrolldelay="1" onmouseover="stop()" onmouseout="start()">
            <p><span class="STYLE21">景阳冈其址在阳谷城东18公里处，沙冈顶部正中，建有一座民族形式的庙宇，俗称“武松庙”，据传始建于明代中期,后被毁。现存古庙为1958年修建。庙前方有一幢刻有“景阳冈”三个大字的石碑，系我国当代著名书法家舒同所题。庙东二
、三百米处，有一刻有“武松打虎处”的墨玉石碑。 1973年以来，经省考古队多次试掘，认定景阳冈为“龙山文化”遗址国家首批AAA级景区，水浒旅游线上重要景点，武松打虎人人皆知，武松打虎的地方不是人人都去过景阳冈景区总占地面积33.3公顷。景区内沙丘起伏，莽草丛生，林荫蔽日，主要景点：已有200余年历史的山神庙庙的左前方立有原中共山东省委书记舒同题写的“景阳冈”石碑，右前方立有著名书法家杨萱庭书写的高3米的“虎”字碑；南宋时期所立“武松打虎处”石碑；赵朴初所书写门匾的“武松庙”；由徐悲鸿的夫人、书法家廖静文题名的六角单檐的虎啸亭；由著名画家刘继卣创作的“武松打虎”浮雕石像；有传为武松打死的那只老虎的化身——“天下第一虎”石，三碗不过冈酒店……</span><br />
          </p>
</marquee>
页头图片为聊城.jpg自己免费制作网站设置flash动画穿越星空.swf、烟花绽放.swf代码如下：
<tr>
    <td height="186" colspan="3" valign="top"><img src="../image/聊城.jpg" width="1016" he
ight="224" /></td>
  </tr>
Flash文件代码：
<div id="apDiv1">
  <script type="text/javascript">
AC_FL_RunContent( 'codebase','download.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','991','height','217','src','../FLASH/穿越星空','quality','high','pluginspage','www.adobe/shockwave/i?P1_Prod_Version=ShockwaveFlash','wmode','transparent','movie','../FLASH/穿越星空' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" co
debase="download.macromedia/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="991" height="217">
    <param name="movie" value="../FLASH/穿越星空.swf" />
    <param name="quality" value="high" />

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。