1、什么是html語言,推薦學(xué)習(xí)網(wǎng)站： ,用html語言寫簡單的網(wǎng)站, 我是這個網(wǎng)頁的標(biāo)題 這是我的第一個網(wǎng)頁。 ,用于段落(段落paragraph) 顯示粗體文本(粗體的bold) 標(biāo)題 子標(biāo)題 子子標(biāo)題 這句話應(yīng)顯示為斜體(斜體italic), 我的網(wǎng)站 標(biāo)題 一些文字。 這句話應(yīng)顯示為斜體 子標(biāo)題 一些文字。 ,鏈接標(biāo)簽,1、網(wǎng)頁鏈接： 這是一個指向HTML.net的鏈接 注：元素a代表“鏈接（anchor），屬性href代表“超文本引用（hypertext reference）,2、電子郵件鏈接： 給發(fā)電子郵件,鏈接標(biāo)簽,1、網(wǎng)頁鏈接： 布啦布啦首頁 2、電子郵件鏈接： 聯(lián)系新浪,標(biāo)題屬性

2、： 如我跟HTML的友誼,顏色,十六進制（216）： 白色： #ffffff黑色： #000000紅色： #ff0000蘭色： #0000ff綠色： #00ff00黃色： #ffff00,HTML字體(Fonts),字體大小 用字體大小屬性(size)來設(shè)定字體的大小。 這一段的字體大小的值是2 用face屬性來設(shè)定字體風(fēng)格 這一段的字體風(fēng)格是arial ,用顏色屬性(color)來設(shè)定字體顏色。 這一段的字體顏色是紅 這一段的字體大小的值是2的紅色字,表格,用于創(chuàng)建表格的3個基本元素是： 首標(biāo)簽和尾標(biāo)簽分別表示一個表格的開始與結(jié)束。這是不難理解的。 tr是“table row（表格行）”的縮

3、寫，用于表示一行的開始和結(jié)束。這也容易理解。 td是“table data（表格數(shù)據(jù)）”的縮寫，用于表示行中各個單元格（cell）的開始和結(jié)束。這些都是容易理解的。,無邊界的表格（22）, 單元格1 單元格2 單元格3 單元格4 ,有邊界的表格, 第一 行 第二 行 ,給表格設(shè)置背景顏色, 第一 行 第二 行 ,單元格背景色、背景圖片, 第一 行 第二 行 ,Cellspacing屬性表示單元格之間的距離,Cellspacing屬性值設(shè)為0的表格： 第一行 第二 行 ,Cellspacing屬性表示單元格之間的距離,Cellspacing屬性值設(shè)為20的表格： 第一 行 第二行 ,頁面布局,這

4、里的文字大小為20 這里的文字字體為黑體 這里是文字大小為20、采用黑體的文字,一個簡單的css頁面, 我的第一個CSS頁面 h1 font-size:30px; font-family:宋體; h2 font-size:15px; font-family:黑體; p font-size:8px; font-family:隸書; 我的第一個CSS頁面 歡迎參觀我的第一個CSS頁面 你可以在這里了解CSS的原理 ,Web標(biāo)準及驗證, 網(wǎng)頁標(biāo)題 一些文字 ,你可以以多種不同的方式來編寫HTML；同時，瀏覽器也可以以多種不同的方式來理解HTML。你可以認為HTML有很多種方言。這就是為什么某些網(wǎng)站會

5、在不同的瀏覽器上顯示出不同效果的原因。 為了解決這一問題，HTML發(fā)明人Tim Berners-Lee先生創(chuàng)辦了萬維網(wǎng)聯(lián)盟（World Wide Web Consortium，W3C）來致力于制訂通用的HTML標(biāo)準。,只要你遵循W3C標(biāo)準來編寫HTML，你的網(wǎng)頁將永遠能在所有瀏覽器上顯示出來。幸運的是，你在本教程學(xué)到的是XHTML，它是最新的、更嚴格、更純正的HTML版本。,第2課 定義站點與頁面設(shè)置,內(nèi)容提要 學(xué)習(xí)Dreamweaver的三大原則 定義一個新站點，向?qū)c高級模式 修改頁面設(shè)置的各項參數(shù) 切換頁面設(shè)置窗口的兩種形式 學(xué)習(xí)目標(biāo) 牢記使用Dreamweaver的各項原則，掌握如何去

6、建立和管理站點。掌握如何在地圖模式搭建網(wǎng)站結(jié)構(gòu)。學(xué)習(xí)如何在頁面設(shè)置的HTML和CSS模式下修改各項參數(shù)。,啟動與退出Dreamweaver MX 8,啟動Dreamweaver MX 8 退出Dreamweaver MX 8,三大原則,建立網(wǎng)頁之前要先構(gòu)建一個新的網(wǎng)站 文件名和各種對象的id名要盡量用英文，避免使用中文 及時存盤（有些效果沒有顯示等）,Dreamweaver MX 8的工作界面,Dreamweaver MX 8的工作界面,插入欄 “文檔”工具欄 標(biāo)準工具欄 “屬性”面板 浮動面板組,1.5.1 插入欄,插入欄可方便用戶在制作網(wǎng)頁過程中快速插入網(wǎng)頁元素。Dreamweaver提供

