This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
8/8/2019 FrontPage 2003 - Course Aware and User Guide
A browser takes the raw material of a web page (written in HTML) and shows it graphically!
Browsers on the Market
There are two main choices of browser on the market:
♦ Internet Explorer ( IE ) comes with nearly allnew Windows computers – it has about 75% of the
browser market, and this share is growing. The versionsof IE more or less correspond to the versions of Windows shown on the right.
♦ Netscape is the other main browser, and comes in many versions (the current one is6.2). However, some people may still be using versions as early as 4.0.
In addition there are numerous specialist browsers – for example, WAP-enabled mobile phonesrely on specialist cut-down browsers to surf the web.
Choosing a Browser
The biggest question you need to consider is – who will be viewing my site?
♦ If your web site is for a corporate intranet, there is a good chance everyone will
be using the same version of Internet Explorer. This means that you can use features of FrontPage without considering whether they will work under Netscape.
♦ If it is not vital that everyone in the world should be able to view your site (for example, it is a sales site and a coverage rate of 80%+ is adequate), consider ignoringall browsers but Internet Explorer – again, this will mean that you can ignore Netscape.
♦ Otherwise, you must test your web site on all browsers which may be used to view it.In practice this means that you must be very careful what FrontPage tools you use.
A typical section of HTML (HyperText Markup Language) What a browser would display
Version of Windows
Versionof IE
98 4.0
2000 5.0
Wise Owl’sHint
There are a huge number of differences between the way in which Internet Explorer and Netscape interpret HTML. If you possibly can,assume that everyone viewing your site will be using Internet Explorer – otherwise, recruit the services of a professional web designer!
8/8/2019 FrontPage 2003 - Course Aware and User Guide
As a web designer, you have very little control over the way in which people will view your website:
When creating a web site, you have two basic options:
♦ Create every page of fixed width (600 pixels, say), and risk the sort of problem shownabove if someone views it using fine resolution on a large monitor.
♦ Create your pages so that they fill any screen, and ensure that text wraps sensibly whenthey are viewed on smaller monitors.
You can create tables and change their width settings to control how web sites appear – see thesections on “Tables” in this courseware for more details.
Carol has a 19” monitor,with fine pixel resolution
Wise Owl’sHint
Many big web sites use a fixed screen width (often 600 pixels) – in WiseOwl’s opinion these look awful. Be nice to your viewers – createvariable width web sites!
8/8/2019 FrontPage 2003 - Course Aware and User Guide
A theme in FrontPage controls the look and feel of a site – as an example, here is an example of the same page using 3 different themes:
What this shows is that themes provide a quick and easy way to impose a consistent and visually pleasing style onto all of the pages in your web site. They do, however, have two disadvantages:
Disadvantage Notes
Lack of professionalism You can usually spot a web site which has been designed using aFrontPage theme – they tend to look a bit amateur.
Lack of flexibility Once you have elected to use a theme, there are certain things thatyou can not do. For example, in the box below for changing the
border styles of tables, several of the options are set to Automaticshowing that they are controlled by your theme and can not bechanged:
The web site shown below has a very clear method of navigation:
The buttons shown above form part of a FrontPage feature called anavigation bar . This automaticallycreates link buttons from thenavigational structure of your site.
Navigation bars such as the one shown above can also be horizontal, and can contain text, not buttons:
You can use these buttonsto jump to different parts of your site.
Navigation bars work onlywhen you have a clear hierarchical structure.
Text links shown acrossthe top or bottom of the
page can often look more professional.
Wise Owl’sHint
Use navigation bars to control links round your site, otherwise you will have to learn dynamic HTML and JavaScript (which you definitely don’t want to do unless you have to)!
8/8/2019 FrontPage 2003 - Course Aware and User Guide
One of the main ways in which members of the public will find your web site is by searching for it. Below is an example of a search run using Google (one of the main search engines on the
Net):
Most people just look at the top 10 sites returned from a search, but there are thousands – perhaps tens of thousands – of other sites competing with yours for a single search phrase. Hereare some thoughts:
♦ There are many companies who will offer to submit your web site to 2,000+ searchengines, but be aware that 1,995 of these will be obscure and unused. A good exampleof such a company is Submit It! (www.submitit.com ).
♦ Many web sites offer guidance on getting your web site submitted to search engines – always use free help when it’s available on the web!
♦ Finally, accept that if your main aim is to get to the top of a search engine’s lists, areasonable ambition is to choose a single engine ( Google is a popular one) and a singlesearch phrase to target.
… gives about 102,000 websites – how can you ensureyours is in the top 10?
Wise Owl’sHint
The main search engines include Yahoo, Lycos, MSN, Google, Excite, AltaVista and the BBC. Each one uses a different technique for searching the web.
Wise Owl’sHint
Developers for internal Intranets can ignore this page. External developers should avoid targeting common phrases – choose“Manchester Excel Training” rather than “IT Training”, for example.
Although there is a difference between the two formats, either will do for your web site.Typically JPEG files are used more often for photographs.
Sources of Images
Here are some possible ways in which you can get images for a web site:
Method Notes
Clipart Microsoft Office comes with a large collection of clipart pictures.When inserting clipart you can also view the Microsoft web site clipart collection, which contains thousands more pictures.
You can right click on any clipart picture to ungroup it, allowing youto edit the picture (when you have finished, just group thecomponent parts back together again). The diagram below showsthe results of ungrouping a cartoon duck:
You can make your life much easier if you choose a white background for your web site – otherwise all your images will have to have the correct background colour.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Someone else’s web site Simply find the picture you want, and click on it with the rightmouse button to copy it or to save it as a picture on your computer:
You should always get the permission of the relevant company before copying pictures, as they will remain the copyright of theartist.
Commercial clip-art sites
A search on the Internet will reveal hundreds of web sitesspecialising in clip-art, most of which will be prepared to drawimages that you specify for a fee.
Graphic artists For really professional sites, there is no alternative to commissioninga local graphic artist who you can meet regularly to produce artwork.This must be someone who has experience of producing graphics for the web.
Draw them yourself You can use packages like Paint Shop Pro and Adobe Photoshop tocreate your own images, but be aware that this will consume hugeamounts of your time. Avoid this if at all possible!
Style sheets allow you to set up default appearances for different parts of an HTML page – anexample is shown below:
Style sheets have two huge advantages:
3) You don’t have to apply the same formatting to each bit of text – just specify that (for
example) all text in tables should appear in blue.
4) When you want to change the appearance of your web site, you can do it with just asingle change to a style sheet, rather than having to edit every single page.
When you have finished your web site, you will want to publish it. This is the process of copying it from your computer to one which everyone can see:
Unfortunately, when you are creating a web siteyou need to ask two things of your server
administrator:
♦ Is the server UNIX or Windows? If youwill be publishing to a UNIX server, you will not
be able to use FrontPage components.
♦ Even if the server to which you will publish your web site is running Windows NT or XP, does it have FrontPage extensions installed?These are the extra bits of software which allowyou to use FrontPage components.
If the answer to either of the above questions is“no”, you won’t be able to use many of the optionson the menu shown on the right.
DHTML (or dynamic HTML ) produces some of the best webeffects. Here is a simple example.
Dynamic HTML is the way to make the contents of a web page change when your viewers click on a drop list, hover the mouse over a piece of text, etc. However, it is not easy to learn!
Showing Database Records
Active Server Pages ( ASPs ) are pages of HTML interspersed with other commands written(usually) in a language called vbScript. Typically you use ASPs to present results from adatabase. Here is an example:
This is the result of running the page on the left
This is the web page as viewed in IE
Wise Owl’sHint
Dynamic HTML looks great, but the huge learning curve puts it out of
the reach of most part-time web developers. Be prepared to learn JavaScript and experience endless difficulty getting DHTML to work inthe same way under Netscape and IE.
Wise Owl’s
Hint
Other variations on this theme are ASP.NET and PHP. If you do godown this route, prepare for a long learning curve.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
There are two other pages,listing how to find Sandyand his hobbies andinterests.
Wise Owl’sHint
Although the web sites that you create are likely to be much morecomplicated than this simple example, the principles used here can beapplied universally.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Before starting with FrontPage, it is a good idea to sketch a rough design of your web site. Thediagram below gives an idea of how Sandy Stone’s (fairly simple) web site was planned.
In FrontPage the home page will be the “parent page”, and any other pages will be linked to itrather like an ancestral tree.
Once you have a rough plan of how you want your web pages to look you are ready to createyour first web site!
7) Complete the dialog box, which appears as shown below, then select OK .
8) If the folder doesn’t exist, FrontPage will create it for you. If the folder exists butdidn’t previously contain a website, FrontPage will convert it into a web folder for you.
Disk-Based and Server-Based Web Sites
The web site above is an example of a disk-based web site. Below is an example of a server- based web site:
Broadly speaking, you can only create a server-based web site on a computer which is running IIS ( Internet Information Server ).
♦ from the menu select: File Recent Sites and select a site you have been usingrecently; or
♦ use the toolbar as shown below:
Closing a Web Site
A web site consists of a number of different pages, any of which you may be editing at any onetime. You can close pages individually, or close down the entire site in one go:
9) From the menu select: File Close Site
Deleting a Web Site
You can either delete the entire contents of a web site, or simply stop it being a web site butleave the files on your computer’s disk:
a) Selecting the WebSite tab allows you toview information aboutthe entire web site.
b) This toolbar allows you tochoose what information to view.Currently we are looking atFolders .
Wise Owl’sHint
The Folder List , which is displayed on the left hand side of the screen,can be used to move, copy or delete files or folders. You can press + tohide the Folder List if it gets in your way. Use the same keyboard
shortcut to redisplay it.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
When you have added or renamed pages, they will not immediatelyappear in the folder list in FrontPage. To refresh your web site so that its contents are up to date, press or from the menu select: View
Refresh .
Type in a newname here.
Wise Owl’sHint
If you rename a page in this way be sure to keep the .htm filenameextension. If you don’t then FrontPage won’t be able to recognise it as aweb page.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
a) Click and dragthe page from thefolder list to thenavigation structure.
b) Position the page andrelease the mouse button. Agrey outline shows where your
page will fit into the web site.
c) The page is now part of thenavigation structure of the website.
Click here todelete aselected page.
Wise Owl’sHint
If you choose to delete a page on the Navigation view you will be given theoption of deleting the page completely or just removing it from the navigation
structure.
Choose between thetwo options.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Layout tables are used to create the structure of your web pages. Layout tables contain Layout cells , which in turn hold the contents of your web pages.
Once you have created a blank layout table you will need to create some layout cells.
You can draw as many layout cells as you like:
Inserting a Predefined Layout Table
FrontPage contains a number of template layout tables with predefined cells. To insert one of these into a web page simply select it from the task pane:
b) …then draw alayout cell bydragging anddropping within thelayout table.
From very simple…
…to incrediblycomplex designs.
Wise Owl’sHint
If you make a mistake and want to start from scratch, selecting the No Layout template from the task pane will remove the currently selected layout table.
Click on the layout yourequire and it will beinserted into the web page.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Once you have created layout tables and cells you can move, resize and rearrange them. To doany of these things with a layout table or cell you must first select it:
13) Click anywhere within the table.
14) Use the Quick Tag Selector to select the part you require as shown below:
One of the great features of layout tables and cells is their flexibility. Cells can be moved andresized to create exactly the layout you require.
Resizing a Single Layout Cell
Resizing Multiple Layout Cells
When you add cells to a layout table youwill see dotted lines representing columnand row borders. Moving these linesaffects all cells whose borders are in linewith them.
The task pane shows the widthand height of the table in pixels.
To change a size, simply click on it and overtype.
a) Move your mouse cursor over one of thesizing handles (small blue squares) and thecursor will change shape.
b) Click and drag with the mouse until youhave the size you require, and then releasethe mouse button.
a) Click on the dropdown arrowto the right of any Size Tag andselect the first option in the list.
b) Fill in the value for columnwidth or height and click w
Wise Owl’sHint
When you start adding cells to your table you will automatically createmore rows and columns, and thus more row and column size tags. Thismakes it more confusing to use this method to change the size of a table.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Using a percentage size for a layout table means that your table can adjust itself to suit differentcombinations of screen sizes, screen resolutions and web browsers. For example:
Setting a Percentage Size for Columns and Rows (Autostretch)
Setting a percentage size for an entire table means that every cell in the table is affected whenthe viewing area changes. It is often useful to only allow certain parts of the table to do this.
To do this requires setting one of the columns to autostretch :
When drawing and placing layout tables and cells it is handy to have a guide to help you arrangethem neatly. FrontPage has two useful tools for exactly that purpose.
The Ruler
To view the ruler, choose the option from the View menu as shown:
The Grid
To view the grid, choose the option from the View menu as shown:
The ruler is displayed at the topand left edges of the page.
Choose the Show Grid option from the menu.
The grid is displayed on the page you areworking on. Note that the grid can be seenonly in the design view of FrontPage, so itwon’t appear on your website.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
18) From the task pane select the theme you require as shown:
Underneath the themes list there are another three options which change the way your selected theme will work. Try changing these and see how the theme looks.
An alternative way to create a common look for the pages in your web siteis to use Cascading Style Sheets . These are more powerful but requireknowledge of HTML tags. They are covered in a separate chapter.
Vivid colours brightens colours for headings, text and links
Active graphics animates some advanced features in your site
Background Image switches the background colour/design on/off
Move your mouse cursor over anytheme and click the drop arrowthat appears.
Select this option to apply thetheme to every page in your website.
Select this option to apply thetheme to just the current page.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
You can edit any page by double-clicking on it, regardless of what view you are in:
Setting a Page Title
The title of a web page shows up in your browser (it’s also one of the main things logged bysearch engines, when determining how to catalogue your site):
You can change the title of a page as shown below (noting that this doesn’t affect the file name):
Items in typed lists often stand out better when bullet points are used. To apply bullet points:
24) Go to the right point on your page.
25) Click on the bullets icon.
26) You can now type the first item after the bullet point. If you have a theme for your site,FrontPage will choose the bullet type for you and you won’t be able to alter this.
27) When you press another bullet point will automatically appear on the next line.
First of all, make sure you have thecursor at the place where you wantyour bullet list to begin.
Clicking on the bullets iconon the toolbar...
… will place the first bulletwhere the cursor was.
When you have finished your bullet list, press twice after the last entry in order tostop another bullet point from appearing atthe beginning of your next line.
Wise Owl’sHint
Creating number lists is done in exactly the same way as for creating bullet lists , except that you choose the numbering icon instead of the bullets icon .
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Placing clipart pictures into your web site will help to keep the interest of your viewer.Microsoft Office includes a wide variety of clipart for you to choose from. To insert clipart:
28) Position the cursor where you want the clipart to go.
29) From the menu select: Insert Picture Clip Art...
The default alignment for clipart and other graphics is the left-hand side of the page i.e. left aligned . However, you may prefer to centre your clipart or have it right aligned .
The icons for changing the alignment of your image (or text) on the toolbar are shown below:
Align Left Centre Align Right
To change the alignment, select the image to align and click on the required alignment icon.
Adding Other Images
If someone has very kindly drawn a picture for you, you can insert this also:
35) From the menu select: Insert Picture From File...
36) Complete the dialog box which appears as shown below, then select OK .
Pictures are saved separately from text in web pages. When you come to save or close down aweb page, you will be asked where you want to save the pictures it contains:
The size of layout cells can be affected when pictures are added to them. This can result in someconfusing information being displayed on the layout table.
If you make the picture smaller the layout cell will shrink back to the original size. Alternatively
you can leave the picture the same size and force the layout cell to accept the new width.
There are 5 ways in which you can view a web page: Design view, Code view, Split view, andPreview view (described below) or in a web browser (see following page).
Split view shows a combination of the design and code views. Preview view allows you to seean exact representation of how your web page will look in Internet Explorer:
Design view provides a more-or-less accurateview of how your page will look in Internet Explorer or Netscape, and is the view you
normally use for editing web pages.
Code view shows the underlying HyperText Markup Language inwhich all web pages are ultimately written. You can try editing
this if you like – it is a fairly forgiving language, and invalid “commands” are normally just ignored.
Click on this tab to see a web pagein Preview view.
Wise Owl’sHint
Preview view is not a good idea. It does not do what it claims (there are sometimes discrepancies between preview view of a web page and howthe page looks in a browser), and offers no additional advantages. Avoid it and view your pages in a browser (see next page) instead!
8/8/2019 FrontPage 2003 - Course Aware and User Guide
The best way to see what a web page will look like in a browser is to … view it in a browser. Todo this, you must follow these steps:
37) Make sure that you have installed on your computer every browser with which youwant to test your web site. For example, if you want to see what your site will look likein Netscape 4.0 (a good thing to do), you will need to install this software on your PC.
38) Save your page (although FrontPage will warn you if you miss out this step).
39) From the menu select: File Preview in Browser...
40) Select the option required as shown below:
41) If necessary, FrontPage will load the relevant browser program – otherwise, it will justswitch you to it. It will then display your page.
42) Finally (and most importantly), refresh your view to ensure that you are viewing thelatest page, and not an old cached copy!
43) Provided that you remember to refresh your page, you are now seeing what it will look like to the world. Be aware, however, that what your audience sees will also depend ontheir screen resolution, browser settings and what fonts they have installed on their PC.
In the chapter on Layout Tables we created layout cells to contain a page banner and navigation buttons. An alternative way to do this would be to use Shared Borders .
6.1 What are Shared Borders?
Shared borders allow you to create a common look and feel to your web site. The advantage of this is that you only have to set up the border once and it can be included on every page:
You can set left, right, top or bottom shared borders for a web site, and then suspend or changethem for any single page.
Shared borders are easy to edit - you can get at them from any page in your web site!
Where are My Shared Borders Stored?
Sometimes it can be useful to know where shared borders are stored (for copying them from onesite to another, for example). Your shared borders are stored in the _borders folder within your web site, but you can not usually see this. To view hidden folders:
46) From the menu select:Tools Site Settings…
47) Complete the dialog box which
appears as shown, then select OK .
48) You should now be able to see some or all of the four possible shared border files in thefolder called _borders : top.htm , left.htm , bottom.htm and right.htm .
Under normal circumstances, youare editing a page in your web site(here it is howto.htm ).
Click in a shared border to edit it (the edges of all theselected borders change from dotted to black). When youhave finished, click back in the main body of the page.
Select this option in theAdvanced tab.
Wise Owl’sHint
Editing shared borders is frightening because although you appear just to be changing a single page, you are actually making a change whichwill affect most if not all pages in your web site!
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Navigation bars allow your readers to move between pages in your web site easily. Navigation bars can go anywhere in a web page, but are usually positioned in a shared border.
To create a navigation bar:
49) Position the cursor in the shared border in which you want to create a navigation bar:
50) From the menu select: Insert Navigation...
51) Complete the series of dialog boxes which appear as shown below.
Select the page youwant to create a link to. Note that pagescurrently being editedare indicated as open.
Your new hyperlink has now been created.
Wise Owl’sHint
Different themes will show hyperlinks in different colours. For most themes, “used” hyperl inks will appear in a different colour to that used
for unused hyperlinks.
FrontPage puts the URL (the link information) in this box. This
shows that FrontPage is going to create a relative link (i.e. jump tothe file called hobbies_&_interests.htm in the same folder as thecurrent page) rather than the less useful absolute one (jump tohobbies_&_interests.htm in f:\training\ … \trainingsite ).
8/8/2019 FrontPage 2003 - Course Aware and User Guide
To create a hyperlink that enables your viewers to e-mail you:
62) Type some meaningful text (e.g. "Click to contact the Author"), then select this text.
63) From the menu select: Insert Hyperlink...
64) Complete the dialog box which appear as shown, then select OK .
65) When a reader clicks on this link while viewing your page on the web, his/her e-mailsoftware will run and open a "new e-mail message" window for him/her to contact you.
An interactive button is another type of link in the form of an animated button. It actuallyconsist of three separate images, which are saved when you save the page.
To create a hover button:
66) As always, position your cursor where you want your interactive button to go.
67) From the menu select: Insert Interactive Button…
68) Complete the dialog box which appears as shown below, then select OK .
When someone hovers their mouse button over this hover button , itglows and changes colour.
Wise Owl’sHint
In some browsers (for example, some versions of Netscape) when youreturn to a web page you have previously viewed hover buttons canappear to vanish! In this case you should click on the Refresh button toredisplay them.
You can see a preview of the button here.
Choose the styleof button from theextensive list.
Type in the textfor the buttonhere.The link can be to
another page, anemail address or a
bookmark.
Use the font andimage tabs tochange theappearance of the
button.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Previously we used layout tables to create a structure for a web page. Simple tables can also beused in FrontPage; these lack the flexibility of layout tables but are still useful.
8.1 Creating a TableThere are three different ways to create a table in FrontPage.
Inserting a Table from the Menu
This method allows you to specify other options at the same time:
78) From the menu select:Table Insert Table...
79) Complete the dialog boxwhich appears as shown, then select
OK .
80) FrontPage will insert atable at the cursor position.
The reason tables are so useful for web sites is that they are largelybrowser and screen independent - what looks acceptable on a 14" monitor running Netscape 3 will also look more or less the same on a17" monitor running Internet Explorer 5.
Choose to
disable layouttools.
Enter the number of rows andcolumns.
Options below this point dealwith formatting, which we willcover later in this chapter.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
81) From the menu select: View Toolbars Tables to display the tables toolbar.
82) Choose to draw a table: Tool Top Menu
Table Draw Table
83) The mouse pointer will change into a pencil. Follow the steps shown below:
84) The mouse pointer will still look like a pencil. To draw in your columns and rows,click and drag to form a line from two opposite edges of the table.
85) Repeat the above steps for the remainder of your lines, then click the icon againto end “drawing” mode (or press Esc ).
Clicking on any cell in the table will position the cursor in that cell. Alternatively, once you arein the table, you might find that pressing the keys below is an easier way of moving around:
Keys What they do
or Moves to the end/start of a cell character bycharacter, then jumps to the next/previous cell.
or Moves to the previous or next row
Moves to the next cell to the right (or to the firstcell in the next row if there is none)
+ Moves to the next cell to the left (or to the last cellin the previous row if there is none)
Adding Text
90) Position the cursor in the cell where you want your text to be.
Those with good mouse skills might like to try the method shown below for selecting a single cell - it doesn't work for the top row of a table:
FrontPage highlights the cellto show that it is selected.
When this "North-East" arrowappears beside a cell, you can click toselect the cell.
You can click down and across cells in a block to select them. Alternatively, click onthe top left cell, then with the keyheld down click on the bottom right cell.
You can select non-adjacent cells like this byselecting the first block, then holding down the
Ctrl key while you select subsequent blocks.
Wise Owl’sHint
8/8/2019 FrontPage 2003 - Course Aware and User Guide
To select a whole table, click on any cell within the table then from the menu select: TableSelect Table . Alternatively, you can double-click to the left of the table, or use the quick tagselector.
a) Place the cursor over the border youwish to move until the pointer changesto a two-headed arrow.
b) Click and drag the border until the dotted line is whereyou want the border to be.
a) Place the cursor over the border you wish tomove until the pointer changes to a two-headedarrow.
Click and drag the border until thedotted line is where you want the
border to be.
Wise Owl’sHint
Unless formatted manually, columns and rows are always distributed
evenly within a table.
Wise Owl’sHint
You can also try double-clicking with the mouse at step (a) above - thiswill automatically change the width of the column to be exactly wideenough to accommodate its widest entry. This method works for all but the right-most column.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Sizing Allowing for Different Browsers/Screen Sizes
The table below looks sensible using Internet Explorer on a 17" monitor at 1024 x 768 pixelsresolution:
However, what will happen to the table if we make the browser window smaller or use adifferent screen or browser? The answer comes from the column height and row width settings:
Here are the settings for the table shown above, with what they mean:
By centrally aligning thetable, we ensure that itlooks sensible.
a) Select the row or column whosewidth/height you want to determineand right click with the mouse.
b) Select this option to displayits properties.
Because the row heights are measured in pixels, readers using smaller screens may haveto scroll down to see the whole of your table.
Because the widths of your columns are measured as a percentage of the table's width (which may or may not be100% of the screen), the column widths will appear smaller on smaller screens.
Wise Owl’sHint
The simple way to avoid problems is to ensure that in every table that you create, columns are measured as a percentage of the total tablewidth, and the sum of these percentages is not more than 100%.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Choose from this dropdown list of alignmentoptions.
Specify the table width as a percentage of the totalscreen width – although12% (as here) is a bit onthe small side!
Wise Owl’sHint
Choosing centrally aligned tables, and making sure that their width (as
specified in the above dialog box) does not exceed 100% of the screen, should mean that your tables look sensible using most browsers and most screen sizes.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Here the table background colour is set to grey, but each cell's background colour has been set to white.
Here a caveman forms the table's background image – cells have a white background colour.
Click on this button tochoose a picture to formyour table's background -
but notice that "busy" pictures like the cavemanshown above make for messy-looking tables.
Choose the background colour for your table. In this example if the caveman image is transparent, the background colour for theimage will be set to be white.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Here the table has a grey background, butthe six cells have a white background.
Click on this button to choose a picture to form the backgroundfor the selected cell(s), but notethat having different pictures for different cells can look messy!
Choose the background colour for the selected cells. In this example the selected cell(s) will havea picture of a caveman as their background, and this picture will have a white background.
Alternatively, set any light and dark border colours to create a 3-dimensional effect for the selectedcells (this is explained in more detailin the preceding pages).
To set the border colour for the selectedcell(s), choose a colour here.
Wise Owl’sHint
The options for formatting layout cells are more limited - for example youcannot set a background picture. To format a layout cell, click in the cell,
from the menu select Table Cell Formatting… and then use the task pane to set border and background colours.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
HTML ( HyperText Markup Language ) is the language in which web sites are written (FrontPage just makes it easier to do this). Here is a sample:
Viewing Other People’s HTML
The great thing about HTML is that it’s publicly viewable. Go to any web site in InternetExplorer or Netscape and click with the right mouse button, and you’ll be able to view itscontents:
This shows how to view the contents of the Googleweb site in IE5 – like many pages on commercial web sites, this HTML also contains embedded
JavaScript, a progamming language which makes
sites dynamic
Wise Owl’sHint
HTML is a language with many keywords, and this chapter doesn’t attempt to give a reference to more than a few of them. If you want tobecome a serious HTML programmer, a good first move is to buy an
HTML reference book.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
The basis of an HTML document is the tag – the format is:
<formatting code> text </formatting code>
where formatting code can be any valid HTML code. For example, this piece of HTML woulddisplay “Wise Owl” in bold:
<b>Wise Owl</b>
Some general principles of HTML documents:
Principle Details
Spaces are ignored Any space that you type into HTML is ignored. To get aspace to show up, you must type it in as a non-breakingspace – “ ”
Blank lines areignored
Likewise, any blank lines you put into HTML by pressingwill be ignored. If you do want to put a blank line in,
put <p> </p> (i.e a paragraph with a blank spacein), to ensure it doesn’t get ignored.
All tags have to start and end
Every tag has to begin with a <> tag and end with a </> tag,apart from paragraph tags like <p> (which you can use inisolation to generate a new paragraph).
Attributes
Most of the standard HTML tags have a pre-defined set of attributes, controlling how they work.For example, the <p> tag has an attribute controlling whether the paragraph is to be left, centreor right-justified.
This section describes some common tags and their associated attributes. This is by no means anexhaustive list!
Title <title>
The title tag only appears in the <head> section and specifies the text to appear in the browserstitle bar .
HTML Web Preview<head><title> HOME PAGE </title>
</head>
Comment <!-- -->
Comments are used for annotation and are never displayed in the browser window - in fact browsers completely ignore anything inside a comment tag. Comments are used to break your HTML into logical ‘chunks’.
HTML Web Preview<!-- Get database records --> No preview - comments do not appear!
Note that the comment has no closing tag ( </!-- --> does not exist!).
Headers <H1>, <H2>, … , <H6>
Headers are predefined text styles. <H1> being the largest and <H6> being the smallest.
HTML Web Preview
<H1> Welcome to the Pets DataBase! </H1><H2> Please select an option </H2>
Paragraph <p>
The paragraph tag forces two carriage returns (pressing ENTER on the keyboard twice).Compare the second example which uses no tags at all.
HTML Web Preview
<p> The cat sat on the mat </p>
<p> The dog sat on the cat </p>
The cat sat on the mat
The dog sat on the cat
The cat sat on the mat.The dog sat on the cat The cat sat on the mat.The dog sat on the cat
Image tags are used to insert pictures. Note the src=“filename” attribute .
HTML Web Preview
<img src= "owl.bmp" >
HyperLinks <a>
Hyperlink tags are used to create clickable areas on your web pages.
HTML Web PreviewPlease click<a href= "mailto:[email protected]" >here <a>to contact us.
Please click here to contact us.
Bold <B>, Italic <I> and Underline <U>
As you can probably guess, these tags apply formatting.
HTML Web Preview<p> The <b> cat </b> <i> sat </i> on the<u> mat </u>.</p>
The cat sat on the mat.
Align=“Alignment” (attribute)
Again you can probably guess the purpose of the align attribute . Notice it is placed inside the<p> tag. Replace “Alignment” with “Center”, “Left”, “Right” or “Justify”
HTML Web Preview<p align= "right" >The cat sat on the
mat .</p>
The cat sat on the mat.
Alt <alt> (attribute)
This tag displays alternate text for images when you hold the mouse cursor over it.
HTML Web Preview<p><img alt= "Owl" src= "owl.bmp" ></p>
In HTML every table must be a rectangular grid of cells. To ensure that this is the case, HTMLuses the RowSpan and ColSpan attributes to fill in extra spaces, as in the above example:
The Body section contains the contents of the page, including alltext and images to be displayed
The Head section contains the title of the page, whether it wasbuilt in FrontPage, whether it uses themes or shared borders, etc.
<HTML><HEAD>
… other header information goes here …
<Title> Title goes here </Title>
</HEAD>
<Body>
… content of page goes here …
</Body></HTML>
The page was generated usingFrontPage 2003 (or FrontPage6.0, as it is known internally).
The page uses the Expedition theme (referred to here by itsinternal name).
This page uses top (t) and left (l) shared borders.
Wise Owl’sHint
The main thing that you need to know about FrontPage headers is that you should avoid editing them (with the exception of the title) – it mayhave unpredictable results!
8/8/2019 FrontPage 2003 - Course Aware and User Guide
The main table is set at 621 pixels wide, to ensure that itwill be visible in its entirety in a predictable way on most
browsers. This ensures maximum compatibility, but looksstrange on large resolution screens.
This search form actually consists of six differentrows, including spacer rows. As commonlyhappens in big web sites, single pixel transparentimages are used to fill spacer rows to ensure that
they are not ignored by browsers.
This column of options consistsof more nested tables – these arenot shown here to avoidcomplicating the diagram!
This is a cell spanning two
columns of the table to whichit belongs.
Another table is nested within the bottom row of the screen.
This consists of a set of nestedtables (not shown here).
Wise Owl’sHint
The reason for using tables to construct pages is that they are more or less browser independent (an HTML table will look the same in Internet
Explorer and Netscape) and screen independent (provided you use percentage widths, tables will look sensible on all screens).
8/8/2019 FrontPage 2003 - Course Aware and User Guide
Style sheets are a (better) alternative to using themes – they work in the same way as for Microsoft Word, determining the default way in which various parts of a site appear.
11.1 Overview of Style SheetsThe diagram below shows the same page with and without styles applied:
The style sheet which effected the formatting changes shown above is as follows:
A page without styles applied The same page with body text set to Comic Sans font, a yellow background and table cell formats changed
This shows that body text (i.e. mostnormal text) will appear in Comic Sansfont (or the closest to it possible) with awhite background.
This shows that table cells will be displayed with white lettering on a yellow background.
Wise Owl’sHint
Before deciding to use style sheets, do a little test to make sure that all your web site users will be able to view them correctly (particularly non- Internet Explorer users).
Wise Owl’sHint
The above diagram shows that to use style sheets effectively you need to
understand HTML tags. You don’t, however, need to learn the codes for the different colours – the style sheet editor will fill these in for you.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
You can have a number of different style sheets, although if you want to apply the same look-and-feel throughout your site it is a good idea only to have one. To create this style sheet:
125) From the menu select: File New
126) Select More page templates from the task pane.
127) Complete the dialog box which appears as shown below, then select OK .
128) See the following page for what to do next!
129) When you have finished setting styles,choose to save your style sheet:
Tool Top Menu Keyboard
File Save As... Ctrl + S
130) The style sheet will appear in the FrontPage file list (all style sheets have a CSSextension, standing for Cascading Style Sheet ):
a) Select this option to apply thestyle sheet to all the pages inyour web site.
b) Click here to choose which stylesheet you want to link to each page in your web site.
c) Select a style sheet.
d) SelectOK
.
This line shows that this page uses the caveman.css stylesheet. If the page also uses a theme the style sheet settingswill override the theme settings where they conflict.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
You can also right click on any individual spelling mistake (shown withwavy red underlining) to correct it, add it to the dictionary or ignore it:
Select this button to check thewhole of your web site.
Double-click on each mistaketo choose what to do about it
– it’s fairly intuitive to work out what to do!
Here the correct option is shown,so you could just select it.
Wise Owl’sHint
You may have been editing your final web site directly, in which case youwon’t need to publish it – however, this will mean that anyone will havebeen able to view your development work in progress.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
A good place to start iswith the default SiteSummary report,which summarises allthe pages in your website.
The menu options shown list items as follows:
Report What it shows
Unlinked Files Files that can’t be reached by
following links from the home page.
Slow Pages Shows all files exceeding thedownload time set in ToolsOptions... under the ReportsView tab. The default is set to 30seconds download at 28 kbpsdownload speed, but you canchange this.
Broken Hyperlinks Lists files which have hyperlinkswhich don’t go anywhere.
Component Errors Lists files containing “broken”FrontPage components. For example, you might havespecified to include one pagewithin another, when theincluded page no longer exists.
Wise Owl’sHint
Note that you can double-click on any row of the site summary report to see its detail. For example, the site summary report above shows 4unlinked files – double-click on this row to see where they are.
8/8/2019 FrontPage 2003 - Course Aware and User Guide
After correcting spelling and other errors, you are ready to publish your web site to the world!The first step is to switch to the Remote Web Site view.
Here are some of the main problems you may have when publishing a web site:
Problem Solution
FrontPage won’t give you access tothe web site to which you want to
publish
Contact the server administrator or web sitehost for the correct name and password, and toensure that you have access to publish to thisserver.
Certain features of FrontPage don’t work, or your site looks nothing like it did in FrontPage.
The server to which you are publishing doesn’tsupport FrontPage components. If it is aWindows server, contact the server administrator to see if it is possible to install
Active server pages won’t work. You have published to a disk-based (notserver-based) web, or the server to which youare publishing isn’t running IIS. Contact theserver administrator to ask if IIS can beinstalled.
Your web site hasn’t changed Have you refreshed the page?