-Web standards and limitations
-Layout
-Setup
-Basic Coding
____
Web standards: Acronyms, Abbreviations and more.
HTML: The basic coding language of every website.
XHTML: Hyper Text Markup Language
CSS: More graphic-based websites
WYSIWYG: What You See Is What You Get -- Ability to create websites visually. E.g. What you see on Dreamweaver is what you will see on the published website.
SEO: Search Engine Optimisation -- Get your website to show up on Google / other search engines. The more you pay, the more visible you become on Google - Capitalist system.
FTP: File Transfer Protocol
URL:
XML & PHP: Type in 'wheelbarrow' to Amazon. This communicates and responds with a list of all the wheelbarrows on sale.
WWW: World Wide Web.
UI: User Interface
UX: User Experience -- E.g what is the user's first impressions when visiting the website.
____
Limitations // Designing for the lowest common denominator.
-Need to take all users into consideration. Ensure your website will be effective / useable on as many screens as possible.
Web safe colours. 216 colours.
Colours were/are selected/identified/reproduced consistently across the web using HTML, using a six or where possible three digit hexadecimal code.
RED
FF0000
FF0
RGB colour mode is cabable of reproducing 16 million different colours.
The combination of red, green and blue values from 0 to 255 (256 unique shades for each value).
Red 256 x green 256 x blue 256 =
These can now be produced using CSS:
e.g Red = rgb (255, 0, 0)
This is not a consistent display of colour across all screens, new and old. Its capable of being reused but not 'safe' to use across all devices. Hence the original (and still existing) 'Web Safe Colours'
____
Web Safe Fonts.
The website uses the fonts that are installed on the user's computer. Therefore the font must be a standard font in order to be consistently displayed across all devices. E.g Helvetica is a standard font. However if for whatever reason this was deleted on users comp, the font would automatically be changed to Times New Roman.
To help to prevent this, its important to consider 'fallback' font options.
E.g: Georgia (serif font) if this is unavailable use "Palatino Linotype", "Book Antigua" -- It is important to remember to place quotation marks around the font names.
Common font families:
Arial, Helvetica, sans serif
Tahoma, Geneva, sans serif
"Trebuchet MS", Helvetica, sans serif
Verdana, Geneva, sans serif
Free fonts are for personal usage. Not for commercial use. In order to use these, a licence fee must be payed.
CSS can be used to install fonts. @font-face allows you to install fonts onto a website meaning the font remains consistent regardless of the browser or the system.
www.fontsquirrel.com
Install 'Webfont kit'
____
Size, dimension & pixel resolution.
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi) -- New macs in present day.
This makes it difficult to decide which size to choose to design/display your website. Its hard to accommodate for both old, and new browsers and systems.
____
File Formats
PNG
GIF
JPEG
-
72ppi?
GRB
-
Lossy
Compressed
____
Part Two: Using Dreamweaver
Adobe Dreamweaver welcome screen
Choose HTML.
'Design' option = What you see is what you get
Working in code
The first line you get is not needed for the website to work.
line 2: 'html' <html> = open html -- </html> = close html (line 6)
line 3: <head> every function of the website must be included within the 'head'
line 4: <meta>
line 5: <title> every page can have its own title. The title is shown in the tab alongside an icon (called a favicon). This is found at the top of the web browser.
line 8&9: <body> </body> everything you want to display on the website.
line 10: </html>
Open User Work
create a folder where everything for our website will be saved together.
-Create a root folder.
-within this folder create a sub-folder called images.
Informing Dreamweaver where this root folder exists
Site -- new site
name your website & set the local site file
bottom right corner should now show your root folder and sub folder
As the local site folder has now been set up, whenever you click 'save as', Dreamweaver will automatically know to save into the root folder.
The Homepage should be saved as 'index' in lower-case. This will show up as the first page. It does't matter what the other pages are called.
In order to view your website online, click the globe icon and preview in web server of your choice.
cmnd + tab = easy alternating between website & Dreamweaver.
___________
Remember that designing a website for someone else is not necessarily about your personal taste. All the design elements should be generated to satisfy the client and how they would like their website to look. Website development should be improved to the client's needs as opposed to your own.
No comments:
Post a Comment