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

合集下载

网设计与制作课程设计报告

网设计与制作课程设计报告The document was prepared on January 2, 2021《网页设计与制作课程设计》实验报告院系名称：管理学院专业班级：电子商务XXX学生姓名： XXX 学号： XXXXXXX2016年 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、由列表页中美妆|女士护肤|洁面弹出具体的内容页面，主要由图片以及相应的文字介绍组成。

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

《网页设计与制作课程设计》实验报告院系名称：管理学院专业班级：电子商务XXX学生姓名： XXX 学号： XXXXXXX2016年 06 月一、实验目的本实验属于设计性实验，在学习完《网页设计与制作》课程的基础上，通过实验学习网页制作的步骤与方法，使用CSS+DIV制作一个简单的网站，能够对网站有一个清晰的认知和规划。

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

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

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

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

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

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

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

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

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

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

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

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

四、网站的核心代码1、主页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>轻奢电商</title><style type="text/css">body{min-width:1080px;color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg);}#outermost #title{margin: 0 auto;width: 1080px;}#nav{width: 1080px;margin:0 auto}#nav ul li{padding:0 5px;color:#CCC;margin:10px 0 0 0;float:right;list-style: none}#nav ul li a{color:#666;text-decoration: none}#nav ul li a: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: 0 auto;width: 1080px}#outermost #sddm{margin:0 auto;padding: 0;width: 1080px;z-index: 30;background-color:#030303;height:40px}#sddm li{margin: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:hover{background: #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}#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:auto 0 auto auto;font-size:18px;height:200px;float:right}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style><script type="text/javascript"> $(function(){$("#KinSlideshow").KinSlideshow({moveStyle:"down",intervalTime:8,mouseEvent:"mouseover",titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} });})</script><script type="text/javascript"></script><script type="text/javascript"> function a(obj){var zhi=document.getElementById('a'); zhi.innerHTML='';zhi.innerHTML='账号不能为空';return false;exit;}else{zhi.innerHTML='√';return true;}alert("aaa");}function p(obj){var zhi=document.getElementById('p'); zhi.innerHTML='密码不能为空';return false;exit;}else{ zhi.innerHTML='√';return true;}}</script></head><body><div id="outermost"><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li><a href="#" onmouseover="mopen('m1')"onmouseout="mclosetime()">首页</a></li><li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">美妆</a><div id="m2" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">女士护肤</a><a href="#">男士护肤</a></div></li><li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">服饰</a><div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">精品女装</a><a href="#">潮流男装</a></div></li><li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">零食</a><div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">国内美食</a><a href="#">进口美食</a><a href="#">酒水专区</a></div></li><li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">母婴</a><div id="m5" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">婴幼儿专区</a><a href="#">孕妈专区</a><a href="#">玩具/文具/教育</a></div></li><li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">关于我们</a></li><li><a href="list.htm" onmouseover="mopen('m7')" onmouseout="mclosetime()">在售分类</a></li></ul><div id="main"><p><hr size="1">品牌热卖<hr size="1"><br><div id="KinSlideshow" style=""><a href="/" target="_blank"><img src="images/pic1.jpg" ></a><a href="/" target="_blank"><img src="images/pic2.jpg" ></a></div></p><p><hr size="1">限量抢购<hr size="1"><br><img src="images/限量抢购.jpg" border="0"></p></div><div> <div id="content">轻奢电商——轻奢新主义，只为懂你的人<br><ul><li>轻奢国际尖货，跟踪国际一流品牌，提供超一流服务</li><li>轻奢母婴专享，提供超豪华护理套餐，限时一折抢购</li><li>轻奢化妆品专柜，超乎实体店的感官体验，限时特卖</li><li>轻奢零食主会场，进口零食倾情享受，酒水七折特卖</li></ul></div><div id="content1"><img src="images/登录.jpg" border="0"><div id="content2"><br><br><form method="post" action="" name="myform"> 用户：<input type="text" name="username" size="20" onblur="a(this)"><span id="a" style="color:red;font-size:12px;"></span><br>密码：<input type="password" name="pword" size="20"onblur="p(this)"><span id="p"style="color:red;font-size:12px;"></span></br><p><input type="submit" value="登录"><input name="" type="button" class="userpsubmit" value="注册" id="add" onclick="check_all(document.myform)"> </p></form> </div></div><div id="bottom" style="text-align:center"><hr width="80%"> </div></div></body></html>2、列表页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>在售分类</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg)}#sddm{padding:0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;float: left;width:130px;font: bold 20px arial;color:#FFF}#sddm1{background-color:#006e89}#top{font-family:隶书;font-size:45px;text-align:center}#content{font-size:24px;padding:10px auto auto 20px;magin:auto auto auto 30px} #content ul first{font-size:24px;margin-left:50px}#content ul second{font-size:18px;margin-left:60px}a{font-size:18px;text-decoration:underline;color:#006e89}a:hover{font-size:18px;text-decoration:underline;color:#000}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><div id="content"><div align="center"><hr width="80%">商品分类<hr width="80%"></div><ul id="first"><li>美妆<div><ul id="second"><li><img src="images/女士护肤.jpg" border="0">女士护肤：<a href="content.htm">洁面</a>|<a href="#">护肤套餐</a>|<a href="#">爽肤</a>|<a href="#">去角质</a>|<a href="#">T区护理</a>|<a href="#">面膜</a>|<a href="#">身体护理</a>|<a href="#">彩妆</a>|<a href="#">隔离防晒</a>|<a href="#">精华</a>|<a href="#">眼膜</a>|<a href="#">香水</a>|<a href="#">啫喱</a>|<a href="#">喷雾</a>|<a href="#">隔离防晒</a><li><img src="images/男士护肤.jpg" border="0">男士护肤：<a href="#">洁面</a>|<a href="#">剃须</a>|<a href="#">面膜</a>|<a href="#">面部护理</a>|<ahref="#">护肤套餐</a>|<a href="#">须后水</a>|<a href="#">眼部护理</a>|<a href="#">身体护理</a>|<a href="#">祛痘</a></ul></div><li>服饰<div><ul id="second"><li><img src="images/精品女装.jpg" border="0">精品女装:<a href="#">针织衫</a>|<a href="#">polo衫</a>|<a href="#">连衣裙</a>|<a href="#">牛仔裤</a>|<a href="#">风衣</a>|<a href="#">短裙</a>|<a href="#">松糕鞋</a>|<a href="#">棉衣</a>|<a href="#">凉鞋</a>|<a href="#">打底衫</a>|<a href="#">夹克</a><li><img src="images/潮流男装.jpg" border="0">潮流男装:<a href="#">T恤</a>|<a href="#">背心</a>|<a href="#">衬衫</a>|<a href="#">西装</a>|<a href="#">皮鞋</a>|<a href="#">泳裤</a>|<a href="#">帽子</a>|<a href="#">睡衣</a>|<a href="#">袖扣</a>|<a href="#">领带</a>|<a href="#">休闲裤</a></ul></div><li>零食<div><ul id="second"><li><img src="images/国内美食.jpg" border="0">国内美食:<a href="#">坚果</a>|<a href="#">肉脯</a>|<a href="#">果脯</a>|<a href="#">饼干</a>|<a href="#">特产</a>|<a href="#">炒货</a>|<a href="#">茗茶</a> <li><img src="images/进口美食.jpg" border="0">进口美食:<a href="#">巧克力</a>|<a href="#">糖果</a>|<a href="#">糕点</a>|<a href="#">咖啡</a>|<a href="#">健康冲饮</a>|<a href="#">咖啡伴侣</a><li><img src="images/酒水专区.jpg" border="0">酒水专区:<a href="#">花茶</a>|<a href="#">洋酒</a>|<a href="#">啤酒</a>|<a href="#">可口可乐</a>|<a href="#">牛奶</a>|<a href="#">葡萄酒</a>|<a href="#">茶叶</a>|<a href="#">鸡尾酒</a>|<a href="#">果汁</a></ul></div><li>母婴<div id="m3"><ul id="second"><li><img src="images/婴幼儿专区.jpg" border="0">婴幼儿专区:<a href="#">奶粉</a>|<a href="#">手推车</a>|<a href="#">学步鞋</a>|<a href="#">纸尿裤</a>|<a href="#">抱毯</a><li><img src="images/孕妈专区.jpg" border="0">孕妈专区:<a href="#">防辐射系列</a>|<a href="#">妈咪包</a>|<a href="#">家居服</a>|<ahref="#">营养品</a><li><img src="images/玩具.jpg" border="0">玩具/文具/教育:<a href="#">公仔</a>|<a href="#">乐器</a>|<a href="#">棋牌</a>|<a href="#">积木</a>|<a href="#">书包</a>|<a href="#">笔类</a>|<a href="#">连环画</a>|<a href="#">练习册</a>|<a href="#">乐高</a></ul></div></ul></div><div id="bottom" style="text-align:center"><hr width="80%"></div></body></html>3、内容页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>洁面</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;text-align:center;background-image:url(images/轻奢背景.jpg);}#top{font-family:隶书;font-size:45px;text-align:center} #sddm{margin:0 ;padding: 0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;font: bold 20px arial;width:130px;color:#FFF}#sddm1{background-color:#006e89;}#content{width:100%}#content1{width:25%;float:left} #content2{width:25%;float:left} #content3{width:25%;float:left} #content4{width:25%;float:left} #bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><p align="left">您的位置>美妆>女士护肤>洁面<hr size="1"></p><div id="content" align="center"><div id="content1"><img src="images/list1.png" border="0"><br>洁面膏<br>尺码：100g<br>洁面膏彻底清除堆积在毛孔里的污垢和角质细胞，用后清爽无比</div><div id="content2"> <img src="images/list2.png" border="0"><br>草本青春洁面慕斯<br>规格：150mL<br>草本青春洁面慕斯150mL，蕴含有丰富的植物油和植物萃取，质地温和绵密，能够温和的清洁皮肤</div><div id="content3"><img src="images/list3.png" border="0"><br>玫瑰衡肤保湿洁面乳<br>尺码：80g<br>玫瑰衡肤保湿洁面乳80g，蕴含丰富的玫瑰果油，可提升肌肤水分含量<br></div> <div id="content4"><img src="images/list4.png" border="0"><br>衡肤泡沫洁面液<br>尺码：200mL<br>衡肤泡沫洁面液，玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢<br></div></div><div id="bottom" style="text-align:center"><hr></body></html>五、实验总结在本次网站页面设计中，首先要整理清楚构思，根据CSS样式以及DIV块化设计完成代码设计。

