![《網(wǎng)頁(yè)制作與設(shè)計(jì)》立體化電子課件 第4章-Dreamwear網(wǎng)頁(yè)設(shè)計(jì)_第1頁(yè)](http://file4.renrendoc.com/view/6da22381257f4cbcce419816c2c2ae84/6da22381257f4cbcce419816c2c2ae841.gif)
![《網(wǎng)頁(yè)制作與設(shè)計(jì)》立體化電子課件 第4章-Dreamwear網(wǎng)頁(yè)設(shè)計(jì)_第2頁(yè)](http://file4.renrendoc.com/view/6da22381257f4cbcce419816c2c2ae84/6da22381257f4cbcce419816c2c2ae842.gif)
![《網(wǎng)頁(yè)制作與設(shè)計(jì)》立體化電子課件 第4章-Dreamwear網(wǎng)頁(yè)設(shè)計(jì)_第3頁(yè)](http://file4.renrendoc.com/view/6da22381257f4cbcce419816c2c2ae84/6da22381257f4cbcce419816c2c2ae843.gif)
![《網(wǎng)頁(yè)制作與設(shè)計(jì)》立體化電子課件 第4章-Dreamwear網(wǎng)頁(yè)設(shè)計(jì)_第4頁(yè)](http://file4.renrendoc.com/view/6da22381257f4cbcce419816c2c2ae84/6da22381257f4cbcce419816c2c2ae844.gif)
![《網(wǎng)頁(yè)制作與設(shè)計(jì)》立體化電子課件 第4章-Dreamwear網(wǎng)頁(yè)設(shè)計(jì)_第5頁(yè)](http://file4.renrendoc.com/view/6da22381257f4cbcce419816c2c2ae84/6da22381257f4cbcce419816c2c2ae845.gif)
版權(quán)說(shuō)明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第4章Dreamweaver操作基礎(chǔ)行為的應(yīng)用網(wǎng)頁(yè)布局技術(shù)網(wǎng)頁(yè)文檔基本操作表單操作CSS樣式表的應(yīng)用總結(jié)與習(xí)題Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)Dreamweaver是Macromedia公司出品的一款集網(wǎng)頁(yè)制作和網(wǎng)站管理于一體的“所見(jiàn)即所得”的網(wǎng)頁(yè)制作軟件。無(wú)論用戶愿意享受手工編寫HTML代碼時(shí)的駕馭感還是偏愛(ài)在可視化編輯環(huán)境中工作,Dreamweaver都提供了有用的工具,使用戶擁有更加完美的Web創(chuàng)作體驗(yàn)Dreamweaver操作基礎(chǔ)
4.1作為網(wǎng)頁(yè)制作軟件,Dreamweaver提供了功能強(qiáng)大的可視化設(shè)計(jì)工具和精簡(jiǎn)而高效的代碼編輯環(huán)境,使開(kāi)發(fā)人員能夠快捷地創(chuàng)建規(guī)范的Web應(yīng)用程序,構(gòu)建功能強(qiáng)大的網(wǎng)絡(luò)服務(wù)體系Dreamweaver的主要特點(diǎn)及功能如下頁(yè)所示Dreamweaver操作基礎(chǔ)
4.1特點(diǎn)1是集網(wǎng)頁(yè)制作和網(wǎng)站管理于一體的“所見(jiàn)即所得”的網(wǎng)頁(yè)制作軟件使用內(nèi)置的圖形編輯程序節(jié)省開(kāi)發(fā)時(shí)間將設(shè)計(jì)和代碼編輯器合二為一;設(shè)計(jì)者可書寫HTML代碼或以可視化的形式設(shè)計(jì)Web頁(yè)提供操作方便、功能強(qiáng)大的用戶界面特點(diǎn)4特點(diǎn)2特點(diǎn)3Dreamweaver操作基礎(chǔ)
4.1特點(diǎn)5提供完美的CSS支持,可利用豐富的CSS樣式表構(gòu)建復(fù)雜、規(guī)范的站點(diǎn)提供完整的集成開(kāi)發(fā)環(huán)境,可以開(kāi)發(fā)多種站點(diǎn),還可定制和擴(kuò)展開(kāi)發(fā)環(huán)境可與一些常見(jiàn)格式的外部文檔或代碼實(shí)現(xiàn)無(wú)縫結(jié)合提供了較多的行為,用戶不用書寫代碼即可設(shè)計(jì)出功能豐富的網(wǎng)頁(yè)特點(diǎn)8特點(diǎn)6特點(diǎn)7Dreamweaver操作基礎(chǔ)
4.1特點(diǎn)9通過(guò)布局視圖技術(shù)將表格和層兩種排版工具結(jié)合起來(lái),從而提供精確而靈活的頁(yè)面排版功能強(qiáng)大的網(wǎng)站管理功能提供了跨瀏覽器兼容性檢查功能,以檢驗(yàn)頁(yè)面中是否包含目標(biāo)瀏覽器不支持的標(biāo)記或CSS結(jié)構(gòu)易學(xué)、易用,只要掌握了其基本操作方法,即使初學(xué)者也能制作出具有專業(yè)水平的網(wǎng)頁(yè)特點(diǎn)12特點(diǎn)10特點(diǎn)11Dreamweaver操作基礎(chǔ)
4.1初次啟動(dòng)Dreamweaver后,會(huì)彈出【工作區(qū)設(shè)置】對(duì)話框,對(duì)話框中提供了“設(shè)計(jì)器”和“編碼器”兩種布局風(fēng)格,使用者可以根據(jù)自己的操作習(xí)慣,從中選擇一種工作區(qū)布局當(dāng)選擇一種工作區(qū)布局后,如果想切換成另一種工作區(qū)布局,可以選擇【窗口|工作區(qū)布局】,然后在彈出的子菜單中選擇工作區(qū)布局Dreamweaver操作基礎(chǔ)
4.1Dreamweaver在啟動(dòng)時(shí),默認(rèn)顯示【起始頁(yè)】對(duì)話框,用戶可以在這個(gè)對(duì)話框中創(chuàng)建文檔或打開(kāi)最近使用過(guò)的文檔,還可以通過(guò)產(chǎn)品介紹或教程了解關(guān)于Dreamweaver的更多信息。如果選中“不再顯示此對(duì)話框”選項(xiàng),則以后啟動(dòng)Dreamweaver時(shí)將不再自動(dòng)顯示起始頁(yè)Dreamweaver操作基礎(chǔ)
4.1當(dāng)新建或打開(kāi)一個(gè)Web頁(yè)后,Dreamweaver顯示出工作區(qū)窗口,窗口由主菜單、工具欄、文檔窗口、面板組、屬性面板等組成Dreamweaver的工作區(qū)窗口如下圖所示Dreamweaver操作基礎(chǔ)
4.1Dreamweaver的工作界面Dreamweaver操作基礎(chǔ)
4.1主菜單主菜單提供Dreamweaver的所有操作,各菜單項(xiàng)的功能介紹如下Dreamweaver操作基礎(chǔ)
4.1【文件】用于管理文件。包括創(chuàng)建和保存文件、導(dǎo)入與導(dǎo)出、預(yù)覽等【編輯】用于編輯操作。包括撤銷與恢復(fù)、復(fù)制與粘貼、查找與替換、參數(shù)設(shè)置與快捷鍵設(shè)置等【插入】用于插入頁(yè)面元素。如圖像、層、表格、表單、框架、特殊字符等Dreamweaver操作基礎(chǔ)
4.1【查看】用于查看對(duì)象。如代碼的查看,網(wǎng)格線、面板、工具欄的顯示/隱藏等【修改】用于對(duì)頁(yè)面元素的修改。如鏈接、表格、層位置、時(shí)間軸等【文本】用于對(duì)文本的操作。如文本格式設(shè)置、HTML/CSS樣式、段落格式化等Dreamweaver操作基礎(chǔ)
4.1【命令】匯集了所有的附加命令項(xiàng)。如錄制命令等【站點(diǎn)】用于創(chuàng)建和管理站點(diǎn)【窗口】用于打開(kāi)/關(guān)閉面板和窗口【幫助】包含Dreamweaver的聯(lián)機(jī)幫助、技術(shù)支持等Dreamweaver操作基礎(chǔ)
4.1插入工具欄插入工具欄包含用于將各種類型的對(duì)象插入到文檔中的按鈕,每個(gè)對(duì)象都對(duì)應(yīng)一段HTML代碼由于可以插入的對(duì)象很多,所以插入工具欄采取分類顯示的方法,單擊插入工具欄的“類別名”顯示區(qū)域,顯示類別列表,從中選擇一個(gè)類別后,該類別所包含的工具按鈕出現(xiàn)在工具欄中各類別所包括的按鈕列舉如下Dreamweaver操作基礎(chǔ)
4.1【常用】包括鏈接類、圖像和表格類、模板和標(biāo)簽類等常用的對(duì)象【布局】包括表格、div標(biāo)簽、層和框架等對(duì)象,還可以在此選擇視圖模式【表單】包括用于創(chuàng)建表單容器和插入表單元素的工具按鈕Dreamweaver操作基礎(chǔ)
4.1
【文本】包括定義文本格式和列表格式的各種設(shè)置按鈕【HTML】包括用于插入水平線、文件頭內(nèi)容、表格、框架和腳本的HTML按鈕【應(yīng)用程序】包含插入記錄集、重復(fù)區(qū)域等動(dòng)態(tài)元素的按鈕Dreamweaver操作基礎(chǔ)
4.1文檔窗口文檔窗口顯示當(dāng)前編輯的Web頁(yè)文檔Dreamweaver提供了文檔窗口的三種視圖三種視圖的內(nèi)容列舉如下Dreamweaver操作基礎(chǔ)
4.1代碼視圖設(shè)計(jì)視圖提供編輯HTML、JavaScript、服務(wù)器語(yǔ)言等代碼的手工編碼環(huán)境提供頁(yè)面布局和編輯的可視化設(shè)計(jì)環(huán)境;在該視圖中,用戶可以通過(guò)拖動(dòng)等操作完成網(wǎng)頁(yè)元素的添加和編輯在一個(gè)窗口中同時(shí)顯示同一文檔的“代碼”視圖和“設(shè)計(jì)”視圖。這種方式綜合了“代碼”視圖和“設(shè)計(jì)”視圖的長(zhǎng)處拆分視圖Dreamweaver操作基礎(chǔ)
4.1在制作網(wǎng)頁(yè)過(guò)程中,一般應(yīng)該在設(shè)計(jì)視圖中可視化地進(jìn)行頁(yè)面的布局設(shè)計(jì)和頁(yè)面元素的添加在代碼視圖中修改Web頁(yè)文檔對(duì)應(yīng)的HTML代碼,或編寫其它腳本代碼Dreamweaver操作基礎(chǔ)
4.1文檔窗口還包括文檔工具欄、文檔編輯區(qū)、狀態(tài)欄等組成部分在代碼視圖中,還會(huì)顯示編碼工具欄Dreamweaver操作基礎(chǔ)
4.1文檔工具欄文檔工具欄通常顯示在文檔窗口的上面,包含各種按鈕【代碼】、【拆分】、【設(shè)計(jì)】三個(gè)按鈕,用來(lái)控制文檔窗口的視圖方式Dreamweaver操作基礎(chǔ)
4.1標(biāo)題文本框標(biāo)題文本框:用于顯示和修改當(dāng)前文檔的標(biāo)題,瀏覽網(wǎng)頁(yè)時(shí),網(wǎng)頁(yè)的標(biāo)題將顯示在瀏覽器的標(biāo)題欄中Dreamweaver操作基礎(chǔ)
4.1按鈕單擊按鈕會(huì)彈出菜單,從菜單中選擇“檢查瀏覽器支持”等命令,可以檢測(cè)所編輯文檔的跨瀏覽器兼容性Dreamweaver操作基礎(chǔ)
4.1文檔編輯區(qū)文檔編輯區(qū)即用戶用來(lái)編輯和修改文檔的區(qū)域在代碼視圖中,可以輸入Web頁(yè)對(duì)應(yīng)的HTML代碼或腳本代碼在設(shè)計(jì)視圖中,可以通過(guò)拖動(dòng)等操作,實(shí)現(xiàn)網(wǎng)頁(yè)元素的可視化添加和修改Dreamweaver操作基礎(chǔ)
4.1狀態(tài)欄狀態(tài)欄在“文檔”窗口底部,提供當(dāng)前文檔的有關(guān)信息Dreamweaver操作基礎(chǔ)
4.1屬性面板屬性面板又稱屬性檢查器,一般出現(xiàn)在文檔窗口的下方。屬性面板用于顯示所選中網(wǎng)頁(yè)元素的屬性,用戶可以利用它查看和編輯屬性值。選擇不同的網(wǎng)頁(yè)元素,屬性面板所顯示的內(nèi)容也有所不同Dreamweaver操作基礎(chǔ)
4.1面板組在Dreamweaver窗口的右側(cè)是面板組,通常包含“CSS”、“應(yīng)用程序”、“標(biāo)簽檢查器”、“文件”等面板。在主菜單的【窗口】子菜單中包含了所有的面板名,通過(guò)勾選或取消勾選某個(gè)面板名,可以顯示或移去該面板Dreamweaver操作基礎(chǔ)
4.1除了前面已經(jīng)介紹的插入工具欄和文檔工具欄外,Dreamweaver還提供了樣式呈現(xiàn)、標(biāo)準(zhǔn)和編碼工具欄選擇【查看】|【工具欄】,在【工具欄】子菜單中勾選或取消某個(gè)工具欄,可以在視圖中顯示或隱藏相應(yīng)的工具欄。Dreamweaver操作基礎(chǔ)
4.1站點(diǎn)站點(diǎn)實(shí)質(zhì)上就是一個(gè)文件夾設(shè)計(jì)良好的網(wǎng)站通常是在站點(diǎn)文件夾下建立不同的子文件夾,將網(wǎng)頁(yè)文檔及其它資源分門別類地保存在相應(yīng)的文件夾中以方便管理和維護(hù)Dreamweaver操作基礎(chǔ)
4.1當(dāng)使用Dreamweaver制作一個(gè)網(wǎng)站時(shí),首先應(yīng)該建立站點(diǎn),以方便對(duì)整個(gè)網(wǎng)站的結(jié)構(gòu)進(jìn)行規(guī)劃,并利用Dreamweaver的站點(diǎn)管理功能對(duì)整個(gè)網(wǎng)站資源進(jìn)行管理Dreamweaver還有許多功能必須在建立站點(diǎn)后才能實(shí)現(xiàn)Dreamweaver操作基礎(chǔ)
4.1站點(diǎn)類型遠(yuǎn)端站點(diǎn)通常將存儲(chǔ)在Web服務(wù)器上的站點(diǎn)稱為遠(yuǎn)端站點(diǎn);建立網(wǎng)站的最終目的是要發(fā)布到互聯(lián)網(wǎng)上,因此需要在Web服務(wù)器上建立遠(yuǎn)端站點(diǎn)本地站點(diǎn)在創(chuàng)建站點(diǎn)時(shí),通常先在本地計(jì)算機(jī)上建立一個(gè)站點(diǎn),完成網(wǎng)站開(kāi)發(fā)工作,調(diào)試成功后,再上傳到Web服務(wù)器上;在本地計(jì)算機(jī)上建立的站點(diǎn)就是本地站點(diǎn)Dreamweaver操作基礎(chǔ)
4.1創(chuàng)建本地站點(diǎn)創(chuàng)建本地站點(diǎn),包括為站點(diǎn)命名,指定站點(diǎn)存儲(chǔ)位置(文件夾),確定是否使用服務(wù)器技術(shù)和是否使用遠(yuǎn)程服務(wù)器等工作創(chuàng)建立本地站點(diǎn)的步驟如下所示Dreamweaver操作基礎(chǔ)
4.1Step1Step2選擇菜單【站點(diǎn)|新建站點(diǎn)】,彈出對(duì)話框。對(duì)話框包括“基本”和“高級(jí)”兩個(gè)選項(xiàng)卡;前者為建立站點(diǎn)的向?qū)В笳邉t用來(lái)設(shè)置站點(diǎn)的各個(gè)屬性選擇“基本”選項(xiàng)卡,進(jìn)行站點(diǎn)命名操作:在“站點(diǎn)名稱”文本框中為站點(diǎn)命名進(jìn)行站點(diǎn)URL設(shè)置操作:在“HTTP地址”文本框中設(shè)定完成的站點(diǎn)上傳到Web服務(wù)器后將使用的URL,若不知道新建站點(diǎn)的URL,可以暫時(shí)不填Step3Dreamweaver操作基礎(chǔ)
4.1Step4Step5單擊【下一步】按鈕,在彈出的對(duì)話框中選擇站點(diǎn)類型:創(chuàng)建動(dòng)態(tài)網(wǎng)站,應(yīng)選擇“是,…”;創(chuàng)建靜態(tài)網(wǎng)站,應(yīng)選擇“否,…”;通常選擇“否,…”創(chuàng)建靜態(tài)網(wǎng)站;然后在彈出的服務(wù)器技術(shù)列表中選擇要使用的服務(wù)器技術(shù)類型單擊【下一步】按鈕,在彈出的對(duì)話框中設(shè)置本地站點(diǎn)文件夾Step6Dreamweaver操作基礎(chǔ)
4.1Step7Step8對(duì)于對(duì)話框上方的一組單選按鈕,使用系統(tǒng)默認(rèn)選擇即可;單擊【下一步】按鈕,在彈出的對(duì)話框中選擇連接遠(yuǎn)程服務(wù)器的方式單擊【下一步】按鈕,在彈出的對(duì)話框中單擊【完成】按鈕,完成站點(diǎn)的創(chuàng)建。站點(diǎn)創(chuàng)建成功后,可以看到文件面板中出現(xiàn)新建站點(diǎn)Step9Dreamweaver操作基礎(chǔ)
4.1在“連接方式”列表框中選擇本地站點(diǎn)與遠(yuǎn)程服務(wù)器的連接方式時(shí),選擇“無(wú)”,暫時(shí)不與遠(yuǎn)程服務(wù)器建立連接管理站點(diǎn)創(chuàng)建站點(diǎn)后,在設(shè)計(jì)過(guò)程,可以對(duì)站點(diǎn)進(jìn)行管理操作管理站點(diǎn)的步驟如下所示Dreamweaver操作基礎(chǔ)
4.1Step1Step2選擇菜單【站點(diǎn)|管理站點(diǎn)】,彈出【管理站點(diǎn)】對(duì)話框,對(duì)話框中列出了本地計(jì)算機(jī)中建立的所有可用站點(diǎn)名稱,并提供了管理站點(diǎn)的操作按鈕單擊【新建】按鈕,可以進(jìn)入新建站點(diǎn)流程;從站點(diǎn)列表中選擇一個(gè)站點(diǎn)后,單擊【編輯】按鈕,可以按定義站點(diǎn)的流程顯示站點(diǎn)各項(xiàng)設(shè)置,供用戶修改在【管理站點(diǎn)】對(duì)話框中,還可以完成站點(diǎn)的復(fù)制、刪除、導(dǎo)出、導(dǎo)入等操作Step3Dreamweaver操作基礎(chǔ)
4.1建立站點(diǎn)以后,可以通過(guò)文件面板對(duì)站點(diǎn)中的資源進(jìn)行管理文件面板中包含“文件”、“資源”、“代碼片斷”三個(gè)選項(xiàng)卡Dreamweaver操作基礎(chǔ)
4.1文件選項(xiàng)卡文件選項(xiàng)卡主要用來(lái)對(duì)站點(diǎn)的文件進(jìn)行管理,可以完成對(duì)文件和文件夾的新建、打開(kāi)、復(fù)制、粘貼、重命名等操作Dreamweaver操作基礎(chǔ)
4.1代碼片段選項(xiàng)卡Dreamweaver預(yù)定義了一些能實(shí)現(xiàn)特定功能的代碼片段,在制作網(wǎng)頁(yè)時(shí),可以利用文件面板的代碼片斷選項(xiàng)卡,直接將代碼片斷插入到網(wǎng)頁(yè)中在Dreamweave中可以創(chuàng)建并插入HTML、JavaScript、CFML、ASP、JSP等代碼片斷Dreamweaver操作基礎(chǔ)
4.112345文字處理圖像處理使用超級(jí)鏈接使用多媒體對(duì)象網(wǎng)頁(yè)文檔處理網(wǎng)頁(yè)文檔基本操作4.2網(wǎng)頁(yè)文檔的操作主要包括網(wǎng)頁(yè)文檔的創(chuàng)建與編輯,網(wǎng)頁(yè)中文字、超級(jí)鏈接、圖像、多媒體等對(duì)象的處理網(wǎng)頁(yè)文檔基本操作4.2創(chuàng)建空白文檔在Dreamweaver中可以創(chuàng)建新的空白文檔、創(chuàng)建以模板為基礎(chǔ)的文檔以及打開(kāi)并編輯已經(jīng)存在的文檔網(wǎng)頁(yè)文檔處理4.2.1創(chuàng)建空白文檔方法1從啟動(dòng)界面中的“創(chuàng)建新項(xiàng)目”組合框中選擇合適的文件類型,即可直接進(jìn)入文檔窗口進(jìn)行編輯方法3按下Ctrl+N快捷鍵,系統(tǒng)彈出新建文檔對(duì)話框方法2選擇【文件/新建】菜單命令,系統(tǒng)彈出新建文檔對(duì)話框網(wǎng)頁(yè)文檔處理4.2.1打開(kāi)現(xiàn)有文檔在Dreamweaver中可以打開(kāi)現(xiàn)有的Web頁(yè)或基于文本的文檔對(duì)于不是Dreamweaver創(chuàng)建的文檔,也可以將其打開(kāi),然后在Dreamweaver的“設(shè)計(jì)”視圖或“代碼”視圖中編輯該文檔網(wǎng)頁(yè)文檔處理4.2.1打開(kāi)現(xiàn)有文檔方法1在【文檔】窗口中打開(kāi)選擇的文檔方法3在資源管理器中打開(kāi)文檔方法2導(dǎo)入Word文檔網(wǎng)頁(yè)文檔處理4.2.1頁(yè)面屬性頁(yè)面屬性是指網(wǎng)頁(yè)的一般屬性信息,如:網(wǎng)頁(yè)標(biāo)題、網(wǎng)頁(yè)背景顏色、背景圖像、超鏈接顏色、跟蹤圖像等網(wǎng)頁(yè)文檔處理4.2.1設(shè)置網(wǎng)頁(yè)屬性3設(shè)置網(wǎng)頁(yè)外觀屬性2.設(shè)置網(wǎng)頁(yè)編碼屬性1.設(shè)置網(wǎng)頁(yè)標(biāo)題屬性4.設(shè)置網(wǎng)頁(yè)鏈接屬性5.設(shè)置網(wǎng)頁(yè)圖像屬性網(wǎng)頁(yè)文檔處理4.2.1文字處理主要包括:輸入文字、設(shè)置文字大小、設(shè)置字體、設(shè)置文本顏色、設(shè)置文本對(duì)齊方式等文字處理4.2.2輸入文字打開(kāi)Dreamweaver8.0之后,然后在需要插入文本的位置單擊鼠標(biāo)左鍵定位插入點(diǎn),然后輸入文字若要開(kāi)始新的一段,按<Enter>鍵即可,對(duì)應(yīng)的HTML標(biāo)簽是<p>若要換行顯示一段內(nèi)容,可以按<Shift+Enter>組合鍵,對(duì)應(yīng)的HTML標(biāo)簽是<br>如果輸入的文字超出一行的范圍,輸入的文本將自動(dòng)換行文字處理4.2.2輸入連續(xù)空格在Dreamweaver中一般只能輸入一個(gè)空格,若要輸入連續(xù)的空格時(shí),可以采用下列方法中的一種文字處理4.2.2輸入連續(xù)空格方法方法1執(zhí)行【編輯/首選參數(shù)】菜單命令,在打開(kāi)的【首選參數(shù)】對(duì)話框中選定“分類”欄中的“常規(guī)”選項(xiàng),并勾選右邊編輯選項(xiàng)中“允許多個(gè)連續(xù)的空格”復(fù)選框即可方法3切換到中文輸入法,設(shè)置為全角輸入狀態(tài),然后在欲連續(xù)輸入空格的位置按空格鍵方法2將光標(biāo)定位到需要輸入多個(gè)空格的位置,切換到代碼視圖,連續(xù)輸入多個(gè)“ ”,或者單擊插入工具欄文本分類中的“字符”對(duì)象,選擇“不換行空格”下拉菜單選項(xiàng)即可文字處理4.2.2編輯文字內(nèi)容2.設(shè)置文本顏色1.設(shè)置文字標(biāo)題與段落4.設(shè)置方本對(duì)齊方式3.設(shè)置文字字體及大小文字處理4.2.2水平線水平線對(duì)于組織信息很有用在頁(yè)面上,使用一條或多條水平線能夠以可視方式分隔文本和對(duì)象水平線的操作包括如下文字處理4.2.2水平線操作插入水平線將光標(biāo)移到要插入水平線的位置,執(zhí)行【HTML/插入/水平線】菜單命令,插入一條默認(rèn)寬度和粗細(xì)的水平線設(shè)置水平線顏色選中水平線,單擊屬性面板中的快速標(biāo)簽編輯器按鈕,打開(kāi)編輯標(biāo)簽窗口,鍵入設(shè)置水平線顏色的代碼修改水平線選定插入的水平線,打開(kāi)屬性面板,設(shè)置水平線的高度、寬度、對(duì)齊方式以及是否有陰影等屬性文字處理4.2.2Dreamweaver提供了一個(gè)方便的日期對(duì)象,該對(duì)象使用戶可以以喜歡的格式插入當(dāng)前日期,還可以選擇在每次保存文件時(shí)都自動(dòng)更新該日期文字處理4.2.2日期對(duì)象的操作
2.插入更新日期1.插入日期3.修改已插入日期文字處理4.2.2圖像處理操作包括插入圖像、設(shè)置圖像屬性、插入圖像占位符、插入鼠標(biāo)經(jīng)過(guò)圖像等內(nèi)容圖像處理4.2.3插入圖像方法方法1將光標(biāo)置于要插入圖像的位置,單擊【插入】工具欄的【圖像】按鈕或選擇【插入/圖像】菜單命令,打開(kāi)【選擇圖像源文件】對(duì)話框方法3當(dāng)所選圖像文件不在當(dāng)前站點(diǎn),在打開(kāi)的對(duì)話框中選擇將圖像文件復(fù)制到根文件夾;再打開(kāi)【復(fù)制文件為】對(duì)話框,定位到站點(diǎn)的目標(biāo)文件夾并單擊【保存】按鈕即可方法2在對(duì)話框中設(shè)置圖像文件名、文件類型和圖像源的URL;選取存放在站點(diǎn)中的圖像文件,然后單擊【確定】按鈕將圖片插入到指定區(qū)域圖像處理4.2.3在網(wǎng)頁(yè)中插入圖像后可以對(duì)圖像的各種相關(guān)屬性進(jìn)行設(shè)置設(shè)置圖像屬性的內(nèi)容較多,常用的操作包括以下內(nèi)容圖像處理4.2.3設(shè)置圖像屬性1.圖像名稱2.圖像尺寸大小3.圖像的源文件4.圖像的超鏈接5.對(duì)齊與邊距6.其他屬性圖像處理4.2.3圖像占位符如果還沒(méi)有準(zhǔn)備好添加到Web頁(yè)上的圖像,可以插入圖像占位符先預(yù)占一個(gè)圖像位置在Dreamweaver中插入圖像占位符的基本操作圖像處理4.2.3Step1Step2將光標(biāo)置于要插入圖像占位符的位置,在【插入】工具欄中選擇【圖像占位符】按鈕或選擇【插入/圖像對(duì)象/圖像占位符】菜單命令在打開(kāi)的【圖像占位符】對(duì)話框中對(duì)圖像的名稱、顏色、寬度、高度、替代文本等屬性進(jìn)行設(shè)置單擊【確定】按鈕,網(wǎng)頁(yè)文檔中即會(huì)出現(xiàn)圖像占位符Step3圖像處理4.2.3鼠標(biāo)經(jīng)過(guò)圖像當(dāng)訪問(wèn)者移動(dòng)鼠標(biāo)使鼠標(biāo)指針經(jīng)過(guò)圖像時(shí),圖像變?yōu)榱硪环鶊D像;而鼠標(biāo)指針離開(kāi)時(shí),圖像又恢復(fù)為原始圖像這種效果通常用于導(dǎo)航條、圖像互動(dòng)等圖像處理4.2.3鼠標(biāo)經(jīng)過(guò)圖像由兩幅圖像組成:一是首次載入時(shí)顯示的圖像即原始圖像,二是鼠標(biāo)經(jīng)過(guò)后翻轉(zhuǎn)的圖像即鼠標(biāo)經(jīng)過(guò)圖像在創(chuàng)建鼠標(biāo)經(jīng)過(guò)圖像時(shí)應(yīng)使用相同大小的兩幅圖像;如果這兩個(gè)圖像大小不同,Dreamweaver將自動(dòng)調(diào)整第二個(gè)圖像的大小以匹配第一個(gè)圖像的大小圖像處理4.2.3超級(jí)鏈接超級(jí)鏈接簡(jiǎn)稱鏈接,是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系,即在Web頁(yè)面中插入的指向其它文檔的引用超級(jí)鏈接的目標(biāo)可以是另外的網(wǎng)頁(yè),或者是一張圖片、一個(gè)文件、一個(gè)程序等超級(jí)鏈接可以將任何類型的資源轉(zhuǎn)換為超級(jí)鏈接,但最常用的類型是文本鏈接使用超級(jí)鏈接4.2.4超級(jí)鏈接的外觀多種多樣,可以是導(dǎo)航按鈕、文本、圖片,無(wú)論是哪一種格式,只要用鼠標(biāo)單擊鏈接對(duì)象,即可跳轉(zhuǎn)到指定的目標(biāo)網(wǎng)頁(yè)。當(dāng)鼠標(biāo)指向鏈接載體時(shí),鏈接載體會(huì)發(fā)生一些變化,如鼠標(biāo)指向文字載體,文字的字體、字號(hào)、顏色等會(huì)發(fā)生改變,有的帶有下畫線使用超級(jí)鏈接4.2.4根據(jù)超級(jí)鏈接指向目標(biāo)文件的不同,超級(jí)鏈接可為如下圖所示的三種形式使用超級(jí)鏈接4.2.4超級(jí)鏈接的類別1
2.錨點(diǎn)超鏈接1.頁(yè)面超鏈接3.郵件超鏈接使用超級(jí)鏈接4.2.4根據(jù)超級(jí)鏈接單擊對(duì)象的不同,超級(jí)鏈接可以分為如下圖所示的三種形式使用超級(jí)鏈接4.2.4超級(jí)鏈接的類別22.圖像超鏈接1.文字超鏈接3.圖像映射使用超級(jí)鏈接4.2.4創(chuàng)建超鏈接必須先了解鏈接與被鏈接載體的路徑在一個(gè)網(wǎng)站中,路徑通常有3種表示方式,如下圖所示使用超級(jí)鏈接4.2.4路徑的類別2.根目錄相對(duì)路徑1.絕對(duì)路徑3.文檔目錄相對(duì)路徑使用超級(jí)鏈接4.2.4圖像映射圖像映射就是指在一幅圖像中定義若干個(gè)區(qū)域(即熱點(diǎn)),每個(gè)區(qū)域中指定一個(gè)不同的超鏈接當(dāng)單擊不同區(qū)域時(shí),可以跳轉(zhuǎn)到相應(yīng)的目標(biāo)頁(yè)面使用超級(jí)鏈接4.2.4創(chuàng)建超級(jí)鏈接在Dreamweaver中,可以創(chuàng)建多種類型的超級(jí)鏈接可創(chuàng)建到文檔、圖像、多媒體文件或軟件的超級(jí)鏈接可創(chuàng)建到文檔內(nèi)任意位置的文本或圖像超級(jí)鏈接使用超級(jí)鏈接4.2.4創(chuàng)建超級(jí)鏈接鏈接類型1創(chuàng)建到其它文檔或文件的超級(jí)鏈接鏈接類型3創(chuàng)建電子郵件鏈接鏈接類型2創(chuàng)建到文檔內(nèi)的特定位置的超級(jí)鏈接使用超級(jí)鏈接4.2.4修改超級(jí)鏈接可以使用站點(diǎn)的可視化表示形式來(lái)修改鏈接,或者通過(guò)一次更改將所有鏈接更新到一個(gè)特定的文件中使用超級(jí)鏈接4.2.4修改超級(jí)鏈接修改方式1自動(dòng)更新超級(jí)鏈接修改方式3在整個(gè)站點(diǎn)范圍內(nèi)更改超級(jí)鏈接修改方式2在站點(diǎn)地圖中修改超級(jí)鏈接使用超級(jí)鏈接4.2.4Dreamweaver可以快速便捷地向Web站點(diǎn)添加多媒體對(duì)象,從而使制作出的網(wǎng)頁(yè)圖文并茂,聲色具備使用多媒體對(duì)象4.2.5Dreamweaver目前使用的音頻和視頻文件格式包括:音頻:主要為Wav、Midi、Mp3、Aif和Ra等音頻文件格式視頻:主要為RealMedia、WindowsMedia、QuickTime等視頻文件Flash、Shockwave等影片Javaapplet、ActiveX等控件格式使用多媒體對(duì)象4.2.5插入媒體對(duì)象Dreamweaver文檔中可插入FlashSWF文件或?qū)ο蟆uickTime或Shockwave影片、Javaapplet、ActiveX控件及其它音頻或視頻對(duì)象在頁(yè)面中插入媒體對(duì)象的操作過(guò)程如下所示使用多媒體對(duì)象4.2.5Step1Step2將插入點(diǎn)放在【文檔】窗口中希望插入該對(duì)象的位置在【插入】工具欄的【常用】類別中單擊【媒體】按鈕,再選擇要插入的媒體對(duì)象按鈕即可或從【插入/媒體】菜單中選擇適當(dāng)?shù)拿襟w對(duì)象,在打開(kāi)的【選擇文件】對(duì)話框中選擇要插入的媒體文件,單擊【確定】按鈕即可Step3使用多媒體對(duì)象4.2.5添加視頻可以通過(guò)不同方式和使用不同格式將視頻添加到Web頁(yè)面視頻可被用戶下載,也可對(duì)視頻進(jìn)行流式處理,以便在下載它的同時(shí)進(jìn)行播放使用多媒體對(duì)象4.2.5添加音頻可以向Web頁(yè)添加不同類型和文件格式的聲音添加聲音前,往往先考慮以下因素:添加聲音文件的大小、聲音品質(zhì)、聽(tīng)眾類型、瀏覽器的差異等向頁(yè)面添加音頻文件的操作步驟如下所示使用多媒體對(duì)象4.2.5Step1Step2在【設(shè)計(jì)】視圖中,將插入點(diǎn)放置在要嵌入文件的地方單擊【插入】工具欄的【媒體】按鈕,然后選擇【插件】圖標(biāo)或執(zhí)行【插入/媒體/插件】菜單命令在屬性檢查器中,單擊文件夾圖標(biāo)瀏覽音頻文件,并可通過(guò)【文檔】窗口中調(diào)整插件占位符的大小來(lái)確定音頻控件在瀏覽器中的大小Step3使用多媒體對(duì)象4.2.52框架在網(wǎng)頁(yè)布局中的應(yīng)用
4模板在網(wǎng)頁(yè)生成中的應(yīng)用
3層在網(wǎng)頁(yè)布局中的應(yīng)用1表格在網(wǎng)頁(yè)布局中的應(yīng)用網(wǎng)頁(yè)布局技術(shù)4.3網(wǎng)頁(yè)布局網(wǎng)頁(yè)布局是指在頁(yè)面上劃分出不同的區(qū)域,按照網(wǎng)頁(yè)設(shè)計(jì)的原則,將不同的內(nèi)容放置到不同的位置上,并通過(guò)色彩調(diào)和出不同的網(wǎng)站基調(diào),使網(wǎng)頁(yè)內(nèi)容形成一個(gè)有機(jī)的整體,充分表達(dá)網(wǎng)站主題的過(guò)程表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1表格表格是用來(lái)格式化數(shù)據(jù)的工具,是網(wǎng)頁(yè)中常用的信息展示方式,也是頁(yè)面布局主要的設(shè)計(jì)工具表格創(chuàng)建后,可以對(duì)表格進(jìn)行文字輸入、圖像插入、屬性修改、表格嵌套等操作表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1表格可以控制文本和圖形在頁(yè)面上出現(xiàn)的位置在設(shè)計(jì)頁(yè)面時(shí),往往要利用表格來(lái)定位頁(yè)面元素通過(guò)設(shè)置表格和單元格的屬性,可實(shí)現(xiàn)對(duì)頁(yè)面元素的準(zhǔn)確定位合理地利用表格來(lái)布局頁(yè)面,有利于協(xié)調(diào)頁(yè)面結(jié)構(gòu)的平衡表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1插入表格的方法:在插入面板中選擇“常用”標(biāo)簽,點(diǎn)擊按鈕,彈出【插入表格】對(duì)話框,設(shè)置相應(yīng)的參數(shù)來(lái)插入表格也可以通過(guò)選擇【插入/表格】菜單命令打開(kāi)【插入表格】對(duì)話框表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1【插入表格】對(duì)話框表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1表格元素處理2.拆分單元格1.合并單元格4.刪除行或列3.插入行或列表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1選擇表格元素2.選擇單元格1.選擇表格對(duì)象3.選擇行或列表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1單元格表格中行與列圍成的區(qū)域稱為單元格在單元格中可以插入文本、圖像等元素,也可以根據(jù)實(shí)際的需要對(duì)單元格進(jìn)行合并和拆分對(duì)單元格進(jìn)行拆分的具體的步驟如下所示表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1Step1Step2將光標(biāo)放在表格的特定行,單擊【屬性】面板中的【拆分單元格】按鈕,會(huì)彈出【拆分單元格】對(duì)話框在對(duì)話框中將【單元格拆分】后的【行】或【列】單選按鈕選中,在【行數(shù)】或【列數(shù)】文本框中輸入數(shù)值單擊【確定】按鈕,就可以把表格的特定行拆分成指定數(shù)目的單元格Step3表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1對(duì)行或列進(jìn)行添加與刪除的操作步驟如下所示表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1Step1Step2選中表格的某一行,右擊彈出快捷菜單,選擇【表格/插入行】命令,此時(shí)就會(huì)在當(dāng)前行上方插入一行選擇【行】選項(xiàng),可設(shè)置插入的行在插入點(diǎn)的上或下;選擇【列】選項(xiàng),可以設(shè)置插入的列在插入點(diǎn)的前或后Step3選中表格的某一行,右擊彈出快捷菜單,選擇【表格/插入行或列】命令,打開(kāi)【插入行或列】對(duì)話框表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1將光標(biāo)置于要?jiǎng)h除行或列的任意一個(gè)單元格中,右鍵選擇【表格/刪除行】或【表格/刪除列】命令,或者按下Delete鍵,可將該行或列刪除表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1單元格作為表格的重要的組成部分,其屬性的設(shè)置影響到表格的外觀將鼠標(biāo)放到某個(gè)單元格內(nèi),可以通過(guò)【屬性】面板對(duì)這個(gè)單元格進(jìn)行設(shè)置表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1單元格屬性設(shè)置1.水平對(duì)齊2.垂直對(duì)齊3.高度和寬度4.背景圖片5.背景顏色6.邊框顏色表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1嵌套表格嵌套表格是在當(dāng)前表格的某一單元格中插入的新表格表格不宜嵌套太多,最多三層;使用的嵌套越多,頁(yè)面的瀏覽速度越慢表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1對(duì)嵌套表格可以像對(duì)其他表格一樣進(jìn)行格式設(shè)置嵌套表格的寬度不能任意設(shè)置,應(yīng)由其所在單元格的寬度決定在表格單元格中嵌套表格的基本做法如下所示表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1Step1Step2單擊現(xiàn)有表格中要插入嵌套表格的那個(gè)單元格選擇【插入/表格】菜單命在【插入表格】對(duì)話框中對(duì)嵌套表格進(jìn)行設(shè)置Step3表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1格式化表格格式化表格將對(duì)表格進(jìn)行一定的美化格式化表格的操作步驟如下所示表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1Step1Step2選中表格,選擇【命令/格式化表格】菜單命彈出【格式化表格】對(duì)話框;在對(duì)話框的左上角有各種樣式列表,根據(jù)需要進(jìn)行樣式選擇單擊【確定】按鈕即可按所選的樣式格式化選定表格Step3表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1表格數(shù)據(jù)導(dǎo)出可以將表格數(shù)據(jù)導(dǎo)出為文本文件表格數(shù)據(jù)導(dǎo)出的操作步驟如下所示表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1Step1Step2將光標(biāo)移至表格中的任意一個(gè)單元格,選擇【文件/導(dǎo)出/表格】菜單命令,彈出【導(dǎo)出表格】對(duì)話框選擇【定界符】下拉列表中的選項(xiàng),設(shè)置表格導(dǎo)出后各單元格數(shù)據(jù)間的分隔符號(hào),如Tab鍵等;選擇【換行符】下拉列表中的選項(xiàng),設(shè)置導(dǎo)出表格適用的操作系統(tǒng)類型,通常選Windows單擊【導(dǎo)出】按鈕,彈出【表格導(dǎo)出為】對(duì)話框,在文件名后的文本框中輸入導(dǎo)出的文件名及擴(kuò)展名,單擊【保存】按鈕,完成表格數(shù)據(jù)的導(dǎo)出Step3表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1表格常用做頁(yè)面布局工具,絕大多數(shù)網(wǎng)頁(yè)都是用表格輔助布局的Dreamweaver中的表格分為表格與布局表格,表格用于精確控制各種屬性,布局表格用于頁(yè)面布局表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1布局視圖模式Dreamweaver的文檔窗口視圖默認(rèn)為標(biāo)準(zhǔn)視圖當(dāng)使用布局表格進(jìn)行頁(yè)面布局時(shí),應(yīng)先將文檔窗口切換到布局視圖模式
表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1標(biāo)準(zhǔn)視圖切換到布局視圖的方法方法1在插入工具欄中選擇“布局”選項(xiàng);單擊布局欄中的【布局】按鈕,彈出操作提示信息框,單擊【確定】按鈕,進(jìn)入布局視圖模式方法2選擇【查看/表格模式/布局表格】菜單命令切換到布局視圖模式表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1繪制布局表格在布局視圖模式下,單擊【繪制布局表格】按鈕,此時(shí)鼠標(biāo)指針變?yōu)槭中螤钤诰庉媴^(qū)域拖拽鼠標(biāo)指針,即可繪制出一個(gè)布局表格同時(shí)布局表格左上角自動(dòng)出現(xiàn)綠色的布局表格標(biāo)簽,布局表格邊線周圍出現(xiàn)控制手柄表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1繪制布局單元格在布局視圖模式下,單擊【繪制布局單元格】按鈕,在布局表格中拖拽鼠標(biāo)指針即可繪制出一個(gè)布局單元格如果要連續(xù)繪制多個(gè)布局單元格,需按下Ctrl鍵不放,然后在布局表格中多次拖動(dòng)鼠標(biāo)進(jìn)行繪制。只能在布局表格中繪制布局單元格,布局單元格不能重疊表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1繪制布局表格界面表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1操作布局表格與布局單元格為布局單元格添加內(nèi)容將光標(biāo)定位到要添加內(nèi)容的布局單元格中,直接輸入文本內(nèi)容,或者使用對(duì)象面板插入圖片、動(dòng)畫等對(duì)象
對(duì)布局表格或布局單元格調(diào)整大小選中布局表格或布局單元格,拖拽控制手柄改變其大小;或選取要調(diào)整的對(duì)象,在屬性面板中輸入寬度值和高度值,精確調(diào)整所選對(duì)象的大小移動(dòng)布局表格或布局單元格單擊布局表格頂部的布局表格標(biāo)簽或單元格的邊線,將其選中;使用鍵盤上的方向鍵,或者拖動(dòng)鼠標(biāo)指針,即可將所選移動(dòng)到指定位置
表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1框架框架可以將瀏覽器窗口劃分為若干個(gè)獨(dú)立的區(qū)域,每個(gè)區(qū)域分別顯示不同的網(wǎng)頁(yè)文檔??蚣苤饕蚣芗投鄠€(gè)框架,框架集的功能是定義一組框架的布局和屬性框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2框架的組成元素框架集框架集是在一個(gè)文檔內(nèi)定義一組框架結(jié)構(gòu)的HTML網(wǎng)頁(yè)??蚣芗x了一頁(yè)顯示的框架數(shù)、框架的大小、載入框架的網(wǎng)頁(yè)源和其他可定義的屬性等框架頁(yè)單個(gè)框架頁(yè)是指在框架定義的某一區(qū)域中顯示的網(wǎng)頁(yè)文件框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2預(yù)定義框架集Dreamweaver可以自行設(shè)計(jì)框架集,也可以從預(yù)定義的庫(kù)中選擇已有的框架集后者稱為Dreamweaver系統(tǒng)的預(yù)定義框架集預(yù)定義框架集如下圖所示表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1使用【框架】按鈕插入預(yù)定義框架集框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2選擇預(yù)定義的框架集將自動(dòng)設(shè)置創(chuàng)建布局所需的所有框架集和框架,它是迅速創(chuàng)建基于框架布局的最簡(jiǎn)單的方法Dreamweaver中創(chuàng)建預(yù)定義框架集常用的方法如下所示框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2方法1在“插入”欄的“布局”選項(xiàng)卡中,單擊【框架】按鈕,從預(yù)定義的框架集類型列表中選擇所需的選項(xiàng)單擊【文件/新建】命令,彈出【新建文檔】對(duì)話框;從類別列表中選擇“框架集”,從框架集列表中選擇所需的框架集類型,并單擊【創(chuàng)建】按鈕選擇【插入/HTML/框架】菜單命令,從彈出的預(yù)定義框架集類型列表中選擇所需的選項(xiàng)方法2方法3框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2保存框架網(wǎng)頁(yè)當(dāng)編輯完框架和框架文件后,必須對(duì)框架及框架文件進(jìn)行保存在Dreamweaver中保存框架及框架文件,如果僅像保存普通文件一樣保存框架,只會(huì)保存鼠標(biāo)所定位的框架內(nèi)容,其余的框架內(nèi)容將丟失,因此需要選擇適當(dāng)?shù)谋4娣椒蚣茉诰W(wǎng)頁(yè)布局中的應(yīng)用4.3.2Dreamweaver中對(duì)框架及框架文件進(jìn)行保存的步驟如下所示框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2Step1Step2選擇菜單命令【文件/保存全部】,整個(gè)框架邊框?qū)⒊霈F(xiàn)陰影框,同時(shí)彈出【另存為】對(duì)話框,要求輸入框架集的文件名單擊【保存】按鈕,出現(xiàn)第二個(gè)【另存為】對(duì)話框,將有一個(gè)框架內(nèi)側(cè)出現(xiàn)陰影,要求輸入該框架的文件名單擊【保存】按鈕,依次對(duì)其他框架輸入文件名,直到所有的框架全部命名并保存完畢Step3框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2設(shè)置框架屬性使用框架屬性面板可以設(shè)置框架的屬性在文檔窗口中按住Alt鍵,然后用鼠標(biāo)單擊一個(gè)框架,即可選中該框架選中【窗口/屬性】菜單命令,打開(kāi)框架屬性面板,如下圖所示表格在網(wǎng)頁(yè)布局中的應(yīng)用4.3.1【框架屬性】面板框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2框架屬性面板中各個(gè)屬性選項(xiàng)如下所示框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2屬性面板屬性1.框架名稱2.源文件3.不能調(diào)整大小4.邊框5.邊框顏色6.邊界寬度與高度框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2設(shè)置框架集屬性要顯示框架集的屬性面板,首先單擊框架的邊框,選中框架集,此時(shí)屬性面板中將顯示框架集的各種屬性框架集屬性面板中主要的屬性選項(xiàng)如下所示框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2屬性集面板屬性1.邊框選項(xiàng)2.邊框?qū)挾冗x項(xiàng)3.邊框顏色選項(xiàng)4.行選項(xiàng)5.列選項(xiàng)6.單位選項(xiàng)框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2框架元素的選擇選擇框架集將鼠標(biāo)指針移動(dòng)到整個(gè)邊框位置的同時(shí),按住Alt鍵,當(dāng)鼠標(biāo)指針變成水平或者垂直雙向箭頭時(shí),單擊邊框即可選中整個(gè)框架集選擇單個(gè)框架選擇【窗口/框架】菜單命令,打開(kāi)【框架】面板,在框架面板中單擊需要選擇的框架,該框架的邊界被虛線包圍即表明被選中框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2超鏈接目標(biāo)框架超鏈接目標(biāo)框架是指當(dāng)單擊超鏈接時(shí),超鏈接引用的目標(biāo)網(wǎng)頁(yè)在哪個(gè)框架中顯示設(shè)置超鏈接目標(biāo)框架的步驟如下框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2Step1Step2按下Alt鍵,單擊某框架內(nèi)部,選中該框架;在屬性面板的“框架名稱”文本框中輸入該框架的名稱,可以使用默認(rèn)名稱選擇文本或其他對(duì)象,在屬性面板的“鏈接”文本框中輸入鏈接的URL,或通過(guò)該框右側(cè)的文件夾按鈕,選擇要鏈接的URL單擊屬性面板的“目標(biāo)”列表框,從列表中選擇目標(biāo)框架對(duì)象Step3框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2屬性面板的“目標(biāo)”列表框中各個(gè)目標(biāo)框架對(duì)象的功能含義如下圖所示框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2_blank_parent_self_top在新的瀏覽器窗口中打開(kāi)鏈接的文檔,同時(shí)保持當(dāng)前窗口不變?cè)陲@示鏈接框架的父框架集中打開(kāi)鏈接的文檔,同時(shí)替換整個(gè)框架集在當(dāng)前框架中打開(kāi)鏈接,同時(shí)替換該框架的內(nèi)容在當(dāng)前瀏覽器的窗口中打開(kāi)該鏈接的文檔,同時(shí)替換掉整個(gè)框架集框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2mainFrameleftFrame在框架集的主框架中打開(kāi)鏈接的文檔,同時(shí)替換掉主框架中原來(lái)所顯示的文檔在框架集的左框架中打開(kāi)鏈接的文檔,同時(shí)替換掉左框架中原來(lái)顯示的內(nèi)容在框架集的上框架中打開(kāi)鏈接的文檔,同時(shí)替換掉上框架中原來(lái)顯示的文檔topFrame框架在網(wǎng)頁(yè)布局中的應(yīng)用4.3.2層層是一種HI‘ML頁(yè)面元素,也是一種定位頁(yè)面元素的手段層中可以包含文本、圖像、動(dòng)畫、視頻等任何能放置到HTML文檔中的元素使用層,網(wǎng)頁(yè)上的各種元素可以定位在網(wǎng)頁(yè)的任意位置,并能以任意方式重疊層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3Dreamweaver可以方便地在頁(yè)面上創(chuàng)建層并精確地定位層,還可以創(chuàng)建嵌套的層。一個(gè)網(wǎng)頁(yè)中可以含有多個(gè)層,層的可見(jiàn)性可以任意控制,各個(gè)層之間可以重疊,可以定義層之間的層次關(guān)系層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3插入層在文檔窗口的“設(shè)計(jì)視圖”中可以直接繪制一個(gè)或多個(gè)層插入層的方法有2種,一種是通過(guò)菜單創(chuàng)建,一種是通過(guò)插入面板創(chuàng)建層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3插入層的方法使用菜單命令將插入點(diǎn)放置到需插入層的編輯窗口中,選擇【插入/布局對(duì)象/層】菜單命令,將自動(dòng)在光標(biāo)處插入一個(gè)層使用插入面板在“插入欄”的“布局”選項(xiàng)卡中單擊【繪制層】按鈕,拖動(dòng)鼠標(biāo)即可繪制一個(gè)層;按下Ctrl鍵并拖動(dòng)鼠標(biāo)可繪制多個(gè)層
層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3嵌套層在圖層中可以放置網(wǎng)頁(yè)中的任何元素,因此在層中也可以包含其他層;這種相互包含的層間的關(guān)系稱為嵌套層嵌套的層成為父層,被嵌套的層成為子層在“層”浮動(dòng)面板中可以清晰查看層與層之間的嵌套關(guān)系層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3層的基本操作選擇層在文檔窗口中單擊層邊線即可選擇層。按下Shift鍵并單擊其他層,可選取多個(gè)層移動(dòng)層選擇層后,移光標(biāo)到層的邊框上,光標(biāo)將變成十字箭頭形狀;按下鼠標(biāo)左鍵拖拽層,即可將其移到任意位置縮放層可以縮放層的大小方法:選中層后拖拽層四周的控制手柄,即可改變層的大小層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3層的基本操作設(shè)置層屬性單擊選中目標(biāo)層,屬性面板中能夠設(shè)置層的各類參數(shù)
刪除層在“層”面板或編輯窗口中選擇要?jiǎng)h除的層,按Delete鍵或選擇【編輯/清除】菜單命令,即可刪除該層設(shè)置層選擇【編輯/首選參數(shù)】菜單命令,打開(kāi)首選參數(shù)對(duì)話框,選中“層”選項(xiàng),指定新建層的默認(rèn)設(shè)置
層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3層的屬性面板
層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3層屬性面板各屬性1.層編號(hào)列表框2.寬和高數(shù)值3.Z軸數(shù)值4.可見(jiàn)性列表框5.背景圖像6.背景顏色層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3【轉(zhuǎn)換層為表格】對(duì)話框?qū)釉诰W(wǎng)頁(yè)布局中的應(yīng)用4.3.3層轉(zhuǎn)換為表格使用【轉(zhuǎn)換層為表格】對(duì)話框能夠設(shè)置轉(zhuǎn)換參數(shù)層轉(zhuǎn)換為表格的方法如下所示層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3Step1Step2在頁(yè)面中選中要轉(zhuǎn)化為表格的所有的層選擇【修改/轉(zhuǎn)換/層到表格】菜單命令,打開(kāi)【轉(zhuǎn)換層為表格】對(duì)話框在【轉(zhuǎn)換層為表格】對(duì)話框中設(shè)置各類設(shè)置轉(zhuǎn)換參數(shù),單擊【確定】按鈕即可開(kāi)始轉(zhuǎn)換Step3層在網(wǎng)頁(yè)布局中的應(yīng)用4.3.3層層是一種HTML頁(yè)面元素,也是一種定位頁(yè)面元素的手段層中可以包含文本、圖像、動(dòng)畫、視頻等任何能放置到HTML文檔中的元素使用層,網(wǎng)頁(yè)上的各種元素可以定位在網(wǎng)頁(yè)的任意位置,并能以任意方式重疊模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4模板模板是一種特殊類型的文檔,主要用于創(chuàng)建多個(gè)具有一致風(fēng)格的網(wǎng)頁(yè),是簡(jiǎn)化網(wǎng)站開(kāi)發(fā)和維護(hù)工作的重要工具從模板創(chuàng)建的網(wǎng)頁(yè)文檔與該模板始終保持著鏈接關(guān)系,當(dāng)修改模板時(shí),所有基于該模板的文檔也會(huì)被同步更新模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4創(chuàng)建模板模板必須保存在站點(diǎn)中,創(chuàng)建模板前先要建立站點(diǎn)創(chuàng)建模板時(shí)系統(tǒng)會(huì)在站點(diǎn)內(nèi)自動(dòng)生成一個(gè)模板文件夾Template,所有的模板文件都保存在該文件夾下,并以.dwt為文件擴(kuò)展名模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4創(chuàng)建模版的方法方法1
在文檔窗口中,使用【插入/模板對(duì)象/創(chuàng)建模板】菜單命令,在【另存為模板】對(duì)話框中輸入新建模板的名稱,單擊【保存】按鈕即可創(chuàng)建一個(gè)空白模板文件方法3
由現(xiàn)有文檔保存為擴(kuò)展名為.dwt的模板
方法2在“插入欄”的“常用”選項(xiàng)卡中單擊【模板】按鈕,從命令選項(xiàng)列表中選擇“創(chuàng)建模板”選項(xiàng),即可創(chuàng)建一個(gè)空白模板文件模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4方法3是應(yīng)用已有的頁(yè)面另存為模板,這是最常用的創(chuàng)建模板的方法,具體的步驟如下所示模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4Step1Step2打開(kāi)一個(gè)已完成的網(wǎng)頁(yè);刪除頁(yè)面中與其他頁(yè)面有變化的區(qū)域,留下相同的區(qū)域選擇【文件】另存為模板】菜單命令,彈出【另存為模板】對(duì)話框;選擇模板保存的站點(diǎn)與要生成的模板文件名單擊【保存】按鈕,在站點(diǎn)文件下會(huì)自動(dòng)產(chǎn)生一個(gè)新的文件夾,模板保存到該文件夾下Step3模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4可編輯區(qū)域定義打開(kāi)創(chuàng)建的模板文件,選中作為可編輯區(qū)域的內(nèi)容范圍,用以下兩種方法能夠設(shè)置可編輯區(qū)域
模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4設(shè)置可編輯區(qū)域的方法方法1在插入工具欄中單擊【模板】按鈕,選擇“可編輯區(qū)域”選項(xiàng),打開(kāi)【新建可編輯區(qū)域】對(duì)話框;輸入可編輯區(qū)域的名稱,單擊【確定】按鈕即可
方法2選擇【插入/模板對(duì)象/可編輯區(qū)域】菜單命令,打開(kāi)【新建可編輯區(qū)域】對(duì)話框;用同樣的方法可在文檔的不同位置創(chuàng)建多個(gè)可編輯區(qū)域模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4可編輯區(qū)域刪除如果想不再使用或更改某個(gè)可編輯區(qū)域,可刪除該可編輯區(qū)域刪除的方法為:選取模板中需要取消的可編輯區(qū)域標(biāo)記,然后選擇【修改/模板/刪除模板標(biāo)記】菜單命令,即可刪除選中的可編輯區(qū)域模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4應(yīng)用模板應(yīng)用模板創(chuàng)建的網(wǎng)頁(yè)文檔與模板之間自動(dòng)建立起鏈接關(guān)系當(dāng)修改模板后,系統(tǒng)自動(dòng)更新與模板關(guān)聯(lián)的文檔模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4Step1Step2在頁(yè)面中選中要轉(zhuǎn)化為表格的所有的層打開(kāi)資源面板,單擊【模板】按鈕,打開(kāi)模板列表;右擊要應(yīng)用的模板,選擇【從模板新建】快捷菜單命令,即可新建基于選定模板的網(wǎng)頁(yè)文檔,并自動(dòng)在文檔窗口中打開(kāi)該文檔打開(kāi)要應(yīng)用模板的文檔;選擇【窗口/資源】菜單命令,打開(kāi)“資源”面板;單擊面板左側(cè)的【模板】按鈕,打開(kāi)模板列表;在列表中選中要應(yīng)用的模板,單擊【應(yīng)用】按鈕即可Step3模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4模板分離如果不想在當(dāng)前文檔中附有模板格式,或不希望文檔與模板保持關(guān)聯(lián),可以選擇【修改/模板/從模板中分離】菜單命令,將文檔與模板分離開(kāi)來(lái)分離后的文檔成為普通網(wǎng)頁(yè)文檔,它的任意區(qū)域都可進(jìn)行編輯模板在網(wǎng)頁(yè)布局中的應(yīng)用4.3.4行為是Dreamweaver中一個(gè)非常有特色的功能,它的使用可以使用戶不需要手工編寫代碼,就可以設(shè)計(jì)出具有相當(dāng)?shù)慕换スδ芎蛣?dòng)態(tài)效果的頁(yè)面行為的應(yīng)用4.4行為行為是指在網(wǎng)頁(yè)中運(yùn)行的一系列動(dòng)作,行為將JavaScript代碼放在文檔中以允許訪問(wèn)者與Web頁(yè)進(jìn)行交互,通過(guò)用戶的操作引起某個(gè)任務(wù)的執(zhí)行。行為的實(shí)質(zhì)是內(nèi)置在Dreamweaver中的JavaScript函數(shù)庫(kù)行為能實(shí)現(xiàn)用戶與網(wǎng)頁(yè)間的交互,通過(guò)某個(gè)動(dòng)作來(lái)觸發(fā)某項(xiàng)事件行為的應(yīng)用4.4事件事件是由瀏覽器為每個(gè)頁(yè)面元素定義的,通常瀏覽器都會(huì)提供一組事件事件總是與動(dòng)作相關(guān)聯(lián)。當(dāng)訪問(wèn)者與網(wǎng)頁(yè)進(jìn)行交互時(shí),瀏覽器生成事件并非所有的事件都是交互的行為的應(yīng)用4.4行為基本操作1.添加行為2.修改行為3.刪除行為4.選擇事件5.調(diào)整順序6.獲取更多的行為行為的應(yīng)用4.4常見(jiàn)行為常見(jiàn)行為可以通過(guò)在行為面板中單擊加號(hào)按鈕打開(kāi);主要行為包括打開(kāi)瀏覽器窗口、交換圖像、拖動(dòng)層、顯示彈出式菜單、彈出信息、檢查表單、控制Flash、播放聲音、轉(zhuǎn)到URL等行為的應(yīng)用4.4標(biāo)準(zhǔn)行為事件不同的瀏覽器支持的事件類型是不同的,瀏覽器版本越高支持的事件類型越多,所以設(shè)計(jì)帶有行為的網(wǎng)頁(yè)之前,要充分考慮到瀏覽者的瀏覽器版本和類型不同的瀏覽器都支持的通用事件稱為標(biāo)準(zhǔn)行為事件行為的應(yīng)用4.4根據(jù)用途,Dreamweaver包括以下常用的事件種類窗口事件鼠標(biāo)事件鍵盤事件表單事件其他事件行為的應(yīng)用4.4窗口事件窗口事件與窗口的行為相關(guān)常見(jiàn)的窗口事件列舉如下所示行為的應(yīng)用4.4事件1事件2OnAbort在瀏覽器中停止了加載網(wǎng)頁(yè)文檔的操作時(shí)發(fā)生的事件OnMove移動(dòng)窗口或者幀時(shí)發(fā)生的事件Onload選定的對(duì)象出現(xiàn)在瀏覽器上時(shí)發(fā)生的事件事件3行為的應(yīng)用4.4OnResize訪問(wèn)者改變窗口大小時(shí)發(fā)生的事件事件4事件5OnUnload訪問(wèn)者退出網(wǎng)頁(yè)文檔時(shí)發(fā)生的事件行為的應(yīng)用4.4鍵盤事件鍵盤事件與鼠標(biāo)的各種行為相關(guān)常見(jiàn)的鍵盤事件列舉如下所示行為的應(yīng)用4.4事件1事件2onKeyDown:按下鍵盤上某個(gè)鍵,觸發(fā)該事件onKeyPress:按下鍵盤上某個(gè)鍵后又釋放掉該鍵,觸發(fā)該事件onKeyUp:釋放被按下的鍵時(shí),觸發(fā)該事件事件3行為的應(yīng)用4.4鼠標(biāo)事件鼠標(biāo)事件與鼠標(biāo)的各種行為相關(guān)常見(jiàn)的鼠標(biāo)事件列舉如下所示行為的應(yīng)用4.4事件1onClick:鼠標(biāo)單擊頁(yè)面元素時(shí)觸發(fā)onDblClick:鼠標(biāo)雙擊頁(yè)面元素時(shí)觸發(fā)onMouseDown:按下鼠標(biāo)左鍵觸發(fā)該事件onMouseMove:鼠標(biāo)指針在特定頁(yè)面元素上移動(dòng)時(shí),觸發(fā)該事件事件4事件2事件3行為的應(yīng)用4.4事件5事件6onMouseOut:鼠標(biāo)指針移出了特定頁(yè)面元素的范圍時(shí),觸發(fā)該事件onMouseOver:鼠標(biāo)指針第一次移到特定頁(yè)面元素范圍內(nèi)時(shí),觸發(fā)該事件onMouseUp:把按下的鼠標(biāo)左鍵釋放時(shí)觸發(fā)該事件事件7行為的應(yīng)用4.4表單事件表單事件與表單的各種行為相關(guān)常見(jiàn)的表單事件列舉如下所示行為的應(yīng)用4.4事件1事件2OnAfterUpdate更新表單文檔的內(nèi)容時(shí)發(fā)生的事件OnBeforeUpdate改變表單文檔的項(xiàng)目時(shí)發(fā)生的事件OnChange訪問(wèn)者修改表單文件的初始值時(shí)發(fā)生的事件事件3行為的應(yīng)用4.4事件4事件5OnReset將表單文件重設(shè)置為初始值時(shí)發(fā)生的事件OnSubnit訪問(wèn)者傳送表單文檔時(shí)發(fā)生的事件OnSelect訪問(wèn)者選定文件字段中的內(nèi)容時(shí)發(fā)生的事件事件6行為的應(yīng)用4.4其他事件其他事件是指除以上分類事件之外的那些事件常見(jiàn)的其他事件列舉如下所示行為的應(yīng)用4.4事件1OnError在加載文檔的過(guò)程中,發(fā)生錯(cuò)誤時(shí)發(fā)生的事件OnFilterChange運(yùn)用于選定元素的字段發(fā)生變化時(shí)發(fā)生的事件OnfinishMarquee用功能來(lái)顯示的內(nèi)容結(jié)束時(shí)發(fā)生的事件OnStartMarquee開(kāi)始應(yīng)用功能時(shí)發(fā)生的事件事件4事件2事件3行為的應(yīng)用4.4事件5onAfterPrint:打印結(jié)束時(shí)觸發(fā)該事件onBeforePrint:打印開(kāi)始前觸發(fā)該事件onFocus:當(dāng)指定元素通過(guò)用戶的交互行為獲得焦點(diǎn)時(shí),觸發(fā)該事件onBlur:當(dāng)指定元素停止從用戶的交互行為上獲得焦點(diǎn)時(shí),觸發(fā)該事件事件8事件6事件7行為的應(yīng)用4.4表單表單是一個(gè)容器,可以存放各種表單元素,如按鈕、文本域等。表單是網(wǎng)站管理者和瀏覽者之間交流的平臺(tái)。通過(guò)表單,可以把用戶輸入的信息提交給服務(wù)器表單的定義是和動(dòng)態(tài)網(wǎng)頁(yè)相關(guān)的,用表單實(shí)現(xiàn)的動(dòng)態(tài)網(wǎng)頁(yè)必須具備以下兩個(gè)條件:具有表單對(duì)象的頁(yè)面和表單后的腳本程序表單操作4.5表單頁(yè)面在瀏覽網(wǎng)頁(yè)時(shí)常常會(huì)看到用來(lái)收集信息的頁(yè)面,頁(yè)面中包含一些按鈕、文本框和列表等,這就是表單頁(yè)面表單操作4.5表單對(duì)象表單中的元素很多,統(tǒng)稱為表單對(duì)象。這些對(duì)象分別用于實(shí)現(xiàn)不同的功能插入表單對(duì)象的操作步驟如下所示表單操作4.5Step1Step2把鼠標(biāo)定位在文檔區(qū)中要插入表單對(duì)象的位置選擇【插入/表單】菜單命令,打開(kāi)表單對(duì)象子菜單,選擇要插入的表單對(duì)象;或者把“插入”面板切換到“表單”項(xiàng)并選擇需要的表單對(duì)象在彈出的對(duì)話框中進(jìn)行相應(yīng)的設(shè)置,完成表單對(duì)象的插入Step3表單操作4.5定義表單使用【表單】面板中的相應(yīng)按鈕能夠定義表單或使用【插入】菜單下的【表單】子菜單中的命令也能夠定義表單其中所定義表單的功能如下所示表單操作4.5表單添加所有其他表單對(duì)象的基本容器添加用來(lái)輸入文本的單行文本框添加用來(lái)輸入文本的多行文本框添加一個(gè)用來(lái)存儲(chǔ)用戶數(shù)據(jù)的域,該區(qū)域用戶不可見(jiàn)隱藏域文本字段文本區(qū)域表單操作4.5復(fù)選框添加用于多項(xiàng)選擇的復(fù)選框添加用于在網(wǎng)頁(yè)中多個(gè)項(xiàng)之間進(jìn)行單項(xiàng)選擇的單選按鈕一次添加多個(gè)單選按鈕添加以列表或菜單形式出現(xiàn)的選項(xiàng)列表/菜單單選按鈕單選按鈕組表單操作4.5跳轉(zhuǎn)菜單添加一個(gè)用于跳轉(zhuǎn)到其他文件的菜單列表添加空白文本域和瀏覽按鈕,作用是使用戶瀏覽本地磁盤上的文件,并上傳到服務(wù)器添加一個(gè)用于替換提交按鈕的圖像添加文本按鈕,點(diǎn)擊觸發(fā)服務(wù)器端腳本處理程序按鈕文件域圖像域表單操作4.5模板表單是存放其他表單對(duì)象的容器,用來(lái)限制其他表單對(duì)象的插入范圍表單是存放其他表單對(duì)象的容器,其它表單對(duì)象一般應(yīng)該插入到表單中制作表單網(wǎng)頁(yè)的大致步驟如下所示表單操作4.5Step1Step2在頁(yè)面中插入表單在表單中插入其他表單對(duì)象使用表格等排版工具對(duì)所有對(duì)象進(jìn)行調(diào)整Step3表單操作4.5表單的插入和表單的屬性設(shè)置是表單定義的兩個(gè)重要步驟插入表單的步驟如下所示表單操作4.5把鼠標(biāo)定位在文檔區(qū)中需要插入表單的位置使用【插入/表單/表單】菜單命令或點(diǎn)擊【表單】按鈕,插入后的表單在文檔中以虛線顯示表單操作4.5文檔插入表單后,切換到代碼視圖,可看到表單的源代碼如下:<formid="form1"name="form1"method="post"action=""></form>表單操作4.5標(biāo)簽<form>和</form>之間為存放表單內(nèi)容的位置只能在<form>和</form>標(biāo)簽之間插入所有表單對(duì)象表單操作4.5插入表單后,需要進(jìn)行表單屬性的設(shè)置設(shè)置表單屬性時(shí),需要選中表單或把插入點(diǎn)放到表單內(nèi)部,打開(kāi)屬性面板,對(duì)屬性面板的各個(gè)選項(xiàng)進(jìn)行設(shè)定屬性面板的主要選項(xiàng)列舉如下表單操作4.5表單名稱動(dòng)作為表單命名以識(shí)別表單在文本框中輸入或者瀏覽處理該表單的動(dòng)態(tài)頁(yè)或腳本程序,用于處理表單提交的數(shù)據(jù)設(shè)置處理該表單的動(dòng)態(tài)頁(yè)或腳本程序的打開(kāi)方式目標(biāo)表單操作4.5設(shè)置表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法,可用默認(rèn)、POST及GET3個(gè)選項(xiàng)方法MIME類型通常和POST方法配合使用,用于指定對(duì)提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用MIME編輯類型表單操作4.5表單CSS(CascadingStyleSheets),譯為層疊樣式表,是一系列格式設(shè)置規(guī)則,用來(lái)控制Web頁(yè)面內(nèi)容的顯示方式,是控制一個(gè)文檔中某一文本區(qū)域外觀的一組格式屬性使用CSS設(shè)置頁(yè)面格式時(shí),可將內(nèi)容與表現(xiàn)形式分開(kāi)CSS樣式表的應(yīng)用4.6CSS可以一次性對(duì)若干個(gè)文檔所有的樣式進(jìn)行控制,同HTML樣式相比,使用CSS樣式表的好處在于它可以同時(shí)連接多個(gè)文檔,并且當(dāng)CSS樣式有所更新或被修改以后,所有應(yīng)用了該樣式表的文檔都會(huì)被自動(dòng)更新CSS樣式表的應(yīng)用4.6使用CSS樣式不僅可以輕松地網(wǎng)頁(yè)中的對(duì)象產(chǎn)生動(dòng)態(tài)效果,同時(shí)還簡(jiǎn)化了HTML中各種繁瑣的標(biāo)簽,使得各個(gè)標(biāo)簽的屬性更具有一般性和通用性CSS樣式甚至超越了Web頁(yè)面本身的顯示功能,將樣式擴(kuò)展到多媒體上
CSS樣式的主要功能與特點(diǎn)如下所示CSS樣式表的應(yīng)用4.6功能特點(diǎn)1可以方便地為網(wǎng)頁(yè)中的任何元素設(shè)置不同的背景顏色和背景圖像可以精確地控制網(wǎng)頁(yè)中各元素的位置可以為網(wǎng)頁(yè)中各元素設(shè)置過(guò)濾器,從而產(chǎn)生如陰影、模糊、透明等效果可以與腳本語(yǔ)言結(jié)合,從而產(chǎn)生各種動(dòng)態(tài)效果功能特點(diǎn)2功能特點(diǎn)3功能特點(diǎn)4CSS樣式表的應(yīng)用4.6由于CSS格式是HTML代碼,所以網(wǎng)頁(yè)打開(kāi)的速度非常快可以更靈活地控制網(wǎng)頁(yè)中文字的字體、顏色、大小、間距、風(fēng)格和位置可以靈活地設(shè)置一段文字的行高、縮進(jìn),并可以為其加入三維效果的邊框功能特點(diǎn)1功能特點(diǎn)5功能特點(diǎn)7功能特點(diǎn)6CSS樣式表的應(yīng)用4.6樣式表的腳本語(yǔ)法結(jié)構(gòu)是:
HTML標(biāo)記{標(biāo)記屬性:屬性值;標(biāo)志屬性:屬性值;標(biāo)志屬性:屬性值;……}CSS樣式表的應(yīng)用4.6CSS的類型重定義標(biāo)簽的CSS自定義CSSCSS選擇器樣式CSS樣式表的應(yīng)用4.6自定義CSS自定義樣式最大的特點(diǎn)就是具有可選擇性,可以由用戶自由決定將該樣式應(yīng)用于哪些元素選擇樣式應(yīng)用范圍實(shí)質(zhì)是在要使用樣式的一對(duì)標(biāo)簽之間添加一個(gè)class=”classname”語(yǔ)句CSS樣式表的應(yīng)用4.6重定義標(biāo)簽的CSS重定義標(biāo)
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025消防器材銷售合同范本
- 農(nóng)戶水稻收購(gòu)合同范本
- 人員包干合同范例
- 買方鋼筋加工合同范例
- 優(yōu)惠打折合同范本
- 中途入伙合同范本
- 兒子買房合同代簽合同范本
- 親人房子過(guò)戶合同范例
- 代理倉(cāng)庫(kù)發(fā)貨合同范例
- 企業(yè)用工合同范例
- 2025-2030年中國(guó)清真食品行業(yè)運(yùn)行狀況及投資發(fā)展前景預(yù)測(cè)報(bào)告
- 廣東省茂名市電白區(qū)2024-2025學(xué)年七年級(jí)上學(xué)期期末質(zhì)量監(jiān)測(cè)生物學(xué)試卷(含答案)
- 臨床提高膿毒性休克患者1h集束化措施落實(shí)率PDCA品管圈
- 新概念第一冊(cè)單詞匯總帶音標(biāo)EXCEL版
- 作用于血液及造血器官的藥 作用于血液系統(tǒng)藥物
- 心肺復(fù)蘇(最全版)完整版
- 春節(jié)節(jié)后施工復(fù)工安全培訓(xùn)
- GB/T 3478.1-1995圓柱直齒漸開(kāi)線花鍵模數(shù)基本齒廓公差
- GB/T 1346-2001水泥標(biāo)準(zhǔn)稠度用水量、凝結(jié)時(shí)間、安定性檢驗(yàn)方法
- FZ/T 25001-2012工業(yè)用毛氈
- 瑞幸咖啡SWOT分析
評(píng)論
0/150
提交評(píng)論