1. Dreamweaver MX BTA3Open

2. Dreamweaver MX Application used for creating web sites Homepage must always be saved as index.htm All files names must be in lowercase letters

3. Defining a Web Site Must define web site before you can add to it This definition determines where all of the files for a site are located on the computer Create a central web site folder on your computer (e.g. Personal Portfolio Website) Save all web files into this folder Create an images folder in your central web site folder Save all images into this folder

4. Dreamweaver MX Three views: Design Design and Code Code You will use design view primarily but it is still important that you know about the code behind the design HTML code is made up of tags (e.g. )

5. Dreamweaver Interface Document Window Main working area where you create and edit files Property Inspector Properties for objects or text selected in the document window Insert Panel Allows you to insert a huge number of HTML objects Document Toolbar Allows you to control your view

6. Dreamweaver Interface Tag Selector Enables you to select any tag in the document and highlights the selected content in the document window Panels and Panel Groups Design Behaviours (rollovers) CSS Styles Files Allows you to define sites Displays your site ‘assets’

7. Tables Used to organize and control the arrangement of content in a web page Tables consist of rows and cells Width defined by pixels (fixed) or percentage of screen (flexible) Cellspacing Amount of space between cells Cellpadding Amount of space between side of cell and text

8. Hyperlinks The reason that HTML exists HTML stands for Hypertext Markup Language Hyperlinks are added to text or images to allow people to move through your site or to other sites on the Internet

9. Web Site Development The process of planning and creating a web site Planning includes: Determining the web site’s purpose, audience, navigation structure, content, and page layout Implementation includes: Setting up the web site and creating the web pages Revising pages

10. Defining a Purpose Stating the intent of the web site Helps to make decisions about navigation and content Describe the target audience Composed of the people the site is being made for Demographics (age, sex, income, education, etc.) Psychographics (interests, beliefs, etc.) Geographics Behaviours

11. Content and Structure Required web pages are determined by the site’s purpose and audience Home page contains general information and links to other pages Organization of site is called navigation structure

12. Navigation Structure Home page is top-level page FunPage|Biography|Graphic Design are second-level pages The remainder of the pages are third-level pages Games and Soccer Page are called same-level pages Home Page Fun Page Games Soccer page Biography Graphic Design ReflectionSamplesDefinitions

13. Determining Content Content of each page is the text, images, and other objects such as Flash movies Defined using the navigation structure of the site as an outline and then listing the text and objects for each page

14. Determining Content Home Page Your Logo Purpose of the website Brief introduction Bio Age / Favourite food, Music, etc… Pictures of yourself / family Links Fun Page links Games More pics, etc… Graphic Design Reflection Samples of work Definitions of key terms

15. Defining Navigation Bars Top global navigation bar Link to each page on the first and second levels Can be text or images Breadcrumb trail Displays the page names in order of level, from the home page to the current page Use > to separate pages Local navigation bar Can be positioned horizontally under top global navigation bar or vertically Contains child pages of current page Bottom global navigation bar Should only use text links in a small size

16. Web Page Layout

17. Header Top area of a web page Includes a logo or heading, top global navigation bar Breadcrumb trail Footer Bottom area of a web page Includes bottom global navigation bar, copyright information, date of last update

18. Concepts of Web Design Remember to consider each of the principles of design when you are creating your pages In addition, pay special attention to these concepts of web design: Appropriateness Placement Consistency Usability

19. Appropriateness How well the elements in a web site match the purpose and target audience Ask yourself Is the text appropriate for the audience? Do the images fit the purpose of the web site? Are they appropriate for the audience? What other content would the audience expect to find at this web site?

20. Placement Placement of elements should follow generally accepted standards based on user expectations Important information should be placed ‘above the fold’ Newspaper terminology Make sure that users don’t have to scroll to find important information White space is important

21. Consistency Repetition Place elements in the same location on each page More important when number of pages increase

22. Usability How easy is it to navigate? Should be easy for the user to find what they are looking for Text should be limited to only necessary words and paragraphs People don’t read on the web – they scan Less words = easier to scan