网页设计与制作实验报告

网页设计与制作实验报告网页设计与制作实验报告一、引言在当今数字化时代，网页设计和制作已经成为了一门重要的技能。

随着互联网的普及和发展，网页已经成为了人们获取信息、进行交流和展示个人或企业形象的重要平台。

本实验旨在探究网页设计和制作的基本原理和技巧，并通过实践来提升我们的实际操作能力。

二、实验目的1. 了解网页设计的基本原则和规范；2. 掌握网页制作的基本技巧和工具；3. 能够设计和制作简单的网页。

三、实验过程1. 网页设计原则在开始实验之前，我们首先学习了网页设计的基本原则。

这包括布局的合理性、色彩的搭配、字体的选择和排版的规范等。

通过学习这些原则，我们能够设计出更具吸引力和易用性的网页。

2. 网页制作工具为了进行网页制作，我们需要掌握一些基本的工具。

在本实验中，我们学习了HTML和CSS这两种最基础的网页制作语言。

HTML用于创建网页的结构和内容，而CSS则用于控制网页的样式和布局。

通过学习和练习这些工具，我们能够自由地设计和制作网页。

3. 网页制作实践在学习了网页设计原则和掌握了网页制作工具之后，我们开始进行实际的网页制作实践。

我们选择了一个简单的主题，例如旅游景点介绍或个人简历等，然后根据自己的创意和设计理念进行网页的设计和制作。

