第8講網(wǎng)頁制作..ppt

1、1.第8章網(wǎng)頁制作，8.1網(wǎng)頁概述8.2超文本標(biāo)記語言基礎(chǔ)8.3網(wǎng)頁制作使用FrontPage 8.4網(wǎng)站發(fā)布和測試，2.8.1概述(1)，網(wǎng)頁的基本概念是以超文本標(biāo)記語言或超文本標(biāo)記語言為擴展名的文本文件，文本、圖片和其他信息通過超文本標(biāo)記語言標(biāo)簽組織在一起，每個圖片都顯示在瀏覽器上。網(wǎng)頁的基本組成部分是文本圖像超鏈接、表單、表單、視頻和音頻以及其他網(wǎng)頁元素，3，8.1概述(2)。網(wǎng)頁制作方法使用標(biāo)簽和它們的由超文本標(biāo)記語言定義的屬性來編寫文本文件。使用html或html作為文件擴展名。網(wǎng)頁制作軟件文本編輯工具(記事本、編輯plus)；專業(yè)網(wǎng)頁制作軟件、FrontPage、Dreamweav

2、er等。一些圖像處理軟件，如PhotoShop等。網(wǎng)站收集與內(nèi)容相關(guān)的信息，如網(wǎng)頁、圖片、視頻和音頻，并將它們存儲在網(wǎng)絡(luò)服務(wù)器中供用戶瀏覽。4，8.2.1超文本標(biāo)記語言概述(1)，超文本標(biāo)記語言是創(chuàng)建網(wǎng)頁的基礎(chǔ)。網(wǎng)絡(luò)中的所有網(wǎng)頁都是基于超文本標(biāo)記語言的。因此，有必要了解超文本標(biāo)記語言的語法、網(wǎng)頁的結(jié)構(gòu)、創(chuàng)建網(wǎng)頁的方法以及開發(fā)網(wǎng)頁的工具。那么，什么是超文本標(biāo)記語言？5，8.2.1超文本標(biāo)記語言概述(1)，超文本標(biāo)記語言(超文本標(biāo)記語言)，專門用于編寫網(wǎng)頁。超文本標(biāo)記語言通過使用一些指令符號來標(biāo)記和表達各種文件效果來描述文件結(jié)構(gòu)格式，然后瀏覽器解釋超文本標(biāo)記語言的指令符號來顯示文件格式效果。超文本

3、標(biāo)記語言是一種標(biāo)記語言。在超文本標(biāo)記語言中，圖形和聲音必須由其他軟件制作，然后用超文本標(biāo)記語言標(biāo)簽排列在網(wǎng)頁的原始文檔中，這樣瀏覽器就可以解釋這些原始文檔并在屏幕上顯示它們的效果。6，8.2.1超文本標(biāo)記語言概述(2)，網(wǎng)頁標(biāo)題的主體，7，第一個超文本標(biāo)記語言示例，我的網(wǎng)頁前面的月光，會不會已經(jīng)結(jié)霜了？抬起頭來看，我發(fā)現(xiàn)是月光，又沉了回去，我突然想到了家。8，8.2.1超文本標(biāo)記語言概述(3)，超文本標(biāo)記語言標(biāo)簽結(jié)構(gòu)標(biāo)簽是用尖括號括起來的控制符號。通常，超文本標(biāo)記語言標(biāo)簽有開始和結(jié)束控制器，如和。也可以使用一些相應(yīng)的不帶標(biāo)簽的結(jié)束標(biāo)簽，如、等。大多數(shù)標(biāo)簽都有屬性，這些屬性寫在標(biāo)簽的啟動控制器中

4、。例如，中文標(biāo)簽書寫與字母大小寫無關(guān)。9、8.2.1超文本標(biāo)記語言概述(4)、超文本標(biāo)記語言文件結(jié)構(gòu)一般來說，整個超文本標(biāo)記語言文件以開頭和結(jié)尾，中間分為兩部分：一部分是“標(biāo)題區(qū)”；一部分是“主體區(qū)域”。文件的開始和結(jié)束標(biāo)記以標(biāo)記開始，以標(biāo)記結(jié)束，告訴瀏覽器這是一個網(wǎng)頁文件。標(biāo)題區(qū)域由緊接其后的一對定義。在這里，您可以使用和來定義網(wǎng)頁和其他內(nèi)容的標(biāo)題，例如CSS、JavaScript等等。主體區(qū)域主體區(qū)域由和定義，網(wǎng)頁中的主要內(nèi)容應(yīng)該寫在主體區(qū)域。10，8.2.2超文本標(biāo)記語言基本標(biāo)記(1)，標(biāo)記的常見屬性：文本=文本顏色鏈接=鏈接文本顏色VLINK=鏈接文本顏色ALINK=按下鏈接文本顏色B

5、GCOLOR=背景顏色背景=背景圖形顏色表示：用顏色的英文名稱表示，如白色、紅色、藍色等。RRGGBB代表各種顏色。RR=紅色(Red)通過這三種顏色值的組合，可以匹配各種顏色。使用#格式的顏色值，后跟6位十六進制值，每兩位數(shù)字為一組。#FF0000表示紅色。，11，第二個超文本標(biāo)記語言示例，網(wǎng)頁屬性設(shè)置，12，8.2.2超文本標(biāo)記語言基本標(biāo)記(2)，文本編輯(字體)屬性：面=字體名稱屬性：大小=字體大小(1-7)屬性：顏色=字體顏色(分段)屬性：對齊=對齊，可以設(shè)置寬度=？對于左、中、右(線條)的大小，(字體樣式)(其中n=1.6)(標(biāo)題)、下標(biāo)、上標(biāo)(水平分隔線)、13、8.2.2超文本標(biāo)

