网页设计,旅游网站.docxVIP

存档资料 成绩： 华东交通大学理工学院 课程设计报告书 所属课程名称 网页设计与制作课程设计 题 目 网站首页 分 院 电信分院 专业班级 学 号 学生姓名 指导教师 程志平 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 - 华东交通大学理工学院课程设计报告 第二章 网页整体设计 1、创建 HTML 首先打开 DW软件建立一个站点，我取名为未命名站点 2，如下图 2-1 图 2-1 将网站建好后把网页源代码， css 文件，图片等放在相应的目录下。如图 1-2. 图 2-2 2、创建 CSS 文件 创建一个 css 文件。 - 2 - 华东交通大学理工学院课程设计报告 第三章 网页详细设计 先设置好页面布局 接下来开始进行局部的设计： 1、头部的和导航栏设计 头部：头部为一张网页的图片和导航栏组成。 如图 3-1 图 3-1 用如下 HTML 代码实现： div id=globallink ul lia href=# 首页 /a/li lia href=# 南昌简介 /a/li lia href=# 风土人情 /a/li lia href=# 吃在南昌 /a/li lia href=# 路线选择 /a/li lia href=# 自助行 /a/li lia href=# 摄影摄像 /a/li lia href=# 游记精选 /a/li lia href=# 资源下载 /a/li lia href=# 雁过留声 /a/li /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 - 3 - 华东交通大学理工学院课程设计报告 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:0p