kj7第7章-網頁制作軟件介紹ppt課件(全)_第1頁
kj7第7章-網頁制作軟件介紹ppt課件(全)_第2頁
kj7第7章-網頁制作軟件介紹ppt課件(全)_第3頁
kj7第7章-網頁制作軟件介紹ppt課件(全)_第4頁
kj7第7章-網頁制作軟件介紹ppt課件(全)_第5頁
已閱讀5頁，還剩149頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第1頁第7章網頁制作軟件介紹本章概述本章的學習目標主要內容第2頁本章概述

Internet上豐富的信息資源大多是通過網頁傳遞的，網頁是WWW網的基本文檔之一，網頁用HTML（超文本標記語言）書寫，一個網頁包含許多不同類型的HTML標記符，使用這樣的標記符構建成網頁的結構、外貌和內容。網頁被保存在WWW服務器中，可以通過特定的URL地址檢索到，當你在瀏覽器的地址欄中輸入相應的URL地址時，就可以找到相應的Homepage，并從中獲取信息。人們在制作一個網頁時，大都采用一些專門的網頁制作工具，如FrontPage編輯器、Dreamweaver編輯器等，它們將網頁界面自動構建成對應的HTML標記語言。人們要制作一個有特色的、動態(tài)交互的網頁還需要使用Flash和Fireworks等輔助技術和動態(tài)網頁語言ASP、JSP、PHP等制作工具。第3頁本章的學習目標了解HTML語言掌握網頁、網站等相關概念掌握網站與網頁創(chuàng)建和管理的操作掌握網頁的編輯技術掌握網頁的表格操作掌握網頁圖片操作掌握網頁表單和框架網頁操作掌握網頁超鏈接操作了解網頁制作的輔助技術和動態(tài)交互網頁的制作工具第4頁主要內容7.1HTML語言簡介7.2FrontPage2003的使用7.3FrontPage2003的高級應用7.4

Dreamweaver8.0的使用7.5網頁開發(fā)輔助技術7.6動態(tài)交互網頁的制作工具7.7本章小結7.1

HTML語言簡介超文本標記語言HTML

HTML標記語言的基本結構幾個常用的HTML標記第5頁第6頁

HTML（HyperTextMarkupLanguage）是超文本標記語言。同所有的編程語言一樣，HTML語言也有一套自己的符號和語法約定。但它又不同于一般的編程語言，它只是一些可以由瀏覽器加以解釋，并具有命令標記性質的文本。一、超文本標記語言HTML第7頁例如在瀏覽器IE中顯示的是一個簡單的主頁（如圖7-1-1所示）。該網頁的文本內容如下：

<html><head><title>我的第一個homepage，歡迎光臨！</title></head><body><h1>您的到來為本站增輝！</h1><br><center><h2>本站全體同仁歡迎您！</h2><br><u><h3>蜜蜂之家</h3></u></center></body></html>圖7-1-1一個簡單的主頁超文本標記語言HTML第8頁二、HTML標記語言的基本結構一個網頁對應于一個HTML文件，HTML文件以.htm或.html為擴展名。標準的HTML文件都具有一個基本的整體結構，即HTML文件的開始與結束標志、HTML的頭部與主體兩大部分。文件頭部用來設置當前文檔的一些相關信息，如網頁的搜索關鍵字、網頁的標題、網頁所使用的編碼以及腳本語言等，它一般不在瀏覽器的窗口中顯示。文件主體用來放置Web頁面的主要內容，包含文字、圖片、背景色、表格、表單等幾乎所有關于網頁的功能和效果的展示。

表7-1-1HTML文件構成

第9頁名稱描述文件開始<html>頭部

<head>

<！-頭部開始-><title>標題名

</title>

<！-HTML文件標題->…其他頭部內容定義標記…</head>

<！-頭部結束->主體<body>

<！-主體開始->…主頁內容（文本、圖像等）…</body>

<！-主體結束->文件結束</html>

<！-HTML文件內容結束->HTML標記語言的基本結構HTML文件由標記和文本組成，HTML用于描述功能的符號稱為“標記”。一個標記表示為“<……>”，中間可以包含標記名、標記的屬性等，就像編程語言中的參數一樣。標記<……>…</……>構成一對完整的標簽，并且許多標記是成對出現的，這也是HTML標簽的特點，有一個開始標記，還有一個結束標記，結束標記就是在開始標記之前加一個“/”。比如下面兩行：<html></html>它們告訴瀏覽器，這是Homepage的開始(<html>)以及結束(</html>)。第10頁HTML標記語言的基本結構第11頁三、幾個常用的HTML標記1．<html>…</html>

作用：表示超文本文檔的開頭及結束。

2．<head>…</head>

作用：一些有關文檔的定義、說明和描述等標記包含在其中。

3．<title>…</title>

作用：其中包含的內容出現在瀏覽器窗口的標題欄上，作為該主頁的標題。

4．<body>…</body>

作用：要表達的正文信息包含在其中。說明：以上4個標記是一個完整的Homepage所必不可少的。

5．<hn>…</hn>

作用：其中n取值l~6，表示由大到小的6種標題文字。第12頁6．<br>

作用：強行換行。在HTML文本中，所有包含的回車符和空格都被忽略，當一行的內容還不滿屏幕的寬度時，下一行內容會自動接上，因此在需換行時必須使用該標記。

7．格式：<font>……</font>

作用：用于設定字體的大小和所用的字體，其中包含兩個屬性：屬性size：指定字體的大小，值為l～7。屬性face：用于指定不同的字體。

8．格式：<img>

作用：將圖像文件嵌入到Homepage中。其中包含3個屬性：Src（圖像來源）、Width（圖像寬度）和Height（圖像高度）

9．格式：<center>……</center>

作用：將文本的內容居中。

10．格式：<u>……</u>

作用：在其間包含的文本內容上加下劃線。當然，HTML的標記還有很多，對于初學者來說比較難記。不過我們可以使用FrontPage2003來制作圖文并茂的Homepage。幾個常用的HTML標記第13頁第二節(jié)FrontPage2003的使用

FrontPage2003概述7.2.2創(chuàng)建站點和網頁操作7.2.3網頁中的文本編輯7.2.4網頁中圖片的處理網頁中表格的使用建立超鏈接第14頁一、FrontPage2003概述FrontPage2003是Microsoft公司最新推出的網站制作軟件，是Office系列辦公軟件中的一個。FrontPage2003的新特性FrontPage2003集中了所有Web設計功能，并可以查看整個網絡全景，增加了布局表格和單元格、圖像描摹?？梢允褂脛討B(tài)Web模板、網頁標尺和布局網格。（1）自定義例覽器分辨率在設計網頁時，可實時調節(jié)當前頁面在客戶端顯示的分辨率，以便預覽當前效果。（2）描摹圖像大家在學習書法的時候，都接觸過臨摹吧，描摹圖像的功用與其類似，就是通過創(chuàng)建一個圖像（一般為網頁的效果圖）為參照物，以便于網頁的設計制作。選擇菜單欄上的“視圖”、“描摹圖像”、“設置”命令，在彈出的對話框中，選擇指定圖像，再設置其坐標（即在設計頁面上顯示的位置）。最后，設置透明度，再單擊“確認”按鈕即可。第15頁（3）層功能層在網頁制作中是不可缺少的，FrontPage2003可以像Dreamweaver那樣使用層。通過層可以將內容重疊、交叉擺放。（4）行為的應用行為是事件和由該事件觸發(fā)的動作的組合。行為代碼是客戶端的Javascript代碼，因此它無需服務器的支持就可觸發(fā)事件。行為一直是Dreamweaver的強項，而FrontPage2003現在也有了這個功能。選擇菜單“格式”、“行為”命令，查看界面右側的“行為”窗格，單擊“插入”向下箭頭按鈕，在彈出的菜單中可選擇播放聲音、彈出消息、調用腳本及彈出菜單等事件。在選擇指定的插入對象后，將彈出相應的設置對話框，在其中按需操作。所有添加的行為事件，均會顯示在列表中。FrontPage2003新特性第16頁（5）用網頁重定向在FrontPage2003中，選擇菜單“工具”、“中文簡繁轉換”、“插入重定向代碼”命令，在彈出的對話框中，設置簡體頁面網址及繁體頁面網址。而后，插入的代碼將通過測覽器對支持語言的檢測，實現自動轉向。（6）檢查網頁錯誤選擇菜單“工具”、“輔助功能”命令，在彈出的對話框中設置檢查范圍、內容及顯示對象，接著單擊“檢查”按鈕即可。利用此項功能，就可快速找出指定網頁是否有錯誤，并可查看問題之所在。（7）規(guī)劃頁面布局一個成功的設計作品，大都需要事先為其規(guī)劃設計布局，以便于宏觀控制其內容。選擇菜單“表格”、“布局表格和單元格”命令，右側窗格中將顯示相應的屬性設置。我們著重查看“表格布局”下拉列表，在其中有若干布局樣式可供選擇。當我們選擇一種合適的布局應用于當前頁面上后，可隨時在設計視圖中按需自行調節(jié)其布局樣式。FrontPage2003新特性第17頁FrontPage2003的啟動與退出的方法和Word2003類似。FrontPage2003的啟動雙擊Windows桌面上的MicrosoftFrontPage2003快捷方式圖標，選擇“開始”、“所有程序”、“Microsoftoffice”、“MicrosoftofficeFrontPape2003”菜單命令都可以啟動FrontPage2003。FrontPage2003的啟動第18頁

