網(wǎng)頁設(shè)計的課程設(shè)計報告

華東交通大學理工學院課程設(shè)計報告--PAGE18-目錄TOC\o"1-2"\f\h23846第1章素材的準備 27633第2章站點的創(chuàng)建和結(jié)構(gòu)組織 34284建立站點 36052構(gòu)建框架 410400第3章網(wǎng)頁頁頭的設(shè)計 730338Logo設(shè)置 729838Search設(shè)置 717603總體設(shè)置 712482第4章導航欄的設(shè)計 825562縱向?qū)Ш綑谠O(shè)置 832388橫向?qū)Ш讲藛?91824二級菜單 917969橫向?qū)Ш降谋尘皥D片 105695第5章主體部分的設(shè)計 1130341頂部幻點和熱點新聞 1115318中部圖片表 1129483尾部設(shè)置 1219011第6章側(cè)邊攔的設(shè)計 1421731產(chǎn)品導購 1412218使用問答 1428605聯(lián)系我們 1415376第7章底部的設(shè)計 1530771參考文獻（資料） 1619939致謝 17第1章素材的準備利用photoshop軟件剪切所需的圖片

第2章站點的創(chuàng)建和結(jié)構(gòu)組織建立站點打開DREAMWEAVER，在標題欄點擊站點/新建站點，取名站點名為馬燕青，然后在目錄下新建images文件夾、css文件夾等把各類文件分別存放起來。構(gòu)建框架從圖中可以看出整個頁面分為頭部區(qū)域、導航區(qū)域、主體部分和底部，其中主體部分又分為左右兩列。頭部設(shè)置插入ID為header的div以同樣的方法插入nav、maincontent、footer;再在maincontent內(nèi)插入main和side的div。對各個div建立css樣式，使其如下：#reader{ background-color:#99FFFF; height:70px; margin-bottom:8px; width:900px;}#nva{ background-color:#CF6; height:30px; margin-bottom:8px; width:900px;#maincontent#main{ height:500px; width:664px; float:left; background-color:#FFCCFF;}#maincontent#side{ background-color:#CFF; height:500px; width:228px; float:right;}#footer{ background-color:#9FF; height:70px; width:900px;}效果圖如下：第3章網(wǎng)頁頁頭的設(shè)計Logo設(shè)置插入一個div,設(shè)置為：#logo{float:left;margin-top:18px;}在div里插入所需圖片<divid="logo"><imgsrc="images/企業(yè).jgp"width="180"height="45"/></div>Search設(shè)置插入一個div,設(shè)置為：#logo{float:right;margin-top:30px;}在search里插入一個表單，一個文本框和一個按鈕?？傮w設(shè)置去掉reader的背景顏色和底部外邊距。效果圖：

第4章導航欄的設(shè)計縱向?qū)Ш綑谠O(shè)置在nva里插入ul和li，并輸入所需文字。<divid="nva"><ul><li><ahref="#">首頁</a></li><li><ahref="#">企業(yè)新聞</a></li><li><ahref="#">企業(yè)簡介</a></li><li><ahref="#">產(chǎn)品展廳</a></li><li><ahref="#">企業(yè)歷史</a></li><li><ahref="#">招商加盟</a></li><li><ahref="#">網(wǎng)上下單</a></li><li><ahref="#">聯(lián)系我們</a></li></ul></div>創(chuàng)建css樣式為：#nvaul{list-style-type:none;margin:0px; padding:0px;}#nvaulli{ height:26px; padding-top:0px; padding-right:8px; padding-bottom:0px; padding-left:8px; line-height:26px; border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:#eee; float:left;}body{ font-family:Verdana,Geneva,sans-serif; font-size:20px; line-height:1.2;}a{ color:#000; text-decoration:none;}a:hover{ color:#F00;}橫向?qū)Ш讲藛卫胒loat屬性，將縱向?qū)Ш綑诶锏膌i橫向排列即可得到橫向?qū)Ш讲藛?。效果圖：二級菜單<divclass="nav_son"><ul><li><ahref="#">企業(yè)動態(tài)</a></li><li><ahref="#">領(lǐng)導活動</a></li><li><ahref="#">產(chǎn)品資訊</a></li><li><ahref="#">通知公告</a></li></ul></div>橫向?qū)Ш降谋尘皥D片在之前建立的nva.a和nva.a.hover的css樣式里添加相對應(yīng)的背景圖片。效果圖：

