杭州理工大學(xué)網(wǎng)站設(shè)計(jì)課程報(bào)告

時(shí)間：2023-09-22 19:12:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-22 19:12:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

杭州理工大學(xué)網(wǎng)站設(shè)計(jì)課程報(bào)告：一、實(shí)驗(yàn)?zāi)康?br>
要求使用div+CSS+JavaScript+jQuery完成杭州理工大學(xué)網(wǎng)站（http://www.bit.edu.cn/）首頁(yè)的設(shè)計(jì)效果如圖所示。

從網(wǎng)頁(yè)布局設(shè)計(jì)、內(nèi)容編排、表現(xiàn)設(shè)計(jì)、交互與動(dòng)態(tài)效果設(shè)計(jì)等多個(gè)方面完成高校網(wǎng)站設(shè)計(jì)。企業(yè)網(wǎng)站首頁(yè)中主要包含下拉耳機(jī)導(dǎo)航表單、搜索欄、jQuery旋轉(zhuǎn)輪播式插件CarouFredSel、Tab選項(xiàng)卡等表現(xiàn)形式。

二、實(shí)驗(yàn)環(huán)境（儀器設(shè)備、軟件等）

實(shí)驗(yàn)軟件：HBuilderX

系統(tǒng)環(huán)境：win10操作系統(tǒng)

三、實(shí)驗(yàn)原理（或要求）

1. div網(wǎng)頁(yè)布局結(jié)構(gòu)設(shè)計(jì)
   

1. 內(nèi)容編排
   按照網(wǎng)頁(yè)布局設(shè)計(jì)，分別設(shè)計(jì)每一個(gè)分區(qū)內(nèi)容、表現(xiàn)及互動(dòng)效果。
   ①頭部設(shè)計(jì)。
   頭部包含logo和頂部導(dǎo)航鏈接兩部分，有5部分組成，其中三個(gè)圖層分別插入logo、鏈接、中英文等。圖層設(shè)置float屬性，分別向左、向右浮動(dòng)排列。
   類名稱.top_link的圖層中，有4個(gè)鏈接，當(dāng)鼠標(biāo)盤旋時(shí)，出現(xiàn)上下翻滾背景圖的效果。這是通過(guò)CSS變換超鏈接和盤旋超鏈接的背景圖像的樣式來(lái)實(shí)現(xiàn)的。每副背景圖像有兩個(gè)顏色相近的色塊構(gòu)成。
   默認(rèn)將超鏈接背景設(shè)置為不重復(fù)、居左上部，盤旋超鏈接設(shè)置背景不重復(fù)、居左底部，這樣來(lái)形成翻滾效果。
   ②JavaScript導(dǎo)航欄菜單設(shè)計(jì)
   導(dǎo)航欄菜單有耳機(jī)下拉菜單構(gòu)成，一級(jí)菜單水平排列，有學(xué)校概況、黨群工作、人才培養(yǎng)、科學(xué)研究、師資隊(duì)伍、學(xué)生工作、招生就業(yè)、國(guó)際交流。二級(jí)菜單有下拉菜單，在每個(gè)一級(jí)下拉菜單列表項(xiàng)的下面。
   采用JavaScript技術(shù)實(shí)現(xiàn)耳機(jī)導(dǎo)航菜單。一級(jí)菜單采用無(wú)序列表，二級(jí)采用自定義列表，并將自定義列表鑲嵌在列表項(xiàng)li標(biāo)記中。
   ③搜索欄設(shè)計(jì)
   為了方便網(wǎng)站訪問(wèn)者檢索信息，一般網(wǎng)站首頁(yè)都會(huì)設(shè)計(jì)搜索欄。搜索欄內(nèi)默認(rèn)值為“站內(nèi)搜索”，獲取焦點(diǎn)是自動(dòng)清空，，失去焦點(diǎn)時(shí)，洛無(wú)內(nèi)容則自動(dòng)賦值為默認(rèn)值。
   ④jQuery插件實(shí)現(xiàn)輪播圖輪播
   分別用兩個(gè)圖層來(lái)實(shí)現(xiàn)。第一個(gè)圖層設(shè)置輪播項(xiàng)目，即若干個(gè)圖像超鏈接；第二個(gè)圖層設(shè)置輪播導(dǎo)航，即顯示圖像切換按鈕‘上一個(gè)、下一個(gè)’。
   圖像輪播圖層代碼設(shè)計(jì)。需要將輪播的圖像通過(guò)超鏈接的方式加圖層中。然后設(shè)計(jì)圖層、超鏈接、圖像的樣式。無(wú)鼠標(biāo)操作時(shí)，5s自動(dòng)輪播圖像；通過(guò)左右箭頭實(shí)現(xiàn)圖手動(dòng)切換。
   ⑤主體設(shè)計(jì)
   主體內(nèi)容設(shè)計(jì)主要包括北理新聞、北理快訊、公共服務(wù)、專題報(bào)道、通知公告。
   ·北理新聞。此部分采用圖像超鏈接實(shí)現(xiàn)圖文混排效果，三個(gè)圖層向左浮動(dòng)。
   ·北理快訊。采用tab選項(xiàng)卡實(shí)現(xiàn)小區(qū)域內(nèi)顯示大量信息的功效。Tab選項(xiàng)卡也稱“滑動(dòng)門”，是由選項(xiàng)菜單 和主體顯示取余構(gòu)成。選項(xiàng)卡標(biāo)題菜單一半采用無(wú)需列表呈現(xiàn)，設(shè)置無(wú)序列表的class和id屬性，并給每一個(gè)列表指派onmouseover或者onclick事件句柄，綁定函數(shù)settab（m，n）,設(shè)置第一個(gè)列表class屬性為hover，通過(guò)css定義hover為塊級(jí)顯示方式。指定選項(xiàng)卡信息顯示區(qū)域是通過(guò)無(wú)序列表來(lái)顯示相應(yīng)信息，然后在無(wú)序列表中嵌入div，在div中在嵌入定義列表，用定義列表加載超鏈接信息。
   ·公共服務(wù)。主要通過(guò)CSS加載小圖標(biāo)和文字鏈接。利用空span標(biāo)記應(yīng)用樣式加載圖標(biāo)。
   ·專題報(bào)道。通過(guò)圖層嵌套來(lái)實(shí)現(xiàn)，先定義含兩個(gè)超鏈接的導(dǎo)航圖層，然后分別定義兩個(gè)圖層，通過(guò)無(wú)需列表存放信息，其中第一個(gè)圖層默認(rèn)為顯示。
   ·通知公告。有三個(gè)圖層嵌套構(gòu)成，外涂層包含兩個(gè)子圖層，第一個(gè)子圖層包含標(biāo)題；第二個(gè)子圖層包含日期分類的通知信息。
