1. MIS 201
Web Design

2. Website Planning
Before even considering the practical aspects of creating a website, there are some important fundamental questions
you need to ask yourself first
What are we hoping to achieve?
Who's our target audience?
What catergory, if any, does our site fall into: ecommerce, informational, educational, social networking, etc.
How visually exciting does it need to be to be effective?
What tone do we want our content to convey, could it be serious or witty, complex or simple?

3. Site Content & Information Structure
Probably the most important aspect of website 'structural design' is how you breakdown the content into logical sections (Main Areas, Pages, Headers, Sub-Headers, Lists, etc). You need to create a strong hierarchy for the site and breakdown content into small units. It is a good idea to create a graphical schema/flowchart/sitemap for the site. This can help you visualise a logical hierarchy.

5. Getting Start
Create a folder on your computer called website1 to hold all web pages and graphics. Optional: inside of the website1 folder create a folder called images to hold your graphics.
All folders, webpages, and graphic names must be lowercase, no spaces, and no special characters for ease of linking later.

6. Launch Dreamweaver Select HTML

7. New Page Appears

8. Or Select File>New

9. Select HTML, Create

10. Window>Insert, Properties, Files Have a Check Mark When Active

11. Setting Up a New Website
Window>Files Checked You Will See The Files Palette on the Right

12. From the Pop Up Files Palette Window: Select Manage Sites

13. Select The New Button>Site

14. Set the New Site Definitions
1. Name Your Webpage
2. Click on the Folder Icon & Locate the website1 folder
3. Click on the Folder Icon & Locate the images folder inside of the website1 folder 1 2 3 4

15. The File Structure You Created

16. Begin Creating the index.html main webpage

17. Modify>Page Properties

18. Appearance, Set Font, Text, Background Color

19. Links, Set Link, Visited Link Colors

20. Click the Curser on the Page, Select Alignment, Type in Text
Window> Properties
Center Alignment Button

21. Highlight Text, Select Ariel Font
Window> Properties
Font Pop-up Menu

22. Highlight Text, & Select the Title Format Size
Window> Properties
Pop-up Format for Title Heading Size: Example 2

23. Or to Create a Title With a Graphic: Insert>Table or Select Table Icon
Tables control object placement

24. Set Row, Column, Table Width, Border, OK
Title Example:
1 Row
2 Columns

25. Drag Table Column Line Left or Right to Adjust the Width
Adjust Column Widths
Drag Table Column Line Left or Right to Adjust the Width

26. Before Adding Graphic Images go to File>Save As>name your file( index.html)
Remember to use all lowercase letters, no spaces or special characters in your page name

27. Click in the Left Cell, Insert>Image, or use the Image Icon, Locate
Click in the Left Cell, Insert>Image, or use the Image Icon, Locate.gif or .jpg File

28. Click in the Right Cell & Type to Add the Title

29. Select the Table, Select BG to Add a Background Cell Color
Window> Properties Menu

30. To Make Border Invisible, Select Table, Set Border to 0
Select Edge of Table

31. To Add Navigation Table, Insert>Table or Table Icon
1 Row
7 Columns Maximum

32. Click Inside of the First Cell to Add a Flash Navigation Button

33. Insert>Media>Flash Button

34. Button Settings: Style, Text, Font, Link, Size, Apply, OK
Remember when uploading your website to the server to add your .swf Flash buttons you created

35. Repeat to Add All Buttons
If you need to edit the button after has been created or to check the links just double click on the button again, change the features, Apply, OK.

36. Example of Completed Title & Navigation Buttons
You May Have Different Titles For Your Navigation Buttons

37. External Links: Type Text & Highlight, Type in Link URL & Press Return Key

38. Internal Links: Type Text & Highlight, Type in Link URL & Press Return Key
index.html

39. E-Mail Links: Type Text & Highlight, Type in Link URL & Press Return Key

40. Inserting Graphics and Text in Tables
Control placement of elements in relation to each other.
Specify amount of space between each page element.
Always plan how your table will look with all the text and graphics in it.
Even a rough sketch will save you time

41. Click in the Left Cell, Select Insert>Image or Image Icon
Locate Graphic Image:
.gif
.jpg
Choose

42. Click in the Right Cell & Add Your Text
May Need to Adjust Column Width
Adjust Font to Ariel

43. Anchors Are Used to Jump Down on a Long Page of Text

44. Highlight Word, In the Link Box Type in #name
#august

45. Highlight Text to Link To, Insert>Named Anchor

46. Type in Exact Name Match, Example: august, OK

47. Notice the Yellow Anchor, This Will Not Show When Posted

48. Can Duplicate Pages
Once the index.html page is set up as desired with the logo, header, and navigation buttons it can serve as a template for creating new pages.
Just save the current page(index.html) as a new filename, then edit the new page to suit.

49. File>Preview in Browser> Select the desired browser

50. Notice How the Browser Opens in Front To Preview What it Will Look Like When Uploaded to the Server
When Finished Viewing Browser Red Button Close

51. Optional: File>Preview in Browser> Edit Browser List

52. For Selecting Primary & Secondary Browser Choices

53. Viewing Options: HTML Code

54. Viewing Options: Split Code & Design
You Can Highlight Areas in Design Mode & See It in Code

55. Viewing Options: Design For Creating & Editing Web Pages