|
To use the Zoom Search Engine in NOF, we need to do two things:
- Create a custom “search results template” in NOF so that our search results match perfectly with the look and feel of our website.
- Create at least one FORM where our visitors can enter a search term and click a button to start the search process
Step 1: Creating a “search results template” for Zoom in NOF
Zoom ships with a “plain vanilla” HTML template that it uses to generate the search results. While it is possible to add your logo and colors to this page and use it, we will create a custom search results page in NOF instead and tell Zoom to use it as the template for this website. This is a little more work, but it will make it possible for your search results pages to “blend” seamlessly into the design of your NOF website.
VERY IMPORTANT: To create the template and have it work correctly it is important that you follow these steps closely and that you do NOT rename the page in NOF to any other name other than is specified here.
To create the search results template, start NetObjects Fusion, open the website you want to index and follow these instructions:
Creating a “hidden” page in NOF
Note: NOF Version 8 users can bypass this step by simply checking the box that tells NOF that is should NOT include the search results page in navigation.
Since we don’t want the search results page to be visible in the NOF menu structure, we need to create it as a “hidden” NOF page. Fortunately this is easy to do. From your HOME page (in the site view) create a new page called DNP (short for “Do Not Publish”). Press the F3 key to display the Properties screen, select the second tab and check the “Don’t Publish” box for this page.
Then create a new page BELOW the DNP page called search_template_src
(Do NOT change the name of this file and be sure to use lowercase letters).
Then put whatever text you want to appear on the page title.
When you are finished your site view should look something like this:
Embedding code from the original Zoom template into our NOF replacement template
Now you are ready to configure the search results template page so that it will work with Zoom after it is generated by NOF. This is easy and only requires a couple of changes.
Switch to the PAGE view in NOF for the “search_template_src” page to continue:
The first thing we need to do is copy the Zoom initialization code and CSS settings from the original search_template_src.html file that ships with Zoom and put them on our NOF search_template_src page.
This file is located under the folder where Zoom is installed. On our computer it was in:
C:\Program Files\Zoom Search\scripts\PHP or ASP
Open the search_template_src.html in Notepad, highlight this section (everything between the HEAD tags - be sure to get the <!--ZOOMINITIALIZATION--> tag ) and copy it to the Windows clipboard:
Note: If you want to change any settings to better match your site settings, you can edit these CSS items before you paste them into NOF. To do this we recommend that you paste them into a new Notepad file first so that the original file remains unaltered.
UPDATE:
This section of the tutorial was updated 11-15-04 to show a different method for inserting the Zoom initialization and CSS code. This method allows you to have CSS settings for LINKS that are different from the site style.
After you have copied the block of code from the original file (as shown above) open Windows NOTEPAD and PASTE it into place. Then place your cursor BELOW the code and add <!--ZOOMSEARCH-->
If you want to add additional CSS to format the appearance of LINKS to be different than the defaults for your site style, add them inside the STYLE block before the .highlight entry.
When you are finished, it should look like this (note this example has CSS overrides for LINKS):
After you are satisfied with your CSS settings (or have not changed them), press CTRL+A (or use the menu) to Select ALL and then press CTRL+C (or use the menu) to COPY the new code to the Windows clipboard.
There is one more step needed to complete the template page so that Zoom can use it.
Select the TEXT tool and draw a rectangle out the width of your text area on the layout region.
Hint: If you are not careful, then you may accidentally anchor your text box on the master border or on top of another object that you can not see. If this happens, your search results will appear in your master border! We suggest that you follow the steps we outline here closely.
(We apologize if this seems VERY basic, but this is a place where you do not want to make a mistake!)
Select the Text Tool by clicking the letter “A” on the toolbar. Then click near the center of the layout region and draw out a text box (about 1”x1”).
Then press CTRL+T to open up an HTML embed point and press CTRL+V (or use the menu) to PASTE the code from the Windows clipboard into the box.
Press OK when you are finished.
This block of code tells the search.php code that Zoom generates where to start inserting the custom HTML generated by the Zoom search results into the template output and the CSS settings tell it how to format the results.
Now use the ARROW keys to move the textbox all the way to the upper left of the region. Then take your mouse and drag the right edge over to the right side of the layout region. When you are finished it should look like the single line text box you see on the next screen shot (where the mouse cursor indicates).
Modifying the master border for our search results page
The normal PHP code generated by Zoom will put a FORM with a Search Button and an entry field on this page at runtime. Since we want to have our FORM in the master border, we are going to create a custom master border for this page that does not have it (since two of them on one page would look silly).
To create a custom master border for the search template page, click the master border (to select it), then on the Properties window (F3) click the Add/Edit button. Click Add to create a new master border and call it SearchTemplate and base it on the DefaultMasterBorder (or the border of your choice).
That’s it! Your NOF custom search results template page is complete!
Team LANSRAD Advice: If you have tried to implement Zoom in your website before using this tutorial, make sure that you have removed ALL other occurrences of <!--ZOOMINITIALIZATION--> and <!--ZOOMSEARCH--> from your pages. You will get undesirable results if you have these tags in the wrong places!
Note: We still need to tell Zoom to use the NOF generated page for this website as the template for search results, but we will do that at a later point in this tutorial when we configure Zoom.
The next step is adding a search FORM to our website so visitors can use the search engine.
Step 2: Linking Zoom Search to Your Web Pages in NetObjects Fusion
Hint: If you only want to have a link to your search page instead of an entry form and a Search button all you need to do is create a link to ./html/search.php (if the link is on your home page) or a link to ./search.php for your other web pages.
Since we want to have our search form available on all our web pages, we are creating a new master border called ZoomSearch based on the default master border. This border will be used on all pages where we want our search form to appear EXCEPT for the HOME page - it will have a different master border (which is a copy of this one with one setting changed).
Note: The reason a different master border (and search form) is required for the HOME page is due to the way NOF works with file paths and locations when publishing in STRUCTURE view. Since we are using this publish method, we will have to have a different search FORM for the home page than the one we use on other HTML pages in our website.
This is because the search.php (and other Zoom files) are located in our /html directory - not in root directory.
Note: If you use one of these other methods - you may have to adjust your file paths accordingly and the extra master border used on the home page may not be needed. The only other alternative would be to copy the Zoom files into the HTML folder AND into the ROOT folder of the website. This is a messy solution and one that is not easily maintained so we decided to use two different search forms instead.
Adding the Search Form to the “ZoomSearch” Master Border
To create the new ZoomSearch border, open any page (except the home page) where you want to have the search form in the PAGE view. Next click the master border of the page to select it, then click the Add/Edit button. Then click ADD to add a new border called ZoomSearch and base it on your regular master border. Finally select ZoomSearch as the active master border.
Please Note again that you will use this ZoomSearch border on all pages where you want the search form to appear - except for the HOME page. (sorry to repeat this - but it is important!)
Now you need to add a search form to our ZoomSearch master border. Then use the form toolbar to place a FORM REGION on the master border:
Click the Settings button on the form properties (F3) and in the Action field type:
./search.php
Note that this is all lower case and that the ./ shows it is a relative path to the other pages in the HTML folder (remember we are publishing in STRUCTURE style). Again - this path only applies to pages OTHER than the HOME page ( index.html) as will be discussed below:
Also be sure to change the Method to Get since this is required by Zoom.
Note that in our case we placed the form region below our navigation bar. Next use the form tool to add a SUBMIT button to the region and label it as Search:
Finally add a entry field to the form region and label it as zoom_query (note this is lower case!):
When you are finished your Search form should look like this
We are almost finished in NetObjects Fusion!
The final step is to copy the ZoomSearch master border to a new border called “Home” and change one setting on the search FORM of that new master border so we can use it on the HOME page.
To do this, click the ZoomSearch master border to select it, then click the Add/Edit button. Next click ADD to add a new border called Home and base it on the ZoomSearch master border.
Now switch to the PAGE view of the HOME page and select the “Home” border as the border type.
Modifying the Search Form for the “Home” Master Border
After you have selected the new “Home” master border, click on the search FORM to select it. Then click the Settings button on the Property window (F3). Change the Action to say:
./html/search.php
Note that this is all lower case and that the ./html shows it is a relative path to the HTML folder from the location of INDEX.HTML which is published in the ROOT of the webserver (remember we are publishing in STRUCTURE style). This path only applies to the HOME page ( index.html). This is why we had to have two different master borders with the search form on them.
Again be sure to verify that the Method to Get since this is required by Zoom.
Our HOME page is now Zoom Search enabled
and we are ready for the last step in NOF!
HOT TIP: Avoid Maximum Compression in NOF!
Zoom must “reuse” the HTML template file created with NOF for your search results page.
Be sure to turn OFF maximum compression in NOF to avoid corruption errors!
Publishing LOCAL to create the Zoom search results template page
The last step in NOF is to PUBLISH LOCAL so that NOF will generate our Zoom search results template page.
Click the Publish Site button and set NetObjects to publish to your hard drive:
Note: This is a REQUIRED STEP. NetObjects Fusion will not generate the page to be used as a template if you do not publish locally at least one time. It is also important that you do not delete this page since it will be used by Zoom every time your website is indexed!
That is it! We are finished in NetObjects Fusion!
|
Using the Zoom Search Engine with NetObjects Fusion
