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

网页设计与制作课程设计实 验 报 告院系名称： 管理学院 专业班级： 电子商务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、主页轻奢电商bodymin-width:1080px;color:#006e89;font-family:微软雅黑;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: underline#outermostclear:both;width: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-style: none;float: left;font: bold 20px arial#sddm li a display: 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: #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;font: 20px arial#sddm div a:hover background: #030303;color: #FFF#mainmargin:auto;font-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:left$(function()$(#KinSlideshow).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; 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; 轻奢电商正品保障7天退换 首页美妆 女士护肤 男士护肤 服饰 精品女装 潮流男装 零食 国内美食 进口美食 酒水专区母婴 婴幼儿专区 孕妈专区 玩具/文具/教育 关于我们在售分类 品牌热卖 限量抢购 轻奢电商轻奢新主义，只为懂你的人 轻奢国际尖货，跟踪国际一流品牌，提供超一流服务 轻奢母婴专享，提供超豪华护理套餐，限时一折抢购 轻奢化妆品专柜，超乎实体店的感官体验，限时特卖 轻奢零食主会场，进口零食倾情享受，酒水七折特卖 用户： 密码： 官方微信：4783952zxx©版权所有  12947156782、 列表页在售分类 bodycolor:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg)#sddmpadding:0;z-index: 30;background-color:#030303;height:40px;color:#FFF#sddm lipadding:10px 30px 5px 30px;list-style: none;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;margin-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天退换 首页美妆服饰零食母婴关于我们在售分类商品分类美妆女士护肤：洁面|护肤套餐|爽肤|去角质|T区护理|面膜|身体护理|彩妆|隔离防晒|精华|眼膜|香水|啫喱|喷雾|隔离防晒男士护肤：洁面|剃须|面膜|面部护理|护肤套餐|须后水|眼部护理|身体护理|祛痘服饰精品女装:针织衫|polo衫|连衣裙|牛仔裤|风衣|短裙|松糕鞋|棉衣|凉鞋|打底衫|夹克潮流男装:T恤|背心|衬衫|西装|皮鞋|泳裤|帽子|睡衣|袖扣|领带|休闲裤零食国内美食:坚果|肉脯|果脯|饼干|特产|炒货|茗茶进口美食:巧克力|糖果|糕点|咖啡|健康冲饮|咖啡伴侣酒水专区:花茶|洋酒|啤酒|可口可乐|牛奶|葡萄酒|茶叶|鸡尾酒|果汁母婴婴幼儿专区:奶粉|手推车|学步鞋|纸尿裤|抱毯孕妈专区:防辐射系列|妈咪包|家居服|营养品玩具/文具/教育:公仔|乐器|棋牌|积木|书包|笔类|连环画|练习册|乐高官方微信：4783952zxx©版权所有  12947156783、 内容页洁面bodycolor:#006e89;font-family:微软雅黑;text-align:center;background-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-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;clear:left轻奢电商正品保障7天退换 首页美妆服饰零食母婴关于我们在售分类您的位置美妆女士护肤洁面洁面膏尺码：100g洁面膏彻底清除堆积在毛孔里的污垢和角质细胞，用后清爽无比 草本青春洁面慕斯规格：150mL草本青春洁面慕斯150mL，蕴含有丰富的植物油和植物萃取，质地温和绵密，能够温和的清洁皮肤玫瑰衡肤保湿洁面乳尺码：80g玫瑰衡肤保湿洁面乳80g，蕴含丰富的玫瑰果油，可提升肌肤水分含量衡肤泡沫洁面液尺码：200mL衡肤泡沫洁面液，玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢官方微信：4783952zxx©版权所有  1294715678五、实验总结在本次网站页面设计中，首先要整理清楚构思，根据CSS样式以及DIV块化设计完成代码设计。其中对于Javascript的应用主要体现在三个方面：下拉菜单的动态效果，用户登录的表单验证以及图片轮播的动态效果。我在本次试验中最大的困难是有关盒子的宽高、边界以及悬浮等属