畢業(yè)設(shè)計(jì)-基于dreamweaver的網(wǎng)站設(shè)計(jì)(編輯修改稿)
2025-01-08 19:33 本頁(yè)面
【文章內(nèi)容簡(jiǎn)介】 以取消或者增加，那么當(dāng)你顯示全部的工具欄時(shí)，和關(guān)閉全部工具欄時(shí) ，頁(yè)面的尺寸是不一樣的。 在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，向下拖動(dòng)頁(yè)面是惟一給網(wǎng)頁(yè)增加更多內(nèi)容 (尺寸 )的方法。除非你能肯定站點(diǎn)的內(nèi)容能吸引大家拖動(dòng)，否則不要讓訪問(wèn)者拖動(dòng)頁(yè)面超過(guò)三屏。如果需要在同一頁(yè)面顯示超過(guò)三屏的內(nèi)容，那么你最好能在上面做上頁(yè)面內(nèi)部連接，方便訪問(wèn)者瀏覽。 （ 2）整體造型 造型就是創(chuàng)造出來(lái)的物體形象，這里是指頁(yè)面的整體形象。這種形象應(yīng)該是一個(gè)整體，圖形與文本的接合應(yīng)該是層疊有序。雖然，顯示器和瀏覽器都是矩形，但對(duì)于頁(yè)面的造型，你可以充分運(yùn)用自然界中的其它形狀以及它們的組合：矩形，圓形，三角形，菱形等。 對(duì) 于不同的形狀，它們所代表的意義是不同的。比如矩形代表著正式，規(guī)則，你注意到很多 ICP 和政府網(wǎng)頁(yè)都是以矩形為整體造型；圓形帶表著柔和，團(tuán)結(jié)，溫暖， 6 安全等，許多時(shí)尚站點(diǎn)喜歡以圓形為頁(yè)面整體造型；三角形代表著力量，權(quán)威，牢固，侵略等，許多大型的商業(yè)站點(diǎn)為顯示它的權(quán)威性常以三角形為頁(yè)面整體造型；菱形代表著平衡，協(xié)調(diào)，公平，一些交友站點(diǎn)常運(yùn)用菱形作為頁(yè)面整體造型。雖然不同形狀帶表著不同意義，但目前的網(wǎng)頁(yè)制作多數(shù)是接合多個(gè)圖形加以設(shè)計(jì)，在這其中某種圖形的構(gòu)圖比例可能占的多一些。 （ 3）頁(yè)頭 頁(yè)頭又可稱之為頁(yè)眉，頁(yè)眉的作 用是定義頁(yè)面的主題。比如一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁(yè)眉里。這樣，訪問(wèn)者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁(yè)頭是整個(gè)頁(yè)面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁(yè)面的協(xié)調(diào)性。頁(yè)頭常放置站點(diǎn)名字的圖片和公司標(biāo)志以及旗幟廣告。 （ 4）文本 文本在頁(yè)面中出現(xiàn)都數(shù)以行或者塊 (段落 )出現(xiàn)，它們的擺放位置決定者整個(gè)頁(yè)面布局的可視性。在過(guò)去因?yàn)轫?yè)面制作技術(shù)的局限，文本放置的位置的靈活性非常小，而隨著 DHTML 的興起，文本已經(jīng)可以按照自己的要求放置到頁(yè)面的任何位置。 （ 5）頁(yè)腳 頁(yè)腳和頁(yè)頭相呼應(yīng)。頁(yè)頭是放置站點(diǎn)主題的地方，而頁(yè) 腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁(yè)腳的。 （ 6）圖片 圖片和文本是網(wǎng)頁(yè)的兩大構(gòu)成元素，卻一不可。如何處理好圖片和文本的位置成了整個(gè)頁(yè)面布局的關(guān)鍵。而你的布局思維也將體現(xiàn)在這里。 （ 7）多媒體 除了文本和圖片，還有聲音，動(dòng)畫(huà)，視頻等等其它媒體。雖然它們不是經(jīng)常能被利用到，但隨著動(dòng)態(tài)網(wǎng)頁(yè)的興起，它們?cè)诰W(wǎng)頁(yè)布局上也將變得更重要。 網(wǎng)頁(yè)布局的技術(shù) 網(wǎng)頁(yè)的布局有表格布局，框架布局， CSS 布局等，本網(wǎng)站采用的是表格布局，表格布局被廣泛使用，已經(jīng)成為一個(gè)潛在的標(biāo)準(zhǔn)。隨便瀏覽一個(gè)站 點(diǎn)，它們一定是用表格布局的。表格布局的優(yōu)勢(shì)在于它能對(duì)不同對(duì)象加以處理，而又不用擔(dān)心不同對(duì)象之間的影響。而且表格在定位圖片和文本上比起用 CSS 更加方便。表格布局唯一的缺點(diǎn) 7 是，當(dāng)你用了過(guò)多表格時(shí)，頁(yè)面下載速度受到影響 [8]。對(duì)于表格布局，打開(kāi)一個(gè)站點(diǎn)的首頁(yè)，然后保存為 HTML 文件，利用網(wǎng)頁(yè)編輯工具打開(kāi)它 (要所見(jiàn)即所得的軟件 )，會(huì)可以看到這個(gè)頁(yè)面是如何利用表格的。 網(wǎng)站的層次結(jié)構(gòu)圖 如本網(wǎng)站的總體結(jié)構(gòu)圖，如圖 32 圖 32 網(wǎng)站總體結(jié)構(gòu)圖 4. 建立網(wǎng)頁(yè)連接 網(wǎng)站實(shí)際上是由很多網(wǎng)頁(yè)組成的，那么網(wǎng)頁(yè)之間是如何聯(lián)系的呢？這就是本章要講的內(nèi)容 網(wǎng)頁(yè)的“鏈接”?！版溄印?，又稱“超鏈接 （ Hyperlink） ,它作為網(wǎng)頁(yè)的橋梁。網(wǎng)頁(yè)中的很多對(duì)象都可以加入“鏈接”屬性。在 Dreamweaver 8 中，如果以“鏈接”的媒介來(lái)劃分的話，則“鏈接”可以分為“文字鏈接”、“圖像鏈接”、“圖像地圖鏈接”、“內(nèi)部鏈接和外部鏈接”、“ Email 鏈接”、“命名錨記鏈接”、“文件下載鏈接”和“跳轉(zhuǎn)菜單”，共 8種。 文字連接和跳轉(zhuǎn)菜單 網(wǎng)站大多采用的是文字連接和 跳轉(zhuǎn)菜單， “文字 鏈接 ”即以文字作 為媒 介的 鏈接 ，它是網(wǎng) 頁(yè) 中最常被使用的 鏈接 方式，具有“文件小、制作 簡(jiǎn)單 和便于 維護(hù) ”的特 點(diǎn) 。首頁(yè) 新品上架 特價(jià)商品 會(huì)員資料修改 購(gòu)物車(chē) 查看訂單 銷(xiāo)售排行 聯(lián)系我們 收藏本站 設(shè)為首頁(yè) 時(shí)尚衛(wèi)衣 牛仔天地 襯衫 裙子 外套 8 接下 來(lái)結(jié)合 我的 個(gè) 人網(wǎng)站 為實(shí) 例， 來(lái)講解 如何 為 文字建立“ 鏈接 ”。操作步 驟 ： 步 驟 1 、準(zhǔn) 備 好已 經(jīng) 制作完成的首 頁(yè) 的各 個(gè)欄 目 頁(yè) 面 步 驟 在 Dreamweaver 中 打開(kāi) 首 頁(yè) ，之后反白 選 取作 為 “ 鏈接 ”的文字。 步 驟 觀 察 “ 屬 性面板”，其中包括一 個(gè) “ 鏈接 ”文本框。 步 驟 接下 來(lái) 需要把 鏈接 的位址加入到文本框中。 步 驟 在“ 鏈接 ”文本框下面 還 有一 個(gè) “目 標(biāo) ”下拉列表， 從 中可以 選擇鏈接網(wǎng) 頁(yè)顯 示的窗口方 式，共有 4種。如 圖 ： 41 41 下拉列表 步 驟 還 可 以設(shè) 置一些“ 鏈接 ” 的屬 性， 單擊 “ 屬 性面板”中的“ 頁(yè) 面 屬 性”，選擇 其中的“ 鏈接 ” 分類(lèi) ，可以 進(jìn) 行的 設(shè) 置有“ 鏈接 字體”、“大小”、“ 鏈接顏 色”、“ 變換圖 像 鏈接 ” 顏 色、“ 已訪問(wèn)鏈接 ” 顏 色、“活 動(dòng)鏈接 ” 顏 色及“下劃 線樣 式”。 步 驟 至此，第 1 個(gè)欄 目的 鏈接 就制作完 畢 了，按下 Ctrl+S 保存網(wǎng) 頁(yè) ，再按下 F12 預(yù)覽，測(cè)試 一下， 當(dāng) 鼠 標(biāo) 放在“放松心情” 這 4個(gè) 文字 上時(shí)將變 成手形，并且瀏覽 器窗口下面的 狀態(tài)區(qū) 中 會(huì)顯 示 鏈接到 的網(wǎng) 頁(yè) 的位址， 單擊 文字， 頁(yè) 面 會(huì)立即跳轉(zhuǎn)到第 1個(gè)欄 目中， 這 表示 鏈接 已 經(jīng) 制作成功了。 步 驟 同理，按照以上步 驟 ，再 為 “閑情逸致”和“個(gè)人主頁(yè)”等其它 欄 制作指向 對(duì)應(yīng)欄 目的 鏈接 。 至此，整 個(gè) “文字 鏈接 ”的 實(shí) 例就全就全部完成了 。 “ 圖 像”也是常被使用的 鏈接 媒體，它和“文字 鏈接 ”非常相似。 為圖 像加入 鏈接 ，首先 應(yīng)該 在網(wǎng) 頁(yè) 中插入“ 圖 像”，有 關(guān) 插入“ 圖 像”或“ 導(dǎo) 航 條 ” 按 鈕 的 內(nèi) 容，接下 來(lái) 以我的網(wǎng)站“ my web“ 為 例， 講解 如何建立“ 圖 像 鏈接 ”。操作步 驟 ： 步 驟 首先仍然要準(zhǔn) 備 好已 經(jīng) 制作完成的首 頁(yè) 和各 個(gè)欄 目的 頁(yè) 面 步 驟 在 Dreamweaver 中 打開(kāi) 網(wǎng)站的首 頁(yè) ，之后 選 取 要制作“ 鏈接 ”的 圖 像。 步 驟 觀 察 “ 屬 性面板”，在“ 鏈接 ”文本框中 輸 入 鏈接 的文字位址。 步 驟 如果有需要，可以在“目 標(biāo) ”下拉列表中 選擇 “ 鏈接 ”網(wǎng) 頁(yè)顯 示的窗口 9 方式，分 別為 blank 、 parent 、 self 或 top。 步 驟 至此，第 1 個(gè)欄 目的 圖 像 鏈接 就制作完 畢 了，
公司管理相關(guān)推薦
鄂ICP備17016276號(hào)-1