四、实验结果经过一段时间的努力，我们成功地完成了自己设计的网页。

通过合理的布局、美观的色彩搭配和清晰的内容呈现，我们的网页具有良好的用户体验和视觉效果。

同时，我们还运用了一些CSS技巧，如响应式设计和动画效果，进一步提升了网页的质量和吸引力。

五、实验总结通过这次实验，我们深入了解了网页设计和制作的基本原理和技巧。

我们学会了如何根据不同的需求和目标制定网页设计方案，并运用HTML和CSS等工具来实现我们的设计理念。

同时，我们也意识到网页设计和制作是一个不断学习和提升的过程，我们需要不断地关注行业的最新动态和技术的发展，以保持自己的竞争力。

六、展望未来随着技术的不断发展和用户需求的不断变化，网页设计和制作将会面临新的挑战和机遇。

网页设计与制作课程设计

网页设计与制作课程设计一、课程目标知识目标：1. 让学生掌握网页设计的基本概念，包括网页结构、布局、色彩搭配等；2. 使学生了解并熟悉HTML、CSS等网页编程语言；3. 让学生掌握网页制作的基本工具和软件，如Dreamweaver、Photoshop 等；4. 引导学生了解互联网发展趋势，提高对网页设计行业标准及规范的认识。

技能目标：1. 培养学生运用HTML、CSS进行网页编写的能力，能独立完成静态网页的制作；2. 培养学生运用网页设计工具和软件进行创意设计的能力，提高网页视觉效果；3. 培养学生团队协作能力，能在团队项目中发挥个人特长，共同完成复杂网页设计任务。

