Presentation on theme: "Create a Web site with FrontPage FrontPage 2003 Tutorial (from compiled Microsoft lesson notes) Create a Web site with FrontPage."— Presentation transcript:
Create a Web site with FrontPage FrontPage 2003 Tutorial (from compiled Microsoft lesson notes) Create a Web site with FrontPage
Lesson 1 How to plan your content
Create a Web site with FrontPage How to plan your content When you're planning a Web site, it's important to establish the goal of the site first. The designer of the site shown here established a goal, which was to generate $500,000 in sales through online orders. After looking at the site, do you agree it was designed with this goal in mind?
Create a Web site with FrontPage Tips for creating a goal Make sure you know who your audience is. Make sure the goal is specific and quantitative. Keep your goal simple—about one sentence long.
Create a Web site with FrontPage Sketch site structure Once your site's goal is defined, sketch out the structure of your site beforehand. Use a pencil and paper (or a diagramming tool, like Microsoft® Visio®) to draw boxes for pages and arrows for links. Remember to keep your goal in mind as you do this.
Create a Web site with FrontPage Sketch a common layout After you've sketched a map of your site, it's time to start sketching a common layout for each of your pages. You could start designing the page layout using FrontPage, but we recommend keeping it on paper at this point. Pencil and paper can be easier to change, as noted before.
Create a Web site with FrontPage Things to consider while sketching layout Here are some of the things to consider as you sketch the layout: Should each page have a common header and footer? Should the site have a consistent method of navigation? Are there any marketing requirements for the site? Legal requirements?
Create a Web site with FrontPage Sketch a common layout Using your sketches as a model, you'll eventually use FrontPage to design Web pages in HTML. You might use a table for the skeletal structure, or layout, of the page. Once the layout is defined, you can fill it with content. For example, you'll want to add text, hyperlinks, pictures, and interactive buttons.
Lesson 2 About FrontPage Web sites
Create a Web site with FrontPage About FrontPage Web sites FrontPage is a Web site design tool. But it’s also a Web site management tool. You can use it to: Add, rename, delete, or move around files (without doing it in Microsoft® Windows® Explorer). Fix problems using special reports, like the broken hyperlinks report. Publish a Web site using FrontPage. (Continued on next slide)
Create a Web site with FrontPage About FrontPage Web sites, cont’d. The important thing to remember is that these management features are not available when opening and working on single HTML files. They are only available when you open and work on a FrontPage Web site. What is a FrontPage Web site?
Create a Web site with FrontPage What is a FrontPage Web site? A FrontPage Web site is a site created in FrontPage. It contains Web pages, graphics, documents, multimedia—almost any kind of file you want. A FrontPage Web site also contains hidden folders and files that support FrontPage-specific functionality. These hidden items are the FrontPage metadata for your site. When you open a FrontPage Web site, the Web Site tab appears at the top.
Create a Web site with FrontPage About FrontPage metadata FrontPage metadata is information about your FrontPage Web site that makes managing the site possible. This data is used by FrontPage to do all of the great management features we spoke of earlier (creating and moving files, running reports, publishing, and so on).
Create a Web site with FrontPage Two kinds of FrontPage Web sites There are two kinds of FrontPage Web sites: disk-based sites server-based sites
Create a Web site with FrontPage Disk-based Web sites A disk-based Web site is a site you create on your local hard drive. After you design and work on the site, you can later publish it to a remote location like a Web server.
Create a Web site with FrontPage Server-based Web sites A server-based Web site is a site you create and work with directly on a Web server. As soon as you save your changes, they will be seen immediately on the Web. Note To use a server-based site, your FrontPage Web site must be on a server running FrontPage Server Extensions or SharePoint Services.
Lesson 3 How to create a FrontPage Web site
Create a Web site with FrontPage How to create a FrontPage Web site So far you’ve learned how to plan your content and the differences between disk-based and server- based sites. Now it's time to dive in and actually create a FrontPage Web site.
Create a Web site with FrontPage New task pane The place to create a new FrontPage Web site is on the New Page or Web Site task pane. This task pane offers two ways to create a site: Click the One page Web site link. Click the More Web site templates link.
Create a Web site with FrontPage Specify a location If you choose to create a site with a template, you can choose the template you want on the left side of the Web Site Templates dialog box. (Continued on next slide.)
Create a Web site with FrontPage Specify a location, cont’d. Then, do one of two things: To create a disk-based site, specify a location on your computer. For example: C:\My Documents\My Web Sites\MyWebSite. To create a server-based site, specify a location on a Web server that is running FrontPage Server Extensions or SharePoint Services. For example:
Create a Web site with FrontPage Convert a Web site If you made a site using another program, you can convert it to a FrontPage Web site. To convert a Web site made in another program, click Open Site on the File menu. After you specify the folder you want to convert, FrontPage will ask you if you want to add information to that folder.
Create a Web site with FrontPage Suggestions for practice 1.Create a disk-based Web site using a template. 2.If you have access to a server running FrontPage Server Extensions or SharePoint Services, create a server-based site. Online practiceOnline practice (requires FrontPage 2003)
Lesson 4 Manage a Web site using different views
Create a Web site with FrontPage Manage a Web site using different views Now that you know how to create a FrontPage Web site, you should know about the two kinds of views you can use to manage and design the site: Web site views Page views
Create a Web site with FrontPage Folders view When you open a site and click the Web Site tab, the Web site view buttons are displayed at the bottom. In this illustration, the Folders view is selected. This view lets you see the files and folders that make up your FrontPage Web site, much like Windows® Explorer.
Create a Web site with FrontPage Remote Web site view The Remote Web site view is the place to go when you need to publish your Web site. The local version of the site will appear on the left. The remote site will appear on the right.
Create a Web site with FrontPage Reports view Another powerful view is the Reports view. It contains many different diagnostic reports that you can run against your site. Three of the most helpful troubleshooting reports are: Unlinked files report Slow pages report Broken hyperlinks report
Create a Web site with FrontPage Reports view, cont’d. When you open a page or create a new one, you are working in one of the Page views: Design, Split, Code, and Preview. When a page is open, these views are accessed by buttons at the bottom, as shown here.
Create a Web site with FrontPage Split view The Split view splits the view in half. The top half displays the HTML code for the page, and the bottom half shows the page as it looks in the Design view. Advantages: Design accuracy Flexibility Education
Create a Web site with FrontPage Code view The Code view displays the HTML code for the page. If you are an experienced Web designer, you might feel more comfortable in this view.
Create a Web site with FrontPage Preview view Finally, you can preview your page in the Preview view. Preview view lets you see what the page will look like when rendered in a browser. Things like dashed lines for tables won't appear in this view.
Create a Web site with FrontPage Suggestions for practice 1.Open the Web site you created earlier. 2.Click the Web site tab, and then explore the various Site views. 3.Open a page, and then explore the various Site views. Online practiceOnline practice (requires FrontPage 2003)
Lesson 5 How to create a Web page
Create a Web site with FrontPage How to create a Web page You learned how to navigate through the FrontPage program by using various views. But what about creating and designing Web pages? This lesson will cover: Adding a page layout Formatting text Inserting hyperlinks and pictures
Create a Web site with FrontPage Add a page layout to the page The layout of a Web page is the skeletal structure of the page. It lets you arrange and position text and graphics in a grid-like fashion. A popular way to create a layout is to use an HTML table. The quick and easy way to add a layout is to choose a ready-made layout from the Layout Tables and Cells task pane
Create a Web site with FrontPage Add text and format it We won't go into too much detail on how to add text to the page. However, after your text is on the page, you'll want to apply a style to it: 1.First select some text. 2.Then click the Style box. 3.And then select a style in the list to apply it.
Create a Web site with FrontPage Insert hyperlinks It's easy to add hyperlinks to your pages by using FrontPage. The illustration here shows you how to get started. 1.First you select either some text or a picture. 2.Then you click the Insert menu. 3.And then you click Hyperlink.
Create a Web site with FrontPage Insert pictures Picture this: a page with no pictures. What? That's no fun. Nowadays, pictures are pretty mandatory in keeping your audience's attention. To insert a picture that you have on your computer: Click the Insert menu, point to Picture, and then click From File.
Create a Web site with FrontPage Preview in a browser After you're done filling your layout with text, pictures, and hyperlinks, you should always use the Preview in Browser command to make sure that it looks okay in a Web browser.
Create a Web site with FrontPage Suggestions for practice 1.Create a new Web page, and give it a layout. 2.Add images and text to the page. 3.Format text with a style. 4.Insert a hyperlink. 5.Save the page, and preview it in a Web browser. Online practiceOnline practice (requires FrontPage 2003)
Create a Web site with FrontPage Quick Reference Card For a summary of the tasks covered in this course, view the Quick Reference Card and/or view the next few slides. Quick Reference Card
Quick Reference Summary of FrontPage Lessons 1-5
Create a Web site with FrontPage Quick Reference Card Plan your Web site 1. Determine goal. 1.Make it specific, if necessary. 2.Keep it short and focused. 3.Know your audience. 2. Sketch site structure. 3. Sketch a common page layout.
Quick Reference Card Create a Web site If you made a Web site using a third-party program (for example, Macromedia® Dreamweaver® or HomeSite™), you can convert that Web site to a Microsoft FrontPage® Web site by clicking the Open Site command on the File menu. If you need to start from scratch, the following steps will guide you through the process. 1.On the File menu, click New. 2.In the New task pane, click either One page Web site or More Web site templates. 3.If you want a Web site based on a pre-made template, choose a template on the left. You can also choose the Empty Web Site template if you don't need a pre-made Web site. Do one of the following: To create a new disk-based site, click the Browse button. Browse to a location on your computer where you want to store the Web site. When you've found the location you want, click the Create New Folder button, type a name for the Web site, and then click OK. Click the Open button, and then click OK. To create a server-based site, type the URL for the new Web site in the Specify the location of the new Web site box, and then click OK. Note that a server-based site can only be created on a Web server running FrontPage Server Extensions from Microsoft or Microsoft SharePoint® Services. Create a Web site with FrontPage
Quick Reference Card How to quickly create a Web page Create a new Web page, and give it a layout 1. Along the left side of your screen should be the Folder List. It shows all the files and folders in the site. (If the Folder List isn't visible, click the Toggle Pane button.) 2. At the top of the Folder List, click the New Page button. 3. Name the new page, and then press ENTER. 4. Double-click the new page to open it. 5. Now close the Folder List to give yourself more room. To close the Folder List, click the Toggle Pane button. 6. Now make sure that the Layout Tables and Cells task pane is open on the right. If you don't see it, click Layout Table and Cells on the Table menu. 7. At the bottom of the task pane is a list of layouts to choose from. Click a layout to apply it to the page.
Create a Web site with FrontPage Quick Reference Card Modify the layout 1. If you'd like, you can change the alignment of the layout. In the Layout Tables and Cells task pane, under Table Properties, click the Align Center button. 2. Before changing the size of the layout, make sure to select the Auto-scale cells with table check box in the Layout Tables and Cells task pane. When you resize a table, this setting will allow you to automatically resize the cells inside as well. 3. Now you'll resize the layout table to suit your design. In the Width box, type a value in pixels, and then press ENTER. Do the same in the Height box. Add an image 1. Click inside a cell. 2. On the Insert menu, point to Picture, and then click From File. 3. At the top of the dialog box, click the Look in box, to expand it. Then browse your computer to find the picture. 4. Click the picture, and then click the Insert button.
Create a Web site with FrontPage Quick Reference Card Add text 1. To add text, you can type or copy and paste from other files or programs. Or, you can import text from a Microsoft Word document. 2. On the Insert menu, click File. 3. At the bottom of the dialog box, click the Files of type box to expand it, and then click Word (*.doc) in the list. 4. Locate the document on your computer. 5. Double-click the Word document to import the text. Insert a hyperlink 1. Select either text or a picture. 2. On the Insert menu, click Hyperlink. 3. On the left, click Existing File or Web Page. 4. Select a page, and then click OK.
Create a Web site with FrontPage Quick Reference Card Add a background to the page 1. On the File menu, click Properties. 2. Click the Formatting tab. 3. Select the Background picture check box, and then click the Browse button. 4. Locate an image file on your computer. Select the image, and then click Open. Click OK. Add a background image that is not tiled across the page 1. On the Format menu, click Style. 2. In the lower-left area of the dialog box, under List, make sure that HTML tags is selected. 3. In the Styles list, double-click body. 4. Click the Format button, and then click Border in the list. 5. Click the Shading tab. 6. In the Background picture box, type the path to the picture. Select no-repeat in the Repeat list. Click OK three times.
Create a Web site with FrontPage Quick Reference Card Additional information More information about using tables for page layout This course only touched the tip of the iceberg when it comes to using HTML tables for page layout. See these other training courses for more in depth information: Course What you’ll learn HTML Tables I: Basic concepts Table basics: How to insert a simple HTML table, what table tags are like, and how to changeHTML Tables I: Basic concepts table properties HTML Tables II: Table and cell widthsHTML Tables II: Table and cell widths More basics: 1. How HTML table and cell widths work, and how to make them look the way you want HTML Tables III: Design a page with layout tablesHTML Tables III: Design a page with layout tables 2. The fun stuff: How to use layout tables to design a page, and how to use a tracing image to start your layout HTML Tables IV: Format and touch up a page layoutHTML Tables IV: Format and touch up a page layout 3. Finishing touches: How to format a layout table, how to add color, style, and finesse like a pro, and how to make your table stretch
Create a Web site with FrontPage Quick Reference Card Other page layout techniques You can also use layers for page layout. Frames is another technique you can use as well. Check out the following for more information: LayersLayers : FramesFrames : More information on styles If you would like to learn more about customizing your pages with cascading style sheets, check out these resources: About stylesAbout styles : Create a cascading style sheetCreate a cascading style sheet : Add a style to a cascading style sheetAdd a style to a cascading style sheet : Link to an external cascading style sheetLink to an external cascading style sheet : Apply a styleApply a style :