ChatGPT-4 程式碼網站
使用 ChatGPT-4 建立網站
使用 ChatGPT-4 建立網站就像有一位網頁開發人員在你身邊提供幫助。
ChatGPT 可以幫助你開始！
寫下你的想法
在使用生成式 AI 之前，你必須想清楚網站要包含什麼內容。
需要考慮的步驟
- 網站是關於什麼的？
- 你想要圖片嗎？
- 你需要聯絡資訊嗎？
提供的細節越多，ChatGPT 的表現就越好。
生成網站程式碼
在我們的示例中，我們將要求 ChatGPT 建立一個簡單的網頁
示例
使用以下提示
建立一個簡單的網頁，包含我的紙杯蛋糕店名“Magically Delicious”，一段簡短的描述，幾張圖片，以及我的聯絡方式（Genevieve Lavorre，電子郵件：lavorre@tmn.com）
ChatGPT-4 的響應可能是
讓我們測試一下程式碼： (我們使用 Midjourney 生成了 3 張圖片)
示例
<!DOCTYPE html>
<html>
<head>
<title>Magically Delicious Cupcakes</title>
<style>
body {
background-color: #f8f1f1;
font-family: Arial, sans-serif;
}
h1, h2 {
color: #ff85a2;
}
.container {
width: 80%;
margin: auto;
}
.images {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.images img {
width: 30%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Magically Delicious Cupcakes!</h1>
<p>We provide a variety of gourmet cupcakes with magical flavors that take you to a world of deliciousness. We believe in quality, taste, and a sprinkle of magic in every cupcake!</p>
<h2>Our Delicious Creations</h2>
<div class="images">
<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>
<h2>Contact Us</h2>
<p>For orders and inquiries:</p>
<p>Name: Genevieve Lavorre</p>
<p>Email: <a href="mailto:lavorre@tmn.com">lavorre@tmn.com</a></p>
</div>
</body>
</html>
自己動手試一試 »
Looks pretty good!
審查程式碼並迭代
審閱 ChatGPT 的響應，這是一個不錯的起點。
讓我們尋求更多幫助
示例
使用以下提示
讓頁面看起來更好
ChatGPT-4 的響應可能是
讓我們測試一下程式碼
示例
<!DOCTYPE html>
<html>
<head>
<title>Magically Delicious Cupcakes</title>
<style>
body {
background-color: #ffe0e9;
font-family: 'Arial', sans-serif;
color: #4d194d;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 90%;
margin: auto;
max-width: 1200px;
}
h1, h2 {
color: #ff85a2;
text-align: center;
}
h1 {
margin-top: 20px;
font-size: 2.5em;
}
h2 {
font-size: 2em;
margin-top: 40px;
}
p {
font-size: 1.2em;
line-height: 1.6;
text-align: justify;
}
.images {
display: flex;
justify-content: space-between;
margin-top: 20px;
flex-wrap: wrap;
}
.images img {
width: 30%;
border-radius: 10px;
margin: 1%;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}
.contact {
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
}
a {
color: #4d194d;
text-decoration: none;
}
a:hover {
color: #ff85a2;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Magically Delicious Cupcakes!</h1>
<p>We provide a variety of gourmet cupcakes with magical flavors that take you to a world of deliciousness. We believe in quality, taste, and a sprinkle of magic in every cupcake!</p>
<h2>Our Delicious Creations</h2>
<div class="images">
<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">
<h2>Contact Us</h2>
<p>For orders and inquiries:</p>
<p>Name: Genevieve Lavorre</p>
<p>Email: <a href="mailto:lavorre@tmn.com">lavorre@tmn.com</a></p>
</div>
</div>
</body>
</html>
自己動手試一試 »
這是一個非常簡單的頁面，但如此快速地入門可以節省大量時間。
