超好用【ChatGPT + Visual Studio Code】完美整合，變身超強程式設計高手！

Summary

在这段视频中，主讲人介绍了如何将ChatGPT直接整合到Visual Studio Code中，从而提高网页设计的效率。通过安装ChatGPT4扩展，用户可以直接在Visual Studio Code中询问编程问题，获取快速回答和编程指导。视频演示了创建一个响应式网站的全过程，包括如何添加背景图片、调整图片大小、增加透明度和下拉式菜单等功能。此外，还展示了如何通过ChatGPT进行问题解决和功能添加，无需频繁切换至官方网站。最终，观众可以学习到如何有效利用ChatGPT在Visual Studio Code中开发和优化网页设计。

Takeaways

• 😀 整合ChatGPT到VS Code,实现代码辅助
• 👍 设置context,联动当前项目代码
• 📝 ChatGPT能快速生成完整前端代码
• 🔧 按需获取所需新增代码段
• 🖥 生成响应式网站代码
• 🌈 增加页面交互和动画
• 🎨 调整样式美化网站
• ⬇️ 添加下拉菜单实现功能
• ➕ 不断追问完善网站功能
• ✅ 最终实现功能完整的响应式网站

Q & A

设置ChatGPT整合有什么好处?

整合ChatGPT到VS Code可以更快速方便地使用,无需在网页版本间切换。直接在编写代码时提问,ChatGPT可以提供代码建议和修正,大大提高编程效率。

如何让ChatGPT理解当前的代码环境?

可以在VS Code里启用Ask codebase功能,让ChatGPT连接并理解你当前的代码,这样提问时就有context,它就明白你在问什么和要做什么,可以给出更好的回答。

设计响应式网站需要注意什么?

需要设置media queries,当屏幕大小改变时自动调整布局样式,使内容能正常展示。此外,图片、视频等资源也要考虑响应式设计,确保不同设备都能良好显示。

Column类设置了鼠标hover时如何避免格式错乱?

需要额外设置column内文字和图片的位置为absolute,防止hover后位置发生变化导致错乱。或者也可以设置flex布局来固定位置。

下拉菜单如何美化?

可以设置下拉菜单的大小、字体、颜色、hover效果等。比如设置宽度、圆角、背景颜色、文字颜色、阴影效果等来美化外观。

全屏背景图如何设置?

可以通过设置body和html的高度为100%没有margin和padding,再给它们设置背景图来实现全屏背景效果。背景图设置为no-repeat和fixed也很重要。

透明背景如何实现?

主要是利用CSS的opacity和RGBA来调整元素的透明度实现的。将opacity设置为0.5即是50%透明度。RGBA可以设置颜色的alpha通道来调整透明效果。

响应式网站测试方法?

可以通过浏览器自带的开发者工具来模拟不同设备的展示效果,如设置为手机模式Preview Devices。也可以在不同设备上都测试查看一次,确保效果正常。

如何快速插入网络图片?

可以在网页上右键复制图片地址,然后在代码的img src属性里直接粘贴该链接即可快速插入网络图片。需要确保权限允许跨域使用。

响应式效果测试不通过如何修改?

可以在ChatGPT详细描述问题症状并询问修正方法。逐步调试,多次提问和答复,直到问题得到解决。也可以查阅其他教程或社区讨论。

Outlines

00:00

😀 集成ChatGPT到Visual Studio Code的介绍

视频开始介绍了C w C频道，旨在提升网页设计能力，并引入了如何使用Visual Studio Code集成ChatGPT来提高编程效率。通过直接在Visual Studio Code中查询ChatGPT来检查错误和新增功能，避免了频繁的网页跳转和复制粘贴操作，大大提升了工作流的效率。介绍了安装ChatGPT4插件的步骤，以及如何通过连接code base简化查询过程，使得持续的问题解决变得更为方便和安全。

05:01

😊 使用ChatGPT创建网页的实战演示

通过创建一个名为“news”的新文件夹，并在Visual Studio Code中打开，视频演示了如何实际使用ChatGPT来设计一个网页。介绍了向ChatGPT查询创建具有标题、图片和文本内容的三栏式网页的过程，包括HTML、CSS和JavaScript代码的生成。强调了如果遇到没有任何程序输出的情况，应如何重新启动Visual Studio Code或重新查询的解决方案。

