電子商務(wù)網(wǎng)頁制作-項(xiàng)目3_第1頁
電子商務(wù)網(wǎng)頁制作-項(xiàng)目3_第2頁
電子商務(wù)網(wǎng)頁制作-項(xiàng)目3_第3頁
電子商務(wù)網(wǎng)頁制作-項(xiàng)目3_第4頁
電子商務(wù)網(wǎng)頁制作-項(xiàng)目3_第5頁
已閱讀5頁,還剩66頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、DW項(xiàng)目三電子商務(wù)網(wǎng)頁制作站點(diǎn)創(chuàng)建新體驗(yàn)說出出什么是是站點(diǎn);創(chuàng)建建、編輯輯和管理理站點(diǎn);進(jìn)行行文本的的添加和和編輯;插入入和簡單單編輯圖圖像;插入入和編輯輯表格。項(xiàng)目目標(biāo)標(biāo)什么是站站點(diǎn)?站點(diǎn)可以以簡單的的理解成成為存放放站內(nèi)信信息的文文件夾,是一組組網(wǎng)頁文文檔的集集合。設(shè)設(shè)計(jì)者通通過各種種鏈接把把這些網(wǎng)網(wǎng)頁聯(lián)系系在一起起,瀏覽覽者通過過不同的的鏈接,可以從從一個(gè)網(wǎng)網(wǎng)頁到另另一個(gè)網(wǎng)網(wǎng)頁,從從而實(shí)現(xiàn)現(xiàn)對(duì)整個(gè)個(gè)網(wǎng)站的的訪問。網(wǎng)頁制制作的第第一步不不是制作作一個(gè)網(wǎng)網(wǎng)頁,而而是創(chuàng)建建一個(gè)新新的站點(diǎn)點(diǎn)。創(chuàng)建站點(diǎn)就是是創(chuàng)建一一個(gè)特殊殊的文件件夾,有有關(guān)網(wǎng)站站的所有有內(nèi)容,如子文文件夾、網(wǎng)頁文文檔、組組件、圖

2、圖片和其其它網(wǎng)站站相關(guān)的的文檔等等等,都都存放在在該文件件夾中。另外,“站點(diǎn)點(diǎn)”和“網(wǎng)站”是一個(gè)個(gè)東東,只是說說法不同同而已!小貼士創(chuàng)建站點(diǎn)點(diǎn)文件夾Dreamweaver站點(diǎn)由三三種類型型的文件件夾組成成,這三三種文件件夾有可可能是同同一個(gè)文文件夾,也可能能不是,這取決決于開發(fā)發(fā)環(huán)境和和所開發(fā)發(fā)的網(wǎng)站站類型。1、本地文件夾本地文件夾是是網(wǎng)站設(shè)設(shè)計(jì)者的的工作文文件夾,設(shè)計(jì)過過程中使使用和處處理的所所有文檔檔都存儲(chǔ)儲(chǔ)在這個(gè)個(gè)文件夾夾中。它它一般位位于本地地計(jì)算機(jī)機(jī)上,也也可以位位于網(wǎng)絡(luò)絡(luò)服務(wù)器器上。Dreamweaver將該文件件夾稱為為“本地地站點(diǎn)”。只需要建立本本地文件件夾就可可以將其其定義為

3、為Dreamweaver的“本地地站點(diǎn)”。創(chuàng)建站點(diǎn)文件件夾、遠(yuǎn)端文件夾夾如果要向Web服務(wù)器傳傳輸文件件或開發(fā)發(fā)Web應(yīng)用程序序,還需需添加遠(yuǎn)遠(yuǎn)端站點(diǎn)點(diǎn)和測試試服務(wù)器器信息。遠(yuǎn)端文文件夾是是存儲(chǔ)文文件的位位置,這這些文件件用于測測試、生生產(chǎn)、協(xié)協(xié)作等。遠(yuǎn)端文文件夾通通常位于于遠(yuǎn)端Web服務(wù)器上上。Dreamweaver將該文件件夾稱為為“遠(yuǎn)端端站點(diǎn)”。本地文件夾和和遠(yuǎn)端文文件夾使使設(shè)計(jì)者者能夠在在本地磁磁盤和Web服務(wù)器之之間傳輸輸文件,從而輕輕松管理理Dreamweaver站點(diǎn)中的的文件。、測試試服務(wù)器文文件夾測試服務(wù)器文文件夾是是Dreamweaver處理動(dòng)態(tài)態(tài)網(wǎng)頁的的文件夾夾。創(chuàng)建站點(diǎn)文

4、件件夾在創(chuàng)建站點(diǎn)點(diǎn)之前,我們應(yīng)應(yīng)該新建建一個(gè)本本地文件件夾用于于存放網(wǎng)網(wǎng)站的各各種文件件,在本本地文件件夾內(nèi)部部再創(chuàng)建建若干個(gè)個(gè)子文件件夾對(duì)網(wǎng)網(wǎng)站文件件進(jìn)行分分類管理理,比如如網(wǎng)站圖圖像存放放在“images”文件夾中。子文件夾的的名稱一一般使用用便于記記憶的英英文單詞詞或縮寫寫來命名名,如:“images”文件夾夾用于存存放網(wǎng)站站圖像;“style”文件夾夾用于存存放樣式式表文件件;“swf”文件夾夾用于存存放網(wǎng)站站動(dòng)畫;“data” 文件件夾用于于存放數(shù)數(shù)據(jù)庫方方面的內(nèi)內(nèi)容。小貼士創(chuàng)建站點(diǎn)步驟驟步驟:在DreamweaverCS5窗口中打打開“站站點(diǎn)”菜菜單,選選擇“新新建站點(diǎn)點(diǎn)”命令令,

