Articles

DJ Life Type Template in grey colors for DJs with new forms for comments with different
colors heads.

Download, install and test it. And don't forget you can change pictures of any template and make
your own style.

Download this template

Life Type Template in grey and red colors with an opened book logo.

Download this template

Life Type Template "Ladybird" in green summer colors and images:
sun, grass, leaves, flowers and bugs.

 Download this template.

Life Type template "Old Style"
This template in grey-beige colors in old style.

Download this template.

Life Type template "White Bird"
This template in yellow and red colors with white bird image as a logo.

Download this template.

LifeType Template "Green Leaves" was made by JuliettaRose Web Development Studio.

This template is in green and light-green colors. It has text-only navigation bar, titles in green color, links in red color.
Bullets are small houses and leaves.

Download this template.

User Friendly Interface

Writing articles is comfortable with the included state of the art WYSIWYG editor. Adding pictures and sound files (for Podcasting) is just a matter of browse and click.
The Dashboard provides you with all the information you need every time you log in. Recent articles, comments and trackback as well as brief statistics get you updated about your blog immediately.

Choose your Style

Looking for a nice design for your weblog? Go check out the many freely available templates. Installation is as easy as uploading a file through your administration interface!

Bloggers love it

To create a navigation bar in which a mouse event triggers the display of an animated version of a navigation button, use Macromedia Flash. Flash enables you to create special animation effects, such as animations that overlap one another in the navigation bar or continue to play after the triggering mouse event has ended. Such animation effects are relatively simple to create in Flash, but are far more complicated or even impossible to create using HTML code or JavaScript.

To create a navigation bar from original button graphics that you can easily turn into rollover states, use Macromedia Fireworks. Fireworks creates the necessary rollover JavaScript, which assigns the appropriate mouse event (such as rolling over or clicking) and displays the associated graphic. You can also create effects such as glows and shadows using Fireworks Live Effects. You can optimize the original images in a Web-ready file format (GIF or JPEG) and export the optimized images and HTML code for placement directly into a Dreamweaver document, all without having to write any HTML code yourself.

Note: You can also create a graphical navigation bar with rollovers in Dreamweaver, using images you import from an image-editing application. If you want a navigation bar that needs to be customized to open files in another window or frame on your site, for example, consider creating a graphical navigation bar in Dreamweaver.

Make a text-only navigation bar with Macromedia Dreamweaver for a navigation structure that's easy to create and download. A text-only navigation bar–a row of text links arranged horizontally or vertically on a page–doesn't require any work in an image-editing or illustration program. It is minimal in file size and downloads almost instantaneously regardless of your visitor's Internet connection configuration. In addition, text-only navigation bars are fully visible and functional in nongraphical browsers.

Creating a text-only navigation bar in Dreamweaver

You can use Dreamweaver to add a text-only navigation bar to an HTML document in your local site with very little effort.

To create a basic text-only navigation bar in Dreamweaver, start with a document in the site you want to navigate, or create a new site and new document.

Place the text for navigation bar links directly in the HTML document, or create a table and enter text in the table cells, as in the example above. Using table cells gives you more control over the placement of the text links on the page. With table cells you can also add a background color to each button for a more visually interesting navigation bar. For information on working with tables, see Creating Tables in Dreamweaver 3 online Help.

After entering text for the links, use the Property Inspector to assign a link destination for each button (see Creating links in Dreamweaver 3 online Help). In the example, different colors are specified for new unvisited links and visited links (see Defining default text colors in Dreamweaver 3 online Help).

Note: Browser preferences can override the formatting choices specified in Dreamweaver, including text link color and table cell background color. The colors you specify may not appear for all your viewers.

By default, a linked file appears in the current window or frame when the link is clicked. You can also use HTML frames in your document to specify that the linked file open in another frame in the current document, or in a new window. In the example, frames are used to display the navigation bar on the left side of the page, and display the linked file for each navigation button on the right side of the page. With this method, the navigation bar remains visible on the page even as other documents are displayed in the browser.

Dreamweaver creates the HTML code that specifies the text link color, the link destination file and the location where it will open, the table parameters (if used) and other specifications. View the HTML code for the Dreamweaver navigation bar example.

This excerpt from the Dreamweaver-generated HTML code specifies the following parameters:

 
    the text color for new and visited links ( link and vlink )
    the table cell background color ( td bgcolor )
    the text link font ( font face )
    the linked file ( a href )
    the target frame where the linked file will appear ( target )
    the link text ( LINK 1 )

