《网页设计与制作》课程设计报告.docx

《网页设计与制作》课程设计报告.docx

《《网页设计与制作》课程设计报告.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》课程设计报告.docx（16页珍藏版）》请在冰点文库上搜索。

《网页设计与制作》课程设计报告

《网页设计与制作课程设计》

实验报告

院系名称：

管理学院专业班级：

电子商务XXX

学生姓名：

XXX学号：

XXXXXXX

网页界面

网站栏目

网站功能（JS程序）

合计

50分

10分

40分

100分

2016年06月

一、实验目的

本实验属于设计性实验，在学习完《网页设计与制作》课程的基础上，通过实验学习网页制作的步骤与方法，使用CSS+DIV制作一个简单的网站，能够对网站有一个清晰的认知和规划。

进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构。

将理论与实践相结合，加深对本课程的理解。

二、实验步骤

1、进行网站整体规划，包括网站主题、栏目以及界面的构思，确定网站结构，形成初步设计思路。

2、设计网站的主页以及栏目，利用CSS+DIV制作网站主页和弹出式导航条菜单，利用JavaScript制作动态效果，并用firework软件对主页进行切图。

3、设计并利用CSS+DIV制作列表页，并用firework软件对列表页进行切图。

4、设计并利用CSS+DIV制作内容页，并用firework软件对内容页进行切图。

5、进行调试和修改已形成最终实验结果。

三、网站设计思路

1、参照“唯品会”“折800”等电商网站，确定网站主题为“轻奢电商”。

2、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分类等七个一级栏目。

其中美妆、服饰、零食、母婴四个栏目含有二级栏目。

3、首页设置品牌热卖、限量抢购等图片展示，并利用Javascript设置用户名和密码的表单验证，在图片之下设置一个新闻列表提供有关网站的最新消息，右侧设置账户、密码的表单验证，并在网页结尾处写上官方微信和版权信息。

4、由主页导航栏上的的在售分类引出列表页，在列表页中采用新闻列表样式具体展示本企业的全部商品分类并设置超链接。

5、由列表页中美妆|女士护肤|洁面弹出具体的内容页面，主要由图片以及相应的文字介绍组成。

四、网站的核心代码

1、主页

body{

min-width:

1080px;

color:

#006e89;font-family:

微软雅黑;

background-image:

url（images/轻奢背景.jpg）;

}

#outermost#title{

margin:

0auto;

width:

1080px;

}

#nav{

width:

1080px;

margin:

0auto

}

#navulli{

padding:

05px;

color:

#CCC;

margin:

10px000;

float:

right;

list-style:

none

}

#navullia{

color:

#666;

text-decoration:

none

}

#navullia:

hover{

color:

#F00;

text-decoration:

underline

}

#outermost{

clear:

both;

width:

1080;

margin-left:

auto;

margin-right:

auto

}

#top{

font-family:

隶书;

font-size:

55px;

margin:

0

}

#outermost#title{

margin:

0auto;

width:

1080px

}

#outermost#sddm{

margin:

0auto;

padding:

0;

width:

1080px;

z-index:

30;

background-color:

#030303;

height:

40px

}

#sddmli{

margin:

50;

padding:

0;

list-style:

none;

float:

left;

font:

bold20pxarial

}

#sddmlia{

display:

block;

margin:

01px00;

padding:

4px10px;

width:

120px;

background:

#030303;

color:

#FFF;

text-decoration:

none

}

#sddmlia:

hover{

background:

#030303

}

#sddmdiv{

position:

absolute;

visibility:

hidden;

margin:

03500;

padding:

03500;

background:

#030303;

border:

1pxsolid#030303

}

#sddmdiva{

position:

relative;

display:

block;

margin:

0;

padding:

5px10px;

width:

120;

white-space:

nowrap;

text-align:

left;

text-decoration:

none;

background:

#030303;

color:

#2875DE;

font:

20pxarial

}

#sddmdiva:

hover{

background:

#030303;

color:

#FFF

}

#main{margin:

auto;

font-size:

30px;

width:

1000px;

text-align:

center

}

#content{magin-left:

20px;

font-size:

22px;

width:

auto;

height:

200px;

float:

left

}

#content1{float:

left;}

#content2{magin:

auto0autoauto;

font-size:

18px;

height:

200px;

float:

right

}

#bottom{magin:

autoauto0auto;

text-align:

center;

font-size:

18px;

clear:

left

}

$（function（）{

$（"#KinSlideshow"）.KinSlideshow（{

moveStyle:

"down",

intervalTime:

8,

mouseEvent:

"mouseover",

titleFont:

{TitleFont_size:

14,TitleFont_color:

"#FF0000"}

}）;

}）

--

vartimeout=500;

varclosetimer=0;

varddmenuitem=0;

functionmopen（id）

{mcancelclosetime（）;

ddmenuitem=document.getElementById（id）;

}

functionmclose（）

functionmclosetime（）

{closetimer=window.setTimeout（mclose,timeout）;}

functionmcancelclosetime（）

{if（closetimer）

{window.clearTimeout（closetimer）;

closetimer=null;}

}

document.onclick=mclose;

//-->

functiona（obj）{

varzhi=document.getElementById（'a'）;

zhi.innerHTML='';

zhi.innerHTML='账号不能为空';

returnfalse;

exit;

}else{

zhi.innerHTML='√';

returntrue;

}

alert（"aaa"）;

}

--验证密码-->

functionp（obj）{

varzhi=document.getElementById（'p'）;

zhi.innerHTML='密码不能为空';

returnfalse;

exit;

}else{zhi.innerHTML='√';

returntrue;

}

}