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

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

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

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

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

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

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