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