.: Javascript Include Tutorial
| Sign up here if you'd like to be notified when new tutorials are added to the site. |
Includes are files that the server will virtually insert wherever you tell them to go. One of the most common uses for this is style sheets. When you first make a style, you can decide to have that style work only on a single page or throughout the whole site. It's much easier and more efficient to define a style once rather than multiple times on a page or site. In fact, this is one of the main benefits of using Cascading Style Sheets (CSS). For example, where previously, using just straight html, you had to define the font properties in practically every paragraph, with CSS you only have to define it ONCE for the whole site. The same principle can be applied to Javascripts. Why have lots of different scripts to load a pop-up window, for example, when all you need is one.
For this tutorial we'll be using the code from the Pop-up Window tutorial as an example
-
Copy and paste the following javascript code into the <head></head> portion of your HTML code. If you already have the pop-up script from the previous tutorial there completely replace it with this code.
<script language="JavaScript" src="/includes/global.js"></script>
- This code basically says to the server "insert the javascript code from the named file here"
- You can place this javascript include code in the header of any and all of your sites web pages.
- In most sites, only the content changes while the basic layout and structure of the page remains the same. Wily web developers put style and javascript includes like these into master includes (usually split into headers and footers) which contain all the elements of a page (such as the main navigation) that are shared by every page in the site. More on master includes later.
-
Create a folder called includes in the root (top level) of your site.
- It's good to organise your site's files into folders that relate to each other - e.g. all images, news & events pages, etc. into separate folders.
- If you have a global stylesheet place it in your new includes folder as well - make sure you update all the links to it after the move. Dreamweaver will do this automatically.
-
Right-click here and select your browsers download option to get a starter javascript include page (global.js).
- Put/save the global.js file into your newly created includes folder
- Open the newly placed global.js file and check it out
- The original code in the pop-up tutorial that would normally go in the header of your html file must be opened with <SCRIPT LANGUAGE="JavaScript"> and closed with </SCRIPT> but we don't need to use those tags in our javascript include because we have them in our include link already. If you put other javascripts in this include make sure to remove this now unecessary code.
- Save any changes you might have made and your javascript and its include are good to go!
home :: news & events :: about us :: contact us :: portfolio
design :: print services :: internet solutions :: multimedia
 |
|
|
|
|
|
|
|
 |
|||
|
In our 75+ years of serving Northland we've come across plenty of time saving tips that are just too good to keep to ourselves. |
|
|
 |
|||
