- Web standards and limitations
- Layout
- Setup of dreamweaver
- Basic Coding
To start the session we looked at web standards, acronyms and abbreviations.
Within web design acronyms and abbreviations are very common. Some of the most common are:
- HTML - Hyper text mark up language
- XHTML - Extended
- CSS
- WYSIWYG - Describes Adobe Dreamweaver. What You See Is What You Get
- SEO - Searching engine optimisation (For our site to come up on google we need to understand this. eg. Graphic Designer in Leeds)
- FTP - Transfer a website to the internet
- URL - Uniform Resource Locator
- XML
- PHP
- ASP
Language usually used for Commerce
- UI - User Interface (a designer who designs for web or an app etc, new term for web designer)
- UX - User Experience
- WWW - World Wide Web
This language has to format in a specific way. Example, lowercase letter that should not be there will not make the website work. This is the standardisation of the specific language.
We looked at the limitations to designing and making a website. It is important to make sure that it will work for all users and stations (phone, laptop.) We usually work to the lowest common denominator.
As a group we were asked to come up with a few limitations for web design:
- Size
Size, dimension, pixel resolution
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220 ppi)
The increased pixel display on newer apple computers produces problems for designers and the concept of working for the lowest common denominator as older computers do not work at 220ppi.
Upscaling will result in pixelation
Downscaling will result in large file size.
This has not yet been solved.
- Colour
Web safe colours are the only colours which will be the same across lots of different platforms. There are 216 colours which are available to use on the web.
These colours are reproducible consistently across the web using HTML, specifically a size or where possible a three digit hexadecimal code.
Example.
Red - #FF0000
#FFF
There are over 16,000,000 colours which are reproducible in RGB which is significantly more than Hexadecimal colour which only has 256.
Until very recently people could only work with web safe colours as the code did not recognise any other, CSS has allowed us to identify the RGB colour options.
The wider range of colour can now be reproduced using CSS rather than HTML. These colours are identified using the same principles as Photoshop and Illustrator, by specifying the percentage of 255 per RBG.
These colours are not consistently reproduced on other platforms and in other RBG space. To work with gradients and opacity we will have to work in RGB mode.
- 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 or system does not support the font it will try the next font in the family.
Websites do not have fonts written into them, websites use fonts which are already on the computer which it is being viewed on. Times Roman is the default font for all web design because all processors have this font.
Common font families:
Georgia, serif
"Trebuchet MS" Helvetica, sans-serif
Mono space fonts (courier)
IF A FONT TITLE HAS A SPACE WITHIN IT WE MUST PUT SPEECH MARKS AROUND IT. HTML WILL THINK IT IS DIFFERENT FONTS.
We can choose our own font families.
We can also break the rules of web safe fonts it is capable. We will have to install the font into the website. This breaks all of the copyright rules for the font foundries.
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 font-face breaches licensing and copyright laws related to specific font foundries. There are many free font websites which include free license usage for @font-face kits including Font Squirrel.
Font Squirrel:
Allows fonts to be installed to a web site license free. If the web font option is not there then it is not licensed to be used on the web.
There are only 30 web safe fonts available to use.
- File Size
PNG
GIF
PDF
JPEG
When working for screen we need the images to be a small as possible to that they load up quickly. We must do this in a lossy way.
TIF, PSD For print.. high quality
72 ppi?
RGB
Lossy
Compressed
Setup of Dreamweaver...
3 buttons at the top of the screen.
Code - shows us the code which is used to make the site.
Even though the page is blank there is still code.
The design option allows us to see what the site will look like on the internet.
Code:
Line 1 is declaring what type of document it is.
Line 2 can be whittled down to <html>
Anything inside < > is a html tag.
<html> is an OPEN html tag
</html> is a CLOSED html tag
Any tag with / included means it is a closed tag
<head> allows functionality
<meta> - search engine optimisation
This is where a designer can have their site at the top of a google search by adding a key phrase to it.
<title> will show up in the tab or browser window.
Example would be the apple site, the name apple appears in the tab box along with a small logo. This is called a FAVICON.
<body>
</body>
Anything which is part of the design has to go after <body> and before </body>
If all of our files are not stored in one place on our computers the website will NOT work. All information and images should be stored in a root folder.
An important thing to remember is that it will not recognise uppercase letters or spaces.
Any images must be stored in a sub-folder in the root folder and this must be called images.
When working with web we always use local folders and not remote folders. Remote folders are bought by designers.
Dreamweaver will not know where to find our information, we must tell it where it is.
Leave your comment