Rebelling Against Left Aligning EVERYTHING

 

 After showing my Finished Blog i was told i HAD to Left Align all my text or we will get marks knocked off our grades for this unit. Well i tried and Left Align the text but it didn't look good at all considering i created the WHOLE blog to be Centralized. I just cant  have all my images Centralized and my text Left Aligned because it just looks unprofessional, maybe others will consider centralizing non-professional, but if blogs don't supposed to have centralized text i will consider I'm BREAKING THE RULES, something that all Graphic Designers do and SHOULD do.

Site Map

This is my site map simply created in Adobe Illustrator, site map are used to help

establish how each individual pages are linked together.

Also with using external links such as my Blog Link helps people find

my site on the web, this is known as S.E.O (Search Engine Optimisation)

Incorporating LightBox into my WebSite

 

    

 

 

To incorporate LightBox into my WebSite it was as simple as copying and pasting some coding.

First i copied a section of coding located under the 'Code' tab and under <title> TITLE HERE <title> from the orginal LightBox html, i then pasted this into my Website html and the same section

<title> TITLE HERE <title>. I then went back to the original LightBox html again and selected LightBox Container and went into the 'Code' tab again and just copied the selected coding. I then moved over to my Website html and selected the slice that i wanted my LightBox to appear on and pasted the coding. Originally the LightBox work but wasted quite in the right place so i had to select the LightBox Container under the 'CSS STYLES' tab and manually adjust the placing to 0px for 'Top' and 'Left'. 

Now my Website is Complete. The Site works 100% in Safari wih no problems but when its

previewed in Firefox the site ends up moving position when travelling to other pages. I changed

this in Adobe Dreamweaver by changing the Positioning but when it was previewed in

Safari it kept moving like it did in firefox so i just gave up and left it to work in 

Safari.

Make sure to 'Copy' all content to the Website Master Folder

 

Once i had finished doing everything on the LightBox HTML, i copied
everything but the HTML file from the LightBox folder
which included all images too. I then pasted these into the Website Master
Folder which is simply named 'Web'. 

LightBox Part3

 

 

Here is how i changed the thumbnails to my own. I selected each thumbnail separately and

clicked in the 'Src' box in the 'Properties tab at the bottom of Dreamweaver, i then clicked on the

folder icon to browse for my own thumbnails i created in photoshop and selected the thumbnail

that i wanted.

Very easy and now i have all custom thumbnails now.

Creating my own Thumbnails

I now had to create my own thumbnails to be used in Lightbox
and i had to make sure to create a 'New Document' with the same width and

height as the icons in Adobe Dreamweaver on the Lightbox HTML. The Icons where all set to

63px by 63px so i created the document and placed the big version of the image i wanted it to

link to and adjusted it to my liking for the thumbnail. I then 'Saved As' JPEG and created a folder 

in my Website Master Folder named 'Pics' and saved all my newly created thumbnails

in there. This is the folder i will be linking all the thumbnails to.

LightBox Part2

 

 

 

First before editing the LightBox settings i had to first decide on how many images i was

planning to have, i decided on having 21 in the end. All i did to replecate each thumbnail was
highlight a few thumbnails, hold ALT and drag to the left or the right and this copied the thumbnails.
I did this until i had 21 thumbnails. As you can see in screenshot 2 there is far to many
thumbnails that exceed the black container box so i had to resize each icon. Its very easy
to resize each icon and is as simple as clicking each thumbnail, going to

the 'Properties' tab at the bottom on the screen and typing a new width and height in. I decided on

using 63px by 63px because it seems to fit all thumbnails PERFECTLY.

Make Image as a Background Image

 

 

 

I had to set one of my slices (the one where the content would be placed on) as a Background-Image.

I did this so when i add my Lightbox on top of this area it wouldnt wipe out that image 

and leave a white space. 

First i had to select the grey box in the center (the slice that is gonna be later turned into a 

background-image). I then went to the properties tab at the bottom and found what the slice was called,

it was called 'Work_09' and can be seen in the box next to 'ID' in screenshot 2.

I then moved over to the 'CSS STYLES' tab and selected the #Work-09_. Once i selected that,

