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

合集下载

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

网设计与制作课程设计报告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）第六周：网页布局与设计第七周：网站发布与管理第八周：课程总结与作品展示教材章节关联：《信息技术》教材第三章：网站设计与网页制作教学内容与教材内容紧密关联，确保科学性和系统性，便于学生掌握和应用。

网页设计与制作报告

网页设计与制作报告一、前言。

在当今数字化信息时代，网页设计与制作已经成为了各行各业的必备技能。

随着互联网的普及和发展，网页设计与制作的重要性日益凸显。

本报告旨在对网页设计与制作进行全面的介绍和分析，以期为相关人员提供参考和指导。

二、网页设计的基本概念。

网页设计是指通过设计软件和技术手段，将网页内容进行布局、美化和排版，使之成为具有艺术感和实用性的网页。

网页设计的基本概念包括布局设计、色彩搭配、图片处理、字体选择等方面。

在设计过程中，需要考虑用户体验和页面加载速度，确保网页能够吸引用户并且流畅地展现内容。

三、网页制作的关键技术。

网页制作是指利用HTML、CSS、JavaScript等技术，将设计好的网页进行编码和制作，使之成为可以在浏览器中正常显示的网页。

在网页制作过程中，需要注意代码的规范性和兼容性，确保网页在不同浏览器和设备上都能够正常显示。

同时，还需要关注网页的性能优化和安全性，以提升用户体验并保护网站安全。

四、网页设计与制作的实际应用。

网页设计与制作在各行各业都有着广泛的应用。

无论是企业官网、电子商务平台，还是个人博客、社交媒体页面，都需要经过精心的设计与制作。

通过合理的网页设计和高质量的制作，可以提升网站的形象和用户体验，吸引更多的访问者并实现商业目标。

五、未来发展趋势。

随着移动互联网的快速发展，响应式设计和移动端优化已经成为了网页设计与制作的重要趋势。

未来，人工智能、虚拟现实等新技术也将对网页设计与制作产生深远影响。

设计师和开发者需要不断学习和更新技术，以适应行业的发展变化。

六、结语。

网页设计与制作是一个综合性强、技术含量高的工作，需要设计师和开发者具备扎实的专业知识和丰富的实践经验。

通过本报告的介绍，相信读者对网页设计与制作有了更深入的了解，希望能够为相关人员在实际工作中提供一些参考和帮助。

愿网页设计与制作在未来能够不断创新，为互联网世界带来更多的精彩与可能。

网页设计与制作实验报告

学号：20题目网页设计与制作学院计算机科学与技术学院专业计算机应用班级1004姓名李俊清指导教师丁一2012年6月10日实验一：网页设计html一、实验目的1．掌握常用的HTML语言标记。

2．利用文本编辑器建立HTML文档，制作简单网页。

3．掌握网页制作功能的使用。

二、实验内容1．熟悉制作网页的基本方法。

2．掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置3．建立一个网站。

三、实验步骤1．在E:盘上建立一个文件夹如myweb作为自己的web站点根目录，在文本编辑器EditPlus 中输入如下的HTML代码程序，保存为以.htm或.html为后缀的文件如index.htm作为自己的第一个页面，并在浏览器中运行。

<html><head><title>我的第一个网页</title></head><body><h1>欢迎访问我的网站。

</h1><h3>欢迎访问我的网站。

</h3><h5>欢迎访问我的网站。

</h5></body></html>2.在标记中分别加入以下属性，看看index.htm有什么变化。

bgcolor=#背景颜色#=rrggbb(16进制的RGB值)或颜色名称background=#背景图像#=image-URL(图片所在路径)text=#非可链接文字的色彩bgproperties=FIXED背景图像不动<html><head><title>我的第一个网页</title></head><body bgcolor="#CCCCFF" text="#"><h1 align="center">欢迎访问我的网站。

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

网页设计与制作课程设计报告学校：课题：专业班级：姓名：学号：指导教师：目录1设计目的 (1)2设计思想 (1)3网页详细设计分析 (2)3.1建立站点 (2)3.2建立布局 (3)3.3网页中的图像 (4)4结论 (8)1．设计目的阐述该个人网站的设计意图和创意，简单介绍自己的个人网站。

2．设计思想阐述网站的整体设计思想，包括：①网站整体结构规划思想要求阐述网站整体结构的选择、设计的思想，绘制网站结构草图。

②主页设计思想要求对主页的布局思路进行阐述和分析。

③子页的设计思想要求对子页的设计以及网页对象的选取思路进行阐述和分析。

