html網(wǎng)頁(yè)編程基礎(chǔ)講義-資料下載頁(yè)
2025-03-10 22:28本頁(yè)面
【正文】 website中使用 DreamWeaver建立一個(gè)頁(yè)面，并命名為 。 （ 2）打開 ，并將方框內(nèi)的 CSS代碼（ style/style標(biāo)記內(nèi)的代碼）加入到代碼編輯區(qū)，如圖 228所示。 下一頁(yè) 返回 任務(wù)三使用樣式表（ CSS）來美化網(wǎng)頁(yè) （ 3）繼續(xù)將方框內(nèi)的代碼放入 body/body標(biāo)記內(nèi)，如圖 229所示。 （ 4）在 DreamWeaver中按 F12鍵，即可得到圖 230所示的結(jié)果。 【 案例 2】 使用外部樣式表對(duì)網(wǎng)頁(yè)的字體、字號(hào)、字色、字樣進(jìn)行美化設(shè)置 【 具體步驟 】 （ 1）如前所述，在 D:\website中使用 DreamWeaver建立一個(gè)頁(yè)面，并命名為 。 下一頁(yè) 返回 上一頁(yè) 任務(wù)三使用樣式表（ CSS）來美化網(wǎng)頁(yè) （ 2）在 DreamWeaver中，選擇 【 文件 】 → 【 新建 】 命令，在彈出的對(duì)話框中的 【 常規(guī) 】 選項(xiàng)卡中，選擇 【 基本頁(yè) 】 → 【 CSS】 選項(xiàng)，單擊 【 創(chuàng)建 】 按鈕，得到如圖 231所示。 （ 3）選擇 【 文件 】 → 【 保存 】 命令，在彈出的 【 另存為 】 對(duì)話框的【 文件名 】 下拉列表框中輸入 ，然后單擊 【 保存 】 按鈕。 （ 4）在 ，并將 CSS代碼加入到編輯區(qū)中去，如圖 232所示。 （ 5）切換到 ，將方框內(nèi)的代碼，加入到網(wǎng)頁(yè)中，如圖 233所示。 （ 6）仍然在 ，在 DreamWeaver的右側(cè)窗口中（如圖 234所示），單擊鏈接按鈕，彈出 【 鏈接外部樣式表 】 對(duì)話框，如圖 235所示。 下一頁(yè) 返回 上一頁(yè) 任務(wù)三使用樣式表（ CSS）來美化網(wǎng)頁(yè) （ 7）單擊 【 瀏覽 】 按鈕，在 D:\website目錄中選擇 ，出現(xiàn)圖 236所示橢圓內(nèi)的代碼。 【 背景知識(shí) 】 1996年底的時(shí)候悄悄誕生了一種叫做樣式表（ stylesheets）的技術(shù)。它向世人保證：將對(duì)布局、字體、顏色、背景和其他文圖效果實(shí)現(xiàn)更加精確的控制。只通過修改一個(gè)文件就改變頁(yè)數(shù)不計(jì)的網(wǎng)頁(yè)的外觀和格式。能在所有瀏覽器和平臺(tái)之間實(shí)現(xiàn)兼容。實(shí)際上除了還不能全面支持常用的大多數(shù)瀏覽器之外， CSS在實(shí)現(xiàn)其他承諾方面做得相當(dāng)出色?，F(xiàn)在，先來了解樣式表能做什么。 下一頁(yè) 返回 上一頁(yè) 任務(wù)三使用樣式表（ CSS）來美化網(wǎng)頁(yè) CSS樣式表有什么特別之處 ?簡(jiǎn)而言之 ,它能做以下事情。 ①用戶可以將格式和結(jié)構(gòu)分離； ②用戶可以以前所未有的能力控制頁(yè)面布局； ③用戶可以制作體積更小下載更快的網(wǎng)頁(yè)； ④用戶可以將許多網(wǎng)頁(yè)同時(shí)更新，比以前更好、更快、更容易； ⑤瀏覽器將成為更友好的界面。 利用 CSS樣式表可以將格式和結(jié)構(gòu)分離。 利用 CSS樣式表使用戶可以以前所未有的能力控制頁(yè)面的布局。 利用 CSS樣式表使用戶可以制作出體積更小下載更快的網(wǎng)頁(yè)。 利用 CSS樣式表使用戶可以更好、更快、更容易地維護(hù)及更新大量的網(wǎng)頁(yè)。 返回 上一頁(yè) 表 21常用標(biāo)記及屬性的英文識(shí)記 返回 圖 22新建文本文檔 .txt 返回 圖 23 返回 圖 24“記事本”命令 返回 圖 25程序運(yùn)行效果 返回 圖 26 Unitiled1頁(yè)面 返回 圖 27運(yùn)行結(jié)果 返回 圖 28“管理”命令 返回 下一頁(yè) 圖 29選擇 【 Inter信息服務(wù) 】 命令 返回 下一頁(yè) 上一頁(yè) 圖 210選擇 【 虛擬目錄 】 命令 返回 上一頁(yè) 圖 211設(shè)置別名 返回 圖 212選擇目錄路徑 返回 圖 213顯示頁(yè)面 返回 圖 214“高級(jí)”選項(xiàng)卡 返回 圖 215設(shè)置本地信息 返回 圖 216設(shè)置遠(yuǎn)程信息 返回 圖 217設(shè)置測(cè)試服務(wù)器 返回 圖 221輸入代碼 返回 圖 222輸入代碼 返回 圖 223輸入文字 返回 圖 224輸入代碼 返回 圖 225運(yùn)行結(jié)果（ 1） 返回 圖 225運(yùn)行結(jié)果（ 1） 返回 圖 226運(yùn)行結(jié)果（ 2） 返回 圖 227運(yùn)行結(jié)果（ 3） 返回 圖 228輸入代碼（ 1） 返回 圖 229輸入代碼（ 2） 返回 圖 230運(yùn)行結(jié)果 返回 圖 231新建頁(yè)面 返回 圖 232加入代碼（ 1） 返回 圖 233加入代碼（ 2） 返回 圖 234 Dream Weaver右側(cè)窗口 返回 圖 235【 鏈接外部樣式表 】 對(duì)話框 返回 圖 236加入代碼（ 3） 返回 演講完畢，謝謝觀看！
試題試卷相關(guān)推薦
鄂ICP備17016276號(hào)-1