情感态度价值观目标：1. 激发学生对网页设计的兴趣和热情，培养创新精神和审美观念；2. 培养学生严谨细致的工作态度，注重细节，追求卓越；3. 引导学生关注互联网产业发展，树立正确的职业观念，为未来职业生涯奠定基础。

课程性质：本课程为实践性较强的学科，注重理论知识与实践操作的相结合。

学生特点：本课程针对初中年级学生，学生具备一定的计算机操作基础，好奇心强，喜欢探索新事物。

教学要求：结合学生特点，采用案例教学、任务驱动等方法，注重培养学生的实际操作能力。

在教学过程中，将课程目标分解为具体的学习成果，以便进行有效的教学设计和评估。

二、教学内容1. 网页设计基础知识：包括网页的基本结构、布局原则、色彩搭配技巧等，对应教材第一章内容。

- 网页的基本结构及其作用- 常见的网页布局类型及特点- 网页色彩搭配原则及视觉效果2. 网页编程语言HTML、CSS：学习HTML、CSS基本语法及其应用，对应教材第二章内容。

- HTML标签及其使用方法- CSS选择器、属性及其应用- 网页样式表编写及优化3. 网页制作工具与软件：学习Dreamweaver、Photoshop等软件的基本操作，对应教材第三章内容。

- Dreamweaver的基本操作与使用技巧- Photoshop在网页设计中的应用- 网页图片处理与优化4. 网页设计与制作实践：通过实际案例，培养学生动手能力，对应教材第四章内容。

网页设计与制作报告书

网页设计与制作报告书课程名称:网页设计与制作专业班级：电子商务2班学号:*****************指导教师：***目录一．概要 (3)二．网站开发 (3)三．应用工具方案 (5)四．栏目划分 (6)五．代码表 (7)六．截图 (13)七．结论 (14)摘要：在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

一、网页制作开发背景Dreamweaver以其功能强大、容易上手、界面亲切而著称。

它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。

现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。

其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。

工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。

二、网页制作设计技巧首先，我们来看一下创建一个只包含一个网页的站点。

选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点”图标，单击“确定”按钮。

这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。

在文件夹列表里有一个网页文件，名字叫做“index.htm”。

网站设计与制作课程设计报告总结

网站设计与制作课程设计报告总结一、课程目标知识目标：1. 让学生掌握网站设计的基本概念，了解网站结构、页面布局和导航设计。

2. 培养学生掌握HTML、CSS等网页编程语言，能独立完成静态网页的制作。

3. 使学生了解网站制作的流程，掌握网站策划、设计、开发、测试和上线的基本步骤。

技能目标：1. 培养学生运用网页设计软件（如Dreamweaver、Photoshop等）进行网站设计的能力。

2. 提高学生运用编程语言实现网页布局、样式设计和交互功能的能力。

3. 培养学生具备团队协作能力，能在项目中承担不同角色，共同完成网站制作。

情感态度价值观目标：1. 培养学生对网站设计制作的兴趣和热情，提高其学习主动性和积极性。

2. 培养学生具备良好的审美观念，关注用户体验，注重网站的美观性和易用性。

3. 培养学生遵循网络道德规范，尊重知识产权，树立正确的网络价值观。

本课程针对高年级学生，结合学科特点和教学要求，注重理论联系实际，提高学生的实践操作能力和创新能力。

通过课程学习，使学生能够独立完成网站设计与制作，为未来从事相关工作或进一步学习打下坚实基础。

