I designed the website in a fixed format - this means that ... · website look much more...

[1]

Web Page Design Report University of Salford

I designed the website in a fixed format - this means that the dimensions and

measurements of the website are static and will not change no matter how big or

small the user makes it. The main advantage to having a fixed design means it will

not relocate certain features of the website somewhere else, therefore making the

website look much more professional as it has a well presented layout.

XHTML stands for Extensible HyperText Markup Language - this is the language

that I used to create and mark up the website in. In order to create the website, I

have used a mixture of different codes, languages and elements to construct the

website.

The first element that I used was <head>. This is the element that is shown within

the headline of the web browser. This element was then followed with the <title> tag

in which I was able to provide a title of the document. The title should be small and

precise, supplying no other information except what the website is about. Because I

am designing this website for my assignment, I have decided to call “Rebecca Ting-

Ting Lam’s Assignment”.

The next element that I used within my project is <body>. This element contains all

the information within the website/document such as text, images, lists, tables,

hyperlinks and other aspects.

<div> tags classifies different divisions within the document. They become especially

useful and important when it comes to styling the website as it groups block-

elements together making it easier to style. I used several <div> tags to section my

work neatly and clearly to make the styling and modelling process a lot simpler. The

tags are then matched up with the codes in the CSS.

Within the homepage of my website, I have used, in total, 6 different <div> tags. The

first element that I used was the container. This was the outside casing to my

document; it also meant that it became fixed as the measurements were static and

could not be resized. I centred my website by setting the margins to auto therefore

meaning if I opened the website in another browser, it would automatically centre the

piece. Also I wanted a thin narrow structure and therefore I set a fixed width to the

[2]


document; this also meant that the elements within were unable to go beyond the

size measurements which made it look much tidier.

Another <div> element that I used was the branding. The branding <div> was like the

heading of the document. I custom designed the title and then uploaded it, using this

as the branding background. I had to set a height to this element otherwise it would

cut some of the image of, however the width was already set because of <div

id=”container>. This therefore restricted me slightly to size measurements of the title

as I was constructing it.

[3]


The next <div> element used was navigation. This at first was difficult for me to work

with as when I opened the website in different browsers, it misshaped and the

navigation links would move around. This <div> element contained a list of

hyperlinks to other pages within the website. I wanted it to be set to sit in a line

underneath the title without any bullet points or small. Also because they were

hyperlinks, I wanted to give indication they were and therefore when the user

hovered over the link, it would turn to a light grey. I was able to do this within the

CSS sheet. Using the <div> element allowed me to style this section exactly how I

wanted it. I was also able to position the navigation so it suited the design I had

thought out.

The content <div> was the next element. This basically contained all the information,

text and images within the website. I used this element because I wanted a different

font, colour and text size to my website. I therefore formatted this within CSS,

marking up the <div> to style codes. As I had already set a fixed width within the

[4]


container <div> element, the text could not expand larger than the measurement and

instead could only be made smaller; however this was how I designed my website.

One of the next <div> elements that I used was for the semi navigation, which was

the button that will take you back up to the top of the page. As I went through my

website, I noticed there was a lot of information and to save the user time from

scrolling up and down, I provided them with a button which will enable them to do so.

However I wanted this button to be presented a certain way and therefore chose to

contain this section with <div> tag. This allowed me to change the colour of the text

when initially showing and hovering over. I also wanted the button set to the right

and could not do this if the button was within the content div as all the information

would be set to the right.

The last <div> element used was for the site information which is shown at the very

bottom of the website. Again, I wanted to provide a unique design to this section and

therefore contained all the tags within a <div> tag. This allowed me to change the

font and style. It also allowed me to give margin and padding space around this item

allowing me to design the website how I wanted it.

[5]


I used a number of elements in which allowed me to format the text. Firstly there was

the main tag with was <p>. I used the <p> tag which is basically the paragraph tag.

Every time I wanted to start a new paragraph, I had to beginning it with this tag. I

used this so that instead of the information on my website being in one huge block, it

would be neatly presented. It also automatically created space after itself, which

made it look more aesthetically pleasing towards the views eye.

Another writing element which allowed me to format the text was a list. This was

used for the navigation. I created an unordered list (<ul>) and before each point (or

hyperlink in this case) had to start with an <li> tag, which means a list item. I had

decided to put the navigation in a list because when I first started to create the

website it was a block element with the hyperlinks under one another. But as I

worked more on the website, I wanted the element to be inline and therefore found it

easier to have it as a list. It also made changing the colour of initial showing and

hovering much simpler.

As each list item was a hyperlink to another page within the website, I used <a href>

tag. The “a” within the element means that it is an anchor and can take you to

somewhere else. As I used “href” it means that it will take me to another document. I

used this because I wanted to link the pages up within the website. I wanted a neat

layout and instead of having one long document in which the link will take you to a

subheading (for example, like Wikipedia does) having different pages makes it look

much tidier.

[6]


<address> was used within the site information <div>. It defines contact information;

usually within the same sentence there would be a hyperlink where once the user

presses the link, it will take them to the default mail software and include the email

address that you have set up, within the recipient. The tag line to set this up is:

<address>Created by <a href="mailto:[email protected]">Rebecca Ting-Ting

Lam</a>.</address>. Pressing on this link (which is Rebecca Ting-Ting Lam) would

take them to the default mail software and put “[email protected]” within their

recipients section.

Each elements/tag that you have used would end with a slash for examples starting

and ending a paragraph would be: <p>Paragraph</p>.

I validated my website, making sure that everything was in working order. I did this

using the www.w3schools.com. I have provided the icons in which it provides me to

show the user it has successfully passed its validation of CSS and XHTML on

