實驗一基礎網(wǎng)頁制作

1、實驗一 基礎網(wǎng)頁制作一、實驗目的：通過上機操作，使學習者熟悉 Dreamweaver 工作界面、對工作環(huán)境進行設置； 掌握如何使用 Dreamweaver 創(chuàng)建、保存或打開一個網(wǎng)頁文檔； 了解使用 Dreamweaver 可以創(chuàng)建和打開哪些文檔；掌握如何創(chuàng)建本地站點；掌握如何使用歷史面板撤消或 重復操作。二、實驗內(nèi)容：1.熟悉 Dreamweaver 工作界面并進行首選參數(shù)設置；2. 創(chuàng)建本地站點3. 創(chuàng)建網(wǎng)頁文檔；4. 設置頭文件標簽；5. 使用歷史記錄面板。6. 將實驗一的唐詩文件整理，放入站點內(nèi)。三、實驗要求：1.熟悉 Dreamweaver 工作界面并進行首選參數(shù)設置認識 Dreamw

2、eaver 界面的組成、各個菜單項包含哪些命令，并根據(jù)個人的喜好 和需要進行首選參數(shù)設置。2.創(chuàng)建本地站點 完成站點的創(chuàng)建、修改、刪除等操作，并理解站點在網(wǎng)站設計中的重要性。3.創(chuàng)建網(wǎng)頁文檔采用兩種方式： 直接向網(wǎng)頁中添加文本； 將 word 文檔導入網(wǎng)頁中， 并對文本進 行屬性設置。3.設置頭文件標簽 認識各項頭文件標簽的作用，向頭文件中添加說明信息，并在“代碼”面板中查看說明信息。5使用歷史記錄面板使用歷史面板重復或者撤消操作。四、實驗學時：4學時五、實驗步驟：練習一：熟悉Dreamweaver工作界面并進行首選參數(shù)設置1. 啟動 Dreamweaver（1）選擇【開始】|【程序】|Mac

3、romedia|Dreamweaver命令，打開Dreamweaver 的初始工作界面（如圖1.1），第一次啟動Dreamweaver需要選擇工作界面。 其中【代 碼編輯者】是純代碼編輯界面，適合對網(wǎng)頁編程有很高水平的設計者。選擇【設計者】是本實驗后面所介紹的使用界面。（2） 選擇【設計者】工作界面，單擊【確定】按鈕，將進入圖1所示的工作界面。Adobe Dreuvearer CS3； |Ll| X立:辭 Hi 褊倨隆改 Mi St3： m 點冷（T） 站點臨）河口 rtU£審 Mi AX 用ftf ftfBE* DREAMWEAVER佇占M，蚯的琥冃 總程序門心html :陰&qu

4、ot;切氏應兗胖“T hUml Tiwre-bAMibu hbnl nrwh/slyie cat nywebm&lbu.hirnl nywa-bTc.hu anting html nyweWUnirtl Bd-J.lrtml nywe-b/5 hili.hEml wuywffh/cfrylgg hfrnl CJ幵口nrlTlrlIJiatjdbJHTMLColdFusionRHPABFVBSCrtptXSLTC 3EM >80Javas&npit梵ALDrpamwwawRr 站點.TJ cm宮祥式ifeT21 lose 黑lJ砂頁 < 主甌> Ti超姒頁（3&

5、#163;打 B JE$ .s i Drc amwiQafN'cr EHEhanpiR vn 礪増功繼” 專iffl > 性:主沁：IE證:i趣辭i評六1|5； Ajj-i ifj.* fcl . -匚勢1= 應用怪手il存站呻曾后:拄鍛塞ujiriiw ll I 丨iLEHPr計曲歷史記鼻圖1.1 Dreamweaver歡迎界面2 .熟悉 Dreamweaver的工作界面啟動Dreamweaver，一個包含空白文檔的Dreamweaver的工作界面就呈現(xiàn)在你的面前了。Dreamweaver工作界面各部分組成如圖1.2所示。折彩檢杏戢m x先煉題丈檔面板組童署世）插人修BI &#

6、174;文不（X）侖會站點窗口帝肋QPvetiLvex- 8 一 Llfnt i tl ed-1馳曰越空回里F #1 F畫圧T VJ | B F標題:標題欄菜單欄£昭換-文件<bodv>!| T廟性常用工具欄乳I譽I+“FF1竝 FTF * RD5二桌面項目格式宇體拝式可 大比H 日吉I圖1.2 Dreamweaver的工作界面注：各個工作區(qū)的作用參考教材P8 “ 1.4Dreamweaver的工作區(qū)”這一節(jié)。3.設置首選參數(shù)選擇【編輯】|【首選參數(shù)】，打開首選參數(shù)對話框，如圖1.3 所示XJIIBS霽 ili丈檔選頊：P縣示起贈可廠啟動時重新打開文檔(£)P打

