使用Dreamweaver制作個人網(wǎng)站_第1頁
使用Dreamweaver制作個人網(wǎng)站_第2頁
使用Dreamweaver制作個人網(wǎng)站_第3頁
使用Dreamweaver制作個人網(wǎng)站_第4頁
使用Dreamweaver制作個人網(wǎng)站_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第2章使用Dreamweaver制作個人網(wǎng)站學(xué)習(xí)目標(biāo)：1)了解Dreamweaver的工作界面，掌握創(chuàng)建及管理一個站點(diǎn)的方法。2)掌握網(wǎng)頁文檔的創(chuàng)建、保存、關(guān)閉等基本操作。3)掌握插入普通文本、特殊文本、圖像、表格等網(wǎng)頁基本元素的方法，能創(chuàng)建文本、圖像、錨點(diǎn)等超級鏈接。4)理解CSS規(guī)則，能創(chuàng)建簡單的CSS樣式表。5)了解常用的增添網(wǎng)頁特效的行為、DIV的基礎(chǔ)常識。2.1需求分析個人網(wǎng)站的欄目因個人興趣愛好所致各有不同，可根據(jù)主題需要，確定網(wǎng)站欄目和主色調(diào)。本實(shí)例需要實(shí)現(xiàn)的功能模塊包括個人簡介（用以介紹個人基本信息）、個人相冊（用以呈現(xiàn)家庭、朋友及個人的溫馨照片）、攝影作品（用以呈現(xiàn)個人感興趣的攝影作品）、其他作品（包括網(wǎng)站作品、平面作品、DV作品等）、請您留言（可以讓瀏覽者在此提出一些建議或意見等）和在線聊天（提供給用戶交流的一個平臺）2.2任務(wù)分解2.2.1網(wǎng)站制作工具DreamweaverCS4的熟練操作2.2.2站點(diǎn)的規(guī)劃與創(chuàng)建2.2.3網(wǎng)頁文檔的基本操作2.2.4網(wǎng)頁基本元素的插入2.2.5創(chuàng)建網(wǎng)頁超鏈接2.2.6使用CSS美化網(wǎng)頁2.2.7使用行為增添網(wǎng)頁特效2.2.1任務(wù)一：DreamweaverCS4簡介菜單欄工具欄文檔編輯區(qū)屬性面板狀態(tài)欄插入面板2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建1.站點(diǎn)規(guī)劃2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建2.站點(diǎn)創(chuàng)建2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建2.站點(diǎn)創(chuàng)建2.2.2任務(wù)二：站點(diǎn)的規(guī)劃與創(chuàng)建2.站點(diǎn)創(chuàng)建2.2.3任務(wù)三：網(wǎng)頁文檔的基本操作

1.新建個人網(wǎng)站網(wǎng)頁文檔

