iFrame.pdf

(1731 KB) Pobierz
iFrame
Further Development
1
iFrames
In this tutorial, we introduce inline frames or, more specifically,
iFrames. We’ll create a basic photo gallery by creating a page
that uses iFrame technology.
In this project, you’ll learn how to:
Insert an iFrame onto a page.
Create and link content that will appear within the iFrame.
Clone pages.
690945640.027.png
2
Further Development
iFrames
IFrames
An inline frame, or iFrame, is a frame placed on your page and website.
The content displayed within an iFrame can come from a separate page,
document, or even an entire website! Because an iFrame works
independently from the page that displays it, the iFrame can even have its
own navigation elements—any link clicked inside the frame only changes
the frame and not the page. This behaviour makes iFrames extremely
useful for displaying large amounts of information in a small space, and if
used well, are an effective tool.
Image page preview
Collection page
As site visitors click
through the thumbnails
on the left, the iFrame on
the right updates with
the corresponding full-
size image and text.
iFrame pages
690945640.028.png 690945640.029.png 690945640.030.png 690945640.001.png 690945640.002.png 690945640.003.png 690945640.004.png 690945640.005.png 690945640.006.png 690945640.007.png 690945640.008.png 690945640.009.png 690945640.010.png
Further Development
3
iFrames
To demonstrate iFrames, we have created an example photography
website for you to work on. The project file, iframes.wpp , and its images
can be found in the Workspace folder.
To open the project file
1 On the Standard toolbar, click Open .
2 Navigate to the Workspace folder and click to select the
iframes.wpp project file. In a typical installation, this folder is found
in:
C:\Program Files\Serif\WebPlus\X4\Tutorials
3 Click Yes in the dialog to open as a
new, untitled site.
4 Click File > Save As... and save
your new file under a new name.
5 On the Site tab, double-click on the
Collection page entry.
The page displays in the workspace.
Currently, the Collection
page contains a set of small
thumbnails but no additional
content. We’re going to add
an inline frame so that our site
visitors can view a larger
version of the images and read
the additional information.
The content of the iFrame will be dynamically changed, depending on
which thumbnail is clicked. Sound complicated? Don’t worry, it really isn’t.
Let’s get started.
To create the thumbnails, we placed six empty frames on the page and
sized them using the Transform tab. The frames were aligned using the
Align tab, before using the picture frame controls to replace and position
our images. For more information, see the Pictures tutorial.
690945640.011.png 690945640.012.png 690945640.013.png
 
4
Further Development
iFrames
To insert an iFrame
1 On the Web Objects toolbar, click the Framed Document
Tool and then click and drag to create a large frame on the right of
your Collection page.
2 In the Framed Document dialog, click OK to accept the default
settings—we’ll come back to this later when we have created the
content.
3 On the Transform tab, click the
Lock Aspect Ratio button to
allow unconstrained resizing (it will
change to ). Change the Width to
405 pixels and the Height to 320
pixels.
4 If necessary, drag the
iFrame into position on the
page.
That’s all for now. The
next step is to create a
content page.
To create iFrame content pages
1 On the Site tab, click
Add to
add a new page.
2 In the New Page Properties dialog:
On the Appearance tab, in the
Placement section, select
Collection from the drop-down list.
Change the Width to 380 pixels.
690945640.014.png 690945640.015.png 690945640.016.png 690945640.017.png
Further Development
5
iFrames
Click the Navigation tab.
Change the Page name to
droplet .
Change the File name to
droplet.html
Clear Include in Navigation .
Click the Background tab.
Remove Master A.
Clear Use Colour
Scheme Designer
Settings and change on-
page colour to white.
Click OK .
3 Working on the new page, on the Standard Objects toolbar, in the
Picture flyout, click Empty Picture Frame .
4 Place the frame in the top centre of the page, with the top edge of the
frame aligned to the top of the page.
5 On the Transform tab, set the
Width to 350 pixels and the Height
to 250 pixels.
6 With the frame still
selected, on the Align tab:
Ensure that Relative
to: Page is selected.
Click Centre
Horizontally .
690945640.018.png 690945640.019.png 690945640.020.png 690945640.021.png 690945640.022.png 690945640.023.png 690945640.024.png 690945640.025.png 690945640.026.png

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin