畢業(yè)設(shè)計(jì)個(gè)人網(wǎng)站的設(shè)計(jì)與實(shí)現(xiàn)-全文預(yù)覽
【正文】 窗口中 Flash文件的大小在 這里我的主頁插入的一個(gè)動畫如圖所示 本 文字是人類語言最基本的表達(dá)方式在網(wǎng)頁中文本內(nèi)容也可以說是重要的組成部分一個(gè)網(wǎng)站成功與否它是最關(guān)鍵的因素在這最關(guān)鍵的因素可豐富網(wǎng)站的文字內(nèi)容并以最最美觀最整齊的方式放入到網(wǎng)頁中 插入文本的兩種方式 網(wǎng)頁中需要大量的文本我們或以通過以下兩種方式插入它們 一種是在網(wǎng)頁編輯窗口中直接用鍵盤敲入 文本這可以算是最基本的輸入方式了和一些文本編輯軟件如 Microsoft Word 的使用方法一樣選擇好習(xí)慣的輸入法就可以運(yùn)指如飛了 另一種是復(fù)制文本的方式有些讀者可能不喜歡使用 Dreamweaver MX2021 來進(jìn)行打字的工作而更習(xí)慣在專門的文本編輯軟件中快速打字如 Microsoft Word和 Windows 自帶的記事本等又或者讀者已經(jīng)準(zhǔn)備好了要放入網(wǎng)頁的文本的電子版本那么我們就可以直接使用 Dreamweaver 的文本復(fù)制功能將大段的文本內(nèi)容拷貝到網(wǎng)頁的編輯窗口來進(jìn)行排版的工作具體步驟如下 打開文本編輯軟 件如 Microsoft Word 選中要復(fù)制的文本它們將反白顯示執(zhí)行菜單編輯復(fù)制命令或直接用快捷鍵 CtrlC之后切換回 Dreamweaver將光標(biāo)停留在插入文本的位置執(zhí)行主菜單編輯粘貼命令或直接使用快捷鍵 Ctrlv 即可將大段的文本快速粘貼到網(wǎng)頁中 這在我的網(wǎng)文精品中用到很多全部是在 word 軟件中排好 ctrlc 然后點(diǎn)擊要粘貼的位置 crtlv 到 Dreamweaver 即可 23 創(chuàng)建其它網(wǎng)頁 還有其它的幾個(gè)網(wǎng)站與主頁的制作相同一個(gè)網(wǎng)頁是圖象和文字的組合 平面設(shè)計(jì)中的圖象插入和前面的介紹相似并可以在屬性攔中調(diào)節(jié)圖象 的大小 在 Dreamwerver 中常常會用到 FireworkFlash 它們是相輔相成在主頁中的主體部分就是用 Firework 如圖所示 在個(gè)人說明中也用到這點(diǎn)首先定好需要尺寸在屬性中設(shè)好背景顏色等等插入圖象輸入文字也 word 里的操作雷同 第三章 建立網(wǎng)頁鏈接 網(wǎng)站實(shí)際上是由很多網(wǎng)頁組成的那么網(wǎng)頁之間是如何聯(lián)系的呢這就是本章要講的內(nèi)容 網(wǎng)頁的鏈接 鏈接又稱超鏈接 Hyperlink 它作為網(wǎng)頁的橋梁起著相當(dāng)重要的作用網(wǎng)頁中的很多對象都可以加入鏈接屬性在 Dreamweaver MX2021 中如果以鏈接的媒 介來劃分的話則鏈接可以分為文字鏈接圖像鏈接圖像地圖鏈接內(nèi)部鏈接和外部鏈接Email 鏈接命名錨記鏈接文件下載鏈接和跳轉(zhuǎn)菜單共 8 種其中部分內(nèi)容在之前的章節(jié)中可能接觸過這里將對其進(jìn)行更深入的講解 31 文字鏈接 文字鏈接即以文字作為媒介的鏈接它是網(wǎng)頁中最常被使用的鏈接方式具有文件小制作簡單和便于維護(hù)的特點(diǎn) 接下來結(jié)合我的個(gè)人網(wǎng)站為實(shí)例來講解如何為文字建立鏈接 具體操作步驟如下所述 操作步驟 步驟 1 準(zhǔn)備好已經(jīng)制作完成的首頁的各個(gè)欄目頁面假設(shè)除了鏈接其他內(nèi)容都已經(jīng)制作完成了該網(wǎng)站包含 6個(gè)欄目這里的 5個(gè)欄目 平 面設(shè)計(jì)動畫制作和網(wǎng)文精品經(jīng)典回顧個(gè)人說明為例來進(jìn)行講解 步驟 2 在 Dreamweaver 中打開首頁之后反白選取作為鏈接的文字實(shí)例中要做到單擊不同的欄目的網(wǎng)頁因此為第 1 個(gè)欄目平面設(shè)計(jì)設(shè)置鏈接首先要反白選中平面設(shè)計(jì) 4 個(gè)文字 步驟 3 觀察屬性面板其中包括一個(gè)鏈接文本框 步驟 4 接下來需要把鏈接的地址加入到文本框中方法有 3 種 這里我用到的是直接點(diǎn)擊文件夾圖標(biāo)在文件夾中找到要鏈接的對象graphhtm 這樣就建立了超鏈接不過有點(diǎn)很重要由于大多數(shù)服務(wù)器都不支持中文文件名而且對大小寫敏感因此采用英文文件名并統(tǒng)一大小寫如圖 所示 步驟 5 在鏈接文本框下面還有一個(gè)目標(biāo)下拉列表從中可以選擇鏈接網(wǎng)頁顯示的窗口方式共有 4 種如圖 實(shí)例中沒有選擇任何選項(xiàng)保持空白表示在原窗口中打開鏈接網(wǎng)頁 步驟 6 還可以設(shè)置一些鏈接的屬性這是前面講過的內(nèi)容單擊屬性面板中的頁面屬性選擇其中的鏈接分類可以進(jìn)行的設(shè)置有鏈接字體大小鏈接顏色變換圖像鏈接顏色已訪問鏈接顏色活動鏈接顏色及下劃線樣式 步驟 7 至此第 1 個(gè)欄目的鏈接就制作完畢了按下 CtrlS 保存網(wǎng)頁再按下 F12 預(yù)覽測試一下當(dāng)鼠標(biāo)放在平面設(shè)計(jì)這 4 個(gè)文字上時(shí)將變成手形并且瀏覽器窗口下面的狀態(tài)欄中會顯示鏈接 到的網(wǎng)頁的地址單擊文字頁面會立即跳轉(zhuǎn)到第 1 個(gè)欄目中這表示鏈接已經(jīng)制作成功了 步驟 8 同理按照以上步驟再為動畫制作和網(wǎng)文精品經(jīng)典回顧等其它欄制作指向?qū)?yīng)欄目的鏈接 步驟 9 通常在欄目頁面中還需要有返回首頁的鏈接單擊其后可以跳轉(zhuǎn)回首頁因此在各個(gè)欄目中還要插入網(wǎng)站首頁的文字并且制作指向首頁 indexhtml 的鏈接制作方法不變 至此整個(gè)文字鏈接的實(shí)例就全就全部完成了通過對這個(gè)實(shí)例的講解讀者不僅應(yīng)該學(xué)會如何為文字制作鏈接還應(yīng)用對鏈接有了更加深刻的理解鏈接的目的何在它到底能夠在網(wǎng)頁的網(wǎng)站中發(fā)揮什么樣的作用怎樣才能更好地 使用它這些是網(wǎng)頁制作者更應(yīng)該思考的問題 下面繼續(xù)介紹其他類型的鏈接 32 圖像鏈接 圖像也是常被使用的鏈接媒體它和文字鏈接非常相似為圖像加入鏈接首先應(yīng)該在網(wǎng)頁中插入圖像有關(guān)插入圖像或?qū)Ш綏l按鈕的內(nèi)容接下來以我的網(wǎng)站追夢人為例講解如何建立圖像鏈接 操作步驟 步驟 1 首先仍然要準(zhǔn)備好已經(jīng)制作完成的首頁和各個(gè)欄目的頁面假設(shè)除了鏈接其他內(nèi)容都已經(jīng)制作完成了該網(wǎng)站包含 6個(gè)欄目下面我們就動手為這 6個(gè)欄目分別制作它們的鏈接 步驟 2 在 Dreamweaver 中打開網(wǎng)站的首頁之后選取要制作鏈接的圖像實(shí)例中先為第 3 個(gè)欄目動畫制作 設(shè)置鏈接因此選中包含動畫制作 4 個(gè)字的圖像 步驟 3 觀察屬性面板在鏈接文本框中輸入鏈接的文字地址可以使用之前講過的指向文件和選擇文件的方法 步驟 4 如果有需要可以在目標(biāo)下拉列表中選擇鏈接網(wǎng)頁顯示的窗口方式分別為 blank parent self 或 top 實(shí)例中使用了默認(rèn)出的保留空白選項(xiàng)的方式 步驟 5 另外讀者還可以為圖像增加替代文本實(shí)例中為第 1 個(gè)欄目增加欄目名稱的替代文本 步驟 6 至此第 1 個(gè)欄目的圖像鏈接就制作完畢了按下 CtrlS 保存網(wǎng)頁再按下 F12預(yù)覽測試一下將鼠標(biāo)放在動畫制作 4個(gè)文字上時(shí)將變成手形 同時(shí)瀏覽器窗口下面的狀態(tài)欄中會顯示出鏈接到的網(wǎng)頁的地址并且會顯示出替代文本動畫制作單擊文字頁面會立即跳轉(zhuǎn)到第 3 個(gè)欄目中這表示鏈接已經(jīng)制作成功了 步驟 7 同理按照以上步驟再為其它幾幅圖像制作指向?qū)?yīng)欄目的鏈接 步驟 8 在欄目頁面中制作返回首頁的鏈接使得單擊后可以跳轉(zhuǎn)回首頁其制作方法不變 至此整個(gè)圖像鏈像的實(shí)例就全部完成了 33E – Mail 的鏈接 EMail 鏈接是指當(dāng)瀏覽者單擊該鏈接之后不是打開一個(gè)網(wǎng)頁文件而是啟動用戶的 E Mail 客戶端軟件如 Outlook Express 并打開一個(gè)空白的新郵件供瀏覽者撰 寫內(nèi)容來與網(wǎng)站聯(lián)系人聯(lián)系這是一種最方便的互動方式 結(jié)合個(gè)人說明網(wǎng)頁建立 EMail 鏈接的步驟如下所述 操作步驟 步驟 1 將光標(biāo)停留在頁面右下角要插入 Email 鏈接的位置 步驟 2 選擇插入快捷欄中的常用分類單擊左側(cè)第 2 個(gè)電子郵件鏈接按鈕 步驟 3 在彈出的電子郵件鏈接對話框中有兩個(gè)輸入項(xiàng)分別是文本和 EMail 在文本項(xiàng)中輸入鏈接的文字中文英文均可在 EMail 項(xiàng)中輸入網(wǎng)站聯(lián)系有的電子郵件地址如實(shí)例中的 ding_zhuimeng123163 步驟 4 單擊確定按鈕具有 EMail 鏈接屬性的文本就 d
公司管理相關(guān)推薦
鄂ICP備17016276號-1