网设计旅游网站

时间：2020-10-22 16:20:46　来源：勤学考试网本文已影响人

存档资料成绩：　

华东交通大学理工学院

课程设计报告书

所属课程名称网页设计和制作课程设计

题目　　网站首页　　　　　　

分院　　电信分院　　

专业班级

学　　号　　　

学生姓名　　　　

指导老师程志平　

20XX年 1月 4日

TOC \o "1-3" \h \z \u 第一章绪论 1

1、网站设计目 1

2、网站专题 1

3、网站计划 1

第二章网页整体设计 2

1、创建HTML 2

2、创建CSS文件 2

第三章网页具体设计 3

1、头部和导航栏设计 3

2、布局页面——左边栏 4

3、布局页面——中间 6

4、布局页面——右边 8

5、布局页面——下部 11

第四章课程设计心得 13

1、充足发挥舞手能力 13

2、在设计过程中不停提升网页设计水平 13

3、不足之处 13

第五章参考文件 14

第一章绪论

1、网站设计目

本学期经过对《网页设计和制作》学习，让我了解到了怎样让设计网页，和部分基础网页设计知识和对Dreamweaver软件基础应用，学习到了利用部分基础网页设计工具和标准来制作和美观网页。比如PS，背景图片，文字，超链接，布局，框架，多媒体等等。

　经过这次设计，深入提升了我网站设计能力和动手能力，愈加全方面巩固了我在课堂上学到知识，掌握了网站设计部分方法和步骤，了解了网站基础结构，熟悉了规范和标准。

2、网站专题

专题：某企业网站首页

3、网站计划

我设计网页布局，整体上我借鉴了部分公企业网站，我才用了其中部分布局，分块。而我关键采取了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这么就形成了整个网页布局设

第二章网页整体设计

1、创建HTML

首先打开DW软件建立一个站点，我取名为未命名站点2，以下图2-1

图2-1

将网站建好后把网页源代码，css文件，图片等放在对应目录下。图1-2.

图2-2

2、创建CSS文件

创建一个css文件。

第三章网页具体设计

先设置好页面布局

接下来开始进行局部设计：

1、头部和导航栏设计

头部：头部为一张网页图片和导航栏组成。

图3-1

用以下HTML代码实现：

<ul>

</ul>

<br>

</div>

css样式为

#globallink{margin:0px; padding:0px;}

#globallink ul{list-style:none;padding:0px; margin:0px;}

#globallink li{float:left;text-align:center;width:78px;}

#globallink a{display:block;padding:9px 6px 11px 6px;background:url(button1.jpg) no-repeat;margin:0px;}

#globallink a:link, #globallink a:visited{color:#004a87;text-decoration:underline;}

#globallink a:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg.jpg) no-repeat;}#globallink{margin:0px; padding:0px;}

#globallink ul{list-style:none;padding:0px; margin:0px;}

#globallink li{float:left;text-align:center;width:78px;}

#globallink a{display:block;padding:9px 6px 11px 6px;background:url(button1.jpg) no-repeat;margin:0px;}

#globallink a:link, #globallink a:visited{color:#004a87;text-decoration:underline;}

#globallink a:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg.jpg) no-repeat;}

2、布局页面——左边栏

左边栏上半部分

图3-2：

图3-2 SHAPE

Html代码以下：

<ul>

<li>安义   阵雨转多云 25℃-32℃</li>

</ul>

<br>

</div>

css代码以下：

#left{float:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0px 0px 5px 0px;color:#d8ecff;}

#left div{background-color:#5ea6eb;margin:0px 5px 0px 5px;}

#weather{background:url(weather.jpg) no-repeat -5px 0px;margin:0px 5px 0px 5px;background-color:#5ea6eb;}

div#left #weather h3{font-size:12px;padding:24px 0px 0px 74px;color:#FFFFFF;background:none;margin:0px;}

div#weather ul{margin:8px 5px 0px 5px;padding:10px 0px 8px 5px;list-style:none;}

#weather ul li{background:url(icon1.gif) no-repeat 0px 6px;padding:1px 0px 0px 10px;}

左边栏下半部分

图3-3

Html代码以下：

<ul>

</ul>

<br>

</div>

Css代码以下：

#today{padding:0px 0px 10px 0px;}

#today ul{list-style:none;margin:-5px 0px 0px 0px;padding:0px;}

#today ul li{text-align:center;}

#today ul li img{border:1px solid #FFFFFF;margin:8px 0px 0px 0px;}

#today ul li a:link, #today ul li a:visited{color:#d8ecff;text-decoration:none;}

#today ul li a:hover{color:#FFFF00;text-decoration:underline;}

3、布局页面——中间

中间上半部

图3-4

Html代码以下：

中间中部

图3-5

Html代码以下：

<ul>

</ul>

<br>

</div>

Css样式以下：

#beauty{margin:15px 0px 0px 0px;padding:0px;}

#beauty h3{background:url(picture_h1.gif) no-repeat;}

#beauty ul, #route ul{list-style:none;margin:8px 1px 0px 1px;padding:0px;}

#beauty ul li{float:left;width:97px;text-align:center;}

#beauty ul li img{border:1px solid #4ab0ff;}

中间下部

图3-6

Html代码以下：

<ul>

<li><a href="#">八一起义纪念馆——滕王阁——八一广场</a></li>

<li><a href="#">八大山人纪念馆——南昌国际展览中心——摩天轮——赣江——赣江市民公园</a></li>

<li><a href="#">昌北高校游</a></li>

<li><a href="#">昌东高校游</a></li>

</ul>

<br>

</div>

Css样式以下

#route{clear:both; margin:0px;padding:5px 0px 15px 0px;}

#route h3{background:url(route_h1.gif) no-repeat;}

#route ul li{padding:3px 0px 0px 30px;background:url(icon1.gif) no-repeat 20px 7px;}

#route ul li a:link, #route ul li a:visited{color:#004e8a;text-decoration:none;}

#route ul li a:hover{color:#000000;text-decoration:underline;}

4、布局页面——右边

右边上半部

图3-7

Html代码以下：

</div>

Css样式以下：

#map{margin-top:5px;}

#map p{text-align:center;margin:0px;padding:2px 0px 5px 0px;}

#map p img{border:1px solid #FFFFFF;}

右边中部

图3-8

Html代码以下：

<ul>

</ul>

<br>

Css样式以下：

#food{padding-top:10px;}

#food ul, #life ul{list-style:none; padding:0px 0px 10px 0px;margin:10px 10px 0px 10px;}

#food ul li, #life ul li{background:url(icon1.gif) no-repeat 3px 9px;padding:3px 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:visited{color:#d8ecff;text-decoration:none;}

#food ul li a:hover, #life ul li a:hover{color:#000000;text-decoration:none;}

右边下部

图3-9

Html代码以下：

<ul>

<li><a href="#">海德大饭店</a></li>

<li><a href="#">银全部大饭店</a></li>

<li><a href="#">鸿福大饭店</a></li>

<li><a href="#">友好大酒店</a></li>

</ul>

<br>

</div>

Css样式以下：

#life{padding-top:10px;padding-bottom:5px;margin-bottom:5px;}

5、布局页面——下部

图3-10

Html代码以下：

</div>

Css样式以下：

#footer{background-color:#FFFFFF;margin:1px 0px 0px 0px;clear:both;position:relative;padding:1px 0px 1px 0px;}

#footer p{text-align:center;padding:0px;margin:4px 5px 4px 5px;background-color:#5ea6eb;}

#footer p a{color:#FFFFFF;text-decoration:none;}

最终，进行细微页面调整，将整体部局做得更细更，整个页面以下图3-8：

图3-11

第四章课程设计心得

?1、充足发挥舞手能力

本学期网业设计课程，开展了动态思维训练教学活动，对于我们学生来说，能够激发学习爱好，调动学习自觉性，自己动脑、动手，动口，利用网络资源，结合教材及老师指导，经过本身实践，创作出积聚个人风格、个性个人网页。总体来说，整个学期学习过程，我学会了很多知识，即使过程比较艰辛，但在 INTENET领域中，有了一个展示自我空间，我认为很快乐、很有成就感。

作为网页设计初学者，我对网页设计很感爱好，一心想设计出一个美观、实用、内容丰富个人网页。本学期教改方案由以前学生单纯接收知识变为主动参与教学活动。在这么压力和动力下，经过自己动手、动脑，经过网络资源，老师指导，在不停发觉问题和处理问题过程中学到了很多知识，也增强了我创作能力和动手能力，在网页设计过程中，从构思到设计、完善、维护，整个过程我全部全身心投入，使我真正学到了网页设计知识。?

2、在设计过程中不停提升网页设计水平

在此次网页设计中，我不仅学到了很多相关网页设计方面知识，也从中学会了相关网络、编程等方面知识。我从最初开始利用FrontPage设计网页，到以后利用Dreamweaver、Flash、Fireworks等网软件设计网页，完善网页。在这个过程中，我经过自学教材、上网查询，学习了 Dreamweaver、Flash、Fireworks等网页软件应用，学会了管理、维护自己站点，和部分简单动画、控件制作等等。在设计过程中也出现了很多问题，但经过看书，上网查询，请教老师等方法，不停学习、处理、提升，设计出网页不管是外观还是内容，全部在不停进步、改善。能够说在自己动手，不停实践过程中，网页设计水平得到了很大提升。?

?3、不足之处

? 因为对于网页设计软件强大功效利用得还不够。在网页设计过程中，因为没有网页制作代码知识，所以在设计时也碰到了很多麻烦，有时插入一个特效脚本也是很麻烦。在网页制作过程中，想提升设计水平，想有个理想网页，必需学会代码利用，我将在以后学习过程中不停加强这方面学习，期望老师能简单介绍一下代码，让我也对它有个初步认识，以后再加强学习也才会有所提升。

? 总体来说，经过今次对网页设计学习，有收获也有遗憾、不足地方，但我想，我已经迈入了网页设计大门，只要我再认真努力去学习，去提升，凭借我对网页设计热情和执着，我未来设计出网页会愈加专业，更完善。也期望老师在以后日子里多指导。

第五章参考文件

[1] 陈益才网页DIV+CSS布局和动画美化全程实例清华大学出版社，20XX年9月

[2] 刘增杰，刘海松精通DIV+CSS 3网页布局和样式清华大学出版社，20XX年1月

[3] 新视角文化行 DIV+CSS 3.0网页布局实战从入门到精通人民邮电出版社20XX年4 月

[4] 王大远 Div+CSS 3.0网页布局案例精粹电子工业出版社22月

[5] 朱印宏 DIV+CSS网页样式和布局实录北京期望电子出版社 20XX年1月

[6] 白春红、吴艳网页设计和制作实例教程武汉大学出版社 20XX年12月

致谢

相关热词搜索：旅游 旅游网站 设计 网设计旅游网站