黄山小妖是我老婆
范文一：网页设计,旅游网站
华东交通大学理工学院
课 程 设 计 报 告 书
所属课程名称 网页设计与制作课程设计
题 目 网站首页
分 院 电 信 分 院
专业班级
学 号
学生姓名
指导教师 程志平
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
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(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
Html 代码如下：
