WebStyle 4 RollOver/Java/Templates - Newbees Tutorial Overview?

[rjlasky]

Is there anyone at Xara or at some other web site that can provide an overview/orientation for newbees on rollovers, java, and intelligent menu and template tweaking?

Subjects like:

- How webstyle roll-over menus work - generally

- What JavaScript is?

- How to read JavaScript - what different parts mean and what they do - overview.

- How to place the necessary files correctly in a site. (What files necessary, what folders, making references understandable).

- How to make adjustments in the Java ./ ../ etc. (What to change, where?)

- The difference between local and uploaded references and typical pointing problems.

- How to insert webstyle objects into Adobe Go Live or other generic programs where you want it.

- How to touch up or make changes in the menus after changes are required.

Make the tutorial general so it doesnt say, "just point it here in dreamweaver and its magically inserted" show us how to do it with all authoring programs.

Thanks for helping the learning curve along!

[Xara Support]

<BLOCKQUOTE class="ip-ubbcode-quote"><font size="-1">quote:</font><HR>Originally posted by TMA:
Is there anyone at Xara or at some other web site that can provide an overview/orientation for newbees on rollovers, java, and intelligent menu and template tweaking?

Subjects like:

- How webstyle roll-over menus work - generally

- What JavaScript is?

- How to read JavaScript - what different parts mean and what they do - overview.

- How to place the necessary files correctly in a site. (What files necessary, what folders, making references understandable).

- How to make adjustments in the Java ./ ../ etc. (What to change, where?)

- The difference between local and uploaded references and typical pointing problems.

- How to insert webstyle objects into Adobe Go Live or other generic programs where you want it.

- How to touch up or make changes in the menus after changes are required.

Make the tutorial general so it doesnt say, "just point it here in dreamweaver and its magically inserted" show us how to do it with all authoring programs.

Thanks for helping the learning curve along!<HR></BLOCKQUOTE>


**The key point to remember is that you do not need to know any JavaScript to use the navbars provided within Webstyle.

JavaScript is a scripting language. It is embedded within a web page that is interpreted and executed by the Web browser.

When you create a navbar in Webstyle

a) The style of navbar you selected along with the amendments made to the original style is saved within your specified project folder. This allows the style with the amendments made to be re-selected at a later time should you wish to make additional modifications etc.

b) The Graphic files, JavaScript files and any HTML files are exported to your selected location. These are the files, which are used to display the navbar. A Navbar consists of one or more buttons as well as sub menus if specified. Each button supports several states. A mouse off state, mouse over state and a selected state. This allows a different graphic to be displayed at each state. As an example, a navbar will show a particular graphic for a button (mouse off state) when you place your mouse pointer over it a different graphic is displayed (mouse over state)

When a navbar with no sub menus is exported all three states mentioned are supported. A Navbar with sub menus supports mouse off and mouse over states.

Inserting the Navbar in your web page

c) Once you have exported a navbar from webstyle you need to reference the javascript files within the source code of your html. This is achieved by using a script element <script src=�NameOfFile.js� ></script>.

Assume you were inserting an image into your web page. The image would be stored in a particular location and you would insert an image source element in your web page to reference the location of the image such as <img src=�folder name/someimage.gif�>

When a web browser loads the web page, it reads the html and after reading the image source element, the browser will retrieve the image specified from the location specified and allow it to be displayed in your web page. A script element behaves in an identical manner

As an example, Assume you had
<script src=�xaramenu.js�></script><script src=�images/navbar.js�></script> inserted in your web page. When the browser loads the page, it will read the script element and retrieve the javascript file xaramenu.js and navbar.js. Next these javascript files contain the information to cause the graphics to be displayed in the web page and provide the behaviour specified.

When you use the FrontPage add-in or Dreamweaver Extension the insertion of the script element into your page editor is automated. There are instructions on inserting a navbar within notepad and other page/text editors within the webstyle faq at http://xara.com/support/webstyle which can be used as general guidelines when inserting in other page editors.

Uploading your web site including navbars to your server


d) A common issue people tend to encounter is with their navbars not being displayed within their published pages. The information below should be used as a check list when determining the cause of this problem.

1. Have you uploaded all the files associated with your navbar?. If your navbar has sub menus then there will be 2 javascript files. One named xaramenu.js and another bearing the same name as the set of graphics exported. There will be 2 graphics for each button upon your navbar along with an additional graphic.

2. Is the folder in which you saved your graphics and JavaScript file(s), at the same location relative to the web page upon your web server, as the folder in which you saved your graphics and JavaScript file(s) is to your web page on your local drive?

Assume you save your navbar (the graphic files and javascript file(s)) in the same location as where your web page is saved.

However when you uploaded your web page and all associated files, you decide to place the files for the navbar in a separate folder to your web page named graphics. The navbar will not be displayed when viewing the web page. This is because the script references inserted in the web page are looking for the javascript files in the same directory as the web page and not in the graphics directory.