網頁設計作品設計說明尛希湖南軟件職業學院《網頁設計》期末作品設計說明書課程名稱：網頁設計期末作品設計說明書設計題目：某律師團隊專業法律服務網專業班級：學生姓名：指導教師：起止日期：網頁設計作品設計說明全文共11頁，當前為第1頁。網頁設計作品設計說明全文共11頁，當前為第1頁。第1頁共11頁某律師團隊專業法律服務網網站制作說明一、網站開發目的和功能簡介隨著網絡技術的發展與互聯網的普及，網站建設與網頁制作越來越來成為各行各業以及個人宣傳自己的有利工具。門戶網站越來越稱為律師行業進行…………（略）二、網站的總體設計2.1網站名稱：某律師團隊專業法律服務網2.2網站欄目劃分：根據本網站的目的和功能規劃網站內容，包括如下信息：（1）關于我們：介紹相關律師信息，事務所信息，收費標準…………（略）（2）法律服務：…………（略）（3）法律文書：…………（略）（4）律師手記：…………（略）（5）經典案例：…………（略）（6）在線服務：…………（略）具休如下圖示：網頁設計作品設計說明全文共11頁，當前為第2頁。首頁網頁設計作品設計說明全文共11頁，當前為第2頁。首頁關于我們法律服務法律文書律師手記經典案例在線服務律師介紹律所介紹收費標準教您打官司請律師指南法律援助刑法專欄公司法專欄婚姻法專欄民商法專欄服務特色經典案例案例詳解在線咨詢辦案進度房產發專欄知識產權專欄2.3網站導航應用于所有頁面提高網站的操作友好性。2.4網站的風格與色彩選擇：頁面以淺綠色為背景，黑白灰三色為主體。淺綠色體現了本律師事務所的活力，字體用黑、白、灰色給人一種清析、穩重的感覺。所有頁面色調統一，布局相似。2.5網站目錄結構設計合理：不同素材采用不同學文件夾分開存放。如聲音放在sound文件夾、圖片放在images文件夾，照片放在photos、FLASH動畫放在flash文件夾、樣式表文件放在CSS文件夾中、作業成果圖放在works等。三、網站的總體設計3.1LOGO設計Logo應體現律師行業莊重、嚴謹的形象。本LOGO以暗綠色為背景，金黃色為前景，…………（略）3.2首頁的制作過程網頁設計作品設計說明全文共11頁，當前為第3頁。版面分欄結構，即頁頭、導航欄、FLASH展示、相關內容、版權（如下圖）網頁設計作品設計說明全文共11頁，當前為第3頁。版權信息網站動態律師簡介法律咨詢業務介紹動態FLASH新聞導航LOGO及BANNER版權信息網站動態律師簡介法律咨詢業務介紹動態FLASH新聞導航LOGO及BANNER整個頁面分為四部分，第一部分是LOGO、BANNER及導航欄，主要是…………（略）；；第二部分是動態FLASH新聞，其中…………（略）；第三部分是版權聲明…………（略）；第四部分是版權信息，…………（略）。采用這種布局，主要是給瀏覽者一種簡單、清晰、明了的感覺，使網站整齊劃一。網頁設計作品設計說明全文共11頁，當前為第4頁。具體首頁布局如下圖所示。網頁設計作品設計說明全文共11頁，當前為第4頁。網頁設計作品設計說明全文共11頁，當前為第5頁。3.3列表頁制作網頁設計作品設計說明全文共11頁，當前為第5頁。網頁設計作品設計說明全文共11頁，當前為第6頁。3.4內容頁制作網頁設計作品設計說明全文共11頁，當前為第6頁。3.5后臺登陸頁制作網頁設計作品設計說明全文共11頁，當前為第7頁。3.6后臺管理頁制作網頁設計作品設計說明全文共11頁，當前為第7頁。四、CSS樣式表制作#main_container{width:950px;height:auto;margin:auto;background:url(images/main_bg.gif)no-repeattopcenter#f0f0d8;}#center_content{width:895px;margin:auto;}網頁設計作品設計說明全文共11頁，當前為第8頁。#header{網頁設計作品設計說明全文共11頁，當前為第8頁。width:895px;height:130px;margin:auto;}#middle_box{width:895px;height:278px;clear:both;margin:auto;background:url(images/middle_bg.jpg)no-repeatcenter;}#footer{width:895px;height:48px;margin:auto;color:#508aa1;border-top:1px#b2bbbbdashed;}·五、設計技術總結為了使我們的網站更加實用、內容豐富，我們在網站里用了很多的技術，包括flashfireworksphotoshop等圖片處理和動畫，運用dreamweaver中相關知識制作各種特效比如圖層運用、時間軸運用等，本網站中還運用知識點運用swishmax和fireworks相結合制作出banner.還包括javascript等動態腳本語言。5.1在素材收集和處理上本人花費了大量時間處理網站動畫、真實照片收集、個人信息。如應用PHOTOSHOP對相片進行整體處理。利用SWFText制作了廣告動畫。5.2文字滾動效果，代碼如下：<marqueedirection="up"Scrollamount="1"

Scrolldelay="5"onMouseOver="this.stop()"onmouseout="this.start()">內容</marquee>網頁設計作品設計說明全文共11頁，當前為第9頁。5.3設為首頁,其代碼如下所示：網頁設計作品設計說明全文共11頁，當前為第9頁。<ahref="#"onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('')">設為首頁</a>5.4收藏本站,其代碼如下所示：<ahref="#"onclick="window.external.addFavorite('','title')">收藏本站</a>5.5為頁面增加狀態欄運動文字的效果，其代碼如下所示：<SCRIPTlanguage="JavaScript">varpos=50;functionscrollit(seed){ varmsg="歡迎觀看蔡秀萍的個人網站";//狀態條顯示的文字 varout=""; if(seed>pos) { seed--; cmd="scrollit("+seed+")"; window.setTimeout(cmd,100); } elseif(seed<=pos&&seed>0) { for(i=0;i<seed;i++) {out+=""; } out+=msg; seed--; window.status=out; cmd="scrollit("+seed+")"; window.setTimeout(cmd,100); } else { if(-seed<msg.length)網頁設計作品設計說明全文共11頁，當前為第10頁。 { out+=msg.substring(-seed,msg.length);網頁設計作品設計說明全文共11頁，當前為第10頁。 seed--; window.status=out; cmd="scrollit("+seed+")"; window.setTimeout(cmd,100); } else { window.status=""; window.setTimeout("scrollit(pos)",100); } }}scrollit(50);</SCRIPT>5.6為網友添加時間代碼，使其在頁面的頭部顯示現在的時間日期。5.7為相冊添加特效，使其自行從左自右運動，當鼠標移動到相冊下的小照片的時候，照片會自動放大，并顯示在圖層中。5.8為網葉添加切換特效，其代碼如下：<metahttp-equiv="enter"content="RevealTrans(Duration=4,Transition=2)"><metahttp-equiv="exit"content="RevealTrans(Duration=7,Transition=27)">六、作品設計心得本次網站