5、將打打開“站站點(diǎn)設(shè)置置對(duì)象”對(duì)話框框在“站點(diǎn)”選項(xiàng)卡卡中,可可以設(shè)置置站點(diǎn)名名稱和本本地站點(diǎn)點(diǎn)文件夾夾,站點(diǎn)點(diǎn)名稱可可以自己己定義,一般定定義為與與站點(diǎn)主主題相關(guān)關(guān)的名稱稱;本地地站點(diǎn)文文件夾非非常重要要,一定定要設(shè)置置為前面面創(chuàng)建的的本地文文件夾。創(chuàng)建站點(diǎn)步驟驟步驟:單擊“高級(jí)設(shè)設(shè)置”選選項(xiàng)卡,在其中中的“本本地信息息”子選選項(xiàng)卡中中設(shè)置默默認(rèn)圖像像文件夾夾為本地地文件夾夾中的“images”子文件夾夾對(duì)于制作本地地站點(diǎn)而而言,只需要進(jìn)行上上述的設(shè)設(shè)置就可可以了,其余的的選項(xiàng)都都采用默默認(rèn)設(shè)置置即可,不需要要再去專專門設(shè)置置。創(chuàng)建站點(diǎn)步驟驟步驟:設(shè)置完成成后,單單擊“保保存”按按鈕,站站點(diǎn)創(chuàng)

6、建建完成,這時(shí)可可以在窗窗口右側(cè)側(cè)的文件件面板中中看到站站點(diǎn)中的的文件和和文件夾夾打開站點(diǎn)點(diǎn)當(dāng)我們同時(shí)時(shí)在制作作幾個(gè)網(wǎng)網(wǎng)站時(shí),不同的的站點(diǎn)都都會(huì)在Dreamweaver中保留,我們需需要打開開某個(gè)站站點(diǎn)時(shí),可以通通過“管管理站點(diǎn)點(diǎn)”對(duì)話話框來完完成。在Dreamweaver窗口中打打開“站站點(diǎn)”菜菜單,選選擇“管管理站點(diǎn)點(diǎn)”命令令,打開開“管理理站點(diǎn)”對(duì)話框。在“管理理站點(diǎn)”對(duì)話框框中選擇擇需要打打開的站站點(diǎn)名稱稱,單擊擊“完成成”按鈕鈕即可打打開該站站點(diǎn)。編輯站點(diǎn)點(diǎn)當(dāng)需要重重新進(jìn)行行站點(diǎn)設(shè)設(shè)置時(shí),可以單單擊“管管理站點(diǎn)點(diǎn)”對(duì)話話框中的的“編輯輯”按鈕鈕,選擇擇后將重重新彈出出“站點(diǎn)點(diǎn)設(shè)置對(duì)對(duì)

7、象”對(duì)對(duì)話框,可以對(duì)對(duì)站點(diǎn)重重新進(jìn)行行設(shè)置。復(fù)制站點(diǎn)點(diǎn)單擊“管理站站點(diǎn)”對(duì)對(duì)話框中中的“復(fù)復(fù)制”按按鈕,將將生成選選定的站站點(diǎn)的復(fù)復(fù)制站點(diǎn)點(diǎn)。刪除站點(diǎn)點(diǎn)單擊“管管理站點(diǎn)點(diǎn)”對(duì)話話框中的的“刪除除”按鈕鈕,將彈彈出警告告框提示示是否確確定刪除除,單擊擊“是”按鈕后后將刪除除選定的的站點(diǎn)。導(dǎo)出和導(dǎo)導(dǎo)入站點(diǎn)點(diǎn)單擊“管理站站點(diǎn)”對(duì)對(duì)話框中中的“導(dǎo)導(dǎo)出”按按鈕,將將導(dǎo)出當(dāng)當(dāng)前的站站點(diǎn),用用于網(wǎng)站站備份。單擊“管管理站點(diǎn)點(diǎn)”對(duì)話話框中的的“導(dǎo)入入”按鈕鈕,可以以導(dǎo)入之之前導(dǎo)出出過的備備份站點(diǎn)點(diǎn)。站點(diǎn)的操操作在制作網(wǎng)網(wǎng)頁之前前我們需需要先創(chuàng)創(chuàng)建站點(diǎn)點(diǎn)。在本本次活動(dòng)動(dòng)中我們們了解了了站點(diǎn)的的概念,著重學(xué)學(xué)習(xí)了

