1. Web Site Development - Process of planning and creating a website

2. Stages of Web Site Development Planning Implementation

3. Planning Stage – 4 steps Define Purpose Sketch the navigation structure Determine the content Design web pages by sketching page layouts

4. Define Purpose Purpose – intent of site Target Audience - individuals that are intended to use the web site

5. 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

6. 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

7. 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

8. 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

9. Design Concepts 3.Consistency – Repetition in the placement and use of elements

10. Design Concepts 4.Usability – How easily the user can navigate thru the site and find info

11. 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

12. Implementation Stage – 5 steps Step 4 – Make changes or corrections Step 5 – Review, revise until complete

13. Purpose A clearly defined purpose helps to make decisions about the navigation structure and content

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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.

24. 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

25. 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

26. 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.

27. 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

28. 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

29. 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

30. 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 > and the library item name After typing your content, select File -> Save to save the changes

31. 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.

32. 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

33. 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

34. 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

35. 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

36. 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

37. 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

38. 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

39. Copyright Info A website that does not contain a copyright notice is STILL entitled to copyright protection