WebDwarf Tutorials banner
WebDwarf logo
Code

Raw code, as we use the term here, is special unformatted text. The term "code" is often used also to refer to the CSS or HTML code that WebDwarf creates when you preview or publish your project. We use the term "raw" to make it clear that here we are mostly discussing code that you enter.

In this tutorial, we cover the following topics:

Introduction to code
Some simple examples
Slightly more complex example  (CSS)
Code copy instructions
Header code
Body code
Body tag code
CSS positioning
Dimensions of a code object
Viewing created code in your browser
If the code doesn't work


Introduction to code

Compared to titles and text, WebDwarf will pass on raw code without modification. Raw code is thus best suited to adding banners, shopping carts, counters or other code that needs to be used without any modification. It helps a lot if somebody else has already written it!

Create a code object with one of these actions:
Any of these actions will open the Text Editor with a subset of the usual text-editing  commands. It will display Code Edit Mode in Text Editor title bar.

WebDwarf does not check for errors in the code you enter. Take care to ensure that the code is valid -- errors when you preview or publish your project are often caused by invalid code. Sometimes the code itself will work, but the object after the naughty code will malfunction. See Z-order.

A common error is to omit the last character or last few characters of the code, so this is something to watch carefully for.

You can also enter code as normal text (Rich Text); this is best for something that is mostly text but which in which you may want to enter occasional code -- say to make a line or show a small embedded image like a smiley.
Code button
Some simple examples

Before we get into the trickier stuff, let's start with are a few simple examples of code objects. These all do something slightly useful. To test, just copy and paste the code on the right into a code object on your own page. Or experiment right here!






Description                                            Code

Horizontal line like the one above

  
A button -- this one does nothing apart from look pretty



A Javascript alert box, useful for debugging. Test it here

<HR>

<INPUT TYPE="submit" VALUE="A Button">
<SCRIPT type="text/javascript">
alert("Just testing")
</SCRIPT>

WebDwarf does not touch any code you place in a code object. The code will show as text on your workpage. When you preview or publish, your browser will run the code and show the result -- hopefully the result you are looking for.



Slightly more complex example  (CSS)

If you give a text object a colored background with the Quick Editor > Shading tab, as we did with the grey boxes just above right, you'll see that the text starts exactly at the left hand margin. You can control the padding, the gap between the margins and the start or end of the text, with the CSS code below. Change the padding from 20 pixels (px) each side to whatever other value you want, Use it cautiously, as it causes a deviation from WYSIWYG -- your preview will differ slightly from what you see on your workpage.

Copy and paste the following code into your test page as a Code object, make some grey boxes then preview. Note the differences in the grey boxes, and also in the other text objects on the page. All should have your specified padding.








Code copy instructions
The code you deal with will normally be more complex than that above. Nearly always, someone else will have already written it, and they will give you some instructions like these:
<style type="text/css">
.dfltt{padding-left:20px; padding-right:20px}
</style>


Header code

WebDwarf does not have a method of adding header code -- unless you want to add it by hand after you publish. However, even though it is not strictly correct to do this, header code will often still function if added to the body as a Code object.


Preview all pages
Body code
To paste code into the body of your page:
Code button
Text Editor Save and Close
Preview current page
Body tag code

Less commonly, you may get an instruction  like this:
"Include this code in the <body> tag", and then will follow some code like this:
<body onLoad="SomeFunction()">

The intention of this code is to execute the Javascript function SomeFunction() when the page is fully loaded. The name SomeFunction will vary but will always match the name of a function elsewhere in the code.

We can't add code to the body tag, but we can modify the code and use it as a Code object. Like this:
     <SCRIPT type="text/javascript">
     SomeFunction()
     </SCRIPT>

Use the code as a normal code object on your page. Use the "To Front" button to move the code down the bottom of the finished page. (See Positioning on page) This ensures that the code does not execute until the earlier part of the page has loaded.



Positioning on page

For any object, there are two kinds of positioning:
Z-order may be important for code objects -- if one code object depends on another in order to run properly, that "another" should be lower in the z-order (nearer the back). If you have code that may need to run as the page is loading, it should be as near the back of the page as you can make it. You can even put it in the header.

Control code objects' placement accurately in the z-order with the Front/Back button set on the bottom toolbar:
 With four front/back buttons, you have very fine control over the exact z-order position of any code object within the body of your page.

Most times, you won't have to worry about all this. But do consider it if your code fails to run properly.




Z-order buttons
CSS positioning

Cascading Style Sheets (CSS) allow WebDwarf to accurately control the left/right and up/down position of objects on your published or previewed page (your finished page).  

Like any other object, a code object is wrapped in HTML <div> </div> tags on your finished page. This allows the code rectangle on your workpage to define the physical representation (x,y position and width/height) of the code on your finished page. E.g., if your code will display an image on screen, place the code rectangle (its bounding box), where the image will display.

If code has no physical representation on the screen -- i.e. it does not generate a fixed visible image, put CSS positioning off -- you save a hundred bytes or so of finished page size. Without CSS positioning, any visible objects will start displaying at the top left corner of your page, and work down from there in the z-order. So turn CSS off only for invisible code objects.

Moving objects like cursor trails can also have CSS positioning off -- the code itself has all the positioning information it needs.

Turn off CSS positioning by clicking the button on the top toolbar of the Code Editor titled "Remove CSS positioning tags".
No CSS button
Dimensions of a code object

Make a code object any size (dimensions) you like. For objects that appear in a fixed place on screen, make the code the same size as its physical representation. E.g., if the code will display an image of a certain size, make the code object the same size as the image. This makes it a little more visual on the workpage.

Otherwise, you could make the code object quite small, and place it in a margin or in the gap between paragraphs.

There are two ways you can change the size of the code object:
If you resize the code object with the mouse, you change the width and height of the object.  If you are annoyed by your code objects flopping to some favored dimensions  whenever you edit them, you may have set the scale by dragging while holding down the Alt key. So in the Quick Editor:
Viewing created code in your browser

To view the code that WebDwarf creates, preview or publish your page, then use your browser's View > Source function. This also allows you to edit the code, which may be useful on occasion.


If the code doesn't work

If the code doesn't work:
< Tutorials Home
Code button
Virtual Mechanics Logo
WebDwarf
®

Tutorials
Page Editor Button