这一节，我们将图片转换成浏览器能识别的文件。主要过程就是将效果图分割成一个一个小图片，然后用HTML和CSS在进行组合，用Javascrip控制一些操作行为。

一、将效果图分割成需要的小图片

在PS中，按住Ctrl建单击图片对应图层，前面的小图标（如下图1），这样图片就被选中（如图2），然后再选择菜单图像->剪裁（如图3），结果图标就被裁剪了（如图4），然后单击菜单文件->存储为Web所用格式（如图5），在对话框中选择PNG-24（如图6），然后存在png格式图片到指定文件夹，这样一个小图片就做好了，最后我们的剪切图片如图7。

根据图片模板动态生成图片 java_2d


图1

根据图片模板动态生成图片 java_根据图片模板动态生成图片 java_02


图2

根据图片模板动态生成图片 java_html_03


图3

根据图片模板动态生成图片 java_2d_04

图4

根据图片模板动态生成图片 java_2d_05


图5

根据图片模板动态生成图片 java_前端_06


图6

根据图片模板动态生成图片 java_根据图片模板动态生成图片 java_07

二、编写HTML和CSS文件

我们web文件结构为img文件夹（保存图片文件夹），css文件夹（保存css文件），js文件夹（保存JavaScript），最外层为index.html文件,如图8所示。

根据效果图，我们的页面布局为三列布局，布局宽度分别为80px，320px，最后一列为剩余宽度。第一列为工具列表，第二列为文章列表，第三列为文章展示和修改。

根据图片模板动态生成图片 java_根据图片模板动态生成图片 java_08


图8

Html文件夹内容具体如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/Base.css">
	</head>
	<body>
		<div class="main"><!-- 整体box主要是时限全屏显示 -->
			<div class="left"><!-- 第一列box -->
				<div class="addbox"><!-- 添加文章按钮box -->
					<img src="img/AddButoon.png" alt="">
				</div>
				<ul class="toollist"><!-- 工具列表 -->
					<li class="currentTool">
						<img src="img/BookList.png" alt="">
					</li>
					<li><img src="img/BookList.png" alt=""></li>
					<li><img src="img/BookList.png" alt=""></li>
				</ul>
			</div>
			<div class="middle listbg"><!-- 第二列 -->
				<div class="logoBox">
					<img src="img/Logo.png" alt="">
				</div>
				<div class="bookName">我的日记本</div>
				<div class="bookCount">共5本日记，1k篇文章</div>
				<div class="currentTime">2022年6月30日 11:33</div>
				<div class="searchBox">
					<input type="text" class="searchInput" placeholder="请输入搜索关键字">
					<button class="searchButton">搜</button>
				</div>
				<ul class="articalBox">
					<li class="articalList">
						<div class="articalTitle">
							<span class="iconBox"><img src="img/SmallIcon.png" alt=""></span>
							我的日记本开发自学笔记
						</div>
						<div class="articalDesc">
							冲进会议室开例会，老板正在宣布工作调整的名单。她的业务居然被无故暂停，她的职位则被一个不学无术，整天就知道开豪车，用菠崃史特泡嫩模的家伙所取代。
						</div>
					</li>
					<li class="articalList currentArt">
						<div class="articalTitle">
							<span class="iconBox"><img src="img/SmallIcon.png" alt=""></span>
							我的日记本开发自学笔记
						</div>
						<div class="articalDesc">
							冲进会议室开例会，老板正在宣布工作调整的名单。她的业务居然被无故暂停，她的职位则被一个不学无术，整天就知道开豪车，用菠崃史特泡嫩模的家伙所取代。
						</div>
					</li>
				</ul>
			</div>
			<div class="right"><!-- 第三列 -->
				<div class="articalEditBox">
					<div class="articalTitleBox">
						<div class="Titelinput">
							<div contenteditable="true" class="titleEdit" ></div>
						</div>
<div class="iconSelect">图标</div><div class="colorSelect">颜色</div>
					</div>
					<div class="articalToolsBox">
						<ul class="articalToollist">
							<li><img src="img/ToolsIcon.png" alt=""></li>
							<li><img src="img/ToolsIcon.png" alt=""></li>
							<li><img src="img/ToolsIcon.png" alt=""></li>
							<li><img src="img/ToolsIcon.png" alt=""></li>
							<li><img src="img/ToolsIcon.png" alt=""></li>
							<li><img src="img/ToolsIcon.png" alt=""></li>
						</ul>
					</div>
					<div class="articalEditEBox">
						<div class="articalEdit" contenteditable="true">ww</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

Css文件内容具体如下：

html,body{margin: 0;padding: 0;height: 100%;font-size: 16px;}
ul,li{list-style: none;padding: 0;margin: 0;}
.main{display: flex;height: 100%;}
.left{width: 80px;background-color: #2d2d2d;}
.middle{width: 320px;}
.right{background-color: bisque;flex: 1;}

.addbox{text-align: center;margin:20px 0;}
.toollist{}
.toollist li{height: 50px;line-height: 50px; text-align: center;border-bottom: 1px solid #ffcb3b;}
.toollist li img{vertical-align: middle;}
.currentTool{background-color: #ffcb3b;}

.listbg{background: url(../img/ListBG.png) no-repeat top center;background-color: #ffcb3b;}
.logoBox{margin-top: 5px;text-align: center;}
.bookName{text-align: center;color: aliceblue;font-size: 16px;font-weight: bold;color: white;}
.bookCount{color: #765915; text-align: center;margin-top: 5px; background: url(../img/Line.png) no-repeat bottom center; height: 23px;}
.currentTime{text-align: center;margin-top: 3px;}
.searchBox{margin-top: 5px;text-align: center;}
.searchInput{background-color: #fcdd89; border: 1px solid #765915;height: 23px;padding: 2px 8px;width: 200px; border-radius: 5px;}
.searchButton{border-radius: 35px;border: 1px solid #765915;height: 35px;background-color: #fcdd89;width: 35px;margin-left: 5px;}
.articalBox{margin-top: 10px;}
.articalList{line-height: 25px;margin-bottom: 3px; padding: 3px 10px;cursor: pointer;}
.articalTitle{color: #2d2d2d;font-weight: bold;}
.iconBox{}
.iconBox img{vertical-align: middle;}
.articalDesc{color: aliceblue;line-height: 23px;font-size: 14px;}
.currentArt{background-color: #2d2d2d;}
.currentArt .articalTitle{color: #fcdd89;}

.articalEditBox{margin:10px;}
.articalTitleBox{display: flex;}
.Titelinput{flex: 1;}
.titleEdit{background-color: #fcdd89; border: 1px solid #765915;height: 23px;padding: 2px 8px;border-radius: 5px;margin-right: 3px;}
.iconSelect{width: 50px;}
.colorSelect{width: 50px;}
.articalToolsBox{margin-top: 10px;}
.articalToollist{background-color: #f3f3f3;padding-top: 5px;padding-left: 5px;}
.articalToollist li{display: inline;margin: 0 3px;}
.articalEdit{background-color: #fcdd89;padding: 10px;}

三、视频教程

我用视频的方式记录了整改开发过程，希望有疑问的朋友点击观看视频，视频有些长，请大家静下心新来学习。