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

《网页设计与制作课程设计》 实 验 报 告 院系名称： 管理学院 专业班级： 电子商务 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）导航栏： style type=text/css * { 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 ul{display: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;} /style script type=text/javascript 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; } /script ul id=navigation li onmouseover=displaySubMenu(this) onmouseout=hideSubMenu(this) a href=首页.htm首页/a /li li onmouseover=displaySubMenu(this) onmouseout=hideSubMenu(this) a href=#关于我们/a ul lia href=#企业概况/a/li lia href=#客户案例/a/li /ul /li