Dreamweaver制作个人网页的全过程（图文教程第一弹）（燃爆了）dreamweaver网页制作怎么保存，

Hi，我们好，2021年来了，放走了艰困的2020年，今年许多情景迄今都忆起，好似就在昨天，用两个网流语归纳是，996、我昂西桑县了，网上说今年依旧艰困，再者与否如此，暂且不讨论，但我们从来不是惧怕的人，秉持再秉持，蔗茅终有遇见霓虹的时候。OK，进入今天的主轴，是对个人网页结构设计讲义，被期待很久（emmmm呢很多过于偏执）,也预备了很久，感觉应该可以问世了，具体来说说说我的结构设计图吧，为了取悦诸位系遇萌捷伊审美，我要小清新，于是我在思考呢产业布局和色彩鲜艳，这点我斟酌了许久，最后决定用紫色作为主色，紫色代表年轻活力么...还添加许多活泼的元素，嗯是的，就这样，开始吧，不能再拖了，再拖又臧玉琰了...还记得上一期三个字数的结构设计讲义吗，《我的故乡》，在这个系列产品的讲义中很自豪得到了许多爸爸妈妈的点评，再次的非常感谢我们的支持和关怀，由于《我的故乡》都是通篇都是选用table产业布局，因此很多爸爸妈妈就回帖于我，与否可以出篇div+css产业布局的网页结构设计讲义，上面答案就很明显了，是的，你想的没错，第一集结构设计是全部选用div+css产业布局，我不是专业的博主哈，文字间的烟花气和Conques，还请诸位嘿嘿。好了甭专业术语了，安排吧，本期讲义的主轴我断然命名为《周末の青柠》，第一集是前不久也是主页，这次打破惯例，Chalancon个图给我们看看最后的效用，如果你真的Conques，极差，那请你受惠点个custom，如果真的说实话，那非常感谢你的抬爱，随着我的表现力竭尽全力往下看。

既然能看到这里，还是要谢谢你的认可，开始之前，我认为你早已看完《我的故乡》系列产品讲义，并且掌握了许多基础的操作、网页制做，当然熟悉我的拳法更好...具体来说预备必要的文档，文档的目录结构如下

再者呢建index.html，就千万别说了吧，《我的故乡》讲义中早已很详细了。

在css文档夹中新建style.css文档，这个文档是用以写css标识符的，好了至此文档都早已预备好了。预备用啥工具来开发写标识符呢？DW or HBuilder，还是notepad++，emmmm ，第一集是主页，就用DW来代码吧，后面的页再用其他IDE吧。用DW关上index.html网页

呢空荡荡，千万别心急，上面来产业布局架构

架构产业布局好了，现在不用心急关上网页，关上网页也是梭螺属，啥也没有...加许多基本的css看效用

跟上节奏哦，竭尽全力编写logo区域

看效用

文字出来了，但是没有居中，写css让其居中，这里要注意了，在设置文字居中之前，我们得先让container容器先基于浏览器居中，logo区域基于container居中，标识符如下

.container{ width:800px; margin:0px auto;}.logo{ width:250px; margin:0px auto; text-align:center; margin-top:30px; height:120px;}

文字可以居中了设置标题样式，标识符如下.logo .caption{ float:left;margin-top:40px;font-weight:bold;font-size:1.8em;}

这般如此，标题样式就设置好了现在看上去太单调了吧，加许多点缀吧，先在images文档夹中加一张图片cat.png，然后编写标识符如下<div class="moon"> <div class="cat"> <img src="images/cat.png"> </div></div>.moon { width: 80px; height: 80px; border-radius: 50%; box-shadow: 25px 15px 0 0 white; float:left;position:relative;}.moon .cat{ position:absolute;top:55px;left:20px;}.moon .cat img{ width:30px;margin-left:10px;}

到目前为止还可以吗？应该很简单吧 

竭尽全力代码编写导航区域，导航区域一般用ul标签实现，标识符如下<ul> <li class="btns on">主页</li> <li class="btns">生活</li> <li class="btns">大学</li> <li class="btns">闺蜜</li> <li class="btns">联系</li></ul>额...呢显示成这样，太不美观了，加点css美颜一下吧。现在好多了喝杯水，再竭尽全力开搞...这时候应该到content区域了，这块有点复杂，左右产业布局，还要图片和文字，先左后右上标识符<div style="width:100%;text-align:center;padding-right:20px;padding-left:20px;"> <p style="text-align:left;font-size:2.5em;margin-top:-50px;"> 青柠 ° </p> <p style="text-align:left;margin-top:10px;"> Green Lemon </p> <hr style="border:1px solid gray;"> <p style="margin-top:20px;text-align:left;"> 活着总 <font size="1px;">有</font> 酸楚，这些<font size="5px;"> 酸楚 </font>总会<font size="1px;"> 有 </font>别的用处。<font size="5px;"> 珍惜 </font>当下，不管难还是易，总有过去<font size="1px;"> 的 </font>时候 (｀・ω・´) </p> <p style="text-align:right;margin-top:40px;color:gray;"> -- 周末 </p></div>.content .ls{ width:300px; height:600px; float:left; overflow:hidden; background:#C1FFC1; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */}

再来右边，上标识符

<div class="rs"> <img src="images/girl.jpg"/></div><div style="clear:both;"></div>.content .ls img{ width:400px;}.content .rs{ width:480px; height:600px; background:white; float:right; overflow:hidden;}.content .rs img{ width:500px;}

到这里为止，大局已定，还有个尾巴，一气呵成，盘它...

<h3 style="margin-top:15px;">周末の青柠</h3><p style="margin-top:10px;">© 2013－2021 youtiy.com, all rights reserved</p>footer{ width:800px; margin:0px auto; margin-top:20px; text-align:center; background:black; color:white; height:80px;}footer p{ font-size:12px;}hr{ margin-top:10px;}

最后成果图

至此《周末の青柠》主页讲义小功告成，非常感谢你耐心的观阅

原创不易，帮忙点个在看

  结语  

希望一切都慢慢变好