1、第9章web制作，2020/7/27，1，電腦文化基礎，第9章web制作，9.1 HTML介紹9.2 FrontPage 2003概述9.3 web制作9.4 web布局9.5西餐頁面9.6網(wǎng)頁制作，2020/7/220幾個茄子常見標簽(我們將使用HTML語言編寫的文件稱為HTML文件。通常存儲在web服務器上?？蛻舳送ㄟ^瀏覽器向web服務器發(fā)送請求，服務器響應請求，并將HTML文件發(fā)送到瀏覽器。瀏覽器然后正確解釋文件中的標記，并在用戶屏幕上將其顯示為頁面。所以我們把HTML文檔稱為網(wǎng)頁(網(wǎng)頁)。2020/7/27，3，電腦文化基礎，9.1 HTML介紹，HTML語言是容易學習的標記語言。以H

2、tmL語言編寫的網(wǎng)頁實際上是。HTM或.使用html擴展名的文本文件，可以使用任何文本處理軟件(如記事本)創(chuàng)建。9.1.1 HTML語言概述9.1.2 HTML語言的基本語法、返回、2020/7/27，4、電腦文化基礎、9.1.1 HTML語言概述、HTML語言是全球標準化組織W3C。以下是HTML文件的基本編寫和HTML文件層次結構的說明：2020/7/27，5，電腦文化基礎，1。HTML文件的默認配置internet上的每個HTML文件都包含文本內容和HTML標記部分。其中HTML標簽控制文本顯示的外觀和布局，并指定鏈接到瀏覽器的各種圖像、聲音和其它對象的位置。大多數(shù)HTML標簽都是以下列

3、格式編寫的：文本內容標記名稱記錄在“”中。大多數(shù)HTML標簽都有開始和結束標簽，并且成對出現(xiàn)，但是有些HTML標簽沒有結束標簽。此外，HTML標簽不區(qū)分大小寫。HTML文件的基本配置、2020/7/27，6、電腦文化的基礎、某些HTML標記還具有用于指定對象特征(如背景顏色、文本字體和大小、對齊等)的屬性。屬性通常以標簽名稱和屬性以空格分隔的文本內容的格式放置在開始標簽中。如果標記具有多個屬性，則屬性也必須用空格分隔。HTML文件的基本配置，2020/7/27，7，電腦文化基礎，2。HTML頁面的結構現(xiàn)在讓我們看一下簡單的HTML文件。讓我們體驗用HTML語言構建網(wǎng)頁時的層次結構。示例9-1使

4、用HTML語言創(chuàng)建簡單的網(wǎng)頁。我的第一個網(wǎng)頁歡迎來到HTML世界！首先，我將介紹HTML語言的基本知識和語法。然后說明如何使用HTML語言創(chuàng)建網(wǎng)頁。2020/7/27，8，電腦文化基礎，htmL語言概述，使用文本編輯器編輯以上代碼，擴展名為.保存為HTM文件，然后雙擊檔案圖標，瀏覽器將顯示如下圖所示的結果。圖9-1，2020/7/27，9，基于電腦文化，如上例所示，常規(guī)HTML文件以開始和結束。檔案結構由1)頭(頭)HTML文件的頭和標記定義。文件的標題、語言字符集信息等通常放在標題信息中。最常用的標簽用于定義web文件的標題；打開web文件時，web文件的標題顯示在瀏覽器的標題欄中。2020

5、/7/27，10，電腦文化基礎，檔案結構，2)正文主體(Body)正文主體是HTML文件的核心內容，由和標記定義。標簽具有數(shù)個茄子一般屬性，格式如下：其中bgcolor是背景色，color是文本顏色。n是6位數(shù)的十六進制數(shù)。如果網(wǎng)頁使用背景圖像，則格式如下：HTML的格式要求不嚴格，當在瀏覽器中掃描HTML文件時，文件中包含的所有空格、回車符等都將被忽略。因此，可以將一行寫為兩行或更多行。瀏覽器中的結果相同。，返回，2020/7/27，11，電腦文化基礎，9.1.2 HTML語言的基本語法，1。文本布局1)段落標記指定文檔中的各個段落。設定Align屬性以控制段落的對齊方式。left、cent

