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