6、記語言基本標(biāo)記(3)和滾動字幕標(biāo)記(*)。高度=？移動方向?qū)傩苑较虻脑O(shè)置=#，#=左、右、上、下(目的地方向)移動模式屬性行為的設(shè)置=#，#=滾動、滑動，移動速度屬性滾動的交替設(shè)置=#，默認(rèn)值為6，越大移動越快。特殊符號表示空格：14，8.2.2基本標(biāo)簽(4)。使用序列表中的標(biāo)題項列出項1和項2，其中type=？它可以是一個，我，數(shù)字，從哪里開始？指定從序列號類型=？它可以是正方形，圓形，15，有序列表，中國城市，北京，上海，16，8.2.2 HTML基本標(biāo)簽(5)，使用通用圖像格式GIF格式：它最多代表256種顏色，并支持透明度和動畫。JPEG格式：高壓縮比和豐富的色彩。巴布亞新幾內(nèi)亞格式：

7、它適用于任何顏色深度的任何類型的圖片。標(biāo)記及其屬性：src=網(wǎng)址寬度=像素或%高度=像素或%對齊=左或右alt=？當(dāng)瀏覽器不能顯示圖形時，替代文本，17，8.2.2超文本標(biāo)記語言基本標(biāo)簽(5)，是創(chuàng)建超鏈接網(wǎng)址的概念。超文本標(biāo)記語言使用統(tǒng)一資源定位符在網(wǎng)上定位文檔信息。網(wǎng)址包括三個部分：協(xié)議代碼、包含所需文件的計算機地址(或電子郵件地址或新聞組名稱)以及包含信息的文件地址和文件名。相對網(wǎng)址和絕對網(wǎng)址絕對網(wǎng)址是指互聯(lián)網(wǎng)上資源的完整地址，包括協(xié)議類型、計算機域名和包含路徑的文檔名稱。例如，相對網(wǎng)址是指相對于互聯(lián)網(wǎng)上當(dāng)前頁面的資源地址，它包含從當(dāng)前頁面到目標(biāo)頁面的路徑。例如：pub/text.htm

8、它表示當(dāng)前頁面所在目錄下pub子目錄中的text.htm。18，8.2.2超文本標(biāo)記語言基本標(biāo)記(6)，超鏈接標(biāo)記及其公共屬性？它們之間是頁面上超鏈接的入口，可以是文本、圖片等。例如：信息工程學(xué)院，19，8.2.2超文本標(biāo)記語言基本標(biāo)記(7)，使用表格示例：標(biāo)題1標(biāo)題2表格項目1表格項目2，20，8.2.2超文本標(biāo)記語言基本標(biāo)記(8)，表格標(biāo)記表格標(biāo)記使用()來定義表格，并且表格的所有內(nèi)容都放置在開始標(biāo)記和結(jié)束標(biāo)記之間。行使用()定義表的行標(biāo)題，即表的行標(biāo)題或列標(biāo)題。使用()定義表格標(biāo)題，并以居中的粗體顯示。表元素(表的特定數(shù)據(jù))使用()來定義表的列。21，8.2.2基本標(biāo)簽(9)，框架集定義

9、框架，框架的所有內(nèi)容都放在開始標(biāo)簽和結(jié)束標(biāo)簽之間?？蚣芗部梢郧短?，屬性為，22，標(biāo)記語法：cols=90，* :垂直剪切圖片(例如，它分為左右圖片)，接受整數(shù)值和百分比，以及*表示占用剩余空間。值的數(shù)量表示分割窗口的數(shù)量，用逗號分隔。例如，cols=30，*，50%可以被切割成三個窗口，第一個窗口是30像素寬，這是一個絕對分區(qū)，第二個窗口是第一個和第三個窗口被分配后剩下的空間，第三個窗口占整個窗口框架寬度的50%，這是一個相對分區(qū)。你可以自己調(diào)整數(shù)字。Rows=120，* 這是水平切割，將圖片從上到下分開，數(shù)值如上設(shè)置。盡量不要將列和行參數(shù)放在同一個標(biāo)簽中。Frameborder=0設(shè)置框架

10、的邊框，其值只有0和1。0表示沒有邊框，1表示顯示邊框。邊框=0以像素為單位設(shè)置框架的邊框厚度。Bordercolor=#008000設(shè)置框架的邊框顏色?？蚣荛g距=5表示框架之間的距離和框架之間保留的空白空間。，23，標(biāo)記語法：src=a . html設(shè)置要在此框架中顯示的網(wǎng)頁文件的名稱，每個框架必須對應(yīng)一個網(wǎng)頁文件。名稱=頂部設(shè)置此框架窗口的名稱，以便框架可以被指定為鏈接，并且它必須被任意命名。Frameborder=0設(shè)置框架的邊框，其值只有0和1。0表示沒有邊框，1表示沒有邊框?？蚣荛g距=6表示框架之間保留空白的距離。邊框顏色=#0000FF設(shè)置框架的邊框顏色。滾動=自動設(shè)置是否顯示滾動條，是表示顯示滾動條，否表示不顯示滾動條，自動取決于具體情況。noresize設(shè)置不允許用戶更改此框的大小。Marginhight=5表示在框架高度部分的邊緣保留的空間。Marginwidth=5表示在框架寬度部分的邊緣保留的空間。24，框架集示例，25，8.3使用FrontPa