網(wǎng)頁(yè)制作基礎(chǔ)——文字處理

1、第2章 網(wǎng)頁(yè)制作基礎(chǔ) 文字處理2022年4月3日星期日本章內(nèi)容vHTML基礎(chǔ)基礎(chǔ)v利用利用HTML創(chuàng)建和測(cè)試創(chuàng)建和測(cè)試Web頁(yè)的方法頁(yè)的方法v利用利用HTML設(shè)置標(biāo)題和文字設(shè)置標(biāo)題和文字v利用利用HTML設(shè)置段落設(shè)置段落v利用利用HTML進(jìn)行文本格式的處理進(jìn)行文本格式的處理v網(wǎng)頁(yè)工程組織網(wǎng)頁(yè)工程組織vDreamweaver v作業(yè)作業(yè)一、 HTML基礎(chǔ)v 1標(biāo)記符 v 標(biāo)記符又稱標(biāo)簽，HTML是影響網(wǎng)頁(yè)內(nèi)容顯示格式的標(biāo)記符集合，瀏覽器根據(jù)標(biāo)記符決定網(wǎng)頁(yè)的實(shí)際顯示效果。v 在HTML中，所有的標(biāo)記符都用尖括號(hào)括起來(lái)。例如，表示HTML標(biāo)記符。絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開(kāi)始標(biāo)記符和結(jié)束標(biāo)記

2、符。 如： .v HTML標(biāo)記符是不區(qū)分大小寫(xiě)的，但通常約定標(biāo)記符使用大寫(xiě)字母，這有利于HTML文檔的維護(hù)一、 HTML基礎(chǔ)v 屬性是用來(lái)描述對(duì)象特征的特性。在HTML中，所有的屬性都放置在開(kāi)始標(biāo)記符的尖括號(hào)里，屬性與標(biāo)記符之間用空格分隔，屬性的值放在相應(yīng)屬性之后，用等號(hào)分隔，而不同的屬性之間用空格分隔。格式為：v 受影響的內(nèi)容 v HTML屬性通常也不區(qū)分大小寫(xiě)。 2HTML文檔的基本結(jié)構(gòu)文檔的基本結(jié)構(gòu)一個(gè)典型的一個(gè)典型的HTML文本的基本結(jié)構(gòu)形式如下：文本的基本結(jié)構(gòu)形式如下：v v v v 文本標(biāo)題文本標(biāo)題v v v v 文本內(nèi)容文本內(nèi)容v v 演示一、一、 HTML基礎(chǔ)基礎(chǔ)一、一、 HT

3、ML基礎(chǔ)基礎(chǔ)v （1）HTML標(biāo)記符v 這兩個(gè)標(biāo)記符是HTML文檔的標(biāo)記符。處于文檔的最前端，表示文檔的開(kāi)始，即瀏覽器從開(kāi)始解釋。而則位于文件的最后一行，這樣的結(jié)果表示這一整份的文檔都是HTML語(yǔ)法的文檔。 v （2）HEAD標(biāo)記符 v 是HTML文件頭標(biāo)記符，用來(lái)描述HTML首部的內(nèi)容，說(shuō)明文檔的整體信息。所有首部信息并不會(huì)出現(xiàn)在WWW瀏覽器所看到的窗體中。通常與某些標(biāo)記符一起使用，如標(biāo)記符。 一、一、 HTML基礎(chǔ)基礎(chǔ)v （3）TITLE標(biāo)記符v 指的是一份文檔的標(biāo)題。通常來(lái)說(shuō)，每一份文檔都應(yīng)該有一個(gè)標(biāo)題來(lái)簡(jiǎn)述這一份文檔的特色或是主題。對(duì)于WWW瀏覽器而言，標(biāo)題所在的位置雖然依照瀏覽器的不

4、同而不同，但是大部分都位于瀏覽器的最上方。 v （4）BODY標(biāo)記符v 指的是定義出一個(gè)HTML文檔的體部，位于首部下面。在標(biāo)記符內(nèi)的文字，所有使用標(biāo)記符的地方都可以經(jīng)瀏覽器正確地顯示在瀏覽器窗體中。 一、一、 HTML基礎(chǔ)基礎(chǔ)v3. 語(yǔ)言字符集語(yǔ)言字符集(Charsets)的信息的信息vv#= GB2312, us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce,iso-2022-jp, x-sjis, x-euc-jp,euc-kr, iso-2022-kr, gb_2312-80,x-euc-tw, x-cns11643-1, x

5、-cns11643-2, big5 一、一、 HTML基礎(chǔ)基礎(chǔ)v 3. 語(yǔ)言字符集語(yǔ)言字符集(Charsets)的信息的信息v ASCII碼碼:iso8859-1，屬于單字節(jié)編碼，最多能表示的字，屬于單字節(jié)編碼，最多能表示的字符范圍是符范圍是0-255，應(yīng)用于英文系列。比如，字母，應(yīng)用于英文系列。比如，字母a的編碼的編碼為為0 x61=97。v 很明顯，很明顯，iso8859-1編碼表示的字符范圍很窄，無(wú)法表示編碼表示的字符范圍很窄，無(wú)法表示中文字符。中文字符。v 將以將以中文中文兩個(gè)字為例，經(jīng)查表可以知道其兩個(gè)字為例，經(jīng)查表可以知道其GB2312編碼編碼是是d6d0 cec4，Unicode

6、編碼為編碼為4e2d 6587，UTF編編碼就是碼就是e4b8ad e69687二、二、 創(chuàng)建和測(cè)試創(chuàng)建和測(cè)試Web頁(yè)頁(yè)v由于HTML文件的實(shí)質(zhì)就是文本文件，因此可以用任何文本編輯器編輯HTML文件，通?？梢允褂肳indows系統(tǒng)中的“記事本”程序。v測(cè)試工具： Internet Explorer Firefox + Firebug Plugin二、二、 創(chuàng)建和測(cè)試創(chuàng)建和測(cè)試Web頁(yè)頁(yè)v （1）創(chuàng)建Web頁(yè)v 保存了Web頁(yè)之后，在所選擇的文件夾中將包含所創(chuàng)建的Web頁(yè)，可以由IE將其打開(kāi)。 v （2）發(fā)布Web頁(yè)v 用戶創(chuàng)建了Web頁(yè)之后，通?？梢灾苯訉⑵浔４嬖谟脖P(pán)、軟盤(pán)或光盤(pán)上，作為一種電

7、子文檔，也可以將其發(fā)布到Internet上，以便讓全世界的瀏覽者都能夠進(jìn)行瀏覽。發(fā)布Web頁(yè)時(shí)應(yīng)按以下步驟進(jìn)行。v 創(chuàng)建本地站點(diǎn)v 申請(qǐng)網(wǎng)頁(yè)空間v 用FTP上傳網(wǎng)頁(yè) v 文本格式處理包括文字設(shè)置和格式處理。文本格式處理包括文字設(shè)置和格式處理。v 1文字設(shè)置文字設(shè)置v 在網(wǎng)頁(yè)中為了增強(qiáng)頁(yè)面的層次，其中的文字可以用不在網(wǎng)頁(yè)中為了增強(qiáng)頁(yè)面的層次，其中的文字可以用不同的大小、字體、字型和顏色，通常用同的大小、字體、字型和顏色，通常用FONT標(biāo)記符標(biāo)記符來(lái)完成。來(lái)完成。v FONT標(biāo)記符設(shè)置格式為：標(biāo)記符設(shè)置格式為：v 被設(shè)置的文字被設(shè)置的文字 v size屬性是字號(hào)屬性，用于控制文字的大小，它的取屬性

