Creating A Custom Web Site Project From A Stock Style
Start a new blank site. This is an option from the menu bar choice: File > New Site > Blank Site
Create a New Style in Style View
The first thing you should do when you start a new site project is to go to Style View (click the Style icon). Create a NEW style by making a duplicate of the current one. This tutorial will explain how to do this in detail. Follow all of the steps in that tutorial. I like to name the new style the same as the current site project so that it is easily identifiable with the project.
Set a Site Background Image and Color
Locate a new background image if you wish to have a different background image then the one that came with the default style and save it into the assets folder where buttons, banners, and backgrounds are saved (in Fusion 11 your active style will be in a folder called Styles which will be in your site projects folder). This tutorial will explain where Fusion stores files and folders on your computer.
To set your new background, in Style View scroll down to where it says background. Click on the existing graphic and using the browse function on the Background Properties palette, navigated to the new image you saved in your style folder and selected it.
To change the background color on your web site click the paint bucket on the Background Properties palette and select a different color. You can also directly enter the RGB or HEX of a color if you know what it is by clicking the More colors option.
Click on the Selector tab (the body tag will be shown first). Go to the CSS Properties Sheet palette where you can set the background positioning and repeat options. You can set the background to float in the center, tile horizontally or vertically or both.
Linking the Navigation Buttons:
If you do not wish to use the default Nav Bar buttons you will need to locate or create different blank navigation buttons. You can look around in the styles that came with Fusion and see if you can find some colored navigation buttons that will work for you. This is the easiest way. If you cannot find anything that you like, you will need to create 4 new blank buttons using a graphic editing program. If you find some buttons in another style that you like you can use windows explorer and copy (COPY not MOVE) the button graphics from the existing stock style into the style folder for the new style you created.
If you have decided to use different navigation button graphics you need to select each of the button graphics (one at a time) in Style view and change from the stock ones to the new ones you copied into the assets folder. To do this scroll down in Style view to where you find Primary Button States. You will see 4 button states (regular, highlighted, regular rollover, and highlighted rollover). You click on each one and on the bottom of the Button Properties palette click browse and select the button graphics you wish to use instead of the default ones. Each state needs a new graphic selected. You can change the font, size, and positioning of the text that appearers on each button if you wish to. You need to do this again for all 4 of the Secondary button states.
Defining the Standard HTML Tags
While still in Style View you need to define the standard HTML tags (body, p and h1 though h6). Click on the Selectors tab (next to the graphic tab). Select each of the primary html tags one at a time and set the font and size of each. This tutorial will go over setting font size in detail. The tutorial is 6 pages long so press NEXT at the bottom to continue until the end. The tutorial will go over selecting CSS as the default setting as well as changing the code indent.
Go over our basic CSS file set up tutorial for more information
Creating the Page Banner
NetObjects Fusion uses a fixed graphic at the top of each page as the page banner. The banner component takes a blank graphic and creates a new graphic for each page by adding text you enter into the banner text input box in Site View. You can use the default site style graphic or just like with your Nav Bar buttons you can copy another graphic from one of the other stock site styles into your assets folder and select that new one as your banner graphic. You can also create your own banner graphic in an external graphic editing program. You also have the choice of using a Flash banner or using plain text with no graphic. To use text only, click on the banner, select the 2nd tab on the Banner Properties palette and change the drop down from Image to Text. Go back to the first tab where you can set the font, size, style, position, and off set to what you want to use. What you enter into the banner input box in Site View on each page will be used as the text for banners (same for buttons). This tutorial will explain where you enter banner text and nav bar button text. If you do not want to have a page banner auto-generated for you, you can delete the banner component from any page.
Configuring the Nav Bar Component and Page Margins
So far your new web site only has one page and we have only worked in Style View. You want to get your basic style and layout completed before you add any pages.
Next you want to set the site navigation component to custom and position it where you want it to show before you add any pages. Click on the Page View icon. Click on the nav bar component on your page to select it. Changed the display to custom by selecting the custom radio button. You can set the navigation bar to display either vertical or horizontal (the default setting is vertical). On the second tab make sure that these options are checked: Rollovers, Highlighted, Fly-out, and Auto-close. We will come back to the nav bar component later to create the menu once the site structure is created.
While in page view you can reset the page margins (top bottom left right) if you wish. This is done by grabbing the masterborder handles and dragging them where you want the spacing to be. This tutorial will go over masterborders and layout areas (not to be confused with a layout region). The tutorial will show you where the handles are located but more importantly it will explain the master border layout concept that Fusion uses. This is the main underlying principal of how the Fusion software works and you should understand this in order to use the software to its fullest advantage.
Creating the Site Structure
Next we are going to create all the pages that will hold the content. You want to create your site structure before you enter content so that you get your site navigation completed before you add any content. Go to Site View (click the site icon) and created all of the pages that will be needed. Click on the home page then hold your control key down and pressed the N key 6 times to make 6 primary pages (adjust the number of pages you create to match what you want in your web site). Fusion uses the default of “untitled#” when it creates new pages. You should re-name the pages you created to the page names you need for your web site. This tutorial will go over page naming, titles, banner and button naming in detail: You can add any child pages below your primary pages by using the same method ( select the page by clicking on it then press ctrl+n as many times as you want child pages). Rename the pages from untitled to the name you wish to use for them.
HINT: You want the Page Name to be as short as possible (preferably one word and NO spaces) as what you enter into the Page Name input box is what will be used as the actual name of the page that is created. Example: If you enter about in the page name box, the actual page is about.html, contact, becomes contact.html, etc. The page description is where you place a longer description and that will be used in the browser title bar (the very top line of the browser window). Page descriptions will be used by search engines as the page synopsis in their listing of your site. Go over this tutorial on search engine placement/ranking to get the full grasp of page title and meta descriptions You will want to write meta tags including your meta description for each of the pages. I prefer using masterborder and layout HTML insert for meta tags as described in this tutorial. You will notice that this is the first tutorial I wrote about 15 years ago. This is important and how it is used effects your page ranking.
Creating Your Site Navigation
After all of your site structure and pages are created you want to go back to a page (any page) by clicking the Page View icon. Once again select the nav bar component and click on the Edit Custom button on the first tab. You will see only 1 page (home). You now need to select each of the 6 primary pages on the left and put them into the navigation structure. Click the name of the page on the left side and press the Add button. To arrange the order you can drag and drop them to move up or move down. To remove a page select it and press remove. You can create an external link for any pages that are not generated in Fusion such as a blog, web forum, or cart software. This is done by selecting External from the drop down box and entering in the URL of the external link http://www.domain.com/page.html Click Save to add it. Rename it to an appropriate name. The default name is the URL so you will want to make sure you have a short descriptive name for this nav button. Then press the Add button to include it into the menu structure.
These tutorials will cover the nav bar component in depth if you need more info:
Using the Nav Bar Component
Using the Fly-out or drop down feature
Adding Content to Your Pages
Using the text tool (located on the standard tools tool bar) draw a rectangle on the page to hold text. Enter in your page textual content
IMPORTANT: If you are going to copy any text from any other software you must have your default paste settings in the Fusion program set to unformatted text to avoid importing rogue formatting and code. This tutorial will go over how you set the Fusion programs paste default settings
Now it is just a matter of adding content to your blank site structure.
Did you find this tutorial useful?
Do you want to keep this resource online?
Make a donation to keep gotFusion alive
This page was written by and is maintained by turtle