ChatGPT-3.5 程式碼網站
使用 ChatGPT-3.5 建立網站
使用 ChatGPT-3.5 建立網站就像身邊有一位網頁開發人員為您提供幫助。
ChatGPT 可以幫助您入門！
寫下您的想法
在使用生成式 AI 幫助之前，您必須弄清楚網站需要包含什麼內容。
一些需要考慮的步驟
- 網站是關於什麼的？
- 您想要圖片嗎？
- 您需要聯絡資訊嗎？
您提供的細節越多，ChatGPT 的表現就越好。
生成網站程式碼
在我們的示例中，我們將要求 ChatGPT 建立一個簡單的網頁
示例
使用以下提示
建立一個簡單的網頁，包含我的紙杯蛋糕業務名稱“Magically Delicious”，簡短的描述，幾張圖片，以及我的聯絡方式（Genevieve Lavorre，電子郵件：lavorre@tmn.com）。
ChatGPT-3.5 的響應可能是
讓我們來測試一下程式碼：（我們使用 Midjourney 生成了 3 張圖片）
示例
<!DOCTYPE html>
<html>
<head>
<title>Magically Delicious Cupcakes</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
.description {
text-align: center;
margin-bottom: 30px;
}
.contact-details {
text-align: center;
margin-top: 30px;
}
.contact-details p {
margin: 10px 0;
}
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-gallery img {
width: 250px;
margin: 10px;
}
</style>
</head>
<body>
<h1>Welcome to Magically Delicious Cupcakes!</h1>
<div class="description">
<p>Indulge in the enchantment of our delectable cupcakes.</p>
<p>We offer a wide variety of flavors and designs to satisfy your sweet tooth and bring magic to your taste buds.</p>
</div>
<div class="image-gallery">
<img src="img_cupcake1.png" alt="Cupcake 1">
<img src="img_cupcake2.png" alt="Cupcake 2">
<img src="img_cupcake3.png" alt="Cupcake 3">
</div>
<div class="contact-details">
<p>Contact us for orders or inquiries:</p>
<p>Name: Genevieve Lavorre</p>
<p>Email: <a href="mailto:lavorre@tmn.com">lavorre@tmn.com</a></p>
</div>
</body>
</html>
自己動手試一試 »
看起來不錯！
審查程式碼並迭代
回顧 ChatGPT 的響應，這是一個不錯的起點。
讓我們尋求更多幫助
示例
使用以下提示
讓頁面看起來更好
ChatGPT-3.5 的響應可能是
讓我們來測試一下程式碼
示例
<!DOCTYPE html>
<html>
<head>
<title>Magically Delicious Cupcakes</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f7f7f7;
}
h1 {
text-align: center;
color: #442d6c;
font-size: 36px;
margin-bottom: 30px;
}
.description {
text-align: center;
margin-bottom: 30px;
}
.description p {
font-size: 18px;
color: #555555;
line-height: 1.5;
margin-bottom: 10px;
}
.contact-details {
text-align: center;
margin-top: 30px;
}
.contact-details p {
font-size: 16px;
color: #555555;
margin: 5px 0;
}
.image-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-gallery img {
width: 300px;
margin: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
a {
color: #442d6c;
}
a:hover {
color: #800080;
}
</style>
</head>
<body>
<h1>Welcome to Magically Delicious Cupcakes!</h1>
<div class="description">
<p>Indulge in the enchantment of our delectable cupcakes.</p>
<p>We offer a wide variety of flavors and designs to satisfy your sweet tooth and bring magic to your taste buds.</p>
</div>
<div class="image-gallery">
<img src="img_cupcake1.png" alt="Cupcake 1">
<img src="img_cupcake2.png" alt="Cupcake 2">
<img src="img_cupcake3.png" alt="Cupcake 3">
</div>
<div class="contact-details">
<p>Contact us for orders or inquiries:</p>
<p>Name: Genevieve Lavorre</p>
<p>Email: <a href="mailto:lavorre@tmn.com">lavorre@tmn.com</a></p>
</div>
</body>
</html>
自己動手試一試 »
這是一個非常簡單的頁面，但如此快速地開始可以節省大量時間。