10:02

😃 增强网页设计的ChatGPT应用示例

本段展示了如何利用ChatGPT进一步增强网页设计，例如通过添加响应式网页功能，使网页能够适应不同屏幕尺寸。还介绍了如何添加鼠标悬停在特定栏位时背景颜色变化的交互效果，并演示了如何通过ChatGPT查询来实现这些功能，提供了一个简洁有效的方法来丰富网页的互动性和视觉吸引力。

15:02

😄 通过ChatGPT提升网页视觉效果

介绍了使用ChatGPT为网页添加背景图片，包括如何使背景图片覆盖整个网页并固定位置，以及如何快速搜索并应用网络图片作为背景的技巧。还展示了如何调整图片大小和添加透明度，使网页设计更加精美和个性化。此外，还介绍了如何利用ChatGPT创建下拉式菜单并实现特定栏位的显示隐藏，进一步增加网页的交互性。

20:03

😁 利用ChatGPT进行网页设计优化

最后，视频展示了如何通过ChatGPT继续优化网页设计，包括调整下拉式菜单的宽度和美化样式，以及解决下拉式菜单选择后格式错乱的问题。通过持续询问ChatGPT来达到精确的设计需求，视频强调了ChatGPT在解决网页设计中遇到的具体问题上的实用性和便利性，最终实现了一个既美观又功能齐全的网页。

Keywords

💡網頁設計

這是本影片的主題,講者希望透過學習,能增強網頁設計的能力。它涵蓋了HTML、CSS與JavaScript等前端網頁開發的相關技能。例如講者提到「我要來說明如何, 使用visual studio code, 整合chatGPT」以增強網頁設計能力。

💡ChatGPT

這是本影片介紹的人工智能工具,能夠自動生成程式碼和網頁內容。講者說明如何在Visual Studio Code中整合ChatGPT,提問相關問題並得到支援,例如「假設說我想要設計一個新聞發布,資訊分享的一個網站」。

💡響應式網站

意思是隨著瀏覽器窗口大小改變,網站內容會自動調整布局的網站。講者提到「請加入響應式網頁的功能,因為這個並沒有響應式,當熒幕較小的時候變成上下排列」。

💡Visual Studio Code

這是本影片中使用的程式編輯工具,講者說明如何在其中整合並使用ChatGPT的功能。例如「在visual studio code的左邊,有一個extension的功能」。

💡HTML

超文本標記語言,是建構網頁的基礎語言,定義了頁面的結構和內容。講者提到「包括HTNL CSS還有Java script」。

💡CSS

層疊樣式表,是網頁標記語言,用來控制網頁元素的外觀或格式。講者說「同時我看看Javascrit, OK這段程式也是需要的,我把它復製下來」。

💡JavaScript

這是網頁開發中非常重要的一個程式語言,賦予網頁動態和互動功能。講者提到要學習「HTML CSS還有Java script」。

💡程式碼生成

利用ChatGPT人工智能,可以自動快速生成所需的各種網頁程式碼,例如HTML、CSS、JavaScript等。講者說「讓ChatGPT直接幫我們檢查,是否有錯誤的程式」。

💡網頁功能

例如影片中添加了下拉選單、滑鼠懸停顏色變化等功能。講者提到「想要新增某一個特定的藍位,背景的顏色會變成灰色」。

💡網頁美化

通過CSS程式碼優化網頁的外觀和風格。講者詢問「請加入CSS美化這個下拉式選單」。

Highlights

使用visual studio code整合ChatGPT, 避免反覆複製粘貼

ChatGPT4擴充功能可直接在編碼器中使用, 速度較快

啟用ChatGPT編碼上下文, 讓其自動理解目前開發內容

可提問程式碼實作細節, 如響應式、互動效果等

每次只需顯示新增程式更便於使用

背景圖片選址大多需要手動設定

體驗過程需具備基本網頁開發知識

可指定只顯示新增程式代碼, 明確知悉更動

ChatGPT整合方便快速完成複雜功能

詳細持續提問達成理想效果

版面亂跳常需手動修正格式問題

登入與升級可解除詢問次數限制

整合成功創建響應式新聞網站樣式

