当前位置:文档之家› 旅游网站的网页设计 网页设计,旅游网站

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

华东交通大学理工学院

课 程 设 计 报 告 书

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

题 目 网站首页

分 院 电 信 分 院

专业班级

学 号

学生姓名

指导教师 程志平

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

相关主题