個人網站的設計與實現_畢業設計(編輯修改稿)

　

【文章內容簡介】 還有其它的幾個網站與主頁的制作相同，一個網頁是圖象和文字的組合。 “平面設計”中的圖象插入和前面的介紹相似，并可以在屬性攔中調節圖象的大小。 在 Dreamwerver中常常會用到 Firework、 Flash，它們是相輔相成，在主頁中的主體部 分就是用 Firework,如圖所示： 在“個人說明”中也用 到這點，首先定好需要尺寸，在屬性中設好背景，顏色等 等，插入圖象，輸入文字，也 word里的操作雷同。 3. 建立網頁鏈接 網站實際上是由很多網頁組成的，那么網頁之間是如何聯系的呢？這就是本章要講 的內容 網頁的“鏈接”。 “鏈接”，又稱“超鏈接 （ Hyperlink） ,它作為網頁的橋梁，起著相當重要的作用。網頁中的很多對象都可以加入“鏈接”屬性。在 Dreamweaver MX2020中，如果以“鏈 接”的媒介來劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內部鏈接和外部鏈接”、“ Email鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉菜單”，共 8種。其中部分內容在之前的章節中可能接觸過，這里將對其進行更深入的講解。 “文字鏈接”即以文字作為媒介的鏈接，它是網頁中最常被使用的鏈接方式，具 有“文件小、制作簡單和便于維護”的特點。 接下來結合我的個人網站為實例，來講解如何為文字建立“鏈接”。 具體操作步驟如下所述。 操作步驟 步驟 1 準備好已經制作完成的首頁的各個欄目頁面（假設除了“鏈接”，其他內容都 已經制 作完成了），該網站包含 6個欄目，這里的 5個欄目 “平面設計”、“動畫 制作”和“網文精品”、“經典回顧”、“個人說明”為例來進行講解。 步驟 2 在 Dreamweaver 中打開首頁，之后反白選取作為“鏈接”的文字。實例中要做 到單擊不同的欄目的網頁。因此為第 1個欄目“平面設計”設置鏈接，首先要反白選中 “平面設計” 4個文字。 步驟 3 觀察“屬性面板”，其中包括一個“鏈接”文本框。 步驟 4 接下來需要把鏈接的地址加入到文本框中，方法有 3種。 這里我用到的是直接點擊文件夾圖標，在文件 夾中找到要鏈接的對象 。這樣 就建立了超鏈接。不過有點很重要，由于大多數服務器都不支持中文文件名，而且對大 小寫敏感，因此采用英文文件名并統一大小寫。如圖所示： 步驟 5 在“鏈接”文本框下面還有一個“目標”下拉列表，從中可以選擇鏈接網頁顯示 的窗口方式，共有 4種。如圖： 實例中沒有選擇任何選項，保持空白，表示在原窗口中打開鏈接網頁。 步驟 6 還可以設置一些“鏈接”的屬性，這是前面講過的內容。單擊“屬性面板”中的 “頁面屬性”，選擇其中的“鏈接”分類，可以進行的 設置有“鏈接字體”、“大小”、 “鏈接顏色”、“變換圖像鏈接”顏色、“已訪問鏈接”顏色、“活動鏈接”顏色及“下 劃線樣式”。 步驟 7 至此，第 1個欄目的鏈接就制作完畢了，按下 Ctrl+S保存網頁，再按下 F12預 覽，測試一下，當鼠標放在“平面設計”這 4個文字上時將變成手形，并且瀏覽器窗口下面的狀態欄中會顯示鏈接到的網頁的地址，單擊文字，頁面會立即跳轉到第 1個欄目 中，這表示鏈接已經制作成功了。 步驟 8 同理，按照以上步驟，再為“動畫制作”和“網文精品”“經典回顧“等其它欄 制作指向對 應欄目的鏈接。 步驟 9 通常在欄目頁面中還需要有“返回首頁”的鏈接，單擊其后可以跳轉回首頁，因 此在各個欄目中還要插入“網站首頁”的文字，并且制作指向首頁 ， 制作方法不變。 至此，整個“文字鏈接”的實例就全就全部完成了。通過對這個實例的講解，讀者不僅 應該學會如何為文字制作鏈接，還應用對“鏈接”有了更加深刻的理解，鏈接的目的何 在？它到底能夠在網頁的網站中發揮什么樣的作用？怎樣才能更好地使用它？這些是 網頁制作者更應該思考的問題。 下面繼續介紹其他類型的鏈接。 圖像鏈接圖像鏈接 圖像鏈接 “圖像”也是常被使用的鏈接媒體，它和“文字鏈接”非常相似。為圖像加入鏈接，首 先應該在網頁中插入“圖像”，有關插入“圖像”或“導航條”按鈕的內容，接下來以 我的網站“追夢人“為例，講解如何建立“圖像鏈接”。 操作步驟 步驟 1 首先仍然要準備好已經制作完成的首頁和各個欄目的頁面（假設除了“鏈接”， 其他內容都已經制作完成了），該網站包含 6個欄目，下面我們就動手為這 6個欄目 分 別制作它們的鏈接。 步驟 2 在 Dreamweaver中打開網站的首頁，之后選取要制作“鏈接”的圖像。實例中先 為第 3個欄目“動畫制作”設置鏈接，因此選中包含“動畫制作” 4個字的圖像。 步驟 3 觀察“屬性面板”，在“鏈接”文本框中輸入鏈接的文字地址。可以使用之前講 過的“指向文件”和“選擇文件”的方法。 步驟 4 如果有需要，可以在“目標”下拉列表中選擇“鏈接”網頁顯示的窗口方式，分 別為 blank 、 parent 、 self或 top。實例中使用了默認出的保留空白選項的方式。 步驟 5 另外，讀者還可以為圖像增加“替代”文本。實例中為第 1個欄目增加欄目名稱 的“替代”文本。 步驟 6 至此，第 1個欄目的圖像鏈接就制作完畢了，按下 Ctrl+S保存網頁，再按下 F1 2預覽，測試一下，將鼠標放在“動畫制作” 4個文字上時將變成手形，同時瀏覽器窗 口下面的狀態欄中會顯示出鏈接到的網頁的地址，并且會顯示出“替代”文本“動畫制 作”，單擊文字，頁面會立即跳轉到第 3個欄目中，這表示鏈接已經制作成功了。 步驟 7 同理，按照以上步驟，再為其它幾幅圖像制作指向對應欄目的鏈接。 步驟 8 在欄目頁面中制作“返回首頁”的鏈接，使得單擊后可以跳轉回首頁，其制作方 法不變。 至此，整個“圖像鏈像”的實例就全部完成了。 – –– – Mail MailMail Mail的鏈接 的鏈接的鏈接 的鏈接 EMail鏈接，是指當瀏覽者單擊該鏈接之后，不是打開一個網頁文件，而是啟動用戶的 E Mail客戶端軟件（如 Outlook Express） ,并打開一個空白的新郵件，供瀏覽者撰寫 內容來與網站聯系人聯系，這是 一種最方便的互動方式。 結合“個人說明”網頁，建立 EMail鏈接的步驟如下所述。 操作步驟 步驟 1 將光標停留在頁面右下角要插入 Email鏈接的位置。 步驟 2 選擇“插入快捷欄”中的“常用”分類，單擊左側第 2個“電子郵件鏈接”按鈕。 步驟 3 在彈出的“電子郵件鏈接”對話框中有兩個輸入項，分別是“文本”和“ EMai l” 。在“文本”項中輸入鏈接的文字，中文、英文均可，在 EMail項中輸入網站聯 系有的電子郵件地址，如實例中的 。 步驟 4 單擊“確定”按鈕，具有“ EMail鏈接”屬性的文本就 ding_zhuimeng123@163. 。插入到光標所在位置了，按下 Ctrl+S保存網頁，再按下 F12預覽查看實際效果。 上面的方法只適用于文本的“ EMail鏈接”，如果想在其它的對象（如圖像）上也加入 這種鏈接，該怎辦呢？下面介紹第 2種建立“ EMail鏈接”的方法。 其實很簡單，與前面講過的圖像加入鏈接的方法基本一樣。先在頁面中需要的地方插入 圖像，之后選中圖像，并在“屬性面板”的“鏈接”文本框中輸入 如下語句即可 ma ilto: ?subject=網站的建議與第 1種方法不同的是， EMa il 地址前面增加了 mailto:字樣。用這種方法就可以給圖像等其他對象建立“ EMail 鏈接”了。 文件下載鏈接文件下載鏈接 文件下載鏈接 “文件下載鏈接”的原理很簡單，只要鏈接文件屬于瀏覽無法識別的關型，便都會使用 IE瀏覽器直接進行下載，并保存到本地計算機中。 瀏覽器無法 識別的文件類型有很多，這里就介紹一個最常用的，以 zip或 rar為后綴名 的壓縮格式文件，這種文件可以使用主流的壓縮軟件（如 winzip、 winrar）來制作。下 面我們就業以實例來說明。 在前面“插入多媒體”一章中，我們曾經講過直接鏈接文件的方式來插入“視頻”，即 直接在“鏈接”文本框中輸入“文件名 +名后綴名”，如 。單日擊這個鏈接， 經過數據下載后， Windows系統將啟動自帶的媒體播放器 Windows Media Player 來播 放該視頻。 操作步驟 步驟 1 先 將視頻文件 ，放入站點的 media文件 夾下。 步驟 2 將文件路徑輸入至“鏈接”文本框中。 步驟 3 保存網頁，按下 F12預覽，在瀏覽器中單擊“下載精彩廣告視頻”鏈接文本，會 彈出“文本下載”選擇框，單擊其中的“保存”按鈕。 步驟 4 在“另存為”對框中選擇保存到本地計算機中的位置，實例中為“經典回顧”文 件夾。之后單擊“保存”按鈕，壓縮文件即保存到該位置中。至此，“文件下載鏈接” 便制作完成了。讀者可以打開“我的文檔”文件夾，解壓縮 ，隨時欣 賞下載影片。 本設計中未用到此鏈接，在此只作簡單介紹。 在在 在 HTML HTMLHTML HTML語言中建立網頁鏈接 語言中建立網頁鏈接語言中建立網頁鏈接 語言中建立網頁鏈接 文字鏈接文字鏈接 文字鏈接 在 HTML語言中用超鏈接標記指向一個目標。其基本格式為： a href=” URL”文本內容 /a 舉個簡單的 “文本鏈接”的實例，該實例相對應的 HTML代碼如下所示。 html head title文字鏈接 /title /head body pa href“ ” target=” blank” 平面設計 /a（新開窗口， blank) /p pa href=” 動畫制作 /a（原窗口，默認為空） /p pa href=” 網文精品 /a/p /body /html 解釋 ? href:是 a標記的一種屬性，該屬性中的 URL等于鏈接目標文件的地址。 ? Target:也是 a標記的一種屬性，相當于 Dreamweaver“屬性面板”中的“目標”， 它的值等于 blank,效果是在新窗口中打開。除此之外還包括其他 3種： parent,self 和 top。這和 Dreamweaver中“目標”下拉列表中的內容是一模一樣的。 ? 文本內容：如代碼實例中的“平面設計”。這些文本將放在使用了鏈接屬性 href 和目標屬性 target的 a與 /a標記之間，產生了鏈接的效果。 提示 再提醒讀者一下， p為段落標記，在 Dreamweaver中是由 Enter（回車）鍵產生的。 圖像鏈接圖像鏈接 圖像鏈接 舉個簡單的“圖像鏈接”的實例。該實例相對應的ＨＴＭＬ代碼所示。 html head title圖像鏈接 /title /head body pa href=” web/” target=” blank” img src=” images/btn001ou ” alt“平面設計” =width=” 85” height=” 18” border=” 0” /a（新開窗口， blank） /p pa href=wallpaper/” img src=” images/” alt=“原創壁紙” width=” 85” height=” 18” border=” 0” /a（原窗口，默認為空） /p pa href=” 3d/” img src=” images/” alt“三維作品” =width