ChatGPT具體代碼可直接複製使用

須具基本概念瞭解如何運用代碼

Transcripts

哈囉！大家好

歡迎來到C w C channel

一個希望的網頁設計能力變強的頻道

這個影片我要來說明如何

使用visual studio code

整合chatGPT

過去以往我們在使用chatGPT

我們會到chatGPT的官方網站來搜尋

但這個使用過程有時候

並不是很有效率

有時候chatGPT

所生成的程式檔案會出來的很慢

同時我們要一直不斷的跳轉

這裏複製這裏貼上這裏貼上這裏複製

所以有沒有一個辦法可以將

ChatGPT直接整合到visual studio code

我們直接問我們的程式裏頭的內容

那ChatGPT直接幫我們檢查

是否有錯誤的程式

同時當我們想要新增什麽功能

我們直接在video studio code裏頭詢問ChatGPT

讓他來提供我們程式來新增

不一樣的功能

那這個影片呢

我就要來教各位如何整合ChatGPT

例如在這邊我可以直接問

什麽是響應式網站

他就很快速的說明什麽是響應式網站

我不用特地的在跑到

這個網頁的版本

然後問問題

然後等他的回答

而且你看他所生成的內容

出現的速度比較慢

我們必須要等一直等等到他全部打完

那在這邊呢

他產生的速度會相對的較快

有了這個ChatGPT的幫忙

讓你瞬間變成程式設計高手

好現在這個影片馬上開始

好首先你先開啟你的visual studio code

在visual studio code的左邊

有一個extension的功能

在這邊點選這裏你可以安裝一

些額外的衍生的程式

到你的visual studio code那

我個人試用後的結果推薦這一個版本

這個是ChatGPT4

所以當你來到了extention之後

點選這個按鈕之後呢

接下來你在上面的搜尋的地方

麻煩你尋找ChatGPT4

這個是我試用之後呢

覺得是最好使用的

所以呢推薦給大家來

那在我錄製這個影片的時候呢

它有資源ChatGPT4跟3.5的版本

同時你可以連接你的code base

有些我們必須要提供程式現在不用了

只要你連接你的code base

你可直接詢問

同時你可以很簡單的follow up

就是持續的詢問相關的問題

那它是比較相對的安全然後很好使用

所以呢這個我試用之後的結果

我覺得這個是最好使用的

那也是最強大的

在這裏分享給大家

那現在呢如果你還沒下載的話

在這邊你可以點選下載

那下載完之後你在你的左邊

的功能欄裏頭就會多出了一個叫做

4GPT的這個圖示

當你點選下去

你就可以直接的在你的video studio Code

詢問任何你想要問的問題

這裏我就問一個問題

前端的網頁程式設計要學什麽語言好

我就詢問

那他直接的就會答案

顯示在這Visual Studio Code

所以非常的快速簡單

你不用特地的在跑到網頁的版本

有時候還出現問題

他這裏就會直接的回答

接下來呢

我們還是要一個資料夾才可以做網頁

所以麻煩你建立一個資料夾

在我的桌面上

我建立一個新的資料夾叫做news

這個資料夾在這邊

這個news資料夾目前空無一物

OK空無一物

然後然後接下來呢

我就要來開啟我的資料夾

所以我按下了左上方的explorer

這一個按鈕

好再按下open folder之後

我就要去連接我的資料夾

那這個資料夾

我選擇的就是news這個資料夾

好

就是我桌面上也就是這一個資料夾

好我現在就把它做連結

接下來呢我就要來開啟一個新的網頁

好點選這一個加的按鈕

那這個新的網頁

我就把它取名叫做index好了

只是一個名稱啊

你可以取名任何你想要的

那現在這一個檔案index點HTNL

空無一物

我現在要靠ChatGPT

來幫我設計出我所想要的網頁

好我現在就來詢問了

假設說我想要設計一個新聞發布

資訊分享的一個網站

好了那在我詢問之前

你看到這裏有個東西叫做ask cold based

這個就是連結

你的目前在寫的程式內容

也就是換句話說

我根本不用問他現在我的程式是什麽

你看這裏no context

如果我連結的話呢

就有context

context就是一種你目前的一個情境

那目前我在

我在做這一個程式的設計

