Using Mozilla Firefox

Firefox is an excellent web browser and I think it is a must have for anyone who is serious about web development. This tutorial will walk you through the process of installing Firefox, basic usage, and the installation of extensions and themes.

"Firefox is a free, open-source web browser for Windows, Linux and MacOS X and is based on the Mozilla codebase. It is small, fast and easy to use, and offers many advantages over Internet Explorer, such as the ability to block pop-up windows." Firefox help: Firefox FAQ

Downloading and Installing Firefox

You can download Firefox by visiting the Mozilla web site. It's a free download and the file is only 4.7 mb. The software installation is straightforward, once you have downloaded the software locate the file called Firefox Setup 1.0.exe. Double click the Firefox Setup 1.0.exe installer file to start the install. Once the installation process has begun, follow these eight easy steps:

1. At the opening screen close any other opened applications and click next
2. Accept the terms of the License Agreement and click next
3. Select Custom install and click next (if you do not want to change the installation directory select standard)
4. Keep the default file location and click next
5. Check the Developer Tools and click next (if you only plan to use Firefox to surf the web you can bypass this step)
6. Select the shortcut locations that you would like installed and click next
7. Click next at the summary screen
8. Click Finish to complete the installation and launch Firefox

Once Firefox starts you will be prompted to import your bookmarks from Internet Explorer; I would recommend importing so your bookmarks are available in Firefox. You can import your bookmarks at a later date by select File > Import.

Using Firefox

The first time you use Firefox you will be prompted to make Firefox your default browser. I would recommend saying no to this prompt until you decide whether you like the program enough that you want to use it as your primary web browser. You can always make Firefox your default browser by clicking Tools > Options > General and then clicking the Check Now button in the Default Browser section of the General Options.
Firefox will launch and the Firefox/Google Start page will display. This is the default start page; you can change this page to any start page you like by clicking Tools > Options > General > Home Page. In the classroom, please keep the Firefox/Google Start page as the default.

The Interface

You will find that using Firefox is very easy. The interface has a few icons that you are probably already familiar with.

You can turn on text labels on the toolbars by right-clicking a toolbar and selecting Customize. At the bottom of the dialog box you should see a drop down list next to the word Show. Click the drop down list select Icons and Text. The default display is Icons.

Searching with Firefox

One of the really cool Firefox built-in features is the search box. Notice the small arrow next to the in the search box. Click the arrow and you can select different search engines. You can even lookup a word at dictionary.com. To use the search box, select the search engine you want to use. Type the term that you want to search for and press enter. From this menu you can also add your favorite search engine by selecting Add Engines from the drop down list.

Blocking Popups

Firefox also has built in ad blocker software. Periodically you may see this bar appear as you're browsing the web:

If you click anywhere on the bar when it appears, a menu will appear. You can then customize the pop-up blocker to meet your needs.

Tabbed Browsing

From the Google/Firefox start page, right-click the Firefox Help and Add-ons link. A menu will appear. This menu contains several options. You can open the link in a new window or open the link in a new tab. Tabbed browsing saves space on the taskbar. Instead of having multiple browser icons on the taskbar only one will appear. You can also bookmark links, save links, send links via e-mail, copy the link location and check the properties of a link from this menu. Lets take a look at tabbed browsing, select Open Link in New Tab from the menu.
After selecting Open Link in New Tab it may seem as if nothing has happened. Notice that you now have two tabs (Mozilla Firefox Start Page and Firefox Central) just above the Mozilla logo (these tabs are below the program toolbars).

You can switch to the Firefox Central page by clicking the Firefox Central tab. After clicking the tab the Firefox Central page should now open.
If you look at the taskbar you should only have one Firefox icon . When you use Internet Explorer (IE) you will have multiple occurrences of IE icons on your taskbar. Here is a screen capture of my taskbar with several web pages open in IE.

Multiple IE icons can become rather annoying if you're working with a lot of programs. Notice that Firefox only has one icon displaying even though I have multiple web pages open.
If you right click any tab you will have a variety of menu options including the option to close the current tab or close all other tabs. Pretty cool!
You can find out more about tabbed browsing at "An introduction to Mozilla Firefox, part 2"

Accessing Additional Help

I don't think I need to spend too much time on the basics; the software is very intuitive. Start using the program and exploring the menus and you will be experts in no time. You can also visit the Tips and Tricks, Mouse Shortcuts, and Keyboard Shortcuts pages to learn more about Firefox features. You can press F1 while in Firefox to access the Help System.

Downloading and Installing Extensions

One of the great things about Firefox is the ability to customize and extend the browser to suit your needs. Extensions are being developed to add features to the program regularly. Some of these extensions are real time savers for web developers.

