【正文】 .......................................................................................................10第 4 章 網(wǎng)站欄目（頻道）設(shè)計(jì) ...............................12 欄目的設(shè)計(jì)思路 ............................................................................................................................12 欄目的功能實(shí)現(xiàn) .............................................................................................................................12第 5 章 網(wǎng)站頁面的部分代碼設(shè)計(jì) .............................14 HTML 頁面設(shè)計(jì) .............................................................................................................................14 CSS 頁面設(shè)計(jì) .................................................................................................................................19 FLASH/JAVASCRIPT 頁面設(shè)計(jì) ........................................................................................................20課程設(shè)計(jì)總結(jié) ..............................................22參考文獻(xiàn) ..................................................24沈陽航空航天大學(xué)課程設(shè)計(jì)1第 1 章 概述 網(wǎng)頁設(shè)計(jì)相關(guān)技術(shù)此課程設(shè)計(jì)所用到的技術(shù)及工具有：HTML/XHTML,CSS,動(dòng)畫/圖片，firework，photoshop，等等。 網(wǎng)頁設(shè)計(jì)相關(guān)工具在 HTML 中：HTML 語言簡(jiǎn)介：HTML 語言，又稱超文本標(biāo)記語言。與其他編程語言不同，它不是一種真正的計(jì)算機(jī)編程語言，而是一種在使用轉(zhuǎn)義碼文檔中應(yīng)用的格式化語法。HTML 語言不像其他語言一樣被編譯為指令，而只是提供一些語法標(biāo)記，再由瀏覽器解釋生成相應(yīng)的頁面。HTML 的基本頁面布局：HTML 文旦的構(gòu)成是十分簡(jiǎn)單的，它主要包括文件頭、表頭和主體三部分。在頁面布局當(dāng)中往往要產(chǎn)生許多的效果，這就要用到各種各樣的標(biāo)記。為了使頁面內(nèi)容更加豐富多彩，文本的修飾是一個(gè)重要的環(huán)節(jié)。通過文本的修飾，可以突出文檔中的重點(diǎn)內(nèi)容，避免整個(gè)文檔外觀上的單一化，從而產(chǎn)生良好的視覺效果。HTML 的超鏈接：超鏈接的類型主要有兩種，即文本式超鏈接和圖像超鏈接。在定義超鏈接時(shí)，可以定義兩種方式：絕對(duì)路徑和相對(duì)路徑。其中創(chuàng)建超鏈接的方法是：1） 、超鏈接標(biāo)記 2） 、base基底鏈接標(biāo)記。HTML 中圖像的處理：其中圖像的種類有 GIF 格式、JPG 格式、BMP 格式、PCX沈陽航空航天大學(xué)課程設(shè)計(jì)2格式、TIF 格式。HTML 中的表格：一個(gè)基本的網(wǎng)頁表格和普通文檔中使用的表格類似，通常由表格的標(biāo)題、表欄、數(shù)據(jù)項(xiàng)、數(shù)據(jù)等元素組成標(biāo)題表示了這個(gè)表格的主要內(nèi)容，表欄是指表格中的一個(gè)個(gè)小的舉行區(qū)域，它用來存放數(shù)據(jù)等，數(shù)據(jù)項(xiàng)又稱表頭，表示數(shù)據(jù)項(xiàng)所對(duì)應(yīng)的摩納哥成，數(shù)據(jù)是指存放在表欄中的文集，數(shù)字等信息。當(dāng)然在設(shè)計(jì)時(shí)可以根據(jù)實(shí)際情況對(duì)表格的結(jié)構(gòu)進(jìn)行適當(dāng)調(diào)整，使之符合自己的要求。在 CSS 中：用 CSS 格式化樣本：（1） 、創(chuàng)建一個(gè) HTML 文件，切換到設(shè)計(jì)視圖，該文件中包含一些文本。 （2）選擇命令“窗口”丨“CSS 樣式”命令，打開“CSS 樣式”面板。單機(jī)“CSS 樣式”面板右下角的“新建 CSS 規(guī)則”按鈕，在彈出的“新建 CSS 規(guī)則”對(duì)話框中，設(shè)置新 CSS 規(guī)則的“名稱”為“.textCSS” ，選擇“定義在”為“僅對(duì)該文檔” ，然后單機(jī)“確定”按鈕。 （3）在彈出的“.textCSS的規(guī)則定義”對(duì)話框中直接單擊“確定”按鈕，在左側(cè)的“分類”列表中選擇“類型” ，然后到右側(cè)窗格中進(jìn)行設(shè)置，這里的設(shè)置和字體相關(guān)。 （4）再來看一下 CSS 樣式在代碼視圖中的情況。用 CSS 控制表格：（1） 、新建網(wǎng)頁文檔，在其中插入一個(gè)空表格。 （2）在“CSS樣式”面板中單擊“添加規(guī)則”按鈕，在彈出的“新建 CSS 規(guī)則”對(duì)話框中，設(shè)置“名稱”為“.cssTable” ，選擇“定義在”為“僅對(duì)該文檔” ，然后單擊“確定”按鈕。 （3）在“分類”列表中選擇“邊框” ，在右側(cè)的“樣式”區(qū)域中選中“全部相同”復(fù)選框，在下拉列表框中選擇單位為“像素” ，在前面輸入數(shù)字 1；在“顏色”區(qū)域中選中“全部相同”復(fù)選框。單擊下面的調(diào)色板，選擇黑色；完成設(shè)置后單擊“確定”按鈕。 （4）現(xiàn)在將剛才制作的 CSS 樣式付瑜表格，進(jìn)入設(shè)計(jì)駛?cè)耄x擇整個(gè)表格進(jìn)入“屬性”檢查器，在“類”下拉列表框中選擇 cssTable 選項(xiàng)（6）按 F12 鍵，打開瀏覽器進(jìn)行預(yù)覽，可以看到外邊框?yàn)楹谏?xì)線的表格效果。CSS 樣式濾鏡的應(yīng)用：（1）新建一個(gè)網(wǎng)頁文檔，在網(wǎng)頁文檔中輸入一行文字，并插入一個(gè)圖像。 （2）單擊“CSS 樣式”面板中的“新建 CSS 規(guī)則”按鈕，彈沈陽航空航天大學(xué)課程設(shè)計(jì)3出“新建 CSS 規(guī)則”對(duì)話框。再此對(duì)話框的“選擇器類型“單選按鈕組”中選擇“類” ，在“名稱”文本框中輸入文字，選擇“定義在”為“僅對(duì)該文檔” 。（3）單擊確定，在擴(kuò)展列次奧窗格中，代開“濾鏡”下拉列表，就可以看到許多選項(xiàng)了。 （4）選擇一個(gè) CSS 樣式（5）單擊“確定”按鈕，CSS 規(guī)則就被定義好了。在 Flash 中：常見的 Flash 動(dòng)畫都有：特效動(dòng)畫，逐幀動(dòng)畫，形狀補(bǔ)間動(dòng)畫，動(dòng)作補(bǔ)間動(dòng)畫，遮罩動(dòng)畫和引導(dǎo)路徑動(dòng)畫等。 （1）時(shí)間軸動(dòng)畫在這個(gè)功能中包括變形，淡入淡出，旋轉(zhuǎn)。和模糊等特效（2）逐幀動(dòng)畫的原理是自“連續(xù)的關(guān)鍵幀“中分解動(dòng)畫動(dòng)作。 （3）動(dòng)作補(bǔ)間動(dòng)畫首尾幀上的對(duì)象，必須是元件實(shí)例，且必須是同一個(gè)元件的實(shí)例。 （4）引導(dǎo)路徑動(dòng)畫是由“引導(dǎo)層”和被引導(dǎo)層兩個(gè)圖層組成的。 （5）形狀補(bǔ)間動(dòng)畫與其他動(dòng)畫方式不同，它只能使用使用矢量圖形來實(shí)現(xiàn)。 （6）遮罩動(dòng)畫就是通過“遮罩”圖層中的圖形或者文字等對(duì)象，透出下面圖層中的內(nèi)容。 （7）多圖層動(dòng)畫是指在不同的圖層上放置不同的元件，實(shí)現(xiàn)元件的同時(shí)動(dòng)作或展現(xiàn)功能多圖層動(dòng)畫一般永不制作較為復(fù)雜的動(dòng)畫。 在 Firework 中：在 Firework 中切割網(wǎng)頁圖形（1）選擇“工具”面板中的“切片”工具（2） 畫布中拖動(dòng)鼠標(biāo)，劃分出不同的區(qū)域（3）劃分好切片以后，選擇“文件”丨“導(dǎo) 出”命令（4）在彈出的“導(dǎo)出”對(duì)話框中，輸入文件名為 index，保存類型為 HTML 和圖像，其他選項(xiàng)默認(rèn)，如果要講圖片文件單獨(dú)放在一個(gè)文件夾中，可以選中“將圖像放入子文件夾”選項(xiàng)。 （5）單擊“選項(xiàng)”按鈕，可以設(shè)置 HTML 文件的樣式、表格和文件名規(guī)則等。 （6）設(shè)置完各個(gè)選項(xiàng)以后，單擊“保存“按鈕，就可以將切割好的圖片導(dǎo)出。沈陽航空航天大學(xué)課程設(shè)計(jì)4第 2 章 網(wǎng)站網(wǎng)頁設(shè)計(jì)規(guī)劃 站點(diǎn)標(biāo)題黨委組織部 站點(diǎn)目標(biāo)為了方便老師和學(xué)生更方便的了解關(guān)于黨委組織部的最新消息和瀏覽黨委文件而設(shè)立的站點(diǎn)。老師和學(xué)生可以通過站點(diǎn)的圖片以及文章更直觀的了解到黨委組織部的最新動(dòng)態(tài)。 目標(biāo)用戶 廣大人民群眾 網(wǎng)站的評(píng)估標(biāo)準(zhǔn) 本網(wǎng)站的評(píng)估標(biāo)準(zhǔn)主要是瀏覽者的歷史瀏覽次數(shù)及閱讀文章的情況的情況。 網(wǎng)站內(nèi)容 本網(wǎng)站主要的內(nèi)容和其功能均反映在下表中：表 21 網(wǎng)站功能一覽表首頁 熱點(diǎn)話題及圖片黨建工作 黨員建設(shè)的工作情況干部管理 關(guān)于干部培訓(xùn)及換屆的通知理論學(xué)習(xí) 黨員的政治教育文件通知 黨委組織部活動(dòng)通知沈陽航空航天大學(xué)課程設(shè)計(jì)5 網(wǎng)站設(shè)計(jì)原則 本網(wǎng)站作為服務(wù)型網(wǎng)站，在于對(duì)黨的宣傳及黨員的教育，擴(kuò)大對(duì)學(xué)生的影響并通過瀏覽網(wǎng)站的形式讓更多人了解黨委組織部的最新動(dòng)態(tài)，從而方便老師和學(xué)生查閱文件及相關(guān)通知，因此文件通知部分就是最重要的內(nèi)容。為了凸顯黨的為人民服務(wù)的宗旨，本網(wǎng)站就選擇了用磚塊的圖案作為背景，并且為了吸引更多的學(xué)生瀏覽網(wǎng)頁就利用了跳動(dòng)字體，還插入的 FLASH 動(dòng)畫。 網(wǎng)站宣傳黨的思想的同時(shí)，兼具向?yàn)g覽者提供各種關(guān)于黨委組織部的信息及通知。在網(wǎng)頁的設(shè)計(jì)中沒有浮華雜亂的修飾，只有模版本身搭配黨旗，美化頁面的同時(shí)，更突出了網(wǎng)站的主旨，以簡(jiǎn)潔為主，盡量避免華而不實(shí)也可以適應(yīng)不同瀏覽者不同的審美要求，也著重表現(xiàn)了網(wǎng)站的風(fēng)格。 網(wǎng)站采用的技術(shù)及特征此網(wǎng)站采用的技術(shù)有：HTML/XHTML,CSS,動(dòng)畫/圖片，firework特征：HTML 的特征：HTML 語言，又稱超文本標(biāo)記語言。與其他編程語句同，它不是一種真正的計(jì)算機(jī)編程語言，而是一種在使用轉(zhuǎn)義碼文檔中應(yīng)用的格式化語法。HTML 語言不像其他語言一樣被編譯為指令，而只是提供一些語法標(biāo)記，再由瀏覽器解釋生成相應(yīng)的頁面。 CSS 的特征：CSS 具有美化網(wǎng)頁等特征 Flash 的特征：Flash 是基于矢量的具有交互性的圖形編輯和二維動(dòng)畫制作軟件，它具有強(qiáng)大的動(dòng)畫制作功能和作樂的試聽表現(xiàn)力。利用它可以將音樂，聲效影片，動(dòng)畫以及富有新意的界面融合在一起，從而制作出高品質(zhì)的網(wǎng)頁動(dòng)畫和多媒體作品。 Firework 的特征：Fireworks 是一個(gè)完全為網(wǎng)頁制作者設(shè)計(jì)的圖像處理