FrontPage2003的退出（1）單擊FrontPage2003窗口中的“關閉”按鈕。（2）選擇菜單“文件”、“退出”命令。（3）按ALT十F4。（4）單擊窗口中的FrontPage2003控制圖標，打開窗口控制菜單，選擇“關閉”命令。（5）雙擊窗口中的FrontPage2003控制圖標。FrontPage2003的退出第19頁FrontPage2003啟動后進入如圖7-2-1所示的工作界面。在FrontPage2003中提供了7種視圖模式和4種網頁視圖方式。FrontPape2003提供了網頁視圖、文件夾視圖、遠程網站視圖、報表視圖、導航視圖、超鏈接視圖和任務視圖7種視圖模式，利用這些視圖可以完成站點的創(chuàng)建、管理、發(fā)布等任務。視圖切換可以選擇菜單“視圖”，執(zhí)行相應的命令，也可以使用視圖模式標簽進行切換。圖7-2-1FrontPage2003窗口FrontPage2003的工作界面第20頁（l）網頁視圖默認情況下，打開網頁，就會進入網頁視圖，可以在該視圖下編輯網頁內容。網頁視圖包括設計視圖、拆分視圖、代碼視圖和預覽視圖4種視圖方式。（2）文件夾視圖文件夾視圖列出了文件夾中的所有內容?？梢栽谖募A內容上單擊右鍵直接對其進行刪除、復制、重命名、移動、打開等操作。FrontPage2003視圖第21頁（3）遠程網站視圖該視圖是FrontPape2003的新特性之一，主要功能是向互聯網發(fā)布文件?？梢允褂么斯δ軐⑼景l(fā)布到一個網絡服務提供商的服務器上。（4）報表視圖在該視圖模式下，可以查看站點的各種分布情況，包括網站摘要、文件、共享內容、工作流、使用率信息和網站存在的問題等。（5）導航視圖導航視圖中提供了網站的分層視圖，可以直觀地表示一個網站的組織關系和邏輯層次，以方便管理網站中的各個網頁。FrontPage2003視圖第22頁（6）超鏈接視圖超鏈接視圖可以將網站中的超鏈接的狀態(tài)顯示在一個列表中，該列表中包括內部鏈接和外部鏈接。圖中帶有加號的超鏈接表示該鏈接還鏈接其他站點，單擊加號就可以打開它所包括的鏈接。（7）任務視圖任務視圖主要用來記錄和分配任務，包括已完成任務和尚未完成任務，主要信息包括狀態(tài)、任務名稱、分配對象、優(yōu)先級等信息。任務視圖用于同站項目的管理和任務的分配?？梢赃x擇菜單“編輯”、“任務”命令，執(zhí)行添加任務、編輯任務、標記完成等操作。FrontPage2003視圖第23頁選擇菜單“視圖”、“網頁”命令可以切換到網頁視圖模式。此時文檔窗口的左下方就會出現4種網頁視圖方式的選項卡，可以從不同的角度對一個網頁進行查看和處理?？梢詥螕粼撨x項卡實現視圖方式的切換。（1）設計視圖?？梢栽谠撘晥D中設計和編輯網頁，以“所見即所得”的工作方式實現網頁設計和編輯。（2）代碼視圖。網頁文件其實是HTML標記語言編寫的文本文件，可以采用代碼視圖顯示和編輯網頁中的HTML標記代碼。（3）拆分視圖。拆分視圖可以同時訪問代碼視圖和設計視圖。該模式將工作窗口分成兩部分：上面窗口是HTML標記代碼，下面窗口是網頁的編輯畫面。（4）預覽視圖。通過該視圖可以在網頁制作過程中隨時查看網頁的顯示效果，可以看到和瀏覽器中一樣的顯示效果。FrontPage2003視圖第24頁二、創(chuàng)建站點和網頁操作創(chuàng)建站點網站由網頁組成，小型的網站可以逐個網頁創(chuàng)建。如果Web站點較大，則通過站點會使管理和創(chuàng)建更加便捷。可以使用向導和使用模板兩種方式創(chuàng)建站點。FrontPage2003中的向導和模板分為兩類：一類是網頁向導與模板，包括常規(guī)、框架網頁和樣式表3種；另一類是網站向導和模板。第25頁選擇菜單“文件”|“新建”命令，打開“新建”任務窗格，如圖7-2-2所示，單擊“新建站點”中的一個選項，根據提示操作即可創(chuàng)建站點。其中“只有一個網頁組成的網站”模板將創(chuàng)建包含一個空白網頁的新網站，是比較常用的方式，用于一般用途網站的創(chuàng)建。網頁是網站的基本組成部分，下面將介紹網頁制作的基本操作，包括新建網頁、設置網頁屬性、保存網頁、打開已有網頁和預覽網頁等。新建網頁新建網頁一般有3種方式，分別為新建空白網頁、根據現有網頁新建網頁和使用網頁模板新建網頁。選擇菜單“文件”、“新建”命令，打開“新建”任務窗格，如圖7-2-2所示。圖7-2-2“新建”任務窗格創(chuàng)建站點和網頁第26頁新建空白網頁。在“新建網頁”選擇區(qū)域中單擊“空白網頁”，空白網頁創(chuàng)建后，系統(tǒng)自動為其命名為“new_page_1.htm”。根據現有網頁新建網頁。在“新建網頁”選擇區(qū)域中單擊“根據現有網頁”，打開“根據現有網頁新建”對話框。選擇所需應用的網頁，單擊“創(chuàng)建”按鈕即可。此時會打開現有的網頁，命名為“new_page_2.htm”。新建的網頁new_page_2.htm將繼承現有網頁的格式，且可以在此基礎上進行編輯和修改。使用網頁模板新建網頁。該選項是根據FrontPage2003提供的網頁模板來新建網頁。在“新建網頁”選擇區(qū)域中單擊“其他網頁模板”，打開“網頁模板”對話框，如圖7-2-3所示。提供了常規(guī)網頁模板、框架網頁模板和樣式表模板共3類。選擇所需要的網頁模板，單擊“確定”按鈕即可。圖7-2-3“網頁模板”對話框網頁基本操作第27頁網頁屬性設置網頁屬性主要包括網頁的標題、背景音樂、背景圖片、背景顏色、超鏈接顏色、邊距和正文樣式等。選定網頁文檔區(qū)域，選擇菜單“文件”、“屬性”命令，或者單擊右鍵，在彈出的快捷菜單中選擇“網頁屬性”命令，打開“網頁屬性”對話框，如圖7-2-4所示。共有常規(guī)、格式、高級、自定義、語言、工作組6個選項卡，其中：“常規(guī)”選項卡①設置標題。網頁標題是一個網頁的概括性說明文字，該標題將會顯示在Web測覽器的標題欄中。②網頁說明。網站訪問者在Web上搜索內容，則會在搜索結果中看到此說明。③關鍵字。描述網頁內容的一個或多個關鍵宇（用一個逗號和一個空格隔開）。④背景音樂。在“位置”文本框中輸入要在打開網頁時播放的音樂文件的路徑和文件名，或者單擊“瀏覽”選擇文件。⑤循環(huán)次數。播放音樂的次數。若要不停地播放音樂，選中“不限次數”復選框。圖7-2-4“網頁屬性”對話框第28頁網頁屬性設置“格式”選項卡，可以設置網頁的背景圖片、背景顏色、文本顏色、超鏈接顏色。已訪問的超鏈接顏色、當前超鏈接顏色等。如圖7-2-5所示。①背景。設置背景圖片，如果圖形的長或寬與網頁不同，則圖形會在網頁的背景中重復顯示，并與網頁中的文本及其他元素一起滾動。②使其成為水印。把網頁背景圖形作為水印，固定在背景中，不會與網頁中的文本及其他元素一起滾動。③屬性。更改背景圖形的格式和其他設置。只有已向網頁添加了背景圖形，此選項才可用。④顏色。設置網頁的背景顏色、網頁中文本的默認顏色。⑤超鏈接。設置尚未訪問的超鏈接的文本顏色。⑥已訪問的超鏈接。設置已單擊過的超鏈接的文本顏色。⑦當前超鏈接。單擊超鏈接時的文本顏色。圖7-2-5“格式”選項卡第29頁網頁屬性設置“高級”選項卡，可以設置頁面的邊距、正文樣式、超鏈接反轉樣式等，如圖7-2-6所示。①邊距。上、下、左、右邊距分別可以設置網頁內容與瀏覽器窗口的距離。邊距寬度可以設置左／右邊距為相同的寬度，邊距高度可以設置上／下邊距為相同的高度。②樣式。單擊“正文樣式”彈出“修改樣式”對話框，如圖7-2-7所示。可以更改網頁中文本的默認格式字體、段落、邊框、編號方式、定位等。如果對網頁中的特定文本或元素應用格式設置，則“正文樣式”設置對該文本或元素不起作用。③啟用超鏈接翻轉效果。當讓指針停留在超鏈接文本上時，將更改該文本的外觀。文本外觀可以通過單擊“翻轉樣式”按鈕進行設置。圖7-2-6“高級”選項卡圖7-2-7“修改樣式”對話框第30頁網頁屬性設置“自定義”選項卡可以添加由Meta屬性包含的頭信息變量，主要分為系統(tǒng)（HTTP-EQUIV）變量和用戶（User）變量?！罢Z言”選項卡。可以設置網頁語言、HTML編碼等。第31頁保存網頁保存尚未保存的網頁單擊“常用”工具欄上的保存按鈕?；蛘哌x擇菜單“文件”、“保存”命令，在打開的“另存為”對話框中找到并雙擊要保存網頁的文件夾。在“文件名”框中，輸入網頁的文件名，然后單擊“保存”按鈕。保存從當前站點打開的網頁單擊“常用”工具欄上的保存按鈕，或者選擇菜單“文件”、“保存”命令即可。保存從當前站點之外的位置打開的網頁選擇菜單“文件”、“另存為”命令，在彈出的“另存為”對話框中找到并雙擊要保存網頁的文件夾，然后單擊“保存”按鈕。第32頁打開網頁選擇菜單“文件”|“打開”命令，通過彈出的“打開文件”對話框打開網頁?；蛘咴贔rontPage2003的站點視圖模式下，雙擊網頁文件名也可以打開網頁。第33頁預覽網頁網頁在制作完成后，在設計視圖下只能看到頁面的大概形態(tài)，而動畫、視頻、音頻。網頁動態(tài)效果等需要在預覽視圖模式或者Web瀏覽器中才能看到。預覽有兩種方式：在FrontPage預覽視圖中預覽和在Web瀏覽器中預覽。預覽網頁首先要確定要瀏覽的網頁處于打開狀態(tài)。（l）在FrontPage預覽視圖中預覽單擊FrontPage2003窗口中左下角視圖切換標簽中的預覽按鈕，即可瀏覽制作效果。（2）在Web瀏覽器中預覽選擇菜單“文件”、“在瀏覽器中預覽”命令，選擇瀏覽器，即可啟動瀏覽器顯示頁面效果，其中瀏覽器后面的數字表示將按此大小打開瀏覽器窗口?；蛘邌螕簟俺Ｓ谩惫ぞ邫谏系摹癕icrosoftInternetExplorer6.0中的預覽”按鈕。第34頁三、

