网设计与制作课程设计报告
高职《网页设计与制作》的课程设计
收稿 日期 ：２０１０—０３—１９ 作者 简 介 ：胡 雪梅 （１９６５一），女 ， 四川 宜 宾人 ，４，ｉ教授 ，工 学硕 士 ，主要 研 究方 向 ：计 算机 应 用技 术 ；胡 建 荣 （１９６３－）， 男 ，
浙 江桐 乡人 ，讲 师 ，工 学硕 士 ，主要 研 究 方向 ：计 算机 网络 技 术 。
（二 ） “任 务 驱 动 ” 的 教 学 方 法 采 用 任 务 驱 动 为 主 的教 学方 法 ，以 若 干 个 项 目为载 体 ． 将 网 页 设 计 与 制 作 的 知 识 点 和 技 术 要 点 穿 插 到 各 个 项 目任 务 中进 行 讲 解 ，使 学 生 掌 握 各 个 知 识 点 的实 际应 用 。
基 于 网 页 设 计 课 程 的 特 点 。我 们 设 计 了课 程 的整 体 教学 方案 ：
（一 ） “模 块 化 ” 的 课 程 内容 根 据 职 业 岗 位 对 知 识 掌 握 的要 求 ，将 网 页 制 作 员 和 管 理 员 必 备 的 知 识 和 技 能 分 为 ５大 模 块 ：网 页 基 础 模 块 、网 页 制 作 模 块 、 网 页 代 码 模 块 、 网站 管 理 模 块 和 综 合 实训 模 块 。
网页 设 计 与 制 作 课 程 具 有 以 下 特 点 ：首 先 ，
网页 设 计 课 程 具 有 很 强 的 操 作 性 和 实 践 性 ，特 别 强 调 学 生 的 操 作 能 力 和 学 以 致 用 的 综 合 实 践 能 力 ；其 次 ，网 页 设 计 没 有 固 定 的模 式 ，它 要 求 学 生 在 掌 握 网页 设 计 的基 本 理 论 和 方 法 的 基 础 上 。充 分 发 挥 自己 的 想 象 力 和 创 造 力 ，灵 活 运 用 所 学 的知 识 进 行 创 造 性 的 设 计 ：再 次 ， 网 页 设 计 课 程 具 有 很 强 的 现 实 性 和 时 效 性 ，具 有 明 显 的 时 代 发 展 特 点 。 因 此 我 们 的 教 学 不 是 单 纯 教 会 学 生 如 何 掌 握 某 些 知 识 和 某 种 技 能 ，而 是 要 培 养 学 生 获 取 、理 解 、分 析 、加 工 、处 理 、 创 造 和活 用 知 识 的 能力 。
课程设计报告(web前端开发)
课程设计报告(web前端开发)一、课程目标知识目标：1. 学生能理解并掌握HTML5、CSS3和JavaScript的基础知识，了解网页的基本结构和常见的前端开发技术。
2. 学生能了解并运用响应式设计原理，实现不同设备上的网页适配。
3. 学生掌握DOM操作，能实现动态交互效果和数据绑定。
4. 学生了解前端框架Vue.js的基本使用，能运用其进行组件化和模块化开发。
技能目标：1. 学生能运用所学知识独立完成静态网页的设计与制作，具备基本的网页布局能力。
2. 学生能通过JavaScript和框架实现简单的网页交互功能，提高用户体验。
3. 学生具备团队协作能力，能在项目中发挥自己的专长，与他人共同完成项目开发。
情感态度价值观目标：1. 培养学生对前端开发的兴趣和热情，激发其主动学习和探索的精神。
2. 培养学生具备良好的编程习惯，注重代码规范和性能优化。
3. 培养学生面对困难和挑战时，保持积极心态，善于寻求解决方案。
4. 培养学生具备合作精神，尊重他人意见，学会倾听和沟通。
课程性质：本课程为实践性较强的课程，注重培养学生的动手能力和实际项目经验。
学生特点：学生具备一定的计算机基础，对前端开发有一定了解，学习积极性较高。
教学要求：结合实际项目案例，以任务驱动的方式进行教学，注重理论与实践相结合，提高学生的实际操作能力。
同时，关注学生的个体差异，进行差异化教学，确保每个学生都能在课程中取得进步。
在教学过程中，及时评估学生的学习成果，调整教学策略，以达到课程目标。
二、教学内容1. 网页基础知识- HTML5基本标签、属性和文档结构- CSS3选择器、样式属性、盒模型和布局- 网页色彩、字体和图标设计2. 响应式设计- 媒体查询和设备适配- 弹性布局和网格布局- 移动端和桌面端页面优化3. JavaScript基础- 数据类型、运算符、流程控制- 函数、对象和数组- DOM操作、事件处理和表单验证4. 前端框架Vue.js- Vue.js基本概念、生命周期和指令- 组件化开发和模块化设计- 数据绑定、计算属性和侦听器5. 项目实战- 网页设计与制作：静态页面布局、样式设计、交互功能实现- 前端工程化：版本控制、构建工具、性能优化- 团队协作：项目分工、沟通与协作、代码审查教学内容安排与进度：第一周：网页基础知识学习第二周：响应式设计原理与实践第三周：JavaScript基础及DOM操作第四周：Vue.js框架学习第五周：项目实战与前端工程化第六周：团队协作与项目总结教材章节关联：《HTML5与CSS3权威指南》第1-5章、第7-9章《JavaScript高级程序设计》第1-6章、第13章《Vue.js实战》第1-7章教学内容确保科学性和系统性，结合实际案例，使学生掌握前端开发的核心知识，培养其解决实际问题的能力。
网页设计与制作说课
出包括课程主要知识点的综合性网站。期末考核成绩占总评成绩的 60%
四 教学资源
4.1 教材选用情况数字化教辅资源 4.2 实践教学条件 4.3 师资队伍
4.1 教材选用情况数字化教辅资源
六 课程特色
特色： 教学观念先进，突出应用能力培养。 本课程本着理论够用、实践加强的原则，突出应用能力的培养。适 时调整教学内容，保持与Web技术的发展同步。改革考核方式，注 重学生的学习过程。
创新点：
1、在学习当中，注意引导学生获得美的熏陶，提高审美能力。 2、强调技术与艺术的融合，将网页作品当作一份具有生命力的 艺术品。 3、 以真实网站作为教学案例，让学生在真实工作环境中训 技能，提高学生适应岗位需求的能力。 4、 虚拟项目设计考核模式。，给学生一些虚拟项目作为课程 设计，培养学生单独规范的做项目的能力及网站设计的综合能力， 也让学生找工作时可以向用人单位提供一个完整的网站设计的作品
其它网络资源
4.2 实践教学条件
学生实习实训机房具有一定规模，能够人手一机，满足教学大纲要求 的全部实训内容和选修实训内容。学生上机所需的软件齐备，如： PhotoShop、dreamweaver等。在多年的教学过程中，本课程 已具备了较完整的多媒体教学的条件，有整套的电子教案，案例、习 题等
4.3 师资队伍
3. 重视以真实的社会项目作为教学内容，倡导将教学结果作为项目内 容直接提交给用户，使得学另外生能够零距离地接触市场。扩大校 外实训基地建设，以满足本课程真实工作任务下的教学。
4. 在学习网页设计技术之前，引入美术课程的教学，使学生具备一定 的美术功底
动态网页制作课程设计
动态网页制作课程设计一、教学目标本课程旨在通过学习动态网页制作的相关知识，让学生掌握HTML、CSS和JavaScript基本技能，能够独立完成简单动态网页的设计与制作。
在知识目标方面，要求学生了解网页设计与制作的基本原理，掌握HTML标签的使用、CSS样式设计和JavaScript脚本编程。
在技能目标方面，要求学生能够运用所学知识进行网页布局、美观设计和交互功能实现。
在情感态度价值观目标方面，培养学生对网页设计与制作的兴趣，提高创新意识和团队协作能力。
二、教学内容本课程的教学内容主要包括HTML、CSS和JavaScript三个部分。
教学大纲安排如下：1.HTML基础知识：介绍HTML的基本结构、标签及其属性，使学生能够理解并正确使用HTML标签编写网页。
2.CSS样式设计：讲解CSS的基本语法、选择器、属性和单位，培养学生对网页样式的设计和调整能力。
3.JavaScript脚本编程：介绍JavaScript的基本语法、函数、事件处理和DOM操作，使学生能够实现网页的交互功能。
4.综合实践：通过实际案例，让学生综合运用所学知识完成一个动态网页的设计与制作。
三、教学方法为了提高教学效果，本课程将采用多种教学方法相结合的方式。
包括：1.讲授法：教师讲解基本概念、语法和技巧，引导学生掌握动态网页制作的相关知识。
2.案例分析法：分析经典案例，让学生了解动态网页制作的实际应用，提高学生的实践能力。
3.实验法：学生在实验室进行实际操作，巩固所学知识，培养实际动手能力。
4.小组讨论法：分组进行讨论，促进学生之间的交流与合作，培养团队协作能力。
四、教学资源为了支持教学内容和教学方法的实施，我们将准备以下教学资源：1.教材：《动态网页制作教程》及相关辅助资料。
2.多媒体资料：PPT课件、教学视频、在线教程等。
3.实验设备：计算机、网络环境、网页设计软件等。
4.在线资源：为学生提供丰富的在线学习资源，如开源框架、教程博客等，便于学生自主学习和拓展。
网站开发课程设计报告
网站开发课程设计报告一、课程目标知识目标：1. 让学生理解网站开发的基本概念，掌握HTML、CSS和JavaScript的基础知识；2. 使学生了解网站设计的基本原则，包括页面布局、色彩搭配和用户体验；3. 帮助学生了解网络协议和域名解析，明白网站上线和访问的基本原理。
技能目标：1. 培养学生运用HTML和CSS进行网页布局和样式设计的能力；2. 培养学生利用JavaScript实现简单交互功能的能力；3. 培养学生独立完成一个简单网站项目的开发与部署。
情感态度价值观目标：1. 培养学生对网站开发的兴趣和热情，激发学生主动探索新技术；2. 培养学生具备团队协作精神，能够与他人共同完成项目任务；3. 培养学生遵循网络道德规范，关注网络安全和知识产权。
课程性质：本课程为信息技术课程，以实践为主，注重培养学生的动手能力和创新能力。
学生特点：六年级学生具备一定的计算机操作能力，对新事物充满好奇，但注意力容易分散，需要激发兴趣和引导。
教学要求：结合学生特点，采用任务驱动法、案例教学法和分组合作法，确保学生在实践中掌握网站开发的基本技能。
同时，注重培养学生的自主学习能力和团队协作能力，使学生在完成课程目标的同时，达到情感态度价值观目标。
通过分解课程目标为具体的学习成果，为后续的教学设计和评估提供依据。
二、教学内容1. 网站开发基础知识：- HTML基础：标签、属性、文本格式化、链接、图片、表格等；- CSS基础：选择器、盒模型、布局、样式优先级、响应式设计等；- JavaScript基础：变量、数据类型、运算符、函数、事件处理等。
2. 网站设计原则：- 页面布局：了解常见的布局方式，如Div+CSS布局、Flex布局等；- 色彩搭配：掌握基本的色彩理论，了解如何进行网站配色；- 用户体验：关注用户需求，了解网站易用性、交互设计等。
3. 网络协议与域名解析：- 网络协议：了解HTTP/HTTPS协议，明白网站请求与响应过程；- 域名解析：掌握域名与IP地址的对应关系，了解DNS解析过程。
web网页设计课程设计报告
《web开发技术》课程设计学院：工学院专业：软件工程班级：1401姓名：兰欣学号：29指导教师：姬广永2015年12月31日工学院课程设计评审表《web开发技术》课程设计任务书新疆行网站的设计1设计目的随着我国经济的迅速发展，人们的生活水平有了显着提高，假日经济和旅游经济已成为人们消费的热点。
各地也把旅游业当作本地经济发展的重要支柱之一，从而带动别的经济产业的快速发展。
旅游网站也就成为了各旅游胜地和旅行社对外宣传中不可缺少的工具，它的内容对于旅游胜地的宣传和旅游地的项目的开发的决策起着非常重要的作用。
新疆拥有丰富的地域优势和民族民俗文化旅游资源，该网站通过首页、新疆简介、风土人情、吃在新疆、路线选择五个页面，文字与图片搭配来介绍新疆旅游。
2网站规划网站的类型：旅游网站网站主题：新疆行网站风格：网站以蓝色为主色调，以白色为辅色，布局简单明了，突出新疆风景秀丽原生态。
使用的技术：Html、Div、CSS、JavaScript、Photoshop网站栏目：首页、新疆简介、风土人情、吃在新疆、路线选择网站结构示意图：3站点首页设计首页采用导航在主视觉下方的布局，导航放在banner下面的好处是可以弥补banner中设计素材截断的缺点，让设计看上去完整、自然。
在导航条下划分左中右三个内容区，分别用风景与简洁的文字来吸人眼球。
在图片的选择上，一是体现出新疆旅游景点的特色，而是与主色调蓝色相呼应，是整体更协调。
网站主页效果图首先在网上搜集大量的图片和文档进行整理，对进行图像处理，并制作了一些图像，进行保存用于网页设计。
用Div对页面进行布局，用CSS对页面进行控制，最后再添加超链接以及特效。
主页源代码<!DOCTYPE html PUBLIC "-/images/ no-repeat;margin:0px;}#globallink a:link, #globallink a:visited{color:#004a87;text-decoration:underline;}#globallink a:hover{color:#FFFFFF;text-decoration:underline;background:url(../images/ no-repeat;}#left{float:left;width:200px;background-color:#FFFFFF;margin:0px;padding:0px 0px 5px 0px;color:#d8ecff;}#left div{background-color:#5ea6eb;margin:0px 5px 0px 5px;}.map{margin:0px 5px 0px 5px;background-color:#5ea6eb;}#left div h3{font-size:12px;padding:4px 0px 2px 15px;color:#003973;margin:0px 0px 5px 0px;background:#bbddff url(../images/ no-repeat 5px 7px; }#today{padding:0px 0px 10px 0px;}#today ul{list-style:none;margin:-5px 0px 0px 0px;padding:0px;}#today ul li{text-align:center;}#today ul li img{border:1px solid #FFFFFF;margin:8px 0px 0px 0px;}#today ul li a:link, #today ul li a:visited{color:#d8ecff;text-decoration:none;}#today ul li a:hover{color:#FFFF00;text-decoration:underline;}#middle{background-color:#FFFFFF;margin:0px 0px 0px 2px;padding:5px 0px 0px 0px;width:400px; float:left;}#middle div{margin-left:5px;margin-right:5px;position:relative;}#middle h3{margin:0px; padding:0px;height:41px;}#middle h3 span{display:none; /* 文字去掉，换成图片*/ }#beauty{margin:15px 0px 0px 0px;padding:0px;}#beauty h3{background:url(../images/ no-repeat;}#beauty ul, #route ul{list-style:none;margin:8px 1px 0px 1px;padding:0px;}#beauty ul li{float:left;width:97px;text-align:center;}#beauty ul li img{border:1px solid #4ab0ff;}#route{clear:both; margin:0px;padding:5px 0px 15px 0px;}#route h3{background:url(../images/ no-repeat;}#route ul li{padding:3px 0px 0px 30px;background:url(../images/ no-repeat 20px 7px;}#route ul li a:link, #route ul li a:visited{color:#004e8a;text-decoration:none;}#route ul li a:hover{color:#000000;text-decoration:underline;}#right{float:left;margin:0px 0px 1px 2px;width:176px;background-color:#FFFFFF;color:#d8ecff;}#right div{position:relative;margin-left:5px;margin-right:5px;background-color:#5ea6eb;}#right div h3{font-size:12px;padding:4px 0px 2px 15px;color:#003973;margin:0px 0px 5px 0px;background:#bbddff url(../images/ no-repeat 5px 7px; }#map{margin-top:5px;}#map p{text-align:center;margin:0px;padding:2px 0px 5px 0px;}#map p img{border:1px solid #FFFFFF;}#food{padding-top:10px;}#food ul, #life ul{list-style:none;padding:0px 0px 10px 0px;margin:10px 10px 0px 10px;}#food ul li, #life ul li{background:url(../images/ no-repeat 3px 9px;padding:3px 0px 3px 12px;border-bottom:1px dashed #EEEEEE;}#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{ color:#d8ecff;text-decoration:none;}#food ul li a:hover, #life ul li a:hover{color:#000000;text-decoration:none;}#life{padding-top:10px;padding-bottom:5px;margin-bottom:5px;}#footer{background-color:#FFFFFF;margin:1px 0px 0px 0px;clear:both;position:relative;padding:1px 0px 1px 0px;}#footer p{text-align:center;padding:0px;margin:4px 5px 4px 5px;background-color:#5ea6eb;}#footer p a{color:#FFFFFF;text-decoration:none;}#jianjie{float:left;padding:10px 10px 10px 10px;width:560px;background-color:#FFFFFF;}.font1{font-size: 14px;color: #000;line-height: 18px;text-indent: 2em;font-weight: normal;}.font2{font-size:18px;font-weight:bold;color:#000;text-indent:2em;}.clear{ clear:both;}.mainbox{overflow:hidden;position:relative;}.flashbox{overflow:hidden;position:relative;}.imagebox{text-align:right;position:relative;z-index:999;}.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;float:right;}.defimg{background-image:url(../images/}.curimg{background-image:url(../images/}JS代码function PPTBox(){= ();[] = this;$ = function(id){return (id);};= 390;lickPic("+i+")\" onmouseover=\""+eventstr+".mouseoverPic("+i+")\"></div>" + imageHTML;}$+"_flashbox").innerHTML = flashbox;$+"_imagebox").innerHTML = imageHTML;},_play : function(){clearInterval;var idx = +1;if(idx>= (idx);var eventstr = "['"++"']._play()";= setInterval(eventstr,*1000);},flashHTML : function(url,width,height,idx) {var isFlash = ('.')+1).toLowerCase()=="swf";var html = "";if(isFlash){html = "<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-0000' "+ "codebase='' width='"+width+"' height='"+height+"'>"+ "<param name=\"movie\" value=\""+url+"\" />"+ "<param name='quality' value='high' />"+ "<param name='wmode' value='transparent'>"+ "<embed src='"+url+"' quality='high' wmode='opaque' pluginspage=''"+" type='application/x-shockwave-flash' width="+width+" height='"+height+"'></embed>"+" </object>";} else {var eventstr = "['"++"']";var style = "";if[idx].href){style = "cursor:pointer"}html="<img src='"+url+"' style='width:"+width+"px;height:"+height+"px;"+style+"' onclick = \""+eventstr+".clickPic("+idx+")\"/>";}return html;},changeIndex : function(idx){var parame = [idx];moveElement+"_flashbox",-(idx*,1);var imgs = $+"_imagebox").getElementsByTagName("div");imgs[ = "bitdiv defimg";imgs[ = "bitdiv curimg";= idx;},mouseoverPic:function(idx){(idx);if>0){clearInterval;var eventstr = "['"++"']._play()";= setInterval(eventstr,*1000);}},clickPic:function(idx){var parame = [idx];if&&!=""){,;}},add:function (imgParam){[ = imgParam;},show : function () {();();if>0){var eventstr = "['"++"']._play()";= setInterval(eventstr,*1000);}}}var PPTBoxHelper ={count: 0,instance: {},getId: function() { return '_ppt_box-' + ++); }};function moveElement(elementID,final_x,interval) {if (! return false;if (!(elementID)) return false;var elem = (elementID);if {clearTimeout;}if (! {= "0px";}var xpos = parseInt if (xpos == final_x ) {return true;}if (xpos < final_x) {var dist = ((final_x - xpos)/5);xpos = xpos + dist;}if (xpos > final_x) {var dist = ((xpos - final_x)/5);xpos = xpos - dist;}= xpos + "px";var repeat = "moveElement('"+elementID+"',"+final_x+","+interval+")";= setTimeout(repeat,interval);}4网站其他页面及核心代码子页延续了主页的布局，不过在导航栏下设左右两个分区，左边为二级导航栏，右边为内容区。
静态网页制作设计报告
河北机电职业技术学院课程设计报告姓名： x x x班级：软件1301学号： 0601231301设计名称：静态网页制作课程设计指导教师：吴晓霞闫虎一、课程设计目的通过本次课程设计，将网页设计的理论知识和网页开发实践有机的结合起来，训练学生的网页制作能力和开发技巧，锻炼学生分析问题的能力，提高学生运用所学知识解决实际问题的能力。
二、题目描述和要求设计题目：个人完成一个某一素材网站。
技术要求：要为本公司设计（或仿制）一个商标要使用jpg 与透明Flash相结合的banner所有的页面风格统一。
实现对页面重用。
质量要求：必须在最后一节课之前按要求完成，页面质量符合课堂所讲内容要求，页面美观大方，不得抄袭其他网站内容。
三、课程设计内容3.1设计内容公司网站主要包括的设计内容如下：◆公司首页：主要介绍了公司销售的品牌。
◆店内动态：介绍了公司历年来的发展历程。
◆全新座驾：介绍了公司最新引进的玛莎拉蒂品牌◆车辆展示：向游客展示了公司的各种品牌车。
◆售后服务：提供与消费者交流的平台。
◆关于：介绍了本网站的各种制作信息。
3.2设计实现此次网页设计实现了对网页的多项技术的掌握。
◆关于是css与div，起初老师发下来css和div的时候，什么也看不懂，但是经过几天的摸索和与同学们的探讨，渐渐地开始可以理解css和div了。
◆关于加入滚动图片，滚动图片的加入用了我一个晚上的时间，由于课本上没有关于加入滚动图片的代码，所以就去求了一下度娘。
但是滚动图片的加入是需要知道其要加载到什么位置的，所以根据先前对div的了解，外加测试，成功的添加了滚动图片。
还有就是掌握了如何多弄几张图片加入到滚动中的问题。
◆关于photoshop，刚刚开始使用时，并不是很了解，只是试探性的使用，大多是从中寻找可用的图片，但是找到的并不能使用太多，所以就开始使用PS，再几天的使用时间里，渐渐地开始熟悉，使用起来也不是很慢了。
◆关于硕思logo设计大师专业版。
网页设计与制作课程设计
网页设计与制作课程设计随着科技的飞速发展，互联网已经深入人们的工作、生活中。
网站作为网络的基本单元，已经成为各个领域中不可或缺的一部分。
因此，学习网页设计和制作技能是非常有必要的。
本文档将介绍网页设计与制作课程设计。
课程名称网页设计与制作课程概述本课程主要介绍网页设计与制作的基本知识和技能。
学生将学会使用HTML、CSS和JavaScript等技术开发网站。
在课程中，学生将编写、调试并测试网站的代码，了解并掌握如何创造简洁、美观、易于使用的界面。
课程目标1.掌握网页设计的基本知识和技能，包括HTML、CSS和JavaScript等相关技术2.能够设计和制作简单的网站，包括静态页面和动态页面3.能够熟练使用常见的网页开发工具和调试工具4.能够分析和解决网站开发过程中的常见问题课程内容第一周：HTML基础•学习HTML的基本知识和语法规则•了解HTML标签的基本分类和用法•编写HTML文档，包括文本、图像等第二周：CSS基础•学习CSS的基本知识和语法规则•了解CSS样式的基本分类和用法•能够为网页添加样式第三周：JavaScript基础•学习JavaScript的基本知识和语法规则•了解JavaScript变量、函数和循环等基础概念•能够编写简单的JavaScript代码第四周：网页布局与设计•学习网页布局和设计的基本原则•了解网页设计的基本要素，包括颜色、字体、排版等•能够为网站添加简单的布局和设计第五周：响应式网页设计•学习响应式网页设计的基本概念和原理•了解响应式网页设计的常见技术和工具•能够为网站添加响应式布局第六周：实践项目•结合前面所学的知识，实现一个完整的项目•分析并解决在项目实践过程中出现的问题•熟悉网站开发的整个流程，掌握网站制作的基本方法和技巧授课方式本课程采用面授和实践相结合的教学方式。
面授环节将主要讲授相关的理论知识和技术实践，实践环节将针对每个章节的内容，为学生提供相应的练习项目，并在实践过程中进行指导和解答。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页设计与制作课程设计》实验报告院系名称：管理学院专业班级：电子商务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"><!--var timeout = 500;var closetimer= 0;var ddmenuitem = 0;function mopen(id){ mcancelclosetime();ddmenuitem = (id);}function mclose()function mclosetime(){ closetimer = (mclose,timeout); }function mcancelclosetime(){ if(closetimer){ (closetimer);closetimer = null;}}= mclose;pg" 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="" 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/" ></a><a href="/" target="_blank"><img src="images/" ></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"> </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="">洁面</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}</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/" border="0"><br>洁面膏<br>尺码：100g<br>洁面膏彻底清除堆积在毛孔里的污垢和角质细胞，用后清爽无比</div><div id="content2"> <img src="images/" border="0"><br>草本青春洁面慕斯<br>规格：150mL<br>草本青春洁面慕斯150mL，蕴含有丰富的植物油和植物萃取，质地温和绵密，能够温和的清洁皮肤</div><div id="content3"><img src="images/" border="0"><br>玫瑰衡肤保湿洁面乳<br>尺码：80g<br>玫瑰衡肤保湿洁面乳80g，蕴含丰富的玫瑰果油，可提升肌肤水分含量<br></div><div id="content4"><img src="images/" border="0"><br>衡肤泡沫洁面液<br>尺码：200mL<br>衡肤泡沫洁面液，玫瑰、绿茶和药蜀葵和多种植物活性成份可以轻柔的去肌肤表面污垢<br></div></div><div id="bottom" style="text-align:center"><hr></html>五、实验总结在本次网站页面设计中，首先要整理清楚构思，根据CSS样式以及DIV块化设计完成代码设计。