資源描述：
《班級主頁設計實驗報告》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。
1、WEB動態(tài)網頁設計實驗報告學院：計算機科學與技術學院專業(yè)：網絡工程姓名：壽夏輝學號：2010212112指導老師：代宇19目錄設計背景3設計題目3網站內容介紹3技術分析4主要制作過程6運行效果16心得體會1819一、設計背景在Internet飛速發(fā)展的今天，我們每個人都離不開網絡，離不開它帶給人們的便捷的信息服務。我們大學生更是Internet的受益者，身為大學生，我們發(fā)現同學之間的交流變少了，大家更多的時間愿意宅在寢室，很少參加班級活動。所以，我和周洪瑤決定建設一個班級主頁，建設一個屬于班級的小家庭，希望這個網站能
2、帶給同學家的感覺，帶給同學們即時的信息，同時增進同學之間的交流。同時，我希望通過這次課程設計熟練掌握Photoshop,Dreamweaver軟件的使用以及動態(tài)腳本語言的運用。二、設計題目《重慶郵電大學10級0431003班級主頁》三、網站內容介紹選定題目后，我們決定展開需求分析。通過查閱資料和實際調查，我們了解到同學們對網站中想獲得的信息。于是，我們決定建設一個可行性較高的網站，我們設置了登錄權限，它只能允許注冊了班級賬戶的同學登錄班級網站，登錄成功后就進入了班級主頁。班級主頁主要提供了19班級新聞、班級相冊、科技
3、賽事、班級留言等信息以及管理后臺等交互界面的鏈接。該網站的整體結構如下圖：開發(fā)團隊關于我們聯(lián)系我們考研專欄管理入口同學錄留言板友情鏈接就業(yè)星空科技賽事最新相冊班級留言班級相冊班級新聞班級主頁網頁logo導航頁腳鏈接頁面文本0431003班級主頁一、技術分析1.層的使用當需要在Dreamweaver軟件中插入的圖片中顯示文字信息時，可以選擇插入布局對象層，然后在新建的層中添加文本信息。2.Photoshop軟件的使用由于Dreamweaver軟件中的文字工具提供的字體種類很少，不能編輯藝術字，所以當我們需要在圖片中插入
4、一些色彩鮮艷的藝術字體時，可以使用Photoshop工具，在圖片中添加文本；同時，Photoshop中有許多漸變圖片，可以制作19美觀的藝術圖片；由于涉及班級主頁需要大量的圖片素材，網上下載的圖片并不一定能滿足網站的需求，所以用Photoshop進行圖片的裁切、仿制圖章等。3.創(chuàng)建具有動態(tài)效果的導航條如果我們需要創(chuàng)建動態(tài)的導航條效果，即鼠標經過導航條時呈現不同的圖片時，我們可以在Dreamweaver軟件中插入圖像對象鼠標經過圖像，然后在原始圖像和鼠標經過圖像中插入不同的圖像文件就可以實現動態(tài)的導航條。4.創(chuàng)建腳本鏈
5、接當網站需要實現用戶收藏功能時或者實現彈出信息行為時，使用不同的腳本語言鏈接。5.添加超級鏈接添加超級鏈接可以實現不同網頁之間的跳轉。6.圖像熱區(qū)鏈接點擊圖片可以實現跳轉。7.內部鏈接、外部鏈接以及鏈接樣式實現內網和外網的鏈接以及鏈接的效果設置。8.郵件鏈接點擊可以發(fā)送outlook郵件9.插入滾動文字10.數據庫的連接通過數據庫的連接實現頁面的動態(tài)效果，頁面文本的更新，用戶登錄權限的設置，留言板的添加等。11.創(chuàng)建站點文件夾19合理地創(chuàng)建站點文件夾可將網站文檔分門別類，井井有條地放置其中，這對以后網站的制作是極其有
6、利的。一、主要制作過程1.服務器的配置與站點的建立單擊【開始】
7、【控制面板】
8、【管理工具】
9、【Internet信息服務（IIS）管理器】命令，打開【Internet信息服務】窗口。新建立一個網站并且設置站點根目錄位置，以后所涉及的站點文件都在這個根目錄下打開dreamweaver，新建站點—>news19對站點進行設置站點的設置基本完成1.登錄界面的設置19通過在插入背景圖片后再插入層，將表格和按鈕插入，完成了登錄界面。當然，所有的學號和密碼是儲存在數據庫中的，如果輸入錯誤，無法進入主頁3.進入主頁設置后，首先進行布
10、局，先插入表格再插入圖片。下圖為用photoshop制作的主頁Logo19同時，我在圖片中創(chuàng)建了一個腳本鏈接“收藏我們”，具體做法是雙擊收藏我們，然后在下方的鏈接處添加腳本語言javascript:window.external.addFavorite('http://localhost/index.asp','0431003班級主頁')經過測試，腳本鏈接成功下面我們創(chuàng)建導航條首先插入一行四列的表格，然后在表格中插入用photoshop合成的導航條，由于要設置動態(tài)導航條，我們選擇插入圖像對象鼠標經過圖像，進行如下設置
11、：于是，我們創(chuàng)建了導航條同時，我在班級主頁導航上19添加了腳本鏈接，鼠標點擊時可以彈出信息行為。具體設置為雙擊導航條，在下方的鏈接輸入腳本語言：javascript:alert('您當前所在的頁面就是班級主頁！')效果如下：接著，我們開始設計網頁的主體部分首先，插入一個布局為3行3列的表格，然后分塊布局。（相冊模塊）19同時在相冊的圖片設置圖像
