Page 45
8.5 Embed an External HTML Page
ShutterBug makes it easy to embed an .html page or .html file into your page. Adding
an external HTML file requires both the Content window and the Layout window. The
external HTML can be any type of page and is a full HTML page; it is completely
independent of the pages that ShutterBug creates. It could be a page that is located
elsewhere on the Internet or an .html file that you've created and dropped into your
Files folder. Note: Preview will not display the external HTML. However, you can
preview it by using the "Preview in Browser" button to preview the page locally in an
external browser before uploading.
───────────────────────────────────────
Embedding an HTML Page
In order to embed an HTML external file into your page, you must first add it to your
ShutterBug project. Adding the file to your project means it will get saved and uploaded
to the web with your site package. ShutterBug will automatically calculate the URL path
for the file's location in your site. If you are embedding a page that already exists on
the web at another website, you don't need to add any files in the Content window.
Both approaches are outlined here separately.
Embedding an HTML page that already exists on the web:
1. This approach only requires the Layout window. Click on the Layout tab to open the
Layout window. Be sure to first select the page that you want to have the HTML page
embedded in. Remember, if you want to keep the embedded HTML page unique
to your current page only, add a template for the page you are working on.
Otherwise the Xtra file(s) will be added to all pages that use the same template.
2. Select the Xtras tab and click the '+' symbol to add an Xtra box as shown in the
picture below. The box will appear in the xtra box list window as well as in the viewer
window (default position in the top left corner).
3. Double-click the "Xtra Box" text field to rename the box to a name you can identify
easily. Do you want the embedded HTML file to appear in your main thumbnail view
only, in the slideshow view only, or in both views? From the Xtra Box list, check the
appropriate check boxes to have the embedded HTML appear in the desired views. By
default, "Main Page" will already be selected. Uncheck the check boxes to make the
external HTML invisible for one, or both of the views.
4. Select 'External File' from the pop up list. Then select HTML page from the external
file type list.
5. Enter the URL of the html page (i.e. http://www.domainname.com/index.html) into
the corresponding text input field as shown in the picture below. The HTML file will now
be embedded in your page. You can web preview the page by clicking the "Preview in
Browser" button located in the Preview window.
Embedding an external HTML file:
1. This approach requires both the Content and Layout windows. Click the Content tab
to open the Content window. Select the "Files" heading located at the bottom of the
Navigation list. This will open the Files interface.
2. Locate the desired HTML file on your computer, and drag and drop it into the
window, as shown in the following picture.
3. Next, click on the Layout tab to open the Layout window. Be sure to first select the
page that you want to have the HTML file embedded in. Remember, if you want to
keep the embedded HTML file unique to your current page only, add a template
for the page you are working on. Otherwise the Xtra file(s) will be added to all
pages that use the same template.
4. Select the Xtras tab and Click the '+' symbol to add an Xtra box. The box will appear
in the xtra box list window as well as in the viewer window (default position in the top
left corner).
5. Double-click the "Xtra Box" text field to rename the box to a name you can identify
easily. Do you want the HTML file to appear in your main thumbnail view only, in the
slideshow view only, or in both views? From the Xtra Box list, check the appropriate
check boxes to have the external HTML appear in the desired views. By default, "Main
Page" will already be selected. Uncheck the check boxes to make the external HTML
invisible for one, or both of the views.
6. Select 'External File' from the pop up list. Then select HTML page from the external
file type list. Click the Easy button to open a panel listing the files that you've added to
your site - these are the files that you added to the Files interface (in the Content
window), outlined above in Steps 1 and 2. Select the desired HTML file from the list
and hit the OK button.
7. The file will now be embedded in your current page. You can web preview the page
by clicking the "Preview in Browser" button located in the Preview window.
───────────────────────────────────────
External HTML Properties
You can reposition and resize the Xtra box that contains the embedded HTML, by
grabbing it with your mouse from the viewer window and dragging it to the desired
position on the page. Use the grab handles to resize the box. Under the External
HTML in a frame option, you can choose to enable scroll bars for the embedded HTML
page. Check the Show scroll bars check box to enable the scroll bars - this will make
the HTML file inside of the Xtra box scrollable in the event the content is larger than
the Xtra Box. Leave the box blank to disable the scroll bars. You can also add a
colored border and/or margins to the embedded HTML box, from within the Borders
interface.
───────────────────────────────────────
Embedded HTML Example
We've used the External HTML file Xtra on the Quick Reference Index page of this
manual. The alphabetized index, including the alphabet that runs along the top of the
index, is an HTML page that we've created outside of ShutterBug. The HTML has
anchors in the alphabet, and we've added scroll bars to make it more convenient to
browse the index topics. Go to the Quick Reference Index page and view one of the
many ways in which external HTML can be used.
If you are interested in adding a contact form or page counter to your pages, see the
next two pages in this chapter - Add a Contact Form and Add a Page Counter.
───────────────────────────────────────
