Web Site Development

1. Web Site Development Test 2 Working in DreamWeaver

2. 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. Test 2 – Working in DreamWeaver

3. 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. Test 2 – Working in FrontPage

4. 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. Test 2 – Working in FrontPage

5. 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. Test 2 – Working in FrontPage

6. 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 Test 2 – Working in FrontPage

7. 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 Test 2 – Working in FrontPage

8. 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. Test 2 – Working in FrontPage

9. 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. Test 2 – Working in FrontPage

10. 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.) Test 2 – Working in FrontPage

11. 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) Test 2 – Working in FrontPage

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

13. 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 Test 2 – Working in FrontPage

14. Horizontal Rules • Image designed to separate sections of a web page • Can be saved from the Internet Test 2 – Working in DreamWeaver

15. 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. Test 2 – Working in FrontPage

17. 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. Test 2 – Working in FrontPage

18. 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 Test 2 – Working in FrontPage

19. Inserting a Table in DreamWeaver • Insert Menu • Insert Table button on the toolbar • Set number of columns and rows Test 2 – Working in FrontPage

20. 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 Test 2 – Working in FrontPage

21. 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. Test 2 – Working in FrontPage