Web Design 3080 : Week 3 Introduction to Dreamweaver Lecture Open standards Colour on the web Typography Basic web page construction using DW Lab Defining a website DW properties inspector Page properties Page layout
Web Design 3080 : Week 3 Open Standards The Goal: to have all web browsers and ‘user agents’ respond identically to the same html code. The Web should be an open platform accessible to everyone The Reality: Not quite. Different browsers will render the same html code in slightly different ways, although the situation has improved since the ‘early days’. Browsers: IE6, IE7, Firefox 2&3, Safari, Opera, Camino, Chrome Can mean writing the same page in 2 (or more) different ways to ensure consistency of presentation. Usually accomplished through the use of Cascading Style Sheets (CSS) Standards keeper is the World Wide Web Consortium (W3C) Other orgs: The Web Standards Project
Web Design 3080 : Week 3 Colour on the web “web safe” colour palette = 216 colours only (maybe…) 8 bit colour (216) / High Colour (1000’s) / True colour (millions) HTML uses hexadecimal code - 3 pairs of alphanumeric characters - to represent RGB values examples: white = #FFFFFF yellow = #FFFF00 black = #000000 green = #009933 Values from 0-9 and A-F 16 named colours will also work Where & how to use hex values old method: <body bgcolor=“#FFFFFF”> as a tag attribute New (correct) method: body {background-color: #FFFFFF;} as a style declaration
Web Design 3080 : Week 3 Colour on the web (cont’d) What affects how colour is displayed? Monitor bit-depth (8 bit vs high vs true) Monitor colour settings, calibration, brand, age CRT vs LCD Ambient light Room colour Result: total control is impossible
Web Design 3080 : Week 3 Typography No absolute control over type on the web Users can re-size, even change the font in their own browser Your specified font may not be installed on user’s computer Font-family: 3 suggested fonts ex. p {font-family: Verdana, Helvetica, sans-serif;} Should all be controlled via CSS What can be controlled? Font face Size (pixels, points, ems, description, percent, numeric size) Line-height / leading Letter spacing Colour Alignment (left, centre, right) Style (italic, oblique) Weight (varying degrees of bold) And more… The cascade is important to account for non-installed fonts Verdana is a web optimized font and therefore easier to read than Times an em is the square of the default point size Pixels are the preferred and most predictable method for setting font size.
Web Design 3080 : Week 3 Setting up Your Site in Dreamweaver 1. Create New Dreamweaver Site The cascade is important to account for non-installed fonts Verdana is a web optimized font and therefore easier to read than Times an em is the square of the default point size Pixels are the preferred and most predictable method for setting font size.
Web Design 3080 : Week 3 Setting up Your Site in Dreamweaver 2. Choose the ‘Basic’ tab, Name your site “Web Design 3080” The cascade is important to account for non-installed fonts Verdana is a web optimized font and therefore easier to read than Times an em is the square of the default point size Pixels are the preferred and most predictable method for setting font size.
Web Design 3080 : Week 3 Setting up Your Site in Dreamweaver 3. Select ‘No, I do not want to use a server technology.’ The cascade is important to account for non-installed fonts Verdana is a web optimized font and therefore easier to read than Times an em is the square of the default point size Pixels are the preferred and most predictable method for setting font size.
Web Design 3080 : Week 3 Setting up Your Site in Dreamweaver 4. Select ‘Edit local copies on my machine…’ 5. Browse to H:\3080\public_html and select. Laptop users browse to C:\3080\public_html Mac users browse to your home directory and then 3080 > public_html The cascade is important to account for non-installed fonts Verdana is a web optimized font and therefore easier to read than Times an em is the square of the default point size Pixels are the preferred and most predictable method for setting font size.
Web Design 3080 : Week 3 Setting up Your Site in Dreamweaver 6. Select ‘None’ for remote server connection. This will be set up later. The cascade is important to account for non-installed fonts Verdana is a web optimized font and therefore easier to read than Times an em is the square of the default point size Pixels are the preferred and most predictable method for setting font size.
Web Design 3080 : Week 3 Setting up Your Site in Dreamweaver 7. You’re finished. Select ‘Done’. The cascade is important to account for non-installed fonts Verdana is a web optimized font and therefore easier to read than Times an em is the square of the default point size Pixels are the preferred and most predictable method for setting font size.
Web Design 3080 : Week 3 Macromedia Dreamweaver Files Upload (put) Local / Remote view Download (get) site connect refresh Split screen
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – The Property Inspector Fonts Tables Images
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – Toolbars Page Toolbar
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – Toolbars Common Toolbar
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – Toolbars Text Toolbar