Download presentation
Presentation is loading. Please wait.
1
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
2
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
3
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 = # 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
4
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
5
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.
6
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.
7
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.
8
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.
9
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.
10
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.
11
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.
12
Web Design 3080 : Week 3 Macromedia Dreamweaver Files Upload (put)
Local / Remote view Download (get) site connect refresh Split screen
13
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – The Property Inspector Fonts Tables Images
14
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – Toolbars
Page Toolbar
15
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – Toolbars
Common Toolbar
16
Web Design 3080 : Week 3 Macromedia Dreamweaver Interface – Toolbars
Text Toolbar
Similar presentations
