HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版（第2章）_第1頁
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版（第2章）_第2頁
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版（第2章）_第3頁
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版（第2章）_第4頁
HTML5+CSS3 Web前端設(shè)計(jì)基礎(chǔ)教程 第3版（第2章）_第5頁
已閱讀5頁，還剩23頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第2章本章除了介紹Dreamweaver的基本使用方法以外，還著重介紹HTML5的文檔結(jié)構(gòu)和常見標(biāo)簽等內(nèi)容。HTML5頁面的構(gòu)建與簡單控制2.1Dreamweaver的工作環(huán)境概述2.1.1界面介紹2.1Dreamweaver的工作環(huán)境概述2.1.2常用工具欄和面板1．工具欄圖2-2工具欄新版Dreamweaver的工具欄在整個(gè)操作界面的左側(cè)，如圖2-2所示，單擊按鈕可以在彈出的“自定義工具欄”對(duì)話框中，增加或減少按鈕的顯示。2.1Dreamweaver的工作環(huán)境概述2．屬性檢查器圖2-3屬性檢查器（選定對(duì)象為文本）圖2-4屬性檢查器（選定對(duì)象為圖像）2.1Dreamweaver的工作環(huán)境概述3．插入面板圖2-5HTML類別圖2-6表單類別圖2-7Bootstrap類別2.1Dreamweaver的工作環(huán)境概述4．CSS面板5．設(shè)置主、次瀏覽器圖2-9CSS面板

圖2-10設(shè)置主、次瀏覽器2.2創(chuàng)建和管理站點(diǎn)2.2.1創(chuàng)建站點(diǎn)進(jìn)行網(wǎng)頁制作的第一步就是創(chuàng)建本地站點(diǎn)，站點(diǎn)管理會(huì)讓用戶的工作變得簡單而富有成效，況且許多功能必須在站點(diǎn)中才能實(shí)現(xiàn)。總之，如果不是僅編輯需要的單個(gè)頁面，那么就必須創(chuàng)建站點(diǎn)。圖2-12站點(diǎn)設(shè)置對(duì)象圖2-13創(chuàng)建“MySite”站點(diǎn)2.2創(chuàng)建和管理站點(diǎn)2.2.2“文件”面板的使用方法1．新建文件夾和文件圖2-14右鍵菜單圖2-15新建文件夾圖2-16嵌套文件夾2.2創(chuàng)建和管理站點(diǎn)2.2.2“文件”面板的使用方法圖2-18站點(diǎn)內(nèi)的基本操作圖2-19更新文件2．站點(diǎn)內(nèi)的基本操作2.2創(chuàng)建和管理站點(diǎn)2.2.3管理站點(diǎn)圖2-20“管理站點(diǎn)”對(duì)話框2.3HbuilderX工作環(huán)境概述2.3.1HBuilderX的安裝與啟動(dòng)圖2-21HBuilderX工作環(huán)境2.3HbuilderX工作環(huán)境概述2.3.2使用HBuilderX創(chuàng)建項(xiàng)目圖2-22新建普通項(xiàng)目圖2-23編輯文檔2.3HbuilderX工作環(huán)境概述2.3.3安裝擴(kuò)展插件圖2-25安裝擴(kuò)展插件2.4HTML5入門2.4.1使用Dreamweaver構(gòu)建“H5標(biāo)準(zhǔn)頁面”圖2-21結(jié)構(gòu)示意圖2.4HTML5入門圖2-22標(biāo)簽1．標(biāo)簽的含義2．元素的含義3．屬性和值2.4HTML5入門2.4.2DOCTYPE文檔類型與基本結(jié)構(gòu)元素<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>鳳凰網(wǎng)</title><metacontent="鳳凰,鳳凰網(wǎng),鳳凰新媒體,鳳凰衛(wèi)視,鳳凰衛(wèi)視中文臺(tái),phoenix"name="keywords"/><metaname="description"content="鳳凰網(wǎng)是中國領(lǐng)先的綜合門戶網(wǎng)站，提供含文圖音視頻的全方位綜合新聞資訊、深度訪談、觀點(diǎn)評(píng)論、財(cái)經(jīng)產(chǎn)品等服務(wù)。"/><metacontent="index,follow"name="robots"/><metacontent="鳳凰網(wǎng)"name="author"/><metacontent="Copyright1999-2014..AllRightsReserved."name="copyright"/><scriptsrc="/20150625/fa.min.js"></script><linkhref="/index/72x72_2520ifeng.png"rel="apple-touch-icon"/></head>

<body></body></html>

2.4HTML5入門

1．DOCTYPE文檔類型以下是HTML5的DOCTYPE聲明：<!doctypehtml>以下是XHTML的DOCTYPE聲明：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">以下是HTML4.01的DOCTYPE聲明：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">2.4HTML5入門

2．基本結(jié)構(gòu)元素——html元素3．基本結(jié)構(gòu)元素——head元素、title元素、meta元素、script元素、link元素（3）script元素（4）link元素（1）title元素圖2-28title元素預(yù)覽效果（2）meta元素name屬性：http-equiv屬性2.4HTML5入門2.4.3HTML5常見元素

1．標(biāo)題元素（塊級(jí)元素）圖2-29標(biāo)題元素預(yù)覽效果2.4HTML5入門2．段落元素（塊級(jí)元素）

圖2-30段落元素預(yù)覽效果2.4HTML5入門3．img元素（內(nèi)聯(lián)元素）

圖2-33

img元素預(yù)覽效果2.4HTML5入門4．a(chǎn)元素（內(nèi)聯(lián)元素）

內(nèi)部鏈接：這種鏈接的目標(biāo)是本站點(diǎn)中的其他文檔。利用這種鏈接，可以在本站點(diǎn)內(nèi)的頁面中相互跳轉(zhuǎn)。郵件鏈接：這種鏈接可以啟動(dòng)電子郵件程序書寫郵件，并發(fā)送到指定地址。外部鏈接：這種鏈接目標(biāo)是互聯(lián)網(wǎng)中的某個(gè)頁面。利用這種鏈接，可以跳轉(zhuǎn)到其他的網(wǎng)站上。錨點(diǎn)鏈接：這種鏈接的目標(biāo)是文檔中的命名錨記。利用這種鏈接，可以跳轉(zhuǎn)到當(dāng)前文檔或其他文檔的某一指定位置。圖2-34a元素預(yù)覽效果2.4HTML5入門5．列表元素ul、ol、dl（塊級(jí)元素）

圖2-35a元素預(yù)覽效果HTML中常見的列表元素有ul元素（無序列表）、ol元素（有序列表）、dl元素（自定義列表）和li元素（列表項(xiàng)）。2.4HTML5入門6．div元素（塊級(jí)元素）和span元素（內(nèi)聯(lián)元素）

圖2-36div元素和span元素預(yù)覽效果2.4HTML5入門7．table元素（塊級(jí)元素）

圖2-37table元素預(yù)覽效果（1）border屬性（2）caption元素（3）scope屬性2.4HTML5入門8．video元素（內(nèi)聯(lián)元素）和audio元素（內(nèi)聯(lián)元素）（1）video元素（2）audio元素圖2-38video元素和au

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論