网页设计,旅游网站

1、.存档资料成绩： 华东交通大学理工学院课 程 设 计 报 告 书所属课程名称 网页设计与制作课程设计题 目 首页分 院 电 信 分 院 专业班级 学号 学生 指导教师 程志平2014年 1月4日 . v.目录第一章绪论11、设计的目12、的主题13、规划1第二章网页整体设计21、创建HTML22、创建CSS文件2第三章网页详细设计31、头部的和导航栏设计32、布局页面左边栏43、布局页面中间64、布局页面右边85、布局页面下部11第四章课程设计心得131、充分发挥动手能力132、在设计过程中不断提高网页设计水平133、不足之处13第五章参考文献14. v.第一章 绪论1、设计的目本学期通过对网

2、页设计与制作的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。比如PS，背景图片，文字，超，布局，框架，多媒体等等。 通过这次设计，进一步的提高了我的设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了设计的一些方法和步骤，了解了的基本结构，熟悉了规和标准。 2、的主题主题：某企业首页3、规划我设计网页的布局，整体上我借鉴了一些公企业，我才用了其中的一些布局，分块。而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超，图片等等，这样就形成了整个网页的布局

3、设. v.第二章 网页整体设计1、创建HTML首先打开DW软件建立一个站点，我取名为未命名站点2，如下图2-1图2-1将建好后把网页源代码，css文件，图片等放在相应的目录下。如图1-2.图2-22、创建CSS文件创建一个css文件。. v.第三章 网页详细设计先设置好页面布局接下来开始进行局部的设计：1、头部的和导航栏设计头部：头部为一网页的图片和导航栏组成。如图3-1图3-1用如下HTML代码实现：首页简介风土人情吃在路线选择自助行摄影摄像游记精选资源下载雁过留声css样式为*globallinkmargin:0px; padding:0px;*globallink ullist-styl

4、e:none;padding:0px; margin:0px;*globallink lifloat:left;text-align:center;width:78px;*globallink adisplay:block;padding:9px 6px 11px 6px;background:url(button1.jpg) no-repeat;margin:0px;*globallink a:link, *globallink a:visitedcolor:*004a87;text-decoration:underline;*globallink a:hovercolor:*FFFFFF;

5、text-decoration:underline;background:url(button1_bg.jpg) no-repeat;*globallinkmargin:0px; padding:0px;*globallink ullist-style:none;padding:0px; margin:0px;*globallink lifloat:left;text-align:center;width:78px;*globallink adisplay:block;padding:9px 6px 11px 6px;background:url(button1.jpg) no-repeat;

6、margin:0px;*globallink a:link, *globallink a:visitedcolor:*004a87;text-decoration:underline;*globallink a:hovercolor:*FFFFFF;text-decoration:underline;background:url(button1_bg.jpg) no-repeat;2、布局页面左边栏左边栏的上半部分如图3-2：图3-2Html代码如下：天气查询   雷阵雨 20-31新建   多云转阴 20-28安义 &nb

7、sp; 阵雨转多云 25-32青山湖   阵雨转阴 21-28进贤   雷阵雨 26-30css代码如下：*leftfloat:left;width:200px;background-color:*FFFFFF;margin:0px;padding:0px 0px 5px 0px;color:*d8ecff;*left divbackground-color:*5ea6eb;margin:0px 5px 0px 5px;*weatherbackground:url(weather.jpg) no-repeat -5px 0p

8、x;margin:0px 5px 0px 5px;background-color:*5ea6eb;div*left *weather h3font-size:12px;padding:24px 0px 0px 74px;color:*FFFFFF;background:none;margin:0px;div*weather ulmargin:8px 5px 0px 5px;padding:10px 0px 8px 5px;list-style:none;*weather ul libackground:url(icon1.gif) no-repeat 0px 6px;padding:1px

9、0px 0px 10px;左边栏的下半部分如图3-3图3-3Html代码如下：今日推荐八一广场滕王阁梅岭Css代码如下：*todaypadding:0px 0px 10px 0px;*today ullist-style:none;margin:-5px 0px 0px 0px;padding:0px;*today ul litext-align:center;*today ul li imgborder:1px solid *FFFFFF;margin:8px 0px 0px 0px;*today ul li a:link, *today ul li a:visitedcolor:*d8ec

10、ff;text-decoration:none;*today ul li a:hovercolor:*FFFF00;text-decoration:underline;3、布局页面中间中间上半部如图3-4图3-4Html代码如下：中间中部如图3-5图3-5Html代码如下：美景寻踪Css样式如下：*beautymargin:15px 0px 0px 0px;padding:0px;*beauty h3background:url(picture_h1.gif) no-repeat;*beauty ul, *route ullist-style:none;margin:8px 1px 0px 1

