靜態(tài)網(wǎng)頁的制作PPT課件

1、。1，第1章，制作靜態(tài)網(wǎng)頁，2，1.1靜態(tài)網(wǎng)頁概述1.2動態(tài)網(wǎng)頁概述1.3靜態(tài)網(wǎng)頁的工作過程1.4制作靜態(tài)網(wǎng)頁的工具，3，1.1靜態(tài)網(wǎng)頁概述。最初的網(wǎng)站都是由靜態(tài)網(wǎng)頁組成的，其中只包含文本、圖形、圖像等。用戶只能被動地接受這些信息。當(dāng)時，網(wǎng)頁的核心是超文本標(biāo)記語言，它易于編寫，不需要特定的語言環(huán)境，可以由任何類型的編輯器編寫，然后放入瀏覽器中觀看結(jié)果。目前，有很多專門針對超文本標(biāo)記語言的編輯軟件，如首頁、熱狗、Dreamweaver等。最初的網(wǎng)絡(luò)是完全靜態(tài)的，只提供大量的信息服務(wù)，沒有服務(wù)器端客戶端的概念?！办o態(tài)”意味著網(wǎng)站的內(nèi)容是“固定的”。當(dāng)用戶的瀏覽器通過互聯(lián)網(wǎng)的超文本傳輸協(xié)議請求網(wǎng)絡(luò)服

2、務(wù)器提供網(wǎng)頁內(nèi)容時，服務(wù)器只將原來設(shè)計的靜態(tài)超文本標(biāo)記語言文檔傳輸?shù)接脩舻臑g覽器。它的頁面內(nèi)容使用標(biāo)準(zhǔn)的超文本標(biāo)記語言代碼和動態(tài)圖片。動態(tài)網(wǎng)頁概述所謂動態(tài)網(wǎng)頁是指網(wǎng)頁包含程序代碼，后臺數(shù)據(jù)庫通過后臺數(shù)據(jù)庫與網(wǎng)絡(luò)服務(wù)器之間的信息交互提供實(shí)時數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)。這類網(wǎng)頁的后綴名稱通常根據(jù)不同的編程語言而不同，如asp、jsp、php、perl、cgi等。動態(tài)網(wǎng)頁可以根據(jù)不同的時間和不同的訪問者顯示不同的內(nèi)容。靜態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁制作的工作過程可以概括如下：1 .網(wǎng)頁素材的收集和制作(圖像處理和動畫制作)往往需要在網(wǎng)頁中應(yīng)用一些圖像和動畫，一方面是因?yàn)樾枰獙?shí)際的內(nèi)容，另一方面是為了增加網(wǎng)頁的吸引力

3、。在萬維網(wǎng)上，通常使用jpeg、GIF圖片和flash動畫。2.網(wǎng)頁布局設(shè)計規(guī)劃網(wǎng)頁中各元素的位置關(guān)系和表達(dá)方式，合理安排圖像、文本等元素，使網(wǎng)頁布局合理、美觀。3.文本寫作需要在你自己的網(wǎng)頁上有大量的書面材料，所以在fckeditor中使用HTML語言的標(biāo)簽是必要的。您也可以使用網(wǎng)頁編輯工具的“所見即所得”功能直接編寫文本。4.處理網(wǎng)頁之間關(guān)系的主要方法是建立一個合理高效的網(wǎng)頁導(dǎo)航系統(tǒng)。5.網(wǎng)頁發(fā)布的主要目的是將構(gòu)建好的網(wǎng)頁上傳到服務(wù)器供用戶瀏覽。6.1.4制作靜態(tài)網(wǎng)頁的工具1。圖像處理和動畫工具：Photoshop、Flash等。2.網(wǎng)頁編輯工具：1)純文本編輯工具，如記事本；2)轉(zhuǎn)換工具

