If you want to build a website and you have a low or nonexistent budget for tools, you can still get the job done. One of the tools that you can use is: CSS Generator, which will allow you to build custom web site layouts.
CSS Generator
Dreamweaver offers some great customized layouts which can save you a lot of time. Fortunately, Dreamweaver isn’t the only game in town. In this section, we’ll you’ll see what CSS Generator can do. Within a few minutes you can create a CSS layout that’s ready to use. Not only that, but you can also use the HTML5 DOCTYPE.
In this section I’ll input a number of values, just to give you an idea of what the final result will be. Here are my settings:
- DOCTYPE: HTML5
- CSS Reset:
- {margin: 0; padding: 0;}
- Layout Width: Fixed
- Width: 960 pixels
- Header: Specify Height enabled 200 pixels
- Sidebars: Two sidebars, one left, one right, 250 pixels spacing for left, 125 pixels for the right
- Footer: Specify height enabled, height 100 pixels
- I also chose to keep the footer at the bottom of the browser window
When all of these settings are entered, the blue “Get the Link” button becomes active. Click on it and it brings up the page above, which shows you what your layout will look like. At the top left is a link that states: “Download .zip archive. When you click on it, it downloads two files, a .CSS file and an index file. You now have everything you need to get started with your layouts.
Another layout tool you may want to test out is: CSS Layout Generator.
CSS Tab Designer 2
Once you have the layout, your next consideration is navigation. If you try to build that from scratch, it can be very time-consuming, so in many cases it’s a better idea to use a third party solution, in this case, CSS Tab Designer 2.
With this program you can build menu designs that you can paste into your layout.
When you launch the program, this is what you’ll see.
Using the program is pretty straightforward. Under Tab Styles you’ll see several menu layouts. Some are in a horizontal format. Others are in a vertical format. To see what any given menu will look like, click on one in the Tab Styles pane, then click on the Fill with Samples link. The menu will appear on the right in the Preview window and in the far left, under Items, you’ll see a list of the menu tabs, all of which can be edited.
To see an external preview of the menu, go to Preview and in the drop down list, choose which browser you want to use.
The preview will be displayed in that browser.
Directly below the Item’s name are several control icons. From left to right, these allow you to:
- Add multiple items
- Add one item
- Delete item
- Move up
- Move down
- Edit Selected Item
For the sake of simplicity, I’m going to remove a few items from the Items list by highlighting the item, then clicking on the Delete icon. As you add or delete items, the results are instantly reflected in the Preview pane.
Now, we’re going to look at the Edit tool. Simply highlight an item in the list, then click on the Edit button. This brings up the Edit Tab dialog box and you can quickly change the name of the item and the Tab URL.
To add a new item to the list, click on Add Item button. In the dialog box that appears, enter the name of the item and the Tab URL. If you’re not satisfied with the item position. highlight it, then click on the Move Up or Move Down icons to change the position.
To control the font size, use the Preview pane. At the top right is a button that allows you to quickly change the font size. If you want more control over the text, you’ll have to edit the CSS. This will give you more control over the size of the font, the font itself and more.
In the Preview pane you’ll notice two tabs at the bottom of the pane. One is for a preview of the layout, the other is for the code. When I click on the code tab, you’ll see the HTML code, which also includes the CSS. When you’re satisfied with your layout and you want to export it, click on the Generate HTML & Images button or go to File: Generate HTML & Images (F8) and save the file. An option is to use Ctrl+C to copy the information to the clipboard for use in a layout.
Bear in mind that CSS Tab Designer 2 isn’t the only menu system that you can use. Here are a couple more menu-making programs that you might want to try out:
Web-based Forms
If forms are part of your layouts, you’ll want to check out:
