- Every web user will get an initial reaction in the 1st 3 seconds, you need to make sure you communicate that well.
Aims
Web Standards - Standards you should follow when designing for web
Layout - How you can work with different layouts
Setup - Open Dreamweaver and working on it
Basic Coding - To be able to design visually, you need to know what's acheiavle in coding.
Acronyms, Abbreviations & Stuff
HTML - Coding Language - Hyper Text Markup Language
XHTML - Extended Hyper Text Markup Language - Able to hold more info
CSS - Cascading Style Sheets - More graphic based visual websites.
WYSIWYG - What You See Is What You Get - Early 2000's. What you see in the programme is what you get online - What we see in Dreamweaver is what you get on the web.
SEO - Search Engine Optimization - To ensure your website shows up on a search engine.
FTP - File Transfer Protocol - Moving your files onto web.
URL - Uniform Recourse Locator
XML - Linking a website to a database eg. Amazon - Buying a wheelbarrow and communicated to a database.
UX - User Experience - The initial thoughts of a website is it's first stage
WWW - World Wide Web
Other Abbreviations / Acronyms
MIME, SQL, MYSQL, PHP, ASP, JSP, CGI, AJAX, ASCII, DNS, GIF, HTTP, HTTPS, UI
(Designing for the lowest common denominator)
Colour
Web Safe Colours - 216 Colours
A 6 digit hex code is used to define colour. eg. White #FFFFFF
RGB can produce 16 million colours, whereas Hex colours are limited to 216.
Red 256 x Blue 256 x Green 256 = 16,777,216
A wider range of colours can now be reproduced in CSS rather than HTML.
Using CSS (if you wanted to get 100 % red) = rgb(255,0,0) - These principles are used in both Photoshop or Illustrator. However.....
"RGB values on different computers are different - Different monitors can use different ranges of colour."
Does your target audience have newer computers? If so, you could use CSS.
For a chosen font to display consistently across different computers, a standard font must be used. The font is installed on the computer, not on the website. If someone does not have this font installed, Times New Romans will be used.
If you want to specific a font, you have to specific the font family. This acts as a 'fallback', trying the next font in the list.
Common Font Families:
Serifs:
Georgia, Serif
"Palatino Linotype", "Book Antiqua", Palatino
You have to put fonts that are more than one work in quotation marks, or it will look for two fonts.
Sans Serif:
Arial, Helvetica, Tahoma, Verdana
The problem with using downloaded fonts is that you are distributing the font if its on your website. You would have to pay a license fee reflecting the usage. Free fonts are there for your own use, not for commercial use.
To install a font, you can use CSS compatible @font-face. Some sites allow free license, such as Font Squirrel.
'Web Font Kit' - Allows you to use this typeface on a website.
Size, Dimension, Pixel Resolution
640 x 480 - First Computers
800 x 600 - Roughly 2006
1024 x 768 - 2004
1920 x 1080 - 2008 ish
2880 x 1800 (220ppi) - New Retina Displays
Designing at a low resolution, the website will be small. Designing at a high resolution could result in a 'zoomed in' web page.
- A high resolution could limit speed, and also cost more.
- Responsive web design?
File Formats
PNG
GIF
JPEG
72ppi? - Since 1995 all screens have been 96 ppi, and now can be 220 ppi. What do we do in terms of resolution?
Lossy - You have to compress the images in terms of file size.
What you see is what you get.
Split shows you the design + code.
What does this code mean?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
This bit is not needed.
We need this bit - the HTML tag shows we are using HTML. "/html' means 'close HTML'
This makes the website function in a certain way - Say if you wanted o use a different type of coding, you would specific this in here. Meta tags are used for key words, but for now we don't really need it.
Setting Up A Folder on User Work
Everything you use for a website (logos, images, bodycopy) you be kept in the same folder. When in college, you have to keep your work in User work, or it will not work.
When working as a designer in the industry, you will have to back work up in a server.
Folder Names: 8 characters or less, no capitals, no spaces, no glyphs.
'New Site' - Helps find folders created.
'Manage Site' - Open up something you have already worked on.
Chosing the root folder:
What should happen:
Everytime we save, it will save in this folder:
You CANNOT delete file extension '.html' - Or things will not work on another computer, as it does not know what type of file it is.
Use 'index' instead of 'home' as it is international:
Clicking the globe can test how the website works on specific internet browsers:
My website right now:
Keep refreshing and checking your website. If you have two monitors, you can keep refreshing the page, and if something goes wrong, you can undo it.
Use CMD + Tab to switch between applications.
The below * shows you haven't saved.
Changing the name:
Adding text:
