1. Louisa Lambregts, lambrel@algonquincollege.com

2. Louisa Lambregts lambrel@algonquincollege.com

3. 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?

4. PlanDevelopPublishMaintain

5. PlanDevelopPublishMaintain -concept -wireframe of layout -navigational structure

6. PlanDevelopPublishMaintain -interface design -design template -build pages -add content -build/embed features -user testing

7. PlanDevelopPublishMaintain -review content -upload to server -get web host -get domain name

8. PlanDevelopPublishMaintain -set up content maintenance plan -set up content owners with Contribute -set up administrative settings (e.g. versioning, check files in and out)

9. College Computer Store Educational version Bundles are available

10. From the Web  Firebug  Free Web Sites Weebly: http://www.weebly.com Wix: http://www.wix.comhttp://www.weebly.comhttp://www.wix.com  Free CSS Templates (inspiration only!) http://www.freecsstemplates.org/css-templates/http://www.freecsstemplates.org/css-templates/

11. In the beginning... There was html.

12. Layout was dominated by Text formatting Layout via tables Frames Javascript: Roll-over buttons Animations Splash page Flash

13. http://www.corson.tv/main/buttugly.htm www.keepbanderabeautiful.org:80/climatecha nge.html

14. And then came CSS and Flash. www.algonquincollege.com/col Example of a site that uses: 1) Dreamweaver Templates and Contribute for site management and publishing 2) Formatted with mostly CSS 3) Uses javascript for the menu and the slideshow www.gold-art.com/ Example of a site that uses: 1) Flash as an introductory page 2) Also, still uses tables for layout

15. Acronym for...

16. Acronym for … Hyper Text Mark Up Language

17. Basic Page Layout My first Web Site Your content

18. Syntax Content Nesting -having open and close tags

19. Syntax Only element without an end tag

20.  HTML was designed to display data Formatting  XML (Extensible Mark Up Language) was designed to transport and store data.  XHTML: HTML + XML Stricter version of HTML (tighter syntax)

21. What was CSS designed to do? How does it work?

22. 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

23. Red Text In HTML, would code in page: Red Text

24. In CSS, could do: Red Text

25. In CSS, could define all body text to be red: body {color:red;}

26. I want this paragraph to be red. And the next paragraph too! In CSS, could define one section to be red: I want this paragraph to be red. And the next paragraph too!

27. w3schools Try the interactive tutorials related to HTML http://www.w3schools.com/ Get a Head Start on the Technical Basics