-
Further Development 1
Image Catalogue
In this tutorial, well use WebPluss database mergefunctionality
to showcase a collection of artwork.Youll learn how to:
Create a photo database.
Insert a repeating area on the page.
Open and edit a database.
Add hyperlinks providing site visitors with access toadditional
information about an image.
Merge and publish data.
-
Image CatalogueFurther Development2
Adding an Image CatalogueIn this exercise well create an image
catalogue for a graphic artistswebsite. Well create a photo data
source from a folder of images, andmerge the data into a repeating
area on our page. Well then customizethe repeating area, and edit
the data to create an attractive catalogue ofartwork samples. Well
complete the following steps:
Create a photo database from a folderof images.
Insert repeating areas for the data.
Insert placeholders into repeatingareas.
Open and edit the database.
Merge and publish the data.
Link summary and main pages for each record, using anchors
andhyperlinks.
Link merged page names to image and HTML file names.
1: Preparing the siteIn preparation for inserting our
imagecatalogue, we did the following:
1 We created a new blank site,adding a banner and company
detailsto the top of the master page.
2 On the Site tab, we added a newblank page and named it
Draftlayout.
3 On our Draft layout page, wecreated a mockup of the pagelayout
we wanted to achieve.
(You can do this in WebPlus,or with paper and pencil.)
The Photo Data Sourcefunction handles image files inany standard
format.
-
Image CatalogueFurther Development 3
2: Creating the databaseWere now ready to create our photo
database. You can use a collectionof any images for this exercise,
but before completing the following steps,youll need to save all of
the images to the same folder on your computer.
To create a photo database
1 On the View toolbar, select Toolbars, then click Database
Merge.(This toolbar is hidden by default.)
2 On the Database Mergetoolbar, click Createphoto database.
3 In the Photo Data Source Wizard, click Browse, then locate
thesource folder containing the images you want to database. (All
imagesmust be contained in the same folder.) Select the folder and
click OK.
4 Click Next.
5 If required, edit the filename of the database to becreated,
or accept thedefault name.
Click Next.
If you create your draft layout in WebPlus, youllneed to either
delete this page before you publishyour site, or clear its check
box in the Publish toWeb dialog (see section 7, Merging and
publishing thesite, step 5.).
-
Image CatalogueFurther Development4
6 The Wizard displays a listof image files found in
thedesignated source folder.
Initially, all images arechecked for inclusion inthe database.
If required,you can clear check boxesto exclude specific
images.
Click Next.
7 The Wizard displays a listof Exif data fields that maybe
associated with yourimages.
In this exercise, we dontwant to include thisinformation so
clickSelect None to clear allof the check boxes.
8 Click Finish.
WebPlus builds thedatabase.
3: Creating the repeating areaNow that we have created our photo
database, we can associate it with arepeating area on a web page.
Inside this repeating area, we can theninsert our database picture
and text fields, along with any other elementsthat we want to
repeat on the page (in this case, a shape).
To create the repeating area
1 On the Database toolbar, click Insert Repeating Area.
Keen photographers may find the Exif datauseful: Each database
record created willconsist of a path name for the photo, plus
fieldscontaining additional Exif data (date and time,equipment,
software, etc.) that may have beenautomatically stored with the
original file.
-
Image CatalogueFurther Development 5
2 In the Choose mergedatabase dialog, clickBrowse, then browse
toand select the databasecreated in the previoussection.
3 Click OK.
The Repeating Area Tile Setup dialog lets you choose the
layoutrequired for your page.
Referring back to our Draft layout page,we want to display our
images in a 3column x 4 row grid.
To do this, in the lower-right Layoutsection, set the Across
value to 3 and theDown value to 4.
4 Click OK to close the dialog.
-
Image CatalogueFurther Development6
5 On your page, WebPlus creates a placeholder for the first cell
of therepeating area.
If required, you can:
Move the repeating area cell by clicking anddragging it.
Resize the repeating areacell by dragging its borderhandles.
We can now add the objects that we want to display in each
repeatingarea on the page. Well start by creating a simple
QuickShape, which welluse as a frame for each image.
6 On the QuickShapes flyout, click theQuickRectangle and then
click and drag onthe page to create a rectangle. Drag the leftnode
down to round the corners.
On the Swatches tab, apply a white fill.
On the Line tab, in the line style drop-downlist, select
None.
Setting up the repeating area
You can set precise properties for the repeating area inthe
dialog, or close the dialog and then click and drag toset the
repeating area's size and shape directly on thepage.
-
Image CatalogueFurther Development 7
7 On the Effects flyout,click Filter Effects.
8 In the Filter Effectsdialog, select the DropShadow check box
andthen set the followingvalues:
Opacity 36;
Blur 3.75;
Distance 3.75;
Angle 135
Clear the Scale withobject check box.
Click OK.
9 Drag the rectangle into the repeatingarea, resizing it so that
it just fitsinside.
Now lets add our database fields tothe repeating area.
10 On the Database Merge toolbar, clickInsert Picture Field.
11 In the Insert Picture Field dialog, inthe Fields list, youll
see PathName selected by default. ClickInsert to insert this field,
and thenclick Close.
-
Image CatalogueFurther Development8
WebPlus adds the {MM:Path Name}placeholder to your page at
default size.
12 Drag the placeholder into therepeating area and resize it so
that itfits inside the rectangle shape. Leavesome space underneath
to add theimage title.
4: Editing the databaseNext, well edit our database, creating
additional text fields for the imagetitles and descriptions.
To edit the data source
1 On your web page, click to select theborder of the repeating
areaplaceholder (make sure you select therepeating area itself and
not the{MM:Path Name} placeholder).
On the Database Merge toolbar, clickEdit Database. (You can
also
click Edit Database on the contexttoolbar.)
2 In the Choose mergedatabase dialog, yourdatabase file name
isdisplayed in the Datasource text box. ClickEdit.
3 In the Merge List dialog,click Edit.
The Merge List dialog isused to customize the data to bemerged
by including or excludingspecific records, filtering therecords, or
editing the data.
-
Image CatalogueFurther Development 9
4 In the EditDatabasedialog, clickCustomize.
5 In the Customize Database dialog,click Insert.
6 In the Field Name dialog,type Image Name andclick OK.
7 Repeat steps 5 and 6 toadd a second text field.Name this
fieldDescription.
8 Click OK to close the Customize Database dialog.
In the Edit Database dialog, your new fields are added to the
recorddetails.
9 Type the nameand descriptionof your firstimage directlyinto
the textboxes, thenclick the rightarrow buttonto move to thenext
record.
If you cant see a thumbnail preview in the EditDatabase dialog,
click in the Path Name field. The imageassociated with the record
will be displayed.
-
Image CatalogueFurther Development10
10 Repeat step 9 to add names and descriptions for the remaining
images,then click OK to close the dialog.
11 Click OK to close the Choose merge database dialog.
12 On the Database Merge toolbar, click Insert Text Field.
In the Insert Text Field dialog, in the Fields list, select
ImageName.
13 Click Insert to insert this field, and then click Close.
WebPlus adds the {MM:Image Name} placeholder to your page
atdefault size.
14 Drag this new placeholder intoposition under the image
placeholder.
Centre align the text by clickingAlign Centre on the Text
contexttoolbar.
15 Click Save to save your work.
5: Merging data into the repeating areaNow that we have selected
which records to merge (that is, we havecreated our merge list),
and inserted our placeholders, we're ready tomerge the database
content to a temporary website and preview theresults of our
work.
To merge the repeating area
1 On the Database Merge toolbar, clickMerge to New Site (or
click on the context toolbar).
WebPlus generates a new website(adding the suffix _merge1 to
thefile name) in a separate window,replicating the repeating area
as manytimes as there are records in thedatabase, and replacing
theplaceholders with the relevantdatabase fields.
-
Image CatalogueFurther Development 11
The layout uses the grid arrangementyou specified (3 x 4 in our
example),with each unique cell including datafrom a single record,
following theorder of records in the merge list.
2 Optional: To adjust displayproperties such as picture scaling
andalignment for any individual picture frame, right-click the
frame andclick Frame Properties...
Note that the original website remains open in its own window.
Don'tforget to save it in case you need to repeat the merge process
withanother data set!
If you're not happy with the resulting merged website, return to
theoriginal site, make adjustments, and repeat the merge
process.
3 When youre happy with your page layout, close the merged
sitewindow and return to your original site.
6: Adding a details page, anchor, and hyperlinkIn this final
section, well add some interactivity to our site. We want
sitevisitors to be able to click on an image thumbnail to open a
new pagecontaining a larger version of the image, and a detailed
description.
To add the details page
1 On the Site tab, click Add to add a new blank page to your
site.In the Insert dialog, accept the default page settings for
now.
2 On the Database Merge toolbar, click Insert Repeating
Area.
3 In the Choose merge database dialog, click Browse. Select
yourimage database and click OK.
4 In the RepeatingArea Tile Setupdialog, choose a 1column x 1
rowgrid layout. ClickOK.
In our example, all of our 12records fit on a single
page.However, WebPlus will insertnew pages as needed to includeall
records in the database.
-
Image CatalogueFurther Development12
5 Resize the repeating area sothat it fills your page.
6 Copy the QuickRectanglefrom your Home page, andthen paste the
shape ontoyour new page.
7 Resize the shape andposition it at the top of therepeating
area. Leaveenough space at the bottomof the page for theDescription
text field.
8 On the Database Mergetoolbar, click InsertPicture Field.
9 In the Insert Picture Fielddialog, click Insert to addthe Path
Name field, andthen click Close.
10 Drag the {MM:Path Name}placeholder into the repeating
area,resizing it so that it fits inside therectangle. Leave some
spaceunderneath to add the image title.
11 On the Database Merge toolbar,click Insert Text Field.
12 In the Insert Text Field dialog,select Image Name, click
Insert,and then click Close.
Drag the {MM:Image Name}placeholder into position under theimage
placeholder.
-
Image CatalogueFurther Development 13
13 Repeat steps 11 and 12 to add the{MM:Description} placeholder
tothe bottom of the page.
14 Select each text field placeholder inturn, and then use the
controls onthe Text context toolbar to applyformatting as
required.
For example, for our Descriptionfield, we applied 10 pt Verdana,
andleft-aligned the text.
15 On the Site tab, right-click your new page and click
PageProperties.
In the Page Propertiesdialog, to the right of thePage name text
box, click
Insert Merge Field.
In the Insert Text Fielddialog, select Image Nameand click
Insert.
On the Site tab, youll see thepage name is updated with
the{MM:Image Name}placeholder text. (Youll seewhy we did this when
wemerge the data.)
Weve finished placing the required elements into our repeating
areas.Now all we have to do is link the thumbnail images on the
Home page tothe larger images and descriptions on the {MM:Image
Name} page.Well use an anchor and a hyperlink for this.
-
Image CatalogueFurther Development14
To add the anchor
1 On the {MM:Image Name} site page, select the large
{MM:PathName} placeholder.
2 On the Tools toolbar, on theHyperlinks flyout, click
Anchor.
3 In the Anchor dialog, type a namefor the anchorwe named
oursBigPic.
4 Click OK.
To add the hyperlink
1 Open the Home page in the workspace and select the
thumbnail{MM:Path Name} placeholder.
2 On the Tools toolbar, on the Hyperlinks flyout, click
Hyperlink.
3 In the Hyperlinks dialog, in the left tree view, click
Anchor.
4 To the right of the list, in the Anchor section of the
dialog:
In the Page name drop-down list, select the {MM:Image
Name}page.
In the Anchor list,select the anchor youcreated in theprevious
section.
In the database recorddrop-down link, selectSame record asorigin
of link.
5 Click OK.
6 Save your file.
-
Image CatalogueFurther Development 15
7: Merging and publishing the siteOur site is finished, but
before we can publish it, we need to repeat themerge process to
include the changes we have made to our database andsite
structure.
To merge and publish the data
1 On the Database Merge toolbar, click Merge to New Site
(orclick on the context toolbar).
WebPlus generates a new website(adding the suffix _merge2 to
thefile name) in a separate window,creating a {MM:Image Name}
pagefor each record in the database.
Youll see these pages listed on theSite tab.
Youll also see that WebPlus hasreplaced the page name
placeholdertext with the text found in eachImage Name field. If we
had notreplaced the default page name withthe {MM:Image
Name}placeholder, all of these pages wouldhave been named Page
3.
2 Double-click on one of yourgenerated pages to preview it.
3 Optional: To adjust picture scaling and alignment for any
individualpicture frame, right-click the frame and click Frame
Properties...
When youre happy with your page layout, youre ready to
publishyour website.
4 On the Standard toolbar, click Publish to Disk, or Publishto
Web.
When you save a website, WebPlus remembers the current data
source and reopensit automatically the next time you open the
siteso as long as you're using the samesource, you won't need to
reopen it yourself.
-
Image CatalogueFurther Development16
5 In the Publish dialog, select all thepages of your site,
except for theDraft Layout page created in section1, Preparing the
site.
6 Choose your publishing options asrequired, and then click
OK.
7 View your site in your web browser.
8 Click on an imagethumbnail to open thedetails page for
thatrecord.
Weve used a simple example for our example, but of course you
cancreate more elaborate sites, adding multiple database fields to
the detailspage, even additional images if required.
Note also that WebPlus lets you present other types of
contentproductlists, contact lists, e-commerce data, and so on,
from a variety of datasources. For more details, see online
Help.
For details on the choosingyour publishing options, see
theonline Help or the Previewing &Publishing tutorial.