Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always...
22
Dreamweaver MX Dreamweaver MX BTA3Open
-
Upload
ruby-short -
Category
Documents
-
view
215 -
download
0
Transcript of Dreamweaver MX BTA3Open. Dreamweaver MX Application used for creating web sites Homepage must always...
Dreamweaver MXDreamweaver MXBTA3Open
Dreamweaver MXDreamweaver 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 SiteDefining 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 MXDreamweaver 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 InterfaceDreamweaver 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 InterfaceDreamweaver 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’
TablesTables• 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
HyperlinksHyperlinks• 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 DevelopmentWeb 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 PurposeDefining 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 StructureContent 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 StructureNavigation 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 Biography Graphic Design
Games Soccer page Reflection Samples Definitions
Determining ContentDetermining 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 ContentDetermining 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 BarsDefining 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 LayoutWeb Page Layout
Web Page LayoutWeb 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 DesignConcepts 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
AppropriatenessAppropriateness• 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?
PlacementPlacement• 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
ConsistencyConsistency• Repetition
• Place elements in the same location on each page
• More important when number of pages increase
UsabilityUsability• 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
