Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)1、2 搭建開發(fā)環(huán)境、文字與段落排版_第1頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)1、2 搭建開發(fā)環(huán)境、文字與段落排版_第2頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)1、2 搭建開發(fā)環(huán)境、文字與段落排版_第3頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)1、2 搭建開發(fā)環(huán)境、文字與段落排版_第4頁(yè)
Web前端開發(fā)任務(wù)驅(qū)動(dòng)式教程（HTML5+CSS3+JavaScript）（汪嬋嬋第2版）課件 任務(wù)1、2 搭建開發(fā)環(huán)境、文字與段落排版_第5頁(yè)
已閱讀5頁(yè)，還剩40頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

Web前端開發(fā)What？Why？How？線上平臺(tái)成績(jī)構(gòu)成線上成績(jī)50%線下成績(jī)50%過程性考核30%終結(jié)性考核20%過程性考核25%終結(jié)性考核25%

視頻觀看占5%線上考試課堂考勤占5%期末作品

作業(yè)成績(jī)占10%作業(yè)及課堂表現(xiàn)占5%

測(cè)驗(yàn)成績(jī)占10%階段性考核占15%

發(fā)帖討論成績(jī)占5%

任務(wù)1搭建開發(fā)環(huán)境主講老師：汪嬋嬋第一單元 Web基礎(chǔ)知識(shí)網(wǎng)頁(yè)文件的創(chuàng)建和保存Web的工作原理網(wǎng)頁(yè)開發(fā)環(huán)境的搭建站點(diǎn)的創(chuàng)建和管理掌握學(xué)習(xí)目標(biāo)Web的類型了解:學(xué)習(xí)目標(biāo)實(shí)戰(zhàn)演練——搭建開發(fā)環(huán)境強(qiáng)化訓(xùn)練——?jiǎng)?chuàng)建第一個(gè)HTML5頁(yè)面任務(wù)目標(biāo)1.什么是Internet？什么是Web？Internet：是一個(gè)全球性的計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)，又稱“因特網(wǎng)”、“互聯(lián)網(wǎng)”，它是世界上規(guī)模最大的計(jì)算機(jī)網(wǎng)絡(luò)。Web：是用戶登錄Internet后最常用的功能。Web頁(yè)又稱網(wǎng)頁(yè)，一般都包含圖像、文字和超鏈接等元素。知識(shí)準(zhǔn)備服務(wù)器（Server）：監(jiān)聽客戶端連接請(qǐng)求、接收請(qǐng)求，返回響應(yīng)內(nèi)容通信協(xié)議（Http）：超文本傳輸協(xié)議，定義Web服務(wù)器和客戶端的通訊細(xì)節(jié)工作模式：瀏覽器/服務(wù)器（B/S）2.Web的工作原理瀏覽器（Browser）：客戶端用于訪問網(wǎng)頁(yè)的主要軟件知識(shí)準(zhǔn)備2.Web的工作原理Web服務(wù)器知識(shí)準(zhǔn)備靜態(tài)網(wǎng)頁(yè)：標(biāo)準(zhǔn)的HTML文件，采用HTML（超本文標(biāo)記語言）編寫，通過HTTP（超文本傳輸協(xié)議）在服務(wù)器端和客戶端之間傳輸?shù)募兾谋疚募瑪U(kuò)展名為.html或.htm。知識(shí)準(zhǔn)備3.Web的類型按技術(shù)分：3.Web的類型動(dòng)態(tài)網(wǎng)頁(yè)：指網(wǎng)頁(yè)文件里包含了程序代碼，通過后臺(tái)數(shù)據(jù)庫(kù)與Web服務(wù)器的信息交互，由后臺(tái)數(shù)據(jù)庫(kù)提供實(shí)時(shí)數(shù)據(jù)更新和數(shù)據(jù)查詢服務(wù)。動(dòng)態(tài)網(wǎng)頁(yè)能夠根據(jù)不同時(shí)間和不同訪問者而顯示不同內(nèi)容，可由ASP、PHP、JSP等技術(shù)編寫。按技術(shù)分：知識(shí)準(zhǔn)備3.Web的類型主頁(yè)（HomePage）：訪問網(wǎng)站時(shí)看到的第一頁(yè)，即首頁(yè)。主頁(yè)的名稱是特定的，一般為index.html、default.html、default.aspx或index.aspx等。按網(wǎng)頁(yè)在網(wǎng)站中的位置分：內(nèi)頁(yè)（WebPage）：指與主頁(yè)相鏈接的其他頁(yè)面，即網(wǎng)站內(nèi)部的頁(yè)面。知識(shí)準(zhǔn)備HTML5：超文本標(biāo)記語言（HyperTextMarkupLanguage）的第5代版本優(yōu)勢(shì)：標(biāo)準(zhǔn)化，解決了跨瀏覽器問題，具備良好的跨平臺(tái)性能4.HTML5概述知識(shí)準(zhǔn)備案例描述：1.安裝網(wǎng)頁(yè)編輯軟件2.安裝瀏覽器搭建開發(fā)環(huán)境實(shí)戰(zhàn)演練案例描述：1.創(chuàng)建和管理站點(diǎn)2.創(chuàng)建和保存HTML5文檔創(chuàng)建第一個(gè)HTML5頁(yè)面強(qiáng)化訓(xùn)練01Web的工作原理02網(wǎng)頁(yè)開發(fā)環(huán)境的搭建03站點(diǎn)的創(chuàng)建和管理04網(wǎng)頁(yè)文件的創(chuàng)建和保存任務(wù)小結(jié)用記事本軟件編寫并保存以下代碼，將其后綴名“.txt”改為“.html”，用谷歌瀏覽器瀏覽網(wǎng)頁(yè)效果。課后實(shí)訓(xùn)任務(wù)2文字與段落排版第二單元HTML5語言基礎(chǔ)學(xué)習(xí)目標(biāo)分隔標(biāo)簽標(biāo)簽標(biāo)簽屬性文本標(biāo)簽掌握序列標(biāo)簽文字段落排版的基本規(guī)則了解:學(xué)習(xí)目標(biāo)實(shí)戰(zhàn)演練——制作科技館參觀須知頁(yè)面強(qiáng)化訓(xùn)練——制作“我家菜館”點(diǎn)菜單頁(yè)面任務(wù)目標(biāo)1.HTML5文檔格式<!doctypehtml><html><head><metacharset="utf-8"><title>我的網(wǎng)頁(yè)</title></head><body>我的第一張網(wǎng)頁(yè)。</body></html>向?yàn)g覽器聲明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范標(biāo)志HTML文檔的開始標(biāo)志HTML文檔的結(jié)束頭部標(biāo)簽一般用于描述瀏覽器所需的信息定義網(wǎng)頁(yè)顯示的內(nèi)容定義HTML文檔的標(biāo)題知識(shí)準(zhǔn)備2.標(biāo)簽的屬性語法格式：<標(biāo)簽名屬性1=”屬性值1”屬性2=”屬性值2”…>內(nèi)容</標(biāo)簽名><body>標(biāo)簽的常用屬性：屬性描述屬性描述alink鼠標(biāo)點(diǎn)擊超鏈接時(shí)的顏色bgcolor網(wǎng)頁(yè)的背景顏色link未訪問過的超鏈接顏色background網(wǎng)頁(yè)的背景圖像vlink已訪問過的超鏈接顏色leftmargin網(wǎng)頁(yè)的左邊距text所有文本的顏色topmargin網(wǎng)頁(yè)的上邊距知識(shí)準(zhǔn)備示例：利用body的屬性設(shè)置網(wǎng)頁(yè)效果<!doctypehtml><html><head><metacharset="utf-8"><title>利用body的屬性設(shè)置網(wǎng)頁(yè)效果</title></head><bodyleftmargin="80"topmargin="50"text="green"bgcolor="#CCCCFF">利用body的屬性設(shè)置網(wǎng)頁(yè)效果：頁(yè)面左邊距為80像素，上邊距為50像素，文本顏色為綠色，背景顏色值為“#CCCCFF”。</body></html>知識(shí)準(zhǔn)備3.文本標(biāo)簽標(biāo)題標(biāo)簽：網(wǎng)頁(yè)內(nèi)的文字標(biāo)題，在頁(yè)面中可以使用<h1>到<h6>標(biāo)簽設(shè)置各級(jí)標(biāo)題。從1級(jí)到6級(jí)，標(biāo)題字體大小依次遞減，同時(shí)文字加粗。align（對(duì)齊）屬性：屬性描述屬性描述left左對(duì)齊（默認(rèn)值）right右對(duì)齊center水平居中justify兩端對(duì)齊知識(shí)準(zhǔn)備示例：標(biāo)題標(biāo)簽的使用<!doctypehtml><html><head><metacharset="utf-8"><title>設(shè)置各級(jí)標(biāo)題標(biāo)簽</title></head><body><h1>一級(jí)標(biāo)題文字</h1><h2>二級(jí)標(biāo)題文字</h2><h3>三級(jí)標(biāo)題文字</h3><h4>四級(jí)標(biāo)題文字</h4><h5>五級(jí)標(biāo)題文字</h5><h6>六級(jí)標(biāo)題文字</h6></body></html><h1align="center">一級(jí)標(biāo)題文字</h1><h2align="left">二級(jí)標(biāo)題文字</h2><h3align="right">三級(jí)標(biāo)題文字</h3>知識(shí)準(zhǔn)備3.文本標(biāo)簽文字修飾標(biāo)簽：為文字添加修飾，使得文字的格式能有多種樣式的變化。如為文字設(shè)置粗體，就可以使用B標(biāo)簽，語法格式為：<B>被修飾文字</B>常用的文字修飾標(biāo)簽：標(biāo)簽呈現(xiàn)結(jié)果標(biāo)簽呈現(xiàn)結(jié)果<B>粗體<STRONG>強(qiáng)調(diào)文本<INS>下畫線<I>斜體<SUP>上標(biāo)<SUB>下標(biāo)<DEL>刪除線