3．网页详细设计分析要求选取一张网页，对网页的设计实现过程进行阐述和分析，详细说明制作该网页的步骤，所使用的网页对象以及该网页对象的操作方法。

4．结论对整个设计报告做归纳性总结，并分析设计过程中的困难及如何解决的，最后提出展望。

一、设计目的本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。

结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法；了解网页设计制作过程。

通过设计达到掌握网页设计、制作的技巧。

了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。

增强动手实践能力，进一步加强自身综合素质。

我本次主要是设计的以“邵阳学院之旅”为主题的网页，针对邵阳学院的风景做了介绍。

二、设计思想利用Dreamweaver cs3制作一个关于“邵阳学院之旅”的网站，利用表格、行为、层和链接等网页设计技术设计页面。

本网站以邵阳学院旅游为素材，主要讲解了与邵阳学院景关相关的内容。

首页设校园景观和学校介绍两个栏目。

网页设计与制作报告

网页设计与制作报告网页设计与制作报告精选8篇在人们越来越注重自身素养的今天，报告与我们的生活紧密相连，我们在写报告的时候要注意逻辑的合理性。

那么报告应该怎么写才合适呢？下面是小编帮大家整理的网页设计与制作报告，欢迎阅读，希望大家能够喜欢。

网页设计与制作报告1毕业后，我来到了社会这个汇集众多江河湖水的大海，感受到了独立生活的好处与艰辛，同时我自己也更深的理解了，家长和学校老师对我们的殷切希望，在社会实习的这段日子，我吃了些苦，受了些罪，可是整个人在肉体上和精神上却升华了很多，也比以前的变得更有自信了。

现将我的实习情况汇报如下：一、实习工作介绍我所在的这家公司，是一家做网上招商的商业网站，公司接收各种厂家提供的信息，然后由网络的技术人员，将商家的信息做成网页广告，然后挂在我们的网站上，以此达到商业推广的目的，类似我们公司的网站在同行业还有u88、28招商网等。

我和其它几位同事做为网络部的技术人员，主要的工作就是接收美工人员的网站模板，将其通过photoshop切片，然后导入dreamweaver进行排版，（排版主要使用css+div），并进一步的加以制作，完善美化，如加入js代码，或透明flash，因为网页是用css+div进行排版的，所以在最后一步的时候，我们还需要进行浏览器测试，因为css+div排版方式有一个最大的缺点就是：浏览器不兼容的问题，典型的如：ie与fireworks，因为各种浏览器使用的协议不同，所以会导致页面在最终浏览的时候有一些小问题，如：页面混乱，图片、文字之间的距离过大或过小，页面不美观等等，做为一个新人，我在有些方面的技术还很不成熟，所以在技术总监张伟的帮助下，解决了很多问题，所在我很感谢他，当每天我们做完网页后，都会在代码页面加入注释代码，在里面写上每个人姓名的汉语拼间和工作日期，这样方便月底做统计工作，公司领导会根据每个人的工作数量进行奖励，每做一个页面会有2块的提成，虽然少点，但是积少成多，也是很可观的。

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

网页设计与制作课程设计报告书题目：_____________________________专业：_____________________________ 班级：____________________________ 学号：____________________________ 姓名：_____________________________山西大学商务学院学院信息学院1. 概述 (3)2. 功能需求分析 (3)3. 网站设计 (3)3.1网站总体设计 (3)3.2数据库设计 (4)3.3目录结构的设计 (5)4. 网站技术实现 (6)4.1前台系统的实现 (6)4.2后台系统的实现 (8)5. 总结 (8)这更需要网站开发利用ASP+Access2. 功能需求分析现实生活中的书店涉及范围有限，经营成本高，而网上书店提供了全面、详细的图书购物入口，轻松实现快捷地购买。

网上销售能通过广泛的信息传递而影响购买者，具有明显的扩销效果；网上商店是虚拟的商店，没有物理意义上的房屋和店面，也不需要营业员从事销售现场管理，业务环节大为简化，不仅能节省大量的劳动力，而且也能大幅度降低劳动耗费；网上商店不存在商品积压损失，能有效地降低库存，减少资金占用。

通过金潮网，可以使消费者通过不同分类进行导航，同时提供了图书购物所需的各种工具，用最方便、最快捷的方式找到消费者需要的图书，满足消费者的图书购买需求。

根据大部分网上购物系统的基本流程，确定系统的具体需求如下。

（1）顾客可以方便地注册与登录。

