To start with I had to make some changes to my design as the brief before for designing the layout had a set size of 720 x 480 that we had to design to. As this brief had no size limits i changed the sizes of things to make it more usable. I did this as i thought the old limits were a bit small and was hard to make everything fit nicely.
For a start I made my header stretch across the width of the page by tileing it on it X axis. I did this so hat no matter what screen resolution you are using it will stretch across your screen.
To make the links across the top always be the correct size for the screen resolution I put them inside a table. Then by making this tables width a percentage it will always adjust to the users screen.
The logo, white content area and the 2 small areas at the bottom of the pages are layers or also known as div tags. I have controlled all these using an external css page ( cascading style sheet ) this stops the layers from shifting around on the page and also allows me to make them sit center.
This external css also allows me to control what style text is the default, the font colour and the background colour and a lot more features on the website.
I then used this piece of coding to connect the style sheet to the html page:
This is placed on the html page between the "head" tags.
Everything with in my content area is held in place by using tables. This makes it easy to hold everything in the correct place because you can add row and columns and also can adjust the widths and heights easily.
This shows the areas of the table for the index page. this shows how i have used the table with row and columns to make everything sit in the correct places.
These form objects i simply made by using the built in form objects with in dreamweaver. These were found within the forms tab at the top of the window and i used forms such as text field and a list/menu. Once you have these in you page you can simply add the different names or lists to them. To add the list into the drop down list/menu I simply click on it and went list values.
This shows the pop up box where you add your list items.
Here you can see my search page. For the artist search i have created roll over images as the buttons to search. I created this by click on my link image and then opening the behaviors within flash and chose swap image. Then I chose the second image i wanted the image to change to when rolled over. This will gave me a roll over link effect.
When making the website I made sure I sure that i added alt tags to all my images so that these can be picked up by screen readers and help more people access my website.
No comments:
Post a Comment