他就知道說我要問的就是相關的

所以當我要問我程式相關的

我只要把它點選就可以開啟

那這個開啟的方法你必須要做連結

所以呢現在當你開啟這個ChatGPT4之後

點選這個ask cold base OK

然後他問說哎

你必須要先做index

也就是要做連結

好按下OK

接下來呢

我要連結的資料夾

就是我的news資料夾

當我選擇下去之後你看他現在開啟了

他就有context specific

就是說你現在所有打的程式

他都知道你要問這些了

如果我不要我就取消就好了

no context我要的話我就點選

他就知道我要問的是程式

那這個好處就是

我不用再剖我的程式給他了

他已經知道我要做什麽了

OK所以呢請做這個連結

他會省去你非常多的時間

好那這個影片呢

就以設計這一個網頁當做目標

總共有3個藍位

當然之後可以更多

現在就以3個欄位為做示範

每個欄位有圖片有標題

也也有這個文字的內容

那在背景也有圖片

同時這個網頁是一個響應式的網頁

也就是當我的一幕

變成像是手機的一幕的時候

他就會以上下的方式來排列

好那就以這一個網頁的

的一個設計當做目標

來做示範

好那你現在回到了visual studio coat

那在使用之前跟各位說明一下

你這邊可以登錄

如果你有check GPT的賬號密碼的話

你可以在這邊登錄

如果你不要登錄也沒有關系

例如這邊我就不登錄

另外呢在上面這邊你可以try

without account這一個

你就可以不用登錄啊

另外呢當你點選下去之後

如果你不登錄的話這裏可以設定

那在設定裏頭

你可以設定說你要使用的

的chat GBT的版本

你可以選擇chat

GBT4 或者是3.5

那或者是你也可以升級

如果你按下這個features這個功能的話

你可他就會說明

說他你可以怎麽樣去使用

這個ChatGPT

在video studio code裏頭

OK然後如果你有discord的的賬號的話

你也可以用discord來登錄

如果你要升級

OK譬如說在這邊他就說明升級的內容

不過這個升級是需要付費的

譬如說我這裏點寫下去

然後如果你升級成Pro的版本的話

可以無限的使用

那如果你沒有升級

你可以詢問一定的量

之後呢他就會叫你說你問太多

然後請等20分鐘之後才能再問

所以在這邊如果你沒有升級

那在使用這個功能的時候會有

執行次數的限製

那除非你升級OK

那你如果真的升級的話

那請你要到這個sign up這邊來登錄

那這樣他就知道你是升級後的使用者

那你就可以使用多次的

chat GPT的詢問

好那這邊我的示範我就使用try without

account這一個

好那我現在回到了這一個check GPT的

詢問的頁面

OK那現在呢

我就啊來詢問

說我想要建立一個三欄頁的網頁

那每個欄位有顯示標題

圖片以及文字內容

嗯然後請提供完整的程式內容

在這邊呢我再加上幾句好了

包括HTNL CSS還有Java script

好這樣子的描述完之後呢按下執行

他就會開始跑裏頭的資訊

有時候你在執行的時候

他會出現沒有任何程式的現象

如果這種情況

產生的話請麻煩啊重新的開啟OK

可能重新開啟你的be your studio coat

或者是重新的點選啊features這些

上面的藍位

有時候會出現這種現象

那要解決的話呢就是重新的輸入OK

跟各位說明一下

好那我現在先回到我的網頁

目前我沒有任何東西

那由於我說起提供完整的程式內容

所以他現在提供了完整程式內容

所以我要做的事情非常簡單

我只要按一下

他就會完整的復製下來

我來到了這個空白的網頁

那我就把它貼上

那我就有這個程式的內容

接下來下面這邊是CSS

所以我一樣的復製

我復製完之後呢

為了能夠輕松方便的顯示

我這裏我就不使用外部連結的方式

我就直接在這裏打上style

我就直接把CSS打在這邊了

因為我要展示使用所以我就方便為主

OK所復製貼上這一段CSS到這邊

好那現在完成了之後呢

啊我把它儲存起來

我來開啟這個網頁

好我按兩下打開

那現在這個網頁確實是有三個欄位

那這三個欄位啊有圖片

那現在圖片沒有任何的東西

我來看為什麽沒有任何東西

