web site development - process of planning and creating a website
DESCRIPTION
Planning Stage – 4 steps Define Purpose Sketch the navigation structure Determine the content Design web pages by sketching page layoutsTRANSCRIPT
Web Site Development
- Process of planning and creating a website
Stages of Web Site Development
• Planning• Implementation
Planning Stage – 4 steps
• Define Purpose• Sketch the navigation structure• Determine the content• Design web pages by sketching page layouts
Define Purpose
• Purpose – intent of site• Target Audience - individuals that are
intended to use the web site
Sketch the navigation structure
• Determine the web pages that will be used in the web site by sketching the navigation structure
• Pages are determined from the purpose and the target audience
Determine the content
• Content– Text, images and other objects presented to a
user on a web page– Determined using the navigation structure of a
web site as a guideline
Design Concepts (4)
1. Appropriateness– How well the elements in the web site match the
purpose and audience
• Elements– Text, images, or other media including navigation
bars, a logo or heading, copyright info and content
Design Concepts
2. Placement– Arrangement of web page elements– Placing important elements above the fold
• Above the fold– Near the top of the page; no scroll
• White space– Any blank space on a page regardless of color
Design Concepts
3. Consistency– Repetition in the placement and use of elements
Design Concepts
4. Usability– How easily the user can navigate thru the site and
find info
Implementation Stage – 5 steps
• Step 1– Defining the web site and organizing the files and
folders• Step 2– Create the pages
• Step 3– Review the site in a browser, print and review
Implementation Stage – 5 steps
• Step 4– Make changes or corrections
• Step 5– Review, revise until complete
Purpose
• A clearly defined purpose helps to make decisions about the navigation structure and content
Navigation Structure
• Navigation bar – a set of hyperlinks that give users a way to display
the different pages in a web site
• A web site can contain several types of navigation bars and usually contains more than one type for better usability
Navigation Structure
• Top Global Navigation Bar– Placed near the top of the page– Should not contain too many links; 8 max– Can be text or images
Navigation Structure
• Bottom Global Navigation Bar– Should appear near the bottom of the page– Often centered– Text links– Small size– Contains links to ALL pages in the site
Navigation Structure
• Local navigation bar– Positioned below the top global navbar or
vertically along the left side of the page– Contains links to the child pages of the current
page– Also contains links to pages at the current level or
to locations on the current page– Not always needed especially on smaller sites
Navigation Structure
• Breadcrumb Trail or Path– Navbar that displays the pages in the order of
level from home page to current page• Each page name is a link to that page except for the
current page• Gives the user a point of reference• Allows the user to navigate by backtracking through
the site• Never on the home page
Navigation
• Home page links– Always included in the breadcrumb trail AND the
bottom navigation bar– A logo at the top of the page is also typically a link
to the home page
Web Page Layout
• Refers to the arrangement of the elements on the page
• Elements– Can be in the form of text, images, Flash movies,
or other media and include navigation bars, a logo or heading, copyright information, and content
Web Page Layout
• Header– The top area of the web page– Includes a logo or a heading, top global navbar &
breadcrumb trail, if needed• Footer– The bottom area of the web page– Includes a bottom global navbar other info such as
copyright info, date last updated and a link to contact the author
Folders
• Root Folder: – Created during the site definition
• To add a new folder to a site:– select the root folder – right click on New Folder from the pop up menu– After the folder is created it can be renamed
Assets Panel
• Helps in maintaining consistency in the content throughout the site
• Located in the files panel group• Lists images and other objects available in the
site• Click the images icon to display the images
category which lists all the image files in the site.
Missing Images
• Problem: – There are images contained in a website but they
are not displayed in the Images Category on the Assets panel
• Solution:– Update the site list in the files panel group to
update the list of images
Inserting Images
• Drag the image from the Assets Panel to the place on an open web page document
• Click the INSERT button at the bottom of the Assets Panel to place the selected image at the insertion point
Merging Cells
• Cells in a table may be merged into one cell• The Merge Cells button is located in the
Property Inspector• To merge several cells into one, select the
cells and click the Merge Cells button• Cells can be selected horizontally or vertically.
Splitting Cells
• A Cell in a table may be split into more cells• The Split Cell Button is located in the Property
Inspector• Place the insertion point in a cell and click the Split
Cell Button• A dialog box appears• Select rows or columns• Specify the number of rows and columns• Click OK
Library Category
• Located in the Assets panel• Library item– Content in a separate file, with a descriptive
name, that is used repeatedly in the web site• Library items help maintain consistency in a
web site
Creating a Library Item
• Click the library icon in the Assets Panel to display the library
• Click the New Library Item button at the bottom of the Assets Panel
• Type a name for the library item
Adding Content to a Library Item
• Click the Edit button at the bottom of the Assets Panel
• A window is opened and the title bar displays the text <<library item>> and the library item name
• After typing your content, select File -> Save to save the changes
Library Items
• The content of a selected library item appears in the preview area of the Library in the Assets Panel
• Dreamweaver automatically adds a Library folder to the website root folder when the first library item is created.
Placing Library Items
1. Drag the library item from the Library to the place on an open web page document
2. Click the INSERT button at the bottom of the Assets Panel to place the selected library item at the insertion point
• In a web page document, a library item appears with a yellow background
• No yellow background in a browser
Editing Library Items
• Select the Library item in the Library and then click the Edit button
• The library item opens in a window• Make the necessary changes and click save• A dialog box is displayed• Click Update to update all occurrences of the
library item in the website
Time Stamp
• Used instead of typing a new date every time the web page is edited
• Changes automatically when a page is modified• Select Insert -> Date or click the Date Button in
the common tab of the Insert Panel• Insert Date dialog box appears• Select the format of the date and the current
info will appear at the insertion point
Time Stamp
• The update automatically on Save box must be selected if the date is to be automatically updated each time the web document is saved
E-mail Hyperlink
• A link that allows the user to create and send an e mail message.
• When the user clicks an e-mail hyperlink, a new e-mail message window is displayed
• An e-mail link to the webmaster is usually included in the footer
Creating an E-mail Hyperlink
• Select the text that will be the link in the Document window and then click the e-mail link button on the Insert Panel
• A dialog box appears • Type the e mail address in the e mail address
box
Copyright Info
• A web page should include copyright information with a copyright notice that contains the text Copyright followed by the year of publication
• If the website contains a copyright notice, it is protected work and not intended for the public domain
Copyright Info
• A website that does not contain a copyright notice is STILL entitled to copyright protection