任務1.1　工作環境準備

?學習目標

①能夠陳述常用的Web前端開發軟件及其優缺點：Adobe Dreamweaver、Visual Studio Code、Sublime Text 3、Notepad++、HBuilder等。

②能夠根據系統環境選擇合適的開發軟件。

?任務描述

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

?知識學習與課堂練習

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

【課堂練習1.1-1】使用記事本制作一個網頁。

①打開記事本，輸入如下標簽（注意代碼格式縮進）：

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

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

記事本是最基礎的網頁開發工具。為了提高網頁編寫效率，很多公司開發了網頁輔助開發軟件，以提高網頁開發的效率。

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

1.Adobe Dreamweaver

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

2.Visual Studio Code

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

3.Sublime Text

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

4.Notepad++

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

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

5.HBuilder

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

【課堂練習1.1-2】根據自己的情況選用Web開發軟件。

請根據自己的系統開發環境情況，選擇Web前端開發軟件，如表1.1-1所示。

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

?任務實施

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

1.軟件下載

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

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

③在軟件下載界面（見圖1.1-5）中根據系統選擇對應的下載項，并下載Visual Studio Code軟件。

2.軟件安裝

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

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

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

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

3.軟件使用介紹

（1）軟件界面介紹

安裝完Visual Studio Code軟件，打開后界面如圖1.1-14所示。頂部為菜單欄，包括文件、編輯、查看、轉到和幫助功能項，左側為快捷菜單欄，包括資源管理器、搜索、Git、調試，其他部分是代碼編輯區，底部為鼠標輸入區域信息，包括行數，列數。

（2）軟件常用快捷鍵

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

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

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

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

?任務回顧

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

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

?任務拓展

1.網站文件夾結構及命名

關于網站文件夾結構及命名，看似無足輕重，但實際上如果沒有良好的網站文件夾結構及命名規則進行必要的約束，最終導致的結果就是整個網站或是文件夾無法管理。所以，網站文件夾結構及命名規則很重要。需要特別注意的是，網站文件或文件夾命名要盡量避免使用中文字符命名。

建立網站文件夾的原則是以最少的層次提供最清晰簡便的訪問結構。

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

2.W3C的介紹

W3C指萬維網聯盟，它是建立于1994年的組織，其宗旨是通過促進通用協議的發展并確保其通用性，以激發Web世界的全部潛能。

W3C標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3C的DOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，如ECMA的ECMAScript標準。

為了簡化網站代碼，降低網站建設的成本，保證網站在長期互聯網環境中有效，加強網站的兼容性，能適應不同的網絡設備和網絡終端，在建設網站時應該要保證代碼符合W3C規范。