大家好，我是小潘，前几天，我用AI做了个GPTs的导航站，说过要出个系列教程。这篇就是我这个系列教程的第一篇啦，这篇我会手把手教大家做个静态网页。
所谓的静态网页，就是上面的内容直接写死的，就像我们做好的ppt一样，内容都是固定的。不过这并不是我们教程的终点。
在完成静态网页的内容后，我再继续讲解怎么把它变成动态的内容，还会教大家怎么部署上线，做自己的一个网站。
最终的目的，是希望大家都能做出和我那个简单的 top-gpts.com 一样的简单动态站点。
你千万不要恐惧，觉得里面设计太多技术，太难。给大家定心丸，我是个前端小白，借助AI，也就花了几个小时就搞完了。
在我们这节中，几乎不需要编程知识，只需要复制粘贴就可以了。不过，有门槛的是，你需要一个ChatGPT plus账号，如果没有账号的小伙伴，也可以先学习，等哪天GPT-4免费了，你们就可以马上上手了。New Bing也可以，不过我没有试过New Bing的效果。
好了，就说到这儿，接下来我们就开始我们的教程吧。
先来看看效果，这个效果就是我们最重要做的，也是我那个站点top-gpts.com的首页。我们本节的目标，就是这借助AI做出这样的效果。
一、设定ChatGPT角色
这里，必须要用到ChatGPT plus账号，因为我们要用到GPT-4识别图片的功能。虽然GPT-3.5也能帮我买写html代码，但是很遗憾，那种方式虽然也能写代码，但是效果很一般，没办法让我们这种小白也能快速做网页。
来看看提示词吧，提示词很简单。其中，我们提示词用到了tailwind css。什么是tailwindcss呢？它就是样式工具，给我们的网页化妆，让我们的网页更加好看。强调ChatGPT用tailwind css做网页的，生成的网页会更加好看。
你是专业的前端开发专家，你的任务是帮我写HTML代码 1、根据我提供的图片生成回应的html代码 2、HTML代码中请提供详细的注释 3、HTML代码各组件边界清晰，注释中给出每个组件的名称 4、使用tailwind css 2.2.19版本 5、请输出网页截图中每个组件的名称接下来我将提供你一张网页的截图，请根据网页的截图，认真思考，一步一步将HTML代码写出来
我用上面的提示词设置了GPTs，链接为https://chat.openai.com/g/g-pSCctCcNT-img2html不知道为啥，同样的提示词，GPTs的效果似乎更好些。
接下来就开始设计我们的网页啦。可能有些小伙伴在用ChatGPT帮我们写网页的时候，有可能是一撸到底。。。，想一次性就搞定了。
例如直接把一张网页的截图丢给ChatGPT，然后让ChatGPT给出相应的代码，比如下面这张图
这样子，虽然说也能写出网页，但是我敢保证，你绝对不会满意。ChatGPT不是万能的，细节太多，往往会失控。直接给的这张图，生成的网页是这样子的。
虽然说和原来的网页，似乎也是有6、7分像，但是，丢失了太多的细节。比如说，搜索框不好看，然后卡片中没有按钮。。。等等。那么，我们要怎么样做的更加好呢？
二、像搭积木般，拼出网页
我们按照top-gpts.coms首页的样式，来说说怎么样像搭积木有一样拼出网页。
2.1 生成导航栏
首先是导航栏，我们直接截取导航栏“这个积木”
然后，把这个图直接给到ChatGPT，ChatGPT就会给出对应的代码和解析
得到代码后，直接将这个代码copy到普通的记事本，并且把它命名为"index.html"
然后，我们就可以点击index.html，“打开方式”选择用浏览器打开，就可以看到效果了。上面代码的效果是这样子的
2.2 没有导航栏按钮，怎么解决?
看起来有点奇怪，颜色不对，导航栏的“home”、"Contact me哪里去了呢"？我们简单看看代码看看，不懂代码不要紧，我们看中文注释和有没有对应的文本内容就可以了。
看起来都是有的，但是，会看不到呢？我们直接把代码和相应的效果截图丢给ChatGPT，看看ChatGPT能否帮我们解答。
ChatGPT给了可能的原因，并且给了我们最新的代码，接下来，我们再更新相应模块，再看看效果如何。
由于我们给的是整个导航栏，所以我们只需将导航栏的部份更新就可以了，如下图所示。看不懂代码就看中文的注释
一起来看看最新的效果
2.3 新的问题，某个按钮又不见了
发现“Submit a project”这个按钮又不见了？不用担心，我们再次调整！
不过，这次我们不要把整个组件丢给ChatGPT了，我们把范围缩小，直接根据文本<Submit a project>找到我们对应的代码。直接拷贝相应的代码给ChatGPT，提出问题。
ChatGPT已经判断出来，还是因为颜色的问题，这就好办了，我们让导航栏的"Submit a project"的样式和"Home"、"About一致就可以了"。所以再让ChatGPT改一次，最终结果是这样的。
2.4 调整按钮的位置
这时候，我们要的元素都有了，但是，位置不太对。所以我们再调整下位置
在这里，大家注意下，我开了一个新的会话，因为如果我们某次描述出错，可能后面的微调都会收到之前错误的影响，最简单的方式是重新开启一个会话。
在新的会话中，我提交了一张截图，要改动的位置，以及我的要求“将中间红框中的按钮调整到左侧”的红框中，并且给了把完整的代码给了他。
最后我们来看看调整的效果如何吧。
2.5 调整导航栏颜色样式和字体
最后来看，每个按钮的位置都对了。接下来，我们再调整下样式，让整体看起来更加好看。
首先是导航栏的颜色，我们把这个导航栏设置成和top-gpts一样。
再来看看效果
好了，其实后续的调整步骤都是大同小异，都是看哪里不合适，就调整哪里。我们还可以调整字体颜色、鼠标悬浮在按钮上的特效、导航栏和两边的间距等等。
导航栏字体颜色设置为白色
2.6 调整导航栏的边距
我们现在的导航栏，还不够好看，为了能有个直观的认识，我把导航栏外面的一些内容也截下来了。
这个导航栏和浏览器内容顶部完全连在一起，看不出层次，不好看。我们把导航栏往下挪一挪。我们只需要把导航栏的代码给到ChatGPT，然后让ChatGPT帮我们修改。
然后，我们再看看看效果怎么样。
这时候，可以看到，我们的导航栏往下移动了一些。现在导航栏太宽了，我们也调整下。
调整宽度有个使用提示词的小技巧，借调导航栏宽度这个机会，给大家演示一下。
在这里，我的提示词是
<nav class="custom-navbar-bg mx-auto px-4 py-3 shadow-lg rounded-lg mt-4"> <!-- mt-4类用于增加顶部外边距，使导航栏向下移动 --> <div class="max-w-7xl mx-auto flex justify-between items-center"> <!-- 左侧部分，包括Logo和导航链接 --> <div class="flex items-center"> <!-- Logo部分 --> <div class="font-bold text-xl mr-6"> Top GPTs </div> <!-- 导航链接部分 --> <div class="flex space-x-4"> <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Home</a> <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">About</a> <a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Contact</a> </div> </div> <!-- 右侧部分，提交按钮 --> <div class="ml-auto"> <a href="#" class="nav-button px-4 py-2 rounded-md text-sm font-medium">Submit a project</a> </div> </div> </nav> 我要减小整个导航栏的宽度，包括有颜色的部份，我该如何做？
ChatGPT给了我下面的这些回答
其实，这个是达不到我们的要求的，不信的小伙伴可以去尝试看看。这时候，我们反问一下ChatGPT。
我们通过疑问句“你确定吗？”反问ChatGPT，这时候，他给了我们新的答案。这个新的答案是可以满足我们的需求的。我们把上面的代码替换掉"index.html"，就可以看到效果了。
三、完善其他组件
导航栏我们已经设置完成了，接下来我们设置下面这部分内容
都是类似的操作，我们把红框中的截图、当前的index.html代码中的内容，我们的提示词一起提交给ChatGPT，类似下面这样子
| <截图> |
|---|
然后ChatGPT就会生成相应的代码了，来看看相应的效果是什么样子的。
好了，我们还剩下最后一个组件
添加图片注释，不超过 140 字（可选）
来样子，把红框中的图片、当前的代码、提示词直接给chatgpt
最后我们来看看效果怎么
好了，到这里，这节就结束了。我们生成的网页和我们的目标网页在轮廓上大致相似了，不过在细节上还有很多欠缺。比如分类列表没有对齐和举重，搜索框最右侧没有小logo，小卡片丑的一塌糊涂。。。
不过我们还没有结束，上面的那几个，我也就花了不到10分钟生成。
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
