網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件02.前端開發(fā)工具及流程_第1頁
網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件02.前端開發(fā)工具及流程_第2頁
網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件02.前端開發(fā)工具及流程_第3頁
網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件02.前端開發(fā)工具及流程_第4頁
網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）課件02.前端開發(fā)工具及流程_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目式教程（HTML+CSS）項(xiàng)目一Web前端開發(fā)基礎(chǔ)任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)1：常見的前端開發(fā)工具1．HBuilderX（1）編輯器——編輯文件的主要區(qū)域，可以在垂直和水平方向上并排打開任意數(shù)量的編輯器。（2）項(xiàng)目管理器——包含諸如資源管理器之類的不同視圖，可在處理項(xiàng)目提供幫助。（3）工具欄——顯示了常用工具。（4）狀態(tài)欄——有關(guān)打開的項(xiàng)目和編輯的文件的信息。（5）控制臺(tái)——可以在編輯器區(qū)域下方顯示不同的面板，以獲取輸出或調(diào)試信息，錯(cuò)誤和警告或集成終端。面板也可以向右移動(dòng)以獲得更多垂直空間。（6）迷你地圖——顯示在窗口右側(cè)，提供了源代碼的高級概述，這對于快速導(dǎo)航和理解代碼很有用。（7）預(yù)覽窗口——顯示了正在編輯的網(wǎng)頁預(yù)覽的結(jié)果。任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)1：常見的前端開發(fā)工具2．EditPlus任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)1：常見的前端開發(fā)工具3．AdobeDreamweaver任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)1：常見的前端開發(fā)工具4．SublimeText任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)1：常見的前端開發(fā)工具5．VisualStudioCode任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)2：瀏覽器工具IE瀏覽器Edge瀏覽器GoogleChrome瀏覽器MozillaFirefox瀏覽器Safari瀏覽器Opera瀏覽器任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)2：瀏覽器工具1．IE瀏覽器IE（InternetExplorer）是微軟公司推出的一款網(wǎng)頁瀏覽器。在IE7之前，將其直譯為“網(wǎng)絡(luò)探路者”，但在IE7之后官方便直接稱其為“IE瀏覽器”。在很長的一段時(shí)間內(nèi)，網(wǎng)頁普遍使用的技術(shù)，IE瀏覽器都是最快提供支持的瀏覽器，所以其網(wǎng)頁交互性更強(qiáng)，視覺效果更吸引人，競爭對手被遠(yuǎn)遠(yuǎn)甩下。但隨著Firefox、Chrome、Safari等瀏覽器的先后問世和不斷進(jìn)步，用戶有了對比和選擇，IE瀏覽器大量市場份額被搶占。目前，在Windows10中，微軟公司用Edge取代了IE。任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)2：瀏覽器工具2．Edge瀏覽器Edge瀏覽器是由微軟公司開發(fā)的一款現(xiàn)代瀏覽器，它于2015年推出，并在Windows10操作系統(tǒng)中取代了IE瀏覽器。Edge瀏覽器具備注重安全的瀏覽模式、實(shí)時(shí)筆記、閱讀器模式和集成的Cortana個(gè)人助手等功能。除此之外，Edge瀏覽器還具有流暢的無縫切換實(shí)驗(yàn)室功能，并且能夠?qū)⑺阉鹘Y(jié)果集成到瀏覽器的新標(biāo)簽頁中。任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)2：瀏覽器工具3．Chrome瀏覽器Chrome瀏覽器是一款由谷歌公司開發(fā)的網(wǎng)頁瀏覽器。它具有快速、簡單、安全等特點(diǎn)，并且支持多個(gè)平臺(tái)，包括Windows、macOS、Android和iOS。Chrome瀏覽器的特點(diǎn)之一是擁有強(qiáng)大的擴(kuò)展程序庫，用戶可以根據(jù)自己的需求自由地選擇和安裝各種擴(kuò)展程序。此外，谷歌公司還在不斷改進(jìn)其智能搜索功能，使用戶在搜索時(shí)可以更快、更準(zhǔn)確地找到所需信息。任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)2：瀏覽器工具4．Firefox瀏覽器Firefox瀏覽器是由Mozilla開發(fā)的一款自由、開源的瀏覽器。它提供了許多對用戶友好的功能，比如標(biāo)簽、書簽管理、廣告攔截等。Firefox瀏覽器的動(dòng)態(tài)主題功能是其最大的特點(diǎn)之一，它可以根據(jù)用戶選擇的背景圖片和顏色，自動(dòng)生成一個(gè)定制的瀏覽器主題。另外，F(xiàn)irefox也對用戶隱私極為重視，提供了多種隱私保護(hù)選項(xiàng)，比如私人瀏覽模式和追蹤保護(hù)功能等。任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)2：瀏覽器工具5．Safari瀏覽器Safari瀏覽器是由蘋果公司開發(fā)的一款瀏覽器，專為macOS和iOS設(shè)計(jì)。它的界面非常簡潔，功能也非常實(shí)用，支持標(biāo)簽定位、書簽、RSS訂閱等。Safari瀏覽器具有功能強(qiáng)大的閱讀模式，用戶可以在一些網(wǎng)頁的文字和圖片中將選擇的內(nèi)容分離出來，方便閱讀。此外，Safari瀏覽器還擁有一些獨(dú)特的功能，比如圖標(biāo)縮略圖、歷史記錄視覺化等。任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施新知學(xué)習(xí)2：瀏覽器工具6．Opera瀏覽器Opera瀏覽器是一款由挪威OperaSoftwareASA公司制作的支持多頁面標(biāo)簽式瀏覽的瀏覽器，可以在Windows、macOS和Linux這3個(gè)操作系統(tǒng)上運(yùn)行，它也是一款功能豐富、運(yùn)行速度快、安全可靠的瀏覽器。Opera瀏覽器的Turbo模式可以使瀏覽器在網(wǎng)絡(luò)速度較慢的情況下快速加載網(wǎng)頁。此外，Opera瀏覽器還具有多種用戶定制功能，可以對網(wǎng)頁樣式、字體大小、瀑布流式速度等進(jìn)行設(shè)置。任務(wù)1.3

