网页设计课程设计报告Word文档格式.docx
《网页设计课程设计报告Word文档格式.docx》由会员分享，可在线阅读，更多相关《网页设计课程设计报告Word文档格式.docx（11页珍藏版）》请在冰豆网上搜索。
参考文献
指导教师签字：
审查意见
教研室主任签字：
2013
年
月
日
说明：
本表由指导教师填写，由教研室主任审核后下达给选题学生，装订在设计（论文）首页
第2页共2页
1需求分析
本课程设计为一个商业网站，大的框架为整个网站分为5个页面，分
别为：
主页面、公司的业务面，公司产品问题咨询面，公司产品的技
术支持面，校园招聘界面。
各个页面间都是相互连接的，方便读者更
快捷地找到想了解的信息。
在每个界面拥有的公司logo，登陆界
面，和一些视频的宣传和校园招聘网页的背景音乐，友情链接，插入
的各种静动态图片，搜索栏。
每个界面链接的公司的最新各种动态，
和基本的各种文字说明，采用的是中英双板模式书写。
网站的目录结构如下：
伍志强------网站根目录
Css------存放外置CSS文件
Images------存放图片文件
Music------存放背景音乐
ＪＳ------存放的ｊａｖａｓｃｒｉｐｔ代码
．ｐｒｏｊｅｃｔ------编译时建立的一个工程
Index系列------存放的网站的各个网页
2概要设计
第3页共3页
工大工公大司联盟科技投资公司主页Index
Index1
Index2
Index3
Index4
主页介绍
视频展示
业务
解决
支持
校园招聘
登陆界面
业
最
登
相
视
信
关
频
息
务
新
陆
的
和
提
消
产
技
链
交
说
背
品
术
接
后
明
景
音
台
3详细设计
页面的布局和风格
DIV+CSS的基本过程是先布局，对网页进行总体设计，再设计内
容，对布局的每一部分进行设计。
DIV+CSS对内容的设计也体现内容和表现相分离的思想。
对内容
的表现的描述都在CSS中，内容可以应用CSS样式，不需要额外
的HTML标签进行内容的修饰。
CSS网页布局的原理，就是按照HTML5代码中对象声明的
body{
background:
#131b20;
font-family:
Arial,Helvetica,sans-serif;
font-size:
100%;
第4页共4页
line-height:
1.5em;
color:
#f1fefd;
}
html{min-width:
980px;
html,body{height:
container{
margin:
0auto;
position:
relative;
width:
980px;
.75em;
}⋯⋯
第5页共5页
各个网页之间的链接：
<
linkrel="
stylesheet"
href="
css/reset.css"
type="
text/css"
media="
all"
>
css/layout.css"
css/style.css"
ul>
li>
ahref="
index.html"
主页<
/a>
/li>
index-1.html"
业务<
index-2.html"
解决<
index-3.html"
支持<
index-4.html"
校园招聘<
/ul>
LOGO插入：
divclass="
logo"
<
imgsrc="
images/logo.png"
alt="
"
/div>
第6页共6页
登陆注册界面：
formaction="
id="
search-form"
fieldset>
inputtype="
text"
class="
value="
submit"
Search"
/fieldset>
/form>
ulclass="
top-nav"
liclass="
first"
#"
about"
关于<
login"
登陆<
signup"
注册<
login-form"
field"
label>
用户名<
/label>
input
type="
密码<
password"
labelfor="
checkbox"
保存密码<
第7页共7页
name="
忘记密码?
申请一个新账号<
wrapper"
Submit"
class="
网页部分图片的插入：
inside"
wrapperp2"
figureclass="
img-wrapper"
images/1page-img1.jpg"
/figure>
视频的使用：
embed
src="
allowFullScreen="
true"
quality="
high"
width="
200"
height="
align="
left"
allowScriptAccess="
always"
application/x-shockwave-flash"
/embed>
第8页共8页
背景音乐：
divid="
apDiv2"
audiosrc="
sky.mp3"
border="
0"
controls>
/audio>
.vlinks{
relative;
第9页共9页
padding:
000800px;
#apDiv2{
absolute;
left:
660px;
top:
29px;
width;
301px;
height:
25px;
z-index:
1;
border:
#B0B82C1pxsolid;
background-color:
#FFFFCC;
提交的信息栏：
contacts-form"
col-1"
EnterYourName:
br/>
/>
EnterYourE-mail:
EnterYourState:
第10页共10页
友情链接：
vlinks"
Collectfrom<
a
href="
title="
友情链接"
target="
_blank"
友情链接<
动态信息栏：
list1"
工大联盟认证<
工大联盟项目启动<
工大联盟卓越计划<
工大联盟软件竞赛<
工大联盟采购计划<
工大联盟产品上市<
工大联盟招牌职员<
搜索栏：
第11页共11页
部分页面展示：
4调试分析出现的错误
.1网页背景色的设置
2重复使用实现相同功能的代码、或杂七杂八的乱套代码.
第12页共12页
3.在HTML5中，我们并不需要给<
script>
和<
增加type属性
4.不要把所有列表式的链接放在nav里。
5logo也不适用于figure
6.Aligncenter（自动居中）的滥用
5测试结果
第13页共13页
第14页共14页
第15页共15页
课程设计总结
这次网页设计课程设计给我的最大的印象是：
基本知识是一切的根本；
架构是重要的，想像的还要重要；
实践比一切空谈和理论更能学到东西。
从做这个网页设计开始无论遇到什么困难，我都没有一丝的放弃的念头。
在设计过程中一定要慎重，仔细。
来不得半点马虎。
布局是整个课程设计的中心，考虑要全面，分析彻底。
才会为后来的设计打下良好的基础。
否则，前功尽弃，甚至不能完成任务。
从这次课程设计中我也学到了额外的知识，初步认识了动态网页的制作，熟悉了本学期的网页制作与实例教程的知识，受益匪浅。
第16页共16页
升级会员 