8、是字號(hào)屬性，用于控制文字的大小，它的取值既可以是絕對(duì)值，也可以是相對(duì)值。值既可以是絕對(duì)值，也可以是相對(duì)值。v face屬性是字體標(biāo)記符，宋體、楷體等。屬性是字體標(biāo)記符，宋體、楷體等。 v color屬性可用來(lái)控制文字的顏色，屬性值可以是顏色屬性可用來(lái)控制文字的顏色，屬性值可以是顏色名稱或十六進(jìn)制值。名稱或十六進(jìn)制值。三、 文本格式處理v字體字體 示例示例v大小可選值：大小可選值：17 示例示例v顏色可選值：顏色可選值： Red, green, blue等等 十六進(jìn)制組合方法：十六進(jìn)制組合方法：RGB 示例示例三、 文本格式處理三、 文本格式處理v 轉(zhuǎn)義字符v 空格   v 雙

9、引號(hào) "v &符號(hào) &v 左右尖括號(hào) < >v :換行換行v物理字體物理字體(Physical Style) ：粗體：粗體 ：斜體：斜體 ：下劃線 ：上標(biāo) ：下標(biāo) ：刪除線 Demo src三、 文本格式處理設(shè)置頁(yè)面屬性設(shè)置頁(yè)面屬性v（1）設(shè)置頁(yè)面背景顏色）設(shè)置頁(yè)面背景顏色v標(biāo)記符中使用標(biāo)記符中使用bgcolor屬性可以為網(wǎng)頁(yè)設(shè)屬性可以為網(wǎng)頁(yè)設(shè)置背景顏色。置背景顏色。 v（2）設(shè)置頁(yè)面背景圖像）設(shè)置頁(yè)面背景圖像v單純使用一種顏色作為背景顯然有些單調(diào)，網(wǎng)頁(yè)單純使用一種顏色作為背景顯然有些單調(diào)，網(wǎng)頁(yè)設(shè)計(jì)者也可選擇特定圖案作為頁(yè)面

10、的背景，使用設(shè)計(jì)者也可選擇特定圖案作為頁(yè)面的背景，使用BODY標(biāo)記符的標(biāo)記符的background屬性即可。屬性即可。HTML語(yǔ)語(yǔ)句為：句為：v 三、 文本格式處理v（3）設(shè)置文字和超鏈接的顏色）設(shè)置文字和超鏈接的顏色vBODY標(biāo)記符的屬性。標(biāo)記符的屬性。 bgcolor - 背景色彩背景色彩 text - 非可鏈接文字的色彩非可鏈接文字的色彩 link - 可鏈接文字的色彩可鏈接文字的色彩 alink - 正被點(diǎn)擊的可鏈接文字的色彩正被點(diǎn)擊的可鏈接文字的色彩 vlink - 已經(jīng)點(diǎn)擊已經(jīng)點(diǎn)擊(訪問(wèn)訪問(wèn))過(guò)的可鏈接文字的色彩過(guò)的可鏈接文字的色彩三、 文本格式處理三、 文本格式處理v頁(yè)面背景圖案

11、設(shè)置注意事項(xiàng)v使用Dreamweaver會(huì)使用絕對(duì)路徑v修改成為相對(duì)路徑三、 文本格式處理v絕對(duì)路徑v默認(rèn)處理： 當(dāng)前目錄 .v上一級(jí)目錄 .v目錄分隔符： /三、 文本格式處理vDOS下使用相對(duì)路徑訪問(wèn)文件v訪問(wèn)規(guī)則： 默認(rèn)：當(dāng)前目錄下尋找文件 通過(guò)絕對(duì)路徑或者相對(duì)路徑來(lái)進(jìn)行訪問(wèn)v分區(qū) 分區(qū)名稱： 例如 D:v切換目錄 Cd 目錄名稱四、利用四、利用HTML設(shè)置標(biāo)題和文字設(shè)置標(biāo)題和文字v在HTML中，用戶可以通過(guò)Hn標(biāo)記符來(lái)標(biāo)識(shí)文檔中的標(biāo)題和副標(biāo)題，其中n是1到6的數(shù)字。表示最大的標(biāo)題，表示最小的標(biāo)題。使用標(biāo)題樣式時(shí)，必須使用結(jié)束標(biāo)記符。四、利用四、利用HTML設(shè)置標(biāo)題和文字設(shè)置標(biāo)題和文字v

