11级《网页设计与制作》家家旺装饰材料大全.doc

网页设计与制作课程设计实 验 报 告院系名称： 管理学院 专业班级： 电子商务 11级2班 学生姓名： 杨 欣 学 号： 201117050217 网页界面网站栏目网站功能（JS程序）合计50分10分40分100分2013年 06 月 一、实验目的本实验属于设计性实验，目的是使学生在学完网页设计与制作课程的基本知识之后，通过使用CSS+DIV制作一个简单的网站，进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构，通过实验学习网页制作的步骤与方法，任务是设计一个简单的网站。二、实验步骤（1）设计首页:运用fireworks，美图秀秀以及画图工具设计首页。如图：（2）运用fireworks进行切图，切片如图：（3）写首页代码，并对其进行修改，组织作品展示内容页和产品分类列表页，并写作品展示内容页和产品分类列表页代码。三、网站设计思路(1)温馨浪漫logo采用字体骨骼清秀、遒劲有力，清冽而又优雅、从容，令人赏心悦目的方正静蕾体以及超萌超具有家居气息的方正喵呜体书写“家”字，采用行楷字体的“旺”字，配上温馨浪漫的背景装饰。（2）色彩搭配采用冷色基调搭配暖色装饰，同时加以可爱饰物点缀，使画面整体温馨但又不失工业化的质感。（3）整体风格：温馨自然，家的感觉四、网站的核心代码（1）导航栏： * padding:0; margin:0; body font-family:verdana, sans-serif; font-size:middle; #navigation, #navigation li ul list-style-type:none; #navigation margin:0px; #navigation li float:left; text-align:center; position:relative; top:124px;left:212px;background:url(images/标题栏4副本3_副本5_r2_c2.jpg);width:145px;height:60px; z-index:15 ;text-align:center; #navigation li a:link#navigation li a:visited display:block;text-decoration:none;color:#000; width:145px;height:60px;line-height:40px;border:1px solid #fff; border-width:1px 1px 0 0;background:#c5dbf2;padding-left:10px; #navigation li uldisplay:none;position:absolute;top:-64px;left:-212px;margin-top:1px; width:120px; z-index:15; #navigation li ul li ul display:none;position:absolute;top:-64px;left:-212px; margin-top:0;margin-left:1px;width:120px; z-index:15; function displaySubMenu(li) var subMenu = li.getElementsByTagName(ul)0; subMenu.style.display = block; function hideSubMenu(li) var subMenu = li.getElementsByTagName(ul)0; subMenu.style.display = none; 首页 关于我们 企业概况 客户案例 作品展示 经营范围 装饰工程 经营产品 日丰卫浴 日丰管道 日丰地暖 五金电料 装饰材料 防水材料 联系我们 .div2 overflow:hidden; height:230px; width:873px;background-color: #FFFFFF;.div2 img margin-right:200px; margin-left: 212px;（2）动态效果 （3）表页定义 （4）产品展示日丰淋浴房采用优质钢化玻璃和加厚优质铝材制作，性能安全可靠，外形简洁大方，做工考究，使用方便。陶瓷产品采用优质原材料，经1268高温烧成，质量上乘，设计时尚，产品无辐射、健康环保。日丰浴室柜集洗漱和收纳功能于一体，款式丰富、造型美观，采用优质材料制作，天然环保、结实耐用。 品种齐全、质量优异、设计精美，所有产品均经过原料、在线、成品三重检测，确保产品的卓越品质。 五、实验总结 本次试验使我深刻明白理