Post on 05-Jan-2016
transcript
Introduction to DreamweaverLouisa Lambregts, lambrel@algonquincollege.com
About Me
Louisa Lambregts
lambrel@algonquincollege.com
“What Am I Doing Here?”
Discussion Questions
? Why are you taking this course: personal interest, training for your job, transitioning to new career
What do you hope to learn from this course? (Be as specific as possible).
Do you have any web design or HTML experience?
Overview: Web Design Process
Plan Develop Publish Maintain
Overview: Web Design Process
Plan Develop Publish Maintain
-concept-wireframe of layout-navigational structure
Overview: Web Design Process
Plan Develop Publish Maintain
-interface design-design template-build pages-add content-build/embed features-user testing
Overview: Web Design Process
Plan Develop Publish Maintain
-review content-upload to server-get web host-get domain name
Overview: Web Design Process
Plan Develop Publish Maintain
-set up content maintenance plan-set up content owners with Contribute-set up administrative settings (e.g. versioning,check files in and out)
Purchasing Dreamweaver
College Computer Store
Educational versionBundles are available
Web Designer Tools
From the Web
Firebug
Free Web SitesWeebly: http://www.weebly.comWix: http://www.wix.com
Free CSS Templates (inspiration only!) http://www.freecsstemplates.org/css-templates/
What is HTML?
Acronym for . . .
What is HTML?
Acronym for …
Hyper Text Mark Up Language
HTML Basics
Basic Page Layout
<html><head> <title> My first Web Site </title></head><body>
<p> Your content</p></body>
</html>
HTML Basics
Syntax
<tag> <tag> Content </tag>
</tag> Nesting
-having open and close tags
HTML Basics
Syntax
<br/> Onlyelementwithoutan end tag
HTML vs XML vs XHTML
HTML was designed to display dataFormatting
XML (Extensible Mark Up Language) was designed to transport and store data.
XHTML: HTML + XMLStricter version of HTML (tighter syntax)
CSS – Cascade Style Sheets
What was CSS designed to do?
How does it work?
CSS – Cascade Style Sheets
Format separated from content Different style sheets for different
outputs Can change look and feel of site by
linking to a different style sheet
Flexibility of layout
CSS vs HTML
Red Text
In HTML, would code in page:
<font color = “red”> Red Text </font>
CSS vs HTML
Red Text
In CSS, could do:
<font style="color:red”> Red Text </font>
CSS vs HTML
Red Text
In CSS, could define all body text to be red:
<head><style type="text/css">body {color:red;}</style></head>
CSS vs HTML
I want this paragraph to be red.
And the next paragraph too!
In CSS, could define one section to be red:
<span style="color:red ><p> I want this paragraph to be red. </p>
<p> And the next paragraph too! </p></span>
Web Design Tutorials
w3schools
Try the interactive tutorials related to HTML
http://www.w3schools.com/
Get a Head Start on the Technical Basics