12、標(biāo)題文字標(biāo)記符的格式：v 標(biāo)題文字 v屬性align用來(lái)設(shè)置標(biāo)題在頁(yè)面中的對(duì)齊方式：vleft（左對(duì)齊）、center（居中）或right（右對(duì)齊）。默認(rèn)為左對(duì)齊v如:計(jì)算機(jī)系四、利用四、利用HTML設(shè)置標(biāo)題和文字設(shè)置標(biāo)題和文字v標(biāo)記符v默認(rèn)顯示宋體，會(huì)自動(dòng)插入一個(gè)空行，不必再用空行標(biāo)記符。v與HEAD中的定義的網(wǎng)頁(yè)標(biāo)題不同，標(biāo)題格式顯示在瀏覽器窗口內(nèi)，而不顯示在瀏覽器的標(biāo)題欄中。Demo五、利用五、利用HTML設(shè)置段落設(shè)置段落v 在HTML中段落處理是通過(guò)段落標(biāo)記來(lái)完成的，常用的段落標(biāo)記符有：v 1注釋標(biāo)記符v HTML的注釋標(biāo)記符的格式為：v 2強(qiáng)制換行標(biāo)記符v 強(qiáng)制換行標(biāo)記符為，放在一行

13、的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會(huì)在行與行之間留下空行，即強(qiáng)制文本換行。 五、利用五、利用HTML設(shè)置段落設(shè)置段落v 3強(qiáng)制換段標(biāo)記符v 在HTML文檔中，無(wú)法用多個(gè)回車(chē)、空格、Tab鍵來(lái)調(diào)整文檔段落的格式。要用HTML的標(biāo)記符來(lái)強(qiáng)制換行、分段。v （1）強(qiáng)制換段標(biāo)記符v 強(qiáng)制換段標(biāo)記符的格式為：v 文字v （2）設(shè)置段落標(biāo)記符v 設(shè)置段落標(biāo)記符的格式為：v 文字 Demo五、利用五、利用HTML設(shè)置段落設(shè)置段落v 4顯示預(yù)排格式標(biāo)記符v 當(dāng)用其他編輯工具編排好了一段文字后，其中很可能有一些HTML文件不支持的控制符號(hào)，如回車(chē)、多個(gè)空格、Tab鍵等。如果希望在瀏覽網(wǎng)頁(yè)

14、時(shí)仍保留在編輯工具中已經(jīng)排好的段落格式，可以使用標(biāo)記符將預(yù)先排好的格式保留下來(lái)。v 顯示預(yù)排格式標(biāo)記符的格式為：v 預(yù)先排好的格式有預(yù)排無(wú)預(yù)排五、利用五、利用HTML設(shè)置段落設(shè)置段落v5分區(qū)顯示標(biāo)記符v 分區(qū)顯示標(biāo)記符的格式為：v 文本或圖像 分區(qū)演示五、利用五、利用HTML設(shè)置段落設(shè)置段落v水平線v在頁(yè)面中插入一條水平標(biāo)尺線（Horizontal Rules），可以使不同功能的文字分隔開(kāi)，看起來(lái)整齊、明了。 v水平線標(biāo)記符的格式為：v水平線練習(xí)六、網(wǎng)頁(yè)工程組織六、網(wǎng)頁(yè)工程組織v設(shè)定一個(gè)主目錄:防止過(guò)多的目錄切換v在該主目錄下建立幾個(gè)目錄 按照業(yè)務(wù)或者部門(mén)分類(lèi) 如果構(gòu)建經(jīng)管院主頁(yè)，可以按照系別

15、、實(shí)驗(yàn)室、研究中心分別建立不同的目錄 學(xué)校主頁(yè)設(shè)計(jì) 按照類(lèi)型：Images, css, music, html 可以考慮把圖片、音樂(lè)子目錄放置到按照業(yè)務(wù)分類(lèi)的目錄下七、七、Dreamweaverv Dreamweaver cs5.5中對(duì)文本的輸入及編輯，與Word極其相似。v 1編輯文本v （1）換行v 自動(dòng)換行：在輸入文字時(shí)，若某一行的長(zhǎng)度超過(guò)了Dreamweaver窗口的顯示范圍，文字將自動(dòng)換到下一行。 v 利用“Enter”鍵換行：在輸入文字后按“Enter”鍵，文字成段，且上下段之間空一行。 插入了div標(biāo)記v 利用“Shift+Enter”鍵換行：如果想要將文字手動(dòng)換行，中間又不能出

