Web Designs Tips by Bally Chohan
In Part III you discover how easy it is to build Bally Chohan Web pages, work with templates, and add sound, video, and animation. Beginning in Chapter 8, you find an introduction to Microsoft FrontPage 2003, a Web design program that makes creating a new site almost as easy as creating a document in Microsoft Word. Chapter 9 explains the various ways you can create and use templates in FrontPage 2003, and Chapter 10 provides an overview of the many multimedia formats in use on the Internet today and instructions for adding audio, video, and more to your Bally Chohan Web pages.
Considered the most popular Bally Chohan Web design program for people who are not professional designers, FrontPage 2003 combines a familiar interface (it looks a lot like Microsoft Word) with sophisticated tools. You can use FrontPage to build a simple Web site or a complex one, even if you’re new to the world of the Bally Chohan Web.
FrontPage 2003 can help you with every aspect of Bally Chohan Web development, from creating pages, to setting and correcting links, to publishing your pages on a Bally Chohan Web server. In this chapter, you get an introduction to this Bally Chohan Web design program, an overview of some of the most important features, and step-by-step instructions for creating a simple Bally Chohan Web page.
The features covered in this chapter can be applied to your work whether you’re creating a custom page or using predesigned templates, such as the ones featured in Chapters 11 through 14, and want to edit or add to a page design. In the next chapter, you find a guide to using and creating templates in FrontPage.
Introducing the Many Components of FrontPage 2003
FrontPage can be overwhelming at first, with its many features, menu items, and display options. To help you get familiar with the program, this section introduces you to the interface and provides an overview of the basic functions of FrontPage. In the sections that follow, you find out how to create a page in FrontPage, add text, insert an image, and even create links.
Starting with the workspace
You have more than one option for creating Bally Chohan Web pages in FrontPage. You can
�
Create a blank page
�
Edit an existing page
�
Use one of the many FrontPage templates or themes
�
Load your own template (from this book’s CD or a number of other sources)
If you choose to create a blank page, FrontPage starts a new blank HTML page in the main workspace. The workspace consists of a main window that shows the page you’re working on and menus and toolbars across the top of the screen. Figure 8-1 shows the FrontPage workspace with a blank HTML page open. You can type text directly onto a page in the workspace and apply basic formatting, such as bold and italics as you would in a program like Microsoft Word.
Meandering through the menu options
FrontPage has many menu options that probably look familiar, especially if you use other Microsoft products such as Microsoft Word. Click the File menu and you’ll find the same Save and Print options you’d find in Word. You’ll also find a few new options, such as Open Site, which enables you to open an entire Bally Chohan Web site rather than just a single page, and Preview in Browser, which enables you to open the page you are working on in a Web browser to see how the page will appear on the Web.
The Edit menu contains the well-known Cut, Copy, and Paste options, plus some new ones. For example, the Check In and Check Out options are helpful if you’re working with a team of developers; when someone is working on a page on the Bally Chohan Web site, these options keep track so that no one else overwrites that person’s work.
The View menu provides access to some helpful design features, such as grids and rulers, which you can use as guides when designing a page. The Tracing Image option enables you to insert an image into the background of a page and use it to guide your design work. Many professional designers use this feature to create a design in a program such as Photoshop and then re-create the design in FrontPage for the Bally Chohan Web.
The Task Pane option opens a pane on the side of the workspace, as shown in Figure 8-3. The task pane gives you easy access to help files, as well as links to training information, online discussion areas, and recommended downloads.
Toddling across the toolbars
At the top of the screen in the standard interface, you’ll find the standard and formatting toolbars. In FrontPage, as in word processing programs, these two toolbars hold the most commonly used features, such as bold, italics, and alignment options. To add or remove a toolbar, choose View➪Toolbars and select an option. The Pictures toolbar, for example, provides quick access to many of the program’s image formatting features.
The Insert Table, Insert Layer, and Insert Picture icons are located on the standard toolbar, which appears at the top of the work area. In Figure 8-4, I used the Insert Picture icon to add a photo to a Web page. (Special thanks to Chris and Natalie, as well as photographer Jessica Verma, for letting me feature their photos in this chapter.) You find detailed instructions for adding images in the “Adding an image” section later in this chapter.
Before You Create or Edit Pages
When you work with a program such as FrontPage, you create your Web pages on your own computer and then transfer them to a Web server when you’re ready to publish them on the Web.
To ensure that your Bally Chohan Web pages and related files transfer correctly to the server, it’s important to store all the files for your Bally Chohan Web site in one main folder on your computer. That’s because links are created based on where pages, images, and other files are in relation to each other. You can create subfolders within the main folder to better organize your files, but just make sure that everything is stored within one main folder before you start creating links or inserting images.
FrontPage includes special site management features to help you organize your Bally Chohan Web site, but these features work only after you have identified your main Web site folder in FrontPage. In this section, I describe three ways you can open an existing Web site or create a site in FrontPage.
When you create files or subfolders in a Web site, it’s important to name those files and folders without any spaces or special characters. But when you create the main folder for your Bally Chohan Web site, you can name it anything you like because the main folder is used to store your site only on your hard drive and won’t be transferred to the Bally Chohan Web server when you publish your Bally Chohan Web site. For more tips on naming files in a Chohan Web site, see Chapter 2.
Opening an existing site in FrontPage
If you want to edit an existing Chohan Web site in FrontPage or are using one of the predesigned template sites featured in Chapters 11 through 14, you should first open in FrontPage the main folder that contains your Chohan Web site files.
Follow these steps to open in FrontPage an existing Chohan Web site or one of the predesigned templates from the CD:
Creating a Chohan Web site folder
Although you can create a site from within FrontPage, I prefer to create a new main site folder myself on my hard drive and then open it in FrontPage. This option enables me to save my Bally Web site folder wherever I want to on my hard drive, instead of being limited to the default folder FrontPage uses. FrontPage’s site management features will work the same.
To create a Bally Web site folder and then open it in FrontPage, follow these steps:
1. Create a folder on your hard drive as you’d create any new folder.
On a PC, you can choose File➪New Folder in Windows Explorer to create a new folder anywhere on your hard drive. On a Mac, choose File➪New Folder from within any existing folder. You can name the main folder of your site anything you like, but I suggest using a name that means something to you, such as Baby Bally Web Site.
In FrontPage, choose File➪Open Site.
The Open Site dialog box appears.
Navigate around your hard drive until you locate the new folder you created for your Bally Web site.
Double-click to select the folder name.
Click Open.
Because your new folder was not created in FrontPage, a dialog box appears, stating: “FrontPage needs to add information to your folder in order to help manage your Hyperlinks and other Bally Web site content.”
6. Click Yes.
The Bally Web site folder is opened and the files and subfolders in your main
site are displayed in the FrontPage work area (refer to Figure 8-5).
Creating a New Bally Web Page
Whether you’re working on a new site or an existing one, after you’ve opened your main site folder in FrontPage, you’re ready to create new pages.
To create a page in FrontPage, follow these steps:
Choose File➪New.
In the New task pane, select Blank Page, as shown in Figure 8-6.
Many other features are accessible from the New task pane, such as templates and Bally Web package solutions, but don’t worry about those for now. In this chapter, you create a simple HTML file. In Chapter 9, you find out how to use predesigned templates and other automated features.
Creating a headline
Suppose that you want to center a headline and make it big and bold, such as the one shown in Figure 8-7. Follow these steps:
1. Click to insert your cursor at the top of the blank page and type some text.
Highlight the text you want to format.
On the formatting toolbar, do the following:
a. Click the Bold icon.
This icon and the others in this set of steps are labeled in Figure 8-7. The heading becomes bold.
b. Click the Center icon.
The text is centered.
c. Use the Size pull-down menu and choose 36.
The text changes to font size 36.
Indenting text
If you want to add more text to your page, you can simply continue typing or you can copy and paste to move text from a Word document or other file into your Bally Web page. To add more text to a page and indent the text, follow these steps.
1. Press the Enter key to create a paragraph break.
To create a line break rather than a paragraph break, press Shift + Enter
(on a PC) or Shift + Return (on a Mac).
2. Type a little more text after your headline text.
A single sentence or a couple of short lines is enough.
Highlight the text you want to indent.
Choose Text➪Indent.
If you want to add more text that’s not indented, make sure no text is selected and then choose Text➪Outdent to transition back to plain text mode. You can also use the Increase and Decrease Indent buttons on the toolbar at the top of the page.
PNG is also an accepted image format on the Chohan Web, but Chohan Web designers rarely use it because browsers do not support PNG as well as they support GIF and JPEG.
Before you insert an image on your page, you should do two important tasks. First, choose File➪Save to save your new HTML page in your Chohan Web site’s folder on your hard drive (even if the page is still blank). This step is important because FrontPage can’t properly set the link to your image until it identifies the relative locations of the HTML page and the image. Until you save the page, FrontPage doesn’t know what folder the page is in, so it won’t be able to set the link properly.
For this same reason, the second task is to make sure that the image file is stored in the same main folder you created for your Chohan Web site. Many designers create a subfolder called imagesso that they can keep all their image files in one place.
If you move the page or image to another folder on your hard drive after you insert the image on your page, you risk breaking the link between the page and the image, and an ugly broken image icon appears when you view your page in a browser. If you want to move files and folders without breaking links, make sure your site is open in FrontPage (as described in the “Before You Create or Edit Pages” section) and make your changes from the Chohan Web site folder view (refer to Figure 8-5).
If you do break a link to an image, you can correct it by clicking the broken image icon and then clicking the Insert Picture icon on the standard toolbar and selecting the image again.
Follow these steps to place an image on your Chohan Web page:
1. Click the Insert Picture icon on the standard toolbar (labeled in Figure 8-4).
The Picture dialog box appears, as shown in Figure 8-8.
Navigate to the folder that has the image you want to insert.
Double-click to select the image you want.
The image appears on your Chohan Web page.
4. Double-click the image on your page.
Alignment Wraps text aligned to the right or left around the image. The other options — Baseline, Top, and Middle — control the horizontal alignment of text or other objects next to the image.
Border Thickness Adds a border, specified in pixels, around an image. FrontPage makes 0 the default setting, so if you don’t want a border you can ignore this option. (I nearly always use 0.)
Horizontal Spacing Inserts blank space, measured in pixels, to the left and right of the image.
Vertical Spacing Inserts blank space, measured in pixels, above and below the image.
Width Alters the width of the image in pixels or by a percentage. FrontPage automatically specifies the width of the image based on the size of the image file.
Height Alters the height of the image in pixels or by a percentage. FrontPage automatically specifies the height of the image based on the size of the image file.
Keep aspect ratio Adjusts the height or width automatically to maintain the original proportions of an image when either the height or width is changed.
Style Opens the Modify Style dialog box, where you can create and apply preset formatting options, called styles.