這是ppt網(wǎng)頁布局圖片，包括了WEB站點建立的基本步驟，網(wǎng)站整體風格和創(chuàng)意設(shè)計，網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)，版面布局與首頁搭配，使用布局視圖、框架、表格等進行頁面布局，網(wǎng)站建設(shè)實例講解等內(nèi)容，歡迎點擊下載。

ppt網(wǎng)頁布局圖片是由紅軟PPT免費下載網(wǎng)推薦的一款課件PPT類型的PowerPoint.

第六章 網(wǎng)站總體設(shè)計與網(wǎng)頁布局 規(guī)劃網(wǎng)站、組織網(wǎng)站 主要內(nèi)容 1、WEB站點建立的基本步驟 2、網(wǎng)站整體風格和創(chuàng)意設(shè)計 3、網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) 4、版面布局與首頁搭配 5、使用布局視圖、框架、表格等進行頁面布局。 6、網(wǎng)站建設(shè)實例講解 1、WEB站點建立的基本步驟 1）網(wǎng)站建設(shè)前的準備工作 2）創(chuàng)建站點的導航結(jié)構(gòu) 3）收集整理相關(guān)資料 4）組織文檔和數(shù)據(jù)，進行具體的網(wǎng)站建設(shè) 5）測試站點 6）申請域名和主頁空間 7）上傳站點資料 1）網(wǎng)站建設(shè)前的準備工作 確定網(wǎng)站的主題； 計劃要發(fā)布的內(nèi)容； 一般個人主頁可以根據(jù)自己的愛好或一些熱門的話題來選擇網(wǎng)站的主題。 如普及醫(yī)療衛(wèi)生知識， 提供文學藝術(shù)信息， 學習計算機技術(shù)， 向世人推銷自己等等。 2）創(chuàng)建站點的導航結(jié)構(gòu) 建設(shè)網(wǎng)站的整體框架設(shè)計。 注意在站點的基本結(jié)構(gòu)中，頁面之間的鏈接關(guān)系要清晰，同時要兼顧以后的可擴充性，以備網(wǎng)站的修改與發(fā)展。 3）收集整理相關(guān)資料 包括：網(wǎng)站徽標、背景圖片、按鈕圖片以及網(wǎng)站需要展示的內(nèi)容。 有能力者可以自己編制網(wǎng)站建設(shè)所需的內(nèi)容， 也可以通過各種渠道搜集相關(guān)資料，注意在引用他人的資料和文章時，應征得對方的同意，并注明作者和出處。 4）組織文檔和數(shù)據(jù)，進行具體的網(wǎng)站建設(shè) 在制作網(wǎng)頁之前應設(shè)計出網(wǎng)頁的頁面結(jié)構(gòu)，即需要設(shè)計幾個欄目和版塊。 大多數(shù)網(wǎng)站都是以表格來布局網(wǎng)頁，也可以用框架同表格結(jié)合來完成。 一般制作的第一個網(wǎng)頁應該是首頁，首頁是整個網(wǎng)站精華的匯集。 對于網(wǎng)頁制作者來說，首頁是最難也是最花工夫的。 為制作風格一致的網(wǎng)站，還需要創(chuàng)建模版等。 5）測試站點 制作出的網(wǎng)站可以先在本地進行測試，檢查站點的瀏覽器兼容性以及可能存在的錯誤鏈接等。 6）申請域名和主頁空間 域名分為國際域名和國內(nèi)域名。 請登錄申請域名，根據(jù)你的資金實力和網(wǎng)站的重要性做出選擇： 大型企業(yè)，資金雄厚，可以向郵電局申請專線服務。需要建立自己的機房，配備服務器、路由器、網(wǎng)絡(luò)管理軟件及網(wǎng)絡(luò)管理人員。 中小企業(yè)，信息量和數(shù)據(jù)量都不是很大，可采用虛擬主機托管方案，即租用要建設(shè)網(wǎng)站。 如果你的企業(yè)信息量和數(shù)據(jù)量較大，可采用服務器托管方案，將已經(jīng)制作好的服務器主機放到ISP的網(wǎng)絡(luò)中心機房。 如果是個人網(wǎng)站，資金又很有限，如果是個人網(wǎng)站，資金又很有限，可以到一些公司申請他們的域名+主機。（ CNNIC CN域名認證注冊服務機構(gòu) ，中資源、中國萬網(wǎng)等） 7）上傳站點資料  利用專門的上傳軟件對網(wǎng)頁進行上傳，如：CuteFTP就是一款很好的網(wǎng)頁上傳軟件，方便、靈活。 如果你的企業(yè)信息量和數(shù)據(jù)量較大，可采用服務器托管方案，將已經(jīng)制作好的服務器主機放到ISP的網(wǎng)絡(luò)中心機房。 2、網(wǎng)站整體風格和創(chuàng)意設(shè)計 1）樹立網(wǎng)站的風格 2）進行創(chuàng)意設(shè)計 1）樹立網(wǎng)站的風格 風格指站點的整體形象給瀏覽者的綜合感受 整體形象主要包括： 站點的CI（標志，色彩，字體，標語）， 版面布局， 瀏覽方式， 交互性， 文字，語氣，內(nèi)容價值，存在意義，站點榮譽等等 1）樹立網(wǎng)站的風格 如何樹立站點的風格 網(wǎng)站的內(nèi)容要有價值 網(wǎng)站的配色要合理，并且合乎內(nèi)容需求 網(wǎng)站要具有一定的個性：活潑、誠懇、奔放…… 與其他站點相比，要有自己的特色或不一樣的地方 1）樹立網(wǎng)站的風格 建立和加強風格印象 1.將標志logo盡可能的出現(xiàn)在每個頁面上。在頁眉，頁腳或背景。 2.突出標準色彩。文字的鏈接色彩，圖片的主色彩，背景色，邊框等色彩盡量使用與標準色彩一致的色彩。 3.突出標準字體。在關(guān)鍵的標題，菜單，圖片里使用統(tǒng)一的標準字體。 4.想一條朗朗上口宣傳標語。把它做在banner里，或放在醒目的位置 5.使用統(tǒng)一的語氣和人稱。 6.使用統(tǒng)一的圖片處理效果。比如，陰影效果的方向，厚度，模糊度都必須一樣。 7.創(chuàng)造一個特有的符號或圖標。比如在一句鏈接前的一個點，可以使用，.�！睢�○◇□△→等等。 8.用自己設(shè)計的花邊，線條，點 9.展示你網(wǎng)站的榮譽和成功作品。 2）進行創(chuàng)意設(shè)計 創(chuàng)意是指站點的整體創(chuàng)意，(因為這個創(chuàng)意而產(chǎn)生這個站點，或者相同的內(nèi)容，推出的創(chuàng)意不同) 創(chuàng)意思考的過程分五階段 1.準備期--研究所搜集的資料，根據(jù)舊經(jīng)驗，啟發(fā)新創(chuàng)意； 2.孵化期--將資料咀嚼消化，使意識自由發(fā)展，任意結(jié)合； 3.啟示期--意識發(fā)展并結(jié)合，產(chǎn)生創(chuàng)意； 4.驗證期--將產(chǎn)生的創(chuàng)意討論修正； 5.形成期--設(shè)計制作網(wǎng)頁，將創(chuàng)意具體化。 2）進行創(chuàng)意設(shè)計 創(chuàng)意思考的途徑最常用的是聯(lián)想，這里提供了網(wǎng)站創(chuàng)意的25種聯(lián)想線索： 1.把它顛倒 2.把它縮小 3.把顏色換一下 4.使它更長 5.使它閃動 6.把它放進音樂里 7.結(jié)合文字音樂圖畫 8.使它成為年輕的 9.使它重復 10.使它變成立體 11.參加競賽 12.參加打賭 13.變更一部分 14.分裂它 15.使它羅曼蒂克 16.使它速度加快 17.增加香味 18.使它看起來流行 19.使它對稱 20.將它向兒童訴求 21.價格更低 22.給它起個綽號 23.把它打包 24.免費提供 25.以上各項延伸組合　　 -------------(轉(zhuǎn)載自樊志育《廣告制作》) 3、網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu) 1）網(wǎng)站的目錄結(jié)構(gòu) 2）網(wǎng)站的鏈接結(jié)構(gòu) 1）網(wǎng)站的目錄結(jié)構(gòu) 網(wǎng)站的目錄是指你建立網(wǎng)站時創(chuàng)建的目錄 目錄的結(jié)構(gòu)是一個容易忽略的問題，大多數(shù)站長都是未經(jīng)規(guī)劃，隨意創(chuàng)建子目錄。 目錄結(jié)構(gòu)的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的上傳維護，內(nèi)容未來的擴充和移植有著重要的影響。 1）網(wǎng)站的目錄結(jié)構(gòu) 建立目錄結(jié)構(gòu)的一些建議: 不要將所有文件都存放在根目錄下，否則會造成： 文件管理混亂 上傳速度慢 按欄目內(nèi)容建立子目錄 子目錄的建立，首先按主菜單欄目建立 其他的次要欄目，需要經(jīng)常更新的可以建立獨立的子目錄。不太更新的可合并放在一個目錄下。 所有的程序一般都存放在特定目錄下。 在每個主目錄下都建立獨立的images（圖片）目錄 目錄的層次不要太深，不要超過3層。 1）網(wǎng)站的目錄結(jié)構(gòu) 其他注意事項: 1.不要使用中文目錄。使用中文目錄可能對網(wǎng)址的正確顯示造成困難。 2.不要使用過長的目錄。盡管服務器支持長文件名，但是太長的目錄名不便于記憶。 3.盡量使用意義明確的目錄。例如可以用Flash，Dhtml，Javascript來建立目錄，也可以用1，2，3建立目錄，但明顯前者更明確，更便于記憶和管理。 2）網(wǎng)站的鏈接結(jié)構(gòu) 網(wǎng)站的網(wǎng)站的鏈接結(jié)構(gòu)是指頁面之間相互鏈接的拓撲結(jié)構(gòu)。它建立在目錄結(jié)構(gòu)基礎(chǔ)之上，但可以跨越目錄。 形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。 用最少的鏈接，使得瀏覽最有效率 。 2）網(wǎng)站的鏈接結(jié)構(gòu) 建立網(wǎng)站的鏈接結(jié)構(gòu)有兩種基本方式 ： 1.樹狀鏈接結(jié)構(gòu)(一對一)。 首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。這樣的鏈接結(jié)構(gòu)瀏覽時，一級級進入，一級級退出。 優(yōu)點是條理清晰，訪問者明確知道自己在什么位置，不會“迷”路。 缺點是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經(jīng)首頁。 2.星狀鏈接結(jié)構(gòu)(一對多)。 類似網(wǎng)絡(luò)服務器的鏈接，每個頁面相互之間都建立有鏈接。 這種鏈接結(jié)構(gòu)的優(yōu)點是瀏覽方便，隨時可以到達自己喜歡的頁面。 缺點是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內(nèi)容。 2）網(wǎng)站的鏈接結(jié)構(gòu) 在實際的網(wǎng)站設(shè)計中，總是將這兩種結(jié)構(gòu)混合起來使用； 瀏覽者既可以方便快速的達到自己需要的頁面，又可以清晰的知道自己的位置，解決辦法是 ：首頁和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級和二級頁面之間用樹狀鏈接結(jié)構(gòu)。 2）網(wǎng)站的鏈接結(jié)構(gòu) 注意:以上我們都是用的三級頁面舉例。若站點內(nèi)容龐大，分類明細，需要超過三級頁面，則建議在頁面里顯示導航條，可以幫助瀏覽者明確自己所處的位置。 即為經(jīng)�？吹皆S多網(wǎng)站頁面頂部的，類似這樣:“您現(xiàn)在的位置是:首頁->財經(jīng)新聞->股市信息->深圳股->深發(fā)展” 4、版面布局與首頁搭配 1）設(shè)計要求 整潔大方：各種元素的運用應適度 突出重點：突出主體內(nèi)容 平衡對稱：頁面的上下左右應給人以任意勻稱的感覺 風格一致：樣式統(tǒng)一，配色合理 5、使用布局視圖、框架、表格等進行頁面布局。 1）使用表格進行布局 2）使用框架進行布局 3）使用圖層進行布局 4）使用布局視圖進行頁面布局 布局模式 繪制布局表格和布局單元格 編輯布局表格和布局單元格 使用網(wǎng)格 內(nèi)容添加，制作主頁 6、網(wǎng)站建設(shè)實例講解 （1）欄目設(shè)置 （2）顏色設(shè)計 （3）整體布局設(shè)計 （4）頭部設(shè)計 （5）導航條和背景圖像制作 （6）制作“主廣告區(qū)”、“信息分類”區(qū)與頁腳 （7）創(chuàng)建樣式 （8）添加導航欄信息與分類信息 （9）添加頁腳及公告欄、標語欄信息 （10）制作首頁 （11）其他頁面鏈接制作 （12）添加網(wǎng)站鏈接 實例講解－ （1）欄目設(shè)置 根據(jù)網(wǎng)站的主題來確定網(wǎng)站的欄目 例如以建立一個教育站點（如Internet與網(wǎng)頁設(shè)計站點）為例： 分析： 既有組織類站點的功能 又有信息類站點的功能 欄目設(shè)置為： 課程大綱——介紹課程的學習大綱，自學大綱 課程內(nèi)容——課程的具體內(nèi)容，提供對應的PPT下載 資料素材——分類提供相關(guān)學習資料、建站素材 課程練習——提供各章節(jié)的對應練習題 課程互動——提問與解答 娛樂放松——提供娛樂鏈接 實例講解－ （2）顏色設(shè)計 可采用配色軟件來完成——一般主色少于四種顏色 人對色彩的聯(lián)想： 紅色：熱情、震撼、高貴、力量來源、刺激、上進 灰色：壓抑、曖昧、內(nèi)向、失望、消極 藍色：清涼、哀傷、沉穩(wěn)、深遠、開朗 黃色：高貴、富有、燦爛、活潑 黑色：嚴肅、夜晚、沉著 白色：純潔、簡單、潔凈 綠色：植物、生命、生機 紫色：浪漫、富貴 棕色：大地、厚樸  實例講解－ （2）顏色設(shè)計 設(shè)計用色實例 1、這是一個娛樂類的綜合性網(wǎng)站UGO，他的配色方案是： 背景色為黑色RGB為（0，0，0）中嵌套RGB（0，0，82）， 字體白色RGB（255，255，255）， 菜單為RGB（77，114，159）。 雖以黑藍為主色調(diào)，但是配以漂亮的圖片，給人的感覺是生機盎然，充滿了互動色彩和青春氣息。 實例講解－ （2）顏色設(shè)計 設(shè)計用色實例 2、下面的這個網(wǎng)站是的微軟公司網(wǎng)站 ： 背景顏色使用藍色RGB為（0，151，254）， 菜單為黑色RGB（0，0，11）， 菜單為灰色RGB（200，200，200）， 字體為黑色RGB（0，0，0） 。 實例講解－ （2）顏色設(shè)計 設(shè)計用色實例 3、下面的網(wǎng)站Smirnoff采用紅黑色調(diào)為主，很體現(xiàn)公司的個性： 他使用的主色調(diào)是RGB（200，9，0），配以抽象的圖形， 文字使用的是RGB（213，229，167） 實例講解－ （2）顏色設(shè)計 設(shè)計用色實例 5、一般網(wǎng)頁顏色的搭配不要超過四種主要顏色，否則就有雜亂之感。下面的這個網(wǎng)站遠遠的超過了四種顏色，但是她并不失美麗。因此重要的還是色彩的駕馭能力。 實例講解－ （3）整體布局設(shè)計 1、可先思考網(wǎng)站的整體布局格式； 2、而后通過DreamWeaver新建一個站點。準備設(shè)計網(wǎng)頁。 實例講解－ （3）整體布局設(shè)計 3、繪制布局——頭部繪制（注：僅在設(shè)計狀態(tài)下使用） （1）工具條－布局－布局模式－使用布局表格進行繪制。 在屬性面板中設(shè)置表格寬：756pt；高：105pt 右鍵單擊表格－對齊－居中對齊 （2）設(shè)置用于放置頭部信息的單元格 選擇“繪制布局單元格”按鈕進行布局，拖動時注意左右邊緣部分與表格之間留空隙。寬：730pt，高：105pt （可查看對應代碼，在說明標記內(nèi)寫上對應說明） 實例講解－ （3）整體布局設(shè)計 3、繪制布局——導航條繪制 （1）工具條－布局－布局模式－使用布局表格進行繪制。 在屬性面板中設(shè)置表格寬：756pt；高：45pt 右鍵單擊表格－對齊－居中對齊 （2）設(shè)置用于放置導航欄的布局單元格 選擇“繪制布局單元格”按鈕進行布局 一次左右繪制兩個布局單元格，寬度可在以后的制作中據(jù)要求進行調(diào)節(jié)。 統(tǒng)樣的方式在代碼中為導航欄設(shè)置注釋標記。 實例講解－ （3）整體布局設(shè)計 3、繪制布局——“課程介紹” 采用同上的方式繪制“課程介紹”區(qū)域。寬756，高190（可據(jù)實際高度設(shè)定），居中。 繪制單元格，寬180，高190，用于放置“信息提示”板塊 在右上方繪制單元格，寬550，高19，用于放置課程介紹的標題 剩下的即為繪制“課程介紹”板塊。 接著寫上說明。 實例講解－ （3）整體布局設(shè)計 3、繪制布局——“主信息區(qū)”板塊 （1）繪制布局表格：寬756，高564 （2）在剛才的布局表格內(nèi)再繪制布局表格，寬180，高564 （3）繪制布局單元格：——主信息區(qū)板塊中“信息分類”區(qū) 使用CTRL鍵：連續(xù)繪制多個單元格 使用ALT鍵：禁止表格靠齊 點擊繪制單元格按鈕后，再按住CTRL鍵可不斷繪制單元格。 （4）繪制主信息區(qū)板塊中的主信息區(qū) 用布局單元格繪制信息標語欄：寬550，高19 用布局表格繪制標語欄下方的主信息區(qū)： 實例講解－ （3）整體布局設(shè)計 3、繪制布局——頁腳 （1）繪制布局表格：寬756，高75，居中對齊 繪制730×15的布局單元格 再繪制730×43的布局單元格 再繪制730×16的布局單元格 實例講解－ （3）整體布局設(shè)計 4、頭部設(shè)計 （1）可以通過PhotoShop或FireWork制作頭部的圖片 （2）或者從網(wǎng)上尋找素材。 實例講解－ （3）整體布局設(shè)計 5、導航條和背景圖像制作 使用Fireworks制作 6、制作“課程介紹區(qū)”、“信息分類”區(qū)與頁腳 使用Fireworks制作 頁腳直接設(shè)置背景顏色 7、創(chuàng)建樣式 body:方框－上邊界：0 td：字號12px .biaoti：字號12px .yanse：文字為白色 .liebiao：下邊框為實線，1px，黑色，其余無邊框 實例講解－ （3）整體布局設(shè)計 8、添加導航欄信息與分類信息 課程大綱 課程內(nèi)容 資料素材 課程練習 課程互動 娛樂放松 9、添加頁腳及公告欄、標語欄信息 公告欄、標語欄內(nèi)填入滾動信息 頁腳填入版權(quán)聲明 實例講解－ （3）整體布局設(shè)計 10、制作首頁 以前面制作的網(wǎng)頁為模板可以制作其他網(wǎng)頁 用布局表格分割在主信息區(qū)，以放置信息 用布局表格繪制550w*160h的表格； 再用布局表格將上面的布局表格分成均等的左右兩個區(qū)域 再用布局單元格繪制其中的布局表格，結(jié)合alt與ctrl鍵繪制 實例講解－ （3）整體布局設(shè)計 11、其他頁面鏈接制作 12、添加網(wǎng)站鏈接zl6紅軟基地

用表格為網(wǎng)頁布局ppt：這是用表格為網(wǎng)頁布局ppt，包括了創(chuàng)建表格，創(chuàng)建嵌套表格，創(chuàng)建布局表格，創(chuàng)建Spry框架，在表格中插入網(wǎng)頁元素，設(shè)置表格屬性，編輯表格，調(diào)整表格大小，課堂練習：圓角相框，課堂練習：可隱藏的說明書等內(nèi)容，歡迎點擊下載。