16、現(xiàn)空白行，可以按“Shift+Enter”鍵。七、七、Dreamweaverv（2）插入特殊的字符v有時(shí)為了內(nèi)容的需要，要在網(wǎng)頁(yè)中插入一些鍵盤(pán)上沒(méi)有的特殊字符，在Dreamweaver 4.0 中，這些特殊字符不僅可以通過(guò)“Insert”菜單下的“Special Character”命令來(lái)插入，還可以通過(guò)對(duì)象面板來(lái)直接插入。 七、七、Dreamweaverv 2查找替換文本的內(nèi)容v 如果要在文檔中查找或替找某個(gè)文字，可利用Dreamweaver 4.0提供的查找和替換功能。選擇“Edit”|“Find and Replace”（查找與替換）命令，打開(kāi)“Find and Replace”對(duì)話框，

17、 v 3設(shè)置文本格式v 在Dreamweaver 4.0中設(shè)置文本格式可以通過(guò)屬性面板，類(lèi)似與Microsoft Word中對(duì)文本的屬性設(shè)置，包括段落的格式、字體、字號(hào)、字的顏色、字體加粗傾斜、對(duì)齊方式（左對(duì)齊居中右對(duì)齊）、文字所鏈接的路徑或URL等。 七、七、Dreamweaverv v 標(biāo)記符指Ordered List，它是用來(lái)創(chuàng)建一個(gè)標(biāo)有數(shù)字的列表；v 標(biāo)記符用來(lái)創(chuàng)建一個(gè)標(biāo)有圓點(diǎn)的列表；v 標(biāo)記符只能在或標(biāo)記符內(nèi)使用，此標(biāo)記符用來(lái)創(chuàng)建一個(gè)列表項(xiàng)。 v 示例代碼七、七、Dreamweaverv在Dreamweaver中可以方便創(chuàng)建列表中可以方便創(chuàng)建列表 打開(kāi)設(shè)計(jì)視圖打開(kāi)設(shè)計(jì)視圖 在選中幾行

18、文本后，按下按鈕即可。其形狀與在選中幾行文本后，按下按鈕即可。其形狀與Word相同相同 選中文本行后，按下選中文本行后，按下“List Item”按鈕，設(shè)置所需按鈕，設(shè)置所需要的類(lèi)型要的類(lèi)型v增加縮進(jìn)量增加縮進(jìn)量 將添加將添加內(nèi)容內(nèi)容作業(yè)作業(yè) 查找自己喜歡的一首詩(shī)/詞 通過(guò)網(wǎng)頁(yè)展示你的這首詩(shī) 要求： 簡(jiǎn)潔 大方 美觀 工具不限第2章 網(wǎng)頁(yè)制作基礎(chǔ)表格、超鏈接和多媒體2022年4月3日星期日表格的基本語(yǔ)法表格的基本語(yǔ)法v. - 定義表格v - 定義表行v - 定義表頭v - 定義表元(表格的具體數(shù)據(jù))表格的基本語(yǔ)法表格的基本語(yǔ)法vTABLEvTABLE標(biāo)記符用于定義整個(gè)表格，表格內(nèi)的所有內(nèi)容都應(yīng)

