電子商務網頁制作-項目網頁版式設計與布局培訓課程PPT課件[通用]

1、電子商務網頁制作-項目網頁版式設計與布局培訓課程7/7/2022 學習網頁版式設計的概念；了解有關網頁造型和分辨率的知識；了解網頁布局的原則和方法；學習使用表格進行網頁布局。項目目標看一看網頁設計欣賞網頁布局是指在瀏覽器空間里，依照建站目的和審美的規(guī)律，結合各種平面設計的具體特點，將信息內容和頁面視覺元素加以組合編排。第一步：打開IE瀏覽器，在地址欄中輸入http:/ CS5的表格能幫助親輕松完成網頁的布局。在實際應用中，通常使用表格來進行網頁布局，對網頁元素進行精確定位。例如在制作商品列表頁面時，如果不用表格而直接將商品圖像插入網頁中，很難精確控制圖像的位置，商品的文字描述更是難以和相應圖片

2、對齊：表格布局概述在此可以使用一個2行4列的表格來對此商品列表頁面進行布局，每個單元格內嵌套一個1行2列的表格分別放置商品圖像和文字描述，如圖5-12所示，效果會好很多：使用表格布局的商品列表表格布局概述在Dreamweaver CS5中，表格分為兩種：原始表格和布局表格。原始表格和布局表格在本質上都是網頁表格，都是由行、列、單元格組成，在Dreamweaver CS5“代碼”視圖中，它們的代碼也都是一樣的。區(qū)別在于它們是Dreamweaver CS在設計表格時所用到的兩種不同的模式或方法。原始表格和布局表格是Dreamweaver處理表格的兩種模式，即“標準模式”和“布局模式”，二者之間可以

3、隨意切換。在“標準模式”下為原始表格，一般是通過對話框和屬性面板對表格的尺寸、對齊、背景等屬性進行設置；在“布局模式”則為布局表格，可以由設計者手工繪制表格和單元格，其大小可以手工調整。在布局時使用布局表格更為直觀和簡單。小貼士表格布局的方法1使用布局表格布局打開“查看”菜單，選擇“表格模式”子菜單中的“布局模式”命令，或者按快捷鍵+F6，可以切換到布局模式。在“布局模式”下，設計者可以在頁面中所見即所地手工繪制布局表格和布局單元格，從而直觀地進行網頁布局。在插入欄中選擇“布局”類別，運用“繪制布局表格”和“繪制布局單元格”按鈕可以繪制布局表格和布局單元格。表格布局的方法通常要先繪制一個布局表

4、格，然后在布局表格中繪制布局單元格，在“設計”視圖中，布局表格外框為綠色，而布局單元格外框為藍色。如果不在布局表格中繪制布局單元格，Dreamweaver CS5會自動創(chuàng)建一個布局表格以容納該單元格，所以，布局單元格不能獨立存在于布局表格之外。布局表格和布局單元格具有自動吸附功能，當新繪制的布局表格或布局單元格距離另一個布局表格或布局單元格的邊界很近時，就會自動吸附。如果要取消該功能，可以在繪制時按住Alt鍵。表格布局的方法2使用原始表格布局除使用布局表格工具進行布局外，直接插入原始表格同樣可以進行網頁布局。創(chuàng)建表格時須注意除了要設置表格的行數、列數和寬度以外，還需要將“邊框粗細”、“單元格邊

5、距”、“單元格間距”都設置為0，這樣創(chuàng)建的表格沒有邊框和間距，也適合用于網頁布局。表格布局的方法3相臨表格之間的位置關系不論表格的寬度是多少，兩個相臨的表格必然是上下的位置關系，因此，在使用表格布局時，可以根據功能將頁面劃分為若干個區(qū)塊，每個區(qū)塊使用一個表格。如圖5-16所示為一個上中下結構的布局，可以分別使用三個表格完成header區(qū)、主體區(qū)和頁腳區(qū)的布局。表格布局的方法設置布局表格的屬性這里主要是根據實際需要設置表格的行數、列數、寬度、高度，對齊方式、背景等屬性，從而實現網頁內容的布局。特別是表格以及單元格的寬度和高度，它們決定了網頁布局內容的尺寸。在向單元格內添加內容時，比如添加一張圖片

6、，如果圖片尺寸比單元格的尺寸大，將會把單元格“撐大”，這樣可能會破壞頁面的整體外觀，所以在創(chuàng)建表格以及設置單元格尺寸時，要預先算好尺寸，留出合適的空間以存放內容小貼士表格布局的方法嵌套表格的應用在使用表格布局時，大的功能區(qū)塊內部還有小的區(qū)塊，各小區(qū)塊內部還有更具體的內容需要放置，這些情況都需要使用嵌套表格來實現。簡而言之，使用嵌套表格可以將大的區(qū)塊劃分為小的區(qū)塊，也可以將小區(qū)塊劃分更小的區(qū)域，從而實現網頁元素的精確定位。如下圖中使用一個1行2列的嵌套表格將主體區(qū)劃分為左、右兩個子區(qū)塊。使用嵌套表格時，要注意內層表格的寬度不能超過其外層單元格的寬度，否則會將外層單元格“撐大”而引起外層表格變形。小貼士項目總結本項目介紹了網頁版式設計與布局的基礎知識。網頁版式設計能夠將文字和圖形圖像等視覺元素進行組合配置，使瀏覽者對網頁的內容一目了然，并獲得悅目的視覺效果，從而實現信息傳達的最佳效果，因此，版式設計在網頁設計中具