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

2024/02/06閱讀時間約 6 分鐘

前言

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

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

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

資料來源：DELL-E 生成

整理好你的思緒，深深吸一口氣，讓我們在 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 操作截圖

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

2.檔案下載

資料來源：Chrome 首頁截圖

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

3.下載完畢

資料來源：下載後的 Chrome 頁面截圖

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

4.開啟檔案

資料來源：下載後的 Chrome 頁面截圖

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

5.授權安裝

資料來源：本人電腦系統通知截圖

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

6.安裝中

資料來源：本人 Chrome 安裝過程截圖

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

7.完成安裝

資料來源：Chrome 軟體截圖

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

Python

1.搜尋檔案

資料來源：本人 Chrome 上搜尋畫面截圖

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

2.搜尋結果

資料來源：本人使用 Chrome 搜尋結果

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

3.網頁畫面

資料來源：Python網頁

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

資料來源：Python 網頁

4.檔案下載

資料來源：Python 截圖

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

3.開啟檔案

資料來源：Python 截圖

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

4.安裝設定&安裝

資料來源：本人 Python 安裝過程截圖

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

資料來源：本人 Python 安裝過程截圖

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

資料來源：本人 Python 安裝過程截圖

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

5.授權安裝

資料來源：本人系統通知截圖

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

6.安裝中

資料來源：自行安裝過程截圖

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

7.安裝完成

資料來源：本人 Python 安裝過程截圖

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

Visual Studio Code

1.搜尋安裝

資料來源：本人在 Chrome 上搜尋頁面的截圖

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

2.檔案下載

資料來源：Visual Studio Code 首頁截圖

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

3.儲存檔案

資料來源：本人檔案總管截圖

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

4.開啟檔案

資料來源：Visual Studio Code 下載後頁面截圖

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