i designed the website in a fixed format - this means that ... · website look much more...
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
[7]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
#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]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
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]
Web Page Design Report University of Salford
Zooming in and out of the website making sure that it is doable and that the font
does not become unreadable.