（1）在“頁面類型”一欄的選項里，靜態(tài)網(wǎng)頁選擇“HTML”，動態(tài)網(wǎng)頁則選擇相應(yīng)的頁面類型。（2）如果希望網(wǎng)頁文檔不包含任務(wù)CSS布局，選擇“無”；否則，從“布局”列表中選擇預(yù)設(shè)的CSS布局。（3）如果在“布局”列表中選擇了一個布局，則在“布局CSS位置”中需要為其選擇一個位置。（4）“首選參數(shù)”項可以設(shè)置文檔的默認(rèn)首選參數(shù)，例如文檔類型、編碼類型和文件擴(kuò)展名等。2.2.3任務(wù)三：網(wǎng)網(wǎng)頁文檔的的基本操作作2.保存網(wǎng)頁文文檔3.打開網(wǎng)頁文文檔4.關(guān)閉網(wǎng)頁文文檔2.2.4任務(wù)四：網(wǎng)網(wǎng)頁基本元元素的插入入1.插入布局（1）表格布局局表格既可以以作為一種種元素豐富網(wǎng)網(wǎng)頁內(nèi)容也也可以作為一一種布局工工具使網(wǎng)頁的的整體更加加有條理2.2.4任務(wù)四：網(wǎng)網(wǎng)頁基本元元素的插入入1.插入布局（2）框架布局局2.2.4任務(wù)四：網(wǎng)網(wǎng)頁基本元元素的插入入1.插入布局（2）框架布局局框架提供將將一個瀏覽覽器劃分成成幾個區(qū)域域的方法，，在每個區(qū)區(qū)域里可以以顯示不同同的頁面，，每個frame里的網(wǎng)頁相相互獨(dú)立。?？蚣芗瘎t則定義了一一組框架的的布局、屬屬性等?？蚩蚣芗旧砩聿话跒g覽器器中顯示的的頁面內(nèi)容容，它只是是向?yàn)g覽器器提供如何何顯示一組組框架以及及在這些框框架中應(yīng)該該顯示哪些些文檔的信信息。2.2.4任務(wù)四：網(wǎng)網(wǎng)頁基本元元素的插入入2.插入內(nèi)容（1）文本元素素的插入與與編輯1）普通文本本可以直接接在文檔窗窗口中鍵入入，也可以以從其他應(yīng)應(yīng)用程序或或窗口中復(fù)復(fù)制粘貼，，例如Word，TXT文件等。2）Dreamweaver也提供了插插入特殊文文本的菜單單，選擇““插入/HTML/特殊字符””菜單命令令，可以看看到軟件為為用戶提供供的較為常常見的多種種特殊字符符。3）在Dreamweaver里插入空格格的做法是是將輸入法法切換到中中文輸入狀狀態(tài)，并將將全角打開開，此時用用戶只要在在想要插入入空格的地地方敲擊空空格鍵，即即可以實(shí)現(xiàn)現(xiàn)空格的輸輸入；在HTML代碼中插入入

