HTML5+CSS3 Web前端開發(fā)技術(shù)（任務(wù)式）課件 01任務(wù)實(shí)施_第1頁(yè)
HTML5+CSS3 Web前端開發(fā)技術(shù)（任務(wù)式）課件 01任務(wù)實(shí)施_第2頁(yè)
HTML5+CSS3 Web前端開發(fā)技術(shù)（任務(wù)式）課件 01任務(wù)實(shí)施_第3頁(yè)
HTML5+CSS3 Web前端開發(fā)技術(shù)（任務(wù)式）課件 01任務(wù)實(shí)施_第4頁(yè)
HTML5+CSS3 Web前端開發(fā)技術(shù)（任務(wù)式）課件 01任務(wù)實(shí)施_第5頁(yè)
已閱讀5頁(yè)，還剩24頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

HTML5+CSS3Web前端開發(fā)技術(shù)知識(shí)圖譜01搭建項(xiàng)目開發(fā)環(huán)境任務(wù)01.安裝Chrome瀏覽器02.安裝HBuilderX開發(fā)IDE03.使用HBuilderX創(chuàng)建項(xiàng)目安裝Chrome瀏覽器01任務(wù)要求完成Chrome瀏覽器的安裝修改默認(rèn)搜索引擎為百度搜索設(shè)置Chrome瀏覽器為默認(rèn)瀏覽器任務(wù)實(shí)施（1）獲取Chrome瀏覽器的安裝文件。使用本機(jī)已經(jīng)安裝的瀏覽器（例如Windows系統(tǒng)自帶的IE瀏覽器或者Edge瀏覽器）打開Chrome瀏覽器官方網(wǎng)站，下載Chrome瀏覽器。單擊“下載Chrome”按鈕后，將會(huì)從網(wǎng)絡(luò)上下載名為ChromeSetup.exe的可執(zhí)行安裝文件。任務(wù)實(shí)施（2）執(zhí)行安裝過(guò)程。打開安裝文件進(jìn)行Chrome瀏覽器的安裝，安裝過(guò)程為靜默安裝，無(wú)須進(jìn)行任何配置。安裝程序會(huì)在桌面創(chuàng)建一個(gè)Chrome瀏覽器的快捷方式，待安裝程序正常結(jié)束后，Chrome瀏覽器會(huì)自動(dòng)打開并顯示歡迎頁(yè)面，這表明Chrome瀏覽器已正確安裝。任務(wù)實(shí)施（3）將Chrome瀏覽器設(shè)置為默認(rèn)瀏覽器。單擊瀏覽器窗口右上角的菜單按鈕，從下拉菜單中選擇“設(shè)置”選項(xiàng)，打開設(shè)置頁(yè)面。從左側(cè)列表中選擇“默認(rèn)瀏覽器”選項(xiàng)，然后在右側(cè)單擊“設(shè)為默認(rèn)選項(xiàng)”按鈕。操作視頻安裝HBuilderX

IDE02任務(wù)要求完成HBuilderX

IDE的安裝任務(wù)實(shí)施下載HBuilderXWindows標(biāo)準(zhǔn)版使用本機(jī)已經(jīng)安裝的瀏覽器打開HBuilderX官方網(wǎng)站(https://www.dcloud.io/hbuilderx.html)下載頁(yè)面，單擊頁(yè)面中的“DOWNLOAD”按鈕下載HBuilderX壓縮包。這里我們選擇下載正式版中的Windows標(biāo)準(zhǔn)版。任務(wù)實(shí)施2.解壓HBuilderX到指定目錄使用解壓軟件將該壓縮包解壓到想要存放的路徑即可，這里我們將壓縮包內(nèi)的HBuilderX文件夾解壓到路徑C:\ProgramFiles\下。然后進(jìn)入HBuilderX目錄內(nèi)，選中HBuilderX.exe文件，單擊鼠標(biāo)右鍵，彈出快捷菜單，選擇“固定到‘開始’屏幕”命令或者“發(fā)送”-“桌面快捷方式”命令。這樣以后就可以通過(guò)“開始”菜單或者桌面快捷方式打開HbuilderX了。任務(wù)實(shí)施3.設(shè)置HBuilderX.exe兼容性為以管理員身份運(yùn)行為HbuilderX的執(zhí)行文件添加管理員權(quán)限。選中HBuilderX.exe文件，單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“屬性”命令，在打開的對(duì)話框中單擊“兼容性”選項(xiàng)卡，勾選“以管理員身份運(yùn)行此程序”復(fù)選框。任務(wù)實(shí)施3.設(shè)置HBuilderX.exe兼容性為以管理員身份運(yùn)行運(yùn)行HbuilderX，打開HbuilderX界面，通過(guò)菜單欄中的“工具”-“主題”選項(xiàng)可以將界面主題改為自己喜歡的風(fēng)格。任務(wù)實(shí)施3.設(shè)置HBuilderX.exe兼容性為以管理員身份運(yùn)行選擇菜單欄中的“工具”-“插件安裝”，在彈出的插件管理界面中找到“內(nèi)置瀏覽器”，單擊“內(nèi)置瀏覽器，支持邊改邊預(yù)覽”下方的“安裝”按鈕，進(jìn)行HBuilderX內(nèi)置瀏覽器安裝。該插件的作用是支持頁(yè)面效果的實(shí)時(shí)顯示。任務(wù)實(shí)施HbuilderX界面簡(jiǎn)介:HbuilderX界面上方區(qū)域?yàn)椴藛螜冢牟藛稳缦??！拔募辈藛危哼M(jìn)行文件的打開、保存、另存為、打開文件目錄、設(shè)定文件字符編碼等操作?！熬庉嫛辈藛危哼M(jìn)行文本內(nèi)容的批量修改、復(fù)制、粘貼、縮進(jìn)、轉(zhuǎn)義等操作?！斑x擇”菜單：進(jìn)行編輯區(qū)域內(nèi)容的選中操作?！安檎摇辈藛危哼M(jìn)行文件內(nèi)容的查找與替換操作。“跳轉(zhuǎn)”菜單：進(jìn)行控制光標(biāo)位置移動(dòng)的高級(jí)操作?！斑\(yùn)行”菜單：讓程序在不同的環(huán)境中進(jìn)行運(yùn)行模擬。“發(fā)布”菜單：將項(xiàng)目進(jìn)行網(wǎng)絡(luò)提交。“視圖”菜單：設(shè)定編輯器外觀與進(jìn)行部分內(nèi)容區(qū)域調(diào)整?！肮ぞ摺辈藛危很浖脑O(shè)置與插件的安裝管理。“幫助”菜單：軟件的更新與版本說(shuō)明等內(nèi)容。界面左側(cè)為文檔結(jié)構(gòu)目錄，展示相關(guān)文件、文件夾目錄結(jié)構(gòu)。在對(duì)應(yīng)的文件或文件夾上單擊鼠標(biāo)右鍵可以彈出快捷菜單，進(jìn)行多種快捷操作。界面右側(cè)為代碼編輯區(qū)域，HBuilderX編輯區(qū)默認(rèn)支持代碼自動(dòng)識(shí)別提示功能、自動(dòng)縮進(jìn)、自動(dòng)符號(hào)補(bǔ)全。界面下方區(qū)域?yàn)槲臋n狀態(tài)欄，提示開發(fā)者相關(guān)文檔設(shè)置。操作視頻使用HBuilderX創(chuàng)建項(xiàng)目03任務(wù)要求（1）在HBuilder工具中創(chuàng)建新云課堂項(xiàng)目目錄。（2）在項(xiàng)目目錄的根路徑創(chuàng)建index.html文件。（3）編寫測(cè)試頁(yè)面內(nèi)容，并使用內(nèi)置瀏覽器插件預(yù)覽，驗(yàn)證環(huán)境是否搭建成功。任務(wù)實(shí)施1.創(chuàng)建新云課堂項(xiàng)目單擊界面菜單欄中的“文件”-“新建”-“1.項(xiàng)目”選項(xiàng)，創(chuàng)建一個(gè)項(xiàng)目名稱為“NOC"空項(xiàng)目。

新建項(xiàng)目

創(chuàng)建一個(gè)項(xiàng)目名稱為“NOC"空項(xiàng)目在“NOC"項(xiàng)目文件夾上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建”命令，新建目錄，將目錄名稱設(shè)定為1。任務(wù)實(shí)施2.創(chuàng)建index.html文件在新建的目錄上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“新建”-“7.html文件”命令,創(chuàng)建項(xiàng)目中的index.html文件。任務(wù)實(shí)施3.編寫測(cè)試頁(yè)面內(nèi)容選擇菜單欄中的“編輯”-“縮進(jìn)”選項(xiàng)，勾選“按下Tab時(shí)使用空格代替制表符”與“Tab寬度：4個(gè)空格”選項(xiàng)，再單擊“將Tab轉(zhuǎn)成空格”選項(xiàng)，將頁(yè)面中的制表符更換為4個(gè)空格，這樣操作之后每次按下【Tab】鍵，將會(huì)自動(dòng)更換為4個(gè)空格輸入。任務(wù)實(shí)施在index.html文件中填入如下內(nèi)容：<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>頁(yè)面測(cè)試</title></head><body><h1>Hi！歡迎你進(jìn)入新云課堂開啟在線學(xué)習(xí)之旅</h1></body></html>任務(wù)實(shí)施檢查輸入內(nèi)容是否正確，確保輸入無(wú)誤，按【ctrl+S】組合鍵保存文件修改，一個(gè)簡(jiǎn)單頁(yè)面就制作完畢。然后使用瀏覽器運(yùn)行查看我們的頁(yè)面結(jié)果。找到項(xiàng)目創(chuàng)建時(shí)所設(shè)定的項(xiàng)目目錄的路徑，使用Chrome瀏覽器打開index.h

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝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)論