（2）顾客可以灵活地检索所需的商品信息以及了解特价商品信息。

（3）顾客可以方便地查看详细的商品资料。

（4）顾客可以方便地管理自己的购物车（添加或删除选购商品，修改购买数量及在线下订单等操作）。

（5）顾客可以反馈自己的意见或留言。

（6）商品管理员可以方便地管理商品及特价商品信息（新增、删除、修改商品及特价商品）。

（7）订单管理员可以方便地查看订单，进行发货与缺货处理。

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

2014-2015学年第一学期《网页设计与制作》课程设计报告题目：维影影视公司网页设计专业：数字媒体技术班级：12（1）班姓名：*******指导教师：***成绩：计算机与信息工程系二0一四年六月二十日目录1 设计内容及要求 (2)1.1设计内容 (2)1.2设计任务及具体要求 (2)2 总体设计 (3)2.1该网站的功能简介 (3)2.2 网站设计概括图 (3)3设计过程 (4)3.1各个模块的设计流程 (4)3.2对关键代码和效果处理加以分析说明 (7)4设计结果与分析 (11)5 小结 (12)致谢 (13)参考文献 (14)1 设计内容及要求1.1设计内容《维影影视网站》主要根据课程设计要求进行设计，并了解了维影公司的基本情况，该网站主要包括六大模块：1）导航栏模块，主要有首页、产品展示、新闻动态、留言板、关于我们、联系我们。

2）新闻动态模块，最近的一些影视方面的信息。

3）产品分类模块，主要是些电影的类型分类。

4）在线客服模块，为来访者提供一些我们公司的在线服务。

5）公司简介模块，介绍公司的一些基本情况。

6）热销产品模块，向大家介绍一些我们公司的一些热销电影。

1.2设计任务及具体要求主要利用Photoshop和Dreamweaver进行一个小型的影视公司网站开发，网站内容涵盖了维影影视公司的一些最基本情况，以及维影公司的最新电影出台情况，并且提供一系列的人工在线服务为我们的来访者解答这种问题。

要求：明确课程设计的目的，能根据课程设计的要求，查阅相关文献，为完成设计准备必要的知识；提高学生用Photoshop和Dreamweaver进行程序设计的能力，重点提高用Dreamweaver进行网页制作技术水平；初步了解软件开发的一般方法和步骤；提高撰写技术文档的能力。

2 总体设计2.1该网站的功能简介该网站的主要功能是介绍维影公司的基本情况，并作为一个功能型的网站展示给我们大家，包括一些最新电影展示，最终目的还是为一些想做影视的公司提供一些服务，宣传自己。

网页设计与制作报告

桂林理工大学课程设计说明（2015 —2016 学年第一学期）课程名称：网络前端技术应用班级：网络15-2 班_学号：——————____ 姓名：______孙淑宇__成绩：_________________目录第一章网站主题说明 (2)1、主题说明 (2)2、网站设计的目的 (2)3、网站设计的思路 (2)4、站点地图说明 (3)第二章使用技术及运行环境的说明 (3)1、表格的使用 (3)2、层的使用 (4)3、运用Photoshop工具 (4)4、CSS样式 (4)5、热点链接 (4)6、框架使用 (5)7、文字移动效果 (5)第三章课程设计的心得与体会 (5)第四章主页说明 (7)第五章分页说明 (9)第六章版权说明 (11)我美丽的家乡--河南鲁山一、网站主题说明1、主题说明网站主题：我美丽的家乡河南鲁山2、网站设计的目的通过综合实训进一步巩固，深化和加强我们的的理论知识与专业技能。

（1）、进一步熟悉和掌握网站建设的基本流程和技术规范；（2）、巩固运用Dreamweaver网页制作软件制作静态网页的知识；（3）、巩固综合运用Dreamweaver独立设计一个内容完整、图文并茂、技术运用得当的网站；（4）、具备独立撰写实训报告的基本能力；（5）、在网页设计的实践中培养分析问题、解决问题的能力，培养我们的创新能力和团队意识；（6）、培养我们理论联系实际的工作作风、严肃认真的科学态度以及独立工作的能力，树立自信心；（7）、为今后从事网站开发、维护和管理奠定基础。

3、网站设计的思路利用禅意花园的优秀布局设计，再加入自己的想法和思路。

以我美丽的家乡—河南鲁山为主题，介绍了家乡的人文，经济，美食。

并插入音乐，给人以欣赏和聆听的美的体验，以下为具体设计思路：1、站点规划，搜集资料。