網頁中的文本操作

網頁中大量的信息是文本，因此文本的操作是網頁制作的基礎。本節(jié)主要介紹如何在設計視圖模式下為網頁輸入文本，以及如何通過設置文本格式、段落格式、邊框和底紋、列表等，使頁面美觀。第35頁文本的輸入網頁中文本和特殊字符的輸入和前面講解的方法基本一樣，也有所不同。如果要產生一個新行，需要按下“Shift＋Enter”鍵，換行標記為“”。要產生一個新的段落，直接按“Enter”鍵，段落標記為“”。插入水平線。當頁面中內容比較多時，為了使網頁內容結構清晰，可以通過插入水平線分隔內容。操作步驟為：選擇插入位置，選擇菜單“插入”、“水平線”命令。設置水平線。雙擊水平線，在彈出的“水平線屬性”對話框，可以設置水平線的寬度、高度、對齊方式、顏色等。第36頁文本的格式化設置字體格式網頁中最重要的內容是文本，因此文本的格式化是網頁制作的關鍵步驟之一。包括設置字體、字號、字體顏色和字符間距等。設置字體格式首先選中要設置字體的文本，選擇方法與Word2003中的選定方式類似。顏色吸管FrontPage2003除了提供前面介紹的顏色選擇方法外，還可以使用顏色吸管選擇頁面文本或圖片的顏色作為文本的設定顏色.方法如下：選擇菜單“格式”、“字體”命令，在打開的“字體”對話框中，單擊“顏色”下拉列表框，在彈出的下拉列表中選擇“其他顏色”，打開“其他顏色”對話框，如圖7-2-8所示。單擊顏色選擇按鈕，鼠標就會變成顏色吸管。移動鼠標，在需要的顏色處單擊鼠標，就會在“其他顏色”對話框中的“新建”顏色窗口中顯示吸取的顏色，單擊“確定”按鈕即可使用吸取的顏色。圖7-2-8“其他顏色”對話框第37頁文本的格式化設置字符間距為了增加網頁中文字與文字間的距離，需要設置字符間距。首先選擇要設置字符間距的文本，選擇菜單“格式”、“字體”命令，彈出“字體”對話框，選擇“字符間距”選項卡，如圖7-2-9所示。在“間距”下拉列表框中可以設置間距方式：普通、加寬和緊縮。在“間距大小”微調框中輸入以像素為單位的間距大小。在“定位”下拉列表框中可以設置字符高度相對于本行基線的高度，然后單擊“確定”按鈕。圖7-2-9“字符間距”選項卡第38頁文本的格式化設置標題級標題級可以用來設置不同的字體大小，在網頁中可分為6級不同大小的標題。1級標題字體最大，6級標題字體最小。各級標題用來顯示不同層次的主題，以區(qū)分各個主題的層次關系。設置標題級的方法為：選中需要設置的標題，打開“格式”工具欄上的“樣式”下拉列表框，如圖7-2-10（a）所示，選擇相應的標題。在IE瀏覽器中瀏覽，顯示效果如圖7-2-10（b）所示。圖7-2-10標題級設置第39頁段落的格式化

段落是一種基于文本的布局格式，段落格式主要包括段落的縮進、段落間距和段落的對齊方式。段落縮進選中要設置縮進的段落，選擇菜單“格式”、“段落”命令，彈出“段落”對話框，如圖7-2-11所示。在“縮進”選項區(qū)設置文本之前、文本之后、或者首行縮進的值。設置完成后單擊“確定”按鈕。段落間距段落間距的設置也是美化網頁的一個重要手段，可以有效地控制文本與整個版面的層次。設置段落間距的方法為：選中要設置間距的段落，在圖7-2-11所示的“段落”對話框中，可以設置段前、段后、單字間距，也可以設置行距大小（單倍行距、1.5倍行距、雙倍行距），設置完成后單擊“確定”按鈕。段落對齊方式段落的對齊方式有5種：左對齊、右對齊、居中、兩端對齊和交互象形文字。默認情況下使用的是兩端對齊方式。設置段落對齊的方法為：選中要設置對齊方式的段落，在圖7-2-11所示的“段落”對話框中，在“對齊方式”下拉列表框中選擇對齊方式，然后單擊“確定”按鈕。圖7-2-11“段落”對話框第40頁列表的使用

