Tag Archives: title

First class using SimpleViewer

html – hyper text mark up language – the elements from which a webpage is built

CSS – Cascading Style Sheets

XML – Extensible mark up language

Audience – students, designers or possible employers.

Index – home page.

Gallery – style

Images – my final pieces

Thumbs – thumbnails

FTP– File Transfer Protocol – Network protocol to transfer files from one host to another.

34sp.com – to buy a domain – cheap – £3.99 a month – one click service for WordPress.

Root folder – where all the files are saved.

Open Source software – Code that is accessible and can be edited by anyone.

Here is the website where I downloaded SimpleViewer. The website tells me that ‘SimpleViewer is a free, customizable image viewing application. Lightweight and easy to use, it features smart preloading, a resizable interface, thumbnail menu and optional description text.’

Quote from ‘http://www.simpleviewer.net/products/


First of all I installed the svBuilder.air file.

Here is what the SimpleViewer Builder looks like.

Dreamweaver > site > new site. I then needed to give the site a name.

We called this site ‘Simpleviewer Test’. Then I clicked on the little folder icon.

Now I looked for the location where I wanted to save it. I clicked ‘Choose’.

In this case I saved it on my memory stick in a folder called ‘Website’. I clicked the save button.

Then I double clicked ‘gallery.xml’.

Here I clicked ‘Open’.

Here is what the code looks like in the gallery.xml file. Blue text can’t be edited, green text can.

It probably is quite difficult to see but near the top where it says:

title=”SimpleViewer Gallery”

I changed it to:

title=”Emily’s Gallery”

title – Text to display as gallery title
textColor – Colour of text, set as a hexadecimal code.
frameColor – Colour of frame around images, hexadecimal code.
frameWidth – Width of frame around images in pixels.
thumbColumns – Number of columns for thumbnail images.
thumbRows – Number of rows for thumbnail images.
maxImageWidth – Sets maximum width of images in pixels.
maxImageHeight – Sets maximum height of images in pixels.

Now I double clicked ‘index.html’.

Here is what the page looks like.

We downloaded these images from Moodle.

In the simpleviewer_230 file I opened the images file and deleted two files called tall.jpg and wide.jpg. I then put the new images into the folder called ‘images’.

I also needed to make some new thumbnails to replace the old ones. I used Photoshop for this. I made a new file with the size 110px x 75px. I set the resolution to 72dpi.

I opened up the image called Cloud2.jpg and dragged it over in to the new file I’d made. I moved the image around until I got a nice looking thumbnail picture. I then saved the new file in the thumbs folder. I did this for all three images.

I then deleted off the code, from the bottom, so only three lots were left. Originally there was nine lots of code but I’m only using three pictures. I had to be careful not to delete this part from the very bottom though:



I changed the code so it went from:


I should have called the thumb image Cloud2 like the original image. I fixed that after but I don’t have a screen shot for it.

There is also the option of adding in a link and caption.

I will be finishing this work in the next class.

Looking at magazine layouts in Vogue

I really like the way the images have been arranged here because it gives me an idea for a design I could do for my project. There is quite a lot of type in italics here. Even though there is quite a lot going on here I don’t feel overwhelmed.

This spread looks beautiful and delicate. It is interesting that there is a white margin on the right side of the spread. The typeface used looks delicate and classy.

The big drop cap is really eye-catching. I love the typeface used. The right hand page is very text heavy but it is an interview so the amount of type is appropriate. You can see the use of a grid here. The pull quote is in italics.

Again there is a white column down the side and the pull quote fits in at the top. I can see that the same grid is being used here.

I thought this was an interesting spread because of how low down the title, the sell and the body text is. The reason why I think this works is because the use of white space on the right hand page reflects the image on the left. The whole spread is quite striking.

The next five spreads have a scrap-book look about them. I think I would like to discuss with my tutor and my fellow students about this way of displaying images. I suppose it is a case of taking a particular project and asking oneself a question. Is this a suitable way of displaying the images I have?

Clear use of a grid with three columns. White space left at the top to stop the spread from becoming overwhelming.

I think it is appropriate here how the images go from one side of the spread to the other and are in date order. I can see the use of a grid here that has three columns.

This spread is really clear and I can see how a grid has been used. I like the use of type with part of the title in bold.

All of the above are from the July 2011 issue of Vogue magazine. See below:

Glow sticks for double page spread

I wanted to use this picture as it shows the cyber hair style really well. I cut out the figure in Photoshop.


I thought these glow sticks would be really colourful and eye-catching.


Here I am trying to get the title to be seen on the page with the glow sticks. The colours mean the type can be difficult to see so you have to get it in the right place.

I have placed the title along the glow stick. I think this idea works well and the different elements have space to breath.

I think using two pictures looks more attractive than just having a large amount of body text. I checked with the tutor that I had enough body text here and I do. I will most likely be using this idea as my final idea.