8、創(chuàng)創(chuàng)建站點(diǎn)點(diǎn)的方法法和步驟驟,同時(shí)時(shí)還學(xué)習(xí)習(xí)了站點(diǎn)點(diǎn)相關(guān)的的一系列列操作,包括站站點(diǎn)的打打開、編編輯、復(fù)復(fù)制、刪刪除、導(dǎo)導(dǎo)入和導(dǎo)導(dǎo)出,這這些操作作對(duì)我們們以后管管理站點(diǎn)點(diǎn)是非常常有用的的?;顒?dòng)小結(jié)結(jié)網(wǎng)頁文件件操作1新建網(wǎng)網(wǎng)頁文件方法一:在起起始頁的的“新建建”欄中中單擊“HTML”選項(xiàng),即即可新建建一個(gè)名名為“Untitled-1”的空白網(wǎng)網(wǎng)頁網(wǎng)頁文件件操作方法二:打開開“文件件”菜單單,選擇擇“新建建”命令令,或按按快捷鍵鍵+N,將彈出出“新建建文檔”對(duì)話框框,選擇擇“空白白頁”中中的“HTML”項(xiàng),在“布局”中選擇擇“無”,單擊擊“創(chuàng)建建”按鈕鈕即可新新建一個(gè)個(gè)空白網(wǎng)頁。網(wǎng)頁文件件操作方法

9、三:在文件件面板中中的站點(diǎn)點(diǎn)目錄上上單擊右右鍵,在在彈出的的快捷菜菜單中選選擇“新新建文件件”,將將新建一一個(gè)名為為“Untitled.html”的文件,需要重重新命名。網(wǎng)頁文件件操作2保存網(wǎng)網(wǎng)頁打開“文件”菜單,選擇“保存”命令,或按快快捷鍵+S,將彈出出“另存存為”對(duì)對(duì)話框,選擇保保存的位位置并輸輸入保存存文件名名,單擊擊“保存存”按鈕鈕即可將將網(wǎng)頁保存。網(wǎng)頁文件件操作文件名通常使用用小寫英英文字母母,不使使用空格格、特殊殊符號(hào),不允許許使用中中文!文件命名盡量量以這四四種方式式命名:漢語拼拼音,漢漢語拼音音縮寫,英文,英文縮縮寫,以以方便通通過文件件名直觀觀的了解解頁面內(nèi)內(nèi)容。切忌用默認(rèn)

10、的的untitled-1、untitled-2等方式命命名文件件,作為為初學(xué)者者,你需需要養(yǎng)成成很好的的文件命命名習(xí)慣慣!小貼士網(wǎng)頁文件件操作在“文件件”菜單單里有“保存”和“另另存為”兩個(gè)命命令,首首次保存存網(wǎng)頁時(shí)時(shí),選擇擇“保存存”或“另存為為”命令令都會(huì)彈彈出“另另存為”對(duì)話框框,提示示設(shè)計(jì)者者設(shè)置保保存位置置和文件件名;對(duì)對(duì)于已經(jīng)經(jīng)保存過過的網(wǎng)頁頁進(jìn)行再再次編輯輯時(shí),選選擇“保保存”命命令直接接將所作作的修改改保存到到原網(wǎng)頁頁文檔,而選擇擇“另存存為”命命令則再再次彈出出“另存存為”對(duì)對(duì)話框,可以重重新設(shè)置置保存位位置和文文件名。在后面我們們經(jīng)常會(huì)會(huì)用到“另存為為”命令令。小貼士網(wǎng)頁文

11、件件操作3關(guān)閉網(wǎng)網(wǎng)頁單擊菜單欄下下網(wǎng)頁標(biāo)標(biāo)題旁的的關(guān)閉按按鈕即可可關(guān)閉該該網(wǎng)頁。網(wǎng)頁文件件操作4刪除網(wǎng)網(wǎng)頁在文件面板板中選擇擇要?jiǎng)h除除的網(wǎng)頁頁,按Delete鍵,將彈彈出提示示框確認(rèn)認(rèn)是否刪刪除,單單擊“是是”后即即可刪除除該網(wǎng)頁。修改網(wǎng)頁頁屬性打開“修改”菜單,選擇“頁面屬屬性”命命令,或或按快捷捷鍵+J,或者單單擊屬性性面板中中的“頁頁面屬性性”按鈕鈕,將彈彈出“頁頁面屬性性”對(duì)話框。修改網(wǎng)頁頁屬性在該對(duì)話話框中可可以設(shè)置置網(wǎng)頁的的各種屬屬性,如如頁面文文字的設(shè)設(shè)置、頁頁面背景景的設(shè)置置、頁面面邊距的的設(shè)置、鏈接文文字的設(shè)設(shè)置以及及標(biāo)題編編碼的設(shè)設(shè)置等,根據(jù)屬屬性分類類不同,分為六六個(gè)類別

12、別。1外觀(CSS)在“外觀觀(CSS)”分類類中,可可以設(shè)置置如下屬性頁面字體:設(shè)設(shè)置頁面面字體格格式??煽梢钥焖偎俣x整整張頁面面的字體體。大?。何淖值牡拇笮?,默認(rèn)單單位為像像素。文本顏色:文文字的顏顏色。背景顏色:頁頁面背景景顏色。背景圖像:背背景圖片片的位置置鏈接。重復(fù):背景圖圖片的顯顯示是否否重復(fù)。左右上下邊距距:頁面面距離左左右上下下的距離離。修改網(wǎng)頁頁屬性2外觀(HTML)在“外觀觀(HTML)”分類類中,可可以設(shè)置置如下屬性:背景圖像:背背景圖片片的位置置鏈接。背景:頁面背背景顏色色。文本:文本的的顏色。已訪問鏈接接:已經(jīng)經(jīng)訪問過過的文本本鏈接的的顏色。鏈接顏色色:文本本鏈接的

