Web Design Session 1

The Session;
Dreamweaver;
Design the website fully before you go near a computer is better as then you know what you are doing when you come to actually making the website.

Web standards and limitations
Layout
Setup
Basic Coding

Web Standards;
Made up of acronyms, abbreviation and stuff...

• HTML 
• CSS 
• SEO (search engine optimisation) 
• AJAX 
• XHTML 
• FTP 
• ASCII 
• URL (uniform resource locator)
• DNS 
• API 
• PHP 
• GIF 
• ASP 
• WWW (world wide web)
• UI (user interface)
• WYSIWYG (what you see is what you get)

Limitations;
Designing for the lowest common denominator!

Web safe colours; 
 There are 216 colours that you are capable of reproducing consistently.
When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 'Web safe colours' were identified.
These colours were/are reproduced consistently across the web using HTML, specifically a six or where possible three digit hexidecimal code.
Red 
#FF000
#FF0
White
#FFFFFFF
#FFF
Black
#0000000
#000
The RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 colours.

• 256 Red
• 256 Green
• 256 Blue

256x256x256=16,777,216

This wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB.
For example 100% Red
rgb(255,0,0)

Web safe fonts;
For a chosen font to display consistently across different computers a standard font must be used. Further to this a font-family is chosen giving several "fallback" options to ensure maximum compatibility between browsers and systems. For example is the browser/system does not support the first font it tries the next one listed.

Some common font families:
"Palatino Linotype", "Book Antiqua", Palatino, Serif
"Times New Roman", Serif
Arial, Helvetica, Sans-serif
"Trebuchet MS", Helvetica, Sans-serif
Using speechmarks is crucial for fonts with more than one word, but isn't necessary for single word fonts.

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 font-face breaches licensing and copyright laws related to specific font foundries.
There are many free font websites which include free licenese usage for @font-face kits including Font Squirrel.

Size, dimension, pixel resolutions;
Designing for the lowest common denominator, computer screens are very powerful, sometimes higher than the quality of a printer.
Apple retina display screens are 221 pixels per inch, therefore it is better than some printers.

• 640 x 480 (1991)
• 800 x 600 (1994-5)
• 1024 x 768 (2000-04)
• 1920 x 1080 (2010 -13)
• 2880 x 1800, 220ppi (now new MacBooks, retina screens)

File Formats;
Work with these kind of file formats, and the colour mode, and spacial resolution. When saving an image on the internet, a file size as small as possible but still make it look good.You can do this by using the correct compression ratios.

• PNG
• GIF
• PDF
• JPEG
• 72ppi?
• RGB
• Lossy 
• Compressed

Dream weaver;

Ignore the first column, its not good to open from here as we are a networked system. Aslo don't engage with the third column as it is confusing.
Create new HTML

Code

Split

Design

The code page shows the coding for a blank design, this is quite a few lines of coding for just a blank screen.

Don't need the top line, so can delete.
Also don't need the  xmlns="http://www.w3.org/1999/xhtml" on the second line so can delete.

This is coding for the design of a blank screen, line 1 is opening HTML and like 9 is closing HTML, this is crucial for a coding for web design. Line 2 and 5 are opening and closing the head tags, they don't actually appear on the design, it is just something used to make the web design function in a certain way. Line 3 is the Search Engine Optimisation (SEO) you would put this in the meta tag, but we don't need this right now, therefore can be deleted. Line 4 is the title, it is what the web page would appear as on a tab, or the top of the browser window, it also increases SEO. Anything you put between the open and close body tab will be shown on the design.

This gives you the most simple template. File Management is crucial to web design, so this is where we have to save our template, it is easier to have everything in one folder called the root folder, so that it is easier to transfer, its a bit like packaging on InDesign.

Naming conventions;
When naming your images or folders, never use capital letters or spaces.
Name your folder whatever the website is.
Create a sub-folder in the website folder called images.

Making a new site.
0

If you have created/managed you site properly it should show you the folder your working with a the bottom right hand side of the document.

Should always keep the file extension, you can change the name of the page, but never delete the extension ".html" because the server won't know what type of file it is, and when trying to open it, it would come up as an unsupported file. When you access a website it is selecting the address to get to the root folder, therefore it cant be called home, it has to be called "index.html" otherwise the website wouldn't work, nothing would show up without this, the home page has to be called the index, but the other pages can be called whatever you like. The only other thing would be that the other pages must be lower case and just one word, and try not to go over 8 letters, it is seen as bad practice.

After you have saved as a html, you can go to this tool to preview the website in whatever you want to view it in, when you are designing the webpage, try and get into the habit of checking through the website as much as possible, then you can see what you have done if something goes wrong so that you can change it.

In the coding I changed the title from Untitled Document, to Daisy Conway, then previewing the website, shows me my name.

This is what the coding looks like to get the title page.

To add something onto my website, to actually see it, it has to go inbetween body, I decided to write Hey Mannn, to see what would happen.

Changing this coding showed me this at preview.

If you create a style sheet and

CSS doesn't work in the same way (coding) as HTML

This is changing the font.

This is saving the style sheet. Now we have to link the style sheet to the html document. If we were coding this is could go inside the head in the index, this is so that it is not seen but is a function of the website. Also when you are working with multiple documents you select save all.

This is the coding for changing your font.

Previewing my page has showed me that I have successfully changed the font on my site.