I positioned all my background images in a stack in illustrator so I could visually see the setup I was trying to achieve:
I then began to write up the frame work in the style sheet, creating 3 separate containers and giving them the background images I had created in illustrator. I found that when I looked at my wireframe, that the bottom franchising section (blue) would not be big enough for the amount of content I needed to include, and so I extended the image's height above, and lengthened the height of this section on the style sheet.
Starting the code:
Coding these 3 sections was very easy, each of them followed the same arrangement except from height differences and back ground colours.
section one:
#aboutus-pink {
width:1024px;
height:680px;
background-color:#F09;
margin-bottom:10px;
background-image:url(images/aboutuspink.png);
}
I had made the heights a certain size so that they fit on my specified screen size (1024 x 768) perfectly. The nag bar sitting at the top was 150px, the image background 530px and the footer 88px, all adding up to my screen height of 768px. However as I have explained before, with using a fixed header, the top box would need to be the size of the background image (530px) plus the size of the navbar (150px) Because, if I did not do this the top 150px of this section would be constantly hidden behind the navbar.
I gave the box a background colour similar to the background colour of the image, so that If the background image doesn't load up straight away, there is an implication that something is going to appear in its place. I also specified for there to be a margin of 10px at the bottom, to give a small break in-between all of the images.
Second section:
#aboutus-green {
width: 1024px;
height: 530px;
margin-bottom: 10px;
background-image: url(images/aboutusgreen.png)
}
The second section I could make the exact size as shown on the design sheet at 530px, this section does not need an extra 150px ontop as the image section on top fills the space behind the nag bar when scrolling. The image box follows exactly the same set up in terms of background colour matching the image, width and a bottom margin.
Third section:
#aboutus-blue {
width:1024px;
height:700px;
background-color:#0CF;
background-image:url(images/aboutusblue.png);
}
The third section I had originally made the same size as the middle, however I realised that this space would not be larger enough to house all of the content that It needed and so I decided to extend the section by 170px to 700px.
I then pasted in the same footer code I had used on the homepage and re- linked up the social links images.
I then went back to filling in the content in the first section, I mocked up in illustrator how I wanted the content too look according to the wire frames I created.
I went into the style sheet, and styled these two text sections according to my wireframes:
#aboutus-frurtwayoflife {
margin: 185px 0 0 0;
display: inline-block;
width: 350px;
height: 70px;
color: #ffffff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left: 250px;
font-size: 28px;
font-style: normal;
}
#aboutus-frurtwayoflifetext {
margin: -5px 0 0 0;
display: inline-block;
width: 600px;
height: 70px;
color: #ffffff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left:210px;
font-size: 16px;
font-style: normal;
}
I then tested this out by viewing it in google chrome.
However I found that when viewing it in google chrome, the left margin for the header was off and the width I had allowed for the header was too small allowing it to spill over onto another line.
I then stood back and thought to myself, I don't want to have to constantly jump between dreamweaver and google chrome when making constant slight changes to elements such as text alignment. Therefore I tried to find a way in which I could make these minor changes without having to skip back and forth. I found I could do this by using the 'inspect element' tool in google chrome, in which I could move text around easily into the position I wanted, and then copying the new code into my style sheet.
I changed the width from 350px to 400px to solve the issue of the text over spilling, and then increased the left hand margin to make the text more central. I increased this until I was happy with how central the text was. I was happy with how I had found this tool of manoeuvring elements on the page and will continue to use it on my other pages.
Final text positioning and code copied into dreamweaver:
#aboutus-frurtwayoflife {
margin: 185px 0 0 0;
display: inline-block;
width: 400px;
height: 70px;
color: #ffffff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left: 310px;
font-size: 28px;
font-style: normal;
}
I moved onto the next section which would be slightly trickier, I wanted to spilt the image box into two columns, having a paragraph of text on the left and a new element which I had not learnt to do in class - a web form - that would allow users to insert details such as there name, email address and a message.
Inserting the text was an easy task now I had found how to use the inspect element tool and so I styled this up in my dreamweaver stylesheet, and then used this tool to position it on the page, copying the code back across back into my style sheet when I was happy with it.
Note the div tag below labelled, aboutusgreen, refers to the orange section, however I named it the wrong colour.
Final code:
#frurtknowshowtoparty {
display: inline-block;
width: 400px;
height: 70px;
color: #ffffff;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-left: 70px;
font-size: 14px;
font-weight: 100;
margin-right: 0;
margin-bottom: 0;
margin-top: 335px;
float: left;
}
To create the form:
I wanted to create a form that had 7 type boxes, one being a multi line box where the user could write a longer piece of text.
The 7 sections were to be:
- Name
- Surname
- Address
- Postcode
- Email
- Telephone
- Your message
and then a submit button.
I started off in my html code creating a form tag:
I looked online at how to write up my code as I had never done it before and I came across this helpful website, which told me exactly how I could type up a form:
My form code:
My form set up was almost exact as the one above however I took out the span elements as these were not necessary for my form, as I will be styling each text element the same via a div tag linked to my style sheet.
The your message section (multi line box) and submit button, have separate div tags as they need individual styling.
<form>
First Name: <input id="first name" type="text" name="firstname">
Surname: <input id="surname" type="text" name="surname">
Address: <input id="address" type="text" name="address">
Postcode: <input id="postcode" type="text" name="postcode">
Email: <input id="email" type="text" name="email">
Telephone: <input id="telephone" type="text" name="telephone">
<label>
Your message
<textarea id="yourmessage" name="yourmessage"></textarea>
<input type="submit1" name="submit1" value="Send" id="submit1" />
</label>
</form>
I then went into my css style sheet to style the form, input boxes, multi-line input box and submit button:
Form style:
/*refers to the whole form as a block*/
#form {
float: right;
width: 350px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
font-size: 14px;
line-height: 16px;
}
Styling the form was very simple,
the float was set to right as, I wanted the form to be positioned on the right hand side of the page, I gave the form a rather large width to allow for long input boxes. The font family was selected to be the same as the rest as my website, and the size of the text, the same as any body copy.
Styling the input boxes:
/*White boxs where the user inputs details*/
input {
width:240px;
display:block;
height: 14px;
padding-top:10px;
}
I then styled the input boxes to be slightly smaller than the width of the form block at 240px, this was to ensure none of the input boxes spilled onto a new line or were cut off. 240px also allowed a good amount of space for any long names or addresses etc. I gave the box some slight padding on the top of 10px so that the text would not appear stuck to the top of the box.
However I was still not happy with my web form. I felt that the padding of the input boxes needed to be evened out, and I will inspect the element and change the padding to 5px top and bottom instead of 10px top. This allowed for the inputted text to appear more central within the box. I also felt that the edges of the boxes were must too sharp for my web design, as due to the style of the opposing illustrations being soft, they seemed to disrupt the flow of the design. Therefore I went to search online to see if there was any way of editing this to make them become more curved.
Online I found this really helpful interactive website that gave me the exact tools I needed to curve the edges of my boxes:
On this website I was able to test different radius' without effecting my own website, in order to curve the edges of my website I had to edit the border radius.
After testing out a few different values, I found that the lowest border value I tried out would be most suitable for the size of my boxes, therefore this is the code that I will include in my input tag.
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
New input style:
/*White boxs where the user inputs details*/
input {
width:240px;
display:block;
height: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top:5px;
padding-bottom:5px;
}
Next I styled the multi line box:
/*Multi line mesasge box*/
textarea#yourmessage {
width: 240px;
height: 60px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
display: block;
}
There was nothing special added to this box, I simply wanted to make it larger than the others at 60px height rather than a 14px height as the previous boxes had. I again gave it the same rounded borders as I had for the previous inputs.
The submit button has a very individual style:
/*Submit button*/
#submit1 {
margin-left: 52px;
margin-top: 10px;
color: #fff;
width: 135px;
height: 30px;
background-color: #FC9;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
I inserted margins from the left and top to distinguish where the button would sit in terms of distance from the input boxes. eg. 52px from the left and a 10px space between the bottom of the form and the top of the button.
I set the colour of the text inside the box as white and the background colour that was close to the colour of the pattern. I again added the rounded border radius to the button.
Div tags pulled into html:
final form:
No comments:
Post a Comment