13、的顏色?;顒?dòng)鏈接接顏色:文本活活動(dòng)鏈接接的顏色色。邊距和邊邊距高度度:距離離頁面左左、上的的距離,高度單位位默認(rèn)為為像素。修改網(wǎng)頁頁屬性鏈接(CSS)在“鏈接接(CSS)”分類類中,可可以設(shè)置置如下屬性:鏈接字體:鏈鏈接文字字的字體體格式和和加粗傾傾斜屬性性。大?。鹤煮w的的大小,默認(rèn)單單位為像像素。鏈接顏色:文文本鏈接接的顏色色變換圖像鏈接接顏色:變換圖圖像鏈接接時(shí)文本本的顏色色。已訪問鏈接接顏色:已經(jīng)訪訪問過的的文本鏈鏈接的顏顏色。活動(dòng)鏈接顏色色:文本本活動(dòng)鏈鏈接的顏顏色。下滑線樣式式:鏈接接時(shí)是否否顯示下下劃線。修改網(wǎng)頁頁屬性標(biāo)題(CSS)在“(標(biāo)標(biāo)題CSS)”分類類中,可可以設(shè)置置如下屬

14、屬性:標(biāo)題字體的格格式、大大小和顏顏色,設(shè)設(shè)置標(biāo)題題1至標(biāo)題6后,在字字體屬性性面板中中直接指指定文字字為某號(hào)號(hào)標(biāo)題后后,該文文字直接接套用該該標(biāo)題的的屬性。修改網(wǎng)頁頁屬性標(biāo)題/編碼標(biāo)題和編碼:對(duì)于任任何一張張頁面來來說,標(biāo)標(biāo)題都非非常重要要,它能能在瀏覽覽者瀏覽覽該網(wǎng)頁頁的時(shí)候候了解該該網(wǎng)頁的的內(nèi)容,如果頁頁面沒有有設(shè)置標(biāo)標(biāo)題,則則默認(rèn)標(biāo)標(biāo)題名為為“無標(biāo)標(biāo)題文檔檔”,而而不能直直接的表表達(dá)出該該頁面的的內(nèi)容,因此我我們建議議每個(gè)頁頁面都應(yīng)應(yīng)該設(shè)置置標(biāo)題。修改網(wǎng)頁頁屬性跟蹤圖像像在“標(biāo)題/編碼”分分類中,可以設(shè)設(shè)置網(wǎng)頁頁的跟蹤蹤圖像。跟蹤圖像是Dreamweaver一個(gè)非常常有效的的功能,它允

15、許許設(shè)計(jì)者者在網(wǎng)頁頁中將原原來的平平面設(shè)計(jì)計(jì)稿作為為輔助的的背景。這樣,就可以以非常方方便地定定位文字字、圖像像、表格格、層等等網(wǎng)頁元元素在該該頁面中中的位置置了。小貼士網(wǎng)頁預(yù)覽覽網(wǎng)頁制作完成成后要在在瀏覽器器中預(yù)覽覽最終效效果,在在文檔工工具欄中中單擊預(yù)預(yù)覽按鈕鈕,選擇擇預(yù)覽使使用的瀏瀏覽器即即可打開開瀏覽器器預(yù)覽網(wǎng)頁。也可以直接接按快捷捷鍵F12打開瀏覽覽器預(yù)覽覽網(wǎng)頁。文本的輸輸入和編編輯文本包括括所有的的漢字、西文字字母、各各種可顯顯示的符符號(hào)、數(shù)數(shù)字等,與漂亮亮的圖片片、動(dòng)畫畫和交互互式按鈕鈕相比,雖然文文本顯得得過于普普通,但但它卻是是網(wǎng)頁中中最重要要的內(nèi)容容。因?yàn)闉槲谋颈肀磉_(dá)信息息

16、準(zhǔn)確完完整、易易于理解解、下載載迅速,是向?yàn)g瀏覽者傳傳遞信息息的主要要途徑。特別是是對(duì)于電電子商務(wù)務(wù)網(wǎng)頁,無論是是展示企企業(yè)形象象還是傳傳達(dá)產(chǎn)品品信息都都離不開開文本,文本的的編輯是是制作網(wǎng)網(wǎng)頁時(shí)首首先要考考慮的問問題。1.普通文字字在DreamweaverCS5中插入普普通文字字的方法法很簡單單,和在在記事本本、Word等文字軟軟件的方方法相似似,在出出現(xiàn)光標(biāo)標(biāo)的地方方,選擇擇合適的的輸入法法,便可可以直接接輸入文文字,也也可以通通過復(fù)制制粘貼的的方式插插入文字字。文本的輸輸入和編編輯2.換行在輸入文字字時(shí),按按Enter鍵,文字字另起一一段,此此時(shí)與上上一行文文字直接接空出一一行的距距離,