因為我想他應該是使用OK

它是使用內部的連接的方式

OK顯示的圖片

好那接下來我再來詢問

因為目前的網頁

並沒有我來看看他們響應式的網頁

我現在把這個網頁調整了之後呢

他並不是響應式的

所以呢我這裏在接下來的詢問

好接下來我在

詢問請加入響應式網頁的功能

因為這個並沒有響應式

當熒幕較小的時候變成上下排列

也就是這個欄位會變成上下排列

好那這裏呢

我就說僅顯示要加入的程式即可

因為我已經有程式在這邊呢

我只是要把它變成響應式

我只要知道要加入哪些就好

好現在按下直行

結果他還是給我診斷的程式

OK雖然我這裏有強調

只要顯示加入的程式

但是他還是給我全部

那沒有關系啊

我知道說這一段其實就是新加入的

這個就是響應式網站的

這個程式的內容

at media那我現在把它復製下來

這個是CSS

所以我在CS這邊就直接加入這一個

好那現在呢我再來測試看看

好儲存起來重新整理

那我現在把我的網頁變小

現在變小了之後

各位可以看到

它變成是上下排列的方式

幫我增加了這個新功能

接下來我想要新增的功能是

當我的滑鼠移過去某一個圖

藍位的時候

它的背景顏色會改變

雖然我可以用CSS直接改了

但是我就直接用問的好了

好當我的1啊

滑鼠呢移到特定的藍位的時候

背景的顏色會變成灰色

文字變成白色

那另外呢

我又加了一句話

請顯示新增的程式即可

因為我不需要整個程式的哦

重新的復製貼上我這只要新增就好

好

所以我這裏再加一句話不用給完整的

因為給完整的反而

會讓我覺得比較難以去

抓到我要新增哪些東西

好那我現在就說不

用給完整的

他現在就給我這一段而已

OK那這樣子就更清楚了

我現在知道說這一段呢

是一個column的這一個

所以在這邊

他現在要我新增一個這一個東西

在這邊

所以我現在就跑到我的程式裏頭

復製貼上

這一段就是他給我的

OK那這樣子的話呢

簡單易懂

好現在我把它儲存起來

看看有沒有成功啊

重新整理

滑我的滑鼠過去

所以現在就成功的出現了這個顏色

背景改變的

的一個一個設計

接下來呢我要加背景

這個背景啊

假設說我不知道怎麽用

我就可以詢問他

好這裏我就說請新增背景

圖片至終不重復

那請顯示新增的程式就好

不用給完整的

這樣子可能比較簡單的

知道說要增加哪些程式

好那這邊呢

他就快速的產生了這一段的程式

那我知道說這個是CSS程式

這個c s s

我就把它加到我的c s style裏頭

那我加到最上面好了

因為它是個巴黎的這個標簽

好復製貼上

那現在我復製貼上這段程式之後呢

我來看看我的背景有沒有改變

不過它的背景它的照片呢

它是使用這個名稱

我並沒有背景的照片

所以呢我還是要去尋找

那在這邊呢

我就隨便的搜尋一些背景的照片

例如說這張照片

那我就按下右鍵之後

然後復製它的連結copy image link

回來之後呢我在這裏OK

這裏有URL

就是我剛才復製貼上這邊

由於我沒有這個圖片所以

我必須要在這裏新增

我就把這一個移除掉

好 接下來我就貼上了我剛才復製的連結

好了之後呢儲存起來

重新整理我的網頁

在這裏重新整理好

那現在背景圖片就有了哎

不過我的背景圖片

我希望是整個覆蓋的整個網頁

所以呢我再來詢問

好這邊呢我就說啊

請將背景圖片覆蓋整個網頁

把它固定住不留空白

那只要顯示新增的程式即可

那按下執行

接下來他就會產生了這個網頁的資訊

的程式好

這邊呢他說了OK

他希望我新增這一個程式的內容

那這個程式的內容

其實跟剛才的非常的相似

除了下面這三個新的東西以外

布置下來

然後呢貼上去

他希望把我的這個高度變成百分之百

然後沒有留空隙

好

另外呢他希望h t m l也把它加入進去

好我就根據他的這個

說明我來加入HTML

他這邊說的HTML加入body

