計算機基礎(chǔ)（第二版)第7章 網(wǎng)頁制作軟件介紹

信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 1頁 第 7章 網(wǎng)頁制作軟件介紹 本章概述 本章的學(xué)習(xí)目標 主要內(nèi)容 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 2頁 本章概述 頁是 頁用 文本標記語言）書寫，一個網(wǎng)頁包含許多不同類型的 用這樣的標記符構(gòu)建成網(wǎng)頁的結(jié)構(gòu)、外貌和內(nèi)容。 網(wǎng)頁被保存在 以通過特定的 你在瀏覽器的地址欄中輸入相應(yīng)的 可以找到相應(yīng)的 從中 獲取信息。 人們在制作一個網(wǎng)頁時，大都采用一些專門的網(wǎng)頁制作工具，如們將網(wǎng)頁界面自動構(gòu)建成對應(yīng)的 人們要制作一個有特色的、動態(tài)交互的網(wǎng)頁還需要使用 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 3頁 本章的學(xué)習(xí)目標 了解 掌握網(wǎng)頁、網(wǎng)站等相關(guān)概念 掌握網(wǎng)站與網(wǎng)頁創(chuàng)建和管理的操作 掌握網(wǎng)頁的編輯技術(shù) 掌握網(wǎng)頁的表格操作 掌握網(wǎng)頁圖片操作 掌握網(wǎng)頁表單和框架網(wǎng)頁操作 掌握網(wǎng)頁超鏈接操作 了解網(wǎng)頁制作的輔助技術(shù)和動態(tài)交互網(wǎng)頁的制作工具 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 4頁 主要內(nèi)容 003的使用 003的高級應(yīng)用 網(wǎng)頁開發(fā)輔助技術(shù) 動態(tài)交互網(wǎng)頁的制作工具 本章小結(jié) 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 文本標記語言 個常用的 第 5頁 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 6頁 超文本標記語言。 同所有的編程語言一樣， 但它又不同于一般的編程語言，它只是一些可以由瀏覽器加以解釋，并具有命令標記性質(zhì)的文本。 一、超文本標記語言 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 7頁 例如在瀏覽器 圖 7 該網(wǎng)頁的文本內(nèi)容如下： 我的第一個 迎光臨！ 您的到來為本站增輝！ 本站全體同仁歡迎您！ 蜜蜂之家 圖 7個簡單的主頁 超文本標記語言 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 8頁 二、 一個網(wǎng)頁對應(yīng)于一個 標準的 文件頭部用來設(shè)置當(dāng)前文檔的一些相關(guān)信息，如網(wǎng)頁的搜索關(guān)鍵字、網(wǎng)頁的標題、網(wǎng)頁所使用的編碼以及腳本語言等，它一般不在瀏覽器的窗口中顯示。 文件主體用來放置 含文字、圖片、背景色、表格、表單等幾乎所有關(guān)于網(wǎng)頁的功能和效果的展示。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 表 7第 9頁 名 稱 描 述 文 件開始 頭 部 標題名 其他頭部內(nèi)容定義標記 主 體 主頁內(nèi)容（文本、圖像等） 文 件結(jié)束 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 記”。一個標記表示為“ ”，中間可以包含標記名、標記的屬性等，就像編程語言中的參數(shù)一樣。 標記 構(gòu)成一對完整的標簽，并且許多標記是成對出現(xiàn)的，這也是 一個開始標記，還有一個結(jié)束標記，結(jié)束標記就是在開始標記之前加一個“ /”。比如下面兩行： 它們告訴瀏覽器，這是 )以及結(jié)束 ()。 第 10頁 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 11頁 三、幾個常用的 1 作用：表示超文本文檔的開頭及結(jié)束。 2 作用：一些有關(guān)文檔的定義、說明和描述等標記包含在其中。 3 作用：其中包含的內(nèi)容出現(xiàn)在瀏覽器窗口的標題欄上，作為該主頁的標題。 4 作用：要表達的正文信息包含在其中。 說明：以上 4個標記是一個完整的 5 作用：其中 l6，表示由大到小的 6種標題文字。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 12頁 6 作用：強行換行。 在 有包含的回車符和空格都被忽略，當(dāng)一行的內(nèi)容還不滿屏幕的寬度時，下一行內(nèi)容會自動接上，因此在需換行時必須使用該標記。 7格式： 作用：用于設(shè)定字體的大小和所用的字體，其中包含兩個屬性： 屬性 定字體的大小，值為 l 7。 屬性 于指定不同的字體。 8格式： 作用：將圖像文件嵌入到 中包含 3個屬性： 像來源）、像寬度）和 像高度） 9格式： 作用：將文本的內(nèi)容居中。 10格式： 作用：在其間包含的文本內(nèi)容上加下劃線。 當(dāng)然， 于初學(xué)者來說比較難記。不過我們可以使用 幾個常用的 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 13頁 第二節(jié) 003概述 創(chuàng)建站點和網(wǎng)頁操作 網(wǎng)頁中的文本編輯 網(wǎng)頁中圖片的處理 網(wǎng)頁中表格的使用 建立超鏈接 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 14頁 一、 003概述 003是 003的新特性 003集中了所有 可以查看整個網(wǎng)絡(luò)全景，增加了布局表格和單元格、圖像描摹。可以使用動態(tài) 頁標尺和布局網(wǎng)格。 （ 1）自定義例覽器分辨率 在設(shè)計網(wǎng)頁時，可實時調(diào)節(jié)當(dāng)前頁面在客戶端顯示的分辨率，以便預(yù)覽當(dāng)前效果。 （ 2）描摹圖像 大家在學(xué)習(xí)書法的時候，都接觸過臨摹吧，描摹圖像的功用與其類似，就是通過創(chuàng)建一個圖像（一般為網(wǎng)頁的效果圖）為參照物，以便于網(wǎng)頁的設(shè)計制作。選擇菜單欄上的“視圖”、“描摹圖像”、“設(shè)置”命令，在彈出的對話框中，選擇指定圖像，再設(shè)置其坐標（即在設(shè)計頁面上顯示的位置）。最后，設(shè)置透明度，再單擊“確認”按鈕即可。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 15頁 （ 3）層功能 層在網(wǎng)頁制作中是不可缺少的， 003可以像過層可以將內(nèi)容重疊、交叉擺放。 （ 4）行為的應(yīng)用 行為是事件和由該事件觸發(fā)的動作的組合。行為代碼是客戶端的此它無需服務(wù)器的支持就可觸發(fā)事件。 行為一直是 003現(xiàn)在也有了這個功能。選擇菜單“格式”、“行為”命令，查看界面右側(cè)的“行為”窗格，單擊“插入”向下箭頭按鈕，在彈出的菜單中可選擇播放聲音、彈出消息、調(diào)用腳本及彈出菜單等事件。在選擇指定的插入對象后，將彈出相應(yīng)的設(shè)置對話框，在其中按需操作。所有添加的行為事件，均會顯示在列表中。 003新特性 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 16頁 （ 5）用網(wǎng)頁重定向 在 003中，選擇菜單“工具”、“中文簡繁轉(zhuǎn)換”、“插入重定向代碼”命令，在彈出的對話框中，設(shè)置簡體頁面網(wǎng)址及繁體頁面網(wǎng)址。而后，插入的代碼將通過測覽器對支持語言的檢測，實現(xiàn)自動轉(zhuǎn)向。 （ 6）檢查網(wǎng)頁錯誤 選擇菜單“工具”、“輔助功能”命令，在彈出的對話框中設(shè)置檢查范圍、內(nèi)容及顯示對象，接著單擊“檢查”按鈕即可。利用此項功能，就可快速找出指定網(wǎng)頁是否有錯誤，并可查看問題之所在。 （ 7）規(guī)劃頁面布局 一個成功的設(shè)計作品，大都需要事先為其規(guī)劃設(shè)計布局，以便于宏觀控制其內(nèi)容。選擇菜單“表格”、“布局表格和單元格”命令，右側(cè)窗格中將顯示相應(yīng)的屬性設(shè)置。我們著重查看“表格布局”下拉列表，在其中有若干布局樣式可供選擇。當(dāng)我們選擇一種合適的布局應(yīng)用于當(dāng)前頁面上后，可隨時在設(shè)計視圖中按需自行調(diào)節(jié)其布局樣式。 003新特性 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 17頁 003的啟動與退出的方法和 003類似。 003的啟動 雙擊 003快捷方式圖標， 選擇“開始”、“所有程序”、“ “ 單命令都可以啟動 003。 003的啟動 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 18頁 003的退出 （ 1）單擊 003窗口中的“關(guān)閉”按鈕。 （ 2）選擇菜單“文件”、“退出”命令。 （ 3）按 4。 （ 4）單擊窗口中的 003控制圖標，打開窗口控制菜單，選擇“關(guān)閉”命令。 （ 5）雙擊窗口中的 003控制圖標。 003的退出 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 19頁 003啟動后進入如圖 7 003中提供了 7種視圖模式和 4種網(wǎng)頁視圖方式。 003提供了網(wǎng)頁視圖、文件夾視圖、遠程網(wǎng)站視圖、報表視圖、導(dǎo)航視圖、超鏈接視圖和任務(wù)視圖 7種視圖模式， 利用這些視圖可以完成站點的創(chuàng)建、管理、發(fā)布等任務(wù)。視圖切換可以選擇菜單“視圖”，執(zhí)行相應(yīng)的命令，也可以使用視圖模式標簽進行切換。 圖 7003窗口 003的工作界面 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 20頁 （ l）網(wǎng)頁視圖 默認情況下，打開網(wǎng)頁，就會進入網(wǎng)頁視圖，可以在該視圖下編輯網(wǎng)頁內(nèi)容。 網(wǎng)頁視圖包括設(shè)計視圖、拆分視圖、代碼視圖和預(yù)覽視圖 4種視圖方式。 （ 2）文件夾視圖 文件夾視圖列出了文件夾中的所有內(nèi)容。 可以在文件夾內(nèi)容上單擊右鍵直接對其進行刪除、復(fù)制、重命名、移動、打開等操作。 003視圖 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 21頁 （ 3）遠程網(wǎng)站視圖 該視圖是 003的新特性之一，主要功能是向互聯(lián)網(wǎng)發(fā)布文件。 可以使用此功能將同站發(fā)布到一個網(wǎng)絡(luò)服務(wù)提供商的服務(wù)器上。 （ 4）報表視圖 在該視圖模式下，可以查看站點的各種分布情況，包括網(wǎng)站摘要、文件、共享內(nèi)容、工作流、使用率信息和網(wǎng)站存在的問題等。 （ 5）導(dǎo)航視圖 導(dǎo)航視圖中提供了網(wǎng)站的分層視圖，可以直觀地表示一個網(wǎng)站的組織關(guān)系和邏輯層次，以方便管理網(wǎng)站中的各個網(wǎng)頁。 003視圖 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 22頁 （ 6）超鏈接視圖 超鏈接視圖可以將網(wǎng)站中的超鏈接的狀態(tài)顯示在一個列表中，該列表中包括內(nèi)部鏈接和外部鏈接。 圖中帶有加號的超鏈接表示該鏈接還鏈接其他站點，單擊加號就可以打開它所包括的鏈接。 （ 7）任務(wù)視圖 任務(wù)視圖主要用來記錄和分配任務(wù)，包括已完成任務(wù)和尚未完成任務(wù)，主要信息包括狀態(tài)、任務(wù)名稱、分配對象、優(yōu)先級等信息。 任務(wù)視圖用于同站項目的管理和任務(wù)的分配。 可以選擇菜單“編輯”、“任務(wù)”命令，執(zhí)行添加任務(wù)、編輯任務(wù)、標記完成等操作。 003視圖 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 23頁 選擇菜單“視圖”、“網(wǎng)頁”命令可以切換到網(wǎng)頁視圖模式。此時文檔窗口的左下方就會出現(xiàn) 4種網(wǎng)頁視圖方式的選項卡，可以從不同的角度對一個網(wǎng)頁進行查看和處理?？梢詥螕粼撨x項卡實現(xiàn)視圖方式的切換。 （ 1）設(shè)計視圖。可以在該視圖中設(shè)計和編輯網(wǎng)頁，以“所見即所得”的工作方式實現(xiàn)網(wǎng)頁設(shè)計和編輯。 （ 2）代碼視圖。網(wǎng)頁文件其實是 以采用代碼視圖顯示和編輯網(wǎng)頁中的 （ 3）拆分視圖。拆分視圖可以同時訪問代碼視圖和設(shè)計視圖。該模式將工作窗口分成兩部分：上面窗口是 面窗口是網(wǎng)頁的編輯畫面。 （ 4）預(yù)覽視圖。通過該視圖可以在網(wǎng)頁制作過程中隨時查看網(wǎng)頁的顯示效果，可以看到和瀏覽器中一樣的顯示效果。 003視圖 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 24頁 二、創(chuàng)建站點和網(wǎng)頁操作 創(chuàng)建站點 網(wǎng)站由網(wǎng)頁組成，小型的網(wǎng)站可以逐個網(wǎng)頁創(chuàng)建。如果 通過站點會使管理和創(chuàng)建更加便捷。 可以使用向?qū)Ш褪褂媚０鍍煞N方式創(chuàng)建站點。 003中的向?qū)Ш湍０宸譃閮深悾?一類是網(wǎng)頁向?qū)c模板，包括常規(guī)、框架網(wǎng)頁和樣式表 3種； 另一類是網(wǎng)站向?qū)Ш湍０濉?信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 25頁 選擇菜單“文件” |“新建”命令，打開“新建”任務(wù)窗格，如圖 7擊“新建站點”中的一個選項，根據(jù)提示操作即可創(chuàng)建站點。其中“只有一個網(wǎng)頁組成的網(wǎng)站”模板將創(chuàng)建包含一個空白網(wǎng)頁的新網(wǎng)站，是比較常用的方式，用于一般用途網(wǎng)站的創(chuàng)建。 網(wǎng)頁是網(wǎng)站的基本組成部分，下面將介紹網(wǎng)頁制作的基本操作，包括新建網(wǎng)頁、設(shè)置網(wǎng)頁屬性、保存網(wǎng)頁、打開已有網(wǎng)頁和預(yù)覽網(wǎng)頁等。 新建網(wǎng)頁 新建網(wǎng)頁一般有 3種方式，分別為新建空白網(wǎng)頁、根據(jù)現(xiàn)有網(wǎng)頁新建網(wǎng)頁和使用網(wǎng)頁模板新建網(wǎng)頁。選擇菜單“文件”、“新建”命令，打開“新建”任務(wù)窗格，如圖 7 圖 7建”任務(wù)窗格 創(chuàng)建站點和網(wǎng)頁 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 26頁 新建空白網(wǎng)頁。 在“新建網(wǎng)頁”選擇區(qū)域中單擊“空白網(wǎng)頁”，空白網(wǎng)頁創(chuàng)建后，系統(tǒng)自動為其命名為“ 根據(jù)現(xiàn)有網(wǎng)頁新建網(wǎng)頁。 在“新建網(wǎng)頁”選擇區(qū)域中單擊“根據(jù)現(xiàn)有網(wǎng)頁”，打開“根據(jù)現(xiàn)有網(wǎng)頁新建”對話框。選擇所需應(yīng)用的網(wǎng)頁，單擊“創(chuàng)建”按鈕即可。此時會打開現(xiàn)有的網(wǎng)頁，命名為“ 可以在此基礎(chǔ)上進行編輯和修改。 使用網(wǎng)頁模板新建網(wǎng)頁。 該選項是根據(jù) 003提供的網(wǎng)頁模板來新建網(wǎng)頁。在“新建網(wǎng)頁”選擇區(qū)域中單擊“其他網(wǎng)頁模板”，打開“網(wǎng)頁模板”對話框，如圖 7供了常規(guī)網(wǎng)頁模板、框架網(wǎng)頁模板和樣式表模板共 3類。選擇所需要的網(wǎng)頁模板，單擊“確定”按鈕即可。 圖 7頁模板”對話框 網(wǎng)頁基本操作 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 27頁 網(wǎng)頁屬性設(shè)置 網(wǎng)頁屬性主要包括網(wǎng)頁的標題、背景音樂、背景圖片、背景顏色、超鏈接顏色、邊距和正文樣式等。 選定網(wǎng)頁文檔區(qū)域，選擇菜單“文件”、“屬性”命令，或者單擊右鍵，在彈出的快捷菜單中選擇“網(wǎng)頁屬性”命令，打開“網(wǎng)頁屬性”對話框，如圖 7有常規(guī)、格式、高級、自定義、語言、工作組 6個選項卡，其中： “常規(guī)”選項卡 設(shè)置標題。網(wǎng)頁標題是一個網(wǎng)頁的概括性說明文字，該標題將會顯示在 網(wǎng)頁說明。網(wǎng)站訪問者在 會在搜索結(jié)果中看到此說明。 關(guān)鍵字。描述網(wǎng)頁內(nèi)容的一個或多個關(guān)鍵宇（用一個逗號和一個空格隔開）。 背景音樂。在“位置”文本框中輸入要在打開網(wǎng)頁時播放的音樂文件的路徑和文件名，或者單擊“瀏覽”選擇文件。 循環(huán)次數(shù)。播放音樂的次數(shù)。若要不停地播放音樂，選中“不限次數(shù)”復(fù)選框。 圖 7網(wǎng)頁屬性”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 28頁 網(wǎng)頁屬性設(shè)置 “格式”選項卡，可以設(shè)置網(wǎng)頁的背景圖片、背景顏色、文本顏色、超鏈接顏色。已訪問的超鏈接顏色、當(dāng)前超鏈接顏色等。如圖 7 背景。設(shè)置背景圖片，如果圖形的長或?qū)捙c網(wǎng)頁不同，則圖形會在網(wǎng)頁的背景中重復(fù)顯示，并與網(wǎng)頁中的文本及其他元素一起滾動。 使其成為水印。把網(wǎng)頁背景圖形作為水印，固定在背景中，不會與網(wǎng)頁中的文本及其他元素一起滾動。 屬性。更改背景圖形的格式和其他設(shè)置。只有已向網(wǎng)頁添加了背景圖形，此選項才可用。 顏色。設(shè)置網(wǎng)頁的背景顏色、網(wǎng)頁中文本的默認顏色。 超鏈接。設(shè)置尚未訪問的超鏈接的文本顏色。 已訪問的超鏈接。設(shè)置已單擊過的超鏈接的文本顏色。 當(dāng)前超鏈接。單擊超鏈接時的文本顏色。 圖 7格式”選項卡 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 29頁 網(wǎng)頁屬性設(shè)置 “高級”選項卡，可以設(shè)置頁面的邊距、正文樣式、超鏈接反轉(zhuǎn)樣式等，如圖 7 邊距。上、下、左、右邊距分別可以設(shè)置網(wǎng)頁內(nèi)容與瀏覽器窗口的距離。邊距寬度可以設(shè)置左右邊距為相同的寬度，邊距高度可以設(shè)置上下邊距為相同的高度。 樣式。單擊“正文樣式”彈出“修改樣式”對話框，如圖 7以更改網(wǎng)頁中文本的默認格式字體、段落、邊框、編號方式、定位等。如果對網(wǎng)頁中的特定文本或元素應(yīng)用格式設(shè)置，則“正文樣式”設(shè)置對該文本或元素不起作用。 啟用超鏈接翻轉(zhuǎn)效果。當(dāng)讓指針停留在超鏈接文本上時，將更改該文本的外觀。文本外觀可以通過單擊“翻轉(zhuǎn)樣式”按鈕進行設(shè)置。 圖 7高級”選項卡 圖 7修改樣式”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 30頁 網(wǎng)頁屬性設(shè)置 “自定義”選項卡 可以添加由 要分為系統(tǒng)（ 量和用戶（ 量。 “語言”選項卡。 可以設(shè)置網(wǎng)頁語言、 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 31頁 保存網(wǎng)頁 保存尚未保存的網(wǎng)頁 單擊“常用”工具欄上的保存按鈕。 或者選擇菜單“文件”、“保存”命令，在打開的“另存為”對話框中找到并雙擊要保存網(wǎng)頁的文件夾。 在“文件名”框中，輸入網(wǎng)頁的文件名，然后單擊“保存”按鈕。 保存從當(dāng)前站點打開的網(wǎng)頁 單擊“常用”工具欄上的保存按鈕， 或者選擇菜單“文件”、“保存”命令即可。 保存從當(dāng)前站點之外的位置打開的網(wǎng)頁 選擇菜單“文件”、“另存為”命令， 在彈出的“另存為”對話框中找到并雙擊要保存網(wǎng)頁的文件夾， 然后單擊“保存”按鈕。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 32頁 打開網(wǎng)頁 選擇菜單“文件” |“打開”命令，通過彈出的“打開文件”對話框打開網(wǎng)頁。 或者在 003的站點視圖模式下，雙擊網(wǎng)頁文件名也可以打開網(wǎng)頁。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 33頁 預(yù)覽網(wǎng)頁 網(wǎng)頁在制作完成后，在設(shè)計視圖下只能看到頁面的大概形態(tài)，而動畫、視頻、音頻。 網(wǎng)頁動態(tài)效果等需要在預(yù)覽視圖模式或者 覽器中才能看到。 預(yù)覽有兩種方式：在 覽器中預(yù)覽。 預(yù)覽網(wǎng)頁首先要確定要瀏覽的網(wǎng)頁處于打開狀態(tài)。 （ l）在 單擊 口中左下角視圖切換標簽中的預(yù)覽按鈕，即可瀏覽制作效果。 （ 2）在 選擇菜單“文件”、“在瀏覽器中預(yù)覽”命令，選擇瀏覽器，即可啟動瀏覽器顯示頁面效果，其中瀏覽器后面的數(shù)字表示將按此大小打開瀏覽器窗口。 或者單擊“常用”工具欄上的“ 鈕。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 34頁 三、 網(wǎng)頁中的文本操作 網(wǎng)頁中大量的信息是文本，因此文本的操作是網(wǎng)頁制作的基礎(chǔ)。本節(jié)主要介紹如何在設(shè)計視圖模式下為網(wǎng)頁輸入文本，以及如何通過設(shè)置文本格式、段落格式、邊框和底紋、列表等，使頁面美觀。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 35頁 文本的輸入 網(wǎng)頁中文本和特殊字符的輸入和前面講解的方法基本一樣，也有所不同。 如果要產(chǎn)生一個新行，需要按下“ ，換行標記為“”。 要產(chǎn)生一個新的段落，直接按“ ，段落標記為“”。 插入水平線。 當(dāng)頁面中內(nèi)容比較多時，為了使網(wǎng)頁內(nèi)容結(jié)構(gòu)清晰，可以通過插入水平線分隔內(nèi)容。 操作步驟為：選擇插入位置，選擇菜單“插入”、“水平線”命令。 設(shè)置水平線。 雙擊水平線，在彈出的“水平線屬性”對話框，可以設(shè)置水平線的寬度、高度、對齊方式、顏色等。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 36頁 文本的格式化 設(shè)置字體格式 網(wǎng)頁中最重要的內(nèi)容是文本，因此文本的格式化是網(wǎng)頁制作的關(guān)鍵步驟之一。包括設(shè)置字體、字號、字體顏色和字符間距等。 設(shè)置字體格式首先選中要設(shè)置字體的文本，選擇方法與 003中的選定方式類似。 顏色吸管 003除了提供前面介紹的顏色選擇方法外，還可以使用顏色吸管選擇頁面文本或圖片的顏色作為文本的設(shè)定顏色 . 方法如下：選擇菜單“格式”、“字體”命令，在打開的“字體”對話框中，單擊“顏色”下拉列表框，在彈出的下拉列表中選擇“其他顏色”，打開“其他顏色”對話框，如圖 7- 2 示。 單擊顏色選擇按鈕，鼠標就會變成顏色吸管。移動鼠標，在需要的顏色處單擊鼠標，就會在“其他顏色”對話框中的“新建”顏色窗口中顯示吸取的顏色，單擊“確定”按鈕即可使用吸取的顏色。 圖 7其他顏色”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 37頁 文本的格式化 設(shè)置字符間距 為了增加網(wǎng)頁中文字與文字間的距離，需要設(shè)置字符間距。 首先選擇要設(shè)置字符間距的文本，選擇菜單“格式”、“字體”命令，彈出“字體”對話框，選擇“字符間距”選項卡，如圖7- 2 示。 在“間距”下拉列表框中可以設(shè)置間距方式：普通、加寬和緊縮。 在“間距大小”微調(diào)框中輸入以像素為單位的間距大小。 在“定位”下拉列表框中可以設(shè)置字符高度相對于本行基線的高度，然后單擊“確定”按鈕。 圖 7字符間距”選項卡 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 38頁 文本的格式化 設(shè)置標題級 標題級可以用來設(shè)置不同的字體大小，在網(wǎng)頁中可分為 6級不同大小的標題。 1級標題字體最大， 6級標題字體最小。 各級標題用來顯示不同層次的主題，以區(qū)分各個主題的層次關(guān)系。 設(shè)置標題級的方法為：選中需要設(shè)置的標題，打開“格式”工具欄上的“樣式”下拉列表框，如圖 7- 2 a）所示，選擇相應(yīng)的標題。 在 示效果如圖 7- 2 - 10（ b）所示。 圖 7 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 39頁 段落的格式化 段落是一種基于文本的布局格式，段落格式主要包括段落的縮進、段落間距和段落的對齊方式。 段落縮進 選中要設(shè)置縮進的段落，選擇菜單“格式”、“段落”命令，彈出“段落”對話框，如圖 7- 2 “縮進”選項區(qū)設(shè)置文本之前、文本之后、或者首行縮進的值。設(shè)置完成后單擊“確定”按鈕。 段落間距 段落間距的設(shè)置也是美化網(wǎng)頁的一個重要手段，可以有效地控制文本與整個版面的層次。 設(shè)置段落間距的方法為：選中要設(shè)置間距的段落，在圖 7- 2 落”對話框中，可以設(shè)置段前、段后、單字間距，也可以設(shè)置行距大?。▎伪缎芯?、 倍行距），設(shè)置完成后單擊“確定”按鈕。 段落對齊方式 段落的對齊方式有 5種：左對齊、右對齊、居中、兩端對齊和交互象形文字。默認情況下使用的是兩端對齊方式。 設(shè)置段落對齊的方法為：選中要設(shè)置對齊方式的段落，在圖 7- 2 - 11所示的“段落”對話框中，在“對齊方式”下拉列表框中選擇對齊方式，然后單擊“確定”按鈕。 圖 7落”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 40頁 列表的使用 列表是網(wǎng)頁中組織數(shù)據(jù)的一種形式，可以使網(wǎng)頁內(nèi)容層次分明、重點突出。網(wǎng)頁制作中共可以使用 5種列表：項目符號列表、編號列表、自定義列表、圖片列表、菜單列表和目錄列表。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 41頁 項目符號列表 項目符號是在文本列表項目的前面用于強調(diào)視覺效果的各種符號。創(chuàng)建項目符號列表的具體操作步驟如下： 選中要創(chuàng)建項目符號列表的段落或?qū)⒐鈽硕ㄎ辉诙温涞拈_始處。單擊“格式”工具欄的“樣式”下拉列表框，選擇“項目符號列表”選項即可。 如果需要改變項目符號列表，可以選擇菜單“格式”、“項目符號和編號”命令，彈出“列表屬性”對話框，選擇“無格式項目列表”選項卡，如圖 7擇所需的項目列表，或單擊“樣式”進行樣式修改。 圖 7格式項目列表”選項卡 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 42頁 編號列表 為已存在的文字建立編號列表。選中要創(chuàng)建編號的段落，單擊“格式”工具欄的“樣式”下拉列表框，選擇“編號列表”選項即可。 新建編號列表。將光標定位在建立列表的起始位置，單擊“格式”工具欄的“樣式”下拉列表框，選擇“編號列表”選項。窗口就會出現(xiàn)編號“ 1”，輸入列表內(nèi)容，保存后就可以預(yù)覽效果了。 編號列表的編號主要有 5種：阿拉伯?dāng)?shù)字、大寫羅馬數(shù)字、大寫英文字母、小寫羅馬數(shù)字、小寫英文字母，默認是從1開始?？梢栽凇傲斜韺傩浴睂υ捒蛑械摹熬幪枴边x項卡中修改。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 43頁 自定義列表 自定義列表前面不需要任何列表符號，可以定義列表標題和列表項。 定義列表標題。 即定義一個列表項的標題，一般只有一行。 定義列表項。 即定義每一個列表項的具體內(nèi)容，一般有多行，且左側(cè)縮進。 把光標定位在網(wǎng)頁中要創(chuàng)建自定義列表的位置，在“樣式”下拉列表中選擇“定義的術(shù)語”選項，然后在空白處輸入列表標題“學(xué)校簡介”，按“ 起一行。在新的一行輸入列表項的具體內(nèi)容，再次按“ 新起一行。重復(fù)上面的操作，保存后就可以在瀏覽器瀏覽。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 44頁 嵌套列表 當(dāng)顯示的內(nèi)容層次較多時，需要建立大綱式的列表，即多級嵌套的編號列表、項目符號列表、定義列表等，或者幾種形式的混合。 嵌套式列表的操作步驟： 將光標定位在網(wǎng)頁的起始位置，在“樣式”下拉列表中選擇“項目符號列表”，輸入章節(jié)建立項目符號列表，如圖 7a）所示。 選中節(jié)次，連續(xù)兩次單擊“格式”工具欄的“增加縮進量”按鈕，得到效果如圖 7b）所示。 圖 7 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 45頁 圖片列表 圖片列表和項目符號列表類似，只是圖片列表是采用圖片作為列表符號。 采用圖片列表的步驟是： 將光標定位在一組列表符號的任意位置，選擇菜單“格式”、“項目符號和編號”命令，彈出“列表屬性”對話框，選擇“圖片項目符號”選項卡。 選定“指定圖片”單選按鈕，單擊“瀏覽”選擇作為列表符號的圖片。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 46頁 邊框和底紋 為了突出顯示某些內(nèi)容，可以為文本或段落設(shè)置邊框和底紋，可以分別設(shè)置也可以同時設(shè)置。操作步驟如下： 選中要設(shè)置邊框和底紋的文本，選擇菜單“格式”、“邊框和底紋”命令，彈出“邊框和底紋”對話框。 （ 1）設(shè)置邊框。 選擇“邊框”選項卡，如圖 7設(shè)置”選項中可以設(shè)置 3種邊框方式：默認、方框和自定義三種。選擇“邊框”，在“樣式”列表框中選擇邊框的線條樣式，設(shè)置顏色、線條寬度、襯距（文字與邊框的距離），單擊“確定”按鈕。取消邊框可以選擇“默認”方式。 （ 2）設(shè)置底紋。選擇“底紋”選項卡，在“填充”選項區(qū)域中，“背景色”可以設(shè)置底紋顏色，“前景色”設(shè)置底紋文本顏色。在“圖案”選項區(qū)域中，可以選擇圖片作為背景。設(shè)置完成后，單擊“確定”按鈕。 圖 7框”選項卡 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 47頁 四、網(wǎng)頁中圖片的處理 圖片是網(wǎng)頁中很重要的組成元素，恰當(dāng)?shù)氖褂脠D片不但可以美化頁面，還可以達到文字無法表達的效果，更能清楚地表達細節(jié)內(nèi)容，傳遞更多的信息。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 48頁 圖片的類型 瀏覽器支持的常用網(wǎng)頁圖片主要有 用時既要考慮顏色效果，也要考慮文件的大小。 用 壓縮很快。最多可包含 256種顏色，可用于包含少量顏色的圖片。持動態(tài)效果。另外 樣圖片不會覆蓋頁面的背景顏色。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 49頁 圖片的類型 以顯示 1670萬種顏色，適用于要求色彩豐富的圖片，如人物、風(fēng)景等?？梢酝ㄟ^更改圖片的質(zhì)量來控制文件的壓縮比例。設(shè)置的質(zhì)量越低，壓縮比例越高，文件越小，最高可以達到 1：100的壓縮比。壓縮時丟失的只是人眼不太敏感的高頻信息，因此電腦屏幕顯示時不是很明顯。但 般的家用數(shù)碼相機拍攝的照片采用 些瀏覽器不能直接顯示 此應(yīng)用較少。 前 格式顏色豐富，最多 224種。非壓縮圖片模式，文件較大，因此網(wǎng)頁中使用較少。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 50頁 圖片的使用 圖片主要用在背景圖片、網(wǎng)頁橫幅、公司徽標、圖片列表、導(dǎo)航按鈕、水平線等情況。 003中主要可以使用來自文件、剪輯庫、掃描儀和數(shù)碼相機的圖片，也可插入藝術(shù)字、自選圖形等。 插入來自文件的圖片要先確定插入圖片位置，選擇菜單“插入”、“圖片”、“來自文件”命令，彈出“圖片”對話框。選擇要插入的文件，單擊“插入”按鈕即可。 如果插入的圖片不是來自當(dāng)前站點，保存頁面時會彈出“保存嵌入式文件”對話框，如圖 7 單擊“重命名”按鈕可以在該對話框內(nèi)為圖片重新命名；單擊“更改文件夾”按鈕可以改變圖片保存的位置：單擊“圖片文件類型”按鈕可以改變圖片格式，按新的設(shè)定格式保存文件。 圖 7存嵌入式文件”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 51頁 圖片的設(shè)置 圖片設(shè)置主要包括環(huán)繞方式、圖片布局、圖片大小等?？梢赃x擇菜單“格式”、“屬性”命令，或者單擊右鍵，在彈出的快捷菜單中選擇“圖片屬性”命令，在打開的“圖片屬性”對話框中進行設(shè)置，如圖 7 圖片環(huán)繞方式 網(wǎng)頁中圖片環(huán)繞方式有左環(huán)繞和右環(huán)繞兩種。左環(huán)繞是圖片在左邊，文字在右側(cè)環(huán)繞。右環(huán)繞是圖片在右邊，文字在左側(cè)環(huán)繞。也可以采用無環(huán)繞方式，圖片和文字分開。 圖片布局 在“布局”選項區(qū)域中設(shè)置對齊方式、邊框粗細、水平間距、垂直間距。其中圖片與文本在網(wǎng)頁中的位置關(guān)系也就是對齊方式共有 11種。 圖片大小 在“大小”選項區(qū)域中設(shè)置圖片的大小，在“寬度”和“高度”中可以輸入具體像素值，還可以設(shè)定相對原圖的百分比。也可以通過用鼠標拖動圖片控點的方式調(diào)整圖片大小。 圖 7片屬性”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 52頁 圖片的編輯 圖片的編輯除了使用 可以使用 003的“圖片”工具欄。 主要包括裁剪圖片、旋轉(zhuǎn)或翻轉(zhuǎn)圖片、設(shè)置對比度和亮度等，可以使用“圖片”工具欄完成這些操作。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 53頁 圖片工具欄 可以選擇菜單“視圖”、“工具欄”、“圖片”命令，就會出現(xiàn)“圖片”工具欄，如圖 7用按鈕功能介紹如下： （ 1）“文本”按鈕。用于在 （ 2）“自動縮略圖”按鈕。將選中的圖片生成圖片的縮略圖，并在縮略圖上建立一個鏈接到該圖片的超鏈接。 （ 3）“向左旋轉(zhuǎn)”按鈕。將圖片逆時針旋轉(zhuǎn) 90”。 （ 4）“向右旋轉(zhuǎn)”按鈕。將圖片順時針旋轉(zhuǎn) 90”。 （ 5）“水平翻轉(zhuǎn)”按鈕。將圖片做左右對稱的鏡像。 圖 7片”工具欄 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 54頁 圖片工具欄 （ 6）“垂直翻轉(zhuǎn)”按鈕。將圖片做上下對稱的鏡像。 （ 7）“降低對比度”按鈕。減少圖片前景和背景的對比度。 （ 8）“增加對比度”按鈕。增加圖片前景和背景的對比度。 （ 9）“增加亮度”按鈕。增加圖片的亮度。 （ 10）“降低亮度”按鈕。降低圖片的亮度。 （ 11）“裁剪”按鈕。將光標定位在圖片上，可以拉出一個任意大小的虛線框，一框內(nèi)的保留，框外的裁掉。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 55頁 圖片工具欄 （ 12）“設(shè)置透明色”按鈕。將 樣就不會覆蓋掉頁面背景。 （ 13）“顏色”按鈕。有“自動”、“灰度”、“黑白”、“沖蝕”選項，可以達到特殊效果。 （ 14）“凹凸效果”按鈕。將圖片邊界凹凸化，達到 3成立體圖片。 （ 15）“選擇”按鈕。用于網(wǎng)頁中圖片的選擇。 （ 16）“長方形熱點”按鈕。在圖片中定義長方形熱點，在該熱點上可以創(chuàng)建超鏈接。 （ 17）“圓形熱點”按鈕。在圖片中定義圓熱點，在熱點上可以創(chuàng)建超鏈接。 （ 18）“多邊形熱點”按鈕。在圖片中定義多邊形熱點，在熱點上可以創(chuàng)建超鏈接。 （ 19）“還原”按鈕。撤銷對圖片的各種編輯操作。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 56頁 圖片的編輯 （ 1）裁剪圖片 選中圖片，單擊“圖片”工具欄的“裁剪”按鈕，圖片上就會出現(xiàn)一個方框，拖動方框上的控點調(diào)整方框大小。 調(diào)整好后，再次單擊“裁剪”按鈕或者按“ 即可完成裁剪。 （ 2）設(shè)置圖片透明度 為 非 選中圖片，單擊“圖片”工具欄的“設(shè)置透明色”按鈕，單擊圖片的任意位置即可。 （ 3）在圖片中編輯文字 可以為 選中圖片，單擊“圖片”工具欄的“文本”按鈕，在圖片上出現(xiàn)的輸入框中輸入文字，也可以設(shè)置文字格式，移動輸入框的位置。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 57頁 五、網(wǎng)頁中表格的使用 表格的創(chuàng)建 在網(wǎng)頁中表格的主要作用是組織數(shù)據(jù)和頁面布局。表格主要由 6部分組成：標題、表頭、行、列、單元格、邊框。 自動創(chuàng)建表格 選定插入點，選擇菜單“表格”、“插入”、“表格”命令，彈出“插入表格”對話框，如圖 7應(yīng)設(shè)置完成后單擊“確定”按鈕。 手工繪制表格 手工繪制表格方法與 003的類似。 圖 7入表格”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 58頁 表格的編輯 對表格的編輯主要包括表格大小的調(diào)整、單元格的調(diào)整、單元格的合并和拆分等。 1選定表格 在對表格進行編輯之前，首先要選定表格、單元格、行或列等。 2單元格對齊方式 選中單元格，選擇菜單“表格”、“表格屬性”、“單元格”命令，彈出“單元格屬性”對話框，如圖 7 3插入和刪除行、列及單元格 4調(diào)整表格及單元格大小 圖 7元格屬性”對話框 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 59頁 六、 建立超鏈接 超鏈接的概念 1 統(tǒng)一資源定位符，由資源類型、主機、端口、目錄和文件名組成。 需要通過 這些資源可以是一個頁面文件、一個圖片文件或者一個站點等。 2超鏈接 超鏈接是網(wǎng)頁的核心，通過超鏈接可以實現(xiàn)頁面到頁面、頁面到圖片、頁面到站點的跳轉(zhuǎn)。 超鏈接的載體可以是文字、整個圖片以及圖片上的熱點。 鏈接跳轉(zhuǎn)的目的地可以是頁面、書簽、圖片、站點以及電子郵件、視頻、音頻以及普通文件。 信息技術(shù)基礎(chǔ) 第 7章 網(wǎng)頁制作軟件介紹 第 60頁 創(chuàng)建超鏈接 1在文字上創(chuàng)建超鏈接 常見的在文字上創(chuàng)建超鏈接是指超鏈接的載體是文字，通過單擊文字上的鏈接跳轉(zhuǎn)到 方法如下： 選定要創(chuàng)建超鏈接的文字，選擇菜單“插入”、“超鏈接”命令，或者單擊