17、表表明重新新開始一一個(gè)段落落。按Shift+Enter鍵,文字字另起一一行,此此時(shí)與上上一行文文字之間間沒有空空行,文文字分行行,不分分段。3.空格在輸入文字字中,按按空格鍵鍵,只能能增加一一個(gè)空格格,此時(shí)時(shí)需要在在“插入入欄”的的“文本本”選項(xiàng)項(xiàng)中單擊擊“不換換行空格格”才能能連續(xù)插插入多個(gè)個(gè)空格。文本的修修飾文本的修飾主主要在文文本的屬屬性面板板中設(shè)置置。在DreamweaverCS5中,文本本屬性面面板與之之前版本本的區(qū)別別在于將將文字的的屬性分分為“HTML”和“CSS”兩部分。HTML是對(duì)文字字直接編編輯,而而CSS則是給該該文字添添加樣式式表,有有關(guān)CSS的內(nèi)容我我們將在在后面的的

18、章節(jié)中中詳細(xì)講講解。1HTML文本設(shè)置置HTML文本設(shè)置置在“HTML屬性面板板”中進(jìn)行:文本的修修飾格式:可以對(duì)對(duì)所選文文字或者者是文字字所在的的整個(gè)段段落設(shè)置置成之前前預(yù)先設(shè)設(shè)置好的的標(biāo)題格格式。通通過下拉拉菜單選選中設(shè)置:類:可以對(duì)對(duì)所選文文字套用用已經(jīng)定定義好的的類,可可以在CSS選項(xiàng)卡中中新建類類,也可可以重命命名類。文字類類可以通通過類的的名稱呈呈現(xiàn)出設(shè)設(shè)置的效效果,更更方便選選擇合適適的類:文本的修修飾鏈接:將選定定文字設(shè)設(shè)置為鏈鏈接,可可以鏈接接到頁面面或其他他網(wǎng)頁元元素。有有關(guān)鏈接接的內(nèi)容容將在后后面專門門講解。粗體、斜體體:設(shè)置置文字的的粗體和和斜體。項(xiàng)目列表、編編號(hào)列表表

19、:設(shè)置置段落的的項(xiàng)目編編號(hào)或列列表編號(hào)號(hào)。內(nèi)縮區(qū)塊、刪除內(nèi)內(nèi)縮區(qū)塊塊:設(shè)置置文字或或段落縮縮進(jìn)或凸凸出。文本的修修飾2CSS文本設(shè)置置CSS文本設(shè)置置在“CSS屬性面板板”中進(jìn)行:目標(biāo)規(guī)則:DreamweaverCS5中,文字字的格式式設(shè)置一一定要用用CSS樣式表,在目標(biāo)標(biāo)規(guī)則中中需要選選擇套用用的樣式式表,如如果沒有有已經(jīng)存存在的樣樣式表,則需要要選中“新CSS規(guī)則”后后,創(chuàng)建建新的CSS樣式表,樣式表表可以存存在于該該頁面中中,可以以創(chuàng)建新新的樣式式表中。當(dāng)然也也可以編編輯已經(jīng)經(jīng)存在的的樣式表表,但編編輯后,之前套套用該樣樣式表的的字體,也將自自動(dòng)套用用新的樣樣式表格格式。文本的修修飾字體

20、:DreamweaverCS5默認(rèn)的字字體很少少,一般般只有宋宋體這一一種字體體,如果果在網(wǎng)頁頁中需要要用到其其他字體體,可以以在字體體列表的的最后一一行選擇擇“編輯輯字體列列表”,將彈出出“編輯輯字體列列表”對(duì)話框,可以在此此添加本本機(jī)所安安裝的字字體。在實(shí)際操操作中,因?yàn)榫W(wǎng)網(wǎng)頁在互互聯(lián)網(wǎng)上上可能會(huì)會(huì)被不同同配置的的客戶端端瀏覽,而有的的客戶端端沒有安安裝非常常見的字字體,而而影響該該網(wǎng)頁的的效果,因此我我們?cè)谧肿煮w的選選擇上,一般選選擇非常常普遍的的字體,例如宋宋體、黑黑體等,如果需需要一些些特殊的的字體效效果,則則建議以以圖片的的形式呈呈現(xiàn)。小貼士文本的修修飾對(duì)齊方式:設(shè)設(shè)置文字字的左對(duì)

21、對(duì)齊、居居中對(duì)齊齊、右對(duì)對(duì)齊、兩兩端對(duì)齊齊,默認(rèn)認(rèn)為兩端端對(duì)齊。加粗斜體:設(shè)置文文字的粗粗體和斜斜體。大?。焊鶕?jù)需需要調(diào)整整文字大大小,默默認(rèn)的單單位為像像素。顏色:選中文文字后,單擊“顏色框框”,選選擇要設(shè)設(shè)置的顏顏色?;蚧蛘咴陬侇伾蚝蠛竺娴奈奈谋究蜉斴斎腩伾腞GB值。使用列表表使用列表可以以文字更更有條理理和層次次。列表表分為項(xiàng)項(xiàng)目列表表和編號(hào)號(hào)列表兩兩種。項(xiàng)項(xiàng)目列表表是并列列的,不不存在先先后順序序,默認(rèn)認(rèn)的形式式為圓點(diǎn)點(diǎn);編號(hào)號(hào)列表的的內(nèi)容有有一定的的先后順順序,默默認(rèn)的形形式為數(shù)數(shù)字。1設(shè)置項(xiàng)項(xiàng)目列表表項(xiàng)目列表分兩兩種情況況設(shè)置。情況1:如果已已輸入了了各項(xiàng)內(nèi)內(nèi)容,且且各項(xiàng)之之