"Extensions are small add-ons that add new functionality to Firefox. They can add anything from a toolbar button to a completely new feature. They allow the browser to be customized to fit the personal needs of each user if they need additional features, while keeping Firefox small to download." Mozilla Update Page

Extensions are easy to install, here is the process for installing extensions:
Make sure that you have the Firefox Central tab selected (we opened this page earlier in the tutorial). In the upper left-hand corner of the web page you should see the Enhancing Firefox section. Click the link that says Make it even better with extensions. After clicking this link you may receive a security warning, click OK to the security warning. The Mozilla update page will display. Oh the goodies that are available on this page!

On the left-hand side of the page you should see a categories list. Extensions are categorized so they can be found easily. In the middle of the page you should also see the Top Rated and Most Recently Added extensions.
For the purpose of this tutorial we are going to download and install a Developer Tool. Click the Developer Tools link under Categories.
This will display the Firefox Developer Extensions section. Scroll down until you locate the extension (note: there may be new version number by the time you read this tutorial). The Web Developer extension, created by Chris Pederick, is a fantastic set of tools for testing and editing web pages. I've only had this toolbar for a couple of weeks and it's already saved me hours.
You should notice three icons. Most extensions work with the latest version of Firefox (1.0 at the time of this writing), but a few do not. Check the works with version number to make sure that the extension will work with your version of Firefox. There is also a link to the extension author's home page. Usually the home page will include detailed instructions on how to use the extension. I also found that this particular extension has an update on the author's home page. Finally, click Install to actually install the extension.

The Software Installation dialog box will appear. It takes a couple of seconds on a high speed connection for most extensions to download.
Once the extension has downloaded and it's ready to be installed you can click the Install Now button at the bottom of the dialog box. The Install Now button will not be available until the extension has finished installing.


After clicking Install Now a new dialog box will appear. The Extensions dialog box displays all of the installed extensions. The image to the right is my Extensions dialog box. Notice that the second item is the Web Developer 0.8 extension and it indicates that Firefox must be restarted to complete the installation.
To complete the installation, close all open Firefox windows and restart FireFox (you should have an icon on your desktop or in the start menu).
When Firefox restarts the web developer toolbar should be available.

An Overview of the Web Developer Toolbar

I have included a screen capture of the web developer toolbar below. This is the greatest browser add-on program I have ever seen. It's absolutely fantastic!

Here is a quick overview of some of the tools. A link to the complete list of the extension features is at the end of this section.

Disable

Disable cookies, images, java applets, javascripts, styles (CSS), and more.

CSS

Try clicking CSS > Edit Styles. Your browser window will split vertically and the style sheet(s) used on the page you are currently viewing will display. This is so convenient!

Forms

Enable auto completion, display form details, and other useful tools.

Images

Turn on and off images, highlight images that don't have ALT tags or empty tags, display image paths, display image dimensions, find broken images, and more. This is terrific!

Information

Here you can display all kinds of valuable information about a web page. ID and class information and speed reports are just a couple of the available items.

Miscellaneous

Allows you to quickly clear your cache, mark links as visited or unvisited (great for checking link colors), show comments, and zoom in and out on a page.

Outline

Outline features are awesome. Here you can outline block elements (<p><div><h1> and other block elements), frames and table cells. This is great for trying to figure out why a div won't position properly!

Resize

Allows you to quickly resize your browser so you can check your web page at different resolutions. You can add your own dimensions to this menu.

Validation

What a savior! Quickly validate HTML/XHTML, CSS, links, and accessibility. This is fabulous!

View Source

Allows you to quickly view the source code for a web page. If you download the HTML Validator extension (also available in the developer tools) the page source code will include HTML errors and warnings with highlights. Go get the HTML Validator with Tidy!

Options

Here you can reset the web page and set different options for the toolbar. The toolbar is fully customizable.

You can view a full list of features at Chris Pederick's web site.
If you do not like the toolbar taking up browser space you can turn it off by clicking View > Toolbars > Web Developer Toolbar. You can still access the web developer extension features from the Tools menu, click Tools > Web Developer. All installed extensions can be accessed from the Tools menu.
As I'm sure you can see this is a great tool. You can download the updated version of this extension at http://www.chrispederick.com/work/firefox/webdeveloper/.

Updating Extensions

You can check to see if there is an update to your favorite extension by clicking Tools > Extensions. Click the extension you want to check for updates and click Update and click Finish when prompted.

Additional Extensions

You may download and install additional extensions in the classroom from Mozilla's web site. Many of these extensions are found in the Web Developer Tools section. You can also use the search box at the top of the Extensions page to find the extension you want to install.
Here are a few extensions that I would recommend:

