任務(wù)1.1　工作環(huán)境準(zhǔn)備

?學(xué)習(xí)目標(biāo)

①能夠陳述常用的Web前端開發(fā)軟件及其優(yōu)缺點(diǎn)：Adobe Dreamweaver、Visual Studio Code、Sublime Text 3、Notepad++、HBuilder等。

②能夠根據(jù)系統(tǒng)環(huán)境選擇合適的開發(fā)軟件。

?任務(wù)描述

下載Visual Studio Code軟件安裝程序，按照說明文檔的安裝指引，將Visual Studio Code軟件安裝到自己的客戶端。

?知識學(xué)習(xí)與課堂練習(xí)

網(wǎng)頁開發(fā)工具有很多，可以使用任何能夠生成TXT類型源文件的文本編輯來產(chǎn)生頁面文件，因此記事本也可以作為網(wǎng)頁開發(fā)工具。

【課堂練習(xí)1.1-1】使用記事本制作一個網(wǎng)頁。

①打開記事本，輸入如下標(biāo)簽（注意代碼格式縮進(jìn)）：

②將記事本保存到桌面：保持類型為“所有文件（*.*）”，文件名為“index.html”，第一個靜態(tài)網(wǎng)頁制作完成。

③雙擊桌面上的“index.html”文件，瀏覽器打開的網(wǎng)頁顯示效果如圖1.1-1所示。

記事本是最基礎(chǔ)的網(wǎng)頁開發(fā)工具。為了提高網(wǎng)頁編寫效率，很多公司開發(fā)了網(wǎng)頁輔助開發(fā)軟件，以提高網(wǎng)頁開發(fā)的效率。

下面介紹一些常用的Web前端開發(fā)軟件：

1.Adobe Dreamweaver

Adobe Dreamweaver，簡稱DW，中文名稱為“夢想編織者”，是集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得網(wǎng)頁編輯器，DW是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。

2.Visual Studio Code

Visual Studio Code（簡稱VS Code / VSC）是微軟公司推出的一款免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號匹配、代碼片段、代碼對比Diff、GIT等特性，支持插件擴(kuò)展，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持Windows、Mac OS以及Linux，運(yùn)行流暢。

3.Sublime Text

Sublime Text是一個代碼編輯器，也是HTML等的文本編輯器。有漂亮的用戶界面和非凡的功能，如迷你地圖、多選擇、Python插件、代碼段等。Sublime Text的主要功能包括拼寫檢查、書簽、完整的Python API、Goto功能、即時項(xiàng)目切換、多選擇、多窗口等。

4.Notepad++

Notepad++是Windows操作系統(tǒng)下的一套文本編輯器，有完整的中文接口及支持多國語言編寫的功能（UTF8技術(shù)）。

Notepad++功能比Windows中的Notepad（記事本）強(qiáng)大，除了可以用來制作一般的純文字說明文件，也十分適合編寫計(jì)算機(jī)程序代碼。Notepad++不僅有語法高亮度顯示，也有語法折疊功能，并且支持宏以及擴(kuò)充基本功能的外掛模組。

5.HBuilder

HBuilder是DCloud推出的一款支持HTML5的Web開發(fā)IDE。“快”是HBuilder的最大優(yōu)勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、JS、CSS的開發(fā)效率。同時，它還包括最全面的語法庫和瀏覽器兼容性數(shù)據(jù)。

【課堂練習(xí)1.1-2】根據(jù)自己的情況選用Web開發(fā)軟件。

請根據(jù)自己的系統(tǒng)開發(fā)環(huán)境情況，選擇Web前端開發(fā)軟件，如表1.1-1所示。

請根據(jù)情況完成上表，并說出選擇的理由。

?任務(wù)實(shí)施

考慮到市場上的軟件應(yīng)用以及軟件大小情況，本書以Visual Studio Code為例，簡要介紹此軟件的安裝和配置。

1.軟件下載

①打開瀏覽器，輸入微軟官方網(wǎng)站地址www.microsoft.com（見圖1.1-2）并按Enter鍵，在搜索框中輸入Visual Studio Code，單擊搜索按鈕，出現(xiàn)Visual Studio Code的常規(guī)信息（見圖1.1-3）。

②選擇圖1.1-3第二項(xiàng)中的“Visual Studio Code”，單擊“下載Code”（見圖1.1-4），進(jìn)入軟件下載界面見圖1.1-5。

③在軟件下載界面（見圖1.1-5）中根據(jù)系統(tǒng)選擇對應(yīng)的下載項(xiàng)，并下載Visual Studio Code軟件。

2.軟件安裝

①雙擊下載的VSCodeSetup-stable.exe文件，在彈出的“用戶賬戶控制”對話框中單擊“是”按鈕后進(jìn)入“安裝程序”對話框（見圖1.1-6），單點(diǎn)擊“下一步”按鈕，出現(xiàn)安裝程序“許可協(xié)議”對話框（見圖1.1-7），選擇“我接受協(xié)議”單選按鈕，單擊“下一步”按鈕，進(jìn)入“選擇目標(biāo)位置”對話框（見圖1.1-8）。

②在“選擇目標(biāo)位置”對話框中選擇Visual Studio Code軟件的安裝路徑，可以選擇默認(rèn)路徑，也可以改至D：\Microsoft VS Code，單擊“下一步”按鈕，進(jìn)入“選擇開始菜單文件夾”對話框（見圖1.1-9），如果不想其出現(xiàn)在“開始”菜單文件夾中，可勾選“不創(chuàng)建開始菜單文件夾”復(fù)選框，單擊“下一步”按鈕，進(jìn)入“選擇其他任務(wù)”對話框（見圖1.1-10）。

③在“選擇其他任務(wù)”對話框中可勾選“創(chuàng)建桌面對話框快捷方式”復(fù)選框，在桌面中創(chuàng)建Visual Studio Code軟件快捷方式，單擊“下一步”按鈕，進(jìn)入軟件安裝準(zhǔn)備就緒對話框（見圖1.1-11）。

④在“安裝準(zhǔn)備就緒”對話框中單擊“安裝”按鈕，進(jìn)入“正在安裝”對話框（見圖1.1-12），等待軟件安裝完成（見圖1.1-13），單擊“完成”按鈕。至此，軟件安裝成功。

3.軟件使用介紹

（1）軟件界面介紹

安裝完Visual Studio Code軟件，打開后界面如圖1.1-14所示。頂部為菜單欄，包括文件、編輯、查看、轉(zhuǎn)到和幫助功能項(xiàng)，左側(cè)為快捷菜單欄，包括資源管理器、搜索、Git、調(diào)試，其他部分是代碼編輯區(qū)，底部為鼠標(biāo)輸入?yún)^(qū)域信息，包括行數(shù)，列數(shù)。

（2）軟件常用快捷鍵

通過按Ctrl+Shift+P組合鍵可以打開主命令面板，在主命令面板中可以執(zhí)行VSCode的任何一條命令，如圖1.1-15所示。

通過按Ctrl+P組合鍵進(jìn)入“本地文件導(dǎo)航模式”，該模式默認(rèn)列出了打開過的文件。在輸入框中可以輸入想要打開的文件，如圖1.1-16所示。

在圖1.1-16的輸入框中輸入“？”可以獲得一些幫助，輸入“：”，可以跳轉(zhuǎn)到行數(shù)，也可以使用Ctrl+G組合鍵。

另外還有一些常用的編輯器及窗口快捷鍵，如表1.1-2所示。

?任務(wù)回顧

Visual Studio Code支持語法高亮、智能代碼補(bǔ)全、自定義熱鍵、括號匹配、代碼片段、代碼對比Diff、Git等特性，并針對網(wǎng)頁開發(fā)和云端應(yīng)用開發(fā)做了優(yōu)化。軟件跨平臺支持Windows、Mac OS以及Linux，運(yùn)行流暢。

網(wǎng)上可供下載安裝的Visual Studio Code軟件版本有很多，可以通過它的官網(wǎng)進(jìn)行下載。通常下載的安裝包中都會附帶相關(guān)的安裝說明文檔，按照安裝說明的指引一般都能順利地把軟件安裝到計(jì)算機(jī)中。

?任務(wù)拓展

1.網(wǎng)站文件夾結(jié)構(gòu)及命名

關(guān)于網(wǎng)站文件夾結(jié)構(gòu)及命名，看似無足輕重，但實(shí)際上如果沒有良好的網(wǎng)站文件夾結(jié)構(gòu)及命名規(guī)則進(jìn)行必要的約束，最終導(dǎo)致的結(jié)果就是整個網(wǎng)站或是文件夾無法管理。所以，網(wǎng)站文件夾結(jié)構(gòu)及命名規(guī)則很重要。需要特別注意的是，網(wǎng)站文件或文件夾命名要盡量避免使用中文字符命名。

建立網(wǎng)站文件夾的原則是以最少的層次提供最清晰簡便的訪問結(jié)構(gòu)。

根目錄只允許存放index.html文件和js、img、css這三個文件夾，所有的js文件存放在根目錄下的js文件夾，所有的css文件存放在根目錄下的css文件夾，所有的圖片存放在根目錄下的img文件夾中。網(wǎng)站文件夾結(jié)構(gòu)如圖1.1-17所示。

2.W3C的介紹

W3C指萬維網(wǎng)聯(lián)盟，它是建立于1994年的組織，其宗旨是通過促進(jìn)通用協(xié)議的發(fā)展并確保其通用性，以激發(fā)Web世界的全部潛能。

W3C標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C的DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，如ECMA的ECMAScript標(biāo)準(zhǔn)。

為了簡化網(wǎng)站代碼，降低網(wǎng)站建設(shè)的成本，保證網(wǎng)站在長期互聯(lián)網(wǎng)環(huán)境中有效，加強(qiáng)網(wǎng)站的兼容性，能適應(yīng)不同的網(wǎng)絡(luò)設(shè)備和網(wǎng)絡(luò)終端，在建設(shè)網(wǎng)站時應(yīng)該要保證代碼符合W3C規(guī)范。