網(wǎng)站開發(fā)與設(shè)計(-基于Dreamweaver-CS5)_第1頁
網(wǎng)站開發(fā)與設(shè)計(-基于Dreamweaver-CS5)_第2頁
網(wǎng)站開發(fā)與設(shè)計(-基于Dreamweaver-CS5)_第3頁
網(wǎng)站開發(fā)與設(shè)計(-基于Dreamweaver-CS5)_第4頁
網(wǎng)站開發(fā)與設(shè)計(-基于Dreamweaver-CS5)_第5頁
已閱讀5頁，還剩1頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

網(wǎng)站開發(fā)與設(shè)計——基于DreamweaverCS5主要內(nèi)容：創(chuàng)建站點創(chuàng)建簡單圖文界面利用表格布局頁面CSS樣式表及框架結(jié)構(gòu)的應用嵌入表單元素使用模板和庫使用層和時間軸使用擴展插件并上傳站點一．使用Dreamweaver創(chuàng)建站點1.1搭建與設(shè)置站點1.1.1搭建站點啟動啟動dreamweaver，執(zhí)行菜單欄中的“站點>管理站點”命令，單擊彈出對話框中的“新建>站點”，打開站點定義對話框。在打開的對話框中設(shè)置站點名稱（用來在Dreamweaver中標識該站點），地址可以暫無。單擊可以下一步，進入下一個界面。選中“否，我不想使用服務器技術(shù)”單選按鈕表示目前該站點是一個靜態(tài)站點，沒有動態(tài)頁。如果選擇“是，我想使用服務器技術(shù)”選項，表明要使用服務器技術(shù)搭建站點，這時可以選擇動態(tài)頁面采用的腳本語言。單擊可以下一步，進入下一個界面。選中“編輯我計算機上的本地副本，完成后再上傳到服務器（推薦）”單選按鈕。并指定本地磁盤上的一個空文件夾，Dreamweaver將在其中儲存站點文件的本地版本。單擊可以下一步，進入下一個界面。在下拉列表中選擇“無”選項。單擊可以下一步，進入下一個界面。單擊“完成”。Dreamweaver將自動創(chuàng)建站點緩存。站點緩存是Dreamweaver存儲有關(guān)站點信息的一種方式，在存在多個站點的情況下可以使操作速度更快。此時，單擊“完成”關(guān)閉站點管理對話框。在“文件”面板中將顯示站點中的所有文件夾和文件。1.1.2設(shè)置站點在“管理站點”對話框中，雙擊列表框中的站點名稱，或單擊“編輯”按鈕，可以對站點管理器中的站點進行再編輯。在“管理站點”對話框中，雙擊列表框中的站點名稱，或單擊“編輯”按鈕，可以對站點管理器中的站點進行再編輯。在彈出的對話框中，選擇“高級”選項卡。即可在其中修改相應設(shè)置。在站點中創(chuàng)建如圖目錄：1.2創(chuàng)建站點內(nèi)容在站點中創(chuàng)建如圖目錄：文件夾文件夾內(nèi)容behavior層與行為css樣式表使用form插入表單frame框架頁面建立images圖像imgtext圖文元素media多媒體table表格創(chuàng)建index.html網(wǎng)站首頁面1.3制作網(wǎng)頁的工作準備雙擊“文件”面板中的index.htm文件，進入頁面編輯窗口。查看形式有三種：代碼、拆分、設(shè)計。在源代碼視圖中顯示的代碼結(jié)構(gòu)如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":///TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns=":///1999/xhtml"><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"/><styletype="text/css"><title>無標題文檔</title></head><body></body></html>一個完整的HTML文件由標題、段落、列表、表格、和單詞即嵌入的各種對象所組成。這些邏輯上統(tǒng)一的對象被稱為元素，HTML使用標記來分割并描述這些元素，實際上整個HTML文件就是由元素與標記組成的。HTML的元素和標記在書寫時不分大小寫。HTML代碼分3部分：一個完整的HTML文件由標題、段落、列表、表格、和單詞即嵌入的各種對象所組成。這些邏輯上統(tǒng)一的對象被稱為元素，HTML使用標記來分割并描述這些元素，實際上整個HTML文件就是由元素與標記組成的。HTML的元素和標記在書寫時不分大小寫。HTML代碼分3部分：<html>…</html>:告訴瀏覽器HTMl文件開始和結(jié)束。其中包含<head>和<body>標記，html文檔中所有的內(nèi)容都應該在這兩個標記之間。一個html文檔總是以<html>開始，以</html>結(jié)束。<head>…</head>:html文件頭部標記，其中可以放置頁面的標題以及文件信息等內(nèi)容。通常將這兩個標記之間的內(nèi)容統(tǒng)稱html的頭部。一般來說頭部的內(nèi)容都不會在網(wǎng)頁上直接顯示，而是通過其他方式起作用。<body>…</body>:html文件主體標記，絕大多數(shù)html內(nèi)容都放置在這個區(qū)域內(nèi)。1.3.1設(shè)置頁面標題修改：修改：<title>無標題文檔</title>1.3.2查看和編輯頭內(nèi)容查看：查看：在編輯窗口下執(zhí)行“查看>文件頭內(nèi)容”命令，會在代碼區(qū)域下方顯示頭內(nèi)容工具欄。單擊頭內(nèi)容工具欄圖標，即可查看其屬性。編輯：※插入作者與版權(quán)信息01.單擊“插入>HTML>文件頭標簽>Meta”,彈出Meta對話框。在“值”文本框中輸入“author”（作者）或“copyright”（版權(quán)）。在“內(nèi)容”文本框中輸入相應內(nèi)容，即完成作者或版權(quán)設(shè)置。02.直接在源代碼中編寫，eg:<metaname=”author”content=”longtuo,龍拓”><metaname=”copyright”content=”snowbeer,華潤雪花啤酒（中國），版權(quán)所有”>※插入關(guān)鍵字01.單擊“插入>HTML>文件頭標簽>關(guān)鍵字”,彈出關(guān)鍵字對話框。輸入相應關(guān)鍵字即可。02.編寫源代碼：<metaname=”keywords”content=”關(guān)鍵字（“，“隔開）”>※插入說明（類上）<metaname=”description”content=“說明“>編輯：編輯：※插入刷新（類上）設(shè)置延遲時間以及跳轉(zhuǎn)的URL或刷新?！O(shè)置頁面屬性01.執(zhí)行菜單欄中的“修改>頁面屬性”命令，打開“頁面屬性”對話框，如圖：02.設(shè)置外觀：☆字體、字號、文本顏色☆背景顏色或圖片（避免平鋪：不重復）☆頁面邊距☆源代碼部分屬于CSS層疊樣式表范疇03.設(shè)置連接：☆字體、字號、連接顏色（未訪問、已訪問等）☆下劃線04.設(shè)置標題（一般不再此處設(shè)置，后面介紹）05.設(shè)置標題/編碼（采用默認即可）06.設(shè)置跟蹤圖像（利用背景草圖引導網(wǎng)頁設(shè)計）二．制作簡單的多媒體圖文界面2.1制作文字頁面2.1.1文字輸入與編輯在相應的層中復制或輸入相應的文字在相應的層中復制或輸入相應的文字在下面的“屬性”面板中單擊CSS按鈕，設(shè)置文本的字體、字號、顏色以及排列對齊方式等。2.1.2插入水平線和日期水平線水平線單擊“插入>HTML>水平線”按鈕，在頁面中插入水平線。在“屬性”面板中設(shè)置水平線的基本屬性。單擊“屬性”面板中的“快速標簽編輯器”按鈕，設(shè)置水平線顏色，eg：<hrcolor=#B10067/>其他屬性，直接在“屬性”面板設(shè)置即可。日期日期單擊“插入>日期”按鈕，在對話框中對日期、星期、時間以及自動更新進行設(shè)置，完成即可。2.1.3插入特殊字符01.01.單擊“插入>HTML>特殊字符>??”按鈕，??處選擇相應類型的字符即可。圖像文件格式有很多種，但web圖像文件格式有很多種，但web頁中通常使用的只有3種，即GIF、JPEG、和PNG格式。目前，大多數(shù)瀏覽器都可以查看GIF和JPEG格式的圖像文件。GIF-->文件最多使用256種顏色，最適合色調(diào)不連續(xù)或具有大面積單一顏色的圖像，例如導航條、按鈕、圖標、徽標、或其他具有統(tǒng)一色彩和色調(diào)的圖像。JPEG-->文件格式用于攝影或連續(xù)色調(diào)圖像的高級格式，JPEG文件可以包含數(shù)百萬種顏色。JPEG文件的品質(zhì)越好，文件越大，下載時間也越長。通常可以通過壓縮JPEG文件在圖像品質(zhì)和文件大小之間達到良好的平衡。2.2.1插入并編輯圖像插入圖像插入圖像單擊“插入>圖像”按鈕，彈出“選擇圖像源文件”對話框，選擇文件即可。如果圖像不在本站點的牡蠣下，Dreamweaver會提示用戶將其拷貝到當前站點下，單擊“確定”按鈕插入圖像。在“屬性”面板中可以對圖像的替換文本？、大小、對齊方式、邊距等進行設(shè)置。源代碼：<divalign="left"><imgsrc="images/mzxj/hsl/hsl_1.jpg"alt="演示1"width="300"height="150"hspace="10"vspace="20"/>編輯圖像在“屬性”面板中單擊“編輯”按鈕（有的版本是PS），即通過其他相關(guān)軟件進行圖像編輯。單擊“使用Firework最優(yōu)化”按鈕、以及“編輯”部分的其他按鈕、、進行相關(guān)的編輯。插入鼠標經(jīng)過圖像單擊“插入單擊“插入>圖像對象>鼠標經(jīng)過圖像”按鈕，彈出“鼠標經(jīng)過圖像”對話框，填寫相關(guān)設(shè)置、選擇相應圖片即可。其中，勾選“預載鼠標經(jīng)過圖像”復選框，可以預先將圖片載入緩存，以便不發(fā)生延遲。源代碼：預加載圖片：<bodyonload="MM_preloadImages('images/shouye1.gif)">鼠標經(jīng)過圖片：<ahref="#"onmouseout="MM_swapImgRestore()"onmouseover="MM_swapImage('Image1','','images/shouye1.gif',1)"><imgsrc="images/shouye.gif"name="Image1"width="100"height="20"border="0"id="Image1"/></a>調(diào)用javascript代碼：<scripttype="text/JavaScript"><!--……(略)通過屬性對圖像進行其他設(shè)置。2.2.3插入導航條單擊“插入單擊“插入>圖像對象>導航條”按鈕，彈出“導航條”對話框，填寫相關(guān)設(shè)置、選擇相應圖片即可。其中，勾選“預載鼠標經(jīng)過圖像”復選框，可以預先將圖片載入緩存，以便不發(fā)生延遲。勾選“初始時顯示‘鼠標按下圖像’”。設(shè)置導航條插入方式：水平或垂直。通過屬性可對圖像進行其他設(shè)置。2.3制作多媒體頁面2.3.1插入Flash動畫單擊“插入單擊“插入>媒體>Flash”，在彈出的對話框中選擇Flash文件即可。在“屬性”面板中可以設(shè)置相關(guān)屬性，其中Wmode下拉列表可以設(shè)置透明背景。插入Flash視頻單擊“插入單擊“插入>媒體>Flash視頻”，在彈出的對話框中進行參數(shù)設(shè)置，在URL中輸入.flv文件地址。在“外觀”下拉列表中可以選擇外觀選項，還可以設(shè)置寬度、高度、自動播放和自動重新播放等。視頻類型選擇默認“累進式下載視頻”即可。2.3.3插入FlashPaper單擊“插入單擊“插入>媒體>FlashPaper”，在彈出的對話框中選擇FlashPaper文件并設(shè)置大小即可。FlashPaper是一款電子文檔類工具，通過使用本程序，用戶可以將需要的文檔通過簡單的設(shè)置轉(zhuǎn)換為SWF格式的Flash動畫，原文檔的排版樣式和字體顯示不會受到影響。2.3.4插入JavaApplet小程序單擊“插入單擊“插入>媒體>Applet”，在彈出的對話框中選擇.class文件即可。選中插入到頁面中的Applet圖標，單擊“屬性”面板中的“參數(shù)”按鈕，在彈出的對話框中設(shè)置參數(shù)名為Image，參數(shù)值為圖像文件的實際路徑。注：.class文件最好和圖像文件放在同一目錄下，這樣省去了書寫路徑的麻煩。源代碼：<appletcode="CharInLineOut.class"width="198"height="126"alt="1"title="1"><paramname="Image"value="1.jpg"/></applet></applet>2.3.5插入插件瀏覽器通過插件允許第三方開發(fā)者將它們的產(chǎn)品并入網(wǎng)頁頁面。典型插件包括RealPlayer和QuickTime，一些頁面內(nèi)容包括MP3和QuickTime影片等。單擊“插入單擊“插入>媒體>插件”按鈕，選擇內(nèi)容文件。在“屬性”面板中進行其他設(shè)置。源代碼：<embedsrc="media/movie/a1.mpg"width="305"height="196"></embed>三．創(chuàng)建網(wǎng)頁鏈接3.1創(chuàng)建基本鏈接創(chuàng)建內(nèi)部鏈接選在要創(chuàng)建鏈接的文字或圖片，在其“屬性面板”中的“鏈接”后的文件夾圖標處，選擇本地網(wǎng)頁鏈接，或直接拉動選在要創(chuàng)建鏈接的文字或圖片，在其“屬性面板”中的“鏈接”后的文件夾圖標處，選擇本地網(wǎng)頁鏈接，或直接拉動至站點內(nèi)部鏈接。在“屬性”的“目標”下拉列表中選擇所連接的文檔出現(xiàn)形式：_parent：選擇該選項后，如果是嵌套的框架，鏈接會在父框架或窗口中打開，如果不是嵌套的框架，則等同于_top，在整個瀏覽器窗口中顯示。_self：該選項是瀏覽器的默認值，會在當前網(wǎng)頁所在的窗口或框架中打開鏈接的網(wǎng)頁。_top：選擇該選項后會在完整的瀏覽器窗口中打開。源代碼：<ahref="index.html"target="_blank"class=”A”>首頁</a>其中,<a>表示鏈接標記，href定義鏈接的地址，target定義目標窗口，class是對CSS樣式表的引用。3.1.2創(chuàng)建外部網(wǎng)站鏈接同內(nèi)部鏈接：選在要創(chuàng)建鏈接的文字或圖片，在其“屬性面板”中的“鏈接”中輸入相應的網(wǎng)址。同內(nèi)部鏈接：選在要創(chuàng)建鏈接的文字或圖片，在其“屬性面板”中的“鏈接”中輸入相應的網(wǎng)址。eg：代碼：<ahref=""target="_blank"class=”A”>首頁</a>單擊“插入>超級鏈接”，并進行相關(guān)設(shè)置即可。3.1.3創(chuàng)建電子郵件鏈接同內(nèi)部鏈接：選在要創(chuàng)建鏈接的文字或圖片，在其“屬性面板”中的“鏈接”中輸入同內(nèi)部鏈接：選在要創(chuàng)建鏈接的文字或圖片，在其“屬性面板”中的“鏈接”中輸入mailto：加相應的郵箱，eg：mailto：代碼：<ahref="mailto："class=”A”>首頁</a>單擊“插入>電子郵件鏈接”并進行相關(guān)設(shè)置即可。3.1.4創(chuàng)建下載鏈接創(chuàng)建下載鏈接的方式與創(chuàng)建網(wǎng)頁鏈接的方式完全相同，當文件為瀏覽器不支持的類型時，這些文件會被下載。創(chuàng)建下載鏈接的方式與創(chuàng)建網(wǎng)頁鏈接的方式完全相同，當文件為瀏覽器不支持的類型時，這些文件會被下載。創(chuàng)建空連接和腳本鏈接有些客戶端行為的動作需要由超鏈接來調(diào)用，這時需要用到空連接，簡單的說，空連接是用來激活頁面中的對象文本。當文本或?qū)ο蟊患せ詈?，可以為其添加行為。有些客戶端行為的動作需要由超鏈接來調(diào)用，這時需要用到空連接，簡單的說，空連接是用來激活頁面中的對象文本。當文本或?qū)ο蟊患せ詈?，可以為其添加行為。eg：制作腳本鏈接的對象“關(guān)閉窗口”的文字，在“屬性”面板中輸入調(diào)用的JavaScript腳本函數(shù)名稱javascript：window.close()代碼：<ahref="javascript:window.close()">關(guān)閉窗口</a>3.2創(chuàng)建錨點鏈接所謂錨點鏈接就是指在同一頁面中不同位置的鏈接。命名錨記命名錨記單擊“插入>命名錨記”按鈕，彈出“命令錨記”對話框，在其文本框中輸入名稱（eg：top）。確定后，將該錨點插入到文檔中相應的位置。創(chuàng)建連接到錨點與創(chuàng)建鏈接類似，在選中的元素的“屬性”面板中的“鏈接”文本框中，填寫“#錨點名”eg：#top；或者直接拉動到錨點。代碼：<aname=”top”></a><ahref=”#top”>返回頁首</a>3.3創(chuàng)建圖像映射創(chuàng)建圖像映射，可以在同一圖像上訪問不同的鏈接地址。選擇相應的元素，在其“屬性”面板的選擇相應的元素，在其“屬性”面板的中，選擇合適的熱點工具（指針熱點工具封閉狀態(tài)），定義不同的熱點。為繪制的熱點區(qū)域設(shè)置不同的鏈接地址和替代文字，完成圖像映射的創(chuàng)建。代碼：<imgsrc=”1.gif”usemap=”#Map”border=”0”height=”231”width=”708”><mapname=”Map”id=”Map”><areashape=”circle”coords=”281,178,38”herf=target=”_black”>…</map>其中：<map>標記定義圖像地圖的開始，<area>標記定義具體的區(qū)域位置3.4創(chuàng)建跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是文檔中的下拉式菜單，對站點訪問者可見并列出鏈接到文檔或文件的選項。可以創(chuàng)建到整個Web站點內(nèi)文檔的鏈接、到其他站點上文檔的鏈接、電子郵件、到圖形的鏈接，還可以創(chuàng)建到可在瀏覽器中打開的任何文件類型的鏈接。單擊“插入單擊“插入>表單>跳轉(zhuǎn)菜單”按鈕，在彈出的的“插入跳轉(zhuǎn)菜單”對話框中，添加菜單項，并對每個菜單項進行設(shè)置。設(shè)置完成后，如果還想編輯跳轉(zhuǎn)菜單的選項，可以選中跳轉(zhuǎn)菜單后，單擊“屬性”面板中的“列表值”按鈕，在彈出的的對話框中進行修改。視圖：代碼：<formname="form1"id="form1"><selectname="jumpMenu"onchange="MM_jumpMenu('parent',this,0)"><optionvalue="://baidu">百度</option><optionvalue="://youku">優(yōu)酷</option></select><inputtype="button"name="Button1"value="前往"onclick="MM_jumpMenuGo('jumpMenu','parent',0)"/></form>(介紹表單元素相關(guān)標記)另：調(diào)用javascript，實現(xiàn)跳轉(zhuǎn)菜單部分代碼略。四．使用表格進行頁面板式編排在創(chuàng)建網(wǎng)站相冊之前，需要將相冊的所有圖像放置在一個文件夾中（不一定在站點中），確保圖像文件名以“創(chuàng)建網(wǎng)站相冊”命令可識別的擴展名（eg：在創(chuàng)建網(wǎng)站相冊之前，需要將相冊的所有圖像放置在一個文件夾中（不一定在站點中），確保圖像文件名以“創(chuàng)建網(wǎng)站相冊”命令可識別的擴展名（eg：.gif.jpg.jpeg.png.psd.tif.tiff）結(jié)尾單擊“命令>創(chuàng)建網(wǎng)站相冊”，進行相關(guān)設(shè)置，其中目標文件夾用來放置所有導出圖像和HTMl文件。單擊“確定”按鈕創(chuàng)建網(wǎng)站相冊的HTMl和圖像文件。此時，將啟動Fireworks并創(chuàng)建縮略圖和大尺寸圖像?？s略圖和大尺寸圖像。04.當彈出“相冊已經(jīng)建立”的提示框后，單擊“確定”按鈕，等待幾秒鐘后，縮略圖將根據(jù)文件名按字母順序顯示。05.將插入點置于標題處，在“屬性”，面板中設(shè)置標題處的背景顏色及文字屬性，并調(diào)節(jié)、表格寬度等。拖拽鼠標選擇整個頁面文字，可設(shè)置“頁面屬性”，具體方法同前。插入表格單擊“插入>插入表格單擊“插入>表格”按鈕，彈出“表格”對話框。進行相關(guān)設(shè)置，其中，如果表格用于頁面排版，邊框?qū)挾纫话阍O(shè)為0?！皹祟}”文本框用來定義表格標題，“摘要”用來注釋表格。表格默認間距、邊距為1，如果確保沒有顯示邊距、間距，設(shè)置為0即可。代碼：<tablewidth="1125"height="373"border="1"><tr><tdheight="50"colspan="2"> </td></tr><tr><tdwidth="153"> </td><tdwidth="956"> </td></tr></table><table>表示表格開始，<tr>標記代表行開始，<td></td>標記之間就是單元格的內(nèi)容。border屬性定義邊框?qū)挾龋琧ellspacing屬性設(shè)置表格單元格之間間距，cellpadding屬性設(shè)置單元格邊距。（未設(shè)置）調(diào)整表格結(jié)構(gòu)表格的相關(guān)調(diào)整與Excel十分類似。使用表格擴展視圖擴展視圖是為了顯示較小的表格，便于用戶對表格的控制。單擊“插入”面板“布局”分類列表中的“擴展”按鈕，如圖所示：，完成后即可。五．嵌入表單元素插入表單單擊“插入插入表單單擊“插入>表單>表單”按鈕，當頁面處于“設(shè)計”視圖中時，用紅色虛線指示表單。將需要的內(nèi)容復制到紅色虛線內(nèi)部。設(shè)置表單屬性設(shè)置表單屬性，在“屬性”面板中，“表單ID”為了正確處理表單，一定要為表單設(shè)置一個名稱。在“動作”文本框中設(shè)置處理這個表單的服務器腳本路徑。如果希望該表單通過E-mail方式發(fā)送，而不是被服務器腳本處理，需要在“動作”文本框中輸入“mailto：”和希望發(fā)送到的E-mail地址。02.02.在“方法”下拉列表中可以設(shè)置將表單數(shù)據(jù)發(fā)送到服務器的方法，包含3個選項“默認”、“POST”和“GET”。一般選擇POST方式。如果使用GET方式，URL一般限制在8192個字符以內(nèi)，如果發(fā)送數(shù)據(jù)過大，數(shù)據(jù)將被截斷，而且在發(fā)送機密信息時，使用GET方式發(fā)送信息很不安全。單擊“插入>單擊“插入>表單>文本域”，彈出“輸入標簽輔助功能屬性”對話框，設(shè)置標簽屬性后確定，此時在插入點所在位置插入了文本域。點擊“屬性”面板，其中“類型”中，可選單行、多行、密碼。對于單行的字符寬度與最多字符數(shù)，效果相同。密碼類型將自動以“＊”或“●”顯示?！敖谩边x中后，則禁止用戶在文本域輸入內(nèi)容，勾選“只讀”后，則用戶無法修改文本域內(nèi)容。代碼：<textareaname="textfield"cols="20"rows="5"id="textfield">測試</textarea>5.3創(chuàng)建復選框和單選按鈕復選框復選框單擊“插入>表單>復選框”，彈出“輸入標簽輔助功能屬性”對話框，設(shè)置標簽屬性后確定，此時在插入點所在位置插入了復選框。為該復選框輸入一個唯一的描述性名稱。在“選定值”文本框中，為復選框輸入值，當用戶選擇此復選框時將發(fā)送到服務器端腳本或應用程序的值?？梢栽凇俺跏紶顟B(tài)”選項組中，選中“已勾選”，顯示為選中狀態(tài)。代碼：<label><inputtype="checkbox"name="checkbox"value="checkbox"/></label>注；相關(guān)的提示文字在<inputtype="checkbox"name="checkbox"value="checkbox"/>后面輸入。也可以在“輸入標簽輔助功能屬性”對話框中輸入。單選按鈕方法與復選框極其相似，但要注意，如果要插入單獨的單選按鈕來創(chuàng)建組，則必須為每個單選按鈕添加標簽。代碼：<label><inputtype="radio"name="radiobutton"value="radiobutton"/>測試</label>單選按鈕組單擊“插入>表單>單選按鈕組”，彈出“單選按鈕組”對話框，進行相關(guān)設(shè)置后確定，此時在插入點所在位置插入了單選按鈕組。插入后的各個單選按鈕為豎排，可進行拖動轉(zhuǎn)化成橫排。代碼：<p><label><inputtype="radio"name="RadioGroup1"value="單選"/>單選</label><br/><label><inputtype="radio"name="RadioGroup1"value="單選"/>單選</label><br/></p>注：<br/>換行符，將其刪除也可實現(xiàn)調(diào)整為單行的目的。插入滾動列表或插入滾動列表或彈出式菜單單擊“插入>表單>列表/菜單”，彈出“輸入標簽輔助功能屬性”對話框，設(shè)置標簽屬性后確定，此時在插入點所在位置插入了列表/菜單。在“屬性”面板中，選擇“類型”列表或菜單，進行相關(guān)設(shè)置即可。代碼：<selectname="select"><optionvalue="A">A</option><optionvalue="B">B</option><optionvalue="C">C</option></select>5.5插入按鈕插入標準按鈕插入標準按鈕單擊“插入>表單>按鈕”彈出“輸入標簽輔助功能屬性”對話框，設(shè)置標簽屬性后確定，此時在插入點所在位置插入了按鈕。在“屬性”面板中，設(shè)置相關(guān)屬性即可。在“動作”選項組中選擇一種操作：選中“提交表單”單選按鈕提交表單進行處理；選中“重設(shè)”單選按鈕重設(shè)表單；選中“無”單選按鈕根據(jù)處理腳本激活一種操作。代碼：<inputtype="submit"name="Submit"value="提交"/>插入圖像提交按鈕單擊“插入>表單>圖像域”，彈出“選擇圖像源文件”對話框，選擇圖片即可在插入點所在位置插入圖像按鈕。代碼：<inputname="imageField"type="image"src="images/qsfy/bbfj.png"alt="提交>>>"/>注：src定義了圖片的路徑，alt定義了圖像的替代文本。插入文件域單擊“插入插入文件域單擊“插入>表單>文件域”，彈出“輸入標簽輔助功能屬性”對話框，設(shè)置標簽屬性后確定，此時在插入點所在位置插入了文件域。在“屬性”面板中設(shè)置相應的屬性即可。代碼：<inputtype="file"name="file"/>插入隱藏域信息從表單傳送到后臺程序時，編程者通常要發(fā)送一些不應該被讀者看到的數(shù)據(jù)。這些數(shù)據(jù)可能是后臺程序需要的一個用于設(shè)置表單收件人信息的變量，也可能是在提交表單的后臺程序?qū)⒁囟ㄏ蛑劣脩舻囊粋€URL。插入方法類上。代碼：<inputtype="hidden"name="hiddenField"/>創(chuàng)建標簽創(chuàng)建標簽使用“標簽”可以定義表單之間的關(guān)系。創(chuàng)建字段集除了使用單獨的標記外，可以將一群表單元素組成一個字段集，并通過<fieldset>和<legend>來標記這個組。5.7使用Spry驗證表單5.7.1Spry驗證文本域單擊“插入單擊“插入>表單>Spry驗證文本域”，彈出“輸入標簽輔助功能屬性”對話框，設(shè)置標簽屬性后確定，此時在插入點所在位置插入了Spry驗證文本域。其中包含三部分內(nèi)容，一部分是文本域，一部分是檢驗結(jié)果的提示語，以及前兩部分構(gòu)成的整體。其中文本域部分的設(shè)置與設(shè)置文本域?qū)傩韵嗤?。提示語部分是對字體字號等的設(shè)置。整體部分的設(shè)置，可以選擇文本域中文本的類型，以便更好的驗證，以及最大最小字符數(shù)。其中“驗證于”設(shè)置了驗證的時刻，需勾選“onChange”復選框，使其改變時即進行驗證。代碼:<p><spanid="sprytextfield1"><inputtype="text"name="text1"id="text1"/><spanclass="textfieldMaxCharsMsg">最大可添加8字符。</span><spanclass="textfieldRequiredMsg">需要提供一個值。</span></span></p><scripttype="text/javascript">varsprytextfield1=newSpry.Widget.ValidationTextField("sprytextfield1","none",{maxChars:8,validateOn:["change"]});</script>注：以上代碼：聲明了sprytextfield1變量并創(chuàng)建了sprytextfield1對象-------------在<head>與</head>之間添加了以下代碼：<scriptsrc="SpryAssets/SpryValidationTextField.js"type="text/javascript"></script><linkhref="SpryAssets/SpryValidationTextField.css"rel="stylesheet"type="text/css"/>這部分代碼：首先引用了SpryValidationTextField.js腳本，然后應用了外部的SpryValidationTextField.css樣式表文件。其他驗證其他驗證包括：驗證文本區(qū)域、驗證復選框、驗證選擇、驗證密碼、驗證確認（與參考對象是否一致，如密碼）、驗證單選按鈕組（需要多勾選onBlur,當元素失去焦點時發(fā)生blur事件。）這些驗證與驗證文本域及其類似，只不過聲明與創(chuàng)建的對象以及引用的腳本與樣式表文件不同而已。六．使用層與Spry層特效6.1使用層6.1.1繪制層單擊“插入單擊“插入>布局對象>APdiv”添加層，然后再文檔窗口的設(shè)計圖中通過拖動鼠標來繪制層。執(zhí)行“窗口>AP元素”，打開“AP元素”面板，其中層的順序，是通過層的“屬性”面板中Z軸控制的。并且“AP元素”面板中，有“防止重疊”可以防止層之間的重疊。層的“屬性”面板中可以設(shè)置大小、位置、顏色、圖像、可見性等，其中設(shè)置可見性還可以通過“AP元素”面板進行設(shè)置?！皩傩浴泵姘逯械摹耙绯觥笔菍又械膬?nèi)容超出層的大小時，對層中內(nèi)容的顯示情況進行設(shè)置。代碼：<styletype="text/css"><!—#apDiv1{ position:absolute; width:200px; height:115px; z-index:1;}--></style><divid="apDiv3"></div>可以通過div標簽并對它們應用CSS定為樣式來創(chuàng)建頁面布局。6.1.2層與表格的轉(zhuǎn)換為了保證層之間不發(fā)生重疊，在“為了保證層之間不發(fā)生重疊，在“AP元素”面板上勾選“防止重疊”復選框。執(zhí)行菜單欄中“修改>轉(zhuǎn)換>將APdiv轉(zhuǎn)換為表格”，彈出“將APdiv轉(zhuǎn)換為表格”對話框。在對話框中進行相應的設(shè)置。其中，“最精確”表示為每個層創(chuàng)建一個單元格，并附加保留曾之間空間所必需的任何單元格。“最?。汉喜⒖瞻讍卧敝付ㄈ绻麑佣ㄎ辉谥付〝?shù)目的像素內(nèi)，則層的邊緣對其。如果選擇此選項，結(jié)果將包含較少的空行和空列，但可能不與布局精確匹配?！笆褂猛该鱃IFS”用透明的GIF填充表的最后一行，將確保表在所有瀏覽器中以相同的列寬顯示。當啟動此選項后，不能通過拖動表列來編輯結(jié)果表，當禁用此選項后，結(jié)果表將不包含透明GIF，但在不同的瀏覽器中可能會具有不同的列寬。“置于頁面中央”將結(jié)果表放置在頁面的中央。如果要將表格轉(zhuǎn)換為APdiv，執(zhí)行菜單欄中“修改>轉(zhuǎn)換>將表格轉(zhuǎn)換為APdiv”，并進行相應的設(shè)置即可。6.2使用Spry層特效6.2.1Spry菜單欄單擊“插入單擊“插入>布局對象>Spry菜單欄”，彈出“Spry菜單欄”對話框，選擇水平或垂直。確定后再插入點插入Spry菜單欄。在“屬性”面板設(shè)置相應的屬性即可。6.2.2其他SprySpry選項卡式面板、Spry折疊式、Spry可折疊面板、Spry工具提示的添加與設(shè)置方法與Spry菜單欄及其類似。包括上訴的Spry內(nèi)容都可以在“插入>Spry”列表中找到。七．頁面的框架結(jié)構(gòu)框架基礎(chǔ)框架基礎(chǔ)一個標準的框架頁面可能是由多個單一框架頁面組成的多框架頁面。創(chuàng)建框架的方法：從框架集中選；自己設(shè)定。在創(chuàng)建框架集或使用框架前，執(zhí)行菜單欄中的“查看>可視化助理>框架邊框”，是框架邊框在“文檔”窗口的“設(shè)計”視圖中可見。執(zhí)行“窗口>框架”命令打開“框架”面板。創(chuàng)建網(wǎng)站框架首先將一個多框架頁面分為幾部分，我們以3部分為例：top.html、main.html、bottom三個子框架頁面。那么我們要做的就是講這三個頁面整合成一個完整的框架頁面。新建空白頁面，執(zhí)行菜單欄中“布局>框架”將頁面分為上中下三部分。通過“屬性”面板中“源文件”添加相應的.html文件即可。設(shè)置框架樣式在“屬性”面板中設(shè)置框架的相關(guān)參數(shù)。將“邊框”設(shè)為“是”，中間框架在“屬性”面板中設(shè)置其“值”為“1”，單位為相對。這樣便使框架按比例劃分。在“滾動”處可以設(shè)置是否有滾動條以及滾動狀態(tài)，如果設(shè)為“自動”，則只有內(nèi)容超出框架時才顯示滾動狀態(tài)。勾選“不能調(diào)整大小”復選框是防止訪問者在瀏覽器中調(diào)整框架大小?！斑吙颉痹O(shè)為“否”，保證在瀏覽器查看框架時，隱藏當前框架的邊框。代碼：<framesetrows="80,*,120"cols="*"framespacing="0"frameborder="yes"border="0"><framesrc="file:///D|/AdobeDreamweaver-CS5/AdobeDreamweaverCS5/UntitledFrame-8"name="topFrame"frameborder="no"scrolling="No"noresize="noresize"id="topFrame"title="topFrame"/><framesrc="file:///D|/AdobeDreamweaver-CS5/AdobeDreamweaverCS5/Untitled-3"name="mainFrame"frameborder="no"scrolling="yes"id="mainFrame"title="mainFrame"/><framesrc="file:///D|/AdobeDreamweaver-CS5/AdobeDreamweaverCS5/UntitledFrame-9"name="bottomFrame"frameborder="no"scrolling="No"noresize="noresize"id="bottomFrame"title="bottomFrame"/></frameset>注：rows值中的“*”表示分割剩下的部分，framespacing框架間距；frameborder框架邊框；frameborder邊框?qū)挾?；scrolling是否顯示滾動條；noresize禁止改變框架大小。鏈接框架01.在瀏覽網(wǎng)頁的時候，我們點擊top部分的內(nèi)容，需要main部分的內(nèi)容更新，則需要鏈接框架。02.創(chuàng)建框架鏈接與創(chuàng)建超鏈接類似，只不過在“目標”的選擇時選擇對應的mainFrame即可。浮動框架浮動框架使用時，無需對整個框架進行拆分，方便了用戶使用表格排版整個頁面，避免了設(shè)置框架樣式的麻煩。相當于插入了一個框架。單擊菜單欄中“布局>IFRAME”,然后確定插入點。對于浮動框架的屬性設(shè)置，需要使用“快速標簽編輯器”，如下列屬性：width、height、name、scrolling=“auto”、frameborder、src（在這個浮動框架中顯示的頁面）八．模板和庫8.1模板創(chuàng)建模板創(chuàng)建模板在一個使用了模板的網(wǎng)站中，用戶可以修改摸板并立即更新所有基于該模板的文檔中的設(shè)計。在一個網(wǎng)站中，一些網(wǎng)頁有不同的欄目，不同的內(nèi)容，卻有相同的板式，這樣的網(wǎng)頁最適合采用模板技術(shù)創(chuàng)建。、首先要區(qū)分模板和使用了模板的頁面。在應用了模板的頁面的右上角會顯示“模板：index”的字樣。想將某一頁面創(chuàng)建為“模板”，執(zhí)行“文件>另存為模板”，彈出“另存模板”對話框。選擇站點并命名后確定，模板會保存在根文件夾中的一個特殊的Templates文件夾中，如果不存在，則自動創(chuàng)建。模板擴展名為.dwt。由模板生成的網(wǎng)頁上，哪些區(qū)域是可以編輯，需要預先設(shè)置。設(shè)置可編輯區(qū)域需要在制作模板的時候完成網(wǎng)頁上任意選中的區(qū)域都可以設(shè)置為可編輯區(qū)域。注，可以將整個表格或者是單個單元格設(shè)置為可編輯區(qū)域，但不能將多個單元格設(shè)置為一個可編輯區(qū)域。單擊“插入>模板>可編輯區(qū)域”，彈出“新建可編輯區(qū)域”對話框。確定唯一名稱后確定即可?？删庉媴^(qū)域在模板中由高亮顯示，左上角顯示該區(qū)域名稱。使用模板創(chuàng)建頁面在新建頁面中，執(zhí)行菜單欄中的“窗口>資源”命令打開“資源”面板。選擇“模板”類別。選擇其中“模板”，單擊“應用”即可。新網(wǎng)頁中左上角為模板名稱。更新模板及頁面保存模板時，如果已經(jīng)更改了模板的內(nèi)容，保存模板文件時會自動彈出更新頁面的提示，單擊“更新”按鈕?；蛘撸瑔螕簟靶薷?gt;模板>更新頁面”命令。Dreamweaver將在該模板所在的站點中更新基于模板的所有頁面。利用模板更新頁面，會大大的提高效率。8.2庫文件創(chuàng)建庫文件便于同一個元素自動的被多個站點中的頁面使用。創(chuàng)建庫文件創(chuàng)建庫文件單擊“資源”面板“庫”類別底部的“新建庫項目”按鈕，則新建了一個庫項目，并修改其名稱。返回到“文件”面板?？梢钥吹皆贚ibrary文件夾下出現(xiàn)了一個.lbi文件，這就是新建的庫文件。使用庫文件對新建的庫文件進行編輯，單擊“資源”面板中的，進行編輯。首先設(shè)置插入點，選擇所要插入的庫文件，單擊插入按鈕，將編輯好的庫文件插入相應的位置。更新庫文件如果對庫文件進行了修改，在保存庫文件時，會彈出“更新庫項目”對話框。確定“更新”即可。在確定“更新”后，會彈出“更新頁面”對話框。對頁面進行更新?；蛘咴凇靶薷?gt;庫>更新頁面”中設(shè)置頁面更新也可。九．CSS層疊樣式表CSS有兩方面作用，一方面設(shè)置網(wǎng)頁外觀；一方面為動態(tài)網(wǎng)頁創(chuàng)建提供條件。9.1CSS樣式表CSSCSS特點CSS樣式表的主要優(yōu)點是提供便利的更新功能；更新CSS樣式時，使用該樣式的所有文檔的格式都自動更新為新樣式。特點如下：控制頁面中的每一個元素。是對HTML語言處理樣式的最好補充。將內(nèi)容和格式處理相分離，減少工作量。CSS的樣式規(guī)則CSS樣式規(guī)則有兩部分組成：選擇器和聲明。選擇符{屬性：值}CSS的類型自定義CSS樣式（類樣式）：用戶可以將樣式的屬性設(shè)置為任何文本范圍或者文本塊。代碼：.self{屬性：值}HTML樣式：重定義特定標記（如h1）的格式，創(chuàng)建或更改h1標記的CSS樣式時，所有使用h1標記設(shè)置了格式的文本都立即更新。代碼：h1{屬性：值}CSS連接樣式：重定義與連接有關(guān)。代碼：A:link{屬性：值}、A：active{屬性：值}等。添加疊樣式表的方法直接在標記中定義:eg.<pstyle=”屬性：值”>文本</p>添加在HTML的<head></head>之間。eg.<styletype=””text/css><!———></style>連接樣式表<linkrel=stylesheethref=”style.css”>9.2CSS在網(wǎng)頁中的應用9.2.1CSS美化頁面類樣式類樣式類樣式是唯一可以應用于文檔中任何文本的CSS樣式表類型，與當前文檔關(guān)聯(lián)的所有自定義樣式都顯示在CSS面板中。打開“CSS樣式”面板，單擊“新建CSS規(guī)則”按鈕，打開“新建CSS規(guī)則”對話框，在“選擇器類型”中選擇“類”，填寫“選擇器名稱”（類樣式名稱必須以”.”開頭），設(shè)置相關(guān)屬性，確定即可。此時彈出“規(guī)則定義”對話框，設(shè)置好后，確定即可。對元素樣式進行設(shè)置，需要在“屬性”面板中的“目標規(guī)則”處選擇。如果要對CSS樣式表進行修改，需要在“CSS樣式”面板中尋找相應的樣式，在其“屬性”面板處修改即可。HTML樣式與類樣式不同的是，“選擇器類型”處選擇“標簽(重新定義HTML元素)”，名稱需要寫已有名稱（如稱（如td），意味著重定義該名稱td所定義的默認格式。復合內(nèi)容樣式02.“選擇器類型”選擇“復合樣式”，名稱需要寫已有名稱（如a:link），意味著重定義該名稱a:link所定義的默認格式。03.在彈出的“規(guī)則定義”對話框中，需要在“Text-decoration”選擇下劃線狀態(tài)。9.2.2使用CSS布局頁面添加添加div標簽，在添加標簽時，彈出“插入div標簽”對話框時，可以新建CSS樣式。選擇、修改或新建樣式。添加的標簽可以選擇相應的樣式，選擇相應的格式即可。也可以在“屬性”面板上的CSS部分進行修改或創(chuàng)建。Div+CSS布局將結(jié)構(gòu)與表現(xiàn)分離，是文檔內(nèi)代碼大量減少，只留下了頁面結(jié)構(gòu)代碼，方便對其進行閱讀。9.3使用外部CSS如果想要創(chuàng)建多個擁有相同樣式的文檔，可以使用外部CSS來實現(xiàn)。創(chuàng)建外部創(chuàng)建外部CSS在創(chuàng)建CSS樣式的時候，一般在“新建CSS規(guī)則”對話框中，“選擇定義規(guī)則的位置”會選擇“僅限該文檔”，而創(chuàng)建CSS外部CSS樣式則需要在此處，選擇“新建樣式表文件”。確定后命名保存即可。如果沒有在“新建CSS規(guī)則”的對話框中設(shè)置，并且已經(jīng)定義過內(nèi)部CSS，則需要在“CSS樣式”面板全選后，右擊鼠標選擇“移動CSS規(guī)則”，彈出“移至外部樣式表”對話框，選擇“新樣式表”確定后，移動至外部文件夾中。附加外部CSS單擊“CSS樣式”面板中的“附加樣式表”按鈕，在彈出的“鏈接外部樣式表”對話框中，選中鏈接按鈕，以連接的方式將剛才導入的外部CSS文件引入當前頁面。如果想要修改外部CSS樣式，可以打開CSS樣式表，然后直接修改代碼或者通過“CSS樣式”面板進行修改。9.4CSS更多設(shè)置一般常用的CSS設(shè)置還有文本設(shè)置（類>.title）、背景設(shè)置（標簽>body；其中Background-repeat定義背景圖書否以及如何重復，Background-attachment確定時候隨內(nèi)容滾動，Background-position（X/Y）確定背景圖像相對于元素的初始位置）、邊框設(shè)置（類>.input）、擴展設(shè)置（標簽>body；可以設(shè)置鼠標顯示）。十．行為的應用HTML只能實現(xiàn)靜止的網(wǎng)頁，網(wǎng)頁中的動態(tài)效果大多數(shù)都是通過javascript或者是基于javascript的DHTML語言來實現(xiàn)的。在Dreamweaver中可以通過行為來實現(xiàn)網(wǎng)頁動態(tài)效果。雖然也是基于javascript，但卻不需要書寫任何代碼，取而代之的是單擊幾個按鈕，設(shè)置幾個選項等可視化操作。事件相關(guān)代碼處理，識別動作，繼而產(chǎn)生相關(guān)事件。動作事件相關(guān)代碼處理，識別動作，繼而產(chǎn)生相關(guān)事件。動作用戶網(wǎng)頁變化10.1圖像行為首先單擊“窗口首先單擊“窗口>行為”，顯示“行為”面板。添加新行為下拉

溫馨提示

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

評論

0/150

提交評論