《网页课程设计与报告》由会员分享，可在线阅读，更多相关《网页课程设计与报告（15页珍藏版）》请在金锄头文库上搜索。
1、存档资料 成绩： 华东交通大学理工学院课 程 设 计 报 告 书所属课程名称 网页设计与制作课程设计 题 目 网站首页 分 院 电 信 分 院 专业班级 信息管理与信息系统1班 学号 201002104501XX 学生姓名 何XX 指导教师 程志平 2012年 12月 24日 华东交通大学理工学院课程设计报告目录第一章 绪论11、网站设计的目12、网站的主题13、网站规划1第二章 网页整体设计21、创建HTML22、创建CSS文件3第三章 网页详细设计41、头部的和导航栏设计42、布局页面侧边栏73、页面布局主体部分94、页面布局脚部的设计11第四章 课程设计心得121、充分发挥动手能力122
2、、在设计过程中不断提高网页设计水平123、不足之处12第五章 参考文献13第 3 页 共 15 页第一章 绪论 1、网站设计的目 本学期通过对网页设计与制作的学习，让我了解到了如何让设计网页，以及一些基础的网页设计的知识和对Dreamweaver软件的基础应用，学习到了运用一些基本的网页设计工具和原则来制作和美观网页。比如PS，背景图片，文字，超链接，布局，框架，多媒体等等。 通过这次设计，进一步的提高了我的网站设计能力和动手能力，更加全面的巩固了我在课堂上学到的知识，掌握了网站设计的一些方法和步骤，了解了网站的基本结构，熟悉了规范和标准。 2、网站的主题主题：某企业网站首页 3、网站规划 我
3、设计网页的布局，整体上我借鉴了一些公企业网站，我才用了其中的一些布局，分块。而我主要采用了布局模式，div+css来设计，背景图片，然后再插入超链接，图片等等，这样就形成了整个网页的布局设第二章 网页整体设计1、创建HTML首先打开DW软件建立一个站点，我取名为homework，如下图2-1图2-1站点建好后，还需要在产点里创建一些文件夹，用于存放东西。将CSS放在CSS文件夹里，图片放在images里，js存放java脚本。如图2-2图2-2然后利用所学的知识，开始进行大体的页面布局。布局的方式使用CSS+DIV进行如下图2-3：源代码：此处显示 id header 的内容此处显示 id n
4、av 的内容此处显示 id main 的内容此处显示 id side 的内容此处显示 id footer 的内容图2-32、创建CSS文件创建一个外联的层叠样式表，将CSS代码写如下：/*body*/#container width:900px; margin:0 auto;/*header*/#header height:70px; background:#CCFFCC; margin-bottom:8px;#nav height:30px; background:#CCFFCC; margin-bottom:8px; /*main*/#maincontent margin-bottom:8
5、px;#main float:left; width:664px; height:500px; background:#FFFF99;#side float:right; width:228px; height:500px; background:#FFCC99;/*footer*/#footer height:70px; background:#CCFFCC;第三章 网页详细设计1、头部的和导航栏设计头部：分为两部分，一个是logo（3-1）靠左侧显示，一个是搜索（3-2）靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。另外还有很多种实现方法，比如logo用h1
6、标签，搜索用span，或者把logo做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。如果要在logo加上链接的话，那么就不能用背景图片的方法了。 产品搜索图3-1 图3-2用如下代码实现：搜索产品#search float:right; height:24px; margin-top:30px; color:#444;.inp_srh width:140px; height:17px; padding-left:20px; background:url(./images/srh_bg.gif) 0 0 no-repeat; border:1px solid #c
7、bcbcb;.btn_srh width:58px; height:23px; background:url(./images/btn_srh.gif) 0 0 no-repeat; border:none; cursor:pointer; text-indent:-999em;#search * vertical-align:middle;inp_srh的宽度和高度并不是实际效果图中的宽高，是因为默认情况下文本框带有内边距造成的。另外就是padding的值也会算到总宽度上的；btn_srh就是应用背景图像来实现的，说明一点这里的border的值为none指的是无边框，cursor定义鼠标样式
8、为手形， text-indent:-999em这个属性它的作用相当于word中的首行缩进，这里设置成-999，意思是向左侧缩进-999em，这样就看不到文字，所以它的作用是将按钮上的文字隐藏。导航分为一级导航和二级导航，所以我需要在nav下再插入nav_main和nav_son两个块元素。先设置nav的高度及背景图片样式。#nav height:66px; background:url(./images/nav_bg.gif) 0 0 repeat-x; argin-bottom:8px;一级导航栏使用如下代码：首 页企业新闻企业简介产品展示企业历史招商加盟企业文化网上下单联系我们二级导航栏代码如下：div id=qh_con0 styl
