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><p>说是寂寞的秋的清,</p><p>说是辽远的海的相思.</p><p>假如有人问我的烦忧,</p><p>我不敢说出你的名字.</p></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><p>各位亲爱的同学，国庆节放假7天。出门请大家注意安全，特别是要回家或者要远行旅游的同学，要注意人身安全。</p></div></body>
7、制作出来的盒子页面如图：
