04 adding an image catalogue - serif · image catalogue 2 further development adding an image...

Further Development 1

Image Catalogue

In this tutorial, we’ll use WebPlus’s database mergefunctionality to showcase a collection of artwork.You’ll 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 we’ll create an image catalogue for a graphic artist’swebsite. We’ll create a photo data source from a folder of images, andmerge the data into a repeating area on our page. We’ll then customizethe repeating area, and edit the data to create an attractive catalogue ofartwork samples. We’ll 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 databaseWe’re now ready to create our photo database. You can use a collectionof any images for this exercise, but before completing the following steps,you’ll 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, you’llneed 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.).


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 don’twant 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.


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.


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. We’ll start by creating a simple QuickShape, which we’lluse 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.


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 let’s 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, you’ll see PathName selected by default. ClickInsert to insert this field, and thenclick Close.


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, we’ll 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.


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 field‘Description’.

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 can’t see a thumbnail preview in the EditDatabase dialog, click in the Path Name field. The imageassociated with the record will be displayed.


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.


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 you’re 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, we’ll 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.


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.


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, you’ll see thepage name is updated with the{MM:Image Name}placeholder text. (You’ll seewhy we did this when wemerge the data.)

We’ve 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.We’ll use an anchor and a hyperlink for this.


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 anchor—we 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.


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.

You’ll see these pages listed on theSite tab.

You’ll 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 you’re happy with your page layout, you’re 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 site—so as long as you're using the samesource, you won't need to reopen it yourself.


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.

We’ve 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 content—productlists, 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.

04 adding an image catalogue - serif · image catalogue 2 further development adding an image...

Documents