7、了“常用”、“布局”、“表單”、“文本”、HTML、“應(yīng)用程序”、“Flash元素”、“收藏”8個插入欄，通常默認的是“常用”插入欄。切換插入欄的方法很簡單，單擊插入欄的 按鈕，在彈出的菜單中選擇相應(yīng)的命令即可。,15.2 “文檔”工具欄,“文檔”工具欄可用于進行工作布局切換、檢查瀏覽器錯誤和文檔的預(yù)覽等操作。,1.5.3標(biāo)準工具欄,標(biāo)準工具欄可以進行新建文檔，打開、保存文件。剪切、複製、粘貼文字。,1.5.3 “屬性”面板,“屬性”面板用于查看和設(shè)置所選對象的各種屬性。單擊其右下角的 按鈕可打開其他的設(shè)置項目，此時 按鈕變?yōu)?按鈕再單擊該按鈕可將其還原。,1.5.4 浮動面板組,浮動面板組位

8、于編輯窗口右側(cè)，是浮動面板的集合。浮動面板組是站點管理、事件添加等操作的場所。在浮動面板組中單擊所需面板欄的 圖標(biāo)可展開該面板。展開面板后原來的 圖標(biāo)變?yōu)?形狀，單擊 圖標(biāo)則關(guān)閉該面板，只顯示其名稱。若需顯示其他浮動面板，可選擇“窗口”菜單中的相應(yīng)命令。,站點的搭建與管理,規(guī)劃站點結(jié)構(gòu) 網(wǎng)站是多個網(wǎng)頁的集合，其包括一個首頁和若干個分頁，這種集合不是簡單的集合。為了達到最佳效果，在創(chuàng)建任何 Web 站點頁面之前，要對站點的結(jié)構(gòu)進行設(shè)計和規(guī)劃。決定要創(chuàng)建多少頁，每頁上顯示什么內(nèi)容，頁面布局的外觀以及各頁是如何互相連接起來的。 我們可以通過把文件分門別類的放置在各自的文件夾里，使網(wǎng)站的結(jié)構(gòu)清晰明了，

9、便于管理和查找。,定義新站點,方法1： 窗口新建站點 注：默認圖像的文件夾images 方法2：文件面板 注：文件面板的應(yīng)用 1、本地視圖下拉的菜單 2、文件面板下可建立網(wǎng)頁，文件夾等 3、“展開與顯示遠端站點”按鈕的應(yīng)用,網(wǎng)站地圖的使用方法,文件夾的建立Flash，music, css等。如不需要可右擊刪除。 首頁index.html或default.html(右擊設(shè)為首頁) （注：一般一個網(wǎng)站只有一個首頁）,方便創(chuàng)建鏈接圖,Index.html,Index.html,blue.html,red.html,pink.html,black.html,定義遠程文件夾,需要設(shè)置一個遠程文件夾，以便

10、發(fā)布您的 Web 頁。遠程文件夾通常具有與本地文件夾相同的名稱，因為遠程站點通常完全就是本地站點的副本。也就是說，您發(fā)布到遠程文件夾的文件和子文件夾是本地創(chuàng)建的文件和子文件夾的副本。,利用模板快速制作一網(wǎng)頁,注：若沒有出現(xiàn)上面的界面可以用以下 編輯首選參數(shù)常規(guī)（顯示起始頁）重啟DW 先建站點入門頁面以餐飲（日歷）為例 做一個生活學(xué)習(xí)備忘日歷 注編碼改為UTF8,在您的遠程服務(wù)器上，在服務(wù)器的 Web 根文件夾中創(chuàng)建一個空文件夾。 將新的空文件夾命名為 與本地根文件夾的名稱相同,修改網(wǎng)頁標(biāo)題,查看顯示網(wǎng)頁標(biāo)題修改網(wǎng)頁標(biāo)題 右擊作為根查看,頁面屬性,必須先修改頁面屬性（Ctrl+J） 注意：1、必須在英文狀態(tài)下才能用快捷鍵 2、頁面屬性基于CSS樣式表（或 HTML） 字體的設(shè)置：注中文一般選用宋體，黑體，仿宋體，楷體。（字體不要太花俏，大約90%的網(wǎng)頁使用宋體） 字體的添加,頁面屬性,外觀 鏈接 標(biāo)題 36 24 18 16 標(biāo)題/編碼 跟蹤圖像,HTML基礎(chǔ), html語言的開始 文件頭部的開始 文件頭部的內(nèi)容 文件頭部的結(jié)束