《网页设计与制作课程设计》实验报告2015年06 月一、实验目的本实验属于设计性实验，目的是在学完《网页设计与制作》课程的基本知识之后，通过使用CSS+DIV制作一个简单的网站，进一步熟悉和领悟HTML语言、CSS样式表和JAVASCRIPT语言的语法结构，通过实验学习网页制作的步骤与方法，任务是设计一个简单的网站。
二、实验步骤1、确定网站结构，形成实验思路。
2、设计网站的栏目和主页，主页切图。
3、利用CSS+DIV制作网站主页和弹出式导航条菜单，并利用JavaScript制作动态效果。
4、设计并利用CSS+DIV制作列表页，利用JavaScript制作动态效果。
5、完成设计制作并进行检查和修改。
三、网站设计思路1 、定位网站的主题和名称：网站主题是大型机械设备生产销售公司。
名称是“大河重工”网站。
2、定位网站的CI形象：设计网站的logo及文字，设定总体标准色彩。
3、确定网站的栏目：“首页。
产品展示。
新闻动态。
留言板。
关于我们。
联系我们。
”共六个大栏目。
4、确定网站的目录结构：（1）首页。
（2）产品展示。
下设“建筑破碎”、“矿山破碎”、“工业制粉”、“破碎筛分”四个子栏目。
（3）新闻动态。
下设“企业新闻”、“行业新闻”、“专题报道”三个子栏目。
（4）留言板。
（5）关于我们。
（6）联系我们。
5、确定网站的链接结构：树状链接结构6、资料的收集与整理：利用Firework切图获得相关的图片资料；收集需要的文字资料信息。
7、选择网页的设计方法：利用记事本文档写代码制作网页，并进行相应的调整。
四、网站的核心代码<!DOCTYPE HTML><html xmlns="/1999/xhtml" class="g_html"><head><title>大河重工-公司介绍</title><meta name="renderer" content="webkit"><link rel='canonical' href='/col.jsp?id=101'><link type="text/css" href="/css/base.min.css?v=201506231344"rel="stylesheet" /><link type="text/css" href="/css/template/5002.min.css?v=201504271715"rel="stylesheet" id="templateFrame" class="templateFrameClass"/><link type="text/css" href="/css/searchBoxStyle1.min.css?v=201506151725"rel="stylesheet"><link type="text/css" href="/css/edit.min.css?v=201506181932"rel="stylesheet" /><link type="text/css" href="/css/comm/jquery/poshytip/tip-yellowsimple.min.c ss?v=201410081739" rel="stylesheet" /><link type="text/css" href="/css/faiFloatPanel.min.css?v=201503311033"rel="stylesheet" /><link type="text/css" href="/css/site/mCustomScrollbar.min.css?v=20140722164 3" rel="stylesheet" /><style id='stylemodule'>#module327 {border:none;}#module327 {padding:0px;}#module327 .formMiddle327{border:none;}#module327 .formMiddle327{padding:0px;}#module327 .formMiddle327 .formMiddleCenter327{border:none;}#module327 .formMiddle327 .formMiddleCenter327{padding:0px;}#module327 .formTop327{display:none;}</style><style id='styleHeaderTop' type='text/css'></style><style id='stylefooter' type='text/css'></style><style id='styleWebSite' type='text/css'></style><style id='stylenav' type='text/css'></style><script type="text/javascript" language="javascript" >document.domain = '';</script></head><body class="g_body g_locale2052 " ><div id="sitetips" class="sitetips sitetips_new"><div class="keepcenter_tipbar"><div class="tiptext"></div><div class="tiptoolbtn"></div></div></div><div id="siteTipsDemoTemplate" class="siteTipsDemoTemplate"><iframe id="siteTipsDemoTemplateFrame" frameborder="0" width="100%" height="205px" scrolling="auto"></iframe></div><div id="g_main" class='g_main g_col101 ' style='top:31px' ><div id="web" class="g_web "><table class="webTopTable" cellpadding="0" cellspacing="0"><tr><td align="center"><div id="webTop" class="webTop"></div></td></tr></table><table class="absTopTable" cellpadding="0" cellspacing="0"><tr><td align="center"><div id="absTopForms" class="forms sideForms absForms"><div style="position:absolute;"></div><!-- for ie6 --><div id='module327' _indexClass='formIndex1' class='form formIndex1 formStyle62' title='' style='position:absolute;top:40px;left:714px;width:250px;' _side='0' _inTab='0' _inMulMCol='0' _inFullmeasure='0' _autoHeight='1' _global='true' _independent='false' ><table class='formTop formTop327' cellpadding='0' cellspacing='0'><tr><td class='left'></td><td class='center'></td><td class='right'></td></tr></table><table class='formMiddle formMiddle327' style='' cellpadding='0' cellspacing='0'><tr><td class='formMiddleLeft formMiddleLeft327'></td><td class='formMiddleCenter formMiddleCenter327' valign='top'><div class='formMiddleContent formMiddleContent327 '><div class='searchBox searchBoxStyle37'><div class='searchBoxContainer'><input class='g_itext' placeholder='' value='' _nSL='[]' maxlength='100' /><a class='g_btn searchBoxBtn' href='javascript:;' onclick='Site.searchInSite(327);return false;'><span>搜索</span></a></div></div><div class='recommandKeyBox'><div class='linkKeys'><a class='recommandKey' href='javascript:;' onclick='Site.searchInSiteByKey(327,"");return false;'><span></span></a></div></div></div></td><td class='formMiddleRight formMiddleRight327'></td></tr></table><table class='formBottom formBottom327' cellpadding='0' cellspacing='0'><tr><td class='left left327'></td><td class='center center327'></td><td class='right right327'></td></tr></table><div class='clearfloat clearfloat327'></div></div></div></td></tr></table><table class="webNavTable" cellpadding="0" cellspacing="0"><tr><td align="center"><div id="webNav" class="webNav webNavDefault"></div></td></tr></table><table class="webHeaderTable" cellpadding="0" cellspacing="0" id="webHeaderTable"><tr><td align="center" class="webHeaderTd"><div id="webHeader" class="webHeader"><table class='headerTable' cellpadding='0' cellspacing='0'><tr><td class='headerCusLeft'></td><td class='headerCusMiddle' align='center' valign='top'><div class='headerNav'><div id='nav' class='nav nav2'><div class='navMainContent'><table class='navTop' cellpadding='0' cellspacing='0'><tr><td class='navTopLeft'></td><td class='navTopCenter'></td><td class='navTopRight'></td></tr></table><table class='navContent' cellpadding='0' cellspacing='0'><tr><td class='navLeft'></td><td class='navCenterContent' id='navCenterContent' valign='top' align='left'><div id='navCenter' class='navCenter' style='width:528px;'><div class='itemContainer'><table title='' class='item itemCol2 itemIndex1' cellpadding='0' cellspacing='0' colId='2' id='nav2' onclick='window.open("/", "_self")' _jump='window.open("/", "_self")' ><tr><td class='itemLeft'></td><td class='itemCenter'><a hidefocus='true' style='outline:none;' href='/' target='_self' onclick='return false;'><span class='itemName0'>首页</span></a></td><td class='itemRight'></td></tr></table><div class='itemSep'></div><table title='' class='item itemCol12 itemIndex2' cellpadding='0' cellspacing='0' colId='12' id='nav12' onclick='window.open("/pr.jsp", "_self")' _jump='window.open("/pr.jsp", "_self")' ><tr><td class='itemLeft'></td><td class='itemCenter'><a hidefocus='true' style='outline:none;' href='/pr.jsp' target='_self' onclick='return false;'><span class='itemName0'>产品展示</span></a></td><td class='itemRight'></td></tr></table><div class='itemSep'></div><table title='' class='item itemCol21 itemIndex3' cellpadding='0' cellspacing='0' colId='21' id='nav21' onclick='window.open("/nr.jsp", "_self")' _jump='window.open("/nr.jsp", "_self")' ><tr><td class='itemLeft'></td><td class='itemCenter'><a hidefocus='true' style='outline:none;' href='/nr.jsp' target='_self' onclick='return false;'><span class='itemName0'>新闻动态</span></a></td></tr></table><div class='itemSep'></div><table title='' class='item itemCol9 itemIndex4' cellpadding='0' cellspacing='0' colId='9' id='nav9' onclick='window.open("/msgBoard.jsp", "_self")' _jump='window.open("/msgBoard.jsp", "_self")' ><tr><td class='itemLeft'></td><td class='itemCenter'><a hidefocus='true' style='outline:none;' href='/msgBoard.jsp' target='_self' onclick='return false;'><span class='itemName0'>留言板</span></a></td><td class='itemRight'></td></tr></table><div class='itemSep'></div><table title='' class='item itemCol101 itemIndex5' cellpadding='0' cellspacing='0' colId='101' id='nav101' onclick='window.open("/col.jsp?id=101", "_self")' _jump='window.open("/col.jsp?id=101", "_self")' ><tr><td class='itemLeft'></td><td class='itemCenter'><a hidefocus='true' style='outline:none;' href='/col.jsp?id=101' target='_self' onclick='return false;'><span class='itemName0'>关于我们</span></a></td><td class='itemRight'></td></tr></table><div class='itemSep'></div><table title='' class='item itemCol102 itemIndex6' cellpadding='0' cellspacing='0' colId='102' id='nav102' onclick='window.open("/col.jsp?id=102", "_self")' _jump='window.open("/col.jsp?id=102", "_self")' ><tr><td class='itemLeft'></td><td class='itemCenter'><a hidefocus='true' style='outline:none;'href='/col.jsp?id=102' target='_self' onclick='return false;'><span class='itemName0'>联系我们</span></a></td><td class='itemRight'></td></tr></table></div><div class='itemNext'></div></div></td><td class='navRight'></td></tr></table><table class='navBottom' cellpadding='0' cellspacing='0'><tr><td class='navBottomLeft'></td><td class='navBottomCenter'></td><td class='navBottomRight'></td></tr></table></div></div></div></td><table cellpadding='0' cellspacing='0' class='formBannerTitle formBannerTitle308'><tr><td class='titleLeft titleLeft308' valign='top'></td><td class='titleCenter titleCenter308' valign='top'><div class='titleText titleText308'><span>在线客服</span></div></td><td class='titleRight titleRight308' valign='top'></td></tr></table></td><td class='right right308'></td></tr></table><table class='formMiddle formMiddle308' style='' cellpadding='0' cellspacing='0'><tr><td class='formMiddleLeft formMiddleLeft308'></td><td class='formMiddleCenter formMiddleCenter308' valign='top'><div class='formMiddleContent formMiddleContent308 '><div id='serOnline-container308' class='serOnline-container'><div class='serOnline-service'><div class='serOnline-list-h lineH-21 '><a hidefocus='true'href='/msgrd?v=3&uin=100000&site=qq&menu=yes'target='_blank'><span class='serOnline-img qqImg' > </span>客服一</a></div><div class='serOnline-list-h lineH-21 lastData'><a hidefocus='true' href='/msgrd?v=3&uin=100000&site=qq&menu=yes'target='_blank'><span class='serOnline-img qqImg' > </span>客服一</a></div></div><div class='serOnline-separation-line g_separator'></div><div class='serOnline-worktime'><div class='marBL-10'><span class='worktime-header-img'> </span><span style='font-size:15px;'><b>工作时间</b></span></div><div class='serOnline-list-h '><span>周一至周五：8:30-17:30</span></div><div class='serOnline-list-h lastData'><span>周六至周日：9:00-17:00</span></div></div></div></div></td><td class='formMiddleRight formMiddleRight308'></td></tr></table><table class='formBottom formBottom308' cellpadding='0' cellspacing='0'><tr><td class='left left308'></td><td class='center center308'></td><td class='right right308'></td></tr></table><div class='clearfloat clearfloat308'></div></div><div id='module302' _indexClass='formIndex2' class='form form302 formIndex2 formStyle1' title='' style='' _side='0' _inTab='0' _inMulMCol='0' _inFullmeasure='0' _autoHeight='1' _global='true' _independent='false' ><table class='formTop formTop302' cellpadding='0' cellspacing='0'><tr><td class='left'></td><td class='center'></td><td class='right'></td></tr></table><table class='formBanner formBanner302' cellpadding='0' cellspacing='0'><tr><td class='left left302'></td><td class='center center302' valign='top'><table cellpadding='0' cellspacing='0' class='formBannerTitle formBannerTitle302'><tr><td class='titleLeft titleLeft302' valign='top'></td><td class='titleCenter titleCenter302' valign='top'><div class='titleText titleText302'><span>联系方式</span></div></td><td class='titleRight titleRight302' valign='top'></td></tr></table></td><td class='right right302'></td></tr></table><table class='formMiddle formMiddle302' style='' cellpadding='0' cellspacing='0'><tr><td class='formMiddleLeft formMiddleLeft302'></td><td class='formMiddleCenter formMiddleCenter302' valign='top'><div class='formMiddleContent formMiddleContent302 '><div class='richContent richContent0'><p>联系人：李先生</p><p>电话：0371-********</p><p>邮箱：123456789@</p><p>地址：郑州市高新技术开发区</p></div></div></td><td class='formMiddleRight formMiddleRight302'></td></tr></table><table class='formBottom formBottom302' cellpadding='0' cellspacing='0'><tr><td class='left left302'></td><td class='center center302'></td><td class='right right302'></td></tr></table><div class='clearfloat clearfloat302'></div></div></div><div class="containerFormsLeftBottom"></div></td><td valign="top" id="containerFormsCenter" class="containerFormsCenter"><div id="centerTopForms" class="column forms mainForms centerTopForms" ><div id='module309' _indexClass='formIndex1' class='form form309 formIndex1 formStyle1' title='' style='' _side='0' _inTab='0' _inMulMCol='0' _inFullmeasure='0' _autoHeight='1' _global='false' _independent='false' ><table class='formTop formTop309' cellpadding='0' cellspacing='0'><tr><td class='left'></td><td class='center'></td><td class='right'></td></tr></table><table class='formBanner formBanner309' cellpadding='0' cellspacing='0'><tr> <td class='left left309'></td><td class='center center309' valign='top'><table cellpadding='0' cellspacing='0' class='formBannerTitle formBannerTitle309'><tr><td class='titleLeft titleLeft309' valign='top'></td><td class='titleCenter titleCenter309' valign='top'><div class='titleText titleText309'><span>关于我们</span></div></td><td class='titleRight titleRight309' valign='top'></td></tr></table><td class='right right309'></td></tr></table><table class='formMiddle formMiddle309' style='' cellpadding='0' cellspacing='0'><tr><td class='formMiddleLeft formMiddleLeft309'></td><td class='formMiddleCenter formMiddleCenter309' valign='top'><div class='formMiddleContent formMiddleContent309 '><div class='richModuleSlaveImgContainer textImg1'><img class='richModuleSlaveImg' alt='大河重工' title='大河重工' src='大河重工.jpg' style='width:310px;height:401px;' /><div class='richEditPic' _onMouseIn='0' onclick='Site.changeRichPic(309);return false;'><a class='edit' id='uploadButton' ></a></div></div><div class='richContent richContent1'><p style="line-height:2em;"> 成立于1992年的大河科技是一家专业生产大中型破碎、制砂、磨粉设备，研、产、销三位一体的股份制企业。