4、，如word3)特殊工具，如FrontPage、Dreamweaver等。3.網(wǎng)頁上傳工具：1)文件傳輸協(xié)議工具，如萬維網(wǎng)文件傳輸協(xié)議和電子文件傳輸協(xié)議；2)專用網(wǎng)頁編輯軟件的文件傳輸功能。4.網(wǎng)頁優(yōu)化工具：網(wǎng)頁減肥茶、網(wǎng)頁優(yōu)化大師等。7，超文本標(biāo)記語言的基本知識，2.1超文本標(biāo)記語言簡介2.2超文本標(biāo)記語言的編寫工具2.3超文本標(biāo)記語言的編寫格式2.4標(biāo)簽的結(jié)構(gòu)特征2.5超文本標(biāo)記語言文件的組成2.6文檔標(biāo)題標(biāo)記2.7顏色表示方法，超文本標(biāo)記語言是超文本標(biāo)記語言的縮寫，超文本標(biāo)記語言是構(gòu)成網(wǎng)頁的主要工具，也是表示在線信息的符號標(biāo)記語言。在互聯(lián)網(wǎng)上，如果你想在世界各地發(fā)布和分發(fā)信息，你需要一種

5、能被廣泛理解的語言，也就是說，一種所有計算機(jī)都能理解的母語。萬維網(wǎng)使用的出版語言是超文本標(biāo)記語言。通過超文本標(biāo)記語言，需要表達(dá)的信息按照特定的規(guī)則被寫入超文本標(biāo)記語言文件，這些規(guī)則由一個特殊的瀏覽器識別，這些超文本標(biāo)記語言被翻譯成可識別的信息，即我們現(xiàn)在看到的網(wǎng)頁。9，2.2超文本標(biāo)記語言編寫工具，用超文本標(biāo)記語言編寫的文件(文檔)的擴(kuò)展名是超文本標(biāo)記語言或.超文本標(biāo)記語言。它們是瀏覽器解釋和瀏覽文件的格式。您可以使用編輯工具，如記事本和寫字板來編寫超文本標(biāo)記語言文件。超文本標(biāo)記語言使用標(biāo)記對(標(biāo)記)來寫文件，這既簡單又方便。它通常用來表示一個標(biāo)簽的開始和結(jié)束(比如標(biāo)簽對)，所以這樣的標(biāo)簽對必

6、須在超文本標(biāo)記語言文檔中成對使用。今天，有很多工具可以制作網(wǎng)頁。只需點(diǎn)擊幾下鼠標(biāo)，就會出現(xiàn)一個精彩的網(wǎng)頁。你想學(xué)超文本標(biāo)記語言嗎？答案是肯定的，因?yàn)楣ぞ呔褪枪ぞ?，它們生成的代碼是機(jī)械的，不夠簡潔，這降低了網(wǎng)頁的打開速度。有許多新功能，工具無法生成。必須編輯代碼。10，2.3 html格式。查看網(wǎng)頁的源文件，我們可以看到HTML文件的格式如下：網(wǎng)頁標(biāo)題的省略號部分是網(wǎng)頁的內(nèi)容。事實(shí)上，每個標(biāo)簽都是一一對應(yīng)的。每個網(wǎng)頁文件都以。和之間的內(nèi)容是網(wǎng)頁的標(biāo)題。將顯示在瀏覽器的標(biāo)題欄上。網(wǎng)頁內(nèi)容位于和之間。11，2.4標(biāo)簽1的結(jié)構(gòu)特征。周圍有。2.他們大多數(shù)成對出現(xiàn)。3.結(jié)束標(biāo)記是/。4.標(biāo)簽已嵌入。5.

7、標(biāo)簽可以有多個屬性和屬性值。6.標(biāo)簽是西方語言的半角字符，不區(qū)分大小寫。12，2.5超文本標(biāo)記語言文件組成，標(biāo)題和正文標(biāo)記和普通文本，13、2.6文件標(biāo)題標(biāo)記，文件標(biāo)題標(biāo)記為。使用過瀏覽器的人可能會注意到瀏覽器窗口頂部藍(lán)色部分顯示的文本信息，這通常是網(wǎng)頁的主題。在瀏覽器頂部顯示網(wǎng)頁主題非常簡單，只需在標(biāo)志對之間添加要顯示的文本即可。14，2.7顏色表示方法，超文本標(biāo)記語言使用#RRGGBB字符串來表示顏色，顏色變成RGB值。RGB值中的RR、GG和BB分別代表紅色、綠色和藍(lán)色這兩個十六進(jìn)制整數(shù)值。每種原色的值范圍在00和FF之間(即十進(jìn)制0和255)，也就是說，一個字節(jié)存儲一種原色。每種原色有