<body bgcolor="#FFFFFF" link=ffffff vlink=000000>
<table border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="3"><img src="images/1pix.gif" width=100 height=2></td>
</tr>
<tr align="center">
<td bgcolor="#0066CC">
<img src="images/1pix.gif" width=2 height=35"></td>
<td bgcolor="#0066CC">
<font face="Arial, Helvetica, sans-serif" size="4" color="#FFFFFF"><b>
<a href="1.html" target="right">LINK 1</a></b></font><br>
<img src="images/1pixel.gif" width=95 height=1></td>
<td bgcolor="#0066CC"><img src="images/1pix.gif" width=2 height=35"></td>
</tr>

To decide what type of navigation bar would work best for your site, consider the following:

- What level of structural or graphical complexity do you want your site to have?

- What type of Internet access will visitors to your site be using?

- What are your strongest skills or interests in Web development?

Dreamweaver 4 automatically prevents new Document windows from overlapping your panels and the Property inspector. When you create a new Document window, if its full size would overlap a panel or inspector, Dreamweaver makes the window smaller to avoid overlap.

But sometimes you may want all of your Document windows to be exactly the same size, regardless of your panel layout. There are three ways to set your windows to the same size: use the Window Size pop-up menu in the status bar; hide the panels while creating a new window; or temporarily allow new windows to overlap panels.

To set Document windows to a standard size:

1. If the size you want is already in the Window Size pop-up menu, skip to step 8.
2. Click in the Design view of the Document window.
3. Choose Edit Sizes from the Window Size pop-up menu (at the bottom of the Document window). (If the pop-up menu doesn't appear when you click it, the insertion point is probably in the Code view; click in the Design view and try again.)

The Preferences dialog appears, with the Status Bar category selected.

4. Click the blank space below the last value in the Width column.
5. Enter Width and Height values for your standard size. To set only the Width or only the Height, simply leave one field empty.
6. Click in the Description field and enter descriptive text about the size you added.
7. Click OK to save the change and return to the Document window.
8. Immediately after creating a new Document window, choose your standard size from the Window Size pop-up menu.

The window changes size to make the Design view the size that you specified. (If you're showing both Design view and Code view, the resulting window will be larger than you specified, because the Window Size dimensions apply only to Design view.)
    
To hide the panels while you create a new window:

1. Press F4 or choose Window > Hide Panels to hide the panels.
2. Create a new Document window.
3. When you've created all the new windows you need, press F4 again (or choose Window > Show Panels) to make the panels appear.
    
To temporarily allow overlap with panels:

1. Drag a Document window until it overlaps with at least one panel to the right and at least one panel below it.
2. Create new Document windows.

As long as at least one Document window overlaps panels, new windows are also allowed to overlap panels. If none of your windows overlaps a panel, new windows are created smaller to avoid overlapping panels.

There may be times when you want to have links appear on your Web page without the default underlining. There are two ways to do this. You can remove link underlining for individual links on a page, or you can remove link underlining for all links on a page.

Removing underlining for individual links
The tag style="text-decoration:none" removes underlining for any link to which it is applied.

To remove link underlining for individual links on your page:

1. Open in Dreamweaver the document that contains the link from which you want to remove link underlining.
2. Select the link.
3. Choose Window > HTML Source to open the HTML source window.
4. Add the style tag after the a href tag for the selected link.
Example: <a href="info.html" style="text-decoration:none">
The link appears on your Web page without an underline, but all the other links on the page are still underlined.
     
Removing underlining for all links on a page
If you don't want any links in your web page to be underlined, you can add a style type into the head of your HTML.

To remove underlining from all links on a page:

1. Open in Dreamweaver the document from which you want to remove all link underlining.
2. Choose Window > HTML Source to open the HTML source window.
3. Paste the following in the HEAD area of the HTML source code:
     

<style type="text/css">
<!--
a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}
a:hover {text-decoration: underline}
-->
</style>

All of your links appear without underlining.

If you want to add space around an image (for example, if you want a space between an image and the text that appears next to the image), use the V Space and H Space text boxes in the Property inspector.

To add space around an image:

1. Select the image in the Document window.
2. Select Window > Properties to open the Property inspector, if it is not already open.
3. Click the expander arrow to expand the Property inspector to its full dimensions, if necessary.

4 In the Property inspector, do any of the following:

-Type a value in the V Space text box to add space in pixels along both the top and bottom of an image.
-Type a value in the H Space text box to add space in pixels along both the left and right of an image.

Make sure that you and your localizer understand how browsers read the HTML code for special characters. For example, if you are working with translated text in HTML mode, be careful never to enter European characters into the code itself. The following code will display incorrectly in certain browsers:

Here is the correct code.

If you want to make sure that your HTML code for European characters is always correct, you can insert special characters. To insert special characters choose Insert > Special Characters > Other and select the character you want to insert.

You can also cut translated text from other documents and paste it into the Dreamweaver Design view. When you do so, Dreamweaver automatically writes the correct HTML code for the special characters. If you work in Code and Design views simultaneously, be careful never to paste text with special characters into the HTML code.