SOFTWARE - Web session 3

Today's session is all about adding content like Image galleries and text. This is going to be the trickiest session yet and Simon is going to be taking it at our pace in order to learn how to do it all properly.

Last session we created a template DWT which is what you would do before creating the rest of your website. For our learning benefit we created our index html first and then converted it to a template DWT.

Possible content for websites:

- images
- text
- video
- audio
- animated gifs
- forms and fields (for users to enter text and information. These work with another scripting language)
- maps (on the contact page for example)

Last week we added an image to our website. The image is just a static image, it doesn't move or change, it's the size you want it and thats it.

You can download scripts and html code from the internet. It's best to go for the free ones as they are more editable than the ones you have to pay for which could have water marks.


Downloading lightbox.

The lightbox download gives you css, html and js (javascript).

Drag and drop the js folder into your root folder.

In the css folder there are 2 style sheets - lightbox and screen - these determine the look of lightbox on your website.

In the images folder it gives you the closedown button and the next and previous buttons. These can be edited and tailored to the look of your website.

How to use lightbox.

Copy and pasting the jquery scripts into the write place.

Make sure you fin the head tag and paste the script inside it. The easiest way is the find the head close tag because then you'll know you've pasted it inside the head tags.

We also need to include the css script, which we past in the same fashion.

Then you save the template file.

adding and image. First get your image and change the image size to the required size. Preferably not any bigger than your website. And save it as a jpeg to the quality you want (see last weeks session).

Then we need to create a thumbnail. This can simply be done by cropping the image then saving it as the same name as your other image file then writing 'thumb' after it.

Whenever you have some code in green it signifies that its a link to something else. Useful note.

The next step is to activate the lightbox with the next bit of script.

Once you've copied and pasted it into the editdable region you want to have the image you can change the content of the script. Such as, the image file, the thumbnail and weather or not you want to have a caption with your image.

You can also customise ever single way lightbox works. You can get rid of the white border, stop it from greying out the background and so on.

Adding the thumbnail image.

You can add more images and thumbnails simply by copying and pasting the same line of script and then changing the name on the images. This is where its made easier if you've named your images 'image1, image 2, image 3' and so on.

Grouping thumbnails together.

Slimbox and Fancybox are both free gallery scripts that you can use to include video on your website.

Flexslider is another image gallery that can let you scroll through your images directly on your website and it comes with 6 different ways of functioning.

SOFTWARE - Print session 3

Been given some reading to do on QuarkXpress about Hyphenation and Justification of type.

Specifying 'frames'.

Frames are what the text or images you put into InDesign are inside. You can specify very accurately where you want to position your frames.

Justifying text - everything is adjusted so nothing is aligned left or ragged right etc.

you can do quick changes in multiples or fractions of a frame size by typing /2 for example into the XYWH boxes in the top left of the InDesign document.

/ = divide
x = multiply
number = amount you want to multiply or divide by

Justified text.

Hyphenation and when its good and bad.

You can change the hyphenation and set it so it has a specific circumstance for when it should be used.

cmd + shift + - =  Override the default InDesign hyphen settings. Or you can do it through the tabs a manually.

More on Paragraph styles and Character styles

Character styles only apply to individual characters within a paragraph. Very similar way of creating them as the paragraph styles but you have less options.

Character styles are useful for changing the headings of paragraphs, for example, a hanging heading may need to be made bold to stand out more so you can change it to a bolder font.

Once you've edited a paragraph using a paragraph style and then used a character style within the paragraph style. You can then edit the paragraph style to include the 'nested styles' in the paragraph style. This saves you having to go over each paragraph and change them manually.

Booklets and master pages.

Bets to work in InDesign new document.

Once the document is set up, you get the spread of the booklet called 'readers spread' because you see it as you would when you read the printed article.

Double click on the A-Master button and it will take you to the template for the master page.

You can use the master page to set up layouts for print or for things not to do with print like guides and grids. If you make changes on the master page it will apply the same changes to the rest of the document.

Creating text frames on the master page that can be changed on different pages in the document. All of the items in the master page are locked so they can't be edited unless you press and hold cmd and shift whilst clicking on the item you want to edit. This is called overriding the master page settings. You can also override all the items with this function.

You can have more than one master page per document if you need to have specific changes in the document. You need to create a new master page which will come up as a 'B-Master'

To apply the different master pages to your document you simply drag and drop the master templates onto the thumbnails of the relevant pages in your document. You can change any of them at any point by doing this.

You can also add page numbers to the master pages. This is done by creating a text frame in the master page, going to the type menu - insert special character - markers - current page number.

If you don't want to start the document numbering from 1 then you can specify and edit where you'd like it to start and which number.

This still needs to change so that the 3rd page has the first number in the sequence. This is easily solved by selecting the page you want the numbers to start from before doing the above process.

The first two numbers will still be there you just have to delete them after applying the numbering.

Printing Booklets.

When printing the booklets we need to switch from readers spread to printers spread to see which way the pages go next to each other when printed. InDesign does this for you but it's useful to know this stuff anyway when designing.

If you need to print bigger booklets and want to avoid 'creep' from the pages then you can print several booklets from the document and bind them together. To do this you need to specify the range of page numbers that you want to print for each booklet.