前端開發(fā)工具項(xiàng)目實(shí)施知識(shí)拓展：Web工作原理用戶通過客戶端瀏覽器訪問Internet上的網(wǎng)站或者其他網(wǎng)絡(luò)資源時(shí)，通常需要在客戶端的瀏覽器的地址欄中輸入需要訪問的網(wǎng)站的URL，然后通過域名服務(wù)器進(jìn)行全球域名解析，并根據(jù)解析結(jié)果決定訪問指定IP地址（InternetPvotocoladdress）的網(wǎng)站或網(wǎng)頁。獲取網(wǎng)站IP地址后，客戶端瀏覽器向指定IP地址上的Web服務(wù)器發(fā)送一個(gè)HTTP請求；Web服務(wù)器響應(yīng)客戶端的請求，將用戶所需要的HTML文本、圖片和構(gòu)成該網(wǎng)頁的其他一切文件發(fā)送給用戶。任務(wù)1.4

前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)項(xiàng)目實(shí)施新知學(xué)習(xí)1：前端開發(fā)流程1．需求分析2．原型設(shè)計(jì)3．UI設(shè)計(jì)4．頁面編碼5．測試和調(diào)試6．發(fā)布和維護(hù)任務(wù)1.4

前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)項(xiàng)目實(shí)施新知學(xué)習(xí)2：HTML文檔的基本結(jié)構(gòu)一個(gè)HTML文檔由4個(gè)部分組成1．文檔聲明部分2．html標(biāo)簽對3．head標(biāo)簽對4．body標(biāo)簽對<!DOCTYPEhtml><html>

<head>

<!--頭部信息,如<title>標(biāo)簽定義的網(wǎng)頁標(biāo)題-->

</head>

<body>

<!--主體信息,包含網(wǎng)頁顯示的內(nèi)容-->

</body></html>任務(wù)1.4前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)項(xiàng)目實(shí)施操作實(shí)施1.創(chuàng)建項(xiàng)目打開HBuilderX，選擇“文件”菜單中的“新建”命令，選擇“1.項(xiàng)目”命令，在D盤根目錄下創(chuàng)建一個(gè)名為“new”的空項(xiàng)目任務(wù)1.4前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)項(xiàng)目實(shí)施操作實(shí)施2.創(chuàng)建html文件選擇“文件”菜單中的“新建”，點(diǎn)擊“html文件”。在彈出的“新建html文件”對話框中輸入文件名，單擊“創(chuàng)建”，創(chuàng)建一個(gè)空html文檔任務(wù)1.4前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)項(xiàng)目實(shí)施操作實(shí)施3.輸入頁面代碼<!DOCTYPEhtml><html> <head> <metacharset="utf-8">

<title>歡迎文檔</title> </head> <body>

<h1>歡迎</h1>

<h2>來到Web世界</h2> </body></html>任務(wù)1.4前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)項(xiàng)目實(shí)施操作實(shí)施4.保存并預(yù)覽頁面點(diǎn)擊工具欄中的“保存”按鈕保存，然后菜單中的“運(yùn)行”—“運(yùn)行到瀏覽器”選項(xiàng)，選擇要運(yùn)行的瀏覽器，預(yù)覽網(wǎng)頁顯示效果任務(wù)1.4前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)任務(wù)拓展利用所學(xué)，完成“靜夜思”網(wǎng)頁，效果如圖所示。完成“靜夜思”網(wǎng)頁任務(wù)1.4前端開發(fā)流程及HTML文檔的基本結(jié)構(gòu)小結(jié)延伸1.完成任務(wù)1.3的課后練習(xí)。2.完成任務(wù)1.4的課后練習(xí)。3.掃碼觀看任務(wù)2.1中的微課視頻，預(yù)習(xí)新課。任務(wù)小結(jié)課后延伸在本任務(wù)中介紹了常見的前端開發(fā)工具和常見瀏覽器，學(xué)習(xí)了

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(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ǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論