2. Web Site Development Test 2 Working in DreamWeaver

3. Test 2 – Working in DreamWeaver2 What Is a Web Site Design Program?  Web site design programs simplify the creation of Web pages.  They can eliminate the time-consuming and tedious process of coding all of the HTML tags for a page.  They allow you to build a page by placing text and objects in a drawing area, where the program then generates the HTML code for you.  Macromedia Dreamweaver and Microsoft FrontPage are two examples of Web site design programs.

4. Test 2 – Working in FrontPage3 Explore a Web Site Design Program  Most Web design programs have similar features in the user interface, including A document window or drawing area where you enter and place the page elements. Title and menu bars. Toolbars and sometimes a Toolbox. Some type of file or folder list window that shows all files in the current site.

5. Test 2 – Working in FrontPage4 Add Content to a Web Site  Text, graphics, and drawn objects are added to the document window and then formatted as needed.  Other ways to add content include Adding new pages to the site. Formatting the pages. Creating new pages by using existing pages.

6. Test 2 – Working in FrontPage5 Add a New Page to the Site  New pages can usually be added in at least two ways: Using the New command on the File menu Using the New button on the toolbar  Some programs will ask you to select the type of page you are adding from a list of page types.  A new page does not become part of the current site until you save it. Use the Save As command on the File menu.  Add the page content in the Document window.

7. Test 2 – Working in FrontPage6 Format Font  Highlight text and change properties  Text elements have properties that can be modified, including The text color. The font type, style, and size. Alignment  DreamWeaver creates styles

8. Test 2 – Working in FrontPage7 Format Backgrounds  The background color is located in the Page Properties  To change the color of a background Choose Page Properties Select from Color Palette  An image can be used as a background Many images are not made to be used as backgrounds

9. Test 2 – Working in FrontPage8 Create New Pages Based on Existing Pages  You can use an existing page to create a new page by Pasting the copied page into the current project. Rename and save the copied page to add it to the site.  Use the Save As command on the File menu or the Rename command on the shortcut menu.  Creating new pages from existing pages helps maintain a consistent look and feel for the site. Keep any design elements that appear on all pages. Delete existing text and enter the text that applies to the new page.

10. Test 2 – Working in FrontPage9 Create Text or Graphic Links  To create a hyperlink in DreamWeaver: Select the text or graphic to be used as the hyperlink.  To insert a hyperlink: Insert Menu Insert Hyperlink on Toolbar You can also link to pages outside the site by entering a path or URL in the link box. Links within the site are called relative links. Links to pages outside of the site require a full path to the file and are called absolute links.

11. Test 2 – Working in FrontPage10 Images  Images are a large part of web page design. They are used to attract the user's attention to the information on the page. The images can also serve the following purposes on a web page: They can be Hyperlinks They can be Backgrounds They can also have informational purposes (maps, photos, etc.)

12. Test 2 – Working in FrontPage11 GIF Images  GIF (.gif) - best used for graphics with large sections of solid colors (like most clipart)  256 colors per image are available  Supports animation  Supports transparency  Easily compressed (make the file size smaller)

13. Test 2 – Working in FrontPage12 JPEG Images  JPEG (.jpg or.jpeg) - best used for photographs  16.7 million colors per image  No animation  No transparency  Becomes blurry when compressed

14. Test 2 – Working in FrontPage13 Other Types  Bitmap (.bmp) - created by a Paint program  TIFF (.tif or.tiff) - newer image type that only works on newer browsers  PNG (.png) - newer image type that only works on newer browsers Fireworks file

15. Test 2 – Working in DreamWeaver14 Horizontal Rules  Image designed to separate sections of a web page  Can be saved from the Internet

16. Test 2 – Working in FrontPage15 File Name Rules for Web Pages  Never use spaces within, before, or after the name  Never use unusual characters within a file name. Avoid punctuation marks, accents, or other special characters. (The period, hyphen, and underscore are the only characters allowed)  Keep filenames short but meaningful  Stay consistent with file extensions  Capital Letters should only be used for Folder Names. HTML files should only use lowercase letters.

17. File Name Rules for Web Pages RuleCorrectIncorrect Never use spaces within, before, or after the name myhomepage.htm Never use unusual characters within a file name. Avoid punctuation marks, accents, or other special characters. (The period, hyphen, and underscore are the only characters allowed) oceanlife.htm ocean-pacific.htm pacific_ocean.htm ocean/life.htm ocean(pacific).htm pacific+ocean.htm Keep filenames short but meaningful bball_roster.htm var_schedule.htm varsitybaseballschedule.htm page1.htm Stay consistent with file extensions.htm or.html.jpg or.jpeg using multiple forms of file extensions Capital Letters should only be used for Folder Names. HTML files should only use lowercase letters. homepage.html Zoo/index.html Homepage.html zoo/Index.html

18. Test 2 – Working in FrontPage17 Bookmarks  Bookmarks are hyperlinks that direct the user to other sections of the same page.  They should be used for long pages that require scrolling.

19. Test 2 – Working in FrontPage18 Using Tables  Tables can be used for many different tasks on a web page:  Organizing information in a Table  Positioning Images on a page  Organizing all the material on a web page

20. Test 2 – Working in FrontPage19 Inserting a Table in DreamWeaver  Insert Menu  Insert Table button on the toolbar  Set number of columns and rows

21. Test 2 – Working in FrontPage20 Formatting a Table  Size of Table  Merging Cells  Cell Padding space between cell border and text  Cell Spacing space between cells  Borders size "0" is for invisible tables  Shading  Table Position

22. Test 2 – Working in FrontPage21 Publish a Site  When your preparation work is done, you are ready to upload your site.  Once published to the Web server, your site can be viewed by anyone.  Design programs usually have a view that shows the local files (on your computer) and the remote (server) files.  You usually click a button to start transferring files from the local side to the remote side.