即可以實(shí)現(xiàn)現(xiàn)空格。2.2.4任務(wù)四：網(wǎng)網(wǎng)頁基本元元素的插入入2.插入內(nèi)容（2）圖像元素素的插入用于網(wǎng)站制制作的圖像像要求是gif，jpg，png，psd中的一種2.2.4任務(wù)四：網(wǎng)網(wǎng)頁基本元元素的插入入2.插入內(nèi)容（3）其他媒體體的插入其他媒體包包括音頻、、視頻、動動畫等選擇“插入入/媒體/SWF””菜單命令，，或者在插插入面板中選擇擇“媒體/SWF””2.2.5任務(wù)五：創(chuàng)創(chuàng)建網(wǎng)頁超超級鏈接1.文本超級鏈鏈接文本超級鏈鏈接是運(yùn)用用最普遍的的一種超級級鏈接方式式，這里的的文本可以以是字、詞詞、短語、、句子等。。2.2.5任務(wù)五：創(chuàng)創(chuàng)建網(wǎng)頁超超級鏈接2.圖片超級鏈鏈接（1）單張圖片片的超級鏈鏈接選中圖像，，在“屬性性”面板的的“鏈接””文本框中中輸入要鏈鏈接的目標(biāo)標(biāo)，包括網(wǎng)網(wǎng)頁、圖像像、應(yīng)用程程序等（2）熱區(qū)超級級鏈接插入圖片，，并選中圖圖片，用展展開的屬性性面板上的的繪圖工具具在畫面上上繪制熱區(qū)區(qū)2.2.5任務(wù)五：創(chuàng)創(chuàng)建網(wǎng)頁超超級鏈接3.錨點(diǎn)超級鏈鏈接（1）將光標(biāo)置置于文檔窗窗口想要設(shè)設(shè)置錨點(diǎn)的的地方；（2）選擇“插插入/命名錨記””菜單命令令，或者在在插入面板板中單擊““命名錨記記”，并輸輸入錨記名名稱，注意意錨點(diǎn)區(qū)分分大小寫；；（3）在文檔窗窗口中，選選擇要建立立超級鏈接接的文本或或圖像，在在屬性面板板中的鏈接接文本框中中，輸入#和錨點(diǎn)名，，例如#top。（4）保存預(yù)覽覽或按F12預(yù)覽并進(jìn)行行修改。2.2.5任務(wù)五：創(chuàng)創(chuàng)建網(wǎng)頁超超級鏈接4.電子郵件超超級鏈接（1）將光標(biāo)置置于要顯示示電子郵件件超級鏈接接的地方，，或者選定定希望顯示示電子郵件件超級鏈接接的文本、、圖片等。。（2）選擇“插插入/電子郵件超超級鏈接””菜單命令令，或者在在插入面板板中單擊““電子郵件件超級鏈接接”。（3）在“文本本”文本框框中輸入要要顯示超級級鏈接的文文本，如果果事先已經(jīng)經(jīng)選擇了文文本，該文文本框會自自動將文本本顯示出來來，在“E-mail”文本框中輸輸入郵箱地地址，如service@163.com，如圖2-30所示。（4）單擊確定定并進(jìn)行測測試2.2.5任務(wù)五：創(chuàng)創(chuàng)建網(wǎng)頁超超級鏈接5.腳本超級鏈鏈接和空鏈鏈接（1）腳本超級級鏈接在屬性面板板的“鏈接接”文本框框中，鍵入入Javascript：Javascript代碼例如：javascript:window.close();（2）空鏈接空鏈接是未未指派的鏈鏈接。空鏈鏈接主要用用于頁面上上的對象或或文本附加加行為。例如，可向向空鏈接附附加一個行行為，以便便在滑過該該鏈接時會會交換圖像像或顯示絕絕對定位的的元素。2.2.6任務(wù)六：使用用CSS美化頁面CSS（CascadingStyleSheets）層疊樣式表表，是一種標(biāo)標(biāo)記語言，它它是一系列用用來美化和布布局網(wǎng)頁的格格式設(shè)置規(guī)則則?！皩盈B”指對對同一個元素素或Web頁面應(yīng)用多個個樣式的能力力。例如，創(chuàng)創(chuàng)建一個CSS規(guī)則來應(yīng)用字字體顏色，創(chuàng)創(chuàng)建另一個規(guī)規(guī)則應(yīng)用行距距，然后將兩兩者應(yīng)用于一一個頁面的同同一段文本。。CSS涉及網(wǎng)頁字體體、顏色、邊邊距、高度、、寬度、圖像像顯示方式、、表格顯示等等等2.2.6任務(wù)六：使使用CSS美化頁面1.應(yīng)用CSS的方法（1）內(nèi)部樣式式表網(wǎng)頁文檔應(yīng)應(yīng)用CSS的一種常用用方法，是是采用HTML元素的style屬性實(shí)現(xiàn)的的。該樣式式添加在<head></head>區(qū)塊之間2.2.6任務(wù)六：使使用CSS美化頁面1.應(yīng)用CSS的方法（2）外部樣式式表外部樣式表表是把樣式式單獨(dú)地寫寫在一個文文件里，并并以擴(kuò)展名名為.CSS的文本文件件存儲2.2.6任務(wù)六：使使用CSS美化頁面1.應(yīng)用CSS的方法（3）行內(nèi)樣式式在運(yùn)用樣式式之后，可可以為單個個元素添加加特殊的樣樣式信息。。它是使用用HTML代碼里的樣樣式屬性style實(shí)現(xiàn)的。例如：<pstyle="font-size:20pt;font-family:黑體;color:red;">特殊字體</p>2.2.6任務(wù)六：使使用CSS美化頁面2.創(chuàng)建CSS樣式（1）選擇“窗窗口/CSS樣式”菜單單命令，在在屏幕右側(cè)側(cè)CSS樣式面板的的右上側(cè)點(diǎn)點(diǎn)擊“新建建”，或者者在屬性面面板左側(cè)找找到“CSS”標(biāo)簽，點(diǎn)擊擊編輯規(guī)則則。（2）輸入CSS樣式名稱、、標(biāo)記或選選擇器。（3）在“CSS規(guī)則定義””對話框中中可以對類類型、背景景、區(qū)塊、、方框、邊邊框、列表表、定位及及擴(kuò)展共8項進(jìn)行設(shè)置置。（4）創(chuàng)建好的的CSS樣式可以再再進(jìn)行修改改和完善。。2.2.7任務(wù)七：使使用行為增增添網(wǎng)頁特特效Dreamweaver提供了一種種稱為“行行為”（Behavior）的機(jī)制，，用來幫助助用戶建構(gòu)構(gòu)頁面中的的交互行為為。行為，顧名名思義，就就是在網(wǎng)頁頁中進(jìn)行的的一系列動動作，通過過這些動作作可以實(shí)現(xiàn)現(xiàn)用戶與頁頁面的交互互。一個行為一一般由動作作和事件組組成，動作作是用來完完成特定任任務(wù)預(yù)先編編譯好的Javascript代碼，例如如交換圖片片、彈出式式菜單等，，而事件則則是動作觸觸發(fā)的結(jié)果果。2.3開發(fā)流程2.3.1頁面設(shè)計2.3開發(fā)流程2.3.2開發(fā)過程（1）首頁制作作2.3開發(fā)流程2.3.2開發(fā)過程（2）導(dǎo)航欄制制作2.3開發(fā)流程2.3.2開發(fā)過程（3）內(nèi)頁的設(shè)設(shè)計與開發(fā)發(fā)2.4拓展知識2.4.1HTML的相關(guān)知識識1.文件結(jié)構(gòu)2.4拓展知識2.4.1HTML的相關(guān)知識識1.文件結(jié)構(gòu)（1）HTML標(biāo)簽以<>標(biāo)志（2）HTML標(biāo)簽通常是是成對出現(xiàn)現(xiàn)的，例如如文檔的主主體<body></body>?！?”就是打開標(biāo)標(biāo)簽和關(guān)閉閉標(biāo)簽的區(qū)區(qū)別。個別別標(biāo)簽是不不需要結(jié)束束標(biāo)志的，，例如換行行<br>。（3）HTML代碼編寫時時要有層次次感，<head></head>和<body></body>標(biāo)簽包括在在<html></html>里，在書寫寫時往內(nèi)推推進(jìn)一個tab鍵，依次類類推。這樣樣書寫的目目地是使代代碼更加清清晰。（4）HTML不區(qū)分大小小寫2.4拓展知識2.4.1HTML的相關(guān)知識識1.HTML的其他標(biāo)簽簽（1）HTML標(biāo)題:<h1>Hheading</h1>（2）HTML段落：<p>Paragraph.</p>（3）HTML水平線：<hr/>（4）HTML注釋：<!--Thisisacomment-->（5）meta標(biāo)簽：<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>（6）文字字標(biāo)簽簽：<font></font>2.4拓展知知識2.4.2使用DIV元素1.插入DIV標(biāo)簽2.APDIV的插入入2.4拓展知知識2.4.3模板與與庫1.模板（1）直接接創(chuàng)建建模板板（2）將網(wǎng)網(wǎng)頁轉(zhuǎn)轉(zhuǎn)存為為模板板（3）從新建建文件中中創(chuàng)建模模板2.庫模板用來來制作不不同網(wǎng)頁頁的相同同部分，，庫則是是面向網(wǎng)網(wǎng)頁局部部相同部部分的。。本章小結(jié)結(jié)Dreamweaver工作界面面部分要要求掌握握一些常常用的菜菜單、工工具以及及界面的的構(gòu)成。。站點(diǎn)建立立部分旨旨在要

溫馨提示

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

評論

0/150

提交評論