As seen on my scamp and wireframe I have planned for there to be an image slider as the main content, so that my home page would compose of the nav bar, image slider and a footer.
However when I looked online I was unable to find a simple left to right slider, that I could edit mysel, that would have a label of the website it came from on it such as wow slider. Therefore I went to see my uncle, who used to do a job in coding to see if he could point me in the right direction. He showed me to a slider he recommended, and helped me to input this into my code:
My uncle then helped me to input the image slider into my code, as there were multiple elements that needed to be put in different places. However once he had inputted the information into the code for me, I was able to edit the code to alter the aesthetics of the slider, such as the images, the display of the arrows (prev and frwd) and the flex control paging (dot line) to adhere to the appearance of my website. I did these actions in the flex slider css:
Finding the navigation control and changing the colours of the dot line and display of the arrows:
In order to prevent the arrows from displaying, I had to change the display preference to NONE.
Originally on the slider the dots were black, however I wanted the to be white, and so I changed the values below to 255.
Another thing that I wanted was for the dots that weren't highlighted to be fainter than the one that was and so I changed the last value in the row, also known as the alpha value.
Therefore I changed the unlighted values to 0.3 - 30% opacity and the highlighted circle to 0.9 - 90% opacity.
I then implemented one of the images from my illustrator stack into the code, to test the slider:
I also made the slider and images the same size as my screen as seen in the code below.
Creating the footer.
Styling the footer in the style sheet, In the style sheet I set up both the set up for the footer eg. border, padding etc, and its contents as separate div tags. When placed into HTML the footer content div tag would sit inside the footer div tag.
The footer set up:
#footer {
background-color: #FFF;
height: 88px;
width: 1024px;
margin-left: auto;
margin-right: auto;
padding-top: 22px;
padding-bottom: 22px;
clear: both;
}
The background colour is selected as white to match the header/nav bar. The height and padding sizes are the same as that specified on my wireframes. Margin right and left are selected as auto to ensure that the footer positions itself in the centre of the container. I also set the footer to clear:both to ensure that the footer would clear (go past) any other content on the page.
Footer content:
#footer_content {
height: 44px;
width: 820px;
border-top-width: thin;
border-bottom-width: thin;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-bottom-color: #333;
padding-top: 19px;
padding-bottom: 8px;
padding-right: 50px;
padding-left: 50px;
margin: auto;
font-style: regular;
font-size: 14px;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
clear: both;
}
The code above specifies that inside my footer there will be a border on both the top and bottom of the text creating two parallel lines, these will be both thin, and black in colour. I again followed the measurements with ease from my style sheet. I selected that any text inside of the footer would be of arial, 14px in height and black in colour.
This is the space that would home social links and a further contact us button, and so I decided to call the footer content div tag into dreamweaver and insert some text.
How the footer looks thus far:
Next to the contact us text I wanted to insert social links buttons. Therefore I found Icons the same size as each other on google images (30px x 30px) as I wanted to keep them small within the footer, so that they would not disrupt the frame work.
I inserted a class called 'social icon' which I used to position the icon links inside the footer, mainly controlling the bottom margin.
.socialicon {
margin-bottom:-10px;
}
The icons are able to snap next to each other in a row without being positioned as relative, as the height of the space inside the footer once padding has been added, is not tall enough for the icons to stack on top of one another.
Inside the footer content, I inserted each of the images as image placeholders and assigned them the class from the menu that I had created in my stylesheet.
I then wanted to think each of these 3 images, twitter, facebook and instagram, to there appropriate sites. To do this I created a simple ahref link for each of the buttons, as ahref create hyperlinks. By opening an a href hyper link and inserting the facebook, twitter or instagram htmls I was able to link the buttons to their instigated websites as seen below.
<div id="footer">
<div id="footer_content">
CONNECT WITH US
<a href="http://www.facebook.com/frurtfrozenyogurt">
<img src="images/facebook.jpeg" width="30" height="30" alt="facebook" class="socialicon">
</a>
<a href="http://twitter.com/frurtfroyo">
<img src="images/twitter.jpeg" width="30" height="30" alt="twitter" class="socialicon">
<a href="http://instagram.com/frurtfroyo">
<img src="images/instagram.png" width="30" height="30" alt="instagram" class="socialicon"> </a>
<div id="contactusfooterbutton">CONTACT US
</div>
</div>
<div>
Here is how my footer looks as a final product, as well as in context with the rest of the page and it travelling to the linked websites:
No comments:
Post a Comment