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

閱讀時間約 6 分鐘

前言

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

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

  • 你想讓你的網頁成為 Line 官方帳號嗎?
  • 你想讓你的網頁成為媲美 FB 的部落格嗎?
  • 你想靠你的網頁賺錢嗎?
資料來源:DELL-E 生成

資料來源: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 操作截圖

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


2.檔案下載

資料來源:Chrome 首頁截圖

資料來源:Chrome 首頁截圖

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


3.下載完畢

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

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

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


4.開啟檔案

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

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

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


5.授權安裝

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

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

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


6.安裝中

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

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

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


7.完成安裝

資料來源:Chrome 軟體截圖

資料來源:Chrome 軟體截圖

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


Python

1.搜尋檔案

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

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

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


2.搜尋結果

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

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

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


3.網頁畫面

資料來源:Python網頁

資料來源:Python網頁

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

資料來源:Python 網頁

資料來源:Python 網頁


4.檔案下載

資料來源:Python 截圖

資料來源:Python 截圖

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


3.開啟檔案

資料來源:Python 截圖

資料來源:Python 截圖

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


4.安裝設定&安裝

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

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

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


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

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

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


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

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

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



5.授權安裝

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

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

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


6.安裝中

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

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

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


7.安裝完成

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

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

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


Visual Studio Code

1.搜尋安裝

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

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

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


2.檔案下載

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

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

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


3.儲存檔案

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

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

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


4.開啟檔案

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

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

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


5.同意授權

資料來源:本人 Visual Studio Code 安裝過程截圖

資料來源:本人 Visual Studio Code 安裝過程截圖

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


6.配置

資料來源:本人 Visual Studio Code 安裝過程截圖

資料來源:本人 Visual Studio Code 安裝過程截圖

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


7.開始安裝

資料來源:本人 Visual Studio Code 安裝過程截圖

資料來源:本人 Visual Studio Code 安裝過程截圖

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


8.安裝中

資料來源:本人 Visual Studio Code 安裝過程截圖

資料來源:本人 Visual Studio Code 安裝過程截圖

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


9.安裝完成

資料來源:本人 Visual Studio Code 安裝過程截圖

資料來源:本人 Visual Studio Code 安裝過程截圖

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


結論

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





8會員
18內容數
這裡是來自 高科大 資管系二年級的學生,希望能在學習的過程中,也分享這些知識給大家。
留言0
查看全部
發表第一個留言支持創作者!