2. 表現(xiàn)設(shè)計(jì)

網(wǎng)站所有樣式文件統(tǒng)一寫(xiě)在外部CSS文件中，文件名為style.css。通過(guò)樣式表的方式插入在html頁(yè)面的頭部。

四、實(shí)驗(yàn)步驟

1. 下載安裝HBuilderX。
2. 開(kāi)始網(wǎng)頁(yè)結(jié)構(gòu)布局設(shè)計(jì)，繪制網(wǎng)頁(yè)布局結(jié)構(gòu)圖。
3. 劃分功能模塊，開(kāi)始填充設(shè)計(jì)內(nèi)容。
4. 準(zhǔn)備網(wǎng)頁(yè)所需圖片。
5. 在HBuilderX上創(chuàng)建一個(gè)包含html、css、img的項(xiàng)目。
6. 開(kāi)始編寫(xiě)靜態(tài)網(wǎng)頁(yè)。

7、編寫(xiě)動(dòng)態(tài)特效并添加。

五、記錄與處理（實(shí)驗(yàn)數(shù)據(jù)、誤差分析、結(jié)果分析）

1>div網(wǎng)頁(yè)布局結(jié)構(gòu)設(shè)計(jì)

2>內(nèi)容編排

按照網(wǎng)頁(yè)布局設(shè)計(jì)，分別設(shè)計(jì)每一個(gè)分區(qū)內(nèi)容、表現(xiàn)及互動(dòng)效果。

①頭部設(shè)計(jì)。

頭部包含logo和頂部導(dǎo)航鏈接兩部分，有5部分組成，其中三個(gè)圖層分別插入logo、鏈接、中英文等。圖層設(shè)置float屬性，分別向左、向右浮動(dòng)排列。

類名稱.top_link的圖層中，有4個(gè)鏈接，當(dāng)鼠標(biāo)盤旋時(shí)，出現(xiàn)上下翻滾背景圖的效果。這是通過(guò)CSS變換超鏈接和盤旋超鏈接的背景圖像的樣式來(lái)實(shí)現(xiàn)的。每副背景圖像有兩個(gè)顏色相近的色塊構(gòu)成。

默認(rèn)將超鏈接背景設(shè)置為不重復(fù)、居左上部，盤旋超鏈接設(shè)置背景不重復(fù)、居左底部，這樣來(lái)形成翻滾效果。代碼如下所示：

頂部菜單具有背景圖像翻轉(zhuǎn)效果，需要調(diào)用兩個(gè)外部JS文件

②JavaScript導(dǎo)航欄菜單設(shè)計(jì)

導(dǎo)航欄菜單有耳機(jī)下拉菜單構(gòu)成，一級(jí)菜單水平排列，有學(xué)校概況、黨群工作、人才培養(yǎng)、科學(xué)研究、師資隊(duì)伍、學(xué)生工作、招生就業(yè)、國(guó)際交流。二級(jí)菜單有下拉菜單，在每個(gè)一級(jí)下拉菜單列表項(xiàng)的下面。

