DESIGN PRODUCTION
DESIGN FOR WEB
- Web Standards and limitations
- Layout
- Setup
- Basic coding
Web standards are governed by acronyms & abbreviations.
- HTML-HYPER TEXT MARK UP LANGUAGE
- XHTML- EXTENDED HYPER TEXT MARK UP LANGUAGE
- CSS-CASCADING STYLE SHEETS
- SEO-SEARCH ENGINE OPTIMIZER
- FTP-FILE TRANSFER PROTOCOL
- URL- UNIFORM RESEARCH LOCATOR
- WYSIWYG- WHAT YOU SEE IS WHAT YOU GET
- UI-USER INTERFACE
- UX-USER EXPERIENCE
Dreamweaver is a WYSIWYG application.
Term web designer is dated, UI is the new term as user interface designers design apps as well.
LIMITATIONS FOR DESIGN FOR WEB
- Size of screen/display
- Size of file
- Colour- 216 web safe colours
When colour first arrived on the web computers could only support a mximum of 256 colours on their 8-bit monitors. A list of 216 'Web Safe Colours' were identified
These colours are reproduced consistantly across the web using HTML, specifically a six or where possible a three digit hexadecimal code.
RED
#FF0000
#FF0
BLACK
#000000
#000
WHITE
#FFFFFF
#FFF
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 insure maximum compatibility between browser and systems. For example if the browser/system does not support the first font it tries the next one instead.
Some common font families:
SERIF FONTS
Georgia, serif
"palatino linotype", "book antiqua", Serif
SAN SERIF FONTS
Arial, Helvetica, Sans-serif
MONO SPACE FONTS
Courier
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 the licensing and copyright laws related to specific font foundries
There are many free font websites which include free licence usage for @font-face kits including Font Squirrel.
SIZE DIMENSION PIXEL RESOLUTION
640x480- First computers
800x600- By 1995
1024x768- Early 2000's
1920x1080- 5 years ago
2880x1800 (200 ppi)- New retina display computers
FILE FORMAT
Lossy file format-Compressed- Design for web
PNG
GIF
PDF
JPEG
Lossless file format- Design for print
3 potential designs for my website
DREAMWEAVER
We don't use the recent files option as uni computers are network.
Next I created a new HTML file.
We are working with coding as there are some flaws with the design mode.
This is the coding to a completely blank web page, as you can see there is a lot of coding for a web page with nothing on it.
Anything with in <> is an HTML tag. <html> all this tag means is open HTML. </html> means close HTML. For a website to work you must have an open and close tag.
<head> </head>This is where you put anything that increases the functionality of the website, it isn't something that is visible.
<meta> Search engine optimisation, these are not needed for a website to work.
<title> Not noticeable in the physical design but shows up in the search engine, also helps search engine optimisation.
<body> </body> anything that you want to be visible on the webpage must be between the open and close body tag.
FAVICON is a logo in the search engine.
You have to create the containing folder before you begin. It is called the root folder, if things aren't saved to the root folder it will show up as a broken link on the webpage.
Never use upper case letters or spaces for file name e.g Toy Story would be called 'toystory'
Next we created a sub folder with in 'root' called 'images'
We then selected site>new site...
We gave the website a name and linked it to the root folder by going to the local site folder and locating it on the hard drive.
Next we selected save and this appeared in the bottom right hand corner. We are now ready to create our webpage.
you must never delete the file extension.
Homepage must always be called 'index'
No comments:
Post a Comment