DW+Chapter+1

=Dreamweaver Ch 1=

HTML - HyperText Markup Language

Web Browser - a program that allows you to view a web site. Examples: Internet Explorer, Firefox, Chrome, Safari, etc.

Web Site - a group of related web pages that are linked to each other and share a common interface and design.

Three Views
Design - Shows the page as it would appear on a browser. This is very useful in the design phase. Code - Shows the underlying HTML code. This is useful in troubleshooting. Split - Combination of both views. Great for troubleshooting.

Important Elements
A good web site will hold the interest of the viewer. Elements that assist in this include:
 * hyperlinks
 * images
 * banners
 * menu bars
 * image maps
 * good interesting current information

Structure
The home page is always named **index.html** The home page is also called that //parent// page. The pages linked from the home page are called //child// pages. The main folder is called the local site folder or the //root folder//. The root folder will contain a folder labeled //assets//. All your web pages should be in your root folder. All your images, banners, buttons, flash videos, etc should be stored in your assets folder.

A //site map// can is a graphical representation of the structure of a web site. It shows how the pages are related to each other.

Use the //Files Panel// to help manage your files. You can create pages and folders in the Files panel. If you ever need to move a file, do it in the Files Panel. Never move a page in Explorer. When you move a file in the Files Panel, it will ask you if you want to update links. Always click yes.

The //Document Window// is the large white area in the DW program window where you create and edit web pages.

The //Property Inspector// is located at the bottom of the DW window. It lets you view and change the properties of a selected item.

**Process**
1.Plan the site. Know your audience. What would appeal to your audience? What information do you want them to gain? Where will you get the information for your site? (Cite Sources) What is your timeline? 2. Gather all your resources - text, images, video, buttons, etc... 3. Start creating the design of the pages. Complete the design of the index page first and then create subpages based on the index design. 4. Add content 5. Test all pages and all links. Testing should be a continuous process. 6. Edit pages. Test again. 7. Publish the site to a web server, (Not a part of this class.) If publishing, get permission for every graphic used. Never use pictures from the internet without permission from the source - in writing.

Creating a new web site
1. Create a folder that will contain the web site. Typically we create these on the Y Drive. Be sure to put everything for your site in one folder. If you want to work on it at home, copy the folder to your computer. Take it home and work on it. Then copy the entire folder back to the Y Drive. 2. Site > New Site > Type in the name for your site The second box should contain the path to your root folder. Click on the file folder and browse to find it on the network. Save your settings. 3. Go to the Files Panel on the bottom right. See if you can find the site you just created. 4. Right click on the Site folder > New folder > name it assets

When you name web pages, never use capital letters, special characters, or spaces. You may use underscores and hyphens. carol-horner would be OK to use. carol_horner would be OK to use. CarolHorner would NOT be OK to use

5. Right click on the site folder and select new page. Name it index.html. (This will be your home page.)

Activity 1
1. Create a site named Wesleyan School 2. Create an assets folder 3. Create an index page 4. Create a table with 6 rows and 2 columns 5. Copy banner file to your assets folder 6. Merge all rows except the top and the bottom 6. Insert the banner onto the index page - top row left side 7. Type text for menu bar - 2nd row 8. Insert horizontal rule in 3rd row 9. Type text into 4th row 10. Type text into both cells in bottom row 11. Insert the campus picture 12. Set column widths 13. Create CSS name it - start with a. be sure to put in a new style sheet create menu-options, address, body_text 14. Apply CSS 15. Create the rest of the pages 16. Hyperlink to the pages on the menu bar 17. Create an email link 18. Insert a date object 19. Create a page title