11、px;padding:0px;*beauty ul lifloat:left;width:97px;text-align:center;*beauty ul li imgborder:1px solid *4ab0ff;中间下部如图3-6图3-6Html代码如下：线路精选八一起义纪念馆滕王阁八一广场八大山人纪念馆国际展览中心摩天轮赣江赣江市民公园昌北高校游昌东高校游Css样式如下*routeclear:both; margin:0px;padding:5px 0px 15px 0px;*route h3background:url(route_h1.gif) no-repeat;*route

12、ul lipadding:3px 0px 0px 30px;background:url(icon1.gif) no-repeat 20px 7px;*route ul li a:link, *route ul li a:visitedcolor:*004e8a;text-decoration:none;*route ul li a:hovercolor:*000000;text-decoration:underline;4、布局页面右边右边上半部如图3-7图3-7Html代码如下：风光Css样式如下：*mapmargin-top:5px;*map ptext-align:center;mar

13、gin:0px;padding:2px 0px 5px 0px;*map p imgborder:1px solid *FFFFFF;右边中部如图3-8图3-8Html代码如下：小吃推荐17号抓饭大盘鸡五一夜市水果Css样式如下：*foodpadding-top:10px;*food ul, *life ullist-style:none;padding:0px 0px 10px 0px;margin:10px 10px 0px 10px;*food ul li, *life ul libackground:url(icon1.gif) no-repeat 3px 9px;padding:3p

14、x 0px 3px 12px;border-bottom:1px dashed *EEEEEE;*food ul li a:link, *food ul li a:visited, *life ul li a:link, *life ul li a:visitedcolor:*d8ecff;text-decoration:none;*food ul li a:hover, *life ul li a:hovercolor:*000000;text-decoration:none;右边下部如图3-9图3-9Html代码如下：宾馆酒店0791大饭店海德大饭店银都大饭店鸿福大饭店友好大酒店棉麻宾馆电

15、信宾馆Css样式如下：*lifepadding-top:10px;padding-bottom:5px;margin-bottom:5px;5、布局页面下部如图3-10图3-10Html代码如下：艾萨克 ©所有 demodemo.Css样式如下：*footerbackground-color:*FFFFFF;margin:1px 0px 0px 0px;clear:both;position:relative;padding:1px 0px 1px 0px;*footer ptext-align:center;padding:0px;margin:4px 5px 4px 5px;ba

16、ckground-color:*5ea6eb;*footer p acolor:*FFFFFF;text-decoration:none;最后，进行细微的页面调整，将整体部局做得更细更，整个页面如下图3-8：图3-11. v.第四章 课程设计心得1、充分发挥动手能力本学期的网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，可以激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合 教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，虽然过程比较艰辛，但在 INTENET领域中，有了一个展示自我的空间，

17、我觉得很开心、很有成就感。作为网页设计的初学者，我对网页设计非常感兴趣，一心想设计出一个美观、实用、容丰富的个人网页。本学期的教改方案由以前学 生单纯接受知识变为主动参与教学活动。在这样的压力和动力下，通过自己动手、动脑，通过网络资源，老师的指导，在不断发现问题和解决问题的过程中学到了很 多知识，也增强了我的创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我都全身心投入，使我真正学到了网页设计的知识。2、在设计过程中不断提高网页设计水平在本次网页设计中，我不仅学到了很多关于网页设计方面的知识，也从中学会了关于网络、编程等方面的知识。我从最初开始运用FrontPage设计

18、 网页，到后来运用Dreamweaver、Flash、Fireworks等网软件设计网页，完善网页。在这个过程中，我通过自学教材、上网查询，学习了 Dreamweaver、Flash、Fireworks等网页软件的应用，学会了管理、维护自己的站点，以及一些简单动画、控件的制作等等。在设计过程 中也出现了很多的问题，但通过看书，上网查询，请教老师等方式，不断的学习、解决、提高，设计出的网页不论是外观还是容，都在不断的进步、改善。可以说 在自己动手，不断实践的过程中，网页设计水平得到了很大的提高。3、不足之处 由于对于网页设计软件的强大功能运用得还不够。在网页设计过程中，由于没有网页制作代码的知识，所以在设计时 也遇到了很多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提高设计水平，想有个理想的网页，必须学会代码的运用，我将在以后的学习过程中 不断加强这方面的学习，希望老师能简单介绍一下代码，让我也对它有个初步的认识，以后再加强学习也才会有所提高。 总体来说，通过今次的对网页设计的学习，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学