列表是網頁中組織數據的一種形式，可以使網頁內容層次分明、重點突出。網頁制作中共可以使用5種列表：項目符號列表、編號列表、自定義列表、圖片列表、菜單列表和目錄列表。第41頁項目符號列表項目符號是在文本列表項目的前面用于強調視覺效果的各種符號。創(chuàng)建項目符號列表的具體操作步驟如下：選中要創(chuàng)建項目符號列表的段落或將光標定位在段落的開始處。單擊“格式”工具欄的“樣式”下拉列表框，選擇“項目符號列表”選項即可。如果需要改變項目符號列表，可以選擇菜單“格式”、“項目符號和編號”命令，彈出“列表屬性”對話框，選擇“無格式項目列表”選項卡，如圖7-2-12所示。選擇所需的項目列表，或單擊“樣式”進行樣式修改。圖7-2-12“無格式項目列表”選項卡第42頁編號列表為已存在的文字建立編號列表。選中要創(chuàng)建編號的段落，單擊“格式”工具欄的“樣式”下拉列表框，選擇“編號列表”選項即可。新建編號列表。將光標定位在建立列表的起始位置，單擊“格式”工具欄的“樣式”下拉列表框，選擇“編號列表”選項。窗口就會出現編號“1．”，輸入列表內容，保存后就可以預覽效果了。編號列表的編號主要有5種：阿拉伯數字、大寫羅馬數字、大寫英文字母、小寫羅馬數字、小寫英文字母，默認是從1開始?？梢栽凇傲斜韺傩浴睂υ捒蛑械摹熬幪枴边x項卡中修改。第43頁自定義列表自定義列表前面不需要任何列表符號，可以定義列表標題和列表項。定義列表標題。即定義一個列表項的標題，一般只有一行。定義列表項。即定義每一個列表項的具體內容，一般有多行，且左側縮進。把光標定位在網頁中要創(chuàng)建自定義列表的位置，在“樣式”下拉列表中選擇“定義的術語”選項，然后在空白處輸入列表標題“學校簡介”，按“Enter”另起一行。在新的一行輸入列表項的具體內容，再次按“Enter”鍵新起一行。重復上面的操作，保存后就可以在瀏覽器瀏覽。第44頁嵌套列表當顯示的內容層次較多時，需要建立大綱式的列表，即多級嵌套的編號列表、項目符號列表、定義列表等，或者幾種形式的混合。嵌套式列表的操作步驟：將光標定位在網頁的起始位置，在“樣式”下拉列表中選擇“項目符號列表”，輸入章節(jié)建立項目符號列表，如圖7-2-13（a）所示。選中節(jié)次，連續(xù)兩次單擊“格式”工具欄的“增加縮進量”按鈕，得到效果如圖7-2-13（b）所示。圖7-2-13嵌套列表顯示效果第45頁圖片列表

圖片列表和項目符號列表類似，只是圖片列表是采用圖片作為列表符號。采用圖片列表的步驟是：將光標定位在一組列表符號的任意位置，選擇菜單“格式”、“項目符號和編號”命令，彈出“列表屬性”對話框，選擇“圖片項目符號”選項卡。選定“指定圖片”單選按鈕，單擊“瀏覽”選擇作為列表符號的圖片。第46頁邊框和底紋為了突出顯示某些內容，可以為文本或段落設置邊框和底紋，可以分別設置也可以同時設置。操作步驟如下：選中要設置邊框和底紋的文本，選擇菜單“格式”、“邊框和底紋”命令，彈出“邊框和底紋”對話框。（1）設置邊框。'選擇“邊框”選項卡，如圖7-2-14所示。“設置”選項中可以設置3種邊框方式：默認、方框和自定義三種。選擇“邊框”，在“樣式”列表框中選擇邊框的線條樣式，設置顏色、線條寬度、襯距（文字與邊框的距離），單擊“確定”按鈕。取消邊框可以選擇“默認”方式。（2）設置底紋。選擇“底紋”選項卡，在“填充”選項區(qū)域中，“背景色”可以設置底紋顏色，“前景色”設置底紋文本顏色。在“圖案”選項區(qū)域中，可以選擇圖片作為背景。設置完成后，單擊“確定”按鈕。圖7-2-14“邊框”選項卡第47頁四、網頁中圖片的處理

圖片是網頁中很重要的組成元素，恰當的使用圖片不但可以美化頁面，還可以達到文字無法表達的效果，更能清楚地表達細節(jié)內容，傳遞更多的信息。第48頁圖片的類型瀏覽器支持的常用網頁圖片主要有GIF、JPEG、PNG、BMP四種格式。使用時既要考慮顏色效果，也要考慮文件的大小。GIF格式圖片

GIF格式圖片的文件擴展名是.gif，采用LIM無損壓縮技術，解壓縮很快。最多可包含256種顏色，可用于包含少量顏色的圖片。GIF圖片文件小且瀏覽速度快，支持動態(tài)效果。另外GIF圖片還可以使用透明背景，這樣圖片不會覆蓋頁面的背景顏色。第49頁圖片的類型JPEG格式圖片

JPEG格式圖片的文件擴展名是.jpg，可以顯示1670萬種顏色，適用于要求色彩豐富的圖片，如人物、風景等?？梢酝ㄟ^更改圖片的質量來控制文件的壓縮比例。設置的質量越低，壓縮比例越高，文件越小，最高可以達到1：100的壓縮比。壓縮時丟失的只是人眼不太敏感的高頻信息，因此電腦屏幕顯示時不是很明顯。但JPEG格式不適合打印或制作印刷品。一般的家用數碼相機拍攝的照片采用JPEG格式存儲。PNG格式圖片

PNG格式圖片的文件擴展名是.png。有些瀏覽器不能直接顯示PNG格式的圖片，因此應用較少。BMP格式圖片

