HTML5+CSS3網頁設計與制作課件:配置工作環境_第1頁
HTML5+CSS3網頁設計與制作課件:配置工作環境_第2頁
HTML5+CSS3網頁設計與制作課件:配置工作環境_第3頁
HTML5+CSS3網頁設計與制作課件:配置工作環境_第4頁
HTML5+CSS3網頁設計與制作課件:配置工作環境_第5頁
已閱讀5頁,還剩15頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

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

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

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

溫馨提示

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

評論

0/150

提交評論