22、間是以以段落來來劃分的的,在選選擇各項(xiàng)項(xiàng)內(nèi)容后后,單擊擊HTML屬性面板板中的“項(xiàng)目列列表”按按鈕即可可將文本本設(shè)置為為項(xiàng)目列表。情況2:在輸入入項(xiàng)目內(nèi)內(nèi)容之前前,先在在需要輸輸入列表表的位置置單擊屬屬性面板板中的“項(xiàng)目列列表”按按鈕,在出現(xiàn)現(xiàn)圓點(diǎn)標(biāo)標(biāo)記后,輸入內(nèi)內(nèi)容,按按回車鍵鍵,進(jìn)入入第二行行列表,繼續(xù)輸輸入內(nèi)容容。使用列表表2設(shè)置編編號(hào)列表表設(shè)置編號(hào)列表表的方法法和設(shè)置置項(xiàng)目列列表的方方法是一一樣的,只是需需要單擊擊的是屬屬性面板板中的“編號(hào)列列表”按按鈕。Dreamweaver具有自動(dòng)動(dòng)添加項(xiàng)項(xiàng)目符號(hào)號(hào)與項(xiàng)目目編號(hào)的的功能,如果在在列表項(xiàng)項(xiàng)的末尾尾按回車車,系統(tǒng)統(tǒng)將自動(dòng)動(dòng)添加符符號(hào)或編

23、編號(hào),如如果想終終止自動(dòng)動(dòng)添加功功能,只只需再按按一次回回車。小貼士使用列表表3編輯列列表在屬性面板板中單擊擊“列表表項(xiàng)目”按鈕,彈出“列表屬屬性”對(duì)對(duì)話框,在此可可以修改改列表的的類型和和樣式。添加符號(hào)、日日期和水水平線1添加符符號(hào)在需要添加加符號(hào)的的位置,單擊“插入欄欄”中“文本”選項(xiàng)卡卡最后一一項(xiàng)的“字符”下拉按按鈕,在在彈出的的菜單中中選擇需需要輸入入字符按按鈕即可可,如需需更多特特殊符號(hào)號(hào),則選選擇最后后一項(xiàng)“其他字字符”。添加符號(hào)、日日期和水水平線2添加日日期打開“插入”菜單,選擇“日期”命令,彈出“插入日日期”對(duì)對(duì)話框,在其中中選擇插插入日期期的格式式后確定定即可插插入日期。添加

24、符號(hào)、日日期和水水平線3添加水水平線水平線可以分割割網(wǎng)頁中中的內(nèi)容容,打開開“插入入”菜單單,選擇擇“HTML”子菜單中中的“水水平線”命令,即可在在光標(biāo)處處插入水平線。文本的其其它操作作1檢查拼拼寫檢查拼寫功能能可以使使我們方方便而快快速的對(duì)對(duì)網(wǎng)頁中中的文字字進(jìn)行檢檢查,打打開“命命令”菜菜單,選選擇“檢檢查拼寫寫”命令令,在執(zhí)執(zhí)行該命命令后,Dreamweaver發(fā)現(xiàn)錯(cuò)誤誤會(huì)彈出出“拼寫寫檢查”對(duì)話框框,提示示存在的的錯(cuò)誤,我們可可以在“建議”選項(xiàng)中中選擇正正確的文文字,單單擊改正正即可完完成錯(cuò)誤誤文字的的修改工工作。文本的其其它操作作2查找和和替換和Word的查找與與替換類類似,但但Dr

25、eamweaver的查找對(duì)對(duì)象除了了文字外外,還可可以是代代碼,目目標(biāo)除了了該網(wǎng)頁頁外,還還可以是是本地站站點(diǎn)的所所有網(wǎng)頁頁。打開“編編輯”菜菜單,選選擇“查查找和替替換”命命令,打打開“查查找和替替換”對(duì)對(duì)話框,在“查查找”中中輸入需需要查找找的內(nèi)容容,選擇擇查找的的范圍,單擊“替換全全部”可可以在指指定的查查找范圍圍內(nèi)替換換查找的的內(nèi)容。文本的其其它操作作3撤銷與與重做撤銷與重做是是網(wǎng)頁中中常常使使用的命命令,打打開“編編輯”菜菜單,選選擇“撤撤銷”命命令(或或按快捷捷鍵Ctrl+Z)可以撤撤銷上一一步操作作;選擇擇“重做做”命令令(或按按快捷鍵鍵Ctrl+Y),可以以重做上上一步操操作。

26、網(wǎng)頁圖像像介紹圖像具有直觀觀的特點(diǎn)點(diǎn),是網(wǎng)網(wǎng)頁中最最重要的的視覺要要素,它它可以美美化網(wǎng)頁頁,使頁頁面更加加充實(shí),它比文文字更直直觀、真真實(shí)、生生動(dòng),并并能表述述文字無無法說明明的內(nèi)容容。網(wǎng)頁中的的圖像不不是越多多越好,也不是是越大越越好,而而是根據(jù)據(jù)不同的的需要選選擇不同同的圖像像格式。在制作作網(wǎng)頁時(shí)時(shí)我們常常用的圖圖像格式式有以下下三種:1JPG格式JPG圖像是一一種有損損壓縮的的圖像格格式,可可以根據(jù)據(jù)壓縮質(zhì)質(zhì)量調(diào)節(jié)節(jié)文件大大小。支支持真彩彩色但不不具有透透明效果果。在網(wǎng)網(wǎng)頁中常常用于照照片,風(fēng)風(fēng)景等。2GIF格式表現(xiàn)的顏色要要比JPG少得多,但是支支持背景景透明,還能支支持動(dòng)畫畫。在網(wǎng)

