Page View: Page View is where the web page is designed.
The Layout window is where you set the page size, background color or image (if you want to make it something different from the site style default), you also add sound files through the layout window. Clicking the HTML tab allows you to add javascripts and applet parameters if you are adding them to the web site.
We have selected the Site Style and now we will begin making changes and adding items to the page.
Example: Page view with new Site Style
Look at the page set up. You will see the Master Border which is marked by the button in the upper left corner. The guides for the page section off each area, Banner, page area. Not show is the bottom of the page where the text NavBar is located.
Tools: Site Settings: Click tools, then Site Settings, to add meta tags, author's name, and other general information. If for some reason a backup folder isn't created when you save the .nod file (NetObjects Fusion's default file extension), a backup folder can be created here. It should be called "Backups" if you have to create one.
First tab in Site Settings - General Tab
Meta tags are added here along with Author's Name, etc.
Screen Shot of the Fusion Interface with the toolbars, page style, HTML tab, Preview tab, button bar, and banner - this is a no frames style
The page size in this image is too large. It will have to be reset to fit the size used on NJPCUG's web site - 600 pixels. Type in the new size. If the page guides have been expanded because an image or other element has caused it to enlarge, you will have to move items back within the 600 pixel range. You can increase the length of the page to any size you need. This will allow the page to scroll.
Adding Sound to the web site:
Choose the second tab in the page layout properties, browse to locate the directory where your midi files are, select a midi file. If you want a continuous loop of music, you must check the continuous loop box.
You can see all the sound file windows open in the image above.
Adding Frames: To add frames to the web site, click in the MasterBorder, when the MasterBorder Properties window opens, click the second tab and choose a frame style. Uncheck the Frame border box if you want borderless frames. (This is the style I use. I don't like a box around the frames.)
MasterBorder Properties - Frame selection options
The MasterBorder has been selected and the button has changed from gray to red.
Click the frame style you want to add to your web site. I used the "top" frame.
Navigation Bar: The Navigation Bar buttons will be set up if you build your basic web site on the Site page. (Individual buttons can be added to a page by clicking the button icon on the toolbar) A button for each page created will be added to the button bar.
The button names can be changed by clicking the Edit drop down menu and selecting Custom Names. A banner can also be renamed and the site extension edited under this menu option on each page.
The frame setting for this site is a top frame. On the NJPCUG site we have a 600 pixel frame width with a navigation bar that is always present on the side. The pages added to the web site are created to fit within the 600 pixel frame. The 200 pixel frame on the left of our site has the button bar for the entire NJPCUG web site and is always present as you navigate throughout the web site. SIG and meeting pages have their own navigation bar or button bars.
Customizing the NavBars
To make a button bar across the top of the page select the Navigation Bar, the Navigation Bar Properties window will open. Changes to the bar can be made here. You can also add rollovers in this window if the site style you have selected supports this effect.
Begin by selecting the NavBar
Choice shown is the Primary Navigation bar. To change the bar to a horizontal bar some changes have to be made to the page. The Primary setting is too large because of the number of buttons, if the button spread is larger than 600 pixels it will enlarge the page frame. Select Secondary under the Button type drop down menu.
In this situation we are referring to a width for the NJPCUG web site only. On a site with an 800 pixel width, you would be able to fit more buttons is you wanted a horizontal NavBar. Just remember if there are too many buttons and the page size expands beyond the viewing capacity you will end up with a side to side scroll bar at the bottom of the page. This happens sometimes but I try to avoid it.
If you want a rollover button, place a check in the box alongside that option. Click in the Master Border and move the guide slider over to "0" so that the page is one 600 pixel section.
Making the changes:
Open the NavBar Properties window and change the setting from "Primary" to "Secondary". This will select the smaller size buttons.
You may need to move any images down in order to make it fit.
Now we will move the NavBar into the large sectioned area.
You can see that the NavBar is sitting on top of the image. We can fix this by changing the NavBar properties from "vertical" to "horizontal". First we need to move the sliding guide tab all the way back to the zero setting.
Now that the guide tab is reset, we will start to customize the NavBar.
The secondary buttons are still to large for the frame. You can see that the page width has enlarged. We have to create a custom NavBar in order to make it fit the page. We will need two rows of buttons in order to have all the buttons on the page. In the image above you can see the NavBar Properties window on the right and the editing window it open on the left (the larger window).
Begin by making sure the button style is set for secondary, then choose the "Custom" option. You will see the window picture above. Start by highlighting the "Home" button, click the arrow button to move the Home page into the "Web Page/Name in NavBar area. Do this with each button you want in the first bar. There are 10 buttons, so add five to the first bar.
Now you will have to click the button icon on the side toolbar to create the second button bar. It is icon #9 in the outer left toolbar. Click under the Navbar we just customized to place the second NavBar. It will put a "Home" button there. Now click custom to make the next button. Delete or uncheck the Home button it in the upper NavBar so it isn't needed in this one.
Now enter the next 5 buttons from the custom setting window to finish adding the rest of the buttons.
You can see the last five buttons have been added in this example.
Now we will align the two bars and copy and paste them on each page in the web site. Since we changed the original button bar style, we now have to add it to each of the pages. Shift/click the two NavBars to select them, select the last tab in the properties window to align the bars.
Now that the two bars are aligned, copy and paste them on each page. Control/C to copy, Control/V to past them on the page. Click the mouse button where you want to paste the bars. Drag the two selected bars to center them on the page. Do this with each page until you have NavBars on each page. Don't forget the "child" pages under the SIG page.
Now we need to add a NavBar to the child pages in order to be able to navigate through the SIG pages.
Click the Button Icon to add a new NavBar, then select the level in the properties window, in this case it will be the current level, deselect the home page since it is already in the upper NavBars.
In this example the NavBar selection is in Primary - you can change this to secondary. This just shows the new buttons in a larger format.
Add the new NavBar to each of the child level pages.
*Choose whichever navigation bar style that compliments your page best. Across the top of the page, seems to work best on many of the NJPCUG pages. Location choice will also depend on the style of your page. If you have a lot of things on the page, it will look too busy with a side bar.
If you like the Primary style and it looks to busy on the left side, try moving the buttons to the right side of the page. It offers a unique look.
Text: To add text to the page, select the text tool and draw a text box.
This image does not have the top NavBar. It is the original page design.
Type the text inside the text frame. A blank text frame is pictured in the above image. You draw in the text frame and then type inside of it. To change the color of the text click the color swatch and select a new color. Use the properties box to edit all the text settings, font, size, bold, etc. To create a link, highlight the text, click the link button, and select the link type. If it's on the web site pick the page you are linking to, if it's an external link, click the next tab, add the url or email address. If you are using white type on a black background and it doesn't show up when you *generate the page, go back to the page, open the text properties box, click the format setting, change the automatic setting (black) to white, click the background tab and change that automatic (white) setting to black. This should fix the text problem. This problem doesn't show up in the preview mode. It occurs after the page has been generated.
To add images or animated gifs to the web page, click the image icon and choose the image or gif from the directory it is stored in on your hard drive.
To navigate through the pages, click the arrows at the bottom of the page. The down arrow takes you to the second page in the set or the first page after home. (In the hierarchy view, Home is at the top, the others below it). To go to the next page click the right arrow. If you have a child off the page you are on you need a down arrow click to access the first child and then right arrow across to view the others. You can also click the directional arrows icon and click on the menu that opens to go to a page. After you have finished working on all the pages in the site you will be ready to publish the pages to a local directory or to the web site.
This is just the basic parts of a web page, banners, navbars, text, and jpg's or gifs. We will learn how to add Java Applets and Javascripts in the next sections. At this point you may want to publish/generate your site to verify your links are working correctly and see if things are centered and if the text is the right size and color.
*Generate: when you are ready to publish the files, you click the publish icon and then it takes you to the final page in the web site creation, the publishing area, all the files and information can be viewed here. To create the web page you click the "Generate" option.