知識(shí)準(zhǔn)備示例：文字修飾綜合范例<!doctypehtml><html><head><metacharset="utf-8"><title>文字修飾綜合范例</title></head><body><p>默認(rèn)的格式</p>

<!--<p></p>標(biāo)簽表示段落標(biāo)簽--><p><B>此行文字顯示為粗體</B></p><p><STRONG>此行文字為強(qiáng)調(diào)文本</STRONG></p><p><INS>此行文字有下劃線</INS></p><p><I>此行文字顯示為斜體</I></p><p>此處2為上標(biāo)：3<SUP>2</SUP></p><p>此處2為下標(biāo)：S<SUB>2</SUB></p><p><DEL>此行文字有刪除線</DEL></p></body></html>注釋標(biāo)記。用于標(biāo)注一些便于閱讀和理解但又不需要顯示在頁(yè)面中的注釋文字。知識(shí)準(zhǔn)備3.文本標(biāo)簽特殊字符：在代碼中有特殊用途的符號(hào)，如需在網(wǎng)頁(yè)中顯示該類符號(hào)，是需要在代碼中通過特殊編碼來實(shí)現(xiàn)的。常用的特殊字符：標(biāo)簽呈現(xiàn)結(jié)果標(biāo)簽呈現(xiàn)結(jié)果

代表一個(gè)不斷行空白<<

>>

&&""

知識(shí)準(zhǔn)備4.分隔標(biāo)簽段落標(biāo)簽<p>…</p>：在段落前后加上額外的空行。基本格式：<palign="left|center|right|justify">文字</p>

屬性align用來設(shè)置段落文字在網(wǎng)頁(yè)上的對(duì)齊方式：left（左對(duì)齊）、center（居中）、right（右對(duì)齊）和justify（兩端對(duì)齊），默認(rèn)為left。格式中的“|”表示“或者”，即多項(xiàng)選其一。知識(shí)準(zhǔn)備示例：段落標(biāo)簽應(yīng)用案例<!doctypehtml><html><head><metacharset="utf-8"><title>段落標(biāo)簽應(yīng)用案例</title></head><body><p>文字如需分段，可使用段落標(biāo)簽。</p><palign="left">段落標(biāo)簽中可設(shè)置左對(duì)齊的屬性。</p><palign="center">段落標(biāo)簽中可設(shè)置居中對(duì)齊的屬性。</p><palign="right">段落標(biāo)簽中可設(shè)置右對(duì)齊的屬性。</p><palign="justify">段落標(biāo)簽中可設(shè)置兩端對(duì)齊的屬性。</p></body></html>知識(shí)準(zhǔn)備4.分隔標(biāo)簽換行標(biāo)簽<br>：強(qiáng)制文本換行（但不會(huì)在行與行之間留下空行）。一個(gè)換行使用一個(gè)<br>，多個(gè)換行可以連續(xù)使用多個(gè)<br>標(biāo)簽?；靖袷剑何淖?lt;br>提示：HTML標(biāo)簽分為兩大類，一類是雙標(biāo)簽，由開始和結(jié)束兩個(gè)標(biāo)簽符組成的標(biāo)簽，如<body></body>；另一類是單標(biāo)簽，是指用一個(gè)標(biāo)簽符號(hào)即可完整的描述某個(gè)功能的標(biāo)簽，如<br>。在HTML5中，單標(biāo)簽不再要求自閉合。知識(shí)準(zhǔn)備示例：換行標(biāo)簽應(yīng)用案例<!doctypehtml><html><head><metacharset="utf-8"><title>換行標(biāo)簽應(yīng)用案例</title></head><body><p>靜夜思</p><p>作者：李白</p>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉(xiāng)。</body></html>知識(shí)準(zhǔn)備4.分隔標(biāo)簽水平線標(biāo)簽<hr>：可以作為段落與段落之間的分隔線?；靖袷剑?lt;hralign=