7、開只讀立件時轡告用戶(1) 移動玄件時更新璉捋業(yè)):展奈 刁満輯逵頂；回插入球擁吋顯示時話框広)117允許弱字節(jié)內(nèi)聯(lián)輸入(E)P標題后切換到晉週趾篦17朮許多個連續(xù)的空格吵P 用 <slFdng> 和 <«代替 <h> 和 <i>(l£)P便用CSS両不是HTML標簽P S <#> SE <bl><hE>標簽中放送可蹄醫(yī)城時塩出程告 歷史步囁颯吳次數(shù)F排益宇典- I英語o國53確定 | 取梢 | 幫助 |圖1.3首選參數(shù)設置此處設置歷史步驟最多次數(shù)設多點。練習二：創(chuàng)建本地站點要制作一個能夠被大家瀏

8、覽的網(wǎng)站，首先需要在本地磁盤上制作這個網(wǎng)站，然后把這個網(wǎng)站傳到互聯(lián)網(wǎng)的web服務器上。放置在本地磁盤上的網(wǎng)站被稱為本地站點，位于互聯(lián)網(wǎng) web服務器里的網(wǎng)站被稱為遠程站點。Dreamweaver提供了對本地站點和遠程站點強大的管理功能。1.規(guī)劃站點結(jié)構(gòu)網(wǎng)站是多個網(wǎng)頁的集合，其包括一個首頁和若干個分頁，這種集合不是簡單的集合。為了達到最佳效果，在創(chuàng)建任何Web站點頁面之前，要對站點的結(jié)構(gòu)進行設計和規(guī)劃。決定要創(chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及各頁 是如何互相連接起來的。我們可以通過把文件分門別類的放置在各自的文件夾里，使網(wǎng)站的結(jié)構(gòu)清晰明 了，便于管理和查找。2. 創(chuàng)建站點在Dre

9、amweaver中可以有效的建立并管理多個站點。搭建站點可以有兩種方法, 一是利用向?qū)瓿?，二是利用高級設定來完成（自己完成高級設定步驟）。在搭建站點前，我們先在自己的電腦硬盤上建一個以英文或數(shù)字命名的空文件 夾。（1）選擇菜單欄【站點】|【管理站點】，出現(xiàn)“管理站點”對話框。點擊“新建”按鈕，選擇彈出菜單中的“站點”項。，如圖1.4所示。圖1.4管理站點（2 ）在打開的窗口上方有“基本”和“咼級”兩個標簽，可以在站點向?qū)Ш蛦J級設置之間切換?？梢韵冗x擇 ”高級”標簽，如下圖所示：填寫相應內(nèi)容即可。也可以選擇“基本”標簽，如圖1.5所示。圖1.5(3)在文本框中，輸入一個站點名字以在Dreamw

10、eaver中標識該站點。這個名字可以是任何你需要的名字。單擊“下一步”。出現(xiàn)向?qū)У南乱粋€界面，詢問是否要使用服務器技術(shù)，如圖1.6所示。我們現(xiàn)在建立的是一個靜態(tài)頁面，所以選擇“否”圖1.6(4)點下一步，在文檔框設置本地站點文件夾的地址。如圖1.6所示。圖1.7(5 )點下一步，進入站點定義，我們將在站點建設完成后在與FTP鏈接，這里選擇“無”，如圖1.8所示。圖1.8(6)單擊“完成”按鈕，結(jié)束“站點定義“對話框的設置，如圖1.9所示。xnwcb的站點定義為圖1.9(7)單擊“完成”按鈕，“管理站點”窗口中會顯示剛才建立的站點名。如圖1.10所示。圖 1.101.11(5)到此，我們完成了站

11、點的創(chuàng)建。 文件面板顯示出剛才建立的站點如圖所示。圖 1.113. 搭建站點結(jié)構(gòu)站點是文件與文件夾的集合，下面我們根據(jù)前面對 xmweb網(wǎng)站的設計，來新建xmweb站點要設置的文件夾和文件。新建文件夾，在文件面板的站點根目錄下單擊鼠標右鍵，從彈出菜單中選擇 新建文件夾”項（如圖1.12所示），然后給文件夾命名。這里我們創(chuàng)建新建8個文件夾，分別命名為： img、med swf、txt、css、js、moan和 fy 。圖 1.12創(chuàng)建頁面，在文件面板的站點跟目錄下單擊鼠標右鍵，從彈出菜單中選擇 新建文件”項，然后給文件命名。首先要添加首頁，我們把首頁命名為index.html，再分別新建 01.

12、html、02.html、03.html、03.html 和 05.html。如圖 1.13 所示。圖 1.133編輯和刪除站點選擇菜單【站點】|【管理站點】，彈出圖1.14所示的窗口:圖 1.14單擊“編輯”選項，彈出“站點定義為”窗口，此時可以編輯站點信息。如圖 1.15所示。圖 1.15若選擇“刪除”選項，則彈出如圖1.16提示窗口:圖 1.16單擊“是”，刪除該站點，這個動作無法恢復，所以操作的時候要謹慎。練習三：創(chuàng)建網(wǎng)頁文檔（1）啟動Dreamweaver軟件，選擇【文件】|【新建】命令打開【新建文檔】對話框，如圖1.17所示，從【類別】列表中選擇【基本頁】，從右側(cè)的列表中選擇HTM

