1、网页设计与制作课程设计实 验 报 告院系名称： 管理学院 专业班级： 电子商务 XXX 学生姓名： XXX 学 号： XXXXXXX 网页界面 网站栏目 网站功能（JS程序） 合计50分 10分 40分 100分2016 年 06 月 1一、实验目的本实验属于设计性实验，在学习完网页设计与制作课程的基础上，通过实验学习网页制作的步骤与方法，使用 CSS+DIV 制作一个简单的网站，能够对网站有一个清晰的认知和规划。进一步熟悉和领悟 HTML 语言、CSS 样式表和 JAVASCRIPT 语言的语法结构。将理论与实践相结合，加深对本课程的理解。二、实验步骤1、进行网站整体规划，包括网站主题、栏目
2、以及界面的构思，确定网站结构，形成初步设计思路。2、设计网站的主页以及栏目，利用 CSS+DIV 制作网站主页和弹出式导航条菜单，利用 JavaScript 制作动态效果，并用 firework 软件对主页进行切图。3、设计并利用 CSS+DIV 制作列表页，并用 firework 软件对列表页进行切图。4、设计并利用 CSS+DIV 制作内容页，并用 firework 软件对内容页进行切图。5、进行调试和修改已形成最终实验结果。三、网站设计思路1、参照“唯品会” “折 800”等电商网站，确定网站主题为“轻奢电商” 。2、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分类
3、等七个一级栏目。其中美妆、服饰、零食、母婴四个栏目含有二级栏目。3、首页设置品牌热卖、限量抢购等图片展示，并利用 Javascript 设置用户名和密码的表单验证，在图片之下设置一个新闻列表提供有关网站的最新消息，右侧设置账户、密码的表单验证，并在网页结尾处写上官方微信和版权信息。4、由主页导航栏上的的在售分类引出列表页，在列表页中采用新闻列表样式具体展示本企业的全部商品分类并设置超链接。5、由列表页中美妆|女士护肤|洁面弹出具体的内容页面，主要由图片以及相应的文字介绍组成。四、网站的核心代码1、主页轻奢电商2bodymin-width:1080px;color:#006e89;font-fa
4、mily:微软雅黑;background-image:url(images/轻奢背景.jpg); #outermost #titlemargin: 0 auto;width: 1080px;#navwidth: 1080px;margin:0 auto#nav ul lipadding:0 5px;color:#CCC;margin:10px 0 0 0;float:right;list-style: none#nav ul li acolor:#666;text-decoration: none#nav ul li a:hovercolor:#F00;text-decoration: und
5、erline#outermostclear:both;3width:1080;margin-left:auto;margin-right:auto#topfont-family: 隶书;font-size: 55px;margin:0#outermost #titlemargin: 0 auto;width: 1080px#outermost #sddmmargin:0 auto;padding: 0;width: 1080px;z-index: 30;background-color:#030303;height:40px#sddm limargin:50;padding:0;list-st
6、yle: none;float: left;font: bold 20px arial#sddm li a 4display: block;margin: 0 1px 0 0;padding: 4px 10px;width: 120px;background:#030303;color: #FFF;text-decoration: none#sddm li a:hoverbackground: #030303#sddm div position: absolute;visibility: hidden;margin: 0 35 0 0;padding: 0 35 0 0;background:
7、 #030303;border: 1px solid #030303#sddm div a position: relative;display: block;margin: 0;padding: 5px 10px;width: 120;white-space: nowrap;text-align: left;text-decoration: none;background: #030303;color: #2875DE;5font: 20px arial#sddm div a:hover background: #030303;color: #FFF#mainmargin:auto;font
8、-size:30px;width:1000px;text-align:center#contentmagin-left:20px;font-size:22px;width:auto;height:200px;float:left#content1float:left;#content2magin:auto 0 auto auto;font-size:18px;height:200px;float:right#bottommagin:auto auto 0 auto;text-align:center;font-size:18px;clear:left6$(function()$(“#KinSl
9、ideshow“).KinSlideshow(moveStyle:“down“,intervalTime:8,mouseEvent:“mouseover“,titleFont:TitleFont_size:14,TitleFont_color:“#FF0000“);)function a(obj) var zhi=document.getElementById(a); zhi.innerHTML=; if(obj.value.length=0) zhi.innerHTML=账号不能为空; return false; exit; else zhi.innerHTML=; return true;
10、 alert(“aaa“); function p(obj) var zhi=document.getElementById(p); if(obj.value.length=“0“) zhi.innerHTML=密码不能为空; return false; exit; else zhi.innerHTML=; return true; 8 轻奢电商正品保障7 天退换首页美妆女士护肤男士护肤服饰精品女装潮流男装零食国内美食进口美食酒水专区9母婴婴幼儿专区孕妈专区玩具/文具/教育关于我们在售分类品牌热卖限量抢购轻奢电商轻奢新主义，只为懂你的人轻奢国际尖货，跟踪国际一流品牌，提供超一流服务轻奢母婴专享
11、，提供超豪华护理套餐，限时一折抢购轻奢化妆品专柜，超乎实体店的感官体验，限时特卖轻奢零食主会场，进口零食倾情享受，酒水七折特卖10用户： 密码： 官方微信：4783952zxx版权所有2、列表页在售分类bodycolor:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg)#sddmpadding:0;z-index: 30;background-color:#030303;height:40px;11color:#FFF#sddm lipadding:10px 30px 5px 30px;list-style: none
12、;float: left;width:130px;font: bold 20px arial;color:#FFF#sddm1background-color:#006e89#topfont-family:隶书;font-size:45px;text-align:center#contentfont-size:24px;padding:10px auto auto 20px;magin:auto auto auto 30px#content ul firstfont-size:24px;margin-left:50px#content ul secondfont-size:18px;margi
13、n-left:60pxafont-size:18px;text-decoration:underline;color:#006e89a:hoverfont-size:18px;text-decoration:underline;color:#000#bottommagin:auto auto 0 auto;text-align:center;font-size:18px;clear:left轻奢电商正品保障7 天退换首页 美妆 服饰零食母婴 关于我们在售分类商品分类12美妆女士护肤：洁面| 护肤套餐 |爽肤|去角质|T 区护理|面膜|身体护理|彩妆|隔离防晒|精华|眼膜|香水|啫喱|喷雾|隔离
14、防晒男士护肤：洁面|剃须|面膜|面部护理|护肤套餐|须后水|眼部护理|身体护理|祛痘服饰精品女装:针织衫|polo 衫|连衣裙|牛仔裤|风衣|短裙|松糕鞋|棉衣|凉鞋|打底衫|夹克潮流男装:T 恤|背心|衬衫|西装|皮鞋|泳裤|帽子|睡衣|袖扣|领带|休闲裤零食国内美食:坚果|肉脯|果脯|饼干|特产|炒货|茗茶进口美食:巧克力|糖果|糕点|咖啡|健康冲饮|咖啡伴侣酒水专区:花茶|洋酒|啤酒|可口可乐|牛奶|葡萄酒|茶叶|鸡13尾酒|果汁母婴婴幼儿专区:奶粉|手推车|学步鞋|纸尿裤|抱毯孕妈专区:防辐射系列|妈咪包|家居服|营养品玩具/文具/ 教育:公仔|乐器|棋牌|积木|书包|笔类|连环画|练
15、习册|乐高官方微信：4783952zxx版权所有3、内容页洁面bodycolor:#006e89;font-family:微软雅黑;text-align:center;14background-image:url(images/轻奢背景.jpg); #topfont-family:隶书;font-size:45px;text-align:center#sddmmargin:0 ;padding: 0;z-index: 30;background-color:#030303;height:40px;color:#FFF#sddm lipadding:10px 30px 5px 30px;list
16、-style: none;float: left;font: bold 20px arial;width:130px;color:#FFF#sddm1background-color:#006e89;#contentwidth:100%#content1width:25%;float:left#content2width:25%;float:left#content3width:25%;float:left#content4width:25%;float:left#bottommagin:auto auto 0 auto;text-align:center;font-size:18px;15c
17、lear:left轻奢电商正品保障7 天退换首页 美妆服饰零食母婴关于我们 在售分类您的位置美妆 女士护肤洁面洁面膏尺码：100g洁面膏彻底清除堆积在毛孔里的污垢和角质细胞，用后清爽无比草本青春洁面慕斯规格：150mL草本青春洁面慕斯 150mL，蕴含有丰富的植物油和植物萃取，质地温和绵密，能够温和的清洁皮肤玫瑰衡肤保湿洁面乳尺码：80g玫瑰衡肤保湿洁面乳 80g，蕴含丰富的玫瑰果油，可提升肌肤水分含量衡肤泡沫洁面液尺码：200mL衡肤泡沫洁面液，玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢16官方微信：4783952zxx版权所有五、实验总结在本次网站页面设计中，首先要整理清
18、楚构思，根据 CSS 样式以及 DIV 块化设计完成代码设计。其中对于 Javascript 的应用主要体现在三个方面：下拉菜单的动态效果，用户登录的表单验证以及图片轮播的动态效果。我在本次试验中最大的困难是有关盒子的宽高、边界以及悬浮等属性，如何利用DIV 模块将内容悬浮至水平排列，以及如何将用项目编号嵌套的新闻列表排列展示等。伴随着这些问题的解决，我对 CSS 中的宽高属性以及边框属性有了一个更为清晰的认知。另外，由于网站的主题选定为“轻奢电商” ，因此，图片的展示要多于文字的展示，图片的作用更为重要，在此过程中，可以用 Fireworks 软件进行切图，这是网页必不可少的元素。网页设计是一个前端的操作，对界面的设计和把握主要要求我们细致，有耐心。在对程序不断的调试之后不断发现当前网页的问题是我们的任务所在，在这个过程中，我们不但能重新学习代码的功能，还可以提高对网页源代码的理解程度。
