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