Accelerated Technology Training Workshops Using Microsoft FrontPage to Create Web Sites ENGL 1423.B2 Dr. Richard Cunningham Copyright User Support Centre February 2007
Dynamic Web Sites F r o n t P a g e Creating a Web Site Points to consider Purpose Access Style Updating Links Workshops 2 Web Design Process Compile a Functional Specification Block Diagram Plan Create Template Add Content Test Publish Retest & Promote Design Maintain Workshops 3 UCS Training 2007 1
Web Page Layout FONT: Different page title size and style Titles emphasized (italicized or quotation marks) Hyperlinks readily identifiable Home Page: Title, date, and author identified The left most column normally contains links to the main divisions of the web site Capture your audience Workshops 4 Commonly Used Toolbars Standard Formatting DHTML Effects Drawing Pictures Workshops 5 Creating a New Web Site What type of files makes a Web Site? Index or homepage (htm or html) Linked pages (htm, html, doc, xls, exe..) Graphics (jpg, gif, tiff ) Multimedia files (Mpeg, Avi, mov, wav, mp3..) Style Sheets A web site might have a few pages or several hundred pages and files. It s important to keep your site organized and logical Workshops 6 UCS Training 2007 2
Creating a Web On the File menu, point to New, and click. Use the Task Pane to select more web templates. From the Web Template dialog box a Web Template or Wizard: One Page Web Corporate Presence Wizard Customer Support Etc Workshops 7 Creating a Web Specify the location of the new Web. Give your web site a name (2-8 characters; no spaces) Click OK Workshops 8 Creating New Web Page To create a Web page Click on the New Page Icon. or Right click and select new Page To title a Web page On the Standard toolbar, click the Save button. Type the new name, and click Save. Workshops 9 UCS Training 2007 3
Maintaining Web Pages Create New Folders Move Files to Folders Rename Files and Folder Delete Files and Folders Workshops 10 Adding and Formatting Text Make sure that the Web page is displayed in Design view. Type the text that you want to add to the page (but do not press Enter). Click the Style down arrow and click a style to apply to the text. Use the Formatting toolbar to apply any additional formatting. Workshops 11 Formatting Paragraphs Similar to using MS Word, FrontPage lets you control paragraph spacing & indentation, set alignment, and add bullets & numbers to paragraphs Workshops 12 UCS Training 2007 4
Previewing the Web To a Print Preview; Select File Click Print Preview or Click icon To Preview in a Browser; Select File Click Preview in Bowser or Click icon Workshops 13 Using Graphics How can graphics be used? Aid in Navigation Identify ownership of the page Provide information not easily conveyed in text Aid to overall attractiveness When adding a graphic, what should we consider? Is the extra time downloading the graphic worth it? Will this graphic work more effectively than a text substitute? Is this graphic consistent with the overall theme? Workshops 14 Inserting a Photo on a Web Page Click the desired location on the Web page. On the Insert menu, point to Picture and click From File/Clip Art. Browse to the desired file, select it, and click OK. Common picture formats: GIF: 256 colours JPEG/JPG: 16.7 Million PNG: Millions of colours Workshops 15 UCS Training 2007 5
Using the Drawing Toolbar Word Art is a decorative text effect feature Basic Shapes Pictures 2D/3D Shapes Draw Properties AutoShape Tool Text Box Colour Options Word Art Line/Arrow Options Workshops 16 Altering and Enhancing Graphics with the Pictures Toolbar Add Text Absolute Position Position Rotation Image Control Re-sampling Hot Spots Thumbnail button Cropping button Workshops 17 Creating Hyperlinks It is the very nature of web documents to be interconnected and linked to one another in a variety of ways. These links are known as hyperlink. Hyperlinks can be relative or absolute Hyperlinks can be presented as text or graphics Remember to test all hyperlinks before publishing your work Workshops 18 UCS Training 2007 6
Linking to a Web Page in the Current Web Select the text or graphic that you want to make a hyperlink. On the Insert menu, click Hyperlink, and browse to the target file. Select the target file, and click OK. Workshops 19 Linking to a Web Page on the Internet Select the text that you want to make a hyperlink. On the Insert menu, click Hyperlink. Click the Preview In Web Browser button. In the Web browser, connect to the site to which you want to create a hyperlink. Press Alt+Tab to switch to FrontPage, and click OK. Workshops 20 Creating a Hyperlink to an E-Mail Address Select the text or graphic that you want to make a hyperlink On the Insert menu, click Hyperlink, and in the Create Hyperlink Dialog box, click E-mail Address Type the e-mail address that you want to link to, and click OK Workshops 21 UCS Training 2007 7
Editing a Hyperlink To change hyperlink Right-click the hyperlink that you want to edit, and on the shortcut click Hyperlink Properties. In the Edit Hyperlink dialog box, browse to the new target file. Click the new hyperlink target, and click OK. To change hyperlink text Select the hyperlink text that you want to change. Type the new text. To delete a hyperlink Right-click the hyperlink text that you want to delete, and click Hyperlink Properties. Press Delete, and click OK. Workshops 22 Publishing a Web A FrontPage web can be published to a remote web host or to a local location such as the C: drive or CD Using FrontPage you can create a backup webs and publish changes all with one click. Workshops 23 Publishing a Web On the File menu, click Publish Site Web. Select the Remote Web Site tab. Select sever type Click OK Workshops 24 UCS Training 2007 8
Your Personal URL Students (axe): http://axe.acadiau.ca/~username Workshops 25 Dynamic Web Sites F r o n t P a g e UCS Training 2007 9
ANNEX A
NEW FEATURES IN MS FRONTPAGE 2003 Link Bars R e f e r e n c e t o F r o n t P a g e 2 0 0 3 Split View (Code and Design) Keyboard Shortcuts Work with and manage Web pages F8: Run the accessibility checker. CTRL+N: Create a new Web page. CTRL+O: Open a Web page. CTRL+F4: Close a Web page. CTRL+S: Save a Web page. CTRL+P: Print a Web page. F5: Refresh a Web page; refresh the Folder List; when in Split view, refreshes Code view changes in Design view. CTRL+TAB: Switch between open Web pages. CTRL+SHIFT+TAB: Switch between open Web pages in reverse order. CTRL+SHIFT+B: Preview a Web page in a Web browser. ALT+F4: Quit Microsoft FrontPage. CTRL+ SHIFT+8: Display nonprinting characters. CTRL+ /: Display HTML tags in Design view. CTRL+F: Find text or HTML on a Web page. SHIFT+F3: Find the previous occurrence of the most recent search. CTRL+F3: Find the next occurrence of the current selection. CTRL+SHIFT+F3: Find the previous occurrence of the current selection. Layers CTRL+H: Replace text or HTML on a Web page. F7: Check spelling on a Web page. SHIFT+F7: Look up a word in the thesaurus. ESC: Cancel an action. CTRL+Z or ALT+BACKSPACE: Undo an action. CTRL+Y or SHIFT+ALT+BACKSPACE: Redo or repeat an action. ALT+F6: Move through open dialog boxes. ALT+SHIFT+F6: Move through open dialog boxes in reverse order. DELETE: Delete a Web page or folder in the Folder List or any dialog box. Work with coding tools CTRL+Q: Quick tag editor. CTRL+F2: Insert temporary bookmark. F2: Next temporary bookmark. SHIFT+F2: Previous temporary bookmark. CTRL+G: Go to line. CTRL+L: AutoComplete. CTRL+ENTER: Insert code snippet. CTRL+>: Insert end tag. CTRL+<: Insert start tag. CTRL+,: Insert a start tag. CTRL+.: Insert an end tag. CTRL+/: Insert HTML comment. CTRL+SPACEBAR: Complete word. User Support Centre 542-HELP (4357)
NEW FEATURES IN MS FRONTPAGE 2003 R e f e r e n c e t o F r o n t P a g e 2 0 0 3 CTRL+:: Select tag. CTRL+;: Find matching tag. CTRL+': Select block. CTRL+[: Go to definition of function. CTRL+]: Find matching brace. Format text and paragraphs CTRL+SHIFT+F: Change the font. CTRL+SHIFT+P: Change the font size. CTRL+B: Apply bold formatting. CTRL+U: Apply an underline. CTRL+I: Apply italic formatting. SHIFT+TAB: In the More Colors dialog box, activate the color picker. CTRL+PLUS SIGN: Apply superscript formatting. CTRL+MINUS SIGN: Apply subscript formatting. CTRL+ SHIFT+C: Copy formatting. CTRL+SHIFT+V: Paste formatting. CTRL+SHIFT+Z or CTRL+SPACEBAR: Remove manual formatting. CTRL+E: Center a paragraph. CTRL+L: Left align a paragraph. CTRL+R: Right align a paragraph. CTRL+M: Indent a paragraph from the left. CTRL+ SHIFT+M: Indent a paragraph from the right. CTRL+ SHIFT+S: Apply a style CTRL+SHIFT+ N: Apply the Normal style. CTRL+ALT+1: Apply the Heading 1 style. CTRL+ALT+2: Apply the Heading 2 style. CTRL+ALT+3: Apply the Heading 3 style. CTRL+ALT+4: Apply the Heading 4 style. CTRL+ALT+5: Apply the Heading 5 style. CTRL+ALT+6: Apply the Heading 6 style. CTRL+ SHIFT+L: Apply the List style. Edit and move text and graphics DELETE: Delete one character to the right. CTRL+DELETE: Delete one word to the right. CTRL+C or CTRL+INSERT: Copy text or graphics. CTRL+X or SHIFT+DELETE: Cut selected text to the Microsoft Office Clipboard. CTRL+V or SHIFT+INSERT: Paste the Clipboard contents. SHIFT+ENTER: Insert a line break. CTRL+SHIFT+SPACEBAR: Insert a nonbreaking space. Select text and graphics SHIFT+RIGHT ARROW: Move one character to the right. SHIFT+LEFT ARROW: Move one character to the left. CTRL+SHIFT+RIGHT ARROW: Go to the end of a word. CTRL+SHIFT +LEFT ARROW: Go to the beginning of a word. SHIFT+END: Go to the end of a line. SHIFT+HOME: Go to the beginning of a line. SHIFT+UP ARROW: Move one line up. SHIFT+DOWN ARROW: Move one line down. CTRL+SHIFT+DOWN ARROW: Go to the end of a paragraph. CTRL+SHIFT+UP ARROW: Go to the beginning of a paragraph. SHIFT+PAGE DOWN: Move one screen down. SHIFT+PAGE UP: Move one screen up. CTRL+A: Select the entire page. ALT+ENTER: Display the properties of a selection. Work with tables, graphics, and hyperlinks SHIFT+CTRL+ALT+T: Insert a table. TAB: Select the next table cell's content. SHIFT+TAB: Select the preceding table cell's content. CTRL +T: With the graphic selected, create an auto thumbnail. CTRL+K: Create a hyperlink on a Web page User Support Centre 542-HELP (4357)