旅游网站的网页设计 网页设计,旅游网站

华东交通大学理工学院

课程设计报告书

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

题目网站首页

分院电信分院

专业班级

学号

学生姓名

指导教师程志平

2014年 1月 4日

目录

第一章绪论 (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、创建CSS 文件

创建一个css 文件。

第三章网页详细设计

先设置好页面布局

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

1、头部的和导航栏设计

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

如图3-1

图3-1

用如下HTML 代码实现

首页南昌简介风土人情吃在南昌路线选择自助行摄影摄像游记精选资源下载雁过留声

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(buttonjpg) 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(buttonjpg) 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

Html 代码如下

天气查询

南昌雷阵雨 20℃-31℃新建多云转阴 20℃-28℃安义阵雨转多云 25℃-32℃青山湖阵雨转阴 21℃-28℃进贤雷阵雨 26℃-30℃

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(icongif) no-repeat 0px 6px;padding:1px 0px 0px 10px;}

左边栏的下半部分

如图3-3

图3-3

今日推荐

八一广场滕王阁梅岭

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;}