HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：配置工作環(huán)境_第1頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：配置工作環(huán)境_第2頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：配置工作環(huán)境_第3頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：配置工作環(huán)境_第4頁
HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：配置工作環(huán)境_第5頁
已閱讀5頁，還剩15頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作配置工作環(huán)境項(xiàng)目將通過“制作一個(gè)D清單網(wǎng)頁廣告單頁”項(xiàng)目，即通過制作一個(gè)HTML頁面來承載網(wǎng)頁制作知識，完成網(wǎng)頁開發(fā)環(huán)境搭建、HTML5標(biāo)簽、CSS3疊層樣式和響應(yīng)式布局等的學(xué)習(xí)。項(xiàng)目目標(biāo)D清單是某公司推出的一款跨平臺同步的待辦事項(xiàng)和任務(wù)提醒軟件,旨在協(xié)助您完成待辦事務(wù)比如生日提醒,旅行安排,會議準(zhǔn)備等以便更好的進(jìn)行時(shí)間和事項(xiàng)管理。為了方便D清單應(yīng)用的推廣，其公司需要制作一個(gè)該應(yīng)用產(chǎn)品的介紹網(wǎng)頁。該頁面主要用于手機(jī)端進(jìn)行分享推廣，同時(shí)也要求能夠在電腦端進(jìn)行訪問。前端工程師小王所在的科技公司已經(jīng)拿到了設(shè)計(jì)稿，如圖1所示。主管希望他擔(dān)任本次項(xiàng)目的前端工作，開發(fā)完成后將成果交付給程序員完成邏輯制作、測試和發(fā)布。項(xiàng)目情境圖1-1-1項(xiàng)目移動端和電腦端頁面截圖網(wǎng)頁制作的一般流程如下：項(xiàng)目分析項(xiàng)目發(fā)布需求分析規(guī)劃設(shè)計(jì)實(shí)施測試交付根據(jù)“移動優(yōu)先”原則，我們需要制定項(xiàng)目完成的計(jì)劃：項(xiàng)目分析時(shí)間段1時(shí)間段2時(shí)間段3時(shí)間段4時(shí)間段5分析規(guī)劃實(shí)施階段1移動端內(nèi)容制作階段2移動端格式制作階段3響應(yīng)式制作測試與交付D清單前端開發(fā)甘特圖時(shí)間進(jìn)度任務(wù)制作網(wǎng)頁內(nèi)容能夠表述常見的網(wǎng)頁開發(fā)工具。能夠下載和安裝VisualStudioCode軟件，并進(jìn)行中文設(shè)置。能夠簡單使用VisualStudioCode軟件編寫HTML網(wǎng)頁文件。任務(wù)目標(biāo)配置工作環(huán)境為完成酒店宣傳單頁網(wǎng)頁內(nèi)容的制作，我們要安裝專業(yè)的開發(fā)工具，以提高開發(fā)效率。本次任務(wù)我們要求配置VisualStudioCode軟件的開發(fā)工作環(huán)境，并簡單使用軟件編寫代碼。任務(wù)描述配置工作環(huán)境為了完成工作環(huán)境的配置和軟件操作，需要：認(rèn)識HTML和常見的網(wǎng)頁開發(fā)工具。選擇開發(fā)工具并下載安裝。配置軟件和熟悉操作界面，進(jìn)行簡單代碼編寫以測試軟件安裝成功與否。任務(wù)分析配置工作環(huán)境知識與技能準(zhǔn)備HTML（HyperTextMarkupLanguange），稱為超文本標(biāo)記語言，是一種描述語言，主要用于描述超文本中內(nèi)容的顯示方式。1、認(rèn)識HTML5知識與技能準(zhǔn)備產(chǎn)生HTML文件的方式有兩種：一種使用記事本手工編寫HTML文件；另一種是使用HTML編輯器。2、HTMl5網(wǎng)頁的開發(fā)環(huán)境打開記事本，輸入如下HTML代碼（注意代碼格式縮進(jìn)）：課堂練習(xí)1-1-1使用記事本編寫HTML5123456789<html><head><metacharset="utf-8">

<title>我的網(wǎng)頁</title></head><body><p>這是用記事本制作的第一個(gè)網(wǎng)頁</p></body></html>任務(wù)實(shí)施1、VisualStudioCode軟件下載和安裝圖1-1-2VisualStudioCode官網(wǎng)下載頁面截圖任務(wù)實(shí)施2、軟件中文語言設(shè)置圖1-1-3VisualStudioCode軟件界面圖1-1-4搜索框任務(wù)實(shí)施3、軟件使用介紹圖1-1-5VisualStudioCode軟件界面圖1-1-6主命令面板任務(wù)實(shí)施3、軟件使用介紹表1編輯器及窗口常用快捷鍵功能快捷鍵功能快捷鍵顯示/隱藏側(cè)邊欄Ctrl+B切出一個(gè)新的編輯界面Ctrl+\打開新窗口Ctrl+Shift+N在各個(gè)編輯界面之間切換Ctrl+1、Ctrl+2、Ctrl+3關(guān)閉窗口Ctrl+Shift+W關(guān)閉編輯器Ctrl+F4新建文件Ctrl+N查找Ctrl+F打開文件Ctrl+O查找替換Ctrl+H在歷史打開的文件之間切換Ctrl+Tab整個(gè)文件夾搜索Ctrl+Shift+F任務(wù)實(shí)施4、使用VisualStudioCode軟件編寫HTML文件圖1-1-7使用VisualStudioCode編寫代碼

好的開發(fā)工具能讓你更好的去開發(fā)，無論是前端還是后端，都需要用到編輯器，常見的HTML5

溫馨提示

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

提交評論