"left|center|right"size="分隔線粗細(xì)"

width=

"分隔線長(zhǎng)度"

color=

"分隔線顏色">

屬性size設(shè)定分隔線的粗細(xì)，默認(rèn)值為2像素。屬性width設(shè)定水平線的長(zhǎng)度，可以是絕對(duì)值（以像素為單位）或相對(duì)值（相對(duì)于窗口的百分比）。屬性color設(shè)定水平線的顏色，以“#”引導(dǎo)的十六進(jìn)制代碼，或色彩的英文名稱。知識(shí)準(zhǔn)備示例：水平線標(biāo)簽應(yīng)用案例<!doctypehtml><html><head><metacharset="utf-8"><title>水平線標(biāo)簽應(yīng)用案例</title></head><body><p>靜夜思</p><hrwidth="100px"size="3px"color="#FF0000"align="left"><p>作者：李白</p>床前明月光，<br>疑是地上霜。<br>舉頭望明月，<br>低頭思故鄉(xiāng)。</body></html>

提示：水平線的顏色效果需要在瀏覽器中瀏覽才能顯示，在Dreamweaver編輯器的設(shè)計(jì)視圖中無法顯示。知識(shí)準(zhǔn)備5.序列標(biāo)簽無序列表：各個(gè)列表項(xiàng)之間沒有順序級(jí)別之分，通常是并列的?；靖袷剑?lt;ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>……</ul>知識(shí)準(zhǔn)備示例：無序列表應(yīng)用案例<!doctypehtml><html><head><metacharset="utf-8"><title>無序列表應(yīng)用案例</title></head><body><ul><li>進(jìn)口食品</li><li>美容洗護(hù)</li><li>家具家電</li><li>母嬰用品</li></ul></body></html>提示：在HTML5中不再支持<ul>的t

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論