19、該位于和 之間表格的基本語(yǔ)法表格的基本語(yǔ)法vCAPTIONv如果表格需要標(biāo)題，那么就應(yīng)該使用CAPTION標(biāo)記符將表格標(biāo)題包括在和之間。表格的基本語(yǔ)法表格的基本語(yǔ)法vTRvTR標(biāo)記符用于定義表格的行，對(duì)于每一個(gè)表格行，都對(duì)應(yīng)一個(gè)TR標(biāo)記符。TR標(biāo)記符的結(jié)束標(biāo)記符可以省略。表格的基本語(yǔ)法表格的基本語(yǔ)法vTD和THv在表格行中的每個(gè)單元格，都對(duì)應(yīng)于一個(gè)TD標(biāo)記符或者TH標(biāo)記符，用于標(biāo)記表格的內(nèi)容，其中可以包括文字、圖像或其他對(duì)象。TD與TH的功能和用法幾乎完全相同（可以任意混合使用，但效果略有不同）v唯一不同之處在于TD表示普通表格數(shù)據(jù)，而TH表示表格的行列標(biāo)題數(shù)據(jù)（也就是通常所說(shuō)的表頭）。TD和

20、TH的結(jié)束標(biāo)記符都可以省略，并且可以不包括任何內(nèi)容表格的基本語(yǔ)法表格的基本語(yǔ)法v 示例: a 1 b 2 表格的基本語(yǔ)法表格的基本語(yǔ)法v示例運(yùn)行結(jié)果查看vDreamweaver創(chuàng)建表格 設(shè)置行數(shù),列數(shù) 輸入表格內(nèi)容 表格修改 添加行 添加列帶邊框的表格vvFoodDrinkSweet/FoodDrinkSweet vtrABC ABC vv結(jié)果結(jié)果帶邊框的表格vDreamweaver修改表格的邊框 修改表格屬性v步驟 選中表格 修改border屬性 設(shè)置為大于零的整數(shù)值設(shè)置為大于零的整數(shù)值跨多行、多列的表元跨多行、多列的表元v 跨多列的表元 v v Morning Menuv Food Dri

21、nk Sweetv ABCv v Demo跨多行、多列的表元跨多行、多列的表元vDreamweaver合并列v步驟 選中所需要合并的列(可以是多列) 點(diǎn)擊右鍵 Table-Merge Cells跨多行、多列的表元跨多行、多列的表元v 跨多行的表元 v v Morning Menuv Food Av Drink Bv Sweet Cv v Demo跨多行、多列的表元跨多行、多列的表元vDreamweaver合并列v步驟 選中所需要合并的行內(nèi)對(duì)應(yīng)的列 點(diǎn)擊右鍵 Table-Merge Cells表格尺寸設(shè)置表格尺寸設(shè)置 v v 邊框尺寸設(shè)置： v v FoodDrinkSweetv ABC v v

22、 Demo表格尺寸設(shè)置表格尺寸設(shè)置 v v 表格尺寸設(shè)置： v v FoodDrinkSweetv ABC v v Demo表格尺寸設(shè)置表格尺寸設(shè)置 v v 表元間隙設(shè)置： v v FoodDrinkSweetv ABC v v Demo表格尺寸設(shè)置表格尺寸設(shè)置 v v 表元內(nèi)部空白設(shè)置： v v FoodDrinkSweetv ABC v v Demo表格內(nèi)文字的對(duì)齊表格內(nèi)文字的對(duì)齊/布局布局 vtr align=# vth align=#v v#=left, center, right#=left, center, right表格內(nèi)文字的對(duì)齊表格內(nèi)文字的對(duì)齊/布局布局 v v v Food

23、DrinkSweetv v Av Bv C v Demo表格內(nèi)文字的對(duì)齊表格內(nèi)文字的對(duì)齊/布局布局 v v #=top, middle, bottom, baselinev表格內(nèi)文字的對(duì)齊表格內(nèi)文字的對(duì)齊/布局布局 v v v FoodDrinkv SweetOtherv v Av Bv Cv Dv demo表格在頁(yè)面中的對(duì)齊表格在頁(yè)面中的對(duì)齊/布局布局v for example: FoodDrinkSweet ABC 表格在頁(yè)面中的對(duì)齊表格在頁(yè)面中的對(duì)齊/布局布局v table vspace=# hspace =# #=space value #=space value FoodDrinkSweetABCv FireFox支持該屬性，而IE不支持 Demo表格的標(biāo)題表格的標(biāo)題 v . #=left, center, righ