On this page I had a lot of great ideas that I wanted to do including:
- A search form to find your closest fruit store.
- A scrolling box with the results of the search underneath.
- To the right a map that shows the location of the store in context to its surrounding location.
As I am not sure how I would go about inserting these objects, This page will be mostly proposed, and images placed where certain elements would go.
In illustrator I created the following image:
The image, which I will embed as the background image into the page container, displays where the position of the search box would be, the scroll list and the map. I have however left the search box/buttons unlabelled as I am able to do this by overlaying text, a space to the right of the box for a small amount of text, and a space underneath everything to insert a form, as an easy contact point for customers.
Notice this background image has around a 170px top margin before the page design actually starts, this is due to the fact that the nav bar will lay over this section of the design.
In dreamweaver I styled the text that would over lay the search box on my page.
This would be inserted inside the contact us box, which holds the whole background image seen above.
I created a tag called find a store as shown below:
#findastore {
width: 400px;
height: 50px;
margin-left:100px;
margin-top:205px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#FFF;
position:relative;
float:left;
z-index:10;
}
HTML coding for this section:
<div id="findastore">
Find a store:
<br>
<br>
City:
<br>
<br>
<br>
<br>
Postcode:
</div>
I then went through the same process as I have with many other simple text tools and used the inspect element tool to specify where the text should be placed, and put this into my final code. I used line breaks just to specify the space in-between both pieces of text.
Next I moved onto the text that I wanted to place in the right hand column.
I came up with some dummy text, just so that I could practice positioning for now, and gave it some simple styling on my style sheet.
<div id="contactrighttext">
frurt frurt frurt frurt frurt frurt frurt frurt frurt frurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt frurt frurtfrurt.
</div>
#contactrighttext {
width: 440px;
height: 40px;
position: relative;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
}
I then used the inspect element tool tool to position the text where I wanted it on the page, according to padding and margins:
I got to work on the last section of this page, the small form that would sit under all the other content to ensure that users could contact/ send a message to the company about any matter that they would wish.
To do this I followed the same framework that I did for my previous forms:
First I went into the HTML code and type up the frame work following the one I had done previously as a reference:
<div id="webform3"> <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">
<br>
<label>
Your message
<textarea id="yourmessage" name="yourmessage"></textarea>
<input type="submit2" name="submit2" value="Send" id="submit2" />
</label>
</form></div>
and Styling in the style sheet:
/* Styling the form as a block/*
#webform3 {
float: left;
width: 320px;
font-family: Arial, Helvetica, sans-serif;
display: block;
background-color: #e5348a;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin-top: 450px;
margin-left: 64px;
color: white;
padding: 20px;
margin-bottom: 20px;
}
Styling the submit button:
#submit2 {
margin-left: auto;
margin-right:auto;
margin-top: 10px;
color: #fff;
width: 135px;
height: 30px;
background-color: #f19ac0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
}
The final form in place:
No comments:
Post a Comment