FrontPage Tutorial - Starting on the Web

[DTP Articles]
[Vector Articles]
[Bitmap Articles]
[Web Articles]
[3D Articles]

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Adobe-Macromedia]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Illustrator_Plug-ins]
[RGB to CMYK]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[BMP/TIFF/JPEG/GIF]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Fast track onto the Web with FrontPage 2000

Using FrontPage 2000 to get a head start onto the Web.

FrontPage 2000 navigation view 

With all the applications in the Office 2000 suite fully Web-enabled and able to write to HTML as a native file format you might wonder why you would need FrontPage 2000 at all. In fact there's a huge difference between designing for paper and designing for the screen and an even bigger gulf between designing standalone documents and a fully navigable site. If you're wanting to tap the huge Internet audience for your new product launch, for example, it's no good just lobbing up an HTML-version of your Word press release and expecting the orders to flood in. Instead you're going to have to produce an attractive, interactive, well-structured site that shows off your business in the best possible light.

This is where FrontPage 2000 comes in. Microsoft recognises that most businesses can't afford dedicated Webmasters so usability and productivity are paramount. To help you get off to a flying start FrontPage includes eight in-depth wizards. The Corporate Presence wizard is ideal for our purposes and walks through the set-up process by asking questions, such as which pages you want to include and how you want data to be handled, and then asks you to fill in email and address details. When you click Finish, the wizard then creates and formats all the desired pages including seriously advanced components such as an automatically generated table of contents, reply form and search page.

FrontPage 2000 setup wizard

FrontPage 2000 offers in-depth wizards to walk you through the process of setting up typical web sites.

By clicking on the Navigation icon in the Views pane down the left-hand side of the FrontPage 2000 screen you can then see the structure of your site as a tree-based flow diagram. More importantly, by right-clicking on the window background, you can add your own top level pages and then, by right clicking on the page icons, rename them to suit your own requirements and add all the child pages you need. Building up your customised structure in this way has a number of advantages one of which you'll immediately appreciate if you double-click on any page icon to go into Page view. Thanks to its use of automatically generated top and side navigation bars, whichever page you open, you'll find that it already has links to all your site's top level pages and to all your current page's child pages.

FrontPage 2000 navigation view

Using the Navigation view you can customise your site's structure visually.

In other words FrontPage has entirely taken care of the huge task of making the information on your site navigable and easily accessible, leaving you to concentrate on getting the information right. To help in the writing of your content FrontPage automatically adds suggestions such as to include a mission statement and company details on your home page. Even more helpful is the fact that, with shared Office-standard features including the background spell-check and thesaurus, adding and editing your own text within FrontPage 2000 is very similar to working within Word 2000. Alternatively, of course, you can always use Word itself to author longer sections of text and then import them. FrontPage automatically converts the DOC files to HTML and recreates all your Word formatting through embedded HTML tags.

FrontPage 2000 text handling

Thanks to FrontPage 2000's use of shared borders, navigation bars are automatically added to pages leaving you free to concentrate on the text.

Generally FrontPage 2000's visual environment is designed to protect you from having to deal with such HTML directly but, as you get more experienced, you can always use the HTML tab at the bottom of the Page window to view and edit the underlying HTML code. Looking at our imported press release, for example, shows how the Word document's heading formatting has been recreated as <FONT> tags. That's fine if all we want to do is simulate the Word document, but our code will be more flexible and efficient if we remove them. By returning to the Normal tab we can select all the text, choose the Format>Remove Formatting command and then apply true HTML <H> heading tags using the Formatting toolbar's Style dropdown list.

FrontPage 2000 HTML view

The Page view's HTML tab enables direct HTML editing.

Having sorted out the text the next job is to add any graphics. The production of Web images is a major field in its own right with many applications entirely dedicated to the task. For our purposes though, we don't need them as FrontPage 2000 has basic graphics capabilities of its own. In particular, for graphics such as scans and screenshots, FrontPage is able to import the necessary TIFFs and BMPs and convert them to the Web standard GIF and JPEG formats. Using the Picture Properties command it is also possible to resize the image precisely, to set up links where required, and to provide alternative text for those users browsing with graphics switched off. Using the Pictures toolbar you have further control over features such as contrast, brightness and transparency, while using the crop and resample commands you can ensure that download times are kept to the minimum.

FrontPage 2000 graphics handling

FrontPage 2000 can convert graphics to JPEG or GIF with basic control over image quality.

To further enhance the look of your pages you can now think seriously about their overall design. Thanks to the use of the FrontPage wizard for initial set-up, the site is already looking consistent and professional, but you aren't limited to the design you first chose. By calling up the Format>Themes command you can choose between 60 professional designs that change the look of everything from the background image through heading typeface to the appearance of navigation buttons across the entire site - and all with a single click! Even better, by selecting the active graphics option, you can automatically turn static navigation buttons into interactive Javascript-based rollovers. Advanced users can customise all options and also choose to apply themes through CSS.

FrontPage 2000 themes

Thanks to its template-based nature, the look and feel of the entire site can be automatically updated using FrontPage 2000's professionally designed themes.

The site is getting near completion so it's time to check that everything is working as expected. Whenever you are working on a page you can always hit the Preview tab at the bottom of the screen to get a clearer idea of what your page will look like and to check links. For a more thorough workout the Preview In Browser command will load your site into any previously installed browser. If you're running Office you're likely to be using Explorer yourself, but it's a good idea to check your site with Navigator too as you want to know exactly what all your potential browsers are going to see. You should also check FrontPage's Reports view of your site which, amongst other things, lists all broken hyperlinks, unlinked files and download-heavy pages.

FrontPage 2000 reports

The Report view highlights potential problems and weaknesses before the site is published to your server.

When you are completely happy with the site you're ready to post it so that anyone can access it. FrontPage 2000's Publish Web command enables you to upload all the necessary files to your ISP's Web server, assuming you have password-based access. Ideally you should ensure that your ISP supports the FrontPage Server Extensions as this makes the publishing process much easier. In particular it enables FrontPage to intelligently manage your site by comparing the server version to the one on your hard disk and only updating changed files. This means that if you move a file, for example, FrontPage will first update all links locally and then, when you publish the site, make the same changes on the server.

The Server Extensions are also crucial if you want to take advantage of FrontPage 2000's intelligent agent-based features such as reply forms, search forms and hit counters. With other packages such features usually require complicated CGI programming and depend on individual ISP support - the ability to search for text across an entire site, for example, is particularly rare. With FrontPage 2000 such advanced features all come as part of the package. All you have to do is select the Insert>Component or Insert>Form command and then customise where necessary.

With its combination of bolt-together features, from start-up wizards and automatic navigation bars through to design themes and intelligent components, FrontPage 2000 enables even occasional users to begin creating impressive sites immediately. While professional, day-in day-out Webmasters steeped in HTML coding would soon find Microsoft's hand-holding automated approach too restrictive, for the average user FrontPage 2000 undoubtedly offers both the easiest and the fastest track onto the Web.

FrontPage 2000 end results

The end result: a professional, consistent, interactive and easily navigable site that looks as if it must have taken weeks to design.

Tom Arah

Jan 2000


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.