Colorzilla

Adds a color picker to the Firefox status bar (lower left-hand corner above the Start button). This color picker allows you to determine hex and rgb values for a color used on a web page.

HTML Validator with Tidy

Turns the View Page Source option into an HTML validator. Great!

JavaScript Debugger

Adds a JavaScript debugger to Firefox.

Edit CSS

Edit CSS code in the Firefox sidebar.

View Source With

Allows you to select an external editor to view your source code with.

Sage

Sage is an RSS/Atom feed aggregator. If you have a lot of sites/blogs that you like to visit often, a feed reader allows you to quickly see which sites have new content. You can learn more about Sage and how to use it in this short Sage tutorial.

 

Google Preview

Inserts web site previews in Google and Yahoo search results.

Google Toolbar

Adds a Google Toolbar much like the Google toolbar for Internet Explorer.

 

Paste and Go

Copy a URL and then you can right click the address bar and select Paste and Go instead of just paste.

Dictionary Search

Looks up the definition of a selected word.

Web Developer Tools

This is the extension mentioned above. This is a direct link to Chris' site so you can download the current version.

Open Link in Internet Explorer

Allows the surfer to right click on a link and open the page in Internet Explorer.

FireFTP

Adds a free FTP program to Firefox. I have added more detailed information on FTP since I seem to be getting a lot of visitors looking for info on FTP and Firefox. First, you can download and install it from this page.

 

Once you have installed FireFTP and restarted FireFox you can access it from the Tools menu. Click Tools > FireFTP. A new FireFTP tab will open. input your host address, login name and password. Click Connect.

Once you connect, you can select the folder that you want to upload from (left-hand side of the ftp screen). Then select the folder that you want to upload to (right-hand side of the ftp screen).
You can then either drag and drop your files from your local drive (left-hand side) to the remote server (right-hand side) or you can use the download and upload buttons in the center of the screen.
This FTP program works just like most of the common FTP programs. If you have never used an FTP program, you may want to review one of my more detailed FTP tutorials. I have written one for WS_FTP and Dreamweaver. Either of these tutorials should give you a better foundation in using an FTP program since these three programs are very similar. You may also want to visit the developer's page.
These are just a few of the extensions that I have been using. There are a lot more extensions available at the Mozilla web site. Take some time to browse around the Mozilla Update page.

Themes

In addition to extensions, you may also install themes. Themes allow you to change the appearance (buttons and icons) of Firefox. Theme installation works the same as extension installation.

Installing Plug-ins and Extensions from 3rd Party Web Sites

You will probably need to install some plug-ins such as Flash, RealPlayer, and QuickTime. These plug-ins are not installed automatically. Instead, when you visit a web page that needs a plug-in a light yellow bar will appear just below the page tabs. Here is an example:

You have probably noticed that the yellow bar appears when Firefox blocks software installation or pop-up windows. I find this warning box far more friendly and easier to understand than the typical Internet Explorer error message. If you would prefer to disable these features you can click Tools > Options > Web Features. In the Web Features section you can disable Pop-up blocking and allow software to be installed automatically. For more information on these features press F1 to access the Firefox help system.
Back to installing. In order to install the plug-in or a 3rd party extension you must click the Edit Options button on the Security Warning. The Allowed Sites dialog box will appear. Click Allow and then click OK. You may need to click the link again or refresh the page to actually install your plug-in or third party extension.
Visit the Firefox help site to learn more about these features.
Integrating Firefox with Dreamweaver
You will probably want to check pages that you create with Dreamweaver in Firefox. To do this open Dreamweaver and select File > Preview in Browser > Edit Browser List. In the Browser Preferences dialog box, click the + (plus) button next to browsers . Type Firefox in the Name box and then click Browse. You need to locate the file that starts Firefox so double click the Mozilla Firefox folder and then click once on the firefox.exe icon and click Open. Select the Secondary browser check box. By selecting the secondary browser box you will be able to press the shortcut CTRL+F12 in Dreamweaver when you want to view your pages in Firefox.
The screen capture below shows what the Add Browser dialog box should look like when you have completed the Add Browser setup dialog box. if your screen matches the screen below click OK and then click OK again to exit the preferences.

I will periodically add tips to this page as I discover cool new Firefox features. If you come across extensions, themes, or tips and tricks that I should add to the page please let me know. If you are looking for more detailed information on operating Firefox, visit their web site or you can order the Guide Book that they have written. Nidelven IT's step-by-step tutorial is also an excellent resource. Firefox also has a very active forum where you might be able to pick up some very handy tips and tricks.

Posted in: All