第5章主體部分的設(shè)計頂部幻點和熱點新聞插入一個表格：在1、2、3內(nèi)插入相關(guān)的圖片在4中插入以下背景圖片并輸入相關(guān)的內(nèi)容設(shè)置邊框、填充、間距為0.效果圖：中部圖片表插入一個1div,添加背景圖片。在1中插入一個表格并在內(nèi)插入相關(guān)圖片和內(nèi)容：設(shè)置相關(guān)的細節(jié)內(nèi)容，并設(shè)置邊框、填充、間距效果圖：尾部設(shè)置用同樣的方法插入表格、背景圖片，并輸入相關(guān)的內(nèi)容。效果圖：側(cè)邊攔的設(shè)計1、先做一個通用的，插入如下html代碼：<divclass="side_box"><h2><strong>產(chǎn)品</strong>導購</h2><divclass="side_con">此處顯示class"side_con"的內(nèi)容</div></div>2、定義側(cè)邊欄的樣式如下：#side{float:right;width:228px;}.side_box{margin-bottom:8px;}.side_boxh2{height:25px;padding:6px10px010px;background:url(../images/side_bg.gif)00no-repeat;font-size:14px;color:#444;}.side_boxh2strong{color:#f30;}.side_con{padding:10px;background:url(../images/side_bg.gif)0bottomno-repeat;}效果圖：產(chǎn)品導購1、用ul、li列表的形式輸入相關(guān)內(nèi)容：<ul><li><strong>語音業(yè)務(wù)：</strong><ahref="#">普通電話</a>|<ahref="#">語音數(shù)字中繼</a></li><li><strong>語音業(yè)務(wù)：</strong><ahref="#">普通電話</a>|<ahref="#">語音數(shù)字中繼</a></li><liclass="product3"><strong>語音業(yè)務(wù)：</strong><ahref="#">普通電話</a>|<ahref="#">語音數(shù)字中繼</a></li></ul>2、設(shè)置樣式：.product{padding:0px10px;}.productul{background:url(../images/icon2.gif)5px12pxno-repeat;}.productulli{height:58px;padding:14px0064px;border-bottom:1pxdashed#dcdcdc;color:#777;}.productullistrong{display:block;height:24px;color:#333;}.productullia{color:#777;}.productullia:hover{text-decoration:underline;}.productulduct3{border-bottom:none;}使用問答1、先輸入以下內(nèi)容并復(fù)制為5份：<dl><dt><ahref="#">最新出的這個產(chǎn)品如何使用？</a></dt><dd>該產(chǎn)品采用全新的技術(shù)，較上一產(chǎn)品有質(zhì)的飛躍，功能上增強了許多，使用方法更加簡便...</dd></dl>2、將“最新出的這個產(chǎn)品如何使用？”加粗，設(shè)置相關(guān)性質(zhì)：askdl{padding:10px0;border-bottom:1pxdashed#dcdcdc;}.askdldt{height:22px;overflow:hidden;font-weight:bold;background:url(../images/icon.gif)0-149pxno-repeat;padding-left:20px;}.askdldta{color:#666;}.askdldd{color:#666;background:url(../images/icon.gif)0-198pxno-repeat;padding-left:20px;}聯(lián)系我們在之前做好的相應(yīng)的class“side_on”里插入圖片并調(diào)整位置：<divclass="side_box"><h2><strong>聯(lián)系</strong>我們</h2><divclass="side_concontact"><ahref="#"><imgsrc="images/tel.gif"width="222"height="112"/></a></div></div>.contact{padding:2px;}第7章底部的設(shè)計設(shè)置背景顏色為灰色，輸入所需要的內(nèi)容，將它們設(shè)置水平垂直居中。效果圖：整體效果圖：參考文獻