27、網(wǎng)頁中常常用于具具有透明明背景的的圖像,常用于于網(wǎng)頁中中的圖形形、符號(hào)號(hào)、標(biāo)題題等。3PNG格式PNG結(jié)合了GIF和JPEG的優(yōu)點(diǎn),具有存存儲(chǔ)形式式豐富的的特點(diǎn),同時(shí)增增加了一一些GIF文件格式式所不具具備的特特性。它它支持Alpha通道透明明,可以以制作矢矢量圖像像。插入圖像像在DreamweaverCS5中,設(shè)計(jì)計(jì)者可以以在任意意位置插入JPG、GIF、PNG格式的圖圖像。插插入的方方法有以以下幾種種:方法一:使用用菜單命命令。將將光標(biāo)定定位在需需要插入入圖像的的位置處處,打開開“插入入”菜單單,選擇擇“圖像像”命令令,將彈彈出“選選擇圖像像文件”對(duì)話框。插入圖像像選擇需要要插入的的圖像,

28、單擊“確定”按鈕,接著會(huì)會(huì)彈出“圖像標(biāo)標(biāo)簽輔助助功能屬屬性”對(duì)對(duì)話框,如圖3-34所示。單單擊“確確定”按按鈕即可可在網(wǎng)頁頁中插入入該圖像像。方法二:使用面面板插入入。將光標(biāo)定位位在需要要插入圖圖像的位位置處,選擇“插入”工具欄欄上的“常用”項(xiàng),單單擊“圖圖像”按按鈕,在在彈出的的對(duì)話框框中選擇擇需要插插入的圖圖像即可可。插入圖像像方法三:使用文文件面板板插入。在文件件面板中中選中需需要插入入的圖像像直接拖拖動(dòng)到文文檔內(nèi)需需要插入入圖像的的位置處處即可。圖像的屬屬性在DreamweaverCS5中,通過過“屬性性”面板板可以設(shè)設(shè)置圖像像的屬性性。選中中需要操操作的圖圖像,即即可在“屬性”面板設(shè)

29、設(shè)置其屬性。圖像:預(yù)覽、大小和和ID名稱。寬和高:設(shè)置置圖像的的顯示大大小,單單位為像像素。當(dāng)當(dāng)圖像的的寬度和和高度有有所變化化時(shí),可可單擊數(shù)數(shù)值右側(cè)側(cè)的恢復(fù)復(fù)按鈕恢恢復(fù)圖像像的原始始尺寸。在網(wǎng)頁中中調(diào)整圖圖像,只只是改變變了圖像像在瀏覽覽器中的的顯示尺尺寸,并并沒有改改變圖像像文件的的大小,因此,即使圖圖像尺寸寸變小了了,下載載該圖片片的時(shí)間間也不會(huì)會(huì)發(fā)生變變化。小貼士圖像的屬屬性源文件:圖像的的存放路路徑。鏈接:設(shè)置圖圖像的超超級(jí)鏈接接。替換:出現(xiàn)在在圖像位位置上的的文字,當(dāng)圖片片因?yàn)槠淦溆嘣蛞驘o法顯顯示時(shí),可用文文字給予予提醒。類:可選擇擇該圖像像套用的的類。編輯:對(duì)圖片片進(jìn)行基基本的

30、編編輯熱點(diǎn)工具組:用于創(chuàng)創(chuàng)建不同同形狀的的圖像映映射。垂直邊距和水水平邊距距:圖像像四周與與其他元元素之間間的距離離。邊框:設(shè)置圖圖像邊框框的寬度度,單位位為像素素。對(duì)齊:設(shè)置圖圖像的對(duì)對(duì)齊方式式。編輯圖像像Dreamweaver中也可以以對(duì)圖像像進(jìn)行一一些簡單單的編輯輯,當(dāng)圖圖像需要要編輯的的部分Dreamweaver能完成時(shí)時(shí),我們們可以直直接在Dreamweaver中用內(nèi)置置工具編編輯,從從而省去去了圖像像重新在在Photoshop、Fireworks等軟件中中編輯的的時(shí)間。內(nèi)置工具具位于圖圖像的屬屬性面板板中,可可以對(duì)圖圖像進(jìn)行行裁剪、亮度和和對(duì)比度度、銳化化的編輯。1裁剪可以對(duì)圖圖像