BMP格式圖片的文件擴展名是上.bmp。BMP格式是一種位圖格式，Windows系統(tǒng)圖片交換的事實標準。目前Windows平臺下運行的任何圖片處理軟件都支持BMP格式。該格式顏色豐富，最多224種。非壓縮圖片模式，文件較大，因此網頁中使用較少。第50頁圖片的使用圖片主要用在背景圖片、網頁橫幅、公司徽標、圖片列表、導航按鈕、水平線等情況。FrontPage2003中主要可以使用來自文件、剪輯庫、掃描儀和數碼相機的圖片，也可插入藝術字、自選圖形等。插入來自文件的圖片要先確定插入圖片位置，選擇菜單“插入”、“圖片”、“來自文件”命令，彈出“圖片”對話框。選擇要插入的文件，單擊“插入”按鈕即可。如果插入的圖片不是來自當前站點，保存頁面時會彈出“保存嵌入式文件”對話框，如圖7-2-15所示。單擊“重命名”按鈕可以在該對話框內為圖片重新命名；單擊“更改文件夾”按鈕可以改變圖片保存的位置：單擊“圖片文件類型”按鈕可以改變圖片格式，按新的設定格式保存文件。圖7-2-15“保存嵌入式文件”對話框第51頁圖片的設置圖片設置主要包括環(huán)繞方式、圖片布局、圖片大小等?？梢赃x擇菜單“格式”、“屬性”命令，或者單擊右鍵，在彈出的快捷菜單中選擇“圖片屬性”命令，在打開的“圖片屬性”對話框中進行設置，如圖7-2-16所示。圖片環(huán)繞方式網頁中圖片環(huán)繞方式有左環(huán)繞和右環(huán)繞兩種。左環(huán)繞是圖片在左邊，文字在右側環(huán)繞。右環(huán)繞是圖片在右邊，文字在左側環(huán)繞。也可以采用無環(huán)繞方式，圖片和文字分開。圖片布局在“布局”選項區(qū)域中設置對齊方式、邊框粗細、水平間距、垂直間距。其中圖片與文本在網頁中的位置關系也就是對齊方式共有11種。圖片大小在“大小”選項區(qū)域中設置圖片的大小，在“寬度”和“高度”中可以輸入具體像素值，還可以設定相對原圖的百分比。也可以通過用鼠標拖動圖片控點的方式調整圖片大小。圖7-2-16“圖片屬性”對話框第52頁圖片的編輯圖片的編輯除了使用Photoshop這樣的專用圖片處理工具外，還可以使用FrontPage2003的“圖片”工具欄。主要包括裁剪圖片、旋轉或翻轉圖片、設置對比度和亮度等，可以使用“圖片”工具欄完成這些操作。第53頁圖片工具欄可以選擇菜單“視圖”、“工具欄”、“圖片”命令，就會出現“圖片”工具欄，如圖7-2-17所示。常用按鈕功能介紹如下：（1）“文本”按鈕。用于在GIF圖片上加入說明性文字。（2）“自動縮略圖”按鈕。將選中的圖片生成圖片的縮略圖，并在縮略圖上建立一個鏈接到該圖片的超鏈接。（3）“向左旋轉”按鈕。將圖片逆時針旋轉90”。（4）“向右旋轉”按鈕。將圖片順時針旋轉90”。（5）“水平翻轉”按鈕。將圖片做左右對稱的鏡像。圖7-2-17“圖片”工具欄第54頁圖片工具欄（6）“垂直翻轉”按鈕。將圖片做上下對稱的鏡像。（7）“降低對比度”按鈕。減少圖片前景和背景的對比度。（8）“增加對比度”按鈕。增加圖片前景和背景的對比度。（9）“增加亮度”按鈕。增加圖片的亮度。（10）“降低亮度”按鈕。降低圖片的亮度。（11）“裁剪”按鈕。將光標定位在圖片上，可以拉出一個任意大小的虛線框，一框內的保留，框外的裁掉。第55頁圖片工具欄（12）“設置透明色”按鈕。將GIF格式的圖片設置為透明，這樣就不會覆蓋掉頁面背景。（13）“顏色”按鈕。有“自動”、“灰度”、“黑白”、“沖蝕”選項，可以達到特殊效果。（14）“凹凸效果”按鈕。將圖片邊界凹凸化，達到3D效果，形成立體圖片。（15）“選擇”按鈕。用于網頁中圖片的選擇。（16）“長方形熱點”按鈕。在圖片中定義長方形熱點，在該熱點上可以創(chuàng)建超鏈接。（17）“圓形熱點”按鈕。在圖片中定義圓熱點，在熱點上可以創(chuàng)建超鏈接。（18）“多邊形熱點”按鈕。在圖片中定義多邊形熱點，在熱點上可以創(chuàng)建超鏈接。（19）“還原”按鈕。撤銷對圖片的各種編輯操作。第56頁圖片的編輯（1）裁剪圖片選中圖片，單擊“圖片”工具欄的“裁剪”按鈕，圖片上就會出現一個方框，拖動方框上的控點調整方框大小。調整好后，再次單擊“裁剪”按鈕或者按“Enter”鍵即可完成裁剪。（2）設置圖片透明度為GIF格式的圖片設置透明度可以避免圖片遮擋頁面背景。非GIF格式的圖片FrontPage會自動轉換為GIF格式。選中圖片，單擊“圖片”工具欄的“設置透明色”按鈕，單擊圖片的任意位置即可。（3）在圖片中編輯文字可以為GIF圖片添加文字，非GIF格式的圖片FrontPage會自動轉換為GIF格式。選中圖片，單擊“圖片”工具欄的“文本”按鈕，在圖片上出現的輸入框中輸入文字，也可以設置文字格式，移動輸入框的位置。第57頁五、網頁中表格的使用表格的創(chuàng)建在網頁中表格的主要作用是組織數據和頁面布局。表格主要由6部分組成：標題、表頭、行、列、單元格、邊框。自動創(chuàng)建表格選定插入點，選擇菜單“表格”、“插入”、“表格”命令，彈出“插入表格”對話框，如圖7-2-18所示。相應設置完成后單擊“確定”按鈕。手工繪制表格手工繪制表格方法與Word2003的類似。圖7-2-18“插入表格”對話框第58頁表格的編輯對表格的編輯主要包括表格大小的調整、單元格的調整、單元格的合并和拆分等。1．選定表格在對表格進行編輯之前，首先要選定表格、單元格、行或列等。2．單元格對齊方式選中單元格，選擇菜單“表格”、“表格屬性”、“單元格”命令，彈出“單元格屬性”對話框，如圖7-2-19所示。3．插入和刪除行、列及單元格4．調整表格及單元格大小圖7-2-19“單元格屬性”對話框第59頁六、

建立超鏈接超鏈接的概念1．URLURL（UniformResourceLocator）即統(tǒng)一資源定位符，由資源類型、主機、端口、目錄和文件名組成。需要通過URL才能訪問Internet上的資源。這些資源可以是一個頁面文件、一個圖片文件或者一個站點等。2．超鏈接超鏈接是網頁的核心，通過超鏈接可以實現頁面到頁面、頁面到圖片、頁面到站點的跳轉。超鏈接的載體可以是文字、整個圖片以及圖片上的熱點。鏈接跳轉的目的地可以是頁面、書簽、圖片、站點以及電子郵件、視頻、音頻以及普通文件。第60頁創(chuàng)建超鏈接1．在文字上創(chuàng)建超鏈接常見的在文字上創(chuàng)建超鏈接是指超鏈接的載體是文字，通過單擊文字上的鏈接跳轉到URL指定的資源。方法如下：選定要創(chuàng)建超鏈接的文字，選擇菜單“插入”、“超鏈接”命令，或者單擊“常用”工具欄上的“插入超鏈接”按鈕，彈出“插入超鏈接”對話框。如圖7-2-20所示。選擇要鏈接的目標地址，如果目標地址是待創(chuàng)建的文件，可以在“地址”輸入框中輸入一個文件名或URL地址，然后單擊“確定”按鈕。圖7-2-20“插入超鏈接”對話框第61頁創(chuàng)建超鏈接2.在圖片上創(chuàng)建超鏈接選定要創(chuàng)建超鏈接的圖片，選擇菜單“插入”、“超鏈接”命令創(chuàng)建。3．在圖片熱點上創(chuàng)建超鏈接選定要創(chuàng)建熱點的圖片，在“圖片”工具欄中，熱點分別可以通過“長方形熱點”按鈕、“圓形熱點”按鈕和“多邊形熱點”按鈕創(chuàng)建。單擊其中一個按鈕，把鼠定位在圖片中某一點，拖動到合適位置，松開鼠標，則會彈出“插入超鏈接”對話框，選擇或輸入鏈接的目標地址，然后單擊“確定”按鈕即可。4．在電子郵件地址創(chuàng)建超鏈接選擇菜單“插入”、“超鏈接”命令，彈出“插入超鏈接”對話框，單擊“電子郵件地址”選項，如圖7-2-21所示。圖7-2-21創(chuàng)建電子郵件超鏈接第62頁創(chuàng)建超鏈接5．在書簽上創(chuàng)建超鏈接前面所創(chuàng)建的超鏈接都是鏈接到外部文件，有時候當一個網頁頁面很長的時候，為了閱讀方便，可以采用書簽的方式鏈接到目標網頁的特定位置。（1）定義書簽。書簽是頁面的定位標記。選擇創(chuàng)建書簽的頁面位置，選擇菜單“插入”、“書簽”命令，彈出“書簽”對話框，如圖7-2-22所示。在“書簽”輸入框中輸入書簽名稱，然后單擊“確定”按鈕。（2）創(chuàng)建書簽超鏈接。定義完書簽后，便可以指定超鏈接。在“插入超鏈接”對話框中單擊“書簽”按鈕，彈出“在文檔中選擇位置”對話框。如圖7-2-23所示。該對話框中會顯示先前定義的書簽，選定后單擊“確定”按鈕即可。圖7-2-22“書簽”對話框圖7-2-23“在文檔中選擇位置”對話框第63頁修改超鏈接修改已經創(chuàng)建的超鏈接，可以選定超鏈接。選擇菜單“插入”|“超鏈接”命令。在彈出的“編輯超鏈接”對話框中進行修改。第64頁第三節(jié)FrontPage2003的高級應用7.3.1嵌入音頻、視頻及Flash影片7.3.2樣式表7.3.3表單的初步認識7.3.4框架網頁的使用組件的初步認識第65頁一、嵌入音頻、視頻及Flash影片一、嵌入音頻、視頻及Flash影片1．網頁中的音頻（1）音頻的格式常用音頻文件的格式有WAV、MIDI、Au、RealAudio、Mp3等，可以使用多媒體工具軟件實現各種格式的相互轉換。①WAV格式。文件擴展名是.wav，可以產生高質量的音頻效果，但文件較大，是計算機上常見的格式之一，最早用于Windows系統(tǒng)。②MIDI格式。文件擴展名是.mid。MIDI是MusicInstrumentDigitalInterface（樂器數字化接口）的縮寫。MIDI格式的音頻文件包含一系列用于播放電子合成器的指令，文件較小，適合在網絡上傳輸。③Au格式。文件擴展名是.au。Au文件也是網絡上流行的音頻文件格式之一，最初用于Sun公司的UNIX系統(tǒng)。音頻效果不是很好，但可以用于幾乎所有的操作系統(tǒng)。④RealAudio格式。文件擴展名是.ra，是專門針對網絡傳輸設計的，具有較高的壓縮和較好的容錯性。⑤MP3格式。文件擴展名是.mp3。是最近十分流行的音樂文件格式，壓縮比高、音質好，幾乎可以和CD音質相媲美。第66頁網頁中嵌入音頻選定插入位置，選擇菜單“插入”、“Web組件”命令，彈出“插入Web組件”對話框，如圖7-3-1所示，在左側的“組件類型”中選擇“高級控件”，在右側的“選擇一個控件”中選擇“插件”。單擊“完成”按鈕，彈出“插件屬性”對話框，如圖7-3-2所示。在“數據源”輸入框中輸入音頻文件名，在“大小”中設置播放器的寬度和高度，設置完成后單擊“確定”按鈕。圖7-3-1“插入Web組件”對話框圖7-3-2“插件屬性”對話框第67頁網頁中的視頻和Flash（l）視頻的格式常用的視頻文件的格式有AVI、MPEG、RealVideo等。①AVI格式。文件擴展名是.avi。最初用于Windows系統(tǒng)，是最流行的視頻格式之一。②MPEG格式。文件擴展名是.mpeg、.mpg、.mpe。是視頻文件的工業(yè)標準，提供了先進的壓縮技術和播放質量，是網絡中最常見的視頻格式之一。③RealVideo格式。文件擴展名是.rm，具有較大的壓縮比和回放質量，適合做網上直播系統(tǒng)。（2）網頁中嵌入視頻、Flash影片選定插入位置，選擇菜單“插入”、“圖片”、“視頻”或者“Flash影片”命令。在彈出的“選擇文件”對話框中選擇需要嵌入的視頻文件或者Flash影片文件。然后單擊“打開”或“插入”按鈕。第68頁二、樣式表1．關于樣式表樣式是用名字標識的格式的集合，每個樣式均有一個名字，一個樣式中可以定義多種格式，如字體、字號等。使用樣式可以快速設置一組頁面元素的格式，也可以將樣式應用到整個網站的頁面中。在網頁制作中，會把多種樣式定義保存在一個文件中。樣式表主要有三種：內置樣式、用戶定義樣式和級聯樣式，其中級聯樣式表（C