同时，培养学生具备良好的团队合作精神，提升其综合素质。

二、教学内容1. 网站设计基础知识：包括网站概念、分类、功能；网站结构、页面布局、导航设计原则；网站色彩、字体、图片等视觉元素的应用。

教材章节：第一章网站设计概述2. 网页编程语言：HTML基本标签、属性；CSS样式表、选择器；JavaScript 基本语法、事件处理。

教材章节：第二章 HTML与CSS；第三章 JavaScript基础3. 网页设计与制作软件：Dreamweaver、Photoshop操作技巧；网页切片、布局、样式设计；网页动画制作。

教材章节：第四章网页设计与制作工具4. 网站制作流程：网站策划、设计、开发、测试、上线各阶段任务及注意事项；项目管理和团队协作方法。

教材章节：第五章网站制作流程与实践5. 网站优化与推广：网站性能优化、搜索引擎优化（SEO）、网络营销策略。

网页制作与网站设计课程设计报告

网页制作与网站设计课程设计报告一、课程目标知识目标：1. 让学生掌握网页制作的基本概念，了解网站设计的基本流程；2. 使学生掌握HTML、CSS等网页编程语言的基础知识；3. 帮助学生了解网站架构、页面布局和导航设计等方面的知识。

技能目标：1. 培养学生运用网页编程语言进行网页设计的能力；2. 培养学生运用网页设计工具（如Dreamweaver、Photoshop等）进行网站制作的能力；3. 培养学生具备基本的网站测试、优化和发布技能。

情感态度价值观目标：1. 培养学生热爱互联网事业，增强对计算机技术的兴趣；2. 培养学生具备团队协作精神，善于与他人沟通交流，共同完成项目任务；3. 培养学生遵循网络道德规范，尊重他人知识产权，养成良好的网络素养。

课程性质分析：本课程旨在让学生了解并掌握网页制作与网站设计的基本知识，培养学生具备实际操作能力，激发学生对互联网技术的兴趣。

学生特点分析：本课程针对的是初中年级学生，他们对新鲜事物充满好奇心，动手能力强，但可能缺乏一定的编程基础和网络知识。

教学要求：1. 注重理论与实践相结合，让学生在实际操作中掌握知识；2. 采取案例教学，以实际项目为载体，提高学生的实际应用能力；3. 鼓励学生积极参与讨论，培养学生的团队协作和沟通能力。

二、教学内容1. 网页制作基础知识：HTML、CSS、JavaScript等基本概念和语法；网页结构、标签、属性等基本组成要素；网页设计规范和技巧。

教材章节：第一章网页制作基础2. 网页设计工具：介绍Dreamweaver、Photoshop等网页设计工具的使用方法，学会使用这些工具进行网页制作和图像处理。

教材章节：第二章网页设计工具3. 网站架构与布局：讲解网站的基本结构、页面布局和导航设计，掌握网页布局的方法和技巧。

教材章节：第三章网站架构与布局4. 网页编程实践：通过实际操作，让学生学会运用HTML、CSS、JavaScript 等编程语言进行网页设计，培养实际操作能力。

网站设计与网页制作课程设计报告

网站设计与网页制作课程设计报告一、课程目标知识目标：1. 让学生掌握网站设计与网页制作的基本概念，理解网页的构成元素和布局方式。

2. 学会使用HTML和CSS语言编写网页代码，实现基本的页面布局和样式设计。

3. 了解网站开发的流程，掌握网站规划、设计、制作和发布的基本步骤。

技能目标：1. 培养学生运用HTML和CSS进行网页编写的能力，能独立完成一个简单网页的设计与制作。

2. 提高学生的审美意识和设计能力，使其能够创作出符合用户体验的网页作品。

3. 培养学生团队协作和沟通能力，能够与他人共同完成网站项目。

情感态度价值观目标：1. 培养学生对网站设计与网页制作的兴趣，激发其创新意识和探索精神。

2. 引导学生关注互联网行业发展，了解网络安全、信息道德等相关知识，树立正确的网络价值观。

3. 培养学生热爱祖国，弘扬中华民族优秀文化，自觉抵制不良网络信息，为构建和谐网络环境贡献力量。

课程性质：本课程为信息技术课程，结合理论与实践，注重培养学生的动手操作能力和实际应用能力。