确定网站主题内容，规划站点结构，从网上搜索相关资料（图片、文字等）。

2、进行主页设计。

构思主页布局，进行主页标题图片的设计，进行主页其余图片的设计和页面内容的录入，最后进行主页的整体优化设计。

网页制作设计实验报告(3篇)

第1篇一、实验目的1. 熟悉网页制作的基本流程和工具。

2. 掌握HTML、CSS等网页制作技术。

3. 提高网页设计的审美能力和实践能力。

4. 学会运用网页设计中的排版、色彩、字体等元素。

二、实验内容1. 网页制作的基本流程：（1）需求分析：明确网页主题、目标用户、功能需求等。

（2）页面规划：确定页面布局、结构、模块划分等。

（3）内容制作：编写HTML代码、CSS样式表等。

（4）测试与优化：检查网页兼容性、加载速度等，进行优化。

2. 网页制作工具：（1）文本编辑器：Notepad++、Sublime Text等。

（2）网页设计软件：Adobe Dreamweaver、Microsoft Expression Web等。

（3）浏览器：Chrome、Firefox、Safari等。

3. 网页制作技术：（1）HTML：超文本标记语言，用于构建网页的基本结构。

（2）CSS：层叠样式表，用于美化网页，控制页面布局、字体、颜色等。

（3）JavaScript：一种脚本语言，用于实现网页交互功能。

4. 网页设计元素：（1）排版：页面布局、模块划分、文字排版等。

（2）色彩：颜色搭配、背景色、文字颜色等。

（3）字体：字体选择、字号、行间距等。

三、实验步骤1. 需求分析：确定网页主题为“个人博客”，目标用户为年轻人，功能需求包括文章展示、评论互动、友情链接等。

2. 页面规划：（1）首页：顶部导航栏、文章列表、侧边栏、底部友情链接。

（2）文章页：标题、正文、评论区域。

（3）评论页：展示评论内容、发表评论功能。

3. 内容制作：（1）HTML代码：编写页面结构、布局、模块划分等。

（2）CSS样式表：设置页面样式、颜色、字体等。

（3）JavaScript脚本：实现页面交互功能。

4. 测试与优化：（1）检查网页兼容性：在Chrome、Firefox、Safari等浏览器中测试。

（2）检查网页加载速度：使用在线工具检测页面加载时间。

网页设计与制作报告(6篇)

网页设计与制作报告(6篇)网页设计与制作报告(6篇)网页设计与制作报告1一、实习目的：通过社会实践，可以把我们在学校所学的理论知识，运用到客观实际中去，使自己所有用武之地。

以便能够达到拓展自身的知识面，扩大与社会的接触面。

1、了解平面设计在焦作的市场现状及前景。

2、进一步掌握ps，coreldraw，等设计软件的运用。

3、尝试把学校里学习的平面设计相关理论运用到实习过程中。

4、初探做好平面设计师的方法，熟悉平面设计的方法和程序步骤。

5、培养人际交往与社交能力，为成为平面设计师作准备。

二、实习时间：2023年1月1日―4月30日三、实习地点：威美（上海）金融伟德服务有限公司四、实习内容：平面设计五、实习总结：即将面临大学毕业，因为伟德视觉传达专业，想丰富一下自己的知识，所以我找到了一家互联网金融公司做UI平面设计，虽然和我所学的专业有些差异，但它对于我来说是受益匪浅，我所在的公司威美（上海）金融伟德服务有限公司，主要是网页设计为主，也与绘画有所伟德，既然选择这个公司，我就要好好去学，使自己的基础更牢固，技术更全面，在大学里学的知识却不知道如何运用，想伟德多个伟德，因此我非常珍惜这次实习的机会，在有限的时间里加深对绘画对设计的了解，找出自身的不足。

实习的内容是页设计（Ps，ai，arp等软件的使用）。

在实习过程中，我深深地感受到作为设计师通常缺乏足够的对市场的了解和对管理层领导上的沟通，做出的设计作品经常会与市场经济脱节；而作为管理者通常缺乏设计基础和审美能力，往往为了追求市场效益，过多地拘束设计师的思维与创新，忽略了设计要素的重要性，造成了设计的庸俗化。

来到公司，第一天进公司，与经理进行了简单面谈后，部门总监把我分配给伟德经理，伟德经理是我的直接领导，所有工作由伟德经理分布。

第一天来到公司要赶做两个网页banner，接到文案后就在网络上搜集大量banner素材，找了几个适合这次文案的banner然后用Photoshop简单的修改图片，第一天没有做好，幸好领导说第二天晚上再交给他，于是我就乖乖的回家找图片。

