Working with HTML (Pages & Frames)
A web page is an HTML file plus graphic files. PhotoWebber provides a visual interface for creating HTML files and web graphics directly from a Photoshop design. Along with converting graphics to GIF, JPG, and PNG formats, PhotoWebber also outputs complete HTML code to display pages in a browser.
Plug-in Media with HTML Extensions
Placeholders and Frame Placeholders
Web Page & Frame Settings
Although web pages are more sophisticated and complex today than in the early days of the Web, HTML still works in much the same way. HTML files are still text files. They still contain the text to display on the page and instructions on how to display it. PhotoWebber gives you the ability to set the appearance of your page without typing in arcane commands and codes.
|
To define settings for your HTML page or frame: 1. Select the page or frame in the Layers window.
|
|
|
2. Select an available tab on the Properties window and make the appropriate changes. If your page has no frames, the properties window includes Background, Layout, Media, and HTML tabs. |
|
| If your page has frames, the properties window for the frameset page includes Media and HTML tabs. |
 |
|
The properties window for each frame includes Background, Layout, and Media tabs. |
|
Background
When a Photoshop file contains a solid color layer named "Background", PhotoWebber disables this layer and uses its color for the page background. When frames are created, they maintain the background color of the original page.
You can change the background of each page or frame you create to any color, any layer in your PhotoWebber file, or any GIF or JPG file.
To set the background to a tiled graphic, see Using Graphics as Page Background Tiles.
To set the background to a solid color:
|
 |
Macintosh Color Picker
Windows Color Picker
Layout
PhotoWebber uses document properties to determine what type of HTML code to generate for each page. To ensure that the page you build matches your Photoshop layout in your browser, you must select the correct layout option.
- If you are certain that your site visitors are using browser versions 4.0 or higher, select Style Sheets.
- If your visitors are using 3.0 or lower browsers, or if you do not know what browsers your site visitors use, select Tables (HTML 3).
Note: You can switch between Style Sheet and Table layout at any time.
PhotoWebber allows you to choose the best HTML format for your specific web page and audience - Style Sheets or Tables. In either case, PhotoWebber handles all of the calculations and manipulations necessary to create the individual web graphics and HTML code. (For samples of Table and Style Sheet code generated by PhotoWebber, see the Appendices.)
Style Sheets and DIVs - When you select Style Sheet Alignment for your page or frame, each layer in PhotoWebber will be output as a separate graphic with its own DIV tag.
Tables and Slicing - When you select Table Alignment for your page or frame, PhotoWebber automatically calculates the best size and placement for each table slice - based on the size and position of each Photoshop layer and the necessary adjustments to optimize rollover and popup performance.
You can also adjust the size and number of table cells by changing the granularity.
- Select an HTML page and the Layout tab in the Properties window.
- Select Tables (HTML 3) and click Options.
- Enter a number between 1 and 9999.
Select a lower number for a more precise table. This means you will have more, smaller table cells.
Select a higher number for a simpler table. This means you will have fewer, larger table cells. - Click Preview Table to see the outlines of the table cells in the Document window.
Each slice created from a single layer inherits all of the graphics properties and optimization settings assigned to that layer.
Page Alignment Options
PhotoWebber allows you to select Left, Right, or Center alignment for your web page. The entire page will align according to your choice when displayed in a web browser. The alignment option is available for both Style Sheet and Table pages.
Frame Y-Size Options
Frames may be set with a variety of sizing options:
-
Optimal - Select this for all frames when you want PhotoWebber to reproduce the graphics and page layout exactly as you see it in the document window. The frame in the lower-right corner will expand to fill the browser window.
-
Absolute - Select this for any frame that must always be the same exact size, regardless of browser resizing. At least one neighboring frame will have to have its size option set to undefined for absolute frames to work correctly.
-
Undefined - Select this for those frames which will size to fill the remaining space in the browser window when one or more neighboring frames are set to absolute or relative.
-
Relative - Select this when you want the various frames to stay proportionally sized as the browser is resized. Each frame will be assigned a percentage of the width of the browser window.
What, exactly, is a neighboring frame? Neighboring frames may or may not be adjacent to the frame in question. But generally the undefined frame that helps out an absolute (or relative) frame must be a sibling. That is, both frames must share the same parent frame. But even this that isn't 100% accurate, as frames get buried inside one another, sibling frames become parent frames, and it all goes to heck.
Keep things simple, and your page will come out the way you expect.
Misc. Frame Settings
Frames have several additional settings:
- Border - Check this if you want a visible border to appear between frames.
- User Can Resize - Check this to allow users to resize the selected frame.
- Scroll - Select No for frames that should never have a scroll bar, select Yes to make the scrollbar visible at all times, select Auto to make the scrollbar visible only when the content of the frame does not fit in the browser window.
Media
Each of your web pages must have a file name. If you do not define a name, PhotoWebber names your files for you.
|
If your site has no frames, the name of your page is index.html. To change the name of the HTML file, type the new name in the Name or HTML File box. |
 |
