Using Macromedia Dreamweaver MX

Download Report

Transcript Using Macromedia Dreamweaver MX 

Dreamweaver MX
BTA3Open
Dreamweaver MX
• Application used for creating web sites
• Homepage must always be saved as
index.htm
• All files names must be in lowercase
letters
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
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. <body>)
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
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’
Tables
• Used to organize and control the
arrangement of content in a web page
• Tables <table> consist of rows <tr>
and cells <td>
• 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
Hyperlinks
• The reason that HTML exists
• HTML stands for Hypertext Markup
Language
• Hyperlinks <a> are added to text or
images to allow people to move
through your site or to other sites on
the Internet
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
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
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
Navigation Structure
Home Page
Fun Page
Games
Biography
Soccer page
Graphic Design
Reflection
Samples
Definitions
• 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
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
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
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
Web Page Layout
Web Page Layout
• 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
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
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?
• 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?
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
Consistency
• Repetition
• Place elements in the same location on
each page
• More important when number of pages
increase
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