网页设计与制作实验过程及报告

网页设计与制作实验过程及报告第一篇：网页设计与制作实验过程及报告网页制作过程及报告网页设计与制作的一般实验步骤：1、确定网站主题网站里的每一个网页都要有统一的风格，以加强渲染自己性格的效果。

最重要的是做出自己的风格，吸引浏览者的眼球。

2、搜集材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻，同时，查询相关的图书、报纸、光盘、多媒体等，也可以得来更加有说服力的信息。

3、规划网站我的网站包括5个页面。

版面设计要灵活，根据各部分内容的不同适当的自由设计。

但是每个页面的主元素和位置不能变。

用CSS设计一个样式，以保证随时、准确的调用。

另外，为了网页布局的协调，还可以加入flash动态图片，会达到更好的效果。

4、选择合适的制作工具做网页的首先工具当然为Dreamweaver。

5、认识网页设计工具Dreamweaver（1）Dreamweaver的启动（2）窗口组成的认识6、新建站点7、站点中首页的创建8、制作网页素材、风格、模板都设计好以后，下一步就是具体的制作网页。

制作网站时，首先要做的就是站点的规划，建立一个本地站点。

网页中的css 样式文件也应统一管理，做到有条不紊。

9、根据自己的网页风格，在网上搜集合适的图片。

最后还要制作各个页面的链接，把整个网页可怜起来，形成一个统一的整体，方便浏览者进行各个页面间的跳转。

10、上传测试网页制作完毕以后，要进行测试，在浏览器上运行自己的网站，反复测试，以发现设计中的缺陷。

实验结果及理论分析：通过这简短的三个周的学习，让我有一个独立设计，制作网页的机会，通过这次试验，我的收益颇多。

首先，独立的实践了一个完整的网站设计的全过程，把设计中零散的注意点和要求在自己大脑中形成了一个完整的框架体系，使平时学到的知识点有了一个质的升华，并且合理的在试验中进行了实践。

第二，在这次实验的过程中，我搜集了大量的素材和网页设计的技术技巧方面的书，扩大了知识面，给我在以后的设计过程中能博采众长，制作出技术精湛的网页打下了基础。

网页设计与制作课程实验报告(可编辑优质文档)

网页设计与制作课程实验报告（可编辑优质文档）(可以直接使用，可编辑完整版资料，欢迎下载）桂林航天工业高等专科学校电子工程系网页设计与制作课程实验报告2021-----2021学年第一学期专业：通信技术班级：2021041204 学号：39 姓名：高秋妹指导教师: 李云第一章网站概述1.1 需求分析：在21世纪的今天，中国互联网技术已经进入了一个高速发展的阶段，直接通过网络浏览网站，已经成为越来越多网民的选择，根据调查，中国目前有3亿多网民，其中50%的网民有过在网络上浏览网页获取社会信息的经历。

展望未来，机会无限。

在这样的背景之下，设计一个以文字和图片为主的系部网站，主要满足一下需求：充分发挥系二级网站的对外宣传效果，体现自身专业优势、名师风采、学生工作等内容，全面展示我校整体形象和办学特色。

1.2 功能概述：这次实现的是系部网站设计，主要内容有：系部网站首页的实现，和首页相关的内容，即通知公告，最新动态，友情链接，专业设置，师资建设，学生工作及文表下载等。

1.3网站风格：网站给人的第一印象来自视觉冲击，确定网站的标准色彩是相当重要的一步。

不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。

在本网站里主要用到的颜色有：淡蓝色和白色，网站看上去给人的第一印象就是温馨、充满梦想的网站。

1.4 可行性分析：网站设计与制作是专业课之一，随着网络的开放、电脑的普及率、以及计算机技术的提高，同时网上资源丰富多彩，加上已有一定的技术基础和优秀的老师作相关的指导，建设该班级网站有一定的可行性。

第二章网站制作2.1网页结构：2.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块化设计完成代码设计。

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

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

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

网页设计与制作 实验报告

网页设计与制作课程设计

网页设计与制作报告书

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

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

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

网页设计与制作报告

网页设计与制作实验报告

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

网页设计与制作报告

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

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

网页设计与制作报告

网页制作设计实验报告(3篇)

网页设计与制作报告(6篇)

网页设计与制作实验过程及报告

网页设计与制作课程实验报告(可编辑优质文档)

网页设计与制作实验报告