6、er、right和justify值分別表示左對齊、居中對齊、右對齊和對齊，默認值為左對齊。使用以下格式：2)可以使用換行符強制文本換行。牙齒標記只有開始標記。3)水平線標記水平線標記用于在網(wǎng)頁上插入水平線。2020/7/27，12，電腦文化基礎，2。字符格式HTML語言的字符格式標記如下：1)標題標記格式如下：標題文字內容，其中N表示大小級別，值的范圍是1到6之間的數(shù)字。將標題分為6級，即h1h6。其中h1字符最大，h6字符最小。2020/7/27，13，基于電腦文化，2)字體標記字體標記用于格式化字符，主要是(1)大小屬性：用于控制字符大小的格式為：其中n是值范圍為17的數(shù)字，默認值為3。標

7、記和標記都調整文字大小。一般來說，文章的標題最好由標簽控制。其馀字符由標記控制。比較起來，對字體的控制更靈活。(2)color屬性：用于按以下格式控制文字的顏色：其中n是十六進制的六位數(shù)字。(3)face屬性：用于表示文本中使用的字體，格式如下：此處的字體名稱選擇由Windows操作系統(tǒng)上安裝的字體決定。例如，宋體、楷體_GB2312、Times New Roman、Arial等。字符格式，2020/7/27，14，基于電腦文化，3)字形標記字形標記用于設置字符的粗體、斜體、下劃線、上標、下標等。文字格式，2020/7/27，15，電腦文化基礎，3。插入圖片顯示以在網(wǎng)頁上插入圖片，設置圖片大小

8、和相鄰字符的數(shù)組。標記具有以下屬性：(1)src屬性：指示圖片文件所在的位置。格式如下：其中URL是圖片文件的存儲位置。(2)alt屬性：插圖的文本說明。當鼠標指針指向圖片時，會彈出圖片的說明文本。格式如下：(3)width和height屬性：設置圖片顯示區(qū)域的寬度和高度。格式如下：其中width和height屬性的值n1和N2可以是像素數(shù)或百分比。2020/7/27，16，電腦文化基礎，(4)border屬性：設置圖片文件的邊框。格式如下：其中n是像素數(shù)。(5)align屬性：相對于文本設置圖片的位置關系。格式包括頂部(頂部對齊)、middle(相對垂直居中)、bottom(相對底部對齊)、

9、left(左對齊)、right(右對齊)、texttop、插入圖片、2022000000在HTML語言中插入超連結，在網(wǎng)頁中設置超鏈接的標簽，href屬性指示超鏈接的檔案地址。格式如下：超連結文本用于表示超鏈接的文本通常顯示為藍色，并帶有下劃線。在瀏覽器中，當鼠標指針指向文本時，箭頭變?yōu)槭中?，瀏覽器的狀態(tài)欄中顯示超連結地址。如果將圖片用作超鏈接，則為2020/7/27，18，電腦文化基礎，5。使用表格在網(wǎng)頁中插入表格需要一組HTML標簽。表格定義的標簽如下：定義表格空間。定義表格標題。定義標題。定義表格列。定義表格儲存格。返回，2020/7/27，19，基于電腦文化，常用標記屬性中的borde

10、r屬性用于設置表邊框的寬度。Width、height屬性設置表格或單元格的寬度和高度。Cellspacing和cellpadding屬性分別用于設置單元格之間的間距和單元格內的空格。Align屬性設置表或單元格的對齊方式。Bgcolor和background屬性分別設置表格的背景顏色和背景圖像。，表格屬性，2020/7/27，20，基于電腦文化，9.2 FrontPage 2003概述，使用純文本編輯器編寫HTML文檔，但是使用特殊的HTML編輯器或web創(chuàng)作工具會更方便。具有Wysiwyg what-is-you-get功能的網(wǎng)頁創(chuàng)作工具使web創(chuàng)作者可以直接編輯和修改web頁，并且可以立即

11、看到web頁的外觀。FrontPage 2003是Microsoft Office 2003牙齒開發(fā)的web創(chuàng)作和web網(wǎng)站管理工具，它是Microsoft Office 2003的組件之一，與Office的其他組件高度融合，界面友好、強大、易于學習，并且是當前流行的web創(chuàng)作和web網(wǎng)站管理，2020/7/27，21，電腦文化基礎，9.2 FrontPage 2003概述，9.2.1 FrontPage 2003的主要功能9.2.2 FrontPage 2003的開始和結束9.2.3頁和網(wǎng)站9.2.4 FrontPage 2003FrontPage 2003不僅可以直接修改HTML，還可以“

