欢迎回来｡
我们已经学会了烧瓶的基本知识｡
我们了解服务器的功能, 也知道浏览器的功能｡
但我们还是说实话吧｡
这有点无聊
我的意思是, 这并不令人印象深刻｡
如果你把这个给可能的雇主看, 他们会把你当成疯子｡
所以让我们根据我们到目前为止学到的知识来建立一个漂亮的投资组合｡
我有个小礼物给你｡
事实上, 你不必编写自己的HTML､ CSS和JavaScript, 因为这不是一门web开发课程｡
幸运的是, 如果你在网上任何地方搜索免费模板或HTML免费模板, 你可以找到一些非常好看的网站,
你可以免费使用｡
例如, 让我们看一下这里的Universe, 我将链接到这个资源, 这样如果我预览它,
你也可以自己看一看｡
你看
你有一个很好的小网站或投资组合页面, 你可以使用｡
这很酷吧？
而且它实际上已经是平板电脑和移动的友好型, 所以一切都已经为你预先构建｡
很酷吧？
那么我们该如何使用它呢？
那我们就下载吧｡
顺便说一句, 当你继续学习沿着时候, 你可以使用你想要的任何一个｡
但现在, 我们还是用宇宙一号吧｡
就因为这里有个小宇航员, 看起来很酷｡
我们下载这个看看会发生什么｡
好吧, 我有个小问题, 我们要怎么下载模板？
在我们的例子中, 我们想要选择一个HTML｡
就这样｡
我们得到了一个很好的小压缩文件夹, 现在我们有这个下载｡
所以我们打开它｡
哦, 天哪, 那可是一大堆文件和文件夹｡
那我们从这里拿什么呢？
有几件事｡
首先, 这是示例页面｡
我们其实不需要这个, 所以我们把它扔到垃圾桶里吧｡
接下来是资产｡
这些都是我们页面工作的不同资产, 比如宇航员页面｡
所以我们会把它保留下来｡
然后是HTML页面｡
我们绝对需要｡
然后看起来我们有一些JavaScript文件和CSS文件｡
现在这里有一个点GZ, 这就是我们所说的压缩文件, GZ压缩文件｡
这只是服务器发送文件或JavaScript文件的一种方式, 您可以看到它是138 KB, 但以压缩形式,
所以是44 KB｡
因此, 这样我们可以减少发送到前端的数据｡
我们还有MAP, 它在调试过程中对我们有帮助｡
但在我们的情况下, 我们现在不需要担心这个｡
因此, 让我们删除所有的GZIP和地图文件｡
因此, 我们将把它们移到垃圾桶中, 这样我们就只有一个CSS文件和一个JavaScript文件,
而所有其他文件都是用于不同页面的HTML文件｡
现在, 我们要做的是将其复制并移动到项目文件夹中｡
记得这个文件夹吗？
因此, 理想情况下, 我们将HTML文件移到模板和静态文件中, 即CSS和JavaScript文件,
可能还有这里的资源｡
这就是这里的图像｡
那就这么办吧｡
我的网络服务器在这里｡
我首先要复制并粘贴我们刚才复制的内容｡
让我们移动所有的HTML文件｡
我们的模板｡
你知道吗, 让我们删除我们现有的模板, 以及因为我们不再需要他们｡
我们现在有了漂亮的HTML文件｡
然后把这些都吃了｡
我们有了新的索引｡ HTML比我们以前的网站漂亮多了, 所以我们想用它｡
让我们把这些都放到模板中｡
然后让我们把JS和CSS文件以及assets文件夹放到static中｡
太棒了｡
现在我们已经设置好了, 让我们回到我们的项目, 看看它｡
我们还有很多HTML没有写, 但幸运的是, 已经为我们创建了｡
现在, 最后一点设置是, 由于我们移动了文件, 因此需要调整HTML､ CSS､
JavaScript和所有资产文件之间的链接｡
如果我们滚动到索引HTML｡
我们看到, 我们正在寻找梵蒂冈和资产晶圆厂图标｡
但是因为这是在static文件夹中, 所以我们必须在这里添加static｡
所以我们来看看还有什么地方可以利用这些资产｡
好吧, 我会的
看起来我们把它放大一点｡
这是我们的背景图像｡
我们再次查找空间图像, 但这是我们在静态文件夹中所知道的｡
让我们看看还有哪些地方也有｡
让我们做静态｡
我们继续吧｡
静的｡
好吧, 我会的
一切都很好｡
现在我们有了静态文件夹｡
哦, 我们得确保在点前面加一个斜线｡
点仅表示当前目录, 然后在静态文件夹中查找｡
所以让我们回过头来, 确保我们对每件事都这样做｡
我们走吧｡
好了
现在让我们保存这个｡
我认为我们还没有完全完成, 但现在, 让我们进入我们的服务器｡
点馅饼｡
我们回家的路线, 让我们删除我们以前有什么｡
就当是我的家庭聚会吧｡
它不带参数, 而是返回给我们｡
我们的索引｡
没有past in参数的HTML｡
所以还是保存吧｡
返回上一页
或者我的网站｡
看看我们刷新后会得到什么｡
好吧, 我会的
这是一个相当, 相当丑陋的网站, 但它看起来至少我们显示的东西｡
但是马上, 我们注意到它看起来好像没有应用CSS｡
它看起来像我们有一些HTML, 但链接也不工作｡
这是因为我们必须更新文件之间的链接｡
我们要做的就是返回到index. HTML, 在head标签中, 我们可以看到样式表, CSS文件｡
但是, 我们必须再次更新它, 以使其处于静态｡
文件夹｡
还有JavaScript文件, 如果我们一直滚动到底部, 我们会看到JS文件｡
它将再次位于静态文件夹中｡
好吧, 我们来保存｡
然后回去看看这样能不能让事情好转｡
嘿, 看那个｡
那很酷｡
请注意, 这看起来有点大, 因为我增加了我的网站的大小做命令加和减只是为了让我们可以看到更好｡
但这也太棒了｡
现在, 如果我单击“工作”｡
嗯, 我有工作站｡
HTML不存在｡
那我们该怎么解决呢？
我们已经知道该怎么做了, 对吧？
我们需要做的就是更新这些不同的路由, 使其指向适当的模板｡
在下一个视频中, 我会告诉你们怎么做, 但我希望你们自己尝试一下,
因为我们已经学过了｡
所以试着让网站像我们以前那样运作｡
在这里我们的混搭模板, 我会看到你在下一个视频｡