Image Optimization

Fun! Today I quite liked the process in preparing our website designs from last week for coding & using CSS to style the site (offline).

Firstly we double checked our individual DIV maps which needed to verify our new design was in accordance to the original structure of the website Phillipa provided us.  From there we went on to prepare a new file/folder structure (this should be done for each website you design/build). Once the project folder has been created you then add folders for BUILD, images & CSS into it...remembering...only files that are actually elements of the website should go into your BUILD folder as this is the folder that is uploaded & should not contain PSD, AI or Doc files.

Here is the EVOKE website design template Phillipa originally provided us to enable us to build using the same HTML base structure.

Next...
copying the index.html file from last week - where we took the EVOKE design & coded it up - we paste into the NEW build folder we just created & open using Adobe Dreamweaver.

...the point?

• To check all menus - incl the footer & replaced where necessary to match our new web site design

• Update all text content as it differs from original template design - copy Illustrator design file & copy paste out the text

Now its time to re-write the CSS & link both the HTML&CSS files together &style our new design by centering the page, adjusting widths &heights according to the measurements you can extract from the Illustrator file, replacing the old images with new ones &finally restyling the text where required.

Once the HOME page was all coded &styled we then proceeded to carry out the same process for the about page by firstly copying the same index.html file& renaming about.html ...remembering... the file name can be anything as long as the following rules are adhered to -

• it must start with a lowercase letter

• no numerals if possible

• only punctuation that be used is a hyphen ( - )

• no spaces

Linking back to the same CSS file as before we are now able to go ahead and style up the about page to match the new website design.

Here is what the CSS&HTML structures look like.

...CRAZYeh!!!!