12、如所見”編輯網(wǎng)頁，還提供了多種方法，用于使用菜單命令插入各種網(wǎng)頁元素，以及使用對話框修改屬性。返回，2020/7/27，23，基于電腦文化，F(xiàn)rontPage 2003允許輕松插入文本、圖片、表格、組件等。您可以使用主題和樣式表、孔劉邊框、框架等管理網(wǎng)頁的外觀。您也可以使用元素(如表單)設計交互式網(wǎng)頁。FrontPage 2003提供強大的網(wǎng)站管理功能。相關網(wǎng)頁和相關檔案組構成了站點，站點是管理FrontPage 2003中網(wǎng)站的基本單位。FrontPage 2003使您可以輕松地設計、管理、分析、發(fā)布和維護網(wǎng)站。FrontPage 2003的主要功能，2020/7/27，24，基于電腦文化，

13、9.2.3網(wǎng)頁和web網(wǎng)站，網(wǎng)頁是全球廣域網(wǎng)的基本文檔，通常用HTML編寫。htm或.用html編寫的主頁可以獨立存在，但往往是網(wǎng)站的一部分。網(wǎng)站是相關網(wǎng)頁和相關文件的組合，通常有一個稱為“主頁”(Homepage)的特殊網(wǎng)頁，它引導用戶訪問其他網(wǎng)頁。網(wǎng)站通常位于web服務器上，客戶端通過網(wǎng)絡向web服務器發(fā)送請求，web服務器響應客戶端的請求，然后使用HTTP協(xié)議將web頁和相關文件通過網(wǎng)絡發(fā)回客戶端?？蛻舳丝梢允褂脀eb瀏覽器查看網(wǎng)頁的內容。2020/7/27，25，基于電腦文化、web和web網(wǎng)站，F(xiàn)rontPage 2003允許您創(chuàng)建和編輯獨立的網(wǎng)頁，還允許您設計和管理站點。站點可以包

14、含大量的網(wǎng)頁和各種檔案，甚至是子站點，F(xiàn)rontPage 2003中的許多功能只有在使用站點時才有效。通常，在FrontPage 2003中設置的站點發(fā)布到internet的web服務器上，成為真正的web站點后，網(wǎng)絡用戶才能訪問。在某些情況下，可以在同一臺計算機上安裝web服務器端軟件，以便在本地發(fā)布站點進行測試。使用FrontPage 2003，還可以構建作為默認文件夾存在的基于本地硬盤驅動器的站點，而無需發(fā)布到服務器。如果是牙齒，則需要服務器支持的功能不可用。返回，2020/7/27，26，基于電腦文化，9.2.4 FrontPage 2003的web查看模式，F(xiàn)rontPage 200

15、3提供了四種茄子web查看模式。設計視圖是打開web頁的第一個輸入視圖，您可以在其中輸入文本，在代碼視圖中，用戶可以查看、創(chuàng)建和編輯HTML標簽。在預覽視圖中，可以大致查看網(wǎng)頁在web瀏覽器中的顯示方式。FrontPage 2003中新的拆分視圖將窗口工作區(qū)拆分為兩個部分：頂部和底部。上半部分是代碼區(qū)域，下半部分是設計區(qū)域。變更任何區(qū)域都會相應地變更其他區(qū)域。返回，2020/7/27，27，基于電腦文化，9.2.5 FrontPage 2003中的視圖，F(xiàn)rontPage 2003提供了以下視圖，以便用戶可以輕松管理站點，用戶可以在各種視圖中執(zhí)行相應的任務。1.查看網(wǎng)頁2。查看文件夾3。查看遠

16、程網(wǎng)站4。查看報告5。導航視圖6。查看超連結7。查看工作，2020/7/27，28，電腦文化基礎，9.3 web制作，web網(wǎng)站開發(fā)，首先要相應地做，那么什么是“網(wǎng)站”？實際上，站點是相關網(wǎng)頁和其他文件的集合，它們在internet上以稱為“網(wǎng)站”的完整結構出現(xiàn)。在FrontPage 2003中，站點存儲在特殊文件夾中。2020/7/27，29，基于電腦文化，9.3 web創(chuàng)作，創(chuàng)建9.3.1網(wǎng)站9.3.2網(wǎng)頁剪輯9.3.3插入對象9.3.4超連結創(chuàng)建，返回，200創(chuàng)建新站點時，您可以根據(jù)需要選擇其他模板和向導。根據(jù)模板和向導的不同，創(chuàng)建新站點的步驟略有不同。下面以“由一個網(wǎng)頁組成的網(wǎng)站”模板為例，