|
If your site has frames, the names of the pages are frame1.html, frame2.html, and so forth. To change the name the file and folder at the same time, type the new name in the Name box. To change the name of the folder only, type the new name in the Directory box. To change the name of the HTML file only, type the new name in the HTML file box. Note: To help make your URLs easier to type and to remember, use simple, one-word names for your files - and don't use any symbols or punctuation. |
 |
You can also select between Normal Output and Placeholder (see Frame Placeholders below).
HTML Options
Title - Each of your web pages should have a title. The page title is displayed by the browser, either in the title bar or at the top of the screen. Titles are also used by search engines, bookmarks, and history files.
You can also add Keywords to pages in PhotoWebber. Keywords provide information above and beyond what is included in the title of your page. They are used by search engines and help ensure that your pages are included when users search for topics related to your site. Separate keywords with commas.
Creating Frames
Because PhotoWebber was designed to build web pages from complete designs created in Photoshop, working with frames is much more intuitive than in standard HTML-based applications.
In standard web-design applications, frame design can be quite complex. First you have to decide where your frames will be, and what size they will be. Then you must create separate HTML pages for each frame. Finally, you assign a specific web page to be "inside" each frame.
In PhotoWebber, you simply create your page design in Photoshop, import the file, and tell PhotoWebber where to insert the frames. That's it. PhotoWebber takes care of the technicalities.
And, if you change your mind, it's not a problem. In PhotoWebber, any element can be moved to any frame at any time. Most elements can even cross frame boundaries. This provides the flexibility to change your mind without having to rebuild separate HTML files for each frame just to move a single item.
To create a frame, from the Insert menu, select Horizontal Frameset Divider or Vertical Frameset Divider.
Note: To remove a frame, simply drag the divider off the page.
The frameset divider line appears in the center of the document window. Simply drag the line to the position where you want to split the page into frames.
Web pages without frames are very simple and consist of a single HTML file and its related graphic elements.
Web pages with frames are much more complicated and consist of several HTML files as well as the graphics used in each frame:
- One HTML file defines the frameset (the frameset HTML file
tells the browser how to size and position each frame as well as what
HTML file belongs each frame)
and - Additional HTML files define the content of each frame (the frame HTML files tell the browser what to display in the frame)
You can set properties for each HTML file and for the frameset.
When you create a frame, a new folder is automatically assigned to contain the associated HTML and graphics files. If you have not yet assigned names to your frame's pages, these names default to Frame1, Frame2, and so forth.
A separate Layers tabs will also be added for each frame.
There are limitations to what can be done with frames. These limitations are due to the technicalities of HTML. While it is not necessary to understand all of the technical details to use frames in PhotoWebber pages, you should be aware of the following limitations:
Text blocks, Placeholders and linked graphics cannot cross frame boundaries.
Layers created from imported Photoshop files as well as from imported GIF and JPEG file can cross frame boundaries. However:
- Some browsers do not always line up frames perfectly.
- When a graphic crosses a frame boundary, two separate graphics files are created - each graphic consists of the portion of the layer that is in each frame.
- Frames using table alignment with graphics that are positioned to the right or below frameset borders have a small gap at the border.
You should preview and test all pages carefully when using frames to divide graphics.
When you create hyperlinks on a page that contains frames, you can also select the Target Frame for each hyperlink:
- This Frame (no target) - the new file opens in the same frame as the current file. (No target HTML code is generated for this setting.)
- This Frame (_self) - the new file opens in the same frame as the current file.
- Parent Frame (_parent) - the new file opens in the frameset containing the current frame.
- This Page (_top) - the new file fills the entire current browser window, replacing the current file.
- New Window (_blank) - the new file opens in a new browser window.
There are also several limitations related to specific browsers and browser versions. Because frames are such complex animals, PhotoWebber includes several warnings related to Frames. Whenever you create a frame, the Interactive Warnings Window will notify you of potential problems and make suggestions for appropriate fixes. For a complete list of warnings, see the Appendices.
Color Areas
PhotoWebber automatically converts all layers containing rectangular areas of a single color into Color Areas.
- In table layout, a color area is a table or cell that is set with the background color to match the color of the Photoshop layer.
- In style sheet layout, a color area is a DIV tag, or layer, that is set with the same background color as the Photoshop layer.
A transparent single-pixel GIF (called filler.gif) is automatically generated to be used as a spacer where necessary to fix the size of the color area in the browser.
Note: If a solid rectangular Photoshop layer is named as a rollover or popup button state, it will not be converted to a Color Area.
|
You can convert any Photoshop layer into a Color Area. The Color Area will be the size of the non-transparent objects in the layer. To convert a graphic layer to a color area, select Layer, Extract Color Area. |
 |
|
Any Color Area automatically or manually converted from a Photoshop layer can be converted back to a graphic at any time. To change a color area back to a solid color graphic:
Note: The Set Type menu includes only those options that apply to the selected layer. These options may include: Text, Graphic, Color Area and Placeholder. If the selected layer cannot be changed to a different Type, the option is disabled.
|
 |
|
You can also insert new Color Areas directly in PhotoWebber. To insert a new Color Area:
|
|
HTML Extensions for Media Plug-ins
You may incorporate Flash, Shockwave, Quicktime and Java Applets into any PhotoWebber projects by using HTML Extensions.
|
From the Insert menu, select HTML Extensions and choose the type of file to insert:
|
|
|
In the Properties window, select the Extension tab and type in the name of the file in your root folder or click the Browse button to select any file existing in the root folder, or the Search button to select any file on your hard drive. Note: If you select a file that is outside of your site root folder, you may experience problems when you publish your web site. This is not recommended. Choose the desired settings for the speicific type of file you are using. |
 |
Placeholders and Frame Placeholders
You may incorporate existing site content into any PhotoWebber projects by using Placeholders and Frame Placeholders.
Placeholders
A Placeholder is a rectangular area that contains HTML code. Any layer in PhotoWebber may be designated as a placeholder. HTML incorporated using a placeholder becomes part of the web page built by PhotoWebber.
There are two ways to create Placeholders in PhotoWebber: converting a layer to a Placeholder and inserting a new Placeholder.
|
You can convert any layer into a Placeholder. To convert a layer to a Placeholder, select Layer, Use As Placeholder. |
 |
|
You can also insert new Placeholders directly in PhotoWebber. To insert a new Placeholder:
|
 |
|
Any Placeholder converted from a Photoshop layer can be converted back to a graphic at any time. To change a placeholder back to the original graphic layer:
Note: The Set Type menu includes only those options that apply to the selected layer. These options may include: Text, Graphic, Color Area and Placeholder, Quicktime, Flash, Shockwave and Jave Applet. If the selected layer cannot be changed to a different Type, the option is disabled. |
|
In style sheet layout, each placeholder is a separate HTML layer and supports standard style sheet overflow settings. In table layout, each placeholder is a table cell.
You can type HTML code directly into the Source HTML window, select any HTML file from your hard drive, or choose from a list of HTML files within the designated root folder.
|
To control the behavior of the Placeholder in the browser, define the following options: Style Sheet Setting, Overflow - If your page is laid out using Style Sheets, choose one of the following options:
|
 |
|
Display - This setting defines how the Placeholder is displayed in PhotoWebber. It does not change the resulting HTML code. When Visible is selected, choose from the following options:
Note: The interactive warnings window will warn you of incompatibilities with specific browser versions.
|
 |
|
Special Considerations for Tables and Placeholders - If your page is laid out using Tables, these options are disabled. Table Placeholders are single table cells that contain the specified HTML code. Table cells automatically resize to contain the full content of the placeholder. This is equivalent to the Visible option for Style Sheets. If you put a Placeholder to the left or right of a graphic, you must be certain that the Placeholder is large enough to contain the full content of the HTML - even if the user sets their browser font to the largest size available. For more information see Considerations for Using Text.
|
 |
|
To add HTML code to a Placeholder:
|
 |
Frame Placeholders
Frames may also be designated as placeholders. A Frame Placeholder is a frame that contains HTML code created in a separate PhotoWebber session or by any other HTML editor. HTML incorporated using a frame placeholder is referenced by the frame set built by PhotoWebber, but is not incorporated into a page built by PhotoWebber.
|
Any frame may be designated as a Placeholder. To designate a frame a Placeholder, select Placeholder from the Media Type drop-down list. |
 |
|
Frame Placeholders must point to existing HTML files. These files may have been created by PhotoWebber or by any other HTML editor. You can also point to any URL on the Web. To assign an HTML file to a Frame Placeholder:
|
 |
Managing Files and Folders
Media and the Output View Tab
Media are the GIF, JPG, PNG, and HTML files that will be created by PhotoWebber when you build your page. The media - or files - are listed on the Output View tab. PhotoWebber defines all files as real or virtual.
- Real files are files that exist on your hard drive. Real files may or may not have been created by PhotoWebber.
- Virtual files are files that will be created by PhotoWebber when you build your page, but that do not currently exist on your hard drive.
See PhotoWebber Basics for more information.
Creating New Folders
If you are working on a page with frames and more than one HTML file, separate folders are automatically created for each frame.
- Web pages without frames consist of a single HTML file and its related graphic elements.
- Web pages with frames consist of several HTML files - one for the frameset and one for each frame - and the graphics used in each frame. When you create a frame in PhotoWebber, a new folder is automatically assigned to contain the associated HTML and graphics files.
You can also create folders to organize the files according to your preference. You can move files into a different folder as you wish.
Setting a Site Folder
All PhotoWebber pages are built in a Site Folder. The Site Folder is the folder in which PhotoWebber will build the HTML and graphics files for the web page.
To set the Site Folder, select Output, Set Site Folder and point to any folder on your hard drive.
If you do not define a Site Folder, PhotoWebber will prompt you to do so when it is required.
Note: You can set a default Site Folder in General Preferences.
Setting the Output View Option
The Output View tab can display or hide specific file types:
- Project Files - Select this option to show only those files belonging to the current PhotoWebber session. This view hides all files that are not part of the current session.
- HTML Files - Select this option to show only web graphics and html files. This includes GIF, JPEG, PNG and HTML files. This view hides all files that are not web file formats.
- All Files - Select this option to show all files in the Root Folder. This view does not hide any files.
The default setting is HTML files.
To change the setting, select View, Output and select the desired view.
Managing File Conflicts
PhotoWebber will warn you if files that will be output when the page is built already exist in the Root Folder.
To resolve a conflict, highlight a file in the Output View list, select Conflict from the Output Menu and choose an option:
- Overwrite - choose this to replace the file on the hard drive with the new file created by PhotoWebber.
- Don't Output - choose this to skip this file during build. Your HTML file references the existing graphic.
- Rename - choose this to rename the file created by PhotoWebber. Your HTML file references the new name.
If you do not resolve conflicts on a file-by-file basis, you will be prompted for a global conflict resolution when you build the page.
Note: If Warn is not the setting for Conflicts in Preferences, then no warning icon will display. Files will be automatically overwritten, ignored, or renamed according to the Preferences settings.
Building Sites and Page Links
Let's assume you have a copy of your web organization somewhere on your computer. Probably those web pages share some top-most central location (usually where index.html is located). PhotoWebber calls that location the Site Folder and refers to all the web site stuff relative to that directory. From PhotoWebber simply set the Site Folder (from the Output Menu) to the one on your computer.
If you are building a brand new site, just create an empty folder in the Finder or Explorer and set it as the Site Folder.
Text fields have a hyperlink editor in the text edit dialog. Graphics have a hyperlink editor on the IMG properties panel. But from either hyperlink editor there is a button with an icon of a magnifying glass on a piece of paper. That button lets you select other HTML files that are in your directory structure (relative to the Site Folder). When that button is held down, it shows a popup of all html files in your root directory. To link PhotoWebber pages to other pages simply set the root directory and use that hyperlink shortcut button to choose your other pages as links.
The best way to set up links when you are building all of your pages in PhotoWebber is to set, for all of your pages, the root folder to be the root of your site. Then, go ahead and build your pages without hyperlinks. After that, return to each page in PhotoWebber and set the hyperlinks up. When you've set up the hyperlinks between them, then just build the HTML if there were no graphic changes.
Note: Windows in particular is very slow at telling PhotoWebber that the contents of the Site Folder have changed. Sometimes you may have to toggle the Site Folder open/close in the Output View window to get it to "see" the other HTML files you recently built.
Copyright
© 2000 - 2001 Media Lab, Inc.
All rights reserved.
PhotoWebber
is a trademark of Media Lab. Photoshop is a registered trademark and GoLive
is a trademark of Adobe Systems Incorporated.
All other trade names are trademarks of their respective owners.