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

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

2、符。 如： .v HTML標(biāo)記符是不區(qū)分大小寫的，但通常約定標(biāo)記符使用大寫字母，這有利于HTML文檔的維護(hù)一、 HTML基礎(chǔ)v 屬性是用來描述對象特征的特性。在HTML中，所有的屬性都放置在開始標(biāo)記符的尖括號里，屬性與標(biāo)記符之間用空格分隔，屬性的值放在相應(yīng)屬性之后，用等號分隔，而不同的屬性之間用空格分隔。格式為：v 受影響的內(nèi)容 v HTML屬性通常也不區(qū)分大小寫。 2HTML文檔的基本結(jié)構(gòu)文檔的基本結(jié)構(gòu)一個典型的一個典型的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 這兩個標(biāo)記符是HTML文檔的標(biāo)記符。處于文檔的最前端，表示文檔的開始，即瀏覽器從開始解釋。而則位于文件的最后一行，這樣的結(jié)果表示這一整份的文檔都是HTML語法的文檔。 v （2）HEAD標(biāo)記符 v 是HTML文件頭標(biāo)記符，用來描述HTML首部的內(nèi)容，說明文檔的整體信息。所有首部信息并不會出現(xiàn)在WWW瀏覽器所看到的窗體中。通常與某些標(biāo)記符一起使用，如標(biāo)記符。 一、一、 HTML基礎(chǔ)基礎(chǔ)v （3）TITLE標(biāo)記符v 指的是一份文檔的標(biāo)題。通常來說，每一份文檔都應(yīng)該有一個標(biāo)題來簡述這一份文檔的特色或是主題。對于WWW瀏覽器而言，標(biāo)題所在的位置雖然依照瀏覽器的不

4、同而不同，但是大部分都位于瀏覽器的最上方。 v （4）BODY標(biāo)記符v 指的是定義出一個HTML文檔的體部，位于首部下面。在標(biāo)記符內(nèi)的文字，所有使用標(biāo)記符的地方都可以經(jīng)瀏覽器正確地顯示在瀏覽器窗體中。 一、一、 HTML基礎(chǔ)基礎(chǔ)v3. 語言字符集語言字符集(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. 語言字符集語言字符集(Charsets)的信息的信息v ASCII碼碼:iso8859-1，屬于單字節(jié)編碼，最多能表示的字，屬于單字節(jié)編碼，最多能表示的字符范圍是符范圍是0-255，應(yīng)用于英文系列。比如，字母，應(yīng)用于英文系列。比如，字母a的編碼的編碼為為0 x61=97。v 很明顯，很明顯，iso8859-1編碼表示的字符范圍很窄，無法表示編碼表示的字符范圍很窄，無法表示中文字符。中文字符。v 將以將以中文中文兩個字為例，經(jīng)查表可以知道其兩個字為例，經(jīng)查表可以知道其GB2312編碼編碼是是d6d0 cec4，Unicode

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

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

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

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

10、的背景，使用設(shè)計者也可選擇特定圖案作為頁面的背景，使用BODY標(biāo)記符的標(biāo)記符的background屬性即可。屬性即可。HTML語語句為：句為：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)擊(訪問訪問)過的可鏈接文字的色彩過的可鏈接文字的色彩三、 文本格式處理三、 文本格式處理v頁面背景圖案

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

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

13、的末尾，可以使后面的文字、圖片、表格等顯示于下一行，而又不會在行與行之間留下空行，即強(qiáng)制文本換行。 五、利用五、利用HTML設(shè)置段落設(shè)置段落v 3強(qiáng)制換段標(biāo)記符v 在HTML文檔中，無法用多個回車、空格、Tab鍵來調(diào)整文檔段落的格式。要用HTML的標(biāo)記符來強(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文件不支持的控制符號，如回車、多個空格、Tab鍵等。如果希望在瀏覽網(wǎng)頁

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

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

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

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

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

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

20、TH的結(jié)束標(biāo)記符都可以省略，并且可以不包括任何內(nèi)容表格的基本語法表格的基本語法v 示例: a 1 b 2 表格的基本語法表格的基本語法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)對應(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)文字的對齊表格內(nèi)文字的對齊/布局布局 vtr align=# vth align=#v v#=left, center, right#=left, center, right表格內(nèi)文字的對齊表格內(nèi)文字的對齊/布局布局 v v v Food

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