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

合集下载

网页设计与制作报告

网页设计与制作报告网页设计与制作报告(合集8篇)随着个人的文明素养不断提升，我们都不可避免地要接触到报告，报告中提到的所有信息应该是准确无误的。

为了让您不再为写报告头疼，以下是小编精心整理的网页设计与制作报告，仅供参考，欢迎大家阅读。

网页设计与制作报告1一、实习目的（一）检验自己是不是真的适合这个职业鉴于自己对未来的职业生涯的规划更倾向于设计，这和自己所学的专业不是十分有联系，所以我希望在实习的过程里思考自己未来是否适合从事这方面的工作，为以后求职之路少走弯路做一定的尝试。

（二）在实践中查漏补缺在学校学习的网站建设知识仅仅停留在平时的作业里，并没有得到充分的运用。

希望可以藉由这次实习，好好巩固书面知识。

在实际运用中通过发现问题，解决问题对知识进行查漏补缺。

（三）在工作中打磨自己由于学校和社会是截然不同的生活、学习、工作氛围，在工作中我们不可以像在学校一样随心所欲，待人接物方面需要更有礼貌的沟通和恰当好处的圆滑。

希望在实习里，和同事上司的相处中获得这方面的成长。

二、实习内容（一）实习主要内容广州xxxx有限公司是一个研发和销售智能寄存柜的公司。

它的产品在展示和销售这两个环节很需宣传册、企业网站等作为一个推广媒介。

我实习的主要内容就是配合网络部去完成网站建设的工作，涉及前台的外观设计和后台的代码编写，以及宣传册的设计。

1、负责设计公司整个企业网站的页面部分，根据网页设计师或客户所提供的主题要求和思路框架来设计出整个网站。

1）使用Photoshop、AI等图片处理软件设计、处理和制作网站上需要的图片2）使用DIV+CSS样式及基础的HTML语言做页面布局的排版3）使用Photoshop对网页进行配色及排版设计4）编写CSS代码使网站页面无论是在IE浏览器里还是在FF浏览器上正常显示2、负责网站的几个主体模块的文案撰写和后台编辑1）在已有的文案上配合网站架构进行提炼和归纳整理2）使用Photoshop对文案进行概念配图3）在后台将文案部分合理配色排版4）按照网站架构在后台录入所有产品资料（二）工作过程在公司的2个多月里，我的工作都是由负责整个网站文案架构的曹经理分配监督的。

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

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

四、网站的核心代码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块化设计完成代码设计。

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

专题页4
1、文件名：Locationst.htm
2、作用：专题网页“位置及联系”
3、主要技术：
1）表格排版、热区链接
2）CSS样式表,
3）层定位
4）CSS修饰表格边框
4、素材：图片1张：index.gif
项目难点及
解决方法
1.JavaScript程序的运用.
解决办法：通过网上找方法，以及模版的运用。
课程设计报告
课程名称：网页设计与制作日期：2013.12.20
姓名
班级/学号
项目标题
汽车维修与配件服务
内容简介
汽车维护，修理以及汽车配件选定和汽车服务
项目特色
简单
快捷
方便
到位
开发计划
（时间及内容安排）
1.首先花一天的时间进行构思，想好要做的主题，然后找好大概的材料。
2.接着花2天的时间来进行主页的设计与制作，并且构思导航页。
2）CSS修饰表格边框
4、素材：图片5张：静态图片。
专题页1
1、文件名：Maintenance.htm
2、作用：专题网页“维护”
3、主要技术：
1）表格排版、热区链接
2）层定位
3）CSS修饰表格边框
4、素材：图片5张：静态图片。
专题页2
1、文件名：Repair.htm
2、作用：专题网页“修理”
3、主要技术：
2.导航条接入页面不正确.
解决方法：通过网上查找发现是页面文件名不能用中文，修改即好。
收获与思考
通过这门课程，让我深刻的体会到了做网页的乐趣与成就。从一开始空白的页面，变成最后绚丽多彩的网页。做完后真的有一种小小的成就感。我们学计算机的每天对着电脑，浏览过的网页无数。但却很少会真正去了解或者思考页面是怎么来的，是怎么做的，在接触这门课之前我也是从没想过，但现在我真的该好好的思考以及反省.。因为这门默默无闻的课程实在蕴含着太多的技术以及知识，需要我好好的进行学习。一学期过去了虽然我只学到了这门知识的鸡毛蒜茸，但我却感觉学了很多很多。这么看来我还得认认真真地学习下去才能精通这门课程，虽然这学期要结束了但我往后会更认真地学习。

网页设计与制作课程设计

网页设计与制作课程设计一、课程目标知识目标：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)。

进一步熟悉和领悟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>|<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%"></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></body></html>五、实验总结在本次网站页面设计中，首先要整理清楚构思，根据CSS样式以及DIV块化设计完成代码设计。