資源描述：
《《課設計網頁布局》PPT課件.ppt》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。
1、設計網頁布局教學目標：1、認識網頁布局的重要性及常用布局方法。2、掌握網頁布局的整體造型，并能適合的應用到網頁設計中。教學內容：網頁結構布局知識教學重點、難點：表格布局網頁、表格嵌套知識一、概述在我們還沒有動手做網頁時，網頁就像一張白紙，而通過你們的想法，在這張白紙上把文字、圖片等組織起來，這樣就形成了網頁就像我們的手抄報，但網頁更豐富，會有聲音、動畫、視頻等。就象傳統(tǒng)的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。二、頁面設計相關知識1、頁面尺寸頁面尺寸是主要是由于我們顯示器的分辨率有關，因為我們的網頁沒辦法突破這個顯示器分辨
2、率的限制。首先瀏覽器的菜單等已經占用了屏幕的空間，所以網頁頁面范圍比分辨率還要?。涣硪粋€原因，技術的發(fā)展，現(xiàn)在普遍使用17寸液晶顯示器或19寸液晶顯示器，以致網頁的頁面要適應1024*768這種分辨率，乃至更多種。受這些限制，一般來說，我們比較注重頁面寬度的限制，也就是說網頁頁面在水平方向一般不設置寬度超出分辨率開成滾動條，但又要適應常用的兩種分辨率，所以普遍寬度設在900-1000之間。兩我們常用垂直滾動來添加頁面內容，但也不是說高度沒有限制，而是常用高度不要超出頁面三個屏。更多的內容，通常使用鏈接到另一個頁面。網頁設計標準尺寸:1、800*60
3、0下，網頁寬度保持在778以內，就不會出現(xiàn)水平滾動條，高度則視版面和內容決定。2、1024*768下，網頁寬度保持在1002以內，如果滿框顯示的話,高度是612-615之間.就不會出現(xiàn)水平滾動條和垂直滾動條。2、整體造型整體造型可以說是頁面的整體布局，一個頁面就是一個整體，內容是相互搭配，相互接合。在通常的情況下，我們網頁的整體造型受顯示器的矩形形狀影響，頁面整體布局也是以矩形為主，但如果創(chuàng)意比較好，可以充分運用其它形狀以及它們的組合；矩形、圓形、三角形、菱形等。矩形：代表著正式、規(guī)則，很多ICP和政府網頁都是以矩形為整體造型；圓形：帶著柔和、團結
4、、溫暖、安全等，很多時常站點喜歡以圓形為頁面整體造型；三角形：代表著力量，權威，牢固，侵略等，許多大型的商業(yè)站點為顯示它的權威性常以三角形為頁面整體造型；菱形：代表著平衡，協(xié)調，公平，一些交友站點常運用菱形作為頁面整體造型。目前的網頁制作多數(shù)是接合多個圖形加以設計，在這其中某種圖形的構圖比例可能占的多一些。3、頁頭頁頭又稱之為頁眉，頁眉的作用是定義頁面的主題。比如一個站點的名字多數(shù)都顯示在頁眉里。這樣，訪問者能很快知道這個站點是什么內容。頁頭是整個頁面設計的關鍵，它將牽涉到下面的更多設計和整個頁面的協(xié)調性。頁頭常放置站點名字的圖片和公司標志以及旗幟
5、廣告。4、文本文本在頁面中出現(xiàn)都是以行或者塊（段落）出現(xiàn)，它們的擺放位置決定了整個頁面布局的可視性。5、圖片圖片和文本是網頁的兩大構成元素，缺一不可。如何處理好圖片和文本的位置成了整個頁面布局的關鍵。6、多媒體除了文本和圖片，還有聲音、動畫、視頻等其它媒體。隨著動態(tài)網頁的興起，它們在網頁布局上也變得更加重要。7、頁腳頁腳和頁頭相呼應。頁頭是放置站點主題的地方，而頁腳是放置制作者或者公司信息的地方。你能看到，許多制作信息都是放置在頁腳的。三、布局步驟進行網頁設計，不要急著在Dreamweaver直接進行布局，應該先畫好草圖，就像建筑樓房，先要有工程圖
6、紙一樣。所以進行網頁設計前，可以參考以下步驟：1、草案：新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，根據(jù)網頁的需求和你自己的想像設計，就像是排版，不講究細膩工整，不必考慮細節(jié)功能，只以粗陋的線條勾畫出輪廓即可。（可以考慮用白紙和鉛筆來設計，當然如果需要更好的效果，如對顏色等的設計，可以利用軟件時行布局，如Photoshop,FireWork等平面設計軟件。）2、定案：在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。主要包含網站標志，主菜單，新聞，搜索，友情鏈接，廣告條，郵件列表，計數(shù)器，版權信息等。注意，這里我們必須遵循突出重
7、點、平衡諧調的原則，將網站標志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后再考慮次要模塊的排放。四、布局類型網頁布局大致可分“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型。我們在下面逐一看看各種布局類型。1、“國”字型：也可以稱為”同“字型，是一些大型網站所喜歡的類型，即最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些小條內容，中間是主要部分，與左右一起羅列到底，最下面是網站的一些基本信息、聯(lián)系方式、版權聲明等。這種結構是我們在網上見到的差不多最多的一種結構類型。如：
8、高州師范學院、茂名教育局、廣東石油化工學院2、拐角型：這種結構與上一種其實只是形式上的區(qū)別，其實是很相近的，上面是標題及廣