学生特点：初中学生具有一定的计算机操作基础，对新鲜事物充满好奇心，具备一定的自学能力和团队协作意识。

教学要求：结合学生特点，以实践为主，注重培养学生的实际操作技能和创新能力，提高其网站设计与网页制作的综合素养。

在教学过程中，将目标分解为具体的学习成果，便于教学设计和评估。

二、教学内容1. 网站设计与网页制作基础知识- 网页的基本概念与结构- 网页设计的要素与原则- 网站开发流程与规范2. HTML语言- HTML基本语法与结构- 常用HTML标签及其属性- 表格、列表、表单的创建与编辑3. CSS样式表- CSS基本语法与选择器- 文本样式、盒模型与布局- 响应式设计原理与实践4. 网页布局与设计- 页面布局方法与技巧- 常见网页设计风格与案例- 用户体验与界面优化5. 网站发布与管理- 网站域名与服务器- 网站上传与发布- 网站维护与管理教学内容安排与进度：第一周：网站设计与网页制作基础知识第二周：HTML语言（1）第三周：HTML语言（2）第四周：CSS样式表（1）第五周：CSS样式表（2）第六周：网页布局与设计第七周：网站发布与管理第八周：课程总结与作品展示教材章节关联：《信息技术》教材第三章：网站设计与网页制作教学内容与教材内容紧密关联，确保科学性和系统性，便于学生掌握和应用。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

《网页设计与制作课程设计》实验报告院系名称：管理学院专业班级：电子商务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、设计网站主页,主页设置首页、美妆、服饰、零食、母婴、关于我们、在售分类等七个一级栏目。

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

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

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