31、的尺尺寸進(jìn)行行修改。2亮度對(duì)對(duì)比度可以調(diào)節(jié)節(jié)圖像的的亮度、對(duì)比度度,使得得圖像更更好的顯顯示出來來。3銳化可以增強(qiáng)強(qiáng)圖像邊邊緣的像像素對(duì)比比度,從從而增加加圖像的的清晰度度。圖像的使使用原則則在使用網(wǎng)網(wǎng)頁圖像像的問題題上,設(shè)設(shè)計(jì)者與與瀏覽者者可能會(huì)會(huì)產(chǎn)生一一些矛盾盾。一方方面,設(shè)設(shè)計(jì)者希希望在自自己的網(wǎng)網(wǎng)頁上加加入漂亮亮的圖片片,使網(wǎng)網(wǎng)頁充滿滿藝術(shù)魅魅力;另另一方面面,瀏覽覽者則常常常因?yàn)闉榫W(wǎng)頁下下載時(shí)間間太長而而不耐煩煩,甚至至不愿意意等著看看內(nèi)容。因此,我們可可以采用用以下方方法來緩緩解這個(gè)個(gè)矛盾:(1)在設(shè)計(jì)計(jì)網(wǎng)頁時(shí)時(shí),應(yīng)反反復(fù)考慮慮哪些圖圖像必須須要,哪哪些圖像像可有可可無,對(duì)對(duì)于那些

32、些不必要要的圖像像,要忍忍痛割愛愛。(2)把圖像像做得盡盡量小一一些,小小圖像需需要較少少的下載載時(shí)間,這對(duì)于于網(wǎng)絡(luò)傳傳輸較慢慢的瀏覽覽者更為為重要??梢杂糜贸叽绫缺容^小的的圖像,也可以以通過減減少圖像像顏色和和品質(zhì)使使圖像文文件減小小。(3)為了能能在關(guān)掉掉圖形開開關(guān)的瀏瀏覽器中中看到較較完整的的信息,要為圖圖像添加加替代文文本,這這樣能使使更多的的瀏覽者者看到完完成的網(wǎng)網(wǎng)頁。(4)盡可能能地重復(fù)復(fù)使用圖圖像文件件,這樣樣可以有有效地縮縮減網(wǎng)頁頁的大小小。表格的作作用表格是一一種常用用的組織織和處理理數(shù)據(jù)的的形式,用表格格來組織織網(wǎng)頁內(nèi)內(nèi)容,用用行和列列來顯示示信息,可以設(shè)設(shè)計(jì)出布布局合理理

33、、結(jié)構(gòu)構(gòu)協(xié)調(diào)、美觀勻勻稱、簡簡單明了了的頁面面。在網(wǎng)網(wǎng)頁中表表格的主主要作用用是在頁頁面中顯顯示表格格數(shù)據(jù)和和利用表表格進(jìn)行行布局。在頁面中顯顯示表格格數(shù)據(jù)可可以在網(wǎng)網(wǎng)頁中直直接清晰晰的反應(yīng)應(yīng)表格數(shù)數(shù)據(jù),特特別是有有大量數(shù)數(shù)據(jù)文字字時(shí),比比如新聞聞列表、商品列列表、通通訊錄等等。在網(wǎng)頁制制作中中,表格格的作用用可大了了,利用用表格布布局是網(wǎng)網(wǎng)頁布局局的方法法之一,通過設(shè)設(shè)置表格格的高度度、寬度度和比例例等對(duì)頁頁面元素素進(jìn)行控控制,從從而對(duì)網(wǎng)網(wǎng)頁元素素進(jìn)行精精確布局局定位。小貼士創(chuàng)建表格格將光標(biāo)定定位在需需要插入入表格位位置,打打開“插插入”菜菜單,選選擇“表表格”命命令,或或按快捷捷鍵+T,將

34、彈出出“表格格”對(duì)話框。行數(shù):表表格具有有行的數(shù)數(shù)目。列:表格格具有列列的數(shù)目目。表格寬度度:表格格的寬度度,單位位有“像像素”和和“百分分比”。邊框粗細(xì)細(xì):表格格邊框的的寬度,單位為為像素。單元格邊邊距:單單元格邊邊框和單單元格內(nèi)內(nèi)容之間間的距離離,單位位為像素素。單元格間間距:相相鄰的單單元格之之間的距距離,單單位為像像素。選取單元元格、行行與列、表格1選擇單單元格方法一:單擊擊單元格格內(nèi)部,在標(biāo)簽簽選擇器器中選擇擇標(biāo)簽。方法二:按住住Ctrl鍵同時(shí)選選中單元元格選取單元元格、行行與列、表格2選擇行行或列方法一:拖放鼠鼠標(biāo),選選擇一行行的所有有單元格格或一列列的所有有單元格格。方法二:當(dāng)鼠標(biāo)標(biāo)在行的的左邊緣緣或者列列的上邊邊緣變成成箭頭時(shí)時(shí)候,單單擊鼠標(biāo)標(biāo)選擇行行或者列列。選取單元元格、行行與列、表格3選擇表表格方法一:單擊擊鼠標(biāo)的的左上角角,選中中整個(gè)單元格。方法二:單擊擊某個(gè)單單元格,在標(biāo)簽簽選擇器器中選擇擇標(biāo)簽設(shè)置表格格和單元元格屬性性1設(shè)置表表格屬性性選中要設(shè)置的的表格,屬性面面板中將將顯示該該表格的的屬性。行和列:行行的數(shù)目目和列的的數(shù)目。寬:表格的的寬度,單位默默認(rèn)為像像素,也也可設(shè)置置為百分分比。填充:內(nèi)容與與邊框之之間的距距離,單單位為像像素。間距:相鄰的的單元格格之間的的距離,單位為為像素。對(duì)齊:表格的的對(duì)齊方方

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論