After the process of researching and designing the website I began to construct the website's code. I only had to design one page as the structure will remain the same all throughout, the only elements that will change are the contents placed in the center The structure consists of a top section where the logo is placed, a menu section, a center piece for the main content, a footer with the social networking websites and a set of 4 placeholders underneath for the client to implement text which is not important enough to be in the above section. The website content has been placed on a grey background as I felt having a white one would make the website look dull. The center piece is where the content will change depending on the page the user is visiting, the only 2 features that will remain the same are the placeholders on the left which represent the calendar and the Facebook plug in. In order to fill the website with text I used Lorem Ipsum.
Even though I have used separate <div> tags to divide sections all the code has been placed in a <body> tag. I then created a <div> where I name it whole body, here I set a standard size of the page using CSS in order to have all the elements together.
Index and Car Page
The index and car page have the same structure, I used a slide show template from http://www.slidesjs.com in order to implement this function. The template was mainly used as a guide, originally it came with controls to play/stop and previous/next. I removed these features as I did not want the users to control it. In the index page I place different images of the car during racing events to attract viewers especially sponsors. In the index page I have displayed the images of car during the design and development process so that users can see the different stages. I chose to include another slide show in order to prevent having a single image on the page, since I'm not the most knowledgeable person on car design I thought I should use most of the images as they might be very important. Below both slide shows I used a placeholder for the client to be able to write a welcome message or information about the car being constructed within a <p>.
Index Page:
The index and car page have the same structure, I used a slide show template from http://www.slidesjs.com in order to implement this function. The template was mainly used as a guide, originally it came with controls to play/stop and previous/next. I removed these features as I did not want the users to control it. In the index page I place different images of the car during racing events to attract viewers especially sponsors. In the index page I have displayed the images of car during the design and development process so that users can see the different stages. I chose to include another slide show in order to prevent having a single image on the page, since I'm not the most knowledgeable person on car design I thought I should use most of the images as they might be very important. Below both slide shows I used a placeholder for the client to be able to write a welcome message or information about the car being constructed within a <p>.
Index Page:
Car Page:
HTML:
The images were placed into 2 <div> tags, the container keeps the whole section together and the slides is where all the images are placed. As you can see the image structure is all the same apart from their names therefore the client can either change the names or copy the code and adjust it to add more images.
CSS
Not much designing could be used for the slide show as it is image based therefore the CSS used for this element was mainly for positioning the slide show on the HTML page. Even though I added the size of the slide show onto the CSS code I also implemented it onto the jQuery.
jQuery:
The slide show jQuery run on a separate script page that was connected to the HTML although some jQuery did have have be implement in the header of the HTML page in a <script> tag in order for it to function properly.
About Us Page
The about us page is geared towards the team writing general account of who they are. Here I have again use a placeholder to represent the section where the client can insert their own information. I added an image below of a silhouette to represent an image, here the team could post a group photo or one of them at work with their latest project.
HTML:
The placeholder was placed in a <div> within a <p> tag as it is text, I gave it a unique class in order to be able to design and position it using CSS code. The image was also placed in a <div> with a unique class to also be able to position it using CSS.
CSS:
As you can see in the CSS code I have positioned the placeholder, added a background colour and aligned the text.
Sponsors Page
In the sponsors page there will be logos placed representing the sponsors who helped out. Each logo has been wrapped in its unique <div> with a position on the page therefore each time the client changes the image the structure will still remain the same. All they would need to do is change the name of the image they want to input. The structure can consist of 9 images, seeing as I only had 7 I used 2 placeholders to represent the <div> which are empty.
HTML:
As you can see in the HTML code the main elements have been split into 3 <div> tags each large tag has been split again to produce the 3 smaller sections containing the logos. This is to organise sections so that it is easy for the client to be able to adjust elements with out confusion or problems.
CSS:
As you can see in the CSS each <div> has its unique position in the page the rest of the features remain the same.
Contact Us
In the contact us page I implemented a placeholder at the top middle in order for the client to insert their contact details and address. I used a Google Map plug in to show users the location of where the Motorsport Engineering is located. This was another form of showing the audience or even sponsors how they can get into contact with the team.
HTML:
Below is the HTML code for the Google plug in, as you can see I used an <iframe> to contain all the coding needed i then wrapped it in a <div> in order to ass some CSS.
CSS:
For the Google plug in there is not much designing I could implement, the CSS I incorporated was to position the map on the page and re size it.
Team and Gallery Page
In the team and gallery page the main content structure was kept the same, I used a template from css-tricks.com. I chose to use this template as it allows me to place multiple images as small icons on one side, with a larger version in the middle. I thought this method would be effective as the client can implement many images but because they initially load as a small icon the page loading process will be quick. Even though I implemented the feature of the template into the 2 HTML pages I chose to use a separate CSS page in order to keep certain features separate so hat it is easier to find them.
Team:
Gallery
News Page
In the news page I again used placeholders to represent where the text should be placed, here the client can provide snippets of the article or links to where they are displayed on the web for users to read. I implemented 3 placeholders in order to fill the page but not clatter it, the size of them will not fit a whole article, I did this on purpose to avoid so much text in one page. In order to place each element I followed the same structure as in the sponsors page. Each place holder has its unique <class> tag with a position.
HTML:
Below is how I set out the placeholders in the news page as you can see they are wrapped in their own div with a unique class name. Just like in every other page the text has been wrapped in a <p> tag.
CSS:
This is the CSS code for the HTML as you can see all the elements are the same apart from the position on the page.
CSS Page Adjustments
In the CSS I attempted to change the width of all <div> tags in order for the website to adjust to the screen size when it is minimized. All the widths of the website were set to 400px in order to for the sizes to be the same.
Now that my website is constructed I will need to test to see if all the sections are working properly. In the following post I will state the limitations and improvements to be made.
Sources
Unkown, (N.D.), Silhouette [ONLINE]. Available at: http://www.clker.com/cliparts/5/9/4/c/12198090531909861341man%20silhouette.svg.hi.png [Accessed 18th March 2013].
Nathan Searles. (N.D.). SlideJS. Available: http://www.slidesjs.com/. Last accessed 10th March 2013.
Coyier, C. (2009). Simple jQuery Dropdowns. Available: http://css-tricks.com/simple-jquery-dropdowns/. Last accessed 10th March 2013.
Unknown. 2013. Facebooklogo. [ONLINE] Available at: http://causing.rapidmasstrafficforum.com/wp-content/plugins/Wordpress-Magic/MagicContentWizard/cache/like_us_on_facebook_logo_png_3191292.png. [Accessed 04 March 13].
Takedesigns. 2013. Design2. [ONLINE] Available at: http://takedesigns.com/wp-content/uploads/2012/11/design2.png. [Accessed 04 March 13].
No comments:
Post a Comment