那似乎他是想要涵蓋整個網頁

好那我們把它儲存起來

回到這邊重新整理好

我現在圖片就涵蓋了整

個的網頁的內容

那接下來呢

我就是簡單的快速加入這些圖片啊

因為他目前他給我的圖片

是這一種的圖片

但我並沒有圖片答案

所以他沒辦法顯示

所以我快速的搜尋3個圖片

把它加進來

好這邊呢

我就在網頁上面呢找了三個圖片

分別為HTNL CSS以及Javascript

所以這邊呢我不

我就復製貼上他們的連結

那同時我就把這些title把它改掉

HTML OK CSS以及Javascript okay

就簡單的做一些修改

好那接下來呢

我要做的事情就是

我來看看長什麽樣子

因為他原本給的程式啊

並沒有這個圖片

所以我現在加入進去

好有了這些

現在我有三張圖片

那這三張圖片的大小不一樣

所以呢我用check GPT來幫我修改一下

幫我把這3張圖片的大小變小一點

好按下執行

那現在他就新增程式

他說呢這個寬度請改成80%

所以在我的CSS裏頭

我這裏有一個程式的內容

他目前是百分之百啊

改成80儲存重新整理好

他就變小一點了

那所以呢我可以在這邊自行的修改

譬如說改成50%

它就變成50%了

好

那現在這三張圖片就已經出現在這邊

好接下來呢

我覺得這三個欄位

我想要有一點點透明度

想要看到後面的風景

所以在ChatGPT這邊

我就可以說

把這三個欄位及圖片加入透明度啊

好執行

那執行下去之後

他就跟你說哪裏可以新增這個透明度

那他跟我說希望你來加入這一段程式

那這裏呢

我就把他所提供的所有的程式

我就直接復製下來

接下來

我把這些全部置換成他所提供的

好復製貼上

儲存起來重新整理

哎有了現在有背景的圖片了

就在這邊

首先背景你看有點透明度

我可以看到後面的這這個風景

但問題是這個圖片怎麽又變大了

所以呢我還是可以把它調回來

在這個圖片這邊剛

才我知道我可以在這裏調整這個大小

首先把它變啊變小

儲存起來重新整理好

這樣就可以了

所以現在你看後面的背景

OK變得比較啊透明的

那這個透明度的調整

可以針對這個opacity來做調整

如果你覺得透明度不好

你可以自行再調整更高

更透明一點像0.5

這裏我也改成0.5

那這樣子會變得更透明

儲存起來重新整理

OK變得更透明了

好那現在越來啊

越來越達成我想要的樣子

那我再來啊

加入一個下拉式選單

好了 這個下拉式選單當我選擇的時候

它會顯示某一個特定的藍位

好我現在就來詢問看看

好這裏我詢問的內容就是

請加入一個下拉式選單

然後當選擇全部的時候顯示全部欄位

當選擇某一個特定欄位的時候

只顯示那個欄位

那新增程式即可

那這個請加入這個下拉式選單

我再加入一下啊

放置在上方

好這裏我就加入放置在最上方

來讓我來選擇

好那我現在就按下直行

當我按下咨詢之後呢

他就顯示了這一段程式

雖然我說不用給我完整的

但是他好像還是給我完整的內容

但沒有關系

那我這看的這個程式之後

我大概知道是這個

drop down是新的下拉式選單

我就先把它復製下來

那當我復製下來之後呢

我就來到我的程式最上方

OK container

之前在這邊我就加入下拉式選單

同時我看看Javascrit

OK這段程式也是需要的

我把它復製下來

那由於是Javascrit

所以在這邊我在斜線8裏之前

我打上scrit的標簽

好在Scrip標簽裏頭

我現在把這個Java script內容

把它復製貼上上去

OK所以我現在把這一段貼到這裏來

好復製完之後呢

這個程式的內容

應該是要去連接每一個

欄位

所以應該還有一些程式必須要復製的

OK在這邊在他的程式提供

這邊他有說color one color two color three

那也就是這裏的123

OK它透過這個loop的方式呢

把這個color one two three把它找出來

所以呢這邊呢我們必須要有

我來看一下OK class這邊我必須要color one

所以在這邊我就加入程式的內容

所以雖然這個chargept可以提供很多