8、256種顏色從淺到深的變化，網(wǎng)頁中呈現(xiàn)的顏色都是由這三種原色混合而成的。Rgb值可以代表(256*256*256)顏色。15、HTML簡單段落，這是第一段。這是第二段。這是第三段。在超文本標(biāo)記語言中，p用來定義段落。16，寫了幾段，這段包含了源代碼中的許多分支，但是瀏覽器忽略了這些分支。該段落在瀏覽器中包含許多空格，但瀏覽器會忽略多余的空格。您使用的瀏覽器窗口大小決定了段落的數(shù)量。如果您調(diào)整瀏覽器窗口的大小，段落的數(shù)量將相應(yīng)地改變。17，段落中的換行符。若要在段落中換行，請使用標(biāo)簽br。18，6級標(biāo)題設(shè)置，這是1號標(biāo)題，這是2號標(biāo)題，這是3號標(biāo)題，這是5號標(biāo)題，這是6號標(biāo)題，19，標(biāo)題的中心對

9、齊，這是標(biāo)題上方的標(biāo)題顯示在中心。20，在段落中添加水平線，使用標(biāo)簽hr可以在HTML文件中添加水平線。村里的女人想象著宮殿里的生活：女王必須用一根金篙挑水。問：誰是世界上最窮的人？回答：炮兵連烹飪班的士兵！問：為什么？看著別人開槍，你要承擔(dān)責(zé)任。一位初中數(shù)學(xué)老師談到方程轉(zhuǎn)換，在講臺上大聲喊道：“同學(xué)們，注意！”我要變形了！21，以其他格式標(biāo)記，b以粗體顯示。斜體用I表示.芙蓉姐姐一詞中的破折號表示刪除。想唱就唱。在單詞下面劃線。X2在哪里？X2在哪里？努力學(xué)習(xí)，天天向上。這句話中的縮進(jìn)表示調(diào)用getOrders是用來顯示計算機(jī)代碼的，代碼中顯示的字符是等寬字符。22，字體大小，字體大小此文本

10、的字體大小值是1。該文本的字體大小值為2。該文本的字體大小值為3。該文本的字體大小值為4。該文本的字體大小值為5。該文本的字體大小值為6。該文本的字體大小值為7。23，字體大小顏色，字體顏色此文本使用默認(rèn)字體顏色。該文本的字體顏色為紅色。該文本的字體顏色為灰色。該文本的字體顏色為綠色。下面第一段使用arial字體，第二段使用courier字體，第三段使用verdana字體。arial courier verdana arial courier verdana。25，列表標(biāo)志，1。定義列表用于創(chuàng)建定義列表，定義列表用于創(chuàng)建列表中的上項目和列表中的下項目，兩者都必須放在標(biāo)志對之間。26，中國城市北

11、京上海廣州美國城市華盛頓芝加哥紐約27，中國城市北京上海廣州美國城市華盛頓芝加哥紐約28，思考，定義列表：野生動物各種動物生活在自然環(huán)境中沒有人工繁殖。寵物指的是貓、狗和其他用于娛樂、陪伴、收養(yǎng)和繁殖的動物，也稱為伴侶動物。29、2、有序列表和無序列表標(biāo)志對用于創(chuàng)建有序列表；標(biāo)記對用于創(chuàng)建無序列表；標(biāo)志對只能在或標(biāo)志對之間使用，用于創(chuàng)建列表項。中國城市北京上海廣州美國城市華盛頓芝加哥紐約中國城市1北京2上海3廣州美國城市華盛頓芝加哥紐約。31，無序列表：網(wǎng)站管理員學(xué)院網(wǎng)站管理員學(xué)院網(wǎng)頁代碼網(wǎng)站管理員學(xué)院魔獸世界的網(wǎng)頁課程，32，創(chuàng)建一個超文本標(biāo)記語言表，由。一個表可以分成許多行，這些行由；每行可以分成許多單元格，用。33，只有一行一列的表100，200，300，34，兩行三列的表格100，200，300，400，500，600，35歲。帶標(biāo)題的表格：姓名，電話傳真，比爾蓋茨555 77 854 555 77 855垂直標(biāo)題：姓名，比爾蓋茨，電話555 77 854，傳真55