using microsoft® frontpage to create web sites engl 1423...
TRANSCRIPT
Accelerated Technology Training Workshops
Using Microsoft® FrontPage to Create Web
Sites ENGL 1423.B2
Dr. Richard Cunningham
Copyright ©User Support Centre February 2007
Accelerated Technology Workshops
UCS Training 2007 1
F r o n t P a g e
Dynamic Web SitesDynamic Web Sites
USC Training: Accelerated Technology Workshops 2
Creating a Web Site
Points to considerPurposeAccessStyleUpdatingLinks
USC Training: Accelerated Technology Workshops 3
Web Design Process
Compile a Functional SpecificationBlock DiagramCreate TemplateAdd ContentTestPublishRetest & Promote
Plan Design
Maintain
Accelerated Technology Workshops
UCS Training 2007 2
USC Training: Accelerated Technology Workshops 4
Web Page LayoutFONT:
Different page title size and styleTitles 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 siteCapture your audience
USC Training: Accelerated Technology Workshops 5
Commonly Used ToolbarsStandardFormattingDHTML EffectsDrawingPictures
USC Training: Accelerated Technology Workshops 6
Creating a New Web SiteWhat 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
Accelerated Technology Workshops
UCS Training 2007 3
USC Training: Accelerated Technology Workshops 7
Creating a WebOn 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 WebCorporate PresenceWizardCustomer SupportEtc…
USC Training: Accelerated Technology Workshops 8
Creating a Web
Specify the location of the new Web.Give your web site a name (2-8 characters; no spaces)Click OK
USC Training: Accelerated Technology Workshops 9
Creating New Web Page
To create a Web pageClick on the New Page Icon.
orRight click and select new Page
To title a Web pageOn the Standard toolbar, click the Save button.Type the new name, and click Save.
Accelerated Technology Workshops
UCS Training 2007 4
USC Training: Accelerated Technology Workshops 10
Maintaining Web PagesCreate New FoldersMove Files to FoldersRename Files and FolderDelete Files and Folders
USC Training: Accelerated Technology Workshops 11
Adding and Formatting TextMake 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.
USC Training: Accelerated Technology Workshops 12
Formatting Paragraphs
Similar to using MS Word, FrontPage lets you control paragraph spacing & indentation, set alignment, and add bullets & numbers to paragraphs
Accelerated Technology Workshops
UCS Training 2007 5
USC Training: Accelerated Technology Workshops 13
Previewing the Web
To a Print Preview; Select FileClick Print Preview or Click iconTo Preview in a Browser; Select FileClick Preview in Bowser or Click icon
USC Training: Accelerated Technology Workshops 14
Using GraphicsHow can graphics be used?
Aid in NavigationIdentify ownership of the pageProvide information not easily conveyed in textAid 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?
USC Training: Accelerated Technology Workshops 15
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 coloursJPEG/JPG: 16.7 MillionPNG: Millions of colours
Accelerated Technology Workshops
UCS Training 2007 6
USC Training: Accelerated Technology Workshops 16
Using the Drawing Toolbar
Word Art is a decorative text effect feature
Draw Properties
AutoShape Tool
Text Box
Word Art
Colour Options
Line/Arrow Options
2D/3D ShapesPicturesBasic Shapes
USC Training: Accelerated Technology Workshops 17
Altering and Enhancing Graphics with the Pictures Toolbar
Thumbnail button Cropping button
Add Text
Absolute Position
Position RotationImage Control
Re-sampling
Hot Spots
USC Training: Accelerated Technology Workshops 18
Creating HyperlinksIt 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 absoluteHyperlinks can be presented as text or graphicsRemember to test all hyperlinks before publishing your work
Accelerated Technology Workshops
UCS Training 2007 7
USC Training: Accelerated Technology Workshops 19
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.
USC Training: Accelerated Technology Workshops 20
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.
USC Training: Accelerated Technology Workshops 21
Creating a Hyperlink to an E-Mail Address
Select the text or graphic that you want to make a hyperlinkOn the Insert menu, click Hyperlink, and in the Create Hyperlink Dialog box, click E-mail AddressType the e-mail address that you want to link to, and click OK
Accelerated Technology Workshops
UCS Training 2007 8
USC Training: Accelerated Technology Workshops 22
Editing a HyperlinkTo change hyperlinkTo 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 textTo change hyperlink textSelect the hyperlink text that you want to change.Type the new text.
To delete a hyperlinkTo delete a hyperlinkRight-click the hyperlink text that you want to delete, and click Hyperlink Properties.Press Delete, and click OK.
USC Training: Accelerated Technology Workshops 23
Publishing a WebA FrontPage web can be published to a remote web host or to a local location such as the C: drive or CDUsing FrontPage you can create a backup webs and publish changes all with one click.
USC Training: Accelerated Technology Workshops 24
Publishing a WebOn the File menu, click Publish Site Web. Select the Remote Web Site tab.Select sever typeClick OK
Accelerated Technology Workshops
UCS Training 2007 9
USC Training: Accelerated Technology Workshops 25
Your Personal URL
Students (axe): http://axe.acadiau.ca/~username
F r o n t P a g e
Dynamic Web SitesDynamic Web Sites
A N N E X A
NEW FEATURES IN MS FRONTPAGE 2003 R
ef
er
en
ce
t
o
Fr
on
tP
ag
e
20
03
Link Bars
Layers
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.
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
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.
Re
fe
re
nc
e
to
F
ro
nt
Pa
ge
2
00
3 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)