方便的資訊給你

但是呢其實你也是要必須要一些

程式的基本的概念

要不然他即使給你

有時候你也不知道該怎麽使用

那也是沒辦法的

所以呢也要有一些基礎的概念

好現在呢我就把它加進來了

加進來了之後我這個color one two three

我要把它改掉

我把改成HTNL

因為它是它是選項

這個這個下拉式選項

選單它是這個選項

所以這選項的資訊我把它改掉

好最後一個是javascreet

好這樣就是可以了

我先把它儲存起來

回到我的網頁重新整理好

你現在看到的上方

這邊就有下拉式選單

那我先來選擇h t n l

哎它只剩下h t n l

那我選擇CSS

它剩下CSS然

後Javascript它只剩下Javascript

所以是成功

那所有的藍位它是所有的藍位

不過呢

它的這個版面似乎是有點詭異啊

就是它在選完之後呢

啊出現了這個版面出啊出現問題啊

我待會再處理

我先把這個下拉式選單

我跟這個ChatGPT說我要移到字中

同時稍微的把它做CSS美化一下

所以這裏我就來詢問

好我就說請把下拉式選單至中

同時加入CSS美化這個下拉式選單

好我來執行

好執行了之後呢他就說OK

就是這一段的內容你可以加入CSS

好

我還蠻長的哦他加入的東西蠻多的

好的那javascree它還提供給我

其實我已經有了

所以這一個應該是可以不用

好那在這邊呢

我就把它復製這個CSS這一段程式

他希望我加入這段程式來美化

我的下拉式選單

所以我復製完之後呢我來到了我的CSS

我在這個at media之前呢

我把它複製貼上

通常都是要放在最後面的

好那我現在複製貼上之後

OK這一段程式的內容

這一整段

我現在就把它復製貼上過來了

那儲存起來

把它儲存

之後呢重新整理

有了下拉式選單變成質中了

同時呢有一點美化的效果存在

OK所以是成功

那其實我想要再把它變寬一點

好我就說請把下拉式選單變寬一點

然後我執行了之後呢他就說啊OK

可以變寬

那變寬的方式就是這一段

他還很貼心的註解了

請新增這一段程式

嘛OK

非常的好

所以呢到了select這邊

我最後呢就加上這一段程式

這樣就可以了

好現在儲存起來重新整理好

他果然變寬了

那我當然還可以變更寬呢

啊在這邊我還可以變成啊400

變得更寬一點

儲存起來重新整理他就變400了

所以呢

現在透過了這樣的方式就完成了

那現在呢

最後一個東西我要修改的就是

當我選擇之後

他的格式是否跑掉了

所以我請Chat GPT幫我修改一下

好那這邊我就來詢問

當選擇下拉式選單之後

啊這個欄位會出現格式亂掉

請修正讓他不會亂掉

也就是標題還是在上方

接下來圖片在中間

文字在排列在最後面

這個詢問的方式

你可以不斷的詢問來達到你所想要

問的東西

好那我接下來就啊按下執行

執行了之後

他就出現了這一段CSS的內容

他非常的貼心的

註解了說哪些是新增的程式

那我就把新增的程式複製下來

就是這三段

我先把它複製下來

複製完之後

這個是column所以我把它放到這邊

好我就複製貼上

然後他還說

這個image這一個也請新增這一行

好沒問題我把新增的這一段複製下來

來到了image這邊複製貼上

OK

所以呢在這個他新增的資訊之後呢

我就把它儲存起來

這裏我再次強調哈

如果你沒辦法達成你的目標

你就繼續的問

越詳細越好

他就會讓你他就知道你的意思

好在這邊我就重新整理

好現在

這3張圖片

我現在選擇CSS

它就剩下CSS而且格式沒有跑掉

非常好我跳到JavaScript

沒有跑掉

然後HTML沒有跑掉

所以這一段程式全部成功

好 這個就是所有的這個這個影片的內容

所以透過了這個ChatGPT

我可以不斷的詢問我想要呈現的內容

以及功能

讓我達成我想要設計的這個網頁的

的這個

結果

那希望呢這個影片對你有所幫助

如果你覺得不錯

可否請你按贊分享訂閱本頻道

非常感謝

我們下一集再見拜拜