Fixed Layout을 위한 아마존 mobi파일 소스입니다.
아래와 같이 일단 폴더와 파일명을 만드세요.
폴더는 새폴더를 만들어서 이름을 바꾸면 되겠죠?
파일 또한 새파일 만들어서 이름을 아래와 같이 써서(확장자명도 함께)
저장해주면 됩니다.
참고로 EditPlus3을 쓰면 편리하답니다.
This is the Amazon mobi file sources for Fixed Layout.
Create one folder and named the file as follows.
Once you create a new folder then rename the folder.
Create a new file and change the name of that file as follows (with the extension filename) and save it.
Note that using EditPlus3 is more convenience.
css폴더에서는 폰트타입을 결정하는데 저는 이미지만 들어가므로 패쓰~
그리고 images폴더에는 그림을 넣어 주시면 되는데요.
여기서 중요한 것은 가로가 1280픽셀이어야 한다는점!
그래야 새로나온 킨들기기 등에 더 잘보인다네요.
The css folder to determine the font type, but I only use the image.
So I'm going to skip this part.
Put the picture in the images folder.
The important thing is, it must be 1280 horizontal pixels!
So it'll look better for new Kindle devices.
그럼 css폴더를 열어볼까요?
아래와 같이 stylesheet.css 파일이 있네요.
So let's open the css folder?
There's a stylesheet.css file as shown below.
파일을 열면 아래의 소스를 복사해서 넣어줍니다.
When you open the file then copy and paste the sources below.
/* CSS Reset
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
/* Full Screen Page Layout */
div.fs {
height: 800px;
width: 1280px;
}
/* img-이미지의 크기 여백 등을 규정함 */
It determines the size of the image or the margins.
img {
position: absolute;
width: 1280px;
height: 800px;
margin: 0;
top: 0;
left: 0;
}
/* 여기서부터 각 페이지의 특정 레이아웃을 위한 클래스들입니다. *//////////////////////////////////////
From here, this is the classes for specific layout of each page.
/* coverpage */
.page001 {
height:800px;
width: 1280px;
overflow: hidden;
}
/* 폰트 */ Font
h1 {
font-size: 30px;
}
여기까지입니다.
그럼 이젠 content.opt를 열어보겠습니다.
That's it for now.
So now, let's open the content.opt.
<?xml version="1.0" encoding="UTF-8"?>
<package xmlns:xx="http://saxon.sf.net/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/metadata/dublin_core" unique-identifier="BookId" version="2.0">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
<meta name="fixed-layout" content="true"/>
<meta name="orientation-lock" content="landscape"/>
<meta name="original-resolution" content="1280x800"/>
<meta name="book-type" content="children"/>
<meta name="RegionMagnification" content="true"/>
<dc-metadata xmlns:dc="http://purl.org/metadata/dublin_core" xmlns:oebpackage="http://openbook.org/namespaces/oeb-package/1.0/">
<dc:title>The Story Of Isaac</dc:title>
<dc:creator>Choi Young Soon</dc:creator>
<dc:language>en</dc:language>
<dc:identifier id="bookid">9788997978007</dc:identifier>
<meta name="cover" content="cover-image"/>
</dc-metadata>
<x-metadata>
<EmbeddedCover>images/img01-00.jpg</EmbeddedCover>
</x-metadata>
</metadata>
<manifest>
<item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
<item id="style" href="css/stylesheet.css" media-type="text/css"/>
<item id="cover" href="file01-00.xhtml" media-type="application/xhtml+xml"/>
<item id="cover-image" href="images/img01-00.jpg" media-type="image/jpeg"/>
<item id="file01-01" href="file01-01.xhtml" media-type="application/xhtml+xml"/>
<item id="img01-01" href="images/img01-01.jpg" media-type="image/jpeg"/>
<item id="file02-01" href="file02-01.xhtml" media-type="application/xhtml+xml"/>
<item id="img02-01" href="images/img02-01.jpg" media-type="image/jpeg"/>
<item id="file03-01" href="file03-01.xhtml" media-type="application/xhtml+xml" />
<item id="img03-01" href="images/img03-01.jpg" media-type="image/jpeg" />
<item id="file04-01" href="file04-01.xhtml" media-type="application/xhtml+xml" />
<item id="img04-01" href="images/img04-01.jpg" media-type="image/jpeg" />
<item id="file05-01" href="file05-01.xhtml" media-type="application/xhtml+xml" />
<item id="img05-01" href="images/img05-01.jpg" media-type="image/jpeg" />
<item id="file06-01" href="file06-01.xhtml" media-type="application/xhtml+xml" />
<item id="img06-01" href="images/img06-01.jpg" media-type="image/jpeg" />
<item id="file07-01" href="file07-01.xhtml" media-type="application/xhtml+xml" />
<item id="img07-01" href="images/img07-01.jpg" media-type="image/jpeg" />
<item id="file08-01" href="file08-01.xhtml" media-type="application/xhtml+xml" />
<item id="img08-01" href="images/img08-01.jpg" media-type="image/jpeg" />
<spine toc="ncx">
<itemref idref="cover"/>
<itemref idref="file01-01"/>
<itemref idref="file02-01"/>
<itemref idref="file03-01" />
<itemref idref="file04-01" />
<itemref idref="file05-01" />
<itemref idref="file06-01" />
<itemref idref="file07-01" />
<itemref idref="file08-01" />
</spine>
<guide>
<reference type="cover" href="file01-00.xhtml" />
<reference type="text" href="file01-01.xhtml" />
</guide>
</package>
대충 감이 오시나요? Can you get it roughly?
<meta name="orientation-lock" content="landscape"/>은
항상 가로로 그림책이 보이게 하라는 내용이구요.
This is to the picture book always shows horizontally.
<meta name="original-resolution" content="1280x800"/>은
이미지 사이즈 입니다.
The Image size.
그럼 이제 file01-00.xhtml을 열어보겠습니다.
Now, let's open file01-00.xhtml.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=1280, height=800"/>
<meta content="text/html; charset=UTF-8"/>
<title>The Story Of Isaac</title>
<link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="page001">
<img id="img01-00" width="1280" height="800" src="images/img01-00.jpg" alt=""/>
</div>
</body>
</html>
별거 없지요? 파일명과 사이즈를 적어주면 됩니다.
나머지 file01-01.xhtml 부터 file08-01.xhtml도 마찬가지입니다.
Nothing special. Just write down the file name and size sufficiently.
The rest is the same for the file01-01.xhtml to file08-01.xhtml.
이제 toc.ncx를 열어보겠습니다.
Now, let's open the toc.ncx.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1" xml:lang="en">
<head>
<meta name="dtb:uid" content="urn:uuid:9788997978007"/>
<meta name="dtb:depth" content="1"/>
<meta name="dtb:totalPageCount" content="0"/>
<meta name="dtb:maxPageNumber" content="0"/>
</head>
<docTitle>
<text>The Story Of Isaac</text>
</docTitle>
<navMap>
<navPoint id="file01-00" playOrder="0">
<navLabel>
<text>file01-00</text>
</navLabel>
<content src="file01-00.xhtml"/>
</navPoint>
<navPoint id="file01-01" playOrder="1">
<navLabel>
<text>file01-01</text>
</navLabel>
<content src="file01-01.xhtml"/>
</navPoint>
<navPoint id="file02-01" playOrder="2">
<navLabel>
<text>file02-01</text>
</navLabel>
<content src="file02-01.xhtml"/>
</navPoint>
<navPoint id="file03-01" playOrder="3">
<navLabel>
<text>file03-01</text>
</navLabel>
<content src="file03-01.xhtml"/>
</navPoint>
<navPoint id="file04-01" playOrder="4">
<navLabel>
<text>file04-01</text>
</navLabel>
<content src="file04-01.xhtml"/>
</navPoint>
<navPoint id="file05-01" playOrder="5">
<navLabel>
<text>file05-01</text>
</navLabel>
<content src="file05-01.xhtml"/>
</navPoint>
<navPoint id="file06-01" playOrder="6">
<navLabel>
<text>file06-01</text>
</navLabel>
<content src="file06-01.xhtml"/>
</navPoint>
<navPoint id="file07-01" playOrder="7">
<navLabel>
<text>file07-01</text>
</navLabel>
<content src="file07-01.xhtml"/>
</navPoint>
<navPoint id="file08-01" playOrder="8">
<navLabel>
<text>file08-01</text>
</navLabel>
<content src="file08-01.xhtml"/>
</navPoint>
</navMap>
</ncx>
파일명만 적으면 되는군요.
간단하지요?
이 간단한 게 안되서 힘들여 한 일인이었습니다.
다음에는 이렇게 만든 파일을 아마존에 등록하기 위한 mobi파일로
변환하는 과정을 알아보도록 하겠습니다.
You only need to name the file.
Simple, right?
It turns out so easy but I've been go through lots of troubles.
Next time, let's take a look at the process of converting this file to mobi file for registration in the Amazon.com.
