DESIGN PRACTICE: Production of website

PRODUCTION OF WEBSITE

To start my website i created a folder on my laptop called 'Website' just to keep everything together so i didn't get confused. I also added an images folder.

When opening up dreamweaver i removed to unnecessary lines of text and saved it as index in the website folder.

I next created a folder to attach the website folder to the dreamweaver file showing dreamweaver where the file is so all the content is there.

Creating CSS: Creating a new document

I next created a css sheet style sheet.css

Saving it in website folder.

I next added the container:

I then added the container div to the source code so it was aware there was a container on there .

I next added in the appropriate options so that my container doesn't have a header or a footer and flushes to the top.

I listed the pages for my website and put them into my container

I next encased my links in a <a> tag

The code above allows any change of the links properties to animate eg. moving to the left when hovered on i wanted it to move quickly so i set the time to 0.3 seconds also ease-in-out allows it to animate in and out i did this so it didn't jump backwards and forwards.

I changed the vinyl image i used as i felt it didn't fit with the aesthetic i found a new image and opened it in photoshop i re-saved over the file and added it back in where the original photo was and called it record.

I wanted to add background as it was to plain and i felt there was to much negative space.

I found an image from a website and changed the colour to light grey using photoshop. I grey scaled and inverted it.

I used this code to place the background.

I Next wanted to make my navigation to the top of the page for the other pages so i needed to copy the code. This is because it has the same structure.

By using display:inline-block; I was able to sit all my links on the same line. I altered their padding between each link to spread them out.

At this point I then shrunk the size of my vinyl image, which will act as my logo and link to the homepage. I once again added the css3 animation code to shift my links up when hovered over.

I wanted to keep a theme with my website, so I also used my vinyl image for the favicon.

The <link rel=icon type=image/ico> element allowed me to do this.

On the homepage I didn't the top navigation to be visible, so using visibility: hidden; I was able to keep the code. The reason I did this is because any search engine would want to see that information to know the website was structured properly, giving a better chance for it to appear higher up in search results.

This is my finished home.

To attach the sheets that i have to create my linking pages i attach pages to the style sheet.css

Next i wanted to display six images at one time and i needed to create a slider as my website is quite simple i wanted to add something to make it more innovate and easy to view and use.

I wil use this slide for my 3 main pages that feature the images. I won't need it of my homepage and for my

I downloaded j-query which is a library built on java script to make it much more powerful i placed it in a script folder as this is a modern routine of a well built website and to keep it organised so i didn't get confused.

To enable jQuery i placed a script tag on each of my pages. The reason i placed this last on the html is because it takes the longest to load and you want your website to load as quick as possible.

JQuery alone doesn't have a built in image slider script so i found owl carousel ( A very powerful image script)

I placed the require files for owl carousel in there right folders eg. the .js file and .css file.

I next copied the code from owl carousel and placed it in my script.js file. The code : $( document ).ready allows code to be triggered as soon as the file is loaded.

Because i wasn't familiar with how to place in the required code for the css ,java script and html i used the demos on the website as shown above.

As before i needed to include the java script file on my html page once again at the bottom to save page loading time.

I tested that the script worked with the demo code. It worked successfully.

IMAGES

In the image tag i used the ''src" to locate were my images were so they would work for the sprite technique.By putting 2 images in one png. i cut my image folder size down by half and i was able to make the code more generic and organised.

I made each image in the structure the size it would be cut in half, by using a 1x1 image that was transparent i was able to choose the back ground image for each image the way i targeted these was by giving them a class name that took the first letter of the current page and the number slide it was. To show the second half of the image i simply added the hover affect that shifted the background position 50% ( to the bottom) up which resulted in the bottom to be shown.

I used the ul,li method again because technically it is a list of items and a search engine will read this effectively.

I added class homepage on to my index.html so i could control .homepage container because the width is different to every other page.

After researching i learned that the method we were taught to use in dreamweaver for creating a roll over image has high impact on the page load so i discovered the css sprite ( as shown as above ) method which is highly effective for page time and creating the images. i would essentially split the amount of images i need in half.

My initial padding between each element is 35px so i wanted 3 images with 35px padding between them my container was 1024 px so i took away 70 leaving 954px divided by 3 gives me 318 per image.

For geometric images i named them 'G' and the same for the other categories but with the first letter of it e.g. 'PH' for photographic

Once i was happy with my first content page i knew that the rest bar 1 and the homepage would be the same I simply duplicated the page and re-named it as needed. As well as modifying the small bits of code.

The next step is to add all of my content in starting with my images.

(see images post) http://v-redmond1215-dp.blogspot.co.uk/2013/12/production-of-website-roll-over-images.html

ADDED BUTTONS

After my web crit i was concerned that no body knew you could drag the images across to create a sliding motion therefore i felt it would be appropriate to add buttons to my pages. Since they were already built into owl carousel this only took a quite line of java script and a little styling.

This was successful -

These small dots are a well known symbol to represent more that one slide/page. I wanted to keep the minimal style so i felt this was appropriate styling.

FINAL STAGE

My last stage of my website was to create the featured page which will consist of the three images and some information about my featured artist.

I first added the three images into the images folder.

I then re-named them the appropriate names for the page eg. featured -1

I wrote out the structure of the code and placed my image using the ul , il method.

Test:

Top of the image

Bottom of the page

This code i typed was for the container width and the styling for the left and right hand sides of the container.

It worked successfully but i still wanted the text to be justified i didn't want the text to be sticking out.

Also on my content about the featured artist i added in paragraph the href to add a link so people would be able to go to his website. Also added target=_BLANK so that i would open a new tab rather than taking people off my website.