W3Schools. I tested each page, however I have only added the icons to the

homepage as I find that providing them on all pages doesn’t look as clean as I

wanted it too and therefore removed them.

XHTML allows you to be able to create your website however CSS (Cascading Style

Sheets) enables you to apply a style to the document. Once adding all the

information, I then started the CSS. I had already planned what I wanted my website

to look like and therefore had to work out how to apply this to my XHTML.

I wanted to keep it plain, simple and clean. Because the topic was quite a strong

subject matter, I wanted to keep the design of the website soft and simple. I chose to

have a white plain background as it gave a sense of delicacy as well as a smart look.

Colour schemes were kept to gentle colours such as a light shade of blue and grey.

The positioning and layout of the whole website was vital to me as this was the main

feature I was most concerned about.

The first feature that concerned me the most was positioning and layout of the

navigation bar; I therefore started work on this first. Within the CSS I moved the

navigation so that it ran underneath my title. I simply did this by setting the element

http://www.w3schools.com/

[7]


to inline and displaying no indication of bullet points (“display : inline;” and “text-

decoration : none;”).

Next issue was the main title. I had custom designed a title using a Photoshop.

Taking the background off the flower photograph and then adding a fancy font text. I

used this flower and font because they are both soft. The colours the flower suit well

with my website however took a long time to take the background off and the choice

of font seemed to suitable for the image. I added the image as a background, setting

height as it image could be cut off.

#branding {

background-image : url('images/headermain.jpg');

background-position : top center;

background-repeat : no-repeat;

height : 250px;

padding-bottom:0px;

I then started working on weight, type, style and sizes of the font. As different

browsers have variation to fonts they have, I had to include a range of fonts. Starting

to the most preferred font to a similar font and then to a default font which is arial and

sans-serif (“font-family : calibri, arial, sans-serif;”). I chose these fonts because I

knew that all browsers would have them. I did not want to add a font in which one

browser has and another doesn’t as I didn’t want too much of a varied appearance

when viewing it in another browser. I had the same issue with font size. Each font at

a certain size looks different from one another, so I therefore stuck to fonts I knew all

the browsers had and worked with this. However I didn’t have this problem with

colour. As I mentioned before I wanted my website to have a soft appeal to it

therefore I chose to use soft shades of colours. Grey seemed to be a good colour as

it wasn’t vibrant and provided the smart look I wanted. I also chose to the colour blue

as it gave a sense of calm fresh aspect. The only problem with colour was that you

had to make sure you spelled colour correctly otherwise it wouldn’t have worked

(“color : #666666”). Another issue that I started become aware of was the line space;

it was too close and made it difficult to read, so I therefore expanded on this, giving

more space between the lines (“line-height : 25px;”).

I then started to edit the appearance of hyperlinks. Default links are a vibrant shade

of blue with an underline; however I thought this was too bold and dramatic for the

sense I wanted to perceive of my website, I therefore made the shade of blue lighter

and removed the line. When the user hovers over the link, it changed a light shade of

grey, giving them clear indication that it is a link:

#navigation a:link { color : #336699; text-decoration : none; }

[8]


#navigation a:visited { color : #336699; text-decoration : none; }

#navigation a:hover { color : #CCCCCC; }

For the container, I wanted it to be centred and for the width of the actually website

to be quite thin and narrow, I therefore worked with margins and width to construct

this. I set the margins to auto meaning that it will automatically centre the piece, no

matter what browser it is opened in. The width element allowed me to set a fixed

size. I wanted my website to be like this because I thought it gave a professional

look. Also as the subject matter seems small and innocent herself, the website in a

way, represents this also.

Looking at the site information section, I have only added the top boarder. The

reason why I have done this is because I wanted to clearly show a divide between

the contents and the site information (border-top-color : #666666; border-top-style :

solid; border-top-width : 1px;).

<div> elements made it simple and clear which sections I was altering. Within the

“Pictures” page, I wanted the image to be centred and the text to run as normal (left

to right) and therefore had to set up a <div> element allowing me to do so. Once

doing this, I marked up this tag with CSS, adding the code: “text-align : center;” This

meant that whatever is contained in this tag, will be centred. Setting the images so

that they were centred and the text running normal looked professional and neat.

[9]


I have designed and constructed my website the way I had planned it however

because certain browser have defaults and other issues, it can seem to change

appearance. I therefore had to work around this, making sure that whatever browser

it was opened in, it looked similar to one another.

When the website is opened in Windows 7, the font changes to when the website is

opened in software such as Linux. This is due to the fact that Windows 7 enables the

first font that I had chosen which was calibri. Because Linux does not support this

font it has gone with my second choice which is arial.

[10]


This is my website shown on Opera in Linux. I noticed that it looks exactly the same

as it does to when opening my website in Firefox or any other browser in Linux. The

only appearance change to be concerned with was the font in the software you are

using, whether that be Windows 7, Linux or MAC.

[11]


Inserting a set width and auto margins to the website means that no matter what the

scale the browser is set too; it will never change the appearance of the website.

Instead the browser is encouraged to use a scrollbar, which I would personally think

is much better than everything being automatically rearranged and forced into a

limited space.

For accessibility testing, I have used a website called “WAVE” which is a free web

accessibility evaluation tool. It will test my website making sure it meets the

standard. This testing will make confirm that the website is adequate for all

disabilities such as people who have visual impairments. “WAVE” has detected no

problems and therefore I am extremely happy with the results.

[12]


Zooming in and out of the website making sure that it is doable and that the font

does not become unreadable.

I designed the website in a fixed format - this means that ... · website look much more...

Documents

Transcript of I designed the website in a fixed format - this means that ... · website look much more...