[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
12
Embed
I designed the website in a fixed format - this means that ... · website look much more professional as it has a well presented layout. XHTML stands for Extensible HyperText Markup
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
[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]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
<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