|
If you've used our ActiveNotes component, you'll appreciate that it can bring your webpages to life. But to make your ActiveNotes really sing, you need to incorporate HTML. For us NOF users, that can be a bit of a challenge, because we use NOF so we don't actually have to know much HTML.
Here's a way to make NOF generate the HTML that you can incorporate into your ActiveNotes.
I've done it with  that includes a pic;
With this ActiveNote that includes a Go Menu;
And with that includes a form and uses the form handler component.
In general
I make a hidden page (instructions) on which I construct a whole lot of Layout regions. Each Layout region is the content for an ActiveNote that I want to put on another page. I just grab the relevant bit of the generated HTML from my hidden page to use as the HTML for a particular ActiveNote.
Note: This technique will only work if you publish Flat. The generated HTML from the hidden page will have relative paths to any included elements eg graphics. Those paths will only work for another page if they share the same directory, and the only way to ensure this reliably is to publish Flat.
Instructions
1. Make a hidden page (instructions).
[See my hidden page. (You'd never know it was there if I didn't give you the link. It's a blank page except for the little Layout Regions that I'm using to generate the HTML for my ActriveNotes. Use your browser's Back button to come back here once you've seen been there.)]
2. On it, construct a Layout Region to look the way you want your ActiveNote to look.
3. Click the HTML button for the Layout Region. Before Tag type in Start AN1. After Tag, type in
End AN1. (Your next one will be AN2 etc.) These act as flags for you when you inspect the HTML later. They show you which bit of the hidden page's HTML to grab to use in your ActiveNote.
4. Do a Local Publish.
5. Open your hidden page. You might have to browse to it to find it since it won't be showing in any nav bars since it is hidden. Once you have it in a browser window, right click in it somewhere and select View Source. The source file will open in Notepad.
6. Select everything from just after Start AN1 to just before End AN1. Copy.
Hint: Use Search to search for "AN1" if you can't easily find your Start AN1 flag. Hit Enter a few times around there so it is easy to see. Then Find Next to go to End AN1. Hit Enter a few times after it. Now the block of HTML you want is sitting there all on its own for you to copy. DON'T copy your flags. The first and last things copied should be < and > respectively.
(Why don't I just use HTML View and copy from there? Well, NOF puts in comments and odd things that don't actually get published. I feel more confident using the code that is actually published and that I've seen working.)
7. Go back into NOF. Go to the page on which you are placing your ActiveNote. Paste into the ActiveNote, like this:
8. Get the width of the Layout region you are using by inspecting the HTML you just pasted. Put this as the width of your ActiveNote on the tab in the ActiveNote component that asks for it.
See how I've matched the width here with the first width spec you can see in the larger screen grab above.
Otherwise, just configure your ActiveNote as you will.
9. Publish and check that the ActiveNote looks and works as you want it to.
______________________________________________________________________________
That's it. Good luck!
_______________________________________
This page was written, and is maintained, by Dallas
|
