【文章內(nèi)容簡(jiǎn)介】 TML代碼的方式規(guī)定網(wǎng)頁(yè)文檔中某些元素的基本樣式，如文字的顏色、字體、大小、超鏈接顏色等等。一旦確定，則整個(gè)頁(yè)面中的文本屬性是一致的，若要修改，必須重新設(shè)置 【 外觀（ HTML） 】 選項(xiàng)。相關(guān)代碼書(shū)寫在頭部標(biāo)簽中。 ? 問(wèn)題３： 【 頁(yè)面設(shè)置 】 中 【 外觀（ CSS） 】 的作用 類似于 【 外觀（ HTML） 】 的作用，使用 CSS樣式表設(shè)置網(wǎng)頁(yè)中超鏈接的樣式屬性，保存為外部樣式表時(shí)可以多次鏈接使用，保證子頁(yè)面與首頁(yè)基本格式一致。 創(chuàng)建網(wǎng)頁(yè)文檔 ? 【 練習(xí) 】 制作簡(jiǎn)單的 在 F盤新建文件夾，命名為 practice2，作為站點(diǎn)根文件夾。在 practice2文件夾中新建 image文件夾，將提供的圖片復(fù)制到該文件夾中。 新建站點(diǎn)。 新建 文件名為 網(wǎng)頁(yè) ； 網(wǎng)頁(yè)標(biāo)題為 “視友 (4u2v)視頻教學(xué)網(wǎng) ”；關(guān)鍵字為“電腦學(xué)習(xí)網(wǎng)”。 頁(yè)邊距為 “0px”，背景顏色為 “灰色（ CCCCCC） ”。 頁(yè)面分為三個(gè)部分：第一部分是標(biāo)題 “歡迎光臨電腦學(xué)習(xí)網(wǎng)站 ” ， 使文字居中對(duì)齊。設(shè)置文字大小為 “36”，顏色為 “紅色（ FF0000） ”，字體加粗顯示 ；第二部分 插入圖像并使其居中對(duì)齊 ；第三部分 分為 3列 ， 分別輸入 “進(jìn)入視頻學(xué)習(xí)網(wǎng) ”， “進(jìn)入官方網(wǎng)站 ”， “關(guān)于我們 ”；設(shè)置文本居中對(duì)齊，大小為 “14”，顏色為 “紅色（ FF0000） ”。最終效果 類似 下圖。 創(chuàng)建網(wǎng)頁(yè)文檔 【提示】 單擊【屬性檢查器】的【頁(yè)面屬性】按鈕，選擇【外觀 CSS】，設(shè)置背景顏色與頁(yè)邊距。 執(zhí)行【插入 /表格】菜單命令，在跳出的對(duì)話框中設(shè)置插入 3行 1列的表格，【邊框粗細(xì)】為 0px ，其他選項(xiàng)采用默認(rèn)值。類似右圖。 創(chuàng)建網(wǎng)頁(yè)文檔 選中整個(gè)表格，在屬性檢查器中設(shè)置【對(duì)齊】為 “居中對(duì)齊 ”。 表格的第一行輸入文本；第二行執(zhí)行【插入 /圖像】命令，插入圖像；將插入點(diǎn)放在第三行的空白處，單擊屬性檢查器上的【拆分單元格】按鈕，將第三行拆分為三列，輸入相應(yīng)的文字。 選中第一行文字，在屬性檢查器上單擊【 CSS】按鈕，再單擊【編輯規(guī)則】按鈕，在跳出的對(duì)話框中設(shè)置選擇器名稱為是 s1，其余采用默認(rèn)；單擊【確定】按鈕，在跳出的對(duì)話框中選擇【類型】分類，設(shè)置 Fontsize（大?。?6px， Fontweight（樣式）為 bold（粗體）， Corlor（顏色）為 FF0000；選擇【區(qū)塊】類型，設(shè)置 Textalign（文本對(duì)齊方式）為 center（居中）。單擊【確定】，文字樣式改變；同理新建規(guī)則 s2，應(yīng)用于第三行的文字。 創(chuàng)建網(wǎng)頁(yè)文檔 ? 【練習(xí)】設(shè)置“中友百貨”頁(yè)面屬性 將共享文件夾中的 page文件夾復(fù)制到學(xué)號(hào)文件夾中。 啟動(dòng) DW軟件，打開(kāi) ，將插入點(diǎn)置于原始頁(yè)面的空白位置。 執(zhí)行【修改】 /【頁(yè)面屬性】命令，打開(kāi)頁(yè)面屬性對(duì)話框，單擊【背景圖像】右側(cè)的“瀏覽”按鈕，設(shè)置背景圖片為 images_files\；在【重復(fù)】下來(lái)列表中選擇背景圖像的重復(fù)方式為“ repeatx（橫向重復(fù)）”；設(shè)置【左邊距】、【上邊距】為 0px。 選擇【標(biāo)題 /編碼】選項(xiàng)，設(shè)置【標(biāo)題】為“中友百貨”，設(shè)置【編碼】為“簡(jiǎn)體中文 GB2312”。 創(chuàng)建網(wǎng)頁(yè)文檔 切換到【鏈接 CSS】，設(shè)置【鏈接字體】為宋體，【大小】為 9pt，【鏈接顏色為】 000000，【已訪問(wèn)鏈接】000000，【活動(dòng)鏈接】 FF0000，【變化圖像鏈接】001EFF，【下劃線式樣】為“始終無(wú)下劃線”。 單擊【確定】按鈕，頁(yè)面的背景圖像、頁(yè)面邊距、標(biāo)題等發(fā)生了變化。頁(yè)面效果類似下圖。 創(chuàng)建網(wǎng)頁(yè)文檔 修改后 創(chuàng)建網(wǎng)頁(yè)文檔 ? 問(wèn)題 1：使用【文本居中】按鈕設(shè)置表格居中，為什么在不同的 IE 瀏覽器中效果不同？ 不同的瀏覽器對(duì)代碼的識(shí)別會(huì)產(chǎn)生一定的偏差，這是由代碼書(shū)寫的格式多樣造成的。 一般來(lái)講，設(shè)置某個(gè)對(duì)象的樣式，通常都會(huì)將代碼書(shū)寫在對(duì)應(yīng)的對(duì)象代碼中。例如表格的代碼 table，是表格居中的代碼應(yīng)該書(shū)寫在其中。選中整個(gè)表格，設(shè)置 【 屬性檢查器 】 中的【 對(duì)齊 】 為“居中對(duì)齊”，表格代碼從 table變成 table align=”center”，表示使用對(duì)齊代碼對(duì)當(dāng)前的表格對(duì)象進(jìn)行了樣式設(shè)置，則無(wú)論任何瀏覽器在識(shí)別該代碼時(shí)都會(huì)將其識(shí)別為表格居中顯示。 創(chuàng)建網(wǎng)頁(yè)文檔 ? 問(wèn)題 2：修改【頁(yè)面屬性】中的【鏈接 CSS】，為什么文本沒(méi)有發(fā)生改變？ 樣式表有三種，外部樣式表、內(nèi)部樣式表和內(nèi)嵌樣式表。優(yōu)先級(jí)順序?yàn)閮?nèi)嵌樣式表 內(nèi)部樣式表 外部樣式表。 內(nèi)部樣式表一般顯示在頭部標(biāo)記中，如本案例中： .style2 { color: FFFFFF。 fontsize: 12px。 }，表示文字大小 12像素，顏色白色。對(duì)某段文字應(yīng)用該樣式時(shí)，代碼書(shū)寫為 span class=“style2”。 創(chuàng)建網(wǎng)頁(yè)文檔 內(nèi)嵌樣式表一般顯示在主體代碼中，用來(lái)規(guī)定部分文本的樣式，如本案例中： font color=“ffffff”中友功能店 /font，表示文字顏色為白色。 注意：在案例中，該部分鏈接文字的代碼表示中， font color=“ffffff”中友功能店 /font 包含在 span class=“style2”/span代碼之內(nèi)， 二者優(yōu)先級(jí)順序?yàn)?font color優(yōu)于 span class=“style2”。 頁(yè)面屬性設(shè)置的效果轉(zhuǎn)換成代碼將自動(dòng)添加在頭部標(biāo)簽中，由于樣式表優(yōu)先級(jí)屬性的影響，必須修改 .style2 并刪除 font color代碼，才能讓修改后的效果正常顯示出來(lái)。 第 2章 表格布局 ? 網(wǎng)頁(yè)布局類型 ? 應(yīng)用表格 網(wǎng)頁(yè)布局類型 網(wǎng)頁(yè)布局類型 “國(guó)”字 型 網(wǎng)頁(yè)布局類型 網(wǎng)頁(yè)布局類型 拐角型布局 網(wǎng)頁(yè)布局類型 網(wǎng)頁(yè)布局類型 “三”型布局 網(wǎng)頁(yè)布局類型 網(wǎng)頁(yè)布局類型 對(duì) 稱 對(duì) 比 布 局 網(wǎng)頁(yè)布局類型 對(duì)稱對(duì)比布局 網(wǎng)頁(yè)布局類型 ? 標(biāo)題正文型 ： 這種結(jié)構(gòu)類型的最上面是標(biāo)題或類似的一些東西，下面是正文，比如一些文章頁(yè)面或注冊(cè)頁(yè)面就是這種。 例： 。 網(wǎng)頁(yè)布局類型 標(biāo)題正文型 網(wǎng)頁(yè)布局類型 ? 框架型： 框架型又可以分為左右框架型、上下框架型、綜合框架型。 左右框架型指一種左右分隔的框架結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時(shí)最上面會(huì)有一個(gè)小的標(biāo)題或標(biāo)記，右邊是正文，大部分的大型論壇都采用這種結(jié)構(gòu)，部分企業(yè)網(wǎng)站也喜歡采用這種結(jié)構(gòu)。優(yōu)點(diǎn)：結(jié)構(gòu)非常清晰，一目了然。例： 上下框架型與左右框架型類似，區(qū)別僅在于上下框架型是一種上下分為兩頁(yè)的框架結(jié)構(gòu)。 網(wǎng)頁(yè)布局類型 左右框架型 網(wǎng)頁(yè)布局類型 網(wǎng)頁(yè)布局類型 應(yīng)用表格 ? 關(guān)于表格 表格是用于在 HTML頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具。 表格由一行或多行組成；每行又由一個(gè)或多個(gè)單元格。 HTML代碼用 table、 tr、 td分別指代表格、行、單元格。 應(yīng)用表格 ? 設(shè)置表格屬性 在 “ 設(shè)計(jì) ” 視圖中對(duì)表格進(jìn)行格式設(shè)置時(shí)，可以設(shè)置整個(gè)表格或表格中所選的行、列或單元格的屬性。如果將整個(gè)表格的某個(gè)屬性（例如背景顏色或?qū)R）設(shè)置為一個(gè)值，而將單個(gè)單元格的屬性設(shè)置為另一