1、首先制作第一个图片，打开adobe dreamweaver软件，我的是2017版的，当然2018版或者其他版都也可以。打开后，点击文件-新建，双击“文档类型”里面第一个“HTML”，会出现有代码的页面。
2、接着制作盒子，在head部分写入这些代码：
<style>
div{
border: dotted;
width: 380px;
height: 380px;
padding: 30px 10px 40px 20px;
border: 4px 10px 4px 10px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
background-image: url(images/bjtp.jpg);
background-repeat: no-repeat;
text-align: center;
background-size: cover;
}
</style>
3、在body部分里写入以下代码（盒子制作）：
<body>
<div>
说是寂寞的秋的清,
说是辽远的海的相思.
假如有人问我的烦忧,
我不敢说出你的名字.
</div>
</body>
4、第一个页面盒子就制作好了。
5、同样的，制作第二个盒子head部分代码如下：
<style>
*{
padding: 0;
margin: 0;
}
#mybox{
border: 1px #CCC solid;
height: 300px;
width: 350px;
margin: auto;
}
#mybox h1{
background-color: orange;
text-align: center;
font-size: 25px;
padding: 12px;
font-family: kaiti;
}
#mybox p{
color: grey;
padding: 10px;
line-height: 30px;
text-indent: 2em;
}
</style>
6、body部分代码如下：
<body>
<div id="mybox">
<h1>通知</h1>
各位亲爱的同学，国庆节放假7天。出门请大家注意安全，特别是要回家或者要远行旅游的同学，要注意人身安全。
</div>
</body>
7、制作出来的盒子页面如图：
