Digital Media- HTLM Static Page

After spending time customising my WordPress site, I revisited the design of my HTML static page as I wanted them to link visually and flow together. I came up with a simple entry page design that showcases a range of my work, showing a wide range of different photographic areas and techniques.

Home page Design 2

As I had the visual design to work towards, and I knew exactly how I would want my static page to look, I began trying to create it on Dreamweaver. To start with I used a basic HTML layout template that consisted of a header, a menu bar, a middle and footer section; as I did not want a menu bar on my entry page I decided to remove that section, leaving me three sections to work on. For now I left the middle section as I knew that would only be images and these would be inserted at a later stage, and so I began by entering the text I wanted for the header and footer.

For the header I wanted the same text and design as the header on my WordPress page and so I used CSS coding to change the style and appearance of the header; to make sure I was editing the right section, I gave the header ID #Header, this would mean that any CSS changes I make to the ‘header’ section of the coding, would only affect the header in my HTML. From the coding below, it shows that I selected a background colour for the header, which is the same dark grey as the one on my WordPress site, I also selected the text colour to be white like the WordPress page too. As I wanted to have a block colour banner, I had to change the height and width, meaning that there was a 80 pixel wide block of colour that filled the whole screen, similar to the one on the WordPress site.

Screen Shot 2015-02-13 at 12.55.15

Screen Shot 2015-02-13 at 12.35.21

Screen Shot 2015-02-13 at 12.44.08

I was pleased with these results, however I now needed to make sure the font and also the position of the text to matched the WordPress design. Changing the font was quite easy; I looked in the coding for the WordPress design to find out what font they used, I then used this font family in my own static page to give me the same text font.

Screen Shot 2015-02-03 at 15.26.19

As I was only editing the text in the header, initially I had a problem doing this as if I edited the ‘header’ CSS, the whole header changed; this was an issue when it came to positioning the text, and so I decided to make a new CSS tag for the text, calling it h1, this meant that any style editing would only affect the text part of the header rather than the whole thing. In this section of the CSS, I selected the font family; I also wanted to move the text to the centre vertically of the header, as well as indenting the title slightly. I made these changes using padding, as this allowed me to move the text as much as I wanted to a small degree using pixels. This gave a much better appearance to the header, that echoed the one on my WordPress site.

Screen Shot 2015-02-13 at 12.54.43

Screen Shot 2015-02-13 at 12.50.02

Screen Shot 2015-02-13 at 12.56.56

Similar to the header, I wanted a dark grey block footer with a link to enter my main WordPress site. To do this I started by once again giving the footer the ID of ‘Footer, so when editing my CSS I knew exactly where I wanted to edit. It echoes the header dimensions and colour, however I decided to not have the footer as thick as the header and so reduced the pixels for the height. I also added padding at the top to move the text down so that it is centred vertically again; to invert the text slightly, as it was not as much as the header, I used the space bar to move it easily and exactly. I decided to have my text as ‘Enter Website’ as this was to the point and clear; for the text I needed to add a hyperlink that linked to my WordPress site, I did this on the HTML section of my coding. However when the link was inserted the text colour was not appropriate and so I used CSS to change the link colour to white. I also wanted it continually white, even once it had been selected; to do this I selected the hyperlink class as ‘general’ allowing me in CSS to change the colours. Overall I am pleased with the appearance of the footer and the header, I now needed to spend time adding my images to the ‘middle’ section.

Screen Shot 2015-02-13 at 13.11.10

Screen Shot 2015-02-13 at 13.22.20

Screen Shot 2015-02-13 at 13.28.55

Screen Shot 2015-02-13 at 13.29.28

Screen Shot 2015-02-13 at 13.31.59

When it came to the middle section, I originally wanted a range of my work displayed to show the different areas of photography I am interested in; however I did consider how this could be quite plain and boring. On Dreamweaver I found an option to insert a rollover image, this is where you have one image at first, but when the mouse moves over the image, it changes to a different image; this rollover image would offer a bit more interest to my page and so I decided to use it. Prior to uploading my image to Dreamweaver, I resized the images to the exact dimensions, meaning that when they were imported they did not need resizing; I also saved all my photographs for the web, meaning that they were smaller sizes and so wouldn’t take as long to load in the web browser, I did all this in photoshop. For the size of my images I worked out the number of images I would want on my two rows and the spacing between each image, so that I could work out the exact dimensions of each single photograph. To create a rollover image, it was very simple, I used the ‘insert objects’>’rollover image’, this option then allowed me to select two photographs that would be the pair that created one roll over image; I tried to select two different images so that they were obviously different when ‘rolling over’, I also made sure that I paired landscape images with landscape images and portrait with portrait. When it came to the position and placing of the images, I wanted portrait and landscape alternate, I also wanted different image themes and styles next to each other so that I don’t have just one section of a‘black and white images’. Overall I am really happy with the range of images shown on this entry page, they show the different areas of photography I am interested in, as well as by having the rollover images, the page has become more exciting and interesting for my viewers.

Screen Shot 2015-02-13 at 13.43.58

Screen Shot 2015-02-13 at 13.45.27

Finally at the bottom of my static page I decided to add my social media platform links, this would allow my viewers to also look at my whole online profile, this includes my LinkedIn, Twitter, Instagram and Flickr accounts. I wanted the thumbnails to echo the ones on the WordPress site and so I used logos of each social media to be my links; I did this by inserting the logos as images and linking them with a hyperlink. For the position of the thumbnails, even though on my WordPress they are on the bottom right, because of my ‘Enter Website’ link, I decided to put them on the left side, so one side isn’t too cluttered. These social media links are small enough so they are not a distraction, however they are also still clear and easy to see.

Screen Shot 2015-02-07 at 18.28.27

Screen Shot 2015-02-13 at 13.54.21

Once I was happy with my static page, I tested in on Dreamweaver through the web to make sure everything worked correctly, such as the rollover images and links. I then had to create a FTP account which would allow me to upload my static page to the server. This was relatively simple I just followed the steps my tutor had told me; once I had an account, I could then add the server to my Dreamweaver site, this would then allow me to select files or pages that I would want on my server. I selected my index/entry page as well as the file of images used for the rollover image, I then attached these to the server; originally it didn’t work but then I realised it was because I had used capital letters in some of my files, I went back and renamed any files that were named incorrectly, re uploaded them and then re-added the site to the sever; this worked much better and my entry page was now the first thing you see when you visit www.jessicalouisebell.co.uk. Unfortunately there was one problem, the webpage was bigger than the design of the entry page, meaning there was a white border along the right side and bottom of the page; to correct this I revisited Dreamweaver and the CSS coding and added a section of coding that applies for the whole ‘body’ of the website, I made its width 100% meaning it would fill the whole web browser. I also added a 8 pixel margin so that there was still a white border around the whole webpage, and fixed the whole site, meaning that whatever web browser I open my site on it will always have the same layout. I re-added the site to the server and this worked well, my static page is now up and running correctly and is fully functional.

Screen Shot 2015-02-13 at 14.12.32

Overall I am really happy and proud of my static site, I feel it visually links to my main WordPress site, while also offering a creative and interesting way to show my portfolio of work.

Advertisements

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