SS)最常用。可以在整個Web站點中使用統(tǒng)一的格式。常用的主要有內嵌式樣式表和外部級聯樣式表兩種。（1）內嵌式樣式表樣式代碼是保存在HTML頁面文檔的＜HEAD＞標記之間的＜STYLE＞代碼集，可以用于當前的單個頁面中。（2）外部級聯樣式表外部級聯樣式表可以應用到多個網頁中，使整個網站應用相同的樣式。若在外部級聯樣式表中修改了某種樣式，整個站點的所有網頁都可隨之更改。外部級聯樣式表使用.css為文件擴展名。第69頁創(chuàng)建樣式表選擇菜單“文件”、“新建”命令，打開“新建”任務窗格。在“新建網頁”選擇區(qū)域中單擊“其他網頁模板”，彈出“網頁模板”對話框，選擇“樣式表”選項卡，如圖7-3-3所示。FrontPage2003除了普通樣式表外提供了12種樣式表模板，我們可以選擇其中一個模板，如“公路”，然后單擊“確定”按鈕，打開了用該樣式表模板建立的新文件，如圖7-3-4所示?？梢酝ㄟ^單擊“樣式”工具欄上的“樣式”按鈕，打開“樣式”對話框，進行樣式的新建、修改和刪除操作，如圖7-3-5所示。圖7-3-3“網頁模板”對話框圖7-3-4樣式表代碼窗口圖7-3-5“樣式”對話框第70頁應用樣式表樣式表創(chuàng)建并保存后，就可以應用到網頁中。操作步驟如下：選擇菜單“格式”、“樣式表鏈接”命令，彈出“鏈接樣式表”對話框，如圖7-3-6所示?？梢赃x擇“所有網頁”和“所選的網頁”選項確定樣式表的應用范圍。單擊“添加”按鈕，選擇想要應用的樣式表文件，然后單擊“確定”按鈕返回。圖7-3-6“鏈接樣式表”對話框第71頁三、表單的初步認識表單是網頁中不可缺少的組成元素，主要用來收集客戶端輸入的信息，是用戶和Web應用程序、Web數據庫進行交互的界面。通過表單可以完成用戶和服務器之間的信息交換，在網絡的信息交流中起著非常重要的作用。表單其實就是個容器，表單可以容納多種表單元素。常用的表單元素有：表單、列表表單、列表域、表單Web控件、文本框、文本區(qū)、文件上載、復選框、選項按鈕、分組框、下拉框、按鈕、圖片、標簽等。第72頁表單的初步認識（1）文本框。長條形的輸入區(qū)，在其中可以輸入少量信息。（2）文本區(qū)。文本區(qū)和文本框都可以輸入信息，文本區(qū)可以一次輸入大量的信息。（3）復選框。同時可以選擇多個選項，可以應用在考試時的多選題。（4）單選按鈕。每次只能選擇一個選項，可以應用在考試時的單選題。（5）下拉框。由單行空白區(qū)域和下拉按鈕組成，單擊該下拉按鈕，就會彈出下拉列表項供選擇。插入表單元素的方法很簡單，選擇菜單“插入”、“表單”命令，在彈出的子菜單中選擇相應的表單元素即可，如圖7-3-7所示。圖7-3-7表單元素子菜單

四、框架網頁的使用利用框架網頁，可以在同一個瀏覽器窗口查看兩個或者多個窗口的內容，每個窗口中顯示不同的網頁內容。如圖7-3-8所示的便是一個典型的框架網頁，瀏覽器窗口中顯示了３個頁面，分別是導航條、左側的項目介紹和右側的主界面；在左側窗口中單擊某一個超鏈接，會在右側主窗口中打開超鏈接所對應的網頁。第73頁圖7-3-8典型框架網頁新建框架網頁依次選擇“視圖︱任務窗格”菜單命令，使窗口右側顯示“新建網頁或網站”任務窗格，在窗格中選擇“其他網頁摸板”命令，會出現如圖7-3-9所示“網頁模板”對話框。在圖7-3-9中選擇“框架網頁”標簽，并選擇合適的框架網頁類型，單擊“確定”按鈕，即可新建立一個框架網頁，如圖7-3-10所示。在框架網頁中單擊“設置初始網頁”按鈕，可以在出現的“插入超鏈接”對話框中找到需要的該框架內顯示的網頁；單擊“新建網頁”按鈕，可以在該框架內顯示一個新建網頁，并在該網頁上進行編輯。第74頁圖7-3-9“網頁模板”對話框圖7-3-10新建框架網頁保存框架網頁當框架網頁的各個部分都編輯完成之后，需要對整個框架網頁進行保存。在菜單中選擇“文件”︱“保存”命令，會出現如圖7-3-11所示的對話框，可以按照提示的步驟對各個部分進行保存即可。第75頁圖7-3-11保存框架網頁中的各個部分框架網頁中的超鏈接在框架網頁中設置超鏈接的步驟同一般的超鏈接的設置相同，惟一區(qū)別的是在“編輯超鏈接”對話框中要單擊“目標框架”按鈕。在“目標框架”對話框中設置鏈接的目標框架，如圖7-3-12所示。在左側框架示意圖中單擊鏈接網頁要顯示的位置，單擊“確定”按鈕。在“超鏈接”對話框中再設置該對象鏈接頁面的地址即可。第76頁圖7-3-12“目標框架”對話框第77頁五、組件的初步認識Web組件是一種特殊的動態(tài)對象，使用FrontPeqe2003中的Web組件可以向網頁中添加多種功能，不但能夠實現網頁的動態(tài)效果如字幕、橫幅廣告、交互按鈕、懸停按鈕、Flash影片等動畫效果，還可以向網頁中插入計數器、電子表格和圖表等。實現方法：選擇菜單：“插入”、“Web組件”命令，在彈出的“插入Web組件”對話框中，如圖7-3-13所示，選擇組件類型并進行相應的選擇設置即可。圖7-3-13“插入Web組件”對話框中第78頁第四節(jié)Dreamweaver8.0的使用7.4.1Dreamweaver8.0操作環(huán)境7.4.2建立與管理Web站點7.4.3網頁中文本的應用7.4.4網頁插入圖像和Flash元素7.4.5表格的應用超鏈接7.4.7層、行為和時間軸7.4.8框架和表單7.4.9網站的測試與發(fā)布第四節(jié)Dreamweaver8.0的使用Dreamweaver是Macromedia公司的產品，是目前最優(yōu)秀的網頁制作軟件之一，它提供了眾多功能強勁的可視化設計工具、應用開發(fā)環(huán)境以及代碼編輯支持，適合各個層次的開發(fā)人員和設計人員高效地設計、開發(fā)和維護網站。第79頁一、Dreamweaver8.0操作環(huán)境Dreamweaver8.0是一款專門的網頁設計軟件，它采用所見即所得的編輯方式，可以快速地創(chuàng)建頁面而無需編寫任何代碼。用戶在安裝Dreamweaver8.0完成之后，可以啟動Dreamweaver8.0的起始頁，如圖7-4-1所示。第80頁圖7-4-1Dreamweaver的歡迎界面Dreamweaver8.0的工作界面當打開Dreamweaver8.0，并打開相應的站點后，可以看到如圖7-4-2所示的窗口。該窗口主要由“插入”欄、“文檔”工具欄、面板組、“文件”面板、“屬性”面板、標簽選擇器和“文檔”窗口等組成。第81頁

“插入”欄“文檔”工具欄面板組文件面板標簽選擇器“屬性”面板“文檔”窗口圖7-4-2Dreamweaver8.0的工作區(qū)界面“插入”欄插入”欄包含創(chuàng)建和插入對象的按鈕，當需要某個操作的時候，可以將鼠標指針移動到某個按鈕上，這時鼠標旁邊會出現該按鈕的功能提示，根據提示用戶選擇想要的操作?！安迦搿睓诘陌粹o被包括在幾個不同的類別中，其中的“常用”類別如圖7-4-3所示。如果我們想要的按鈕沒有在當前的類別中，則可以單擊類別名稱右邊向下的箭頭，選擇其他想要的類別?！安迦搿睓诎ǖ念悇e有：第82頁圖7-4-3“插入”欄“插入”欄①常用”類別：可以插入或創(chuàng)建最常用的對象，如圖像、表格等。②“布局”類別：可以插入表格、Div標簽和繪制層等，并且可以在三種表格模式之間切換，分別是標準模式、擴展表格模式和布局模式。③“表單”類別：通過此類別，用戶可以插入表單中的各種元素，如隱藏域、文本區(qū)域、復選框、單選按鈕等。④“文本”類別：通過此類別，用戶可以插入文本設置標簽，如字體標簽編輯器、粗體、斜體等。⑤“HTML”類別：通過此類別，用戶可以插入HTML的一些基本元素，如水平線、文件頭的一些信息、表格、框架等。⑥“應用程序”類別：通過此類別，用戶可以插入網頁的動態(tài)元素，如記錄集、動態(tài)數據、記錄集分頁等。⑦“Flash元素”類別：可以幫助用戶插入Flash元素。第83頁“文檔”工具欄“文檔”工具欄中包含了視圖選擇按鈕和一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項，如圖7-4-4所示。

圖7-4-4“文檔”工具欄①“代碼”：單擊該按鈕可以切換到“代碼”視圖，該視圖顯示的是HTML代碼或者腳本程序，適合熟悉代碼的用戶使用。②“拆分”：單擊該按鈕可以同時出現“代碼”視圖和“設計”視圖，上部顯示“代碼”視圖，下部顯示“設計”視圖。在該視圖模式下，用戶在“設計”視圖中所作的操作會立即顯示在代碼窗口中，而用戶在代碼窗口中所作的操作，必須在“屬性”面板中單擊“刷新”按鈕后，才可以顯示在“設計”視圖中。③“設計”：該視圖模式可以直觀的顯示出網頁的布局和結構等，適合不熟悉代碼的用戶使用。④“標題”：用于編輯網頁的標題，該標題將顯示在網頁的標題欄上。第84頁文檔”窗口、面板組、“文件”面板（3）“文檔”窗口“文檔”窗口是制作與編輯網頁的主要工作區(qū)。（4）面板組面板組集成了每一類的操作，通過單擊相應的項目就可以展開該面板，也可以將某個面板拖放到窗口的任意位置。（5）“文件”面板“文件”面板列出了當前Dreamweaver站點內的所的文件，該站點視圖可以是本地站點、遠程站點或測試服務器，同樣如果要打開站點內的某個文件，只需要雙擊該文件名就可以了，另外還可以在該文件名上單擊鼠標右鍵，在打開的快捷菜單中選擇相應的操作。第85頁標簽選擇器、“屬性”面板（6）標簽選擇器當單擊標簽選擇器中的某個標簽時，對應在“文檔”窗口中，Dreamweaver會自動選擇工作窗口中相對應的區(qū)域。如果是在“代碼”視圖下，當選定了某個標簽后，依次選擇“編輯”菜單、“代碼折疊”、“折疊所選”命令（或按Ctrl+Shift+C），可將該標簽區(qū)域的代碼折疊起來，以便于檢查代碼的層次結構。要展開折疊的代碼，只需要雙擊該代碼片段即可。（7）“屬性”面板每一種標簽對應的屬性是不同的，所以當單擊工作區(qū)中的某個標簽或對象時，其屬性會顯示在“屬性”面板中，以便用戶查看和修改。“屬性”面板默認位于工作區(qū)底部，但是如果需要的話，用戶可以將其拖動到窗口的上部或者浮動在工作區(qū)窗口上。

第86頁二、建立與管理Web站點站點是一系列相關文檔的集合。站點可以放在本地或遠程服務器上。先建立本地站點可以從全局上控制網站的結構，完成對網頁的編輯調試工作。Dreamweaver8.0是一個站點創(chuàng)建和管理工具。第87頁創(chuàng)建本地站點每個網站都有自己的站點。一個本地站點需要有一個名稱和一個本地根目錄。要創(chuàng)建一個本地站點，首先啟動Dreamweaver8.0。選擇“站點”|“新建站點”菜單命令。出現“新建站點”對話框，如圖7-4-5所示。第88頁圖7-4-5“新建站點”對話框創(chuàng)建本地站點該對話框由“基本”和“高級”兩個選項卡組成?！盎尽边x項卡針對初級用戶，采用引導方式引導用戶逐步定義站點；“高級”選項卡將所有的分類集成在一個面板組上，對Dreamweaver8.0較熟悉的用戶，可以直接在該面板組上進行設置。單擊“下一步”按鈕，在打開的對話框中有兩個單選按鈕，可以決定是否使用服務器技術，如圖7-4-6所示。如果需要制作動態(tài)網站，可以選擇第二個單選按鈕，同時進行相應屬性的設定。如果只是進行靜態(tài)網站的制作，可以選擇默認的第一個選項“否，我不想使用服務器技術”。第89頁圖7-4-6決定是否使用服務器技術創(chuàng)建本地站點單擊“下一步”按鈕，出現向導的下一個界面，如圖7-4-7所示，詢問站點的位置以及如何使用將要編輯與網頁制作有關的文件。選擇“編輯我的計算機上的本地副本，完成后再上傳到服務器”的選項。在站點開發(fā)過程中這里有兩種選擇處理文件的方式，一般情況下選擇此選項。在“您將把文件存儲到計算機上的什么位置？”處，單擊文本框旁邊的文件夾圖標，會出現“選擇站點的本地根文件夾”對話框。第90頁圖7-4-7設置用戶存放站點的路徑創(chuàng)建本地站點單擊“下一步”按鈕。出現向導的下一個界面，如圖7-4-8所示，詢問“您如何連接到遠程服務器”。從彈出式菜單中選擇“無”。也可以稍后設置有關遠程站點的信息。第91頁圖7-4-8設置計算機與服務器的連接方式創(chuàng)建本地站點單擊“下一步”按鈕，該向導的下一個對話框將出現，其中顯示設置概要，如圖7-4-9所示。目前，本地站點信息對于開始創(chuàng)建網頁已經足夠了。單擊“完成”按鈕完成設置。單擊窗口右側的“文件”面板組將其展開，并選擇“文件”面板，如圖7-4-10所示，其中新建的站點中還沒有任何文件和文件夾。第92頁圖7-4-9新建站點結束對話框圖7-4-10“文件”面板組