13、L選項，然后單擊【創(chuàng)建】按鈕建一個空白文檔。(2)選擇(見圖1.Sf建文檔鬲規(guī)怏文著與irnnt菇容©幫肋曲| 首選養(yǎng)數(shù).|靱酋監(jiān)莊眾帀容內(nèi)容.刨建曲圖1.17【新建文檔】對話框可以直接在網(wǎng)頁工作區(qū)輸入文本，還可以導入已有文檔?！疚募縷【導入】命令可以看到，Dreamweaver支持導入多種類型的文檔18 ）。圖1.18【導入】子菜單在這里我們選擇【W(wǎng)ord文檔】，彈出【導入 Word文檔】對話框(如圖1.19)。圖1.19【導入 Word文檔】對話框(3)在【導入 Word文檔】對話框中選擇要導入的Word文件，單擊【打開】按鈕，將在網(wǎng)頁文檔中顯示該Word文檔的內(nèi)容，如圖1.2

14、0所示。-D1 X£畫麗畫鬲陽兩勰；匡標敕檔1at 匕通過本課程的學習.使學生能轄達對敬下目標：' 了解參霖俸的定義、分咲及其岌厭勢；的語音騙閃技術(shù)，了解音頻蝙碼標準1韋握數(shù)需壓縮的基本原理和常用方法；1拿握CD的工柞原理、勒理格財邏輯格武；孰悉VCD和DVD的基本器檜和工作療理1'幀爭探體硬件諭備的使用方毘； r解多煤體網(wǎng)鋼應用的技術(shù)和方法！A堂梅HTML和KKL語肓的覩蔬劇旬用*VOody。CT6 x 233.K / £ 秒圖1.20導入文檔后效果練習四：設置頭文件標簽(1) 啟動Dreamweaver，創(chuàng)建空白文檔。選擇【插入記錄】工具欄中的 HTML

15、 選項卡，切換到頭文件插入欄。(2) 單擊【文件頭】按鈕，在彈出菜單中選擇【說明】按鈕，打開【說明】對 話框，如圖1.21所示。圖1.21【說明】對話框1.22所示。(3) 將文檔切換到【代碼】視圖，查看說明信息，如圖< IDOCTYPE KIID. PTm.IC -/A3C/DJD HTW. <l-0 Tvajsitional/F)TV rt'httpE/Zww- *3, or j/TE/ht/ loose. dtdrt ><htnl><head><*eta ht t p-e q.uiv= "Cent ent-Typ-e&qu

16、ot; cont ent=* t ext /htr1 ; charset=gb23l2Jr> it無標題文檔</title>najie= n descrlptian- cont en±=-這是第二次上機柞業(yè)自</he：ad><body></body>圖1.22【代碼】視圖中的說明信息(4) 自己試著加入 meta關(guān)鍵字，關(guān)鍵字專門為搜索引擎而提供，不同的關(guān)鍵 字之間用逗號隔開。<Meta rLame=<rKeywordsr, content=r,病垂 > 手機"/>練習五：使用歷史記錄面板在【歷史

17、記錄】面板中，記錄了用戶在【文檔】窗口中操作的歷史，使用【歷史記錄】可以撤消或重復操作步驟。（1）選擇【窗口】|【歷史記錄】命令，打開【歷史記錄】面板，如圖 1.23所 示。B 歷史記錄耳"目描述：name= *deseripti -匡| 表格：table widthFSOO"* loo臣調(diào)整大小；236. 90A鍵入ooooo昌設置背景験色：#FF0030A鍵入Um昌設置對齊方式：匚曲泄制作超璉接：圖1.23【歷史記錄】面板（2 ）如果想要撤消對【文檔】窗口的操作，拖動【歷史記錄】面板中的滑塊，選中要撤消的操作，被選中的操作呈灰色。如圖1.24所示。這是【文檔】窗口回到 撤消操作后的狀態(tài)。T歷史記錄遷述：Kmieta iLajne=4rlaseript 11乍目表格:Stable widtkif200|W bos0調(diào)整犬??；236, 90A 鍵入：00000設置背員顏色：#FFUODDAA： mil圖1.24選中要撤消的操作（顯示為灰色）（3）如果要恢復操作則可以重新拖動滑塊到相應位置，這樣就可以恢復被撤消的動作。如果撤消操作后進行了新的操作，則原來被撤消的操作就不能再被恢復了。（4 ）如果要清空記錄，單擊【歷史記錄】面板右上方的按鈕，或者在【歷史記錄】面板中右擊，在彈出的快