《電子政務實驗總結(jié).doc》由會員分享,可在線閱讀,更多相關(guān)《電子政務實驗總結(jié).doc(39頁珍藏版)》請在裝配圖網(wǎng)上搜索。
電子政務
實驗指導書
成賢學院
2011年9月
目錄
實驗一 熟悉HTML(2學時) 3
實驗二 使用 Dreamweaver 站點(2學時) 12
實驗三 創(chuàng)建和管理文件(2學時) 17
實驗四 使用 HTML 對頁面進行布局(2學時) 23
實驗五 Dreamweaver綜合練習(2學時) 35
實驗六 Flash綜合練習(2學時) 37
實驗七 Fireworks綜合練習(2學時) 38
實驗一 熟悉HTML(2學時)
[實驗目的]
基本要求:
掌握HTML的基本結(jié)構(gòu),了解幾類重要的HTML元素
重 點:
標記文本。
難 點:
對內(nèi)聯(lián)文本元素和泛型元素的認識,能夠根據(jù)需要綜合使用各種HTML元素。
[實驗內(nèi)容]
一、 綜合演練——熟悉HTML
1. 創(chuàng)建簡單網(wǎng)頁
2. 標記文本
3. 使用鏈接
4. 加入圖片
5. 基本表格標記
6. 表單
7. 驗證文檔
[綜合演練1實驗步驟] ——熟悉HTML
創(chuàng)建簡單網(wǎng)頁
輸入內(nèi)容
1. 在文本編輯器輸入如圖0-1所示的文本,請保持一樣的格式。
圖0-1
2. 創(chuàng)建一個文件夾命名為“bistro”,將上述文件保存在“bistro”中并命名為“index.html”。
3. 在瀏覽器中打開“index.html”,并使用截圖軟件將頁面保存到一個word文檔中命名為“HTML文檔的變化.doc”。
添加基本結(jié)構(gòu)
1. 在文本編輯器中打開index.html.
2. 在開頭添加開始標簽,在結(jié)尾添加結(jié)束標簽
3. 創(chuàng)建文檔的,并在元素內(nèi)添加標題文字“Black Goose Bistro”,用
元素包圍該文字
4. 將原文檔中的文字內(nèi)容全部裝入元素中
5. 保存文檔并在瀏覽器中打開觀察文檔的變化,并使用截圖軟件將頁面同樣保存到 “HTML文檔的變化.doc”中。
定義文本元素
1. 打開index.html.
2. 將文本第一行“Black Goose Bistro”標記為一級標題元素h1。方法是將其置于
…
之間,即
Black Goose Bistro
3. 用同樣的方法將“The Restaurant”、“Catering Services”、“Location and Hours”標記為二級標題元素h2。
4. 將每個h2元素后面的一小段文字標記為段落p元素
5. 在“Catering Services”的文字部分中,用強調(diào)文本元素em標記“well do the cooking.”這一句話形成強調(diào)效果。
6. 保存文檔并在瀏覽器中打開觀察文檔的變化,并使用截圖軟件將頁面同樣保存到 “HTML文檔的變化.doc”中。
請思考:什么是HTML中的塊元素,什么是內(nèi)聯(lián)元素?以上使用的元素中哪些是塊元素,哪些是內(nèi)聯(lián)元素?什么元素是泛型元素?
添加圖像
1. 將圖片文件“blackgoose.gif”保存到“bistro”文件夾中。
2. 將圖像元素插入一級標題元素的開頭標記之后,如下所示
Black Goose Bistro
3. 保存文檔并在瀏覽器中打開觀察文檔的變化,并使用截圖軟件將頁面同樣保存到 “HTML文檔的變化.doc”中。
使用樣式表改變外觀
1. 打開index.html.
2. 將style元素插入文檔的head部分,如下圖所示。保存文檔并在瀏覽器中打開觀察文檔的變化,并使用截圖軟件將頁面同樣保存到 “HTML文檔的變化.doc”中。
請注意此處無空格
標記文本
構(gòu)建塊
1. 請向具有基本文檔結(jié)構(gòu)元素網(wǎng)頁文本(標記文本-構(gòu)建塊.txt)中添加塊元素,使其瀏覽效果如圖0-2所示??赡軙玫降奈谋緣K元素可參考表0-1。
表0-1 文本塊元素參考
標題
h1-h6
段
p
長引用
blockquote
預格式化
pre
作者聯(lián)系信息
address
無序列表
ul
有序列表
ol
列表項
li
定義列表
dl
術(shù)語
dt
定義
dd
圖0-2 網(wǎng)頁效果示意圖
綜合應用
1. 請向具有基本文檔結(jié)構(gòu)元素網(wǎng)頁文本(標記文本-綜合練習.txt)中添加塊元素,使其瀏覽效果如圖0-3所示?;静襟E如下:
(1) 首先輸入文檔結(jié)構(gòu)元素。給文檔賦予標題“Black Goose Bistro Summer Menu”。
(2) 使用div元素將網(wǎng)頁分為四個獨立的部分,以此命名為“header”、“appetizers”、“main”和“warning”。
(3) 確定一級標題和二級標題。在一級標題中將直條字符改為項目符號字符。
(4) 使餐館信息獨立成段。刪除“Massachusetts”后的冒號,使用br元素在新行開始“hours”。
圖0-3 頁面效果圖
鏈接
相對路徑和絕對路徑
注意:絕對路徑是指在鏈接路徑中使用絕對URL地址,即包括協(xié)議、域名和文件路徑。相對路徑描述了鏈接網(wǎng)頁相對于當前文檔的路徑名,不需要協(xié)議或域名,只需要網(wǎng)頁路徑。
網(wǎng)頁路徑遵循Unix習慣,使用正斜線(/)隔開目錄和文件名,相對路徑名描述了從當前文檔的位置開始,如何獲取鏈接文檔。
當要鏈接到高層文件時,使用專用的點點斜(../)約定代表向上一層,向上兩層就用兩個點點斜(../../),以此類推。
相對網(wǎng)站根路徑名則在路徑開頭用“/”代表根目錄,然后按照需要書寫后面的路徑。
1. 請在如圖0-4所示的網(wǎng)站結(jié)構(gòu)中,按要求寫出鏈接的路徑。
鏈接到低層:index.html指向 salmon.html的鏈接; index.html指向 couscous.html的鏈接
鏈接到高層:salmon.html指向index.html的鏈接; couscous.html指向index.html的鏈接
要求寫出相對鏈接和絕對鏈接兩種方式。
About.html
index.html
Image1.gif
Image2.gif
Salmon.html
tapenade.html
couscous.html
linguine.html
我的廚房
Images/
Recipes/
pasta/
圖0-4
為文檔添加鏈接
1. 創(chuàng)建外部鏈接
打開jenskitchen文件夾中的文件index.html。將列表項“Epicurious”指向網(wǎng)頁www. epicurious.com,例如,
完成后保存index.html并在瀏覽器中打開,點擊鏈接觀察變化。
2. 相同目錄中的鏈接
打開jenskitchen文件夾中的文件about.html。創(chuàng)建網(wǎng)頁底部的段落“Back to the home page”指回主頁的鏈接。記住錨元素一定要包含在p元素中。
Back to the home page
保存about.html并在瀏覽器中點擊鏈接查看變化。
3. 鏈接到低層目錄
打開jenskitchen文件夾中的文件index.html。創(chuàng)建列表項“Tapenade(Olive Spread)”到recipes目錄中文件tapenade.html的鏈接。
tapenade
完成后保存index.html并在瀏覽器中打開,點擊鏈接觀察變化。
4. 鏈接到低層目錄
打開jenskitchen文件夾中的文件index.html。創(chuàng)建列表項“Linguine with Clam Sauce”到pasta目錄中文件linguine.html的鏈接。
linguine
完成后保存index.html并在瀏覽器中打開,點擊鏈接觀察變化。
5. 鏈接到高層目錄
打開recipes目錄中的文件tapenade.html。在網(wǎng)頁底部可以看到下面段落。
Back to the home page
,
使用相對路徑使文本鏈接到主頁index.html。完成后保存tapenade.html并在 瀏覽器中打開,點擊鏈接觀察變化。
6. 鏈接到上兩層目錄。
打開linguine.html。在網(wǎng)頁底部可以看到下面段落。
Back to the home page
使用相對路徑使文本鏈接到主頁index.html。完成后保存tapenade.html并在瀏覽器中打開,點擊鏈接觀察變化。
7. 鏈接到網(wǎng)頁中的指定點
打開glossary.html,完成以下步驟:
(1) 通過使用id屬性將h2標題“A”命名為“startA”,將其確定為鏈接的目的地——即命名錨
A
(2) 將網(wǎng)頁頂部的字母“A”鏈接到命名錨,注意一定要加“#”號。
A
(3) 對網(wǎng)頁頂部的字母和對應的段落重復上述步驟直至全部完成
(4) 將標題“Glossary”設(shè)置成名為“top”的目的地。
Glossary
(5) 在每個字母部分(含字母標題和所跟的段落)的最后添加包含“TOP”的段落元素,使TOP鏈接到標題“Glossary”。
8. 對于在新窗口打開鏈接文檔和通過鏈接打開指定的郵件程序請自行練習。
插入圖片
添加并鏈接圖片
1. 請使用準備好的tuscany網(wǎng)站文件夾完成下列練習。打開文件夾中的index.html,將縮略圖及附加文字添加到其中。示例如下:
Pozzarello
仿照示例在新的p元素中添加圖片country-side_100.jpg,設(shè)置h2標題為“On the Road”,確定路徑、描述、像素大?。▽?00,高75)
在新的p元素中添加圖片sienna_100.jpg和duomo_100.jpg,設(shè)置h2標題為“Sienna”,確定路徑、描述、像素大?。▽?00,高75)
設(shè)置完成后在瀏覽器中查看。
2. 將圖片放在單獨的網(wǎng)頁文件中,示例如下:
The View Through My Window
仿照示例將剩余圖片分別添加到countyr-side.html、sienna.html、duomo.html中。照片都是長邊500,短邊375
3. 打開index.html,將縮略圖鏈接到各自的大圖網(wǎng)頁文件。示例如下:
Pozzarello
仿照示例完成其他縮略圖的鏈接。
表格
設(shè)計表格
1. 創(chuàng)建一個新的html文檔,設(shè)置其基本文檔結(jié)構(gòu)(html元素、head元素、title元素和body元素)
2. 在head部分添加如下的樣式表定義。
Table
3. 在body元素中添加表格元素。設(shè)置一個五行的表格如下:
表格最終顯示樣式如圖0-5所示??赡苡玫降谋砀裨匕╟aption(主標題) th(標題)、tr(行)、td(單元格),可能用到的屬性包括border、cellspacing、rowspan、colspan。
圖0-5 表格顯示示例
制作表單
表單設(shè)計
1. 在文本編輯器中打開contest_entry.html。
2. 首先將intro段(Want to trade …… winners.)后面的所有內(nèi)容放到一個form元素中,按照注釋,指定用于form的action和method屬性。
結(jié)果如下:
3. 下面我們操作“Contest Entry Information”部分。首先創(chuàng)建一個字段集元素fieldset,將Name:City:State:My shoes are SO old...標簽都放在fieldset元素內(nèi)。使用標題“Contest Entry Information”作為字段集的legend。另外將表單各區(qū)域標記為有序列表。標記結(jié)果如下:
4. 現(xiàn)在在前三個列表項中添加三個文本輸入表單控件。如下示例:
Name:
5. 對最后一個列表項,添加一個文本區(qū)域表單控件
My shoes are SO old...
6. 下面將表單控件和它前面的文字標注關(guān)聯(lián)起來,示例如下:
7. 添加結(jié)尾部分的提交和重設(shè)按鈕。這兩個控件也要包括在
標簽之前。
8. 保存文檔并在瀏覽器中查看頁面效果,點擊提交和重設(shè)按鈕觀察頁面變化。
9. 下面練習在表單中添加單選按鈕和復選框。用和步驟3中相同的方法將Color:Feature:Size標簽放在一個fieldset中并將“Custom Shoe Design”設(shè)為fieldset的legend。
10. 為Color選項專門創(chuàng)建另一個字段集,將介紹信息用作legend。另外將顏色選項標記為無序列表。示例如下:
11. 結(jié)構(gòu)布置好后向其中插入表單控件。這里使用單選按鈕。示例如下:
12. 下面仿照Color標記Feature,但這一次使用復選框,將type屬性值改為“checkbox”,所有的列表項中的name值都是“feature”
13. 保存文檔并在瀏覽器中查看頁面效果
14. 現(xiàn)在處理“Size”部分,首先將文字部分標記為段。
15. 將顯示鞋子尺碼(5到13)的下拉菜單元素插入表單中,并與它得標簽顯示關(guān)聯(lián)。
16. 保存文檔并在瀏覽器中查看頁面效果
驗證文檔
使用W3C驗證服務
1. 打開瀏覽器訪問validator.w3.org。使用“Validate by File Upload”將提供的blackgoose.html文檔上傳并點擊“Check”按鈕。
2. 對照列出來的錯誤列表修改原文件。
3. 使用同樣的方式驗證提供的文檔“x-blackgoose.html”并修改錯誤。
實驗二 使用 Dreamweaver 站點(2學時)
[實驗目的]
基本要求:
掌握網(wǎng)站建立的步驟,熟悉可視化地圖的使用
重 點:
了解網(wǎng)站創(chuàng)建的完整過程。
難 點:
可視化地圖的特殊用法。
[實驗內(nèi)容]
一、 綜合演練
1. 使用 Dreamweaver 站點
2. 使用站點的可視化地圖
[綜合演練1實驗步驟] ——使用 Dreamweaver 站點
設(shè)置 Dreamweaver 站點
Dreamweaver 站點由三個部分(或文件夾)組成,具體取決于開發(fā)環(huán)境和所開發(fā)的 Web 站點類型:
l 本地根文件夾存儲您正在處理的文件。Dreamweaver 將此文件夾稱為“ 本地站點”。此文件夾可以位于本地計算機上,也可以位于網(wǎng)絡(luò)服務器上。如果您直接在服務器上工作,每次您保存文件時 Dreamweaver 都會將文件上傳到服務器。
l 遠程文件夾存儲用于測試、生產(chǎn)和協(xié)作等用途的文件。Dreamweaver 在“ 文件” 面板中將此文件夾稱為“ 遠程站點”。遠程文件夾通常位于運行 Web 服務器的計算機上。本地文件夾和遠程文件夾使您能夠在本地硬盤和 Web 服務器之間傳輸文件;這使您可以輕松管理 Dreamweaver 站點中的文件。
l 測試服務器文件夾Dreamweaver 在其中處理動態(tài)頁的文件夾。
使用管理站點對話框
使用“ 管理站點” 對話框創(chuàng)建新站點、編輯站點、重制站點、刪除站點或者導入或?qū)С稣军c設(shè)置。
1 選擇“ 站點”>“ 管理站點”,從左側(cè)的列表中選擇一個站點。
2 單擊一個按鈕選擇以下選項之一,并單擊“ 完成”。
l 新建使您可以創(chuàng)建新站點。
l 編輯使您可以編輯現(xiàn)有站點。
l 復制創(chuàng)建所選站點的副本。副本將出現(xiàn)在站點列表窗口中。
l 刪除刪除所選站點;此操作無法撤消。
l 導出使您可以將站點設(shè)置導出為 XML 文件 (*.ste)。
l 導入使您可以選擇要導入的站點設(shè)置文件 (*.ste)。
設(shè)置和編輯本地根文件夾
規(guī)劃站點結(jié)構(gòu)后,在 Dreamweaver 中設(shè)置(定義)站點。您還應定義一個站點,以便編輯不是由 Dreamweaver 創(chuàng)建的Web 站點。設(shè)置 Dreamweaver 站點是一種組織所有與 Web 站點關(guān)聯(lián)的文檔的方法。
本地根文件夾是 Dreamweaver 站點的工作目錄。此文件夾可以位于本地計算機上,也可以位于網(wǎng)絡(luò)服務器上。如果要開始在計算機上編輯文件(而不進行發(fā)布),只需設(shè)置一個本地文件夾,以后再添加遠程和測試信息。
即使沒有使用 Dreamweaver 創(chuàng)建原始站點,也可以使用 Dreamweaver 編輯本地磁盤上的現(xiàn)有 Web 站點或編輯遠程站點(或遠程站點的分支)。
注:如果本地根文件夾位于運行 Web 服務器的系統(tǒng)中,則無需指定遠程文件夾。這意味著該 Web 服務器正在您的本地計算機上運行。
1 選擇以下項之一:
l 若要設(shè)置新站點,請選擇“ 站點”>“ 新建站點”。
l 若要編輯本地磁盤上的現(xiàn)有站點或遠程站點(或遠程站點的分支)的設(shè)置,無論該站點是否在 Dreamweaver 中創(chuàng)建,都可選擇“ 站點”>“ 管理站點”,然后單擊“ 編輯”。
注:如果未定義任何 Dreamweaver 站點,將會出現(xiàn)“ 站點定義” 對話框,而無需您單擊“ 新建”。
2 輸入設(shè)置信息:
l 若要使用站點設(shè)置向?qū)гO(shè)置站點,請單擊“ 基本” 選項卡,然后按照提示進行操作。
l 若要直接設(shè)置本地文件夾、遠程文件夾和測試文件夾(用于處理動態(tài)頁),請單擊“ 高級” 選項卡,選擇“ 本地信息” 類別并設(shè)置各個選項。
3 單擊“ 確定” 和“ 完成” 以創(chuàng)建站點(在“ 文件” 面板中顯示)。
設(shè)置測試服務器
如果計劃開發(fā)動態(tài)頁, Dreamweaver 需要測試服務器的服務以便在您進行操作時生成和顯示動態(tài)內(nèi)容。測試服務器可以是本地計算機、開發(fā)服務器、中間服務器或生產(chǎn)服務器。在設(shè)置測試服務器文件夾之前,必須定義本地和遠程文件夾。您可能經(jīng)常將您的遠程文件夾的設(shè)置用于您的測試服務器,因為在遠程文件夾中上傳的動態(tài)頁通常可能是由應用程序服務器處理的。
1 選擇以下項之一:
l 若要設(shè)置新站點,請選擇“ 站點”>“ 新建站點”。
l 若要編輯本地磁盤上現(xiàn)有站點或遠程站點(或遠程站點的分支)的設(shè)置,無論該站點是否使用 Dreamweaver 創(chuàng)建,都可選擇“ 站點”>“ 管理站點”,然后從列表中選擇站點并單擊“ 編輯”。
注:如果未定義任何 Dreamweaver 站點,將會出現(xiàn)“ 站點定義” 對話框,而無需您單擊“ 新建”。
2 在“ 站點定義” 對話框的“ 高級” 選項卡中選擇“ 測試服務器”。
3 選擇要用于 Web 應用程序的服務器技術(shù)。
4 接受默認的“ 測試服務器” 設(shè)置,或者輸入不同的設(shè)置。
注:默認情況下,Dreamweaver 會假定應用程序服務器運行在與您的Web 服務器相同的系統(tǒng)上。如果您在“ 站點定義” 對話框的“ 遠程信息” 類別中定義了遠程文件夾,并且如果應用程序服務器運行在與遠程文件夾相同的系統(tǒng)上(包括您的本地計算機),則接受“ 測試服務器” 類別中的默認設(shè)置。
5 在“URL 前綴” 文本框中,輸入用戶在其瀏覽器中打開您的 Web 應用程序時需要鍵入的 URL,但不包括任何文件名。
注:URL 前綴由域名和 Web 站點主目錄的任何一個子目錄或虛擬目錄(而不是文件名)組成。例如,如果應用程序的 URL 是www.adobe.com/mycoolapp/start.jsp,則應輸入以下 URL 前綴:www.adobe.com/mycoolapp/。
注:如果 Dreamweaver 與 Web 服務器在同一系統(tǒng)上運行,則可以使用 localhost 選項之一作為域名的占位符。例如,如果運行的是 IIS,而應用程序的 URL 是 http://buttercup_pc/mycoolapp/start.jsp,請輸入以下 URL 前綴:http://localhost/mycoolapp/
6 單擊“ 確定”,然后單擊“ 完成” 以將新站點添加到站點列表中。
[綜合演練2實驗步驟] ——使用站點的可視化地圖
可以將 Dreamweaver 站點的本地文件夾視作鏈接的圖標的視覺地圖,此視覺地圖稱為站點地圖??梢允褂谜军c地圖將新文件添加到 Dreamweaver 站點,或者添加、修改或刪除鏈接。
站點地圖從主頁開始顯示兩個級別深度的站點結(jié)構(gòu)。站點地圖將頁面顯示為圖標,并按在源代碼中出現(xiàn)的順序來顯示鏈接。必須先定義站點的主頁才能顯示站點地圖。站點的主頁是地圖的起點,可以是站點中的任何頁面。可以更改主頁、顯示的列數(shù)、圖標標簽顯示文件名還是顯示頁標題以及是否顯示隱藏文件和相關(guān)文件。(相關(guān)文件是瀏覽器在加載主頁時加載的圖像或其它非 HTML 內(nèi)容。)
定義或更改站點的主頁
1 在“ 文件” 面板(“ 窗口”>“ 文件”)中,從顯示當前站點、服務器或驅(qū)動器的彈出菜單中選擇一個站點。
2 右鍵單擊 (Windows) 或按住 Control 鍵單擊 (Macintosh) 要設(shè)為主頁的文件,然后選擇“ 設(shè)成首頁”。
注:還可以在“ 站點定義” 對話框的“ 站點地圖布局” 選項中設(shè)置主頁。
3 若要更改主頁,請重復第 2 步。
查看站點地圖
1 在“ 文件” 面板(“ 窗口”>“ 文件”)中,執(zhí)行下列操作之一:
l 在折疊的“ 文件” 面板中,選擇“ 站點視圖” 菜單中的“ 地圖視圖”。
l 在展開的“ 文件” 面板中,單擊工具欄中的“ 站點地圖” 按鈕,然后選擇“ 僅地圖”(不包含本地文件結(jié)構(gòu)的站點地圖)或“ 地圖和文件” (包含本地文件結(jié)構(gòu))。
注:如果尚未定義主頁或者 Dreamweaver 在當前站點中找不到要用作主頁的 index.html 或 index.htm 頁面,Dreamweaver 將提示您選擇一個主頁。
2 單擊文件名旁的加號 (+) 或減號 (-) 可顯示或隱藏鏈接在第二級之下的頁面:
l 以紅色顯示的文本指示斷開的鏈接。
l 以藍色顯示并且標有地球圖標的文本表示其它站點上的文件或特殊鏈接(如電子郵件或腳本鏈接)。
l 綠色選中標記指示您已取出的文件。
l 紅色選中標記指示他人取出的文件。
l 鎖形圖標指示只讀 (Windows) 或鎖定 (Macintosh) 的文件。
修改站點地圖布局
使用“ 站點地圖布局” 選項可自定義站點地圖的外觀。
1 通過下列操作之一打開“ 站點定義” 對話框:
l 選擇“ 站點”>“ 管理站點”,選擇站點,然后單擊“ 編輯”。
l 在“ 文件” 面板中,從顯示當前站點、服務器或驅(qū)動器的菜單中選擇“ 管理站點”,然后單擊“ 編輯”。
2 在“ 站點定義” 對話框中,從左側(cè)的“ 分類” 列表中選擇“ 站點地圖布局” 并設(shè)置各個選項:
l 列數(shù)設(shè)置在站點地圖窗口中每行要顯示的列數(shù)。
l 列寬設(shè)置站點地圖的列寬(以像素為單位)。
l 圖標標簽選擇在站點地圖中與文檔圖標一起顯示的名稱是表示為文件名還是頁標題。
l 顯示標記為隱藏的文件顯示站點地圖中已標記為隱藏的 HTML 文件。
l 顯示相關(guān)文件在站點層次結(jié)構(gòu)中顯示所有相關(guān)文件。
3 單擊“ 確定”,然后單擊“ 完成”。
查看站點地圖中的不同分支
通過使某個分支成為站點地圖的焦點,可以查看站點特定部分的詳細信息。
1 選擇您要查看的頁。
2 請執(zhí)行下列操作之一:
l 在站點地圖中右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh),然后選擇“ 作為根查看”。
l 在默認的“文件”面板(“窗口”>“文件”)中,單擊右上角的選項菜單,然后選擇“查看”>“站點地圖選項”>“作為根查看”。
站點地圖在窗口中重新繪制,就象指定頁位于站點的根目錄一樣。站點地圖之上的“ 站點導航” 文本框顯示從主頁到指定頁的路徑。通過一次單擊選擇路徑中的任意項,從該級別開始查看站點地圖。
3 若要展開和收縮站點地圖中的分支,請單擊分支的加號 (+) 或減號 (-) 按鈕。
在站點地圖中選擇若干個頁面
請執(zhí)行下列操作之一:
l 從視圖的空白部分開始在一組文件周圍拖動,以選擇這些文件。
l 按住 Ctrl 單擊 (Windows) 或按住 Command 單擊 (Macintosh),以選擇不相鄰的頁。
l 按住 Shift 單擊以選擇某一范圍的相鄰頁。
在站點地圖中打開某頁進行編輯
? 雙擊文件,或者右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh) 文件,然后選擇“ 打開”。
向站點中添加現(xiàn)有文件
? 將文件從 Windows 資源管理器或 Macintosh Finder 中拖動到站點地圖中的一個文件,或者在站點地圖中右鍵單擊(Windows) 或按住 Control 鍵單擊 (Macintosh) 該文件,然后選擇“ 鏈接到已有文件” 并瀏覽到該文件。
創(chuàng)建新文件并在站點地圖中添加鏈接
1 在站點地圖中選擇一個文件,或者右鍵單擊 (Windows) 或按住 Control 鍵單擊 (Macintosh),然后選擇“ 鏈接到新文件”。
2 輸入該鏈接的名稱、標題和文本,然后單擊“ 確定”。
Dreamweaver 將該文件保存在與選定文件相同的文件夾中。如果向隱藏的分支目錄中添加一個新文件,則該新文件也會被設(shè)置為隱藏。
在站點地圖中修改頁的標題
1 單擊折疊的“ 文件” 面板右上角的選項菜單,然后選擇“ 文件”>“ 重命名視圖”>“ 顯示頁面標題”,以顯示頁面標題。
2 從站點地圖中選擇一個文件,然后執(zhí)行下列操作之一:
l 單擊標題,然后輸入新的標題。
l 單擊右上角的選項菜單,然后選擇“ 文件”>“ 重命名”。
3 鍵入新名稱,然后按 Enter (Windows) 或 Return (Macintosh)。
注:當您在“ 文件” 面板中進行操作時, Dreamweaver 會更新所有指向更改了名稱的文件的鏈接。
在進行更改后更新站點地圖顯示
? 單擊站點地圖中的任意位置,以取消選擇任何文件,然后單擊“ 文件” 面板工具欄中的“ 刷新”。
[實驗報告](請按照要求提交實驗報告電子版)
1. 實驗報告由課堂回顧和綜合演練兩部分內(nèi)容組成,課堂回顧部分答案用word文檔保存,演練部分將站點文件夾整體提交。然后將這兩部分放在一個文件夾下,統(tǒng)一命名為“學號+時間”,例如:信管三班十四號同學第一次實驗報告保存在名為“信管070314-100331”的文件夾中,以此類推。
2. 到最后一周上機后,將個人所有上機作業(yè)文件夾匯總到一個文件夾中,統(tǒng)一命名為“學號+網(wǎng)頁設(shè)計上機作業(yè)匯總”,例如:信管三班十四號同學所有上機作業(yè)文件夾匯總保存在名為“信管070314網(wǎng)頁設(shè)計上機作業(yè)匯總”的文件夾中,并將其做成壓縮文件包,以此類推。
3. 課程結(jié)束時,各班同學將各自的上機作業(yè)壓縮文件包交給各班班長統(tǒng)一收齊刻成光盤上交指導教師。
實驗三 創(chuàng)建和管理文件(2學時)
[實驗目的]
基本要求:
掌握Dreamweaver中創(chuàng)建、處理和測試頁面的方法和步驟。
重 點:
Dreamweaver常見的文件類型,操作文件的基本方法。
難 點:
靈活使用測試報告查找文件中存在的錯誤。
[實驗內(nèi)容]
一、 綜合演練
創(chuàng)建和管理文件
[綜合演練實驗步驟] ——創(chuàng)建和管理文件
在 Dreamweaver 中可以使用多種文件類型。使用的主要文件類型是HTML文件。HTML文件(或超文本標記語言文件)包含基于標簽的語言,負責在瀏覽器中顯示W(wǎng)eb頁面??梢允褂?html或.htm擴展名保存HTML文件。Dreamweaver默認情況下使用.html擴展名保存文件。
以下是使用 Dreamweaver 時可能會用到的其它一些常見文件類型:
l CSS 層疊樣式表文件的擴展名為 .css。它們用于設(shè)置 HTML 內(nèi)容的格式并控制各個頁面元素的位置。
l GIF 圖形交換格式文件的擴展名為 .gif。GIF 格式是用于卡通、徽標、具有透明區(qū)域的圖形、動畫的常用 Web 圖形格式。GIF 最多包含 256 種顏色。
l JPEG 聯(lián)合圖像專家組文件(根據(jù)創(chuàng)建該格式的組織命名)的擴展名為 .jpg,通常是照片或色彩較鮮明的圖像。JPEG 格式最適合用于數(shù)碼照片或掃描的照片、使用紋理的圖像、具有漸變色過渡的圖像以及需要 256 種以上顏色的任何圖像。
l XML 可擴展標記語言文件的擴展名為 .xml。它們包含原始形式的數(shù)據(jù),可使用 XSL (Extensible Stylesheet Language:可擴展樣式表語言)設(shè)置這些數(shù)據(jù)的格式。
l XSL 可擴展樣式表語言文件的擴展名為 .xsl 或 .xslt。它們用于設(shè)置要在 Web 頁中顯示的 XML 數(shù)據(jù)的樣式。
l CFML ColdFusion 標記語言文件的擴展名為 .cfm。它們用于處理動態(tài)頁面。
l ASPX ASP.NET 文件的擴展名為 .aspx,用于處理動態(tài)頁。
l PHP 超文本預處理器文件的擴展名為 .php,可用于處理動態(tài)頁。
創(chuàng)建空白頁
可以創(chuàng)建包含預設(shè)計 CSS 布局的頁面,或者先創(chuàng)建一個完全空白的頁,然后創(chuàng)建自己的布局。
1 選擇“ 文件”>“ 新建”。
2 在“ 新建文檔” 對話框的“ 空白頁” 類別中,從“ 頁面類型” 列選擇要創(chuàng)建的頁面類型。例如,選擇HTML來創(chuàng)建一個純HTML 頁,選擇 ColdFusion 來創(chuàng)建一個 ColdFusion 頁,等等。
3 如果希望新頁面包含CSS 布局,請從“布局”列中選擇一個預設(shè)計的CSS 布局;否則,選擇“無”?;谀倪x擇,在對話框的右側(cè)將顯示選定布局的預覽和說明。
注:預設(shè)計的 CSS 布局提供了下列類型的列:
l 固定列寬是以像素指定的。列的大小不會根據(jù)瀏覽器的大小或站點訪問者的文本設(shè)置來調(diào)整。
l 彈性列寬是以相對于文本大小的度量單位(全方)指定的。如果站點訪問者更改了文本設(shè)置,該設(shè)計將會進行調(diào)整,但不會基于瀏覽器窗口的大小來更改列寬度。
l 液態(tài)列寬是以站點訪問者的瀏覽器寬度的百分比形式指定的。如果站點訪問者將瀏覽器變寬或變窄,該設(shè)計將會進行調(diào)整,但不會基于站點訪問者的文本設(shè)置來更改列寬度。
混合用上述三個選項的任意組合來指定列類型。例如,兩列混合,右側(cè)欄布局具有可縮放至瀏覽器大小的液態(tài)主列,而右側(cè)的彈性列可縮放至站點訪問者的文本設(shè)置的大小。
4 從“ 文檔類型” 彈出菜單中選擇文檔類型。大多數(shù)情況下,可以使用默認選擇,即 XHTML 1.0 Transitional。
從“ 文檔類型” 菜單中選擇一種 XHTML 文檔類型定義使頁面符合 XHTML。例如,可從菜單中選擇“XHTML 1.0Transitional” 或“XHTML 1.0 Strict”,使 HTML 文檔符合 XHTML 規(guī)范。XHTML (可擴展超文本標記語言)是以XML 應用的形式重新組織的 HTML。通常,利用 XHTML,可以獲得 XML 的優(yōu)點,同時還能確保 Web 文檔的向后和向前兼容性。
5 如果在“ 布局” 列中選擇了 CSS 布局,則從“ 布局 CSS 位置” 彈出菜單中為布局的 CSS 選擇一個位置。
l 添加到文檔頭將布局的 CSS 添加到要創(chuàng)建的頁面頭中。
l 新建文件將布局的 CSS 添加到新的外部 CSS 文件并將新的樣式表附加到要創(chuàng)建的頁面中。
l 鏈接到現(xiàn)有文件可以通過此選項指定已包含布局所需的CSS 規(guī)則的現(xiàn)有CSS 文件。為此,請單擊“ 附加CSS 文件” 窗格上方的“ 附加樣式表” 圖標并選擇一個現(xiàn)有CSS 樣式表。當您希望在多個文檔上使用相同的CSS 布局(CSS 布局的CSS 規(guī)則包含在一個文件中)時,此選項特別有用。
6 (可選)創(chuàng)建頁面時,還可以將 CSS 樣式表附加到新頁面(與 CSS 布局無關(guān))。為此,請單擊“ 附加 CSS 文件” 窗格上方的“ 附加樣式表” 圖標并選擇一個 CSS 樣式表。
7 如果要設(shè)置文檔的默認首選參數(shù)(如文檔類型、編碼和文件擴展名),請單擊“ 首選參數(shù)”。
8 如果要打開可在其中下載更多頁面設(shè)計內(nèi)容的 Dreamweaver Exchange,請單擊“ 獲取更多內(nèi)容”。
9 單擊“ 創(chuàng)建” 按鈕。
10 保存新文檔(“ 文件”>“ 保存”)。
11 在出現(xiàn)的對話框中,瀏覽到要用來保存文件的文件夾。
注:最好將文件保存在 Dreamweaver 站點中。
12 在“ 文件名” 框中,鍵入文件名。
注:請不要在文件名和文件夾名中使用空格和特殊字符,文件名也不要以數(shù)字開頭。具體說來就是不要在打算放到遠程服務器上的文件名中使用特殊字符(如 、 或 )或標點符號(如冒號、斜杠或句號);很多服務器在上傳時會更改這些字符,這會導致與這些文件的鏈接中斷。
創(chuàng)建基于現(xiàn)有模板的頁面
可以選擇、預覽文檔并通過現(xiàn)有模板創(chuàng)建新的文檔??梢允褂谩?新建文檔”對話框從Dreamweaver 定義的任何站點中選擇模板,也可以使用“資源”面板從現(xiàn)有模板創(chuàng)建新的文檔。
創(chuàng)建基于模板的文檔
1 選擇“ 文件”>“ 新建”。
2 在“ 新建文檔” 對話框中,選擇“ 模板中的頁” 類別。
3 在“ 站點” 列中,選擇包含要使用的模板的 Dreamweaver 站點,然后從右側(cè)的列表中選擇一個模板。
4 如果您不希望在每次更改該頁面所基于的模板后都更新此頁面,請取消選擇“ 當模板改變時更新頁面”。
5 如果要設(shè)置文檔的默認首選參數(shù)(如文檔類型、編碼和文件擴展名),請單擊“ 首選參數(shù)”。
6 如果要打開可在其中下載更多頁面設(shè)計內(nèi)容的 Dreamweaver Exchange,請單擊“ 獲取更多內(nèi)容”。
7 單擊“ 創(chuàng)建” 并保存文檔(“ 文件”>“ 保存”)。
在資源面板中從模板創(chuàng)建文檔
1 如果“ 資源” 面板尚未打開,請將其打開(“ 窗口”>“ 資源”)。
2 在“ 資源” 面板中,單擊左側(cè)的“ 模板” 圖標以查看當前站點中的模板列表。
3 右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh) 要應用的模板,然后選擇“ 從模板新建”。將在“ 文檔” 窗口中打開文檔。
4 保存文檔。
創(chuàng)建基于 Dreamweaver 示例文件的頁面
Dreamweaver 附帶了幾種以專業(yè)水準開發(fā)的頁面布局和設(shè)計元素文件??梢曰谶@些示例文件開始設(shè)計站點頁面。當創(chuàng)建基于示例文件的文檔時,Dreamweaver 會創(chuàng)建文件的副本。
可以在“新建文檔”對話框中預覽示例文件并閱讀文檔的設(shè)計元素的簡要說明。如果選擇了“CSS 樣式表”類別,可以復制預先設(shè)計的樣式表,然后將其應用于您的文檔。
注:如果創(chuàng)建基于預定義框架集的文檔,則僅復制框架集結(jié)構(gòu),而不復制框架內(nèi)容。另外,必須分別保存每個框架文件。
1 選擇“ 文件”>“ 新建”。
2 在“ 新建文檔” 對話框中,選擇“ 示例中的頁” 類別。
3 在“ 示例文件夾” 列中,選擇“CSS 樣式表”、“ 框架集”、“ 起始頁(主題)” 或“ 起始頁(基本)” ;然后從右側(cè)的列表中選擇一個示例文件。
4 單擊“ 創(chuàng)建” 按鈕。
新文檔在“ 文檔” 窗口中打開(“ 設(shè)計” 視圖)。如果選擇了“CSS 樣式表”,則 CSS 樣式表將在“ 代碼” 視圖中打開
5 保存該文檔(“ 文件”>“ 保存”)。
6 如果出現(xiàn)“ 復制相關(guān)文件” 對話框,請設(shè)置該選項,然后單擊“ 復制”,將資源復制到所選的文件夾中。
在文件面板中處理文件
打開文件
1 在“ 文件” 面板(“ 窗口”>“ 文件”)中,從彈出菜單(其中顯示當前站點、服務器或驅(qū)動器)中選擇站點、服務器或驅(qū)動器。
2 定位到要打開的文件。
3 請執(zhí)行下列操作之一:
l 雙擊該文件的圖標。
l 右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh) 該文件的圖標,然后選擇“ 打開”。Dreamweaver 會在“ 文檔” 窗口中打開該文件。
創(chuàng)建文件或文件夾
1 在“ 文件” 面板(“ 窗口”>“ 文件”)中,選擇一個文件或文件夾。
Dreamweaver 將在當前選定的文件夾中(或者在與當前選定文件所在的同一個文件夾中)新建文件或文件夾。
2 右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh),然后選擇“ 新建文件” 或“ 新建文件夾”。
3 輸入新文件或新文件夾的名稱。
4 按 Enter (Windows) 或 Return (Macintosh)。
刪除文件或文件夾
1 在“ 文件” 面板(“ 窗口”>“ 文件”)中,選擇要刪除的文件或文件夾。
2 右鍵單擊 (Windows) 或按住 Control 并單擊 (Macintosh),然后選擇“ 刪除”。
重命名文件或文件夾
1 在“ 文件” 面板(“ 窗口”>“ 文件”)中,選擇要重命名的文件或文件夾。
2 執(zhí)行下列操作之一,激活文件或文件夾的名稱:
l 單擊文件名,稍停片刻,然后再次單擊。
l 右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh) 該文件的圖標,然后選擇“ 重命名”。
3 鍵入新名稱,覆蓋現(xiàn)有名稱。
4 按 Enter (Windows) 或 Return (Macintosh)。
移動文件或文件夾
1 在“ 文件” 面板(“ 窗口”>“ 文件”)中,選擇要移動的文件或文件夾。
2 請執(zhí)行下列操作之一:
l 復制該文件或文件夾,然后粘貼在新位置。
l 將該文件或文件夾拖到新位置。
3 刷新“ 文件” 面板可以看到該文件或文件夾在新位置上。
刷新文件面板
? 請執(zhí)行下列操作之一:
l 右鍵單擊 (Windows) 或按住 Control 單擊 (Macintosh) 該文件和文件夾,然后選擇“ 刷新”。
l ( 僅對 Dreamweaver 站點)單擊“ 文件” 面板工具欄上的“ 刷新” 按鈕(此選項刷新兩個窗格)。
注:當在另一個應用程序中進行了更改并返回到 Dreamweaver 時,Dreamweaver 會刷新“ 文件” 面板。
標識和刪除未使用的文件
1 選擇“ 站點”>“ 檢查站點范圍的鏈接”。
注:Dreamweaver 檢查站點中的所有鏈接,并在“ 結(jié)果” 面板中顯示斷開的鏈接。
2 在“ 鏈接檢查器” 面板上的菜單中選擇“ 孤立的文件”。
注:Dreamweaver 將顯示沒有入站鏈接的所有文件。這意味著站點中沒有鏈接到這些文件的文件。
3 選擇要刪除的文件,按Delete(Windows)或Command+Delete (Macintosh)。
注:盡管站點中沒有其它文件引用列出的文件,但列出的某些文件可能鏈接到了其它文件。因此刪除這些文件時要謹慎。
使用報告測試站點
運行報告以測試站點
1 選擇“ 站點”>“ 報告”。
注:若要僅為站點運行輔助功能報告,可以選擇“文件”>“檢查頁”>“檢查輔助功能”,報告將出現(xiàn)在“結(jié)果”面板組的“站點報告” 面板中。
2 從“ 報告在” 彈出菜單中選擇要報告的內(nèi)容,并設(shè)置要運行的任意一種報告類型(工作流程或 HTML)。只有在“ 文件” 面板中已經(jīng)有選定文件的情況下,才能運行“ 站點中的已選文件” 報告。
3 如果您選擇了工作流程報告,請單擊“ 報告設(shè)置”。否則,跳過這一步。
注:如果選擇不止一個工作流程報告,則對每個報告都需要單擊“ 報告設(shè)置” 按鈕進行設(shè)置。選擇一個報告,單擊“ 報告設(shè)置”,輸入設(shè)置,然后對任何其它工作流程報告重復該過程。
l 取出者創(chuàng)建一個報告,列出某特定小組成員取出的所有文檔。輸入小組成員的名稱,然后單擊“ 確定”,返回到“ 報告” 對話框。
l 設(shè)計備注創(chuàng)建一個報告,列出選定文檔或站點的所有設(shè)計備注。輸入一對或多對名稱和值,然后從相應的彈出菜單中選擇對比值。單擊“ 確定”,返回到“ 報告” 對話框。
l 最近修改創(chuàng)建一個報告,列出在指定時間段內(nèi)發(fā)生更改的文件。輸入要查看文件的日期范圍和所在位置。
4 如果選擇 HTML 報告,則從以下報告中選擇:
l 可合并嵌套字體標簽創(chuàng)建一個報告,列出所有可以合并的嵌套字體標簽以便清理代碼。例如,將報告
STOP! 。
l 沒有替換文本會創(chuàng)建一個報告,列出所有沒有替換文本的img 標簽。
注:在純文本瀏覽器或設(shè)為手動下載圖像的瀏覽器中,替換文本將替代圖像出現(xiàn)在應顯示圖像的位置。屏幕閱讀器將讀出替換文本,而且有些瀏覽器可在用戶鼠標經(jīng)過圖像時顯示替換文本。
l 取出者創(chuàng)建一個報告,列出某特定小組成員取出的所有文檔。
l 輔助功能創(chuàng)建一個報告,詳細列出您的內(nèi)容與 1998 年康復法案的第 508 款輔助功能準則之間的沖突。
l 多余的嵌套標簽建一個報告,詳細列出應該清理的嵌套標簽。
l 例如,將報告
The rain in Spain stays mainly in the plain 。
l 可移除的空標簽創(chuàng)建一個報告,詳細列出所有可以移除的空標簽以便清理 HTML 代碼。例如,可能在“ 代碼” 視圖中已刪除了某項或某個圖像,卻留下了應用于該項的標簽。
l 無標題文檔創(chuàng)建一個報告,列出在選定參數(shù)中找到的所有無標題的文檔。
5 單擊“ 運行”,創(chuàng)建報告。
根據(jù)運行的報告的類型,可能會提示保存文件、定義站點或選擇文件夾(如果尚未執(zhí)行這些操作)。
“ 站點報告” 面板(在“ 結(jié)果” 面板組中)中將顯示一個結(jié)果列表。
使用和保存報告
1 運行報告(請參閱前面的步驟)。
2 在“ 站點報告” 面板中,執(zhí)行以下任一操作來查看報告:
l 單擊要按其排序的列標題以對結(jié)果進行排序。
注:可以按文件名、行號或說明進行排序。還可以運行若干不同的報告并讓不同的報告保持打開狀態(tài)。
l 選擇報告中的任一行,然后單擊“ 站點報告” 面板左側(cè)的“ 更多信息” 按鈕可以了解問題說明。信息即會出現(xiàn)在“ 參考” 面板中。
l 雙擊報告中的任一行可以在“ 文檔” 窗口中查看相應的代碼。
注:如果您正在使用“ 設(shè)計” 視圖, Dreamweaver 將更改顯示以拆分視圖,以顯示代碼中報告的問題。
3 單擊“ 保存報告”
鏈接地址:http://www.820124.com/p-9640163.html