Aims of today's session
To gain a understanding on..
Web Standards and limitations
Layout
Setup
Basic coding
Web is made up of acronyms and abbreviations for example
What You See Is What You Get : WYSIWIG
Search Engine optimisation : SEO
User Interface : UI
When designing for screen there is limitations:
Apple retina display is 221 ppi almost as good as print, 300ppi
A limitation is the size of the files put on the web, the bigger the file that is put on the slower it will load, so designers often lower the quality of an image so it loads faster.
There is 216 colours that can be produced across web, Designers still only use the colours within this 216 because they are reproduced consistently across all screens, whereas if there was a colour out of this field a computer with not such a good screen wouldn't be able to display it.
To get a wider range of colours though it is possible by using CSS rather than HTML.
Examples of colours
Red
#FF0000 or #000
White
#FFFFFFF or #FFF
Black
#0000000 or #000
If there is no unique code it can be shortened as shown above.
Another limitation is the fonts. There is a group of Web Safe Fonts.
Rather than choosing one font you choose a family of fonts, but some fonts wont be on all computers.
When coding and your putting in fonts that have more than one word e.g Times New Roman, you have to put speech marks at the begging then the end.
One way of getting round this is to use the CSS compatible @fontface which allows you to install fonts to a website. Also Font Squirrel can be used to download fonts.
Size dimensions, pixel resolution
Width x height
640 x 480 Years and years ago
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi) Current day
File formats Lossy : Can be compressed
PNG
GIF
JPEG
72ppi?
RGB
When coding the / means its closed and these must also be used when opening a tag.
Anything in <head> doesn't get shown
Meta tag is for searching, putting in key searches
Anything between open and closed body is the actual design of the website
When designing a website you must put everything in a root folder and don't use capitals when naming it. Create this folder in user work and when on dreamweaver always work from the userwork. Withing the 'root' folder make another folder for 'images', this saves all images that are used on the website.
The homepage of a website has to be named index.html
All other pages can be named anything but when saving try not to go over 8 characters.
After every change made on the website you should preview it to see if anything has gone wrong.
Creating a stylesheet in CSS means you dont have to create a html for all the pages and you dont have to keep changing it per sheet, it remains consistent.
This is the beginning of the website, this is what it first looks like.
We then went on manage sites and changed the name of our site. This then when we previewed it on google chrome it appeared as the name foe the website.
We then saved it into the Root folder that i explained about earlier.
The small world symbol allows you to preview it on the internet.
I then changed the name of the website to my name between the <title> label, again previewing it on the web.
Next within the 2 <body> labels is the content of the website, so here we wrote a sentence to see what would happen.
Again refreshing the page to see if there was a mistake anywhere
Next we created a CSS document, this document should be linked with the HTML document, within this document we changed the typeface for the sentence we wrote earlier this is done by the process shown below.
Creating a stylesheet in CSS means you dont have to create a html for all the pages and you dont have to keep changing it per sheet, it remains consistent.
No comments:
Post a Comment