Ive started coding my web pages for my site, this moment in time I am focusing on setting out the layout before I include any important aspects which were set out in my assignment brief such as the image rollovers.
The layout of my site will be set as how I explained in the planning section. Even though I have based my layout on the one I originally planned I added some extras. Below the logo a homepage image rollover and a shopping cart image have been added. The sign up option was placed on the menu tab instead of the login tab as there was some trouble with placing certain things on the layout.
I added a drop shadow on the search tab, login tab and menu tab in order to make the layout more effective and not so boring.
Sign Up/Register Page
In the registration page the layout underneath the menu tab is simplistic as I didn't want the register page to have too much on it. This is because the purpose of this page is to register in the site therefore users will only concentrate on that process instead of being distracted. I added a plain black border around the form in order to notify users where the form ends. The registration page doesn't consist of much; only a username, password and email address are required, if users would like to purchase an item their details would be recorded during the payment process. A confirm registration button has been added to the form in order to confirm the users details.
The CSS coding of my site has been displayed in the following blog post.
The layout of my site will be set as how I explained in the planning section. Even though I have based my layout on the one I originally planned I added some extras. Below the logo a homepage image rollover and a shopping cart image have been added. The sign up option was placed on the menu tab instead of the login tab as there was some trouble with placing certain things on the layout.
I added a drop shadow on the search tab, login tab and menu tab in order to make the layout more effective and not so boring.
Homepage
Underneath the menu tab the products were listed one underneath the other. I have displayed the image of the products along with the name, price and size options in a drop down list. Below is the coding I constructed for the products, in the div I added the border in the style tag. The image source was place to allow the program to locate it, I also set the size and where i wanted the image to be placed. The drop down list in the products section offers the sizes available of that product. The sizes were set out very basic as small, medium and large instead go being numbered. The image was set in a div, there I placed the class, source and dimensions of the image.
Below the cover photo of the homepage I incorporated the video tag to provide users with a video on fashion items. The video I incorporated was the new featured the Twist and Wrap dress the video shows different ways of wearing the dress. I have provided the coding that I used for the video, apart from the coding of the source of the video that is provided I also included the coding controls in order to allow users to play, pause the video.
Products Page
Underneath the menu tab the products were listed one underneath the other. I have displayed the image of the products along with the name, price and size options in a drop down list. Below is the coding I constructed for the products, in the div I added the border in the style tag. The image source was place to allow the program to locate it, I also set the size and where i wanted the image to be placed. The drop down list in the products section offers the sizes available of that product. The sizes were set out very basic as small, medium and large instead go being numbered. 
About Us
The layout of my about page follows the same structure as the other layout although underneath the menu tab a fashion image was displayed on the right with a description about the website on the left. The image adds something extra to the page apart from the black, white and pink theme. It also makes the text more appealing to read as there is some extra to look at. The text is displayed with a pink border and white background, a drop shadow has been included in order to complement the rest of the layout features as they also have a drop shadow.
Sign Up/Register Page
In the registration page the layout underneath the menu tab is simplistic as I didn't want the register page to have too much on it. This is because the purpose of this page is to register in the site therefore users will only concentrate on that process instead of being distracted. I added a plain black border around the form in order to notify users where the form ends. The registration page doesn't consist of much; only a username, password and email address are required, if users would like to purchase an item their details would be recorded during the payment process. A confirm registration button has been added to the form in order to confirm the users details.
The CSS coding of my site has been displayed in the following blog post.
No comments:
Post a Comment