2024 網頁x人因xDjango 實務課程 00 軟體準備

前言

大家好，我是 Caffeien。至今 2024 了，許多來自世界各地好手，做出來的科技工具日新月異。網頁的製作也透過那些人的設計，變得相當的簡單。大家可以通過各個工具，通過視覺化、模組化的方式，拖曳那些方塊，設計出自己的網頁。此時也許會有人產生疑問，既然有這些工具，那為什麼我還要學程式？

如果，你只是想要做出一個有外觀的網頁，那這些工具必然可以滿足你。但，或許你想要的更多，讓自己的網頁增添各種功能。而這件事情，必然少不了程式的撰寫。

• 你想讓你的網頁成為 Line 官方帳號嗎？
• 你想讓你的網頁成為媲美 FB 的部落格嗎？
• 你想靠你的網頁賺錢嗎？

整理好你的思緒，深深吸一口氣，讓我們在 2024 這嶄新的一年當中，開始新的學習之旅吧。

準備軟體

軟體項目

IDE： Visual Studio Code v1.86
Programming Language：Python v3.11.7
Web Browser：Chrome v121.0.6167.140

整合式開發環境 (IDE)

一種讓使用者能更高效率開發程式的軟體。這種軟體都會將開發過程會用到的功能、額外套件整合在一起，減少不必要的時間成本浪費。

程式語言 (Programming Language)

一套讓使用者與電腦溝通的語言，使用者可用這些語句，結構出一個功能，甚至是一整個完整的專案。

瀏覽器 (Web Browser)

一種能讓你瀏覽各式各樣網頁的軟體，像常見的 IE、Chrome、Firefox 等...... 當你在進行開發網頁的過程中，也需要透過瀏覽器去測試網頁運行或是檢視外觀介面。

Chrome

1.搜尋檔案

首先，打開你的 IE ，搜尋 【Chrome download】，點選第一個出現的網站，或是直接點我進下載網址。

2.檔案下載

接著，點選【下載 Chrome】進行下載，等候下載。

3.下載完畢

當你點擊【下載 Chrome】後，網頁會出現這個畫面，接著當右上角出現這個畫面時，便代表已下載完畢。

4.開啟檔案

當你下載後，會取得這個 Chrome 軟體的安裝檔案，點選【開啟檔案】進行安裝。

5.授權安裝

當你點選【開啟檔案】後，軟體會自動進行安裝，接著會跑出這個提示，要求你給予 Chrome 權限來進行安裝。請點選【是】，給予 Chrome 權限，隨後便會開始進行安裝。

6.安裝中

Chrome 正在安裝中，請耐心等待安裝。

7.完成安裝

當他下載完畢，便會出現這個畫面，代表你可以開始啟用你的 Chrome 了。

Python

1.搜尋檔案

打開你的瀏覽器，搜尋【Python】。

2.搜尋結果

請點選3.11.7的網站，或是直接點我進下載網址。

3.網頁畫面

進去之後，開始滑到最下方有【File】標題的地方，變這樣：

4.檔案下載

接著滑鼠游標移動到這個表格當中，並點擊【Windows Installer (64-bit)】進行下載。

3.開啟檔案

當你點擊【下載】後，會出現你近期下載的內容，若出現 Python 檔案，代表已經下載完畢。接著點【Python-3.11.7-amd64.exe】一下，打開這個檔案。

4.安裝設定&安裝

接著，會跳出這個畫面，請點擊【Customize installation】進行下載設定。

點擊【Customize installation】後，會出現這個畫面，請確保 pip 一定要被勾選的狀態。接著請點擊【Next】，進行下一步的設定。

點擊【Next】後，會出現這個畫面，請確保已經勾選 Add Python to environment variables 。勾選完畢後，我們即可點擊【Install】進行安裝。

5.授權安裝

此時會跳出這個畫面，要求你給予權限讓他進行安裝，點擊【是】進行授權安裝。

6.安裝中

此時，Python 已經開始安裝中，請耐心等待安裝過程。

7.安裝完成

出現這個畫面，代表已經安裝成功，點擊【Close】結束這個畫面。

Visual Studio Code

1.搜尋安裝

打開你的瀏覽器，搜尋【VS code】，點選第一個出現的網站，或是直接點我進下載網址。

2.檔案下載

進入頁面後，點選【Dowload for Windows】下載最新版本的檔案。

3.儲存檔案

此時會跳出這個畫面，讓你選擇檔案要儲存的地方，選好你要儲存的位置，即可點擊【存檔(S)】進行存檔。

4.開啟檔案

當下載完畢後，右上角會出現這個提示視窗，點擊 VS code 即可開啟檔案。

5.同意授權

開啟檔案後，會跑出這個授權畫面，先點擊【我同意(A)】進行授權，並且點擊【下一步(N)>】繼續安裝此軟體。

6.配置

此處可根據你的需求選擇要不要勾選，配置好後即可點擊【下一步(N) >】繼續安裝。

7.開始安裝

再這邊，你可以看見你剛剛的所有配置工作，確定好沒問題後，即可點擊【安裝(I)】開始安裝。

8.安裝中

此處 Visual Studio Code 正在安裝中，請耐心等待安裝過程。

9.安裝完成

Visual Studio Code 已安裝成功，點選【完成(F)】結束安裝。

結論

到目前為止，本次課程所需的檔案都已安裝成功，下一篇將介紹 VS code 的整個介面，讓你學會如何去操作並寫程式吧，感謝大家的收看。