管理站點

當用戶建立好了站點以后，可以利用Dreamweaver8.0的“站點導出”功能將定義好的站點導出并保存到本地硬盤上。當用戶下次要使用該站點進行操作時，可方便地利用“站點導入”功能，把已經保存在硬盤上的站點定義導入Dreamweaver8.0中，具體操作方法如下：第93頁導出站點通過選擇“站點”菜單中的“管理站點”命令，打開“管理站點”對話框，如圖7-4-11所示。用鼠標選擇需要導出的站點名稱，單擊“導出”按鈕，打開“導出站點”對話框，選擇合適的路徑，一般選擇導出的站點設置與站點根文件夾在同一目錄下。Dreamweaver8.0會在該位置將所選站點保存為帶.ste文件擴展名的XML文件，單擊“保存”按鈕。最后，單擊“完成”按鈕，關閉“管理站點”對話框。第94頁圖7-4-11“管理站點”對話框導入站點通過選擇“站點”菜單中的“管理站點”命令，打開“管理站點”對話框，如圖7-4-11所示。單擊“導入”按鈕，打開“導入站點”的對話框，如圖7-4-12所示，選擇站點文件所在路徑，單擊“打開”按鈕。此時導入的站點會出現在“管理站點”對話框的站點列表中。最后，在“管理站點”對話框中單擊“完成”按鈕，關閉該窗口，并將站點文件導入到系統(tǒng)緩存中。第95頁圖7-4-12“導入站點”對話框刪除站點如果要刪除一些沒用的站點，在“管理站點”對話框中。單擊要刪除的站點名稱（也可以同時選擇多個站點名稱），單擊“刪除”按鈕。出現確認對話框，單擊“是”按鈕即可刪除所選站點。第96頁三、網頁中文本的應用Dreamweaver8.0是一種“所見即所得”的網頁設計工具。設計者可以直接輸入西文字符或利用中文操作系統(tǒng)中的某一種漢字輸入法輸入漢字。然后使用Dreamweaver8.0的文本格式化工具對文本進行格式化，在網頁編輯窗口中能直接見到文本格式化的結果。第97頁創(chuàng)建文檔創(chuàng)建自己的頁面：可以使用Dreamweaver8.0起始頁創(chuàng)建新頁，或者選擇“文件”|“新建”菜單命令，打開“新建文檔”對話框，如圖7-4-13所示。可以根據自己的需要創(chuàng)建不同格式的文檔。此處選擇“基本頁”類別的“HTML”，單擊“創(chuàng)建”按鈕，就可以進入工作區(qū)界面，用戶可以在這個空白頁輸入文本進行編輯。第98頁圖7-4-13“新建文檔”對話框保存文檔、打開現有的文檔完成文檔的編輯后，就需要對文檔進行保存。選擇“文件”|“保存”菜單命令，彈出“另存為”對話框，在對話框中輸入要保存的文件名，選擇合適的路徑，單擊“保存”按鈕。默認保存類型為*.html或*.htm。同時Dreamweaver8.0還支持多種文件類型的保存，如*.asp、*.css、*.js等，可以在保存類型下拉列表中選擇合適的文件類型，或直接輸入文件的后綴名。選擇“文件”|“打開”菜單命令，在“打開”的對話框中選擇要打開的文件就可以了。第99頁文檔的編輯與基本操作文字是網頁的基本元素，Dreamweaver8.0中對文本的操作同字處理軟件類似。在網頁中添加文本通常使用以下兩種方法：在文檔窗口直接輸入文本或者從其它應用程序中將文本復制、粘貼到網頁上。輸入文字的同時，還可根據需要，設置新創(chuàng)建文檔的頁面屬性，操作方法是：選擇“修改”|“頁面屬性”菜單命令，在打開的對話框中，設置頁面字體、文本顏色、背景顏色以及邊距等信息，如圖7-4-14所示。第100頁圖7-4-14“頁面設置”對話框設置文本格式輸入文字后，文本的設置是通過其屬性面板來進行的，文本屬性面板在窗口的下方，如圖7-4-15所示。面板中的項目與Word中文本設置的功能相似。第101頁圖7-4-15文本屬性面板

四、網頁插入圖像和Flash元素

一個好的網站除了最基本的文字內容外，經常要插入圖片進行修飾。目前網頁上最常用的圖片文件的格式是：JPG、JPEG、GIF和PNG。１.插入圖像在網頁中插入圖像，首先將光標定位在要插入圖像的位置，可以采用下列任意一種方式插入圖片：①選擇“插入”|“圖像”菜單命令。②按快捷鍵Ctrl+Alt+I。③直接在“插入工具欄組”中選擇“常用工具欄”，單擊面板上的插入圖像按鈕

。第102頁插入圖像采用前面三種方式中的任意一種方式都會彈出如圖7-4-16所示的對話框，在對話框中設置要插入的圖像文件的路徑和文件名即可。

如果面板組的文件面板中有圖片，可以將圖片直接拖放到工作區(qū)中。如果要插入的圖像文件位于站點以外的文件夾中，系統(tǒng)會出現如圖7-4-17所示的對話框，提示需要將圖像復制到站點內，單擊“是”按鈕，將圖像保存到站點內的文件夾中。否則，網頁上傳到遠端站點后，會找不到圖像，出現斷開的鏈接，導致圖像不能正常顯示。第103頁圖7-4-16選擇插入圖像源文件對話框圖7-4-17警告對話框設置圖像屬性插入圖像后需要根據實際情況對圖像作一些修改，使圖片和文字內容更好地結合起來。當選中一幅圖片時，將會在窗口的下方出現如圖7-4-18所示的圖像屬性面板，用戶可以在此面板中對圖像進行格式設置。第104頁圖7-4-18圖像屬性面板插入鼠標經過翻轉圖像鼠標經過翻轉圖像實際上是在同一位置插入兩幅圖像，這項技術是網絡上最常用的技術之一。當瀏覽網頁時，把鼠標移動到一張圖片上時，這張圖片就馬上換成另一張圖片，當鼠標移開時，圖片又換回來了。這種互動技術通常用在網頁的選項按鈕上，建立鏈接會產生動態(tài)按鈕的效果。插入鼠標經過圖像之前，一定要準備兩幅大小一樣、畫面不同的圖像。插入鼠標經過翻轉的圖片步驟如下：（1）把鼠標插入點放到要插入圖片的位置。（2）選擇“插入”|“圖像對象”|“鼠標經過圖像”菜單命令，這時會彈出如圖7-4-19所示的對話框。第105頁圖7-4-19“插入鼠標經過圖像”對話框插入鼠標經過翻轉圖像（3）在“圖像名稱”文本框中可以為翻轉圖像命名，也可以保持默認值。（4）單擊“原始圖像”右側的“瀏覽”按鈕，打開“原始圖像”對話框，從中選擇一幅圖像。（5）單擊“鼠標經過圖像”文本框右側的“瀏覽”按鈕，從中選擇另一幅圖像。（6）選中“預載鼠標經過圖像”復選框。（7）在“替換文本”文本框中輸入文字（8）在“按下是，前往的URL”文本框中輸入鏈接地址，或單擊右側的“瀏覽“按鈕，選擇一個鏈接目標。（9）按下F12鍵打開瀏覽器，當鼠標放到圖片上或離開圖片時，就可以看到翻轉圖像的效果。第106頁插入Flash動畫和Flash按鈕一個優(yōu)秀的網站包含的元素不僅僅有文字和圖片，為了增強網頁的表現力，豐富文檔的顯示效果，可以在網頁中插入Flash動畫和動態(tài)的Flash按鈕。Flash動畫是一種高質量的矢量動畫，使用動畫制作軟件Flash創(chuàng)建，其擴展名為.swf。第107頁插入Flash動畫在網頁中插入Flash動畫的操作步驟如下：①選擇“插入”|“媒體”|“Flash”菜單命令，打開如圖7-4-20所示的對話框。②在“選擇文件”對話框中選擇要插入的Flash動畫文件，然后單擊“確定”按鈕，會將Flash動畫文件的圖標插入到文檔中。③選中插入的Flash動畫圖標，在窗口下方的屬性面板中可以修改其屬性，如圖7-4-21所示。④按F12鍵可以瀏覽插入的動畫，動畫會自動播放。第108頁圖7-4-20選擇Flash動畫文件對話框圖7-4-21Flash動畫的屬性面板

插入

溫馨提示

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

評論

0/150

提交評論