using microsoft® frontpage to create web sites engl 1423...

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


Web Design Process

Compile a Functional SpecificationBlock DiagramCreate TemplateAdd ContentTestPublishRetest & Promote

Plan Design

Maintain


UCS Training 2007 2


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


Commonly Used ToolbarsStandardFormattingDHTML EffectsDrawingPictures


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


UCS Training 2007 3


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…


Creating a Web

Specify the location of the new Web.Give your web site a name (2-8 characters; no spaces)Click OK


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.


UCS Training 2007 4


Maintaining Web PagesCreate New FoldersMove Files to FoldersRename Files and FolderDelete Files and Folders


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.


Formatting Paragraphs

Similar to using MS Word, FrontPage lets you control paragraph spacing & indentation, set alignment, and add bullets & numbers to paragraphs


UCS Training 2007 5


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


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?


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


UCS Training 2007 6


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


Altering and Enhancing Graphics with the Pictures Toolbar

Thumbnail button Cropping button

Add Text

Absolute Position

Position RotationImage Control

Re-sampling

Hot Spots


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


UCS Training 2007 7


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.


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.


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


UCS Training 2007 8


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.


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.


Publishing a WebOn the File menu, click Publish Site Web. Select the Remote Web Site tab.Select sever typeClick OK


UCS Training 2007 9


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)

using microsoft® frontpage to create web sites engl 1423...

Documents