SUNY Morrisville-Norwich Campus-Week13

1. SUNY Morrisville-Norwich Campus-Week13 CITA 130Advanced Computer Applications II Spring 2005 Prof. Tom Smith

2. Objectives • Introduction to Web Design

3. Microsoft Office FrontPage 2003 Tutorial 1 – Creating a Web Site

4. FrontPage 2003 • FrontPage is an HTML editor. • Other editors include: notepad, Macromedia Dream Weaver, and even Visual Studio (there are many more…). • You may create a web page by using the design view, code view, or a combination of both.

5. FrontPage 2003 Contents • Folder List- where all files and folders can be viewed. • Document tabs-the tabs show you what files are open and which one you are currently working on. • Quick Tag Selector- allows you to move through the pages HTML code section headings. • Editing Window-the working “palette” for the current page. This is where your design is done. • Page view tabs- allows you to choose between the views (code/design/both).

6. FrontPage 2003 Contents • Status bar-displays information about the current page, includes: estimated download time, page size, authoring mode, and browser compatibility. • Toolbars are similar to all other MS products but you will soon see they are slightly different.

7. Learn what FrontPage is and how it works • Microsoft FrontPage is a tool to help you develop, maintain, and publish your Web sites. • FrontPage lets you: • Insert text and graphics • Import and export files • Add, test, and repair hyperlinks • Easily view and manage the entire Web site • There are even templates included to get you started.

8. FrontPage creates the HTML code • While HTML is the language your sites will be based on, you don't have to know it to create a great Web site. • FrontPage uses a graphical interface that allows anyone with Windows experience to develop Web pages. • It creates the HTML code for you and the Web browser interprets it to display your pages correctly.

9. FrontPage builds Web sites • A Web site consists of Web pages, files, and folders as well as specific FrontPage server extension support files that all work together so Internet users can view a site correctly. • Web sites can be disk-based or server-based. • Disk-based sites can be stored on floppy disks or on a hard drive • Server-based sites have your files and folders stored on a Web server. • These two types of sites are created in an almost identical way.

10. Start and exit FrontPage • To start FrontPage, click the Start button, point to All Programs, point to Microsoft Office, and select Microsoft Office FrontPage 2003. • The Getting Started task pane allows you to open a new or existing Web page or Web site • To exit FrontPage, click the Close button in the upper right corner of the program window.

11. The FrontPage Program window

12. Creating a Web Site • When building a new Web site, you must first create a folder in which to store the files and folders in the site.

13. Web Site Templates

14. Use FrontPage Views • Once you have opened FrontPage, the View menu allows you to use the Folders view, where you can see all the files in your Web site. • The View menu allows you to see your site from different perspectives. • The Folders list shows all the folders and files in the site.

15. FrontPage Folders view

16. Open and explore a FrontPage Web site • The options on the Views bar give you different ways of looking at the information in a site and make creating and maintaining the site easy. • To open a Web site, use the list arrow on the Open button and select Open Web. • You can then can use the dialog box that opens to navigate to a folder that contains a Web site. Then click the Open button. • Double-click on index.htm to switch to Page view for that Web site. • The Page view is where you create, edit, and format content • The title bar indicates which Web page is open.

17. Specifying a Browser Version • Double-click the Authoring Settings pane on the status bar. • Select Custom from the FrontPage and SharePoint technologies list arrow. • Click the Browsers list arrow, and then make your browser selection. • If necessary, make your selection from the Browser versions list.

18. Page Options Dialog Box

19. Specifying the Page Size • Double-click the file for which you wish to change the default page size. • Click the Page Size pane to open a menu of preset sizes. • Select your desired page size in the menu.

20. Specifying the Page Size

21. Inserting a File into a Web Page • Position the insertion point where you wish to insert the file. • Select File from the Insert menu. • Locate and double-click the file you wish to insert on your Web page.

22. Spell Checking a Web Page • Click the Spelling button on the Standard toolbar to open the Spelling dialog box. • Change or ignore the potentially misspelled words that are highlighted in the Spelling dialog box. • To ignore all instances of a word or to change the spelling of all instances of a misspelled word, click the Ignore All or Change All button, respectively. • When the spell check feature is complete, click the OK button.

23. Spelling Dialog Box

24. Saving a Web Page • Two methods: • Click the Save button on the Standard toolbar. • Click File on the menu bar, and then click Save.

25. Formattinga Web Page

26. Creating a Heading in a Web Page • Click anywhere in the paragraph that you want to format as a heading. • Click the Style list arrow on the Formatting toolbar to display a list of available paragraph format styles, and then click the desired heading style.

27. Formatting a Web Page • Microsoft Office FrontPage 2003 allows you to format your Web Page similar to how you would format a word processing document in Microsoft Office Word 2003: • Align text • Use fonts • Insert special characters • Change font size and color • Format Painter

28. Previewing a Web Page • Click the Show Preview View button at the bottom of the Contents pane.

29. Printing a Web Page • With the page displayed in Design view, click File on the menu bar, and then click Print. • Select the appropriate printer, set the printer options, number of pages, and properties, and then click the OK button.

30. Understanding Hypertext Markup Language • The name of an HTML tag is enclosed in angle brackets (<>). • Most tags are two-sided. • Opening tag tells the browser to start applying a feature. • Closing tag tells the browser to stop applying a feature. • One-sided tags require only an opening tag. • The browser stops applying the formatting indicated by the one-sided tag when it finishes reading the tag/

32. Viewing the Web Page in Code View

33. Split View

34. Using Meta Tags • A meta tag is an HTML tag that includes information about a Web page, such as the character set, name of its developer, how often the page is refreshed, and the keywords and description of the page’s contents. • The Custom tab of the Page Properties dialog box allows you to insert meta tags.

35. Using Meta Tags

36. Getting Help in FrontPage • Click the Microsoft Office FrontPage Help button on the Standard toolbar.

37. Microsoft Office FrontPage 2003 Tutorial 2 – Working with Graphics and Hyperlinks

38. Change the background color of a Web page • By default, the background color of all Web pages is white. • Most text and graphics display best on a white background, but there is little visual interest to that. • You can use any of the standard colors or the Web-safe colors available in the More Colors palette. • It is important to emphasize that you select one that coordinates well with the text color you have selected. • If, after making edits, you find that none of the colors work, you can always change back to the white background.

39. Change the background color • To apply a background color, click the Format menu and then click Background to open the Page Properties dialog box. • In the dialog box, select the Formatting tab. • Click the Background list arrow in the Colors section to display the Standard Colors chart. • Click a color to apply it to the Web page. • Click OK to return to the page and see how it looks. • If the color you chose is too dark, the text will be hard to read and you will have to repeat the process until you find a color that works

40. The Background tab of the Page Properties dialog box

41. A Web page with a yellow background

42. Insert a picture on a Web page • Web pages need more than text and navigation bars to be interesting. • Logos, graphics, and photographs can all work together to make your site attractive and inviting to the user. • The three most widely used file formats for graphics are GIF, JPEG, and PNG: • GIF files are small and load fast • JPEG files are usually larger than GIF, but are best-suited for photographs • PNG was created as a license-free alternative to GIF • When you save a Web page in which you have inserted a picture, you must be sure to save the picture to the Web site's images folder.

43. Insert a marquee on a Web page • A marquee is an eye-catching graphic that you can add to a Web page. • It's actually a text box that displays a scrolling message that you create. • You can use existing text for the marquee or add new text. • Marquees should be used sparingly because they can easily overpower a page and distract the Web page viewer.

44. Add a marquee • To add a marquee: • Select the text for the scrolling message or click on the page in the area you want the marquee text to appear • Click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box • Click on Dynamic Effects in the Component type list, and then click Marquee in the Choose an effect list • Click the Finish button, and the Marquee Properties dialog box will open • Click OK to activate the marquee • You can apply formats and other characteristics to the marquee using options in this dialog box. • You can test the marquee by first saving the page, then changing to Preview page view.

45. The Marquee Properties dialog box

46. Add a picture • To add a picture to your Web page, click in the page where you want the picture to be placed. • Click the Insert Picture From File button on the Standard toolbar. • In the Picture dialog box, click the Look in list arrow to locate the picture and double-click it to insert it on your page.

47. A Web page with a graphic

48. Import an existing Web page into a Web site • The ability to import existing Web pages into a Web site can save you the time and effort of re-keying information that's already keyed in and in the proper HTML format. • To import a Web page, be sure the Web site you want to import to is open in the Folders view. • Click the File menu and then click Import. • In the Import dialog box, click the Add File button to open the Add File to Import List dialog box. • Use the Look in list arrow to navigate to the HTML file and double-click it. • You will then return to the Import dialog box where the file's path will display.

49. Import additional pages • You can repeat the process from the previous slide with the Add File button to include multiple files. • Click the OK button to import the selected file(s) into the open Web site. • The new HTML file will display as a page in the Contents pane. • Once the page is part of the Web site, you can double-click it to open it in Page view and modify it like other pages.

50. Open an imported page • The imported Web page can be opened by double-clicking on the file name in the Contents pane. • The imported file will have the default white background. • If other files already in the Web site have a theme applied, you should apply the same theme to the imported file for continuity.