<the web shop>
Tutorials

 

Web Properties
Templates
Component Designer
Rollover Buttons
HTML Text
Object Linking
Layout
Saving Your Page
Layout
Adding Text
Slicing Our Page
Slice Tool
Swap Image Effect
Layout
Adding a Logo and Text
Pop Up Menu
Finishing Up
 
 

Opening a New Web Page

 

To create a new web page in PI, go to the FILE menu > New > Web Page. You will get a pop up box similar to the one below.

This is a familiar looking window, similar to the new image window, but with less options and more web specific settings. If you click on the Detail button, you would get even more web options, but we'll cover those a bit later. For now, here's what these settings mean.

  • Title: Here you can give your web page a title. This title will show on a browsers title bar, if you look at the top of your browser, you should see the title of this tutorial.
  • Encoding: Web pages are encoded in specific languages and this drop down menu will give you choices. For now, we will leave it as is.
  • Generate Background: checking this box will allow you to set your background for your page. Leaving this unchecked will create a page with a transparent or no background.
  • Color / Image: When you check the Generate Background box, these two options become available to you. Here you can choose a solid color for your background, or choose an image. If you choose an image, another box will open giving you three options for your background.
  1. Preset Texture: ready to go textures included with PI.
  2. Background Designer: create your own background.
  3. File: pick a file of your own choosing. You can also set the transparency and offset of your image.
  • Page Size/Standard: these are pre-defined sizes you can use for your page.
    Choosing the right page size will affect how your page is viewed in a browser. Web pages will look different to each viewer depending on the resolution that viewer has his/her computer set at. Since most people surf the 'net at a resolution of 800 x 600, choosing the default of 755 x 550 pixels is your best bet. The page will be a bit
    smaller than the standard 800 x 600 resolution and this is to make up for the space
    the browsers scrollbar takes up on the right side of the browsers window.
  • Active Image: choosing this will set your web page the same size as any active image you have open in PI.
  • Clipboard: this will set your page the same size as whatever image you have stored in your clipboard.
  • User Defined: here you can choose your own size.
  • The two icons next to the user defined option allows you to reverse the sizes or to store your own size for use at a later time.

Now that we know how to open a new web page, let's open one for us to work on throughout these lessons.

    1. Go to the FILE > New > Web Page if it's not already open.
    2. Type in My Site for the title.
    3. Check the Generate Background box and click the color box
    4. Set the color to white.
    5. Use the standard 750 x 550 page size.
    6. Click OK.
    7. Save your open page as a .ufo named mysite into the My Site Files folder you created earlier.
 

Now we have a 755 x 550 web page open with a white background. Before we start building our page, let's take a look at what tools are available for us to use.

Creation and Design: Exploring the Workspace


 

All content © 2002 PIRCnet & Vasilis Designs. Any reproduction or direct linking prohibited without permission.