四、网站的核心代码1、主页<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>轻奢电商</title><style type="text/css">body{min-width:1080px;color:#006e89;font-family:微软雅黑; background-image:url(images/轻奢背景.jpg); }#outermost #title{margin: 0 auto;width: 1080px;}#nav{width: 1080px;margin:0 auto}#nav ul li{padding:0 5px;color:#CCC;margin:10px 0 0 0;float:right;list-style: none}#nav ul li a{color:#666;text-decoration: none}#nav ul li a: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: 0 auto;width: 1080px}#outermost #sddm{margin:0 auto;padding: 0;width: 1080px;z-index: 30;background-color:#030303;height:40px}#sddm li{margin: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:hover{background: #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}#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:auto 0 auto auto;font-size:18px;height:200px;float:right}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style><script src="js/jquery-1.4a2.min.js" type="text/javascript"></script><script src="js/jquery.KinSlideshow-1.2.1.min.js" type="text/javascript"></script> <script type="text/javascript">$(function(){$("#KinSlideshow").KinSlideshow({moveStyle:"down",intervalTime:8,mouseEvent:"mouseover",titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} });})</script><script type="text/javascript"></script><script type="text/javascript"> 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;}}</script></head><body><div id="outermost"><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p> <p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li><a href="#" onmouseover="mopen('m1')"onmouseout="mclosetime()">首页</a></li><li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">美妆</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">女士护肤</a><a href="#">男士护肤</a></div></li><li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">服饰</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">精品女装</a><a href="#">潮流男装</a></div></li><li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">零食</a> <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"><a href="#">国内美食</a><a href="#">进口美食</a><a href="#">酒水专区</a></div></li><li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">母婴</a><div id="m5" onmouseover="mcancelclosetime()" onmouseout= "mclosetime()"><a href="#">婴幼儿专区</a><a href="#">孕妈专区</a><a href="#">玩具/文具/教育</a></div></li><li><a href="#" onmouseover="mopen('m6')" onmouseout="mclosetime()">关于我们</a></li><li><a href="list.htm" onmouseover="mopen('m7')" onmouseout="mclosetime()">在售分类</a></li></ul><div id="main"><p><hr size="1">品牌热卖<hr size="1"><br><div id="KinSlideshow" style=""><a href="/" target="_blank"><img src="images/pic1.jpg" ></a><a href="/" target="_blank"><img src="images/pic2.jpg" ></a></div></p><p><hr size="1">限量抢购<hr size="1"><br><img src="images/限量抢购.jpg" border="0"></p></div><div> <div id="content">轻奢电商——轻奢新主义，只为懂你的人<br><ul><li>轻奢国际尖货，跟踪国际一流品牌，提供超一流服务</li><li>轻奢母婴专享，提供超豪华护理套餐，限时一折抢购</li><li>轻奢化妆品专柜，超乎实体店的感官体验，限时特卖</li><li>轻奢零食主会场，进口零食倾情享受，酒水七折特卖</li> </ul></div><div id="content1"><img src="images/登录.jpg" border="0"><div id="content2"><br><br><form method="post" action="" name="myform">用户：<input type="text" name="username" size="20" onblur="a(this)"><span id="a" style="color:red;font-size:12px;"></span><br>密码：<input type="password" name="pword" size="20"onblur="p(this)"><span id="p"style="color:red;font-size:12px;"></span></br><p><input type="submit" value="登录"><input name="" type="button" class="userpsubmit" value="注册" id="add" onclick="check_all(document.myform)"> </p></form> </div></div><div id="bottom" style="text-align:center"><hr width="80%"><p>官方微信：4783952zxx<br>©版权所有  <a herf="mailto:1294715678@">1294715678@</a></p></div></div></body></html>2、列表页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>在售分类</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;background-image:url(images/轻奢背景.jpg)}#sddm{padding:0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;float: left;width:130px;font: bold 20px arial;color:#FFF}#sddm1{background-color:#006e89}#top{font-family:隶书;font-size:45px;text-align:center}#content{font-size:24px;padding:10px auto auto 20px;magin:auto auto auto 30px}#content ul first{font-size:24px;margin-left:50px}#content ul second{font-size:18px;margin-left:60px}a{font-size:18px;text-decoration:underline;color:#006e89}a:hover{font-size:18px;text-decoration:underline;color:#000}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><div id="content"><div align="center"><hr width="80%">商品分类<hr width="80%"></div><ul id="first"><li>美妆<div><ul id="second"><li><img src="images/女士护肤.jpg" border="0">女士护肤：<a href="content.htm">洁面</a>|<a href="#">护肤套餐</a>|<a href="#">爽肤</a>|<a href="#">去角质</a>|<a href="#">T区护理</a>|<a href="#">面膜</a>|<a href="#">身体护理</a>|<a href="#">彩妆</a>|<a href="#">隔离防晒</a>|<a href="#">精华</a>|<a href="#">眼膜</a>|<a href="#">香水</a>|<a href="#">啫喱</a>|<a href="#">喷雾</a>|<a href="#">隔离防晒</a><li><img src="images/男士护肤.jpg" border="0">男士护肤：<a href="#">洁面</a>|<a href="#">剃须</a>|<a href="#">面膜</a>|<a href="#">面部护理</a>|<a href="#">护肤套餐</a>|<a href="#">须后水</a>|<a href="#">眼部护理</a>|<a href="#">身体护理</a>|<a href="#">祛痘</a></ul></div><li>服饰<div><ul id="second"><li><img src="images/精品女装.jpg" border="0">精品女装:<a href="#">针织衫</a>|<a href="#">polo衫</a>|<a href="#">连衣裙</a>|<a href="#">牛仔裤</a>|<a href="#">风衣</a>|<a href="#">短裙</a>|<a href="#">松糕鞋</a>|<a href="#">棉衣</a>|<a href="#">凉鞋</a>|<a href="#">打底衫</a>|<a href="#">夹克</a> <li><img src="images/潮流男装.jpg" border="0">潮流男装:<a href="#">T恤</a>|<a href="#">背心</a>|<a href="#">衬衫</a>|<a href="#">西装</a>|<a href="#">皮鞋</a>|<a href="#">泳裤</a>|<a href="#">帽子</a>|<a href="#">睡衣</a>|<a href="#">袖扣</a>|<a href="#">领带</a>|<a href="#">休闲裤</a></ul></div><li>零食<div><ul id="second"><li><img src="images/国内美食.jpg" border="0">国内美食:<a href="#">坚果</a>|<a href="#">肉脯</a>|<a href="#">果脯</a>|<a href="#">饼干</a>|<a href="#">特产</a>|<a href="#">炒货</a>|<a href="#">茗茶</a><li><img src="images/进口美食.jpg" border="0">进口美食:<a href="#">巧克力</a>|<a href="#">糖果</a>|<a href="#">糕点</a>|<a href="#">咖啡</a>|<a href="#">健康冲饮</a>|<a href="#">咖啡伴侣</a><li><img src="images/酒水专区.jpg" border="0">酒水专区:<a href="#">花茶</a>|<a href="#">洋酒</a>|<a href="#">啤酒</a>|<a href="#">可口可乐</a>|<a href="#">牛奶</a>|<a href="#">葡萄酒</a>|<a href="#">茶叶</a>|<a href="#">鸡尾酒</a>|<a href="#">果汁</a></ul></div><li>母婴<div id="m3"><ul id="second"><li><img src="images/婴幼儿专区.jpg" border="0">婴幼儿专区:<a href="#">奶粉</a>|<a href="#">手推车</a>|<a href="#">学步鞋</a>|<a href="#">纸尿裤</a>|<a href="#">抱毯</a><li><img src="images/孕妈专区.jpg" border="0">孕妈专区:<a href="#">防辐射系列</a>|<a href="#">妈咪包</a>|<a href="#">家居服</a>|<a href="#">营养品</a><li><img src="images/玩具.jpg" border="0">玩具/文具/教育:<a href="#">公仔</a>|<a href="#">乐器</a>|<a href="#">棋牌</a>|<a href="#">积木</a>|<a href="#">书包</a>|<a href="#">笔类</a>|<a href="#">连环画</a>|<a href="#">练习册</a>|<a href="#">乐高</a></ul></div></ul></div><div id="bottom" style="text-align:center"><hr width="80%"><p>官方微信：4783952zxx<br>©版权所有  <a herf="mailto:1294715678@">1294715678@</a></p></div></body></html>3、内容页<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>洁面</title><style type="text/css">body{color:#006e89;font-family:微软雅黑;text-align:center;background-image:url(images/轻奢背景.jpg);}#top{font-family:隶书;font-size:45px;text-align:center} #sddm{margin:0 ;padding: 0;z-index: 30;background-color:#030303;height:40px;color:#FFF}#sddm li{padding:10px 30px 5px 30px;list-style: none;float: left;font: bold 20px arial;width:130px;color:#FFF}#sddm1{background-color:#006e89;}#content{width:100%}#content1{width:25%;float:left}#content2{width:25%;float:left}#content3{width:25%;float:left}#content4{width:25%;float:left}#bottom{magin:auto auto 0 auto;text-align:center;font-size:18px;clear:left}</style></head><body><div><p align="center" id="top"><img src="images/轻奢品牌.jpg" border="0">轻奢电商</p><p align="right"><img src="images/正品保障.jpg" border="0">正品保障<img src="images/7天退换.jpg" border="0">7天退换</p></div><ul id="sddm"><li>首页<li>美妆<li>服饰<li>零食<li>母婴<li>关于我们<li id="sddm1">在售分类</ul><p align="left">您的位置>美妆>女士护肤>洁面<hr size="1"></p><div id="content" align="center"><div id="content1"><img src="images/list1.png" border="0"><br>洁面膏<br>尺码：100g<br>洁面膏彻底清除堆积在毛孔里的污垢和角质细胞，用后清爽无比</div><div id="content2"> <img src="images/list2.png" border="0"><br>草本青春洁面慕斯<br>规格：150mL<br>草本青春洁面慕斯150mL，蕴含有丰富的植物油和植物萃取，质地温和绵密，能够温和的清洁皮肤</div><div id="content3"><img src="images/list3.png" border="0"><br>玫瑰衡肤保湿洁面乳<br>尺码：80g<br>玫瑰衡肤保湿洁面乳80g，蕴含丰富的玫瑰果油，可提升肌肤水分含量<br></div> <div id="content4"><img src="images/list4.png" border="0"><br>衡肤泡沫洁面液<br>尺码：200mL<br>衡肤泡沫洁面液，玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢<br></div></div><div id="bottom" style="text-align:center"><hr><p>官方微信：4783952zxx<br>©版权所有  <a herf="mailto:1294715678@">1294715678@</a></p></body></html>五、实验总结在本次网站页面设计中，首先要整理清楚构思，根据CSS样式以及DIV块化设计完成代码设计。

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

网设计与制作课程设计报告

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

网页设计与制作 实验报告

网页设计与制作课程设计

网页设计与制作报告书

网站设计与制作课程设计报告总结

网页制作与网站设计课程设计报告

网站设计与网页制作课程设计报告

网页设计与制作实验报告