the Session we had today was focusing on website standards and limitation
Web safe colours
original computers could only support, maximum 256 on their 8-bit monitors, a list of 216 web safe colours were identified.
these colours were reproduced across the web using html, specifically a six or three digit hexadecimal code.
Red
#FF0000
#FF0
White
#FFFFFF
#FFF
Black
#000000
#000
web safe colours
This wider range of colours can be reproduced by using CSS rather than HTML, these colours are identified by using the same principals as illustrator or photoshop, by specifying the percentage of 255 per RGB.
100% red would be rgb(255, 0. 0)
Web safe fonts
Computers must use a standard font to be able to be displayed consistently.
Font families are chosen with fallback options to ensure maximum compatibility between browsers and systems, for example if the browser does not support your specific font it will try the next font listed.
Some common font families
serif fonts -
Georgia, serif
"palatino linotype", "book antiqua", Palention, serif
if the font has a space in its name you have to put speech marks round it so the computer can distinguish between the names of the fonts.
some web safe font families -
sans-serif fonts
Arial, Helvetica Sans-serif
Tahoma, Geneva, Sans-serif
"Trebuchet MS", Helvetica, Sans-serif
Verdana, Geneva, Sans-serif
CSS font face
The CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.
however using a font-face breaches licensing and copyright laws related to specific font foundries.
there are many free font websites that include free licensing usage for @font-face kits including fontsquirrel.com.
Size, dimention, pixel resolution
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi)
File formats
PNG
GIF
JPEG
-
72ppi
RGB
-
lossy
compressed
these are all compressed so they can be as small as possible, there is an art to file compression so you can display something that is small in size but still with good quality.
We then started to look use dreamweaver by opening a new blank document, in this session we are going to learn to do some basic coding
this is the blank document
Line one isn't completely necessary to make a site work, you can delete it to create a website in its barest form,
you can also delete the second line adress so you just left with <html>
a target with a / in front of it means close without it means open, eg <html> </html> you need to have an open and a close to make a site work.
line 3 its open <head> then on line six is </head>
the head relates to functionality, this is where it is always contained. in between these tabs is a meta tab which is used for search engine optimisation, to optimise a search you add in key words, this tab its where you would place the words. Not needed for a website to work. Meta tabs dont need close tabs.
The title is another thing that can increase search engine optimisation, it isnt included in the actual design but will appear in the site adress. its also appears in a tab and is given the name a favicon.
open and close body (<body>) anything that is part of the design needs to go after this and before the close body tab.
File management is important because if all your files arnt in the same place then the website wont work. everything your working on must be contained in one folder, its a similar system to indesign but to a more extreame level. When you first start a website you must start as how you mean to go on, to keep all your files you must create a root folder.
for uni computers, save onto your hard drive, never use spaces or uppercase.
I have created a root folder on my HD and within this I have made a sub folder which I have named images, this is where any media goes. All the html and css files go loose inside the root folder.
To get this up you click on the site option on the top bar
You find your root file on you user HD then click choose
This will then appear at the bottom right hand corner of your screen to show you where all your files are being saved.
When saving your work you must call your first page, the home page - index, this is a globally recognised term for the first page any other page can be called whatever you want.\
No comments:
Post a Comment