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

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

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

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

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

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

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

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

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

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

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