TreeSaver 使用教程整理——Step 5: Adding Illustration Figures
请首先阅读前几篇教程，才能对本篇文章了解比较深入：
TreeSaver 使用教程整理——Step 1: Getting Started
TreeSaver 使用教程整理——Step 2: Adding Basic UI
TreeSaver 使用教程整理——Step 3: Creating Grids
TreeSaver 使用教程整理——Step 4: Using a Title Figure
我们在上一步的基础上，copy到 step5 作为我们 step5 初始的基础。
Step 5: Adding Illustration Figures
这步开始，我们需要用到的图片，演示的图片我们可以在 http://www.epathwaysdev.net/treesaver/img/ 获得。 这是爱丽丝梦境游记中的一些图。
这些图我们都将放在演示根目录的 img 目录下。
对演示正文 index.html 的修改
现在我们使用 Figures 来增加图片：
我们在文本的第二段增加如下代码：
<figure><img data-sizes="single" src="../img/01-rabbit-280.jpg"width="280" height="429"alt="An illustration of a white rabbit Looking at a pocket watch"></figure>
就像我们上一步，使用figure显示章节标题，我们现在使用figure显示插图。我们把data-sizes属性设置成single。 这意味着我们要把这个图作为单栏（single-column）来显示。这是因为我们图片的宽度是280px，它正好是单栏的宽度。
下面我们增加一个两栏宽的插图，并且一次增加两张图：
<figure><img data-sizes="single" src="../img/02-alice-door-280.jpg"width="280" height="288"alt="An illustration of Alice looking at a small door behind a curtain"><img data-sizes="double" data-src="../img/02-alice-door-600.jpg"width="600" height="617"alt="An illustration of Alice looking at a small door behind a curtain"></figure>
上面内容源文件中，我们增加了两个img标签，第一个img标签对应的图片是280 pixels，所以我们用的是单栏尺寸；第二个img标签对应的图片是600 pixels宽，所以我们使用两栏宽。
另外我们可以注意到img标签我们使用的是 data-src 属性，而不是 src 属性，这是为了防止非Treesaver浏览器下载两次图片。Treesaver 在处理显示时，将自动把 data-src 属性重命名成 src 。
完整的内容如下：
<!doctype html><html class="no-js no-treesaver"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1"><link rel="stylesheet" href="style.css"><link rel="resources" href="resources.html"><script src="../treesaver-0.9.2.js"></script><title>Down the Rabbit-Hole - Alice’s Adventures in Wonderland</title></head><body><article><figure><h2 data-sizes="title fallback">Chapter I: Down the Rabbit-Hole</h2></figure><p>Alice was beginning to get very tired of sitting by her sister on thebank, and of having nothing to do: once or twice she had peeped into thebook her sister was reading, but it had no pictures or conversations init, “and what is the use of a book,” thought Alice “without pictures orconversation?”</p><p>So she was considering in her own mind (as well as she could, for thehot day made her feel very sleepy and stupid), whether the pleasureof making a daisy-chain would be worth the trouble of getting up andpicking the daisies, when suddenly a White Rabbit with pink eyes ranclose by her.</p><figure><img data-sizes="single" src="../img/01-rabbit-280.jpg"width="280" height="429"alt="An illustration of a white rabbit Looking at a pocket watch"></figure><p>There was nothing so <em>very</em> remarkable in that; nor did Alice think it so<em>very</em> much out of the way to hear the Rabbit say to itself, “Oh dear!Oh dear! I shall be late!” (when she thought it over afterwards, itoccurred to her that she ought to have wondered at this, but at the timeit all seemed quite natural); but when the Rabbit actually <em>took a watchout of its waistcoat-pocket</em>, and looked at it, and then hurried on,Alice started to her feet, for it flashed across her mind that she hadnever before seen a rabbit with either a waistcoat-pocket, or a watchto take out of it, and burning with curiosity, she ran across the fieldafter it, and fortunately was just in time to see it pop down a largerabbit-hole under the hedge.</p><p>In another moment down went Alice after it, never once considering howin the world she was to get out again.</p><p>The rabbit-hole went straight on like a tunnel for some way, and thendipped suddenly down, so suddenly that Alice had not a moment to thinkabout stopping herself before she found herself falling down a very deepwell.</p><p>Either the well was very deep, or she fell very slowly, for she hadplenty of time as she went down to look about her and to wonder what wasgoing to happen next. First, she tried to look down and make out whatshe was coming to, but it was too dark to see anything; then shelooked at the sides of the well, and noticed that they were filled withcupboards and book-shelves; here and there she saw maps and pictureshung upon pegs. She took down a jar from one of the shelves asshe passed; it was labelled “Orange Marmalade”, but to her greatdisappointment it was empty: she did not like to drop the jar for fearof killing somebody, so managed to put it into one of the cupboards asshe fell past it.</p><p>“Well!” thought Alice to herself, “after such a fall as this, I shallthink nothing of tumbling down stairs! How brave they’ll all think me athome! Why, I wouldn’t say anything about it, even if I fell off the topof the house!” (Which was very likely true.)</p><p>Down, down, down. Would the fall <em>never</em> come to an end! “I wonder howmany miles I’ve fallen by this time?” she said aloud. “I must be gettingsomewhere near the centre of the earth. Let me see: that would be fourthousand miles down, I think—” (for, you see, Alice had learnt severalthings of this sort in her lessons in the schoolroom, and though thiswas not a <em>very</em> good opportunity for showing off her knowledge, as therewas no one to listen to her, still it was good practice to say it over)“—yes, that’s about the right distance—but then I wonder what Latitudeor Longitude I’ve got to?” (Alice had no idea what Latitude was, orLongitude either, but thought they were nice grand words to say.)</p><p>Presently she began again. “I wonder if I shall fall right <em>through</em> theearth! How funny it’ll seem to come out among the people that walk withtheir heads downward! The Antipathies, I think—” (she was rather gladthere WAS no one listening, this time, as it didn’t sound at all theright word) “—but I shall have to ask them what the name of the countryis, you know. Please, Ma’am, is this New Zealand or Australia?” (andshe tried to curtsey as she spoke—fancy <em>curtseying</em> as you’re fallingthrough the air! Do you think you could manage it?) “And what anignorant little girl she’ll think me for asking! No, it’ll never do toask: perhaps I shall see it written up somewhere.”</p><p>Down, down, down. There was nothing else to do, so Alice soon begantalking again. “Dinah’ll miss me very much to-night, I should think!’(Dinah was the cat.) “I hope they’ll remember her saucer of milk attea-time. Dinah my dear! I wish you were down here with me! There are nomice in the air, I’m afraid, but you might catch a bat, and that’s verylike a mouse, you know. But do cats eat bats, I wonder?” And here Alicebegan to get rather sleepy, and went on saying to herself, in a dreamysort of way, “Do cats eat bats? Do cats eat bats?” and sometimes, “Dobats eat cats?” for, you see, as she couldn’t answer either question,it didn’t much matter which way she put it. She felt that she was dozingoff, and had just begun to dream that she was walking hand in hand withDinah, and saying to her very earnestly, “Now, Dinah, tell me the truth:did you ever eat a bat?” when suddenly, thump! thump! down she came upona heap of sticks and dry leaves, and the fall was over.</p><p>Alice was not a bit hurt, and she jumped up on to her feet in a moment:she looked up, but it was all dark overhead; before her was anotherlong passage, and the White Rabbit was still in sight, hurrying down it.There was not a moment to be lost: away went Alice like the wind, andwas just in time to hear it say, as it turned a corner, “Oh my earsand whiskers, how late it’s getting!” She was close behind it when sheturned the corner, but the Rabbit was no longer to be seen: she foundherself in a long, low hall, which was lit up by a row of lamps hangingfrom the roof.</p><p>There were doors all round the hall, but they were all locked; and whenAlice had been all the way down one side and up the other, trying everydoor, she walked sadly down the middle, wondering how she was ever toget out again.</p><figure><img data-sizes="single" src="../img/02-alice-door-280.jpg"width="280" height="288"alt="An illustration of Alice looking at a small door behind a curtain"><img data-sizes="double" data-src="../img/02-alice-door-600.jpg"width="600" height="617"alt="An illustration of Alice looking at a small door behind a curtain"></figure><p>Suddenly she came upon a little three-legged table, all made of solidglass; there was nothing on it except a tiny golden key, and Alice’sfirst thought was that it might belong to one of the doors of the hall;but, alas! either the locks were too large, or the key was too small,but at any rate it would not open any of them. However, on the secondtime round, she came upon a low curtain she had not noticed before, andbehind it was a little door about fifteen inches high: she tried thelittle golden key in the lock, and to her great delight it fitted!</p><p>Alice opened the door and found that it led into a small passage, notmuch larger than a rat-hole: she knelt down and looked along the passageinto the loveliest garden you ever saw. How she longed to get out ofthat dark hall, and wander about among those beds of bright flowers andthose cool fountains, but she could not even get her head through thedoorway; “and even if my head would go through,” thought poor Alice, “itwould be of very little use without my shoulders. Oh, how I wish I couldshut up like a telescope! I think I could, if I only know how to begin.”For, you see, so many out-of-the-way things had happened lately,that Alice had begun to think that very few things indeed were reallyimpossible.</p><figure><img data-sizes="single" src="../img/03-alice-bottle-280.jpg"width="280" height="399"alt="An illustration of Alice witha small bottle"></figure><p>There seemed to be no use in waiting by the little door, so she wentback to the table, half hoping she might find another key on it, or atany rate a book of rules for shutting people up like telescopes: thistime she found a little bottle on it, (“which certainly was not herebefore,” said Alice,) and round the neck of the bottle was a paperlabel, with the words “Drink Me” beautifully printed on it in largeletters.</p><p>It was all very well to say “Drink me,” but the wise little Alice wasnot going to do <em>that</em> in a hurry. “No, I’ll look first,” she said, “andsee whether it’s marked "poison" or not” for she had read several nicelittle histories about children who had got burnt, and eaten up by wildbeasts and other unpleasant things, all because they <em>would</em> not rememberthe simple rules their friends had taught them: such as, that a red-hotpoker will burn you if you hold it too long; and that if you cut yourfinger <em>very</em> deeply with a knife, it usually bleeds; and she had neverforgotten that, if you drink much from a bottle marked “poison,” it isalmost certain to disagree with you, sooner or later.</p><p>However, this bottle was <em>not</em> marked “poison,” so Alice ventured to tasteit, and finding it very nice, (it had, in fact, a sort of mixed flavourof cherry-tart, custard, pine-apple, roast turkey, toffee, and hotbuttered toast,) she very soon finished it off.</p><hr /><p>“What a curious feeling!” said Alice; “I must be shutting up like atelescope.”</p><p>And so it was indeed: she was now only ten inches high, and her facebrightened up at the thought that she was now the right size for goingthrough the little door into that lovely garden. First, however, shewaited for a few minutes to see if she was going to shrink any further:she felt a little nervous about this; “for it might end, you know,” saidAlice to herself, “in my going out altogether, like a candle. I wonderwhat I should be like then?” And she tried to fancy what the flame of acandle is like after the candle is blown out, for she could not rememberever having seen such a thing.</p><p>After a while, finding that nothing more happened, she decided on goinginto the garden at once; but, alas for poor Alice! when she got to thedoor, she found she had forgotten the little golden key, and when shewent back to the table for it, she found she could not possibly reachit: she could see it quite plainly through the glass, and she tried herbest to climb up one of the legs of the table, but it was too slippery;and when she had tired herself out with trying, the poor little thingsat down and cried.</p><p>“Come, there’s no use in crying like that!” said Alice to herself,rather sharply; “I advise you to leave off this minute!” She generallygave herself very good advice, (though she very seldom followed it),and sometimes she scolded herself so severely as to bring tears intoher eyes; and once she remembered trying to box her own ears for havingcheated herself in a game of croquet she was playing against herself,for this curious child was very fond of pretending to be two people.“But it’s no use now,” thought poor Alice, “to pretend to be two people!Why, there’s hardly enough of me left to make <em>one</em> respectable person!”</p><p>Soon her eye fell on a little glass box that was lying under the table:she opened it, and found in it a very small cake, on which the words“Eat Me” were beautifully marked in currants. “Well, I’ll eat it,” saidAlice, “and if it makes me grow larger, I can reach the key; and if itmakes me grow smaller, I can creep under the door; so either way I’llget into the garden, and I don’t care which happens!”</p><p>She ate a little bit, and said anxiously to herself, “Which way? Whichway?”, holding her hand on the top of her head to feel which way it wasgrowing, and she was quite surprised to find that she remained the samesize: to be sure, this generally happens when one eats cake, but Alicehad got so much into the way of expecting nothing but out-of-the-waythings to happen, that it seemed quite dull and stupid for life to go onin the common way.</p><p>So she set to work, and very soon finished off the cake.</p></article></body></html>
资源文件的修改：
我们把资源文章中的如下部分修改；
<div class="grid"><div class="container" data-sizes="title"></div><div class="column"></div></div><div class="grid cols-2"><div class="container cols-2" data-sizes="title"></div><div class="column"></div><div class="column col-2"></div></div><div class="grid cols-3"><div class="container cols-3" data-sizes="title"></div><div class="column"></div><div class="column col-2"></div><div class="column col-3"></div></div>
修改为：
<div class="grid"><div class="container" data-sizes="title single"></div><div class="column"></div></div><div class="grid cols-2"><div class="container cols-2" data-sizes="title double"></div><div class="column"></div><div class="container col-2" data-sizes="single"></div><div class="column col-2"></div></div><div class="grid cols-3"><div class="container cols-3" data-sizes="title"></div><div class="column"></div><div class="container col-2 cols-2" data-sizes="double"></div><div class="column col-2"></div><div class="container col-3" data-sizes="single"></div><div class="column col-3"></div></div>
第一栏： 我们对data-sizes 属性值增加的 single 值，标识我们在这里显示的图片最宽就是1栏。
这一步的实际演示效果如下：
第二栏：首先看演示效果：
最乐观效果，我们实现一个图跨两栏。当分栏的区域小到一定程度时， 我们则会用小图。
当区域小到一定程度时，这里就会自动显示小图。
所以我们在模板配置这里，配置了 double 和 single 两种情况。
Similarly, in our two-column grid we can reuse the container, adding double to the data-sizes attribute. However, we still need a container for single-column images. We do so by adding a second <div class="container"> into our markup. But instead of inserting the element into the beginning of the Grid, we insert it just before the final column. We do this because Treesaver automatically adjusts the size of any Column that appears after the Container. The first container is two-columns wide, so both columns appear after it in the markup; since the second container is only one-column wide (and in the second column), it appears only before the final column.
第三栏时
We do not reuse the title container in the three-column grid, instead we create two new Containers: one for single and the other for double. As with the previous grid, we make sure that the order of containers and columns in the markup gives us the correct column sizing (see the documentation on Containers for a detailed explanation here).
整个内容我们可以从下面地址获得：
http://www.epathwaysdev.net/treesaver/step6/01-down-the-rabbit-hole.html
不过这是第6步的内容，我们只需要简单的把第六步增加的调整取消即可。
参考资料：