采用JavaScript技術(shù)實(shí)現(xiàn)耳機(jī)導(dǎo)航菜單。一級(jí)菜單采用無(wú)序列表，二級(jí)采用自定義列表，并將自定義列表鑲嵌在列表項(xiàng)li標(biāo)記中。示例：

③搜索欄設(shè)計(jì)

為了方便網(wǎng)站訪問(wèn)者檢索信息，一般網(wǎng)站首頁(yè)都會(huì)設(shè)計(jì)搜索欄。搜索欄內(nèi)默認(rèn)值為“站內(nèi)搜索”，獲取焦點(diǎn)是自動(dòng)清空，，失去焦點(diǎn)時(shí)，洛無(wú)內(nèi)容則自動(dòng)賦值為默認(rèn)值。

④jQuery插件實(shí)現(xiàn)輪播圖輪播

分別用兩個(gè)圖層來(lái)實(shí)現(xiàn)。第一個(gè)圖層設(shè)置輪播項(xiàng)目，即若干個(gè)圖像超鏈接；第二個(gè)圖層設(shè)置輪播導(dǎo)航，即顯示圖像切換按鈕‘上一個(gè)、下一個(gè)’。

圖像輪播圖層代碼設(shè)計(jì)。需要將輪播的圖像通過(guò)超鏈接的方式加圖層中。然后設(shè)計(jì)圖層、超鏈接、圖像的樣式。無(wú)鼠標(biāo)操作時(shí)，5s自動(dòng)輪播圖像；通過(guò)左右箭頭實(shí)現(xiàn)圖手動(dòng)切換。

⑤主體設(shè)計(jì)

主體內(nèi)容設(shè)計(jì)主要包括北理新聞、北理快訊、公共服務(wù)、專題報(bào)道、通知公告。

·北理新聞。此部分采用圖像超鏈接實(shí)現(xiàn)圖文混排效果，三個(gè)圖層向左浮動(dòng)。

·北理快訊。采用tab選項(xiàng)卡實(shí)現(xiàn)小區(qū)域內(nèi)顯示大量信息的功效。Tab選項(xiàng)卡也稱“滑動(dòng)門”，是由選項(xiàng)菜單 和主體顯示取余構(gòu)成。選項(xiàng)卡標(biāo)題菜單一半采用無(wú)需列表呈現(xiàn)，設(shè)置無(wú)序列表的class和id屬性，并給每一個(gè)列表指派onmouseover或者onclick事件句柄，綁定函數(shù)settab（m，n）,設(shè)置第一個(gè)列表class屬性為hover，通過(guò)css定義hover為塊級(jí)顯示方式。指定選項(xiàng)卡信息顯示區(qū)域是通過(guò)無(wú)序列表來(lái)顯示相應(yīng)信息，然后在無(wú)序列表中嵌入div，在div中在嵌入定義列表，用定義列表加載超鏈接信息。

·公共服務(wù)。主要通過(guò)CSS加載小圖標(biāo)和文字鏈接。利用空span標(biāo)記應(yīng)用樣式加載圖標(biāo)。

·專題報(bào)道。通過(guò)圖層嵌套來(lái)實(shí)現(xiàn)，先定義含兩個(gè)超鏈接的導(dǎo)航圖層，然后分別定義兩個(gè)圖層，通過(guò)無(wú)需列表存放信息，其中第一個(gè)圖層默認(rèn)為顯示。

專題報(bào)道需要引用外部文件tab.js，格式如下

·通知公告。有三個(gè)圖層嵌套構(gòu)成，外涂層包含兩個(gè)子圖層，第一個(gè)子圖層包含標(biāo)題；第二個(gè)子圖層包含日期分類的通知信息。

3>表現(xiàn)設(shè)計(jì)

網(wǎng)站所有樣式文件統(tǒng)一寫(xiě)在外部CSS文件中，文件名為style.css。通過(guò)樣式表的方式插入在html頁(yè)面的頭部。

1. 實(shí)驗(yàn)小結(jié)

web前端開(kāi)發(fā)技術(shù)的課程設(shè)計(jì)是計(jì)算機(jī)專業(yè)實(shí)踐性非常強(qiáng)的一門學(xué)科，通過(guò)本次課程設(shè)計(jì)近乎完美地實(shí)現(xiàn)了html、css、JavaScript的綜合使用，但是仍然存在不少問(wèn)題需要解決，在解決問(wèn)題過(guò)程中我通過(guò)查詢資料和檢索網(wǎng)站獲取了很多有趣且有用的東西。我在編寫(xiě)網(wǎng)站時(shí)，每編寫(xiě)一段便停下來(lái)檢查代碼運(yùn)行代碼，由于代碼量的繁多以及層級(jí)過(guò)多導(dǎo)致編寫(xiě)過(guò)程中出現(xiàn)了許多低級(jí)錯(cuò)誤，不得不一再停止編寫(xiě)反復(fù)檢查。對(duì)于一些編寫(xiě)不出來(lái)的功能模塊，我采取空置div，等實(shí)驗(yàn)代碼實(shí)現(xiàn)時(shí)再填充模塊。