CHAPTER 10A - Web Development with MS-Front Page 2007 & CMS using wordpress.doc

Computer Literacy Programe……....Web Page Development
323
Web Page Development
with MS-Front Page 2007/
Content Management
System using WordPress
Chapter-
10

324
FrontPage Basics
Overview
FrontPage is a graphical HTML editor. HTML—HyperText Markup Language—is the
"language" that creates Web pages. Rather than requiring you to learn HTML with all its
<TITLE>, <FONT COLOR="#FFFFFF">, and <TD ALIGN="center" WIDTH="50%"> types of
tags, FrontPage allows you to work in a WYSI–A–WYG (What You See Is – Almost – What You
Get) environment that feels a great deal like the Microsoft word processing application, Word.
This tutorial guides you through creating a simple Web page using most of the basic tools
including tables, background color, images, text formatting, and hyperlinks. It does not cover the
more advanced features available in FrontPage such as page layout and layers.
About Web Servers
Your Web page must be housed on a Web server—not simply a server that provides access to
shared resources such as WordPerfect Office®
, Word®
, or Excel®
. It is difficult to provide you
with specifics about how you will interact with the server in order to place and maintain your
Web pages, since different servers and organizations have different services and utilities in place.
You should contact your technical support staff and ask for specific instructions on how to
interact with your Web server.
Using HTML
If you are a "do-it-yourselfer" and wish to create your Web pages "from scratch" then you'll need
to learn HTML (HyperText Markup Language. FrontPage assists in this knowledge-building by
showing you the tags as you are working (see example below). The example below indicates that
I was working within the body of the document (<body>), in a paragraph (<P>), and in a bolded
section (<B>).
HTML Tag Indicators
In addition, FrontPage shows you a tab indicating each HTML document you currently have open
and denotes an unsaved file with an asterisk following the file name.

325
Getting Started
FrontPage, in its simplest form, is an HTML editor. When you open a page that already exists,
make sure that you choose from the menu FILE : Open, NOT Open Site.
As with any computer application, remember to:
SAVE YOUR WORK OFTEN
Remember: a slight (even a very slight) disruption of power will cause the
loss of any work that you have done that has not yet been saved, so
SAVE SAVE SAVE SAVE SAVE SAVE SAVE SAVE
Start a new FrontPage document, by clicking the FrontPage icon, , or by choosing FrontPage
from Start : Programs (see example below).
Starting Front Page via Start : Programs
You will see a new white page on which to begin creating your masterpiece! If you've already
started a page, from the menu, choose FILE : Open and browse for the file that you want to work
on.
Testing the Web Page
FrontPage Preview
As you are developing your Web page, you should periodically test it to make sure that it looks
like you intend it to—remember, the graphical HTML editors only show you an approximation of
what your page will look like once you display it on the Web. FrontPage provides an easy way to
do a preliminary test of your page.
At the lower left corner of the FrontPage screen, find the four tabs (see example below) indicating
the various views of your document. To switch between views, click the tab that you want to
change to.

326
Design—the view in which you do your WYSIWYG work
 Split—the view that displays the HTML coding in a top window pane and the WYSIWYG
view of your page in a bottom window pane
 Code—the view of the actual HTML coding that creates your page
 Preview—the view that you click when you want to test your document and view an
approximation of the page as it will appear in the Web browser
FrontPage View Toolbar
HINT: a common error is to switch to Preview mode to look at your page, then attempt to type on
or to edit your document. You MUST be in Design view in order to edit your document.
Local Web Browser File
The second way to test a Web page is to view it in the Web browser:
 Start your default web browser—Internet Explorer, Firefox, Netscape
Navigator/Communicator—(if it is not already open).
 After the browser is started, from the menu, choose FILE : Open. Browser versions vary, so it
may say Open Page or Open File.
 Look for the Web page you want to test. Again, browsers differ. You may see an Open File
dialog box, or you may need to click Choose File or Browse in order to go to the place where you
stored your file.
 After you locate your file, select and open it. You may need to click OK or Open depending
upon the dialog boxes you have and your computer system and browser.
 When the file opens in the browser window, you can look through it to see that everything
looks as you want it to.
If you have already viewed the file in the Web browser then made any changes to the file in
FrontPage, you must re-save the file in FrontPage. After saving the file, go to the browser and
click the reload/refresh button to retrieve and view the updated page.
Browser Versions and Screen Resolution
A new feature available in FrontPage is to preview your Web page in various browsers at
different screen resolutions. You should make sure that you have no browsers running, then from
the menu, choose FILE : Preview in Browser (see example below). FrontPage will start each
browser that you have installed and show you the Web page in the resolution that you specify.

327
Preview Web Page in Various Browsers and at Various Resolutions
Accessibility
Another way to test is to check the accessibility of the page, including whether or not images are
"tagged" so that those with vision difficulties can read a textual description of the image.
Compliant Web pages are easier for those with disabilities to access and use.
To access the Accessibility Checker, from the menu, choose TOOLS : Accessibility. You can
specify which pages you want checked. FrontPage will return a report showing where problems
are (see example below).

328
Creating a Web Page Title
Within the HTML code of each Web page there exists a <TITLE> tag (not to be confused with
whatever title or heading is placed on the page itself for everyone to read). The information
contained within the <TITLE> tag appears at the top of the browser window in the colored strip.
Many of the search engines still use the information supplied within this tag as the basis for
conducting searches on the Web. Therefore, it is very important that you give the Web page a
good title.
The information placed in the <TITLE> tag should be a concise definition of your page. For
example, you should not title your page "My Home Page" or "Steve's Systems Page." Rather, a
descriptive title might be "IUPUI Introduction to Systems Analysis"—this title identifies the
location (IUPUI), the type of course (introduction), and content of the course (systems analysis).
If you do not insert information in the <TITLE> tag of the page, FrontPage will simply pick up
the top line of the document's content and use that instead, or will leave it titled "new_page1"
(which, you'll have to admit isn't very descriptive).
To insert the <TITLE> tag information,
 Choose from the menu, FILE : Properties.
 In the Page Properties dialog box (see example below), complete the Title information, then
click OK.
Dialog Box for Setting Page Title

329
NOTE: The information you supply for the <TITLE> tag does not have to be identical to
whatever title or heading you place in the document itself.
Identify your Web Page to Search Engines and Browsers
In addition to using the <TITLE> tag, search engines and other browsers also identify your page(s)
by meta information. Meta information is "information about information." The three primary
pieces of information are the description, keywords, and author.
When you visit a search engine such as Yahoo or Google and type a word or phrase to be
searched for, the text that you type is a keyword. Web authors should develop a comprehensive
list of keywords that they believe a potential visitor to their site might use. The keywords should
include the obvious descriptive words or phrases as well as abbreviations and common mis-
spellings. If your audience is likely to speak a different language, you may also want to include
comparable terms in the other language.
After you have searched for a keyword and the search engine returns a list of potential sites for
you to visit, the short descriptive phrase that accompanies each site is the description that the
author of that site included. The key to writing a good description is to remember that the amount
of the phrase that displays in the list of Web sites is short, so you need to be concise, accurate,
and inviting.
Including the author in the meta information is a way for others to contact you. Since this
information is not visible except through the HTML code, it doesn't tend to attract the casual
visitors to your page, but rather others skilled (or interested) in HTML who know to look for that
information. I have found that other Web experts use this contact information to ask questions
about certain design techniques or to report problems.
To include meta information in your Web page,
 Choose from the menu, FILE : Page Properties.
 Make sure that the General tab is selected (see example below).
 Page description. Type a concise description of your Web page, then click OK.
 Keywords. Type a series of key words and phrases that are descriptive of your site, then click
OK.

330
Page Properties Dialog Box
 To add the Author information, click the Custom tab in the Page Properties dialog box (see
example below):
Page Properties Tabs
To the right of the "User variables" section (the lower white box, not the top "Systems variables"),
click the Add button. In the Meta Information dialog box (see example below), in the Name field,
type "Author." In the Value field, type your name and E-mail address, then click OK.
Author Meta Information Dialog Box
Setting the Appearance of the Page
To set the overall appearance of your Web page, you can choose colors for background, text,
hyperlinks, visited links, and active links. You can also choose to add a "wallpaper" or a
FrontPage theme. You can not, however, set colors or choose a wallpaper AND add a theme (and
although it will allow you to choose both a background color and a wallpaper, the color will be
hidden behind the wallpaper and will not display).
Adding a Theme
A theme is like your personal Web interior designer. By choosing a theme, your Web page has
complimentary colors and designs applied to it. The image below shows samples of a plain page
and the same page with different themes applied:

331
From Microsoft FrontPage 2000 Help
While the advantage of using a theme is that design decisions are made for you, there are also a
couple of disadvantages to using them:
You can only apply a single theme to your page.
 Each time you try another theme, the new images are saved, but the ones placed by previous
theme choices aren't deleted, so you can end up with many files that you don't need in your Web
folders/directories.
To add a theme,
 From the menu, choose FORMAT : Theme
 The Theme task pane will open on the right side of your design window allowing you to
select a theme from the list of choices. NOTE: If you have not previously used themes with
FrontPage , you may see a message (see example below) alerting you that you need to activate a
feature.
Alert Regarding Author-time Components
 Components" option as shown in the example below. Then click OK.

332
Dialog Box for Selecting Author-time Component Option
REMEMBER: Each time you try a theme and save your Web page, the associated graphics are
saved along with your Web page. You will need to remember which graphics are needed with
your chosen theme in order to upload them to the Web server.
Setting Page Colors
You can specify the colors of the following elements:
 Background—the color of the "paint" behind the text on your page
 Text—the color of the words
 Hyperlink—the color of a word or phrase you define as being "click-able"
 Visited hyperlink—the color that a link changes to after you have clicked, then returned to
that page; it shows that the link has been "used"
 Active hyperlink—the color of the currently selected link (only works when the Internet
Explorer browser is used)
To set the colors for any of the above-identified components,
 From the menu, choose FORMAT : Background.
 In the Page Properties dialog box, make sure the Formatting tab is selected. In the center of
the dialog box, find the colors section (see example below). Each color has the automatic (or
default) color displayed in a drop-down box to the right of the option. To choose a color, click the
drop-down box to the right of the option you want to change.

333
Colors Section of Page Properties Dialog Box
 In the pop-up box, you can either select one of the basic Web colors or click More Colors to
see a complete color palette (see example below).
Color Palette
To choose a color from the color palette, click the desired color, then click OK.
Although it may be tempting to choose bright colors, keep in mind that backgrounds generally
should be pale (no more than 1-2 "layers" from the center of the color palette), and the text,
hyperlinks, and visited links should be different from one another, yet complimentary. For more
information on using color,.
Once you have selected non-default colors to use in your Web page, they display in the color box
so that they're easy for you to select again for other things (see example below).
Document Colors Dialog Box
Adding Wallpaper
Wallpaper is a graphic that provides your page with a pattern or texture behind the text. There are
some wallpaper graphics in Microsoft's Clip Art Gallery, you can find wallpapers on the Internet,
or you can create them yourself. Keep in mind, that even though many, many files indicate that
they are wallpaper files, most are too colorful or busy to enhance, rather than detract from, your

334
page's content. Your content is the most important, and any color or image choices you make
should not detract from that.
If you find a wallpaper file on the Internet that you want to use, point to the image and right-click.
From the pop-up menu, choose Save Image As. Make sure that you save the file in the same
location (folder/directory/disk) as your other Web files. It will retain its name and the file
extension (either .jpg or .gif). While you may choose to rename the file, make sure you leave the
extension as it is.
To add a wallpaper image to your page, from the menu,
 Choose FORMAT : Background.
 In the Formatting section of the Format Background dialog box (see example below), click to
place a checkmark in the Background picture option.
Format Background (Wallpaper) Picture Dialog Box
 Click Browse, then go to the location where you saved your wallpaper file. After you have
selected the file, click OK.
Adding and Formatting Text
Typing text in FrontPage is exactly the same as typing in a word processor. However, formatting
text requires a different toolset—but one, nonetheless easy to learn! Please reference the font
toolbar (see example below) as you read through the next few sections of the tutorial.
TIP: when working in an HTML document, if you press the <Enter> key, you will get a blank line.
Often you want a single-spaced appearance instead (e.g., an address block). Rather than pressing
<Enter>, press and hold the <Shift> key while pressing <Enter>.
NOTE: There are a limited number of "spots" for toolbar icons, therefore, only the ones you have
used most frequently may be visible. Notice the More Buttons icon, , shown in the example
below (look to the far right). If you don't see an icon on your toolbar, look for the More Buttons
icon (there may be two; one toward the center, the other on the far right, of the toolbar). When
you click the More Buttons icon, it drops open an additional toolbar where you can click the icon
you want to use. This causes that icon to display on your toolbar and another one that you haven't
used in a while to "hide."
Font Formatting Toolbar
Style
Generally, you'll want to keep the Style option as Normal. Other Style choices include headings,
definition lists, and any specifically defined styles. Heading styles correspond to the HTML <H1>

335
through <H6> tags. Headings are always bold and always have a space both above and below
them to separate the heading from the remainder of the text. Heading One correlates to
approximately 14-point size, while Heading Six correlates to approximately 8-point size.
Font Face
Font Face defines the style of letters. All of the fonts currently installed on your computer will
display in the Font Face drop-down box. Some computer systems show you the font face name in
the style that it will cause the letters to display.
Font faces can only be displayed on computers on which that specific font is installed. This means
that if you use a special font and I am viewing your page, but don't have that same font installed
on my computer, then my computer will convert that font to whatever it thinks might be close to
what you wanted. Therefore, even though the stylistic fonts may be pretty, unless you are very
sure of your audience and know what computers they may be using to view your Web page, you
should stick with the standards.
! Font faces come in two types: serif and sans serif. A serif font face has the "little feet" (the serifs)
at the bottoms of most letters; sans serif don't. Online text is generally easier to read if it is in a
sans serif font face.
This tutorial is written using Verdana, a font face that was designed specifically to be viewed
online. Notice that it is a crisp, clean, widely spaced style of letter.
 Arial is another sans serif font face that is easy to read online. I've changed the font in this
bullet point to the Arial font face. Arial is very close to Verdana—about the only difference is that
Verdana is spaced a little looser than Arial. Helvetica is a third sans serif font face choice that you
may want to consider. It is smaller than the others and is usually found on Macintosh computers.
 Comic Sans MS is a sans serif font that has a little more "personality" to it. It is generally
installed on computers now and would be a good choice if you want a little less traditional feel to
your page; however, that it is a heavier style (more bold) and could leave your reader feeling that
the page is too intense. This bullet point is in the Comic Sans MS font face.
 If you you really prefer the more traditional font face, a serif font face, you should choose
something like Times Roman, Century Schoolbook, or Garamond. This bullet point is written in
Times New Roman.
Notice the size of the letters in the text of the four preceding bullet points. Even though all four
are written in a normal font size (approximately 12 point), they appear very different—
particularly the sans serif vs. the serif font faces.
Font Size
For the most part, you should leave the text size as Normal. Even when you apply a heading style,
the font size remains normal...because it is the normal size for that specific style. Be particularly
careful of using small font sizes (10 point is normally the smallest size you should use for regular
body text), because they can appear too small to be easily read on some monitor resolution
settings.
Font Attributes
Attributes are formatting that you can choose to apply to text. The ones displayed by default are
bold, italics, and underline. You should use the underline attribute only after careful consideration
and for a particular, specific purpose only. Remember that Web browsers show hyperlinks with
underlines (unless the user has chosen to turn off the underline or the page was created in such a

336
way to force the hyperlink underlining to not display). I have seen people attempt to click an
underlined word, thinking it was a hyperlink that would take them to another location, then
become frustrated when they thought the hyperlink wasn't functioning.
To select additional attributes, from the menu, choose FORMAT : Font. Additional attributes
include super- and subscript, and a lot of others that you probably wouldn't normally use in a Web
page.
Alignment
By default, each element on a Web page is aligned on the left (meaning that the left margin is
straight). You can also choose to center or right align elements.
HINT: To center a table on a Web page, click anywhere in the table, then right-click and choose
Table Properties. Choose from the Layout Alignment drop-down menu, Center.
Numbers & Bullets
Using the number or the bullet tool to create a numbered or bulleted list causes the text to align
correctly under the text rather than wrapping to the left margin under the number or bullet. For
more information, see the Using Bulleted & Numbered Lists section of this tutorial.
More Indent/Less Indent
The indent tools allow you to increase or decrease the indent of a block of text. The indent moves
both margins, not just the left margin. For the paragraph below, I used the indent tool, twice:
"Four score and seven years ago, our fathers brought forth to this continent a new nation,
conceived in liberty and dedicated to the proposition that all men are created equal."
Font Color
When you choose a font color as described in the section on Setting the Appearance of a Page,
you are selecting a new default color—the color that will automatically be applied to all text that
you type in that particular page. However, you can also selectively apply color to text by
highlighting the text, then choosing a color from the Font Color tool. The currently selected color
is denoted by the band beneath the "A." You can either choose one of the standard Web colors
shown (see example below), or click More Colors and choose a color from the Color Palette.
Font Colors Dialog Box
NOTE: when you manually apply a color to text using the font color tool, that choice overrides
any choices you may have made in the FORMAT : Background menu. While this allows you to
selectively change the color of the text, you should always remember that if you "color" a
hyperlink then it will no longer appear to the reader as a link, nor will it change to a visited link
color. This causes the reader to lose a valuable navigation aid.

337
Using Hyperlinks
Hyperlinks are those areas that you design to be "clicked" in order to take your reader to a
different location.
Inserting a Hyperlink
 Type the text that you want your reader to see.
 Highlight the text.
 Click the Insert Hyperlink tool, .
In the "Create Hyperlink" dialog box (see example below):
 To link to a different web site, in the Address text box, type (or copy and paste) the URL (i.e.,
http://www.iupui.edu/~webtrain/home.html).
 To link to a file within your own Web directory/folder, change to the directory/folder where
you have stored the file, select it, then click OK.
Insert Hyperlink Dialog Box
 To create a hyperlink to an E-mail address (so that the reader can click and send an E-mail
message), click the E-mail Address icon in the lower left corner of the hyperlink dialog box. The
Insert Hyperlink dialog box will change appearance (see example below), allowing you to type
the complete E-mail address (e.g., jsmith@mystuff.com), as well as a subject line if you want to
"pre-fill" the subject of the message. Then click OK.
Insert E-mail Hyperlink Dialog Box

338
NOTE: some public or lab computers may be set up to not allow E-mail to be sent from Web
pages, so you may not be able to test this part of your Web page if you are not using your own
computer.
Removing a Hyperlink
 Click anywhere within the word or phrase containing the hyperlink.
 The dialog box will change to now include a Remove Hyperlink button (see example below).
Click Remove Link.
Remove Hyperlink Dialog Box
Editing a Hyperlink
 Click anywhere within the word or phrase containing the hyperlink.
 Edit the text in the URL box by highlighting the text and pressing the <Delete> key on your
keyboard. Retype the information, then press OK.
Using Bookmarks
A hyperlink allows your reader to jump to a specific location within a Web file. The destination
of this type of link is, in HTML "language," a named anchor. FrontPage calls them, bookmarks.
These types of links have two components: the link and the destination. You should create the
bookmark before you create the hyperlink.
Creating a Bookmark
 Insert your cursor at the point in the document where you want the reader to be taken when
the hyperlink is clicked. You may want to consider adding the bookmark at the end of the line
above where you want the destination to be in order to provide a bit of a margin above the line
where you want the reader to begin reading.
 From the menu, choose INSERT : Bookmark.

339
 In the text box, type the name of the Bookmark. Name the bookmark something descriptive,
but simple (see example below).
Bookmark Dialog Box
Inserting a Hyperlink to a Bookmarked Destination
To insert a hyperlink to a named destination,
 At the point in the document where you want the hyperlink, type the text that you want your
reader to see.
 Highlight the text.
 In the "Create Hyperlink" dialog box, to link to a specific spot in the same file, click Place in
This Document, and select the name of the bookmark, then click OK.

340
Insert Hyperlink to Bookmarked Location Dialog Box
To link to a specific spot in a different file, first select the file as instructed above. Then click the
Bookmark button and select the bookmark from the list.
Using Images
There are many sources for images to use in your Web pages. You may purchase stock images,
scan diagrams and photographs, find images on the Web, or create your own with a graphics
application. When using stock images or locating images on the Web, it is important that you are
certain you have permission to use them on your Web site. For purchased stock images, you'll
need to read the license agreement to know under what circumstances you can use the images,
whether you have permission to modify the images, and the type of credits, if any, you must
provide. Most sites on the Internet also have a "terms of use" statement somewhere on the site.
When in doubt, don't use. There are too many sources for images for you to use something
without permission and infringe upon the rights of the copyright holder.
To save an image you find on the Web (assuming that you clearly have permission from the
creator to use it and are not infringing on the copyright), point to the image and right-click
(Windows users) or hold the mouse button down (Macintosh users), then choose Save Image As.
Image Types
Images that are viewable on the Web must be in one of three formats: gif, jpg, or png (This
tutorial will focus on gif and jpb). Both gif and jpg are image file compression utilities—they
decrease the size of the file so that it loads more efficiently when viewed on the Web.
Jpg (Joint Photographic Experts Group) files are used with photographic quality images. The files
are compressed by removing a few of the millions of colors present in the image that our eyes
can't see anyway. Gif (Graphics Interchange Format) are used with images with solid blocks of
color such as clip art, balls, bullets, cubes, and bars. The compression occurs by recording a
marker for each unique color in the image, rather than retaining every single color.

341
AOL has a proprietary image format—art—that you may encounter if you use AOL as your
Internet Service Provider. The image reader used with the AOL Web browser is the only graphics
application that understands the art format, so if you are browsing the Web using the AOL default
Web browser and save images, only your AOL system will recognize the images. You can always
use AOL as your Internet Service Provider, but then use a stand-alone version of Internet
Explorer, Netscape Navigator, or Firefox to do your Web browsing in order to avoid this problem.
Clip art files are generally in one of two formats: wmf or bmp. Both file types are Windows' file
formats, so FrontPage can read both. It also has the capability of converting either file type to a
Web-readable format, which is important because unless your readers happen to have that
particular clip art image installed on their computers, they will be unable to view the image unless
it is converted.
Inserting Clip Art
To insert a clip art image into your Web page,
 From the menu, choose INSERT : Picture : Clip Art.
 In the Insert Clip Art dialog box (which will display to the right of Web page you are
creating/editing, see example below), type a search term, make any desired selections from the
Other Search Options, then click the Search button.
Insert Clip Art Dialog Box
 Click on the image you want to select and it will be inserted in your Web page. To close the
Insert Clip Art dialog box, click the X in the upper right corner of the dialog box window.
Converting Clip Art
Remember that clip art images are in Windows file formats rather than gif or jpg, so it is
necessary for you to convert them to a Web-readable format. To convert a clip art image,
 Click once on the image so that it has handles (see example below)
Example of "Handles" Denoting Image Selection
 Right-click and from the pop-up menu, choose Picture Properties.

342
 In the Picture Properties, click the Picture Files Type (see example below) button.
Picture Properties Dialog Box, Picture File Type
 FrontPage recognizes that most times you will be converting a clipart image to gif and has
preselected that option for you (see example below). If that is accurate, click OK to accept the
option.
Picture File Type Dialog Box
Inserting Other Images
To insert non-clip art images into your Web page, from the menu, choose INSERT : Picture :
From File. Locate and select the file, then click OK. You can also click the Insert Picture icon, ,
to insert an image.
Sizing and Placing Images
Although it is possible to re-size an image after it is inserted into the Web document by dragging
the handles, you shouldn't do that unless it is a relatively small adjustment. While altering the
image in this way makes the image display smaller or larger on the screen, it doesn't physically
alter the file size. Increasing the image display size in this manner may cause the image to
pixelate—to look grainy or "spotty." Decreasing the image display size by dragging the handles
causes it to display smaller on the screen, but since the file size itself was not altered, it still takes

343
as long for the reader to download as it would have you had kept it its original size. For anything
other than a small adjustment, it is always better to open the image in a graphics application and
physically resize it.
To move the image to another location in your page, click once on the image so that it has handles.
Then, press and drag the image to a new location on the page (although you may find it easier to
simply delete (or cut) the image and place (or paste) it into the new location. Be careful not to
accidentally re-size the image by pressing and dragging on a handle. Dragging a two-headed
arrow resizes an image; dragging a four-headed arrow moves the image.
Aligning an image can often be a bit frustrating. You can seldom place an image just where you
want it, unless it's left-aligned, centered, or right-aligned, and only then by using the alignment
tool, not be pressing and dragging to a new location. By default, images are left-aligned, as are all
elements on a Web page. To center an image, click on the image so that it has handles, then click
the center alignment tool (or for more precise control, insert the image into a single cell, single
row table and align that).
When adding a line of text beside an image, notice that a long line of text wraps beneath the
image, rather than flowing so that there are multiple lines to the side of an image (see example
below).
This is a picture
of a church in the Alps. Notice that excessively
long lines of text wrap beneath the picture.
Normal
To cause the text to flow beside the image (see examples below), point to the image on your page
and right-click. From the pop-up menu, choose Picture Properties.
This is a
picture of a church in the Alps.
This is a
picture of a church in the Alps.
Right-aligned (the image is on the right) Left-aligned (the image is on the left)
In the Picture Properties dialog box, click the Appearance tab and from the drop-down Alignment
box, choose either Left or Right aligned. To create a buffer/margin around the image choose
Horizontal/Vertical spacing (numbers are in pixels)—just play with the numbers until you get the
spacing you like. NOTE: horizontal spacing puts equal amounts of buffer space to the left and to
the right of the image; vertical spacing puts equal amounts of buffer space both above and below
the image.

344
Picture Properties
Using Bulleted and Numbered Lists
Bulleted and numbered lists are an effective way to organize your material for optimal reader "scan-
ability."
To insert bullets or numbers as you type:
 Place the cursor in the paragraph in which you want the list to start (it doesn't have to be at
the beginning of the sentence; simply in the paragraph).
 Click the Number or Bullet tool, , and type the text, then press the <ENTER> key on
your keyboard.
 When you press ENTER to begin the next paragraph, the next bullet or number automatically
appears.
When you begin the first paragraph that you don't want to have a bullet or number, click the tool
to turn off the feature, or press the <ENTER> key on your keyboard to revert to normal
formatting.
You can affect indentation of lists by clicking the Decrease Indent tool or Increase Indent
tool, , respectively.
To use graphical bullets or to change the number style (i.e., Roman numerals, upper case
alphabetic, lower case alphabetic, etc.), choose from the menu, FORMAT : Bullets and
Numbering.
 The Picture Bullets tab of the Bullets and Numbering dialog box (see example below) allows
you to choose a graphical bullet. To choose a graphical bullet from ones that you have previously
saved, click the Browse button, locate and select the image file, then click OK. The graphical
bullet will be placed to the left of whatever paragraph your cursor is currently in. Each time you
press the <ENTER> key on your keyboard, another bullet will appear for the next item in the list.
Press the <ENTER> key on your keyboard twice at the end of the last item in the list and the
bullet formatting will revert to normal formatting.

345
Graphical Bullets Dialog Box
 The Plain Bullets tab in the Bullets and Numbering dialog box (see example below) allows
you to choose the style of bullet you want. After making your selection, click OK.
Plain Bullets Dialog Box
 The Numbers tab in the Bullets and Numbering dialog box (see example below) allows you to
select a non-Arabic number style or to select a different starting number other than 1. After
selecting the style of number and the starting number you want, click OK.

346
Numbers Dialog Box
NOTE: Although it is possible to create nested lists, e.g., outlines, the HTML editor may "get
confused," making it difficult to get the formatting, numbering, and indentation you desire. Until
you feel comfortable working directly with HTML tags, you may want to avoid nested lists.
Using Tables
Tables are useful to organize information. They are especially beneficial in creating the
appearance of multi-columned text. There is no way to "tab" in HTML and you should avoid
using the Space Bar to control spacing since that will result in a Web page that looks good to your
reader only if he/she has the same computer settings as you do. The alternative is to create a
borderless table. Simple tables are easy to create; however, it has been my experience that
creating or editing a complex table may require direct HTML tag manipulation.
Creating a Table
To insert a table:
 Click the Insert Table tool, .
 Press and drag the Table Size pop-up box (see example below) to select the number of rows
and columns you want in your table. When you release the mouse button, a table of the
proportions selected will display in your document.
Table Size Dialog Box

347
NOTE: It is best if you can decide ahead of time the number of columns—it will save you a step
during development.
The table will show on the Web page during development with dotted lines (see example below)
so that you can more easily work with the table. The dotted lines indicate that the lines will NOT
display on the Web.
Sample Working Table Grid
Working with Tables
NOTE: Any time you wish to work with a table, you must click within the table to place the
cursor inside the table. Otherwise, you will find that the Table menu options are "grayed out" and
unavailable to you.
To adjust the column widths and row heights, point your mouse at the border you wish to adjust.
Move the mouse very slowly until you see the cursor change to a double headed arrow (it's quite
sensitive; move it slowly), then press and drag to the new dimensions.
To enter data into the table, click your mouse cursor in a cell and begin typing.
To move from cell to cell, press the <TAB> key on your keyboard or click the mouse cursor in
the cell to which you want to move.
To add an additional table row at the end of the table, position your cursor in the lower, right
corner cell and press the <TAB> key on your keyboard.
To select a table/column/row/cell, click in the row or column that you wish to select, then from
the menu choose TABLE : Select : Table/Column/Row/Cell (whichever one you wish to select).
To insert a row or column, click in the row or column beside which you wish to make an insertion.
From the menu, choose TABLE : Insert : Rows or Column. From the dialog box, select either row
or column. The example below has Columns selected; therefore, the Location indicates a Left of
selection or a Right of selection insertion option. If Rows had been selected, the Location would
have adjusted to show Above or Below options.
Insert Rows or Columns Dialog Box

348
To delete individual cells, complete rows or complete columns, position your cursor in the
appropriate location (in the cell, in the row, or in the column), then select the element (as
previously described) that you want to delete. After the element is selected, from the menu,
choose TABLE : Delete Cells.
To merge cells, select the cells as previously described, then from the menu, choose TABLE :
Merge Cells.
To split cells, place the cursor in the cell you wish to split. Then from the menu, choose TABLE :
Split Cells. In the dialog box (see example below), choose to split the cell into columns or into
rows, and specify the number of columns or rows you wish.
Split Cells Dialog Box
Table Toolbar
Table Toolbar
The Table Toolbar gives you easy access to many of the same functions that you can perform
through the Table menu. Depending upon how the FrontPage options are set on your computer,
the Table Toolbar may display anytime you are working with tables. If it doesn't and you want it
to, from the menu choose VIEW : Toolbars : Tables.
In addition to the table functions that you can access through the menu, you can:
 Add a table or additional cells within a table. Click the pencil icon, . Press and drag your
cursor (which will look like a pencil) vertically or horizontally to draw a new cell within your
table.
 Delete a cell wall from an existing table. Click the eraser icon, . Press and drag your cursor
(which will look like an eraser) over the cell border (you will see the lines that will be deleted as
red) you want to delete; when you release the mouse, the borders will be deleted.
To "turn off" either the pencil or the eraser tool, press the <ESC> key on your keyboard.

349
Distribute columns or rows evenly. After you have adjusted the table borders several times, you
may find that you simply want them back, evenly arranged to "start over." Highlight the row or
column that you want to evenly distribute, then click the appropriate "distribute evenly"
icon, .
 Size the table according to the contents within it. Tables are always inserted full-width.
Rather than try to guess how wide the table must be to accommodate the contents, click the Auto
Fit icon, .
Table & Cell Properties
You can set table properties such as background and border colors, spacing, and text alignment in
the Table Properties. Make sure that your cursor is within the table. From the menu, choose
TABLE : Table Properties (see example below).
Table Properties Dialog Box
In the Table Properties dialog box, you can make many choices about the table, but there are only
a few that you will normally need to do anything with:
 Layout tools. Layout tools enable you to create specific layouts for page design.
 Size. This option allows you to specify the number of rows and columns you wish your page
to have. Access the table properties after you have inserted a table, then make selections in the
Size option to have it create the appropriate dimensions.
 Layout.

350
 Alignment. This option will position the table on the Web page.
 Width. This option specifies the width of the overall table. Setting the table width in a
percentage is more flexible from a design point of view (tables with fixed pixels sizes do not
adjust with the dimensions of the user's browser window and can cause a horizontal scroll bar if
the table is wider than the browser window).
NOTE: FrontPage has quirk, in that if you press and drag to adjust the size of a table's cell or
margins, it often changes any percent width setting to a specific number of pixels. My
recommendation is that you set the size of your table and the cells within it, then enter the table
properties dialog box and change the pixel setting to percent (just click the other radio button).
 Float. This option determines the table's position in relation to other objects on the page.
When Float is set to default, other objects appear either below or above the table only.
 Height. In general, you should not specify a height for your table. Let it adjust according to
the needs of the table as displayed on your reader's monitor. Otherwise, you may end up with lots
of "white space" that is not necessary.
 Cell padding & cell spacing. Cell padding is the amount of space between the text and the
wall of the cell. Cell spacing is the width of the actual cell wall. In the two tables below, notice
how the cell padding and cell spacing values effect the appearance of the table (NOTE: the
HTML code uses "cellpadding" and "cellspacing" for the terms):
This table has cellpadding of 15 pixels
and cellspacing of 0
pixels.
Notice how far the words are from
the edge of the cell.
This table has cellpadding of 0 pixels
and cellspacing of 15
pixels.
Notice the width of the cell walls and
how close to the cell walls the text is.
 Borders. Border size defines the width of the table border in pixels. It is important to
remember that some older browsers are unable to display a border color.
 Background. This option sets the color for the entire table. If you want to selectively color the
table cells, use the Cell Properties, rather than Table Properties.
To control cell properties such as text alignment within the cell and cell background color, make
sure the cursor is within the cell whose options you want to set. Then from the menu, choose
TABLE : Cell Properties.
One of the more important options in the Cell Properties is the cell vertical alignment. Notice in
the example below how much easier it is to read the contents of the second row (that is top
aligned) than to read the first row that has the default, middle alignment:
This cell has very little
information.
This cell has multiple
lines of information.
Notice how the cell on
the left is centered,
vertically, making the

351
table contents
somewhat difficult to
read.
This cell has very little
information.
This cell has multiple
lines of information.
Notice how the cell on
the left is aligned at the
top, making the table
contents easier to read.
Using FrontPage with Existing Documents
If you have an existing document, created in a word processing application, you can use it with
FrontPage to create a Web document easily without re-typing the text. To convert the document
from a word processing document to an HTML document, you must use the INSERT menu,
rather than simply opening the file. (If you choose FILE : Open, the creating application will start
and load the document, rather than opening it in FrontPage.)
To insert a pre-existing document, from the menu, choose INSERT : File. Browse for your file,
then select and open it. Once it appears in the FrontPage window, it will have been converted to
an HTML document for you. You will likely need to make some formatting repairs, particularly if
the formatting is complex. However, it may prevent you having to re-type the entire thing.
If FrontPage appears to have difficulty opening your document, open it in its creating application,
and re-save it as RTF (Rich Text Format) format rather than the regular WordPerfect, Word, or
Works file format. You can find RTF in the Save As option under the drop-down "File Format"
option. Rich text is a "generic" file format that is readable by almost any application.
Advanced and Special Features
In addition to being an HTML editor, FrontPage is a powerful Web management tool. In the File
menu, you will see the Open/Close Weboptions. These options allow you to create a Web and
manage it activities.
In the View menu, are other options that work hand-in-hand with the Web management. Viewing
reports, folders, hyperlinks, etc. are extremely useful utilities when you are managing an entire
Web with multiple files and directories.
In the Insert menu are options for Component, Form, and Advanced. Many of these options are
somewhat misleading in that they make it appear that you can create forms and add counters to
your Web page. This is true—only if your Web server supports these features and allows (or
provides) you with the scripting to make these features functional.
After creating website, we can upload it to live server, there are many free live web hosting
servers available i.e.
http://www.000webhost.com/
www.5gbfree.com/
www.website.org/
https://www.freehosting.com/
3gwebhosters.com/

352
Fill in the blanks.
1. Front page is a graphical editor.
2. tag appears at the top of the browser window.
3. The primary pieces of information all the description, keywords &
author.
4. A allows reader to jump to a specific location within a web file.
5. files are used with photographic quality images.
M.C.Q.
1. LPS tab is used for .
(i) Paragraph (ii) Bold (iii) Heading
2. Heading styles are types.
(i) 4 (ii) 6 (iii) 5
3. The tool allows to increase or decrease the indent of a
block of text.
(i) Indent (ii) Bullet (iii) Number
4. is the amount of space between the text & the wall of cell.
(i) Cell padding (ii) Cell spacing (iii) Border
5. A is like as personal web interior designer.
(i) Theme (ii) Screen saver (iii) page color
Short Answer Questions.
1. Describe font attributes?
2. What is the function of Book Mark?
3. What is the process of adjusting column width & row height?
4. Describe font face?
5. Tell the name of all option of table toolbar?

CHAPTER 10A - Web Development with MS-Front Page 2007 & CMS using wordpress.doc

More Related Content

Similar to CHAPTER 10A - Web Development with MS-Front Page 2007 & CMS using wordpress.doc (20)

Recently uploaded (20)

CHAPTER 10A - Web Development with MS-Front Page 2007 & CMS using wordpress.doc