Creating my website – static pages.

Following the number of sessions on Adobe Dreamweaver CS6, I was able to begin working out how I wanted my website to look and what I needed to do in order to achieve this. I wanted to keep my layout fairly simple but push myself to create something a bit creative and pleasing to the eye. I drew up a rough idea of how I imagined it to look and began piecing together the different div tags I would need and the various sizes of these.

Initially, I opened a New HTML and created a new site for all the relevant files for my website to be stored. I changed the title to victoria simkiss photography, and saved the page as index.html. I then created a new style sheet and attached this accordingly. In the style sheet, I then created my first CSS rule.

New CSS > Tag > Body.

I set the font family to ‘Verdana, Geneva, sans-serif’ and the background colour to #CCC – a light grey.

website1

Following this, I set up another 3 main div tags along with a CSS rule. I had one for header, links and content with appropriate sizing.

website2

With an idea for the appearance of my website in mind, I opened up Adobe Photoshop CS6 in order to create my header.

New > Insert header measurements > #CCC for background colour > Filled with bucket tool > Text tool ‘Victoria Simkiss Photography’ > Font: Edwardian script ICT > Centralise > Save as JPEG.

website3

website4

Following this, I then went back into the CSS rule definition for my header tag, and uploaded this file as the background image.

website5

Next, I created the appropriate link ‘buttons’ to add to my links tag. I also did this in Photoshop. As the width of my links tag is 900 pixels, I divided this by 4 knowing I have 4 different links I want therefore the dimensions of my buttons have to be the size of 225 x 50 pixels.

New > Insert link button meaurements > #CCC for background colour > Filled with bucket tool > Text tool ‘Home/About/Blog/Contact’ > Font: Calibi 9pt > Centralise > Save as JPEG.

website6

For each link, I simply changed the text and saved as an alternate JPEG. Following this, I then inserted each image into my links div tag and also added alternate text. This was how my website then appeared.

website7

Looking at it as a whole, I wasn’t happy with the appearance of the two fonts – I felt there was too much of a difference between them and the font size was slightly too big. I went back into photoshop and altered the text so that the font was changed to Cambria and size 6pt.

website8

In my main content of my index page, I wanted to create links to 6 different galleries of my work. I wanted 6 square boxes to represent these links therefore I created the appropriate div tags sized 233 x 150 pixels. Ensuring that they were placed properly and lined up correctly was very tedious and time consuming as judging the margins could often be quite difficult however with perseverance I was able to successfully place them.

website10a2

I wanted there to be a preview of one of my images for each subject, and when you hover over them the title appears. I knew for this I needed to create rollover images which require two different images. To begin doing this, I selected the 6 main images I wanted to use for each subject. Each was required to be 233 x 150 pixels therefore I resized these in Photoshop. This would form the first image of my rollover image. I then copied this image and increased the lightness +20 so that you can see a change when you scroll over. I also added the appropriate text for each subject in cambria font to match the links, size 14pt and in white.

website9

I then went back to Dreamweaver and inserted my rollover images into each div tag.

website10

website10b2

After uploading all my rollover images, this is the final appearance of my index page.

website10c

After this, I created my about page. Here, I kept the header and links the same but changed the content. I also created this in Photoshop with the same colour and fonts as my index page. I did exactly the same for my contact page, but just changed the necessary information.

website10e

I then added my links so that all my pages link together and you can also access my blog for 252MC via the link.

website10f2

Finally, in order for my website to be seen I uploaded all the required files and html pages to my FTP programme. My website can now be seen at www.victoriasimkissphotography.co.uk

I am really pleased with how my website has turned out so far. My home page turned out exactly how I hoped and imagined. With more time, I want to be able to actually add my galleries to the appropriate pages so people can view my work. This is definitely something I will expand upon soon.

Advertisements

~ by victoriasimkissphotography on February 26, 2014.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Yasmin Taylor Photography

Making your memories last...

Gemma Rose Jarvis

FInal Year Photography

Katherine Michelle

Coventry University Student Blog

Aaron Sehmar University Blog

A topnotch WordPress.com site

emmasheaphotography

Emma Shea: Currently Studying Photography at Coventry University

Lucy Bartlett Photography

Third year Photography student at Coventry University

inspireasmile

Spark your imagination. Capture it.

Metal Mondays

With Charlotte, Mo and Quincy, every Monday from 8pm-10pm

jessicaoakes

Framing The World Through My Photographs

%d bloggers like this: