《网页制作19309.doc》由会员分享，可在线阅读，更多相关《网页制作19309.doc（10页珍藏版）》请在金锄头文库上搜索。
1、成绩： 网页制作课程期末考查设计报告题 目：新化旅游指南网站的设计与实现系 部： 数学与应用数学系 专 业： 信息与计算科学 姓 名： 李庚辉 学 号： 09415202 班 级： 09级信计二班 学 期： 2011年下学期 新化旅游指南网站的设计与实现一、绪论：随着科学技术的发展，计算机的普及，上网已经成为21世纪公民的一项日常活动。而网页是整个网络实现资源共享的主要表现形式，是网络中一个重要元素，网页制作将越来越受到人们的青睐。什么是网站？怎么样设计一个网站？用什么软件来实现一个网站？网站设计与实现有哪些技术？自从学习了网页制作课程之后，对这些问题都有了一定的了解。课程学习结束后，自主设计
2、网站，有助于加强理解网页制作的流程与技术。本次网页设计的目的是通过具体实现来经历Drezmweaver开发的全过程，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的设计方案，理解并初步掌握使用Drezmweaver开发工具进行网页开发的方法，了解网页设计制作的过程。通过具体设计达到掌握网页设计与制作的技巧。二、网站主题： 新化旅游指南三、网站需求描述： 随着经济的发展，人民生活水平不断提高，越来越多的人们喜欢旅游。在湖南娄底，旅游景点最多的地方就是新化县。新化有哪些旅游景点？各旅游景点门票是多少？各旅游景点路线怎么走等等，这一系列问题是许多人所不知道的，但又想了解的。本次网站设计，给出
3、了大部分新化旅游景点的信息，有助于游客及时，全面了解新化旅游，为想要去新化旅游的游客提供帮助。四：网站结构规划：1、页面规划与设计整个网站页面规划如下：新化旅游指南子网页子网页梅山龙宫概述梅山龙宫简介地理位置景点介绍洞内导航地图梅山龙宫大熊山紫鹊界油溪河站内导航旅游攻略旅游咨询旅游景点招商引资友情链接旅行社大熊山概述地理位置特色景区介绍紫鹊界简介历史文化紫鹊界百科旅游景点梯田文化旅游指南旅游指南旅游资讯2、网页文件夹规划：将整个网页所以文件放置在websitDesign文件夹下，在websitDesign文件夹下设置5个子文件夹，分别为photo Photo1 Photo2 Photo3 Ph
4、oto4 wenjia。其中photo用来存放主页图片、Photo1用来存放子页（梅山龙宫）图片Photo2用来存放子页（大熊山国家公园图片）、Photo3用来存放子页（紫鹊界）图片、Photo4用来存放子页（油溪河）图片，其它所以文件放在wenjia文件夹中。 整个网页文件夹规划如下图所示：websitDesignPhoto1Photo2Photo3Photo4photowenjian3、网页布局规划：首页主体通过布局模式布局、部分采用DIV+CSS布局，主要布局如下表所示： 背景图片，突出显示主题，采用DIV+CSS布局梅山龙宫紫鹊界大熊山油溪河站内导航介绍新化相关信息新化旅游攻略特效文字
5、：DIV+CSS新化旅游招商引资新化旅游咨询友情链接图片：FLASH动画，娱乐一下DIV+CSS新化旅行社介绍五：网页的实现步骤：1、网站构思首先对网站整体进行构思，包括网页的主题、网页连接的设计等等。2、文件夹设计将整个网站文件夹设计好，便于存放所需的资料。3、资料收集在网上搜集相关信息（图片和文字信息），放在相应的文件夹中。4、网页整体布局将整个网页的整体布局描绘出来5、添加元素在布局好的网页相应位置添加网页元素，比如，添加背景图片，添加文字、添加表格，插入DIV，设置连接等等。6、美化网页修改网页局部背景颜色，或添加背景图片，修改文字颜色、增添特效等等，使网页尽量美观，使浏览者赏心悦目。
6、六：总结从这次课程设计中让我体会到网页设计表面上看似是一件比较容易的事情，但其实不然，从网站内容的选取，网页布局，元素添加，到网页美化等等每一项都是一个十分细腻的工作。从这次课程设计实践中，可以看出自己对网页设计知识掌握的不足，对网页整体布局能力不强，在以后的学习中，应多进行具体实现，从而提高自己网页设计的能力。七：主要源代码：1、图片无缝循环滚动： !-var speed=10;var tab=document.getElementById(demo);var tab1=document.getElementById(demo1);var tab2=document.getElementBy
7、Id(demo2);tab2.innerHTML=tab1.innerHTML;function Marquee()if(tab2.offsetWidth-tab.scrollLeft 2、任意位置显示时钟代码var pic1=eval(document.+_all+pic1+_style); 12)dn=PMhours=hours-12if(hours=0)hours=12if(minutes=9)minutes=0+minutesif(seconds=9)seconds=0+seconds/change font size here to your desiremyclock=Current Time:+hours+:+minutes+:+seconds+ +dn+if(document.layers)document.layers.liveclock.document.write(myclock)document.layers.liveclock.document.close()else if(document.all)liveclock.innerHTML=myclocksetTimeout(show5(),1000)/-
