電子商務(wù)網(wǎng)頁制作-項(xiàng)目網(wǎng)頁版式設(shè)計與布局培訓(xùn)課程PPT課件[通用]

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

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

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

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

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

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