-
- 素材大小:
- 2.63 MB
- 素材授權:
- 免費下載
- 素材格式:
- .ppt
- 素材上傳:
- lipeier
- 上傳時間:
- 2018-07-12
- 素材編號:
- 201599
- 素材類別:
- 課件PPT
-
素材預覽
這是用表格為網(wǎng)頁布局ppt,包括了創(chuàng)建表格,創(chuàng)建嵌套表格,創(chuàng)建布局表格,創(chuàng)建Spry框架,在表格中插入網(wǎng)頁元素,設置表格屬性,編輯表格,調整表格大小,課堂練習:圓角相框,課堂練習:可隱藏的說明書等內容,歡迎點擊下載。
用表格為網(wǎng)頁布局ppt是由紅軟PPT免費下載網(wǎng)推薦的一款課件PPT類型的PowerPoint.
第3章 使用表格布局網(wǎng)頁
將文本與圖像插入頁面后,就形成了最簡單的網(wǎng)頁。在生成的網(wǎng)頁中,發(fā)現(xiàn)其中的文本或者圖像會隨著IE窗口的放大或者縮小發(fā)生變化,這使得網(wǎng)頁處于不穩(wěn)定狀態(tài)。要想改變這種情況,最簡單的方法就是使用表格。表格不僅能夠控制網(wǎng)頁在IE窗口中的位置,還可以控制網(wǎng)頁元素在網(wǎng)頁中的顯示位置,這樣無論IE窗口如何變化,其中的網(wǎng)頁都會保持默認的狀態(tài)。
本章知識要點:
創(chuàng)建表格
創(chuàng)建嵌套表格
創(chuàng)建布局表格
創(chuàng)建Spry框架
3.1 表格建立
日常生活中,最常見的表格是用來顯示數(shù)據(jù)的,比如Excel中的表格。在Dreamweaver中,表格除了可以顯示數(shù)據(jù)外,最主要的功能是定位與排版。這樣才能夠將前面介紹過的文本與圖像定位在網(wǎng)頁中的任何想要顯示的區(qū)域中。所以說,網(wǎng)頁設計就是從創(chuàng)建表格開始的,先學習表格的創(chuàng)建可以為后來的網(wǎng)頁設計奠定基礎。
3.1.1 創(chuàng)建各種表格
表格在網(wǎng)頁中是用來定位與排版的,而有時一個表格無法滿足所有的要求,這時就需要運用到嵌套表格。嵌套表格,顧名思義就是在表格中插入表格。這樣一來,由總表格負責整體的排版,由嵌套的表格負責各個子欄目的排版,并插入到總表格的相應位置中。各司其職,互不沖突。
3.1.2 在表格中插入網(wǎng)頁元素
為了使網(wǎng)頁中的元素能夠有序地、按照要求顯示在IE窗口中,在插入文本或者圖像之前,插入表格是最好的解決方法。在表格中插入文本或者圖像的方法與直接在網(wǎng)頁中插入方法是基本相同的,只是在插入之前,將光標放置在表格中即可。
3.1.3 設置表格屬性
即使在網(wǎng)頁中插入一個最簡單的表格,也具有表格的幾個重要的元素,那就是表格整體、行、列和單元格。所以插入表格后,【屬性】面板中顯示的是該表格的基本屬性。
3.2 編輯表格
當創(chuàng)建的表格不符合要求時,可以通過對表格中的單元格進行拆分與合并,或者增加與刪除表格的行或者列來完成所需的要求。在表格中還可以進行復制、剪切、粘貼等操作,因為它可以保留原單元格的格式。
3.2.1 選中表格元素
在設置表格屬性時發(fā)現(xiàn),將光標放置在表格中,【屬性】面板中顯示的是單元格屬性,而是表格屬性,這說明選中的是單元格,而不是表格。創(chuàng)建一個表格,既包含其本身,還包含單元格、行與列元素,而這些元素的選擇方法各不相同。
3.2.2 調整表格大小
當選中整個表格后,在表格右下角區(qū)域顯示3個控制點,分別通過這3個控制點能夠將表格橫向、縱向或者整體放大。
3.2.3 合并及拆分表格元素
當創(chuàng)建的表格不符合要求時,可以通過刪除或者增加表格的行與列,以及合并或者拆分單元格來實現(xiàn)。
3.2.4 復制及粘貼單元格
表格中的單元格就像文本、圖片能夠被復制與粘貼一樣,單元格也可以復制與粘貼,并且可以在保留單元格格式化的情況下,復制并且粘貼多個單元格。表格中的單元格既可以覆蓋現(xiàn)有的單元格,也可以生成新的表格。
3.3 布局表格
在使用表格布局網(wǎng)頁時發(fā)現(xiàn),表格與單元格是有規(guī)律的創(chuàng)建。要想使用表格拼圖,必須經(jīng)過精密地計算,以及拆分或者合并單元格來實現(xiàn)。為了簡化利用表格布局頁面,Dreamweaver提供了一種【布局】模式。在這種模式下使用布局工具,設計者可以輕松地在頁面中畫出布局表格以及單元格,然后對其進行修改、移動等。
3.3.1 創(chuàng)建布局表格與單元格
要想在頁面中創(chuàng)建布局表格與單元格,確切地說應該是繪制表格和單元格,首先要進入【布局】模式。方法是執(zhí)行【查看】|【表格模式】|【布局模式】命令(快捷鍵Alt+F6),由【標準】模式切換到【布局】模式。
3.3.2 布局表格與單元格屬性
繪制布局表格與布局單元格后,既可以隨意設置其屬性,也可以在【屬性】面板中精確地設置其各個選項。
3.4 Spry框架
Spry框架是一個可以用來構建更加豐富的Web頁的JavaScript和CSS庫。使用該框架,可以顯示XML數(shù)據(jù),并創(chuàng)建用來顯示動態(tài)數(shù)據(jù)的交互式頁面元素,而無需刷新整個頁面。以前創(chuàng)建Spry框架是通過代碼完成的,這需要有一定的JavaScript基礎知識的用戶使用。而Dreamweaver CS3在設計視圖中新增了創(chuàng)建Spry框架的構件,使復雜的Spry框架建立變成了簡單的可視化操作。
3.4.1 Spry框架概念
Spry框架支持一組用標準HTML、CSS和JavaScript編寫的可重用構件。Spry構件是一個頁面元素,通過啟用用戶交互來提供更豐富的用戶體驗。每一個Spry構件均由以下幾個部分組成:
構件結構 用來定義構件結構組成的HTML代碼塊。
構件行為 用來控制構件如何響應用戶啟動事件的JavaScript。
構件樣式 用來指定構件外觀的CSS。
3.4.2 Spry菜單欄構件
菜單欄構件是一組可導航的菜單按鈕,當訪問者將鼠標指向其中的某個按鈕上時,將顯示相應的子菜單。使用菜單欄可以在緊湊的空間中顯示大量可導航信息,并使訪問者無需深入瀏覽即可了解網(wǎng)站中提供的內容。
3.4.3 Spry選項卡式面板構件
選項卡式面板構件是一組面板,用來將內容存儲到緊湊空間中。訪問者可以通過單擊要訪問的面板上的選項卡,來隱藏或者顯示在選項卡式面板中的內容。當訪問者單擊不同的選項卡時,構件的面板會相應地打開。
3.4.4 Spry折疊構件
Spry折疊構件是可折疊的面板,可以將大量內容存儲在一個緊湊的空間中。訪問者可以通過單擊該面板上的選項卡來隱藏或者顯示在折疊構件中的內容。折疊面板分為兩種:一種是多個面板的折疊式面板構件,一種是只有一個面板的可折疊面板構件。
3.5 課堂練習:一像素表格
一像素表格的制作方法多種多樣,可以將1×1像素的圖像以背景圖片的形式插入到表格中,也可以直接在Dreamweaver中利用表格的屬性制作一像素表格。同樣,一像素表格可以是一像素細線效果,也可以是一像素邊框效果,為了更好的顯示效果,這里以一像素邊框為例。
3.6 課堂練習:圓角相框
當瀏覽網(wǎng)頁時,經(jīng)常會看到帶有相框的圖片。具有相框的圖片,使其在網(wǎng)頁突出顯示。下面介紹一種制作圓角相框的方法,它是通過在表格中插入圖像和背景圖像制作而成的。
3.7 課堂練習:可隱藏的說明書
可隱藏的說明書中同時準備了圖片和相關的說明文字,但是后者放置在Spry可折疊面板構件中,這樣在預覽時,既可以同時查看圖片與說明文字,還可以將說明文字隱藏只查看圖片。
ppt網(wǎng)頁布局圖片:這是ppt網(wǎng)頁布局圖片,包括了WEB站點建立的基本步驟,網(wǎng)站整體風格和創(chuàng)意設計,網(wǎng)站的目錄結構和鏈接結構,版面布局與首頁搭配,使用布局視圖、框架、表格等進行頁面布局,網(wǎng)站建設實例講解等內容,歡迎點擊下載。