This week we have been playing around with our website build.
I chose to design a jewelry website and showcase designers and their jewelry. Firstly we drew up and designed a sketch of what layout we wanted our website to form. We were following the layout that Philippa has supplied with the Evolve mock up but we could change it around slightly to fit our content.
So we started building it by using the HTML from the Evoke website that we had already created in the last few weeks and linked a new CSS file to this new HTML file using the <link href="css/goodasgoldstyle.css" rel="stylesheet" type="text/css" />
We then reset the margins to zero using the universal tag (in css)
*{ margins:0;
border:0;
padding:0;
}
To ensure that the CSS has linked correctly you can add a background colour and test it on the browser
body{ background-color:#333;
}
I learnt quickly that you don't need a hash in front of the body tag as it is a natural CSS tag. With the # it doesn't work.
Next, we added all our div names onto the CSS
ie. #container{
#sectionOne{
This ids are what i have given them and the CSS doesn't recognize them, so they need a # to reference that particular part of the HTML.
We then took our chosen images into Photoshop and adjusted them to the correct sizes needed to fit into the sections we laid out.
Using the slice took or image size adjustment I changed my images to suit. I also used the content aware took to widen some images so they sat nicely on the page.
We then saved these files for web.
By doing this it allows you to choose how you optimize your image. You can change the resolution and also adjust the way the file is saved, all while showing you how many pixels it will require to save in that way.
The choices are gif, jpeg or png
These need to be saved into the same place as our HTML index and CSS
I created a separate folder for the CSS and the Images to keep them tidy and away from my HTML files.
To add the images into the HTML you need to select into the correct div and use the tage <img src="folder/pathtoimg" />
But you can also add the folder into the CSS file instead of the HTML
#backgroundimage{
background-img: pathtoimg;}
Positioning the images in the CSS you need to adjust the position etc
#socialMedia{
position:relative;
top:60px;
left:60px;
}
using positive numbers will move the image down, and using negatives will move the image up.
If the image isn't sitting right in the box under the sectionOne closing tag in the CSS create another tag called #sectionOne img{ and change the settings}
I also had trouble with text and image within the same div, and found i had to separately adjust the p tag for it to work correctly and be able to adjust the padding without it changing the positioning of the image also.
We also started work on our second page which i called 'about'
To do this we copied the original index.html file and paste the copy into the same folder just renamed about.html
This then needs to be checked to ensure it still links into the same CSS file (which it should because its identical to the other file) and this can be done by simply opening the about.html file into the browser and it should be the same as the index.html file.
Next we started dealing with the problem of the menu, beginning with the top menu and ignoring the bottom menu.
In our <ul> tags we needed to add anchors to link the page with where it needs to go.
<div id="menu"><ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="#">Showcase</a></li>
<li><a href="#">Designers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div> <!--end of menu-->
Linking the home button to the index page will bring the user back to the main page, and the # are there until the new pages for the other links have been created.
Finally at the end of class we started editing in and out the content on the about page to suit the design which we had created.
Yay, almost there. Getting one thing wrong is thoroughly frustrating but I'm slowly learning what I can do to change things. Two more weeks!!