i traveled under the 'CSS STYLES' to the Properties for "#Work-09_" area, i then clicked

'Add Property' and selected 'Background-Image'. After that i then clicked on the little folder icon

on the right of the newly created section for 'Background-Image', a pop-up appears and asks 

where to locate image so i located the image with the same name - Work-09.jpeg in the images

folder in my Website Master Folder.

Thats done, i now have made that slice into a Background image now.

LightBox

 

 

 First i had to download Kevin's LightBox Zip file from

http://www.newmedia.artdesignhull.ac.uk/kwhittaker

Once i downloaded that and extracted it i opened the HTML file in Adobe

Dreamweaver. Kevins LightBox can be seen in Screenshot 2, as you can see

its not the right dimensions to fit anywhere in my Website, so i basically clicked

the black box which when selected gave it a yellow border. I then went to the

properties tab at the bottom of the page and changed the width and height to

the measurements of my area where this would be placed which was W-472px and H-203px.

This was an exact fit to place on top of my grey area that i wanted this to appear.

Replacing Background-Image with Image with Text

 

 

Whilst i was trying to create my content for my site it, i changed the chosen font

to the font i used in Adobe Photoshop whilst creating my Site. The font was

Helvetica Neau UltraLite, whilst in Dreamweaver the Font changed but

when saved and previewed in Safari and Firefox it would only display the default font.

So now i had to improvise, so i went back into photoshop and opened the original grey 

background file and i basically typed the content info in there with my font i wanted.

Obviously this would work cos it flattens the font into an image instead but the

only problem doing this is that info cant be copied and pasted off the site. I now then 

'Saved As' and basically called it the same name but with 'Home Page Text' added on

the end. 

Developing my Final Website through Adobe Dreamweaver (Centralising My Site)

  

To centralise my Website i had to click in the 'CSS Style's' tab in Adobe

Dreamweaver, then i clicked on 'All' instead of 'Current'. I then selected #Table_01 

and it brings up the Properties as you can see in the 2nd screenshot. I had to click

'Add Property' then select 'Margin', after that i had to type the word 'auto' in the 'margin'

box then click on 'position' and change it to 'relative'.

Now the Website is Centrally Aligned. 

Developing my Final Website through Adobe Dreamweaver

 

 

 After saving my layout through Adobe Photoshop, i opened the HTML file that Photoshop

created with Adobe Dreamweaver.

Once opened, i selected each button slice and gave them all a link to be taken
to when it's been clicked on. For instance i selected 'WORK' and clicked in 'Link' then
selected the folder icon on the right and selected the HTML file that Photoshop had
created when i created my Pages, which for work i selected the Work.html file.

Development Work

 

 

After deciding on which Website layout i liked the most and fitted my needs by keeping things simple, i used the Rulers and Guides in Adobe Photoshop and created Guides where i wanted my image to be Split, once all the guides where set, i selected the Slice Tool and clicked on the Button named 'Slices From Guides'. This Sliced all the sections that the guides where lining up. I then selected the 'Slice Select Tool' and joined slices up that would not be used, i did this by selecting a few slices, right clicking and selecting 'Combine Slices'.

Once i was satisfied, i 'saved for web' and made sure the preset was set to JPEG High, then i clicked on the option button then 'edit output settings'. After clicking that a pop-up
appeared and then i checked the 'Output XHTML' box then clicked next, then i checked
the 'Generate CSS' box and finally i changed all the 'Default Slice Naming to 'none'
button and then clicked the 'ok' button. Now i pushed on 'Save' set the format to HTML and Images
and i created a folder to store all my created files and clicked 'save'.

I repeated these steps for each page i created such as for Home Page,
Content Page, Blog and Contact Page.

More Developing in Adobe Photoshop

 

  Here i developed 2 of my photography based web design. 

 The first Simple Development is just really plain and simple but yet

looks professional. By keeping my Website simple means that

the viewer's eyes can't be drawn away to other fancy junk but keep them

on the content instead.

The second Development is really BAD, it literally didn't take long and it looked alright on

paper but when i developed it, it didn't look nice at all. I will not be

using this for my final for sure.