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