网页设计-旅游网站

存档资料成绩：华东交通大学理工学院课程设计报告书所属课程名称网页设计与制作课程设计题目网站首页分院电信分院专业班级学号学生姓名指导教师程志平2014年1月4日华东交通大学理工学院课程设计报告目录第一章绪论..........................................................11、网站设计的目................................................12、网站的主题.................................................13、网站规划...................................................1第二章网页整体设计..................................................21、创建HTML...................................................22、创建CSS文件................................................2第三章网页详细设计..................................................31、头部的和导航栏设计..........................................32、布局页面——左边栏..........................................43、布局页面——中间............................................64、布局页面——右边............................................85、布局页面——下部...........................................11第四章课程设计心得.................................................131、充分发挥动手能力...........................................132、在设计过程中不断提高网页设计水平...........................133、不足之处..................................................13第五章参考文献.....................................................14华东交通大学理工学院课程设计报告-1-第一章绪论1、网站设计的目本学期通过对《网页设计与制作》的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。比如PS，背景图片，文字，超链接，布局，框架，多媒体等等。通过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。2、网站的主题主题：某企业网站首页3、网站规划我设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设华东交通大学理工学院课程设计报告-2-第二章网页整体设计1、创建HTML首先打开DW软件建立一个站点，我取名为未命名站点2，如下图2-1图2-1将网站建好后把网页源代码，css文件，图片等放在相应的目录下。如图1-2.图2-22、创建CSS文件创建一个css文件。华东交通大学理工学院课程设计报告-3-第三章网页详细设计先设置好页面布局接下来开始进行局部的设计：1、头部的和导航栏设计头部：头部为一张网页的图片和导航栏组成。如图3-1图3-1用如下HTML代码实现：divid=globallinkulliahref=#首页/a/liliahref=#南昌简介/a/liliahref=#风土人情/a/liliahref=#吃在南昌/a/liliahref=#路线选择/a/liliahref=#自助行/a/liliahref=#摄影摄像/a/liliahref=#游记精选/a/liliahref=#资源下载/a/liliahref=#雁过留声/a/li/ulbr/divcss样式为#globallink{margin:0px;padding:0px;}#globallinkul{list-style:none;padding:0px;margin:0px;}#globallinkli{float:left;text-align:center;width:78px;}#globallinka{display:block;padding:9px6px11px华东交通大学理工学院课程设计报告第4页共16页6px;background:url(button1.jpg)no-repeat;margin:0px;}#globallinka:link,#globallinka:visited{color:#004a87;text-decoration:underline;}#globallinka:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg.jpg)no-repeat;}#globallink{margin:0px;padding:0px;}#globallinkul{list-style:none;padding:0px;margin:0px;}#globallinkli{float:left;text-align:center;width:78px;}#globallinka{display:block;padding:9px6px11px6px;background:url(button1.jpg)no-repeat;margin:0px;}#globallinka:link,#globallinka:visited{color:#004a87;text-decoration:underline;}#globallinka:hover{color:#FFFFFF;text-decoration:underline;background:url(button1_bg.jpg)no-repeat;}2、布局页面——左边栏左边栏的上半部分如图3-2：图3-2Html代码如下：divid=leftdivid=weatherh3span天气查询/span/h3ulli南昌   雷阵雨20℃-31℃/lili新建   多云转阴20℃-28℃/lili安义   阵雨转多云25℃-32℃/lili青山湖   阵雨转阴21℃-28℃/lili进贤   雷阵雨26℃-30℃/li华东交通大学理工学院课程设计报告第5页共16页/ulbr/divcss代码如下：#left{float:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0px0px5px0px;color:#d8ecff;}#leftdiv{background-color:#5ea6eb;margin:0px5px0px5px;}#weather{background:url(weather.jpg)no-repeat-5px0px;margin:0px5px0px5px;background-color:#5ea6eb;}div#left#weatherh3{font-size:12px;padding:24px0px0px74px;color:#FFFFFF;background:none;margin:0px;}div#weatherul{margin:8px5px0px5px;padding:10px0px8px5px;list-style:none;}#weatherulli{background:url(icon1.gif)no-repeat0px6px;padding:1px0px0px10px;}左边栏的下半部分如图3-3图3-3华东交通大学理工学院课程设计报告第6页共16页Html代码如下：divid=todayh3span今日推荐/span/h3ulliahref=#imgsrc=guangchang.png/a/liliahref=#八一广场/a/liliahref=#imgsrc=tengwangg.png/a/liliahref=#滕王阁/a/liliahref=#imgsrc=1.png/a/liliahref=#梅岭/a/li/ulbr/divCss代码如下：#today{padding:0px0px10px0px;}#todayul{list-style:none;margin:-5px0px0px0px;padding:0px;}#todayulli{text-align:center;}#todayulliimg{border:1pxsolid#FFFFFF;margin:8px0px0px0px;}#todayullia:link,#todayullia:visited{color:#d8ecff;text-decoration:none;}#todayullia:hover{color:#FFFF00;text-decoration:underline;}3、布局页面——中间中间上半部如图3-4图3-4华东交通大学理工学院课程设计报告第7页共16页Html代码如下：divid=ghostahref=#title=英雄城imgsrc=zhong.pngborder=0/a/div中间中部如图3-5图3-5Html代码如下：divid=beautyh3span美景寻踪/span/h3ulliahref=#imgsrc=2.1.pngheight=120/a/liliahref=#imgsrc=2.2.png/a/liliahref=#imgsrc=2.2.png/a/liliahref=#imgsrc=2.3.png/a/li/ulbr/divCss样式如下：#beauty{margin:15px0px0px0px;padding:0px;}#beautyh3{background:url(picture_h1.gif)no-repeat;}#beautyul,#routeul{list-style:none;margin:8px1px0px1px;padding:0px;}#beautyulli{float:left;width:97px;text-align:center;}#beautyulliimg{border:1pxsolid#4ab0ff;}中间下部如图3-6华东交通大学理工