The Making Of

Facing Pages -Very Useful Thread

https://www.createspace.com/en/community/message/25239

I used createspace.com setup by amazon for self publishing musicians, authors & film makers. There are other author self publishing POD (print-on-demand) sites that I compared for my purposes in a visualisation here.

cover file

front and back cover

interior file

NO print on the inside cover (the left) - title page (the right)

then facing pages work (the left) connecting to - (the right)

I used 8.25" x 8.25" and amazon provide a template for their Cover File but after about 7-8 emails (without ability to reply, although they were very clear) I eventually managed to have the Interior File (below) approved for print. Use this as a template.

With excellent help by Pedro Monteiro at

whatype.com

he implemented his complex grid system, which for the style of this magazine made it so easy to align images/text with automatic justifying of spacing between, read more,

the-complex-grid

and download his grid template freely

here.pdf

This is an example of Pedro's grid applied to my layouts. This is exported to pdf and then I re-imported into the above template to ensure correct trims etc and no loss of space.

You can find the Creative Commons, high resolution logo's both vector and raster with SVG, EPS, and PNG files available here to protect your work.

Here I have posted some of the html / javascript / css / php that I have used to construct the site.

(copy paste these codes into notepad/word first, then copy paste into your web editing prog)

The CSS cascading style sheet that colours the scroll bar and the hyperlinks (it can be used to effect more)

You can add your own Favourites icon (Favicon) to feature in the browser tab/link and bookmarks.

Design it in your image editing software, then open using Irfan View

(free download on cnet)

edit - resize/resample - 16 pixels x 16 pixels

Then save as .ico and link using code below.

//// hex codes #FF0075 use this site http://www.colorschemer.com/online.html

//// use this site http://www.davesite.com/webstation/html/favicon.shtml

<head>

<style>

body {

scrollbar-base-color: #FFFFFF;

scrollbar-track-color: #AFAFAF;

}

a {font-family:Times; }

a:link {color:#FF0075;}

a:visited {color: #4186F4;}

a:hover {text-decoration: none; color: #4186F4;

font-size:13;}

a:active {color: #FF0075;text-decoration: none}

</style>

</head>

<head>

</head>

This is the Subscribe Form to capture Email and Name that I use, I had used a PHP to capture to mysql database but echoing the results didnt seem to work, so FormToEmail.php sends the results to my inbox.

To add quicker form filling and save a little space in your layout/design use

One-Click Highlight All

//// use this site http://www.w3schools.com/php/php_mail.asp

//// use this site http://javascript-array.com/scripts/onclick_select_all_text_in_field/

<body>

<input name="yourName" type="text"

/// id="yourName" onClick="SelectAll('yourName');" value="your name" \\\ size="40" maxlength="40" />

</label></fieldset>

</td></tr>

</label></fieldset>

</td></tr>

</fieldset>

</form>

</td></tr></table>

</body>

Back To Coding Menu

<head>
<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>
</head>

/// id="yourName" onClick="SelectAll('yourName');" value="your name" \\\

Back To Coding Menu

Using

Names & Anchors (Back to Top) is a great way to help users navigate long pages of info like getting 'Back to Top' or like on my press page jumping to 'Mar | Apr | Jun'.

You can link from other pages to the anchor on this page if you want, for instance I anchored where I described about on index.htm and all my About links go there.

I used a Cross Fading Quotes effect on my index page to dynamically animate through images to show different previews. I wanted it for text/quotes to show feedback about the magazine, publicity but can be used for any image.

I linked image1.jpg so you can download and use as a template, use WordPad lets you edit the .css & .js, change pause time, size.

//// use this site http://www.w3.org/TR/html401/struct/links.html

//// use this site http://www.dhtmlgoodies.com/index.html?whichScript=inline_slideshow

<body>

</body>

Back To Coding Menu

<head>

</head>

<body>

<SCRIPT type="text/javascript">
initImageGallery('imageSlideshowHolder');
</SCRIPT>

</body>

For a second one on the same page use this as well as:

<SCRIPT type="text/javascript">
initImageGallery('imageSlideshowHolder2');
</SCRIPT>

Back To Coding Menu

Sign up for the newsletter to get Visualisation Magazine updates. Email addresses will never be misused or you can blugeon my eyes out with a spoon: