全栈教程

Appearance

当前页导航

ChatGPT 创建网站 ​

使用 ChatGPT 创建网站 ​

使用 ChatGPT 创建网站就像有一位 Web 开发人员在您身边为您提供帮助。

ChatGPT 可以帮助您入门！

写下你的想法 ​

在使用生成式人工智能提供帮助之前，您必须弄清楚您希望网站包含什么内容。

需要考虑的一些步骤：

  • 该网站是关于什么的？
  • 你想要图像吗？
  • 您需要联系信息吗？

您提供的详细信息越多，ChatGPT 的性能就越好。

生成网站代码 ​

对于我们的示例，我们将要求 ChatGPT 创建一个简单的网页：

输入

创建一个简单的网页，上面有我的纸杯蛋糕企业名称“Magically Delicious”、简短的描述、一些图片和我的联系方式（Genevieve Lavore，电子邮件：xxx@126.com)

输出

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Magically Delicious 纸杯蛋糕</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        h1 {
            color: #0066cc;
        }
        .description {
            color: #666;
            margin-bottom: 20px;
        }
        .contact-info {
            margin-top: 20px;
            font-style: italic;
        }
        img {
            max-width: 300px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Magically Delicious</h1>
    <p class="description">我们专注于制作美味的纸杯蛋糕，让您的味蕾在魔幻的口感中陶醉。</p>

    <div>
        <img src="cupcake1.jpg" alt="纸杯蛋糕1">
        <img src="cupcake2.jpg" alt="纸杯蛋糕2">
        <img src="cupcake3.jpg" alt="纸杯蛋糕3">
    </div>

    <div class="contact-info">
        <p>联系人：Genevieve Lavore</p>
        <p>电子邮件：xxx@126.com</p>
    </div>
</body>
</html>

HTML执行效果

chat-27.jpg

检查代码并迭代 ​

查看 ChatGPT 的响应，这是一个很好的起点。

让我们请求更多帮助：

输入

使页面看起来更好

输出

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Magically Delicious 纸杯蛋糕</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 20px;
            background-color: #f9f9f9;
        }
        h1 {
            color: #0066cc;
            text-align: center;
        }
        .description {
            color: #666;
            margin-bottom: 20px;
            text-align: center;
        }
        .gallery {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
        }
        .gallery img {
            max-width: 250px;
            border-radius: 10px;
        }
        .contact-info {
            text-align: center;
            font-style: italic;
        }
        .contact-info p {
            margin: 5px;
        }
        .contact-info a {
            color: #0066cc;
            text-decoration: none;
        }
        .contact-info a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>Magically Delicious</h1>
    <p class="description">我们专注于制作美味的纸杯蛋糕，让您的味蕾在魔幻的口感中陶醉。</p>

    <div class="gallery">
        <img src="cupcake1.jpg" alt="纸杯蛋糕1">
        <img src="cupcake2.jpg" alt="纸杯蛋糕2">
        <img src="cupcake3.jpg" alt="纸杯蛋糕3">
    </div>

    <div class="contact-info">
        <p>联系人：Genevieve Lavore</p>
        <p>电子邮件：<a href="mailto:xxx@126.com">xxx@126.com</a></p>
    </div>
</body>
</html>

HTML执行效果

chat-28.jpg

这是一个非常简单的页面，但是像这样快速开始可以节省大量时间。