Creating a CSS — Layout
In recent years, designing websites with CSS has become a popular trend. The advantages to designing a website with
Designing websites with
In this article, we’ll learn:
- How to create our layout in Fireworks
- Slice and optimize our graphics in Fireworks
- Create and design our website using the graphics from our layout
- Create our structural mark-up in HTML
- Create our
CSS which will control our layout and presentation of our website - Understand how
CSS positioning works - Understand how equalizing columns work in
CSS
If you would like to follow this article’s step-by-step development or even try your hand at creating a
Create our layout – Fireworks
A basic knowledge of Fireworks is needed to complete this section. If you’re not comfortable with this editor, you may use Photoshop. If you’re not comfortable with either, it’s recommended you spend a few hours visiting either’s help documentation. For our purposes, we’ll use Fireworks. Open Fireworks by following these steps:
- From the Desktop, locate the start button
- Select Programs>Macromedia>Macromedia Fireworks
Inside Fireworks, from the main menu, select File>New and enter the values as shown:
Import header and footer image
We’ll import the header and footer image provided from the project files download. In Fireworks, follow these steps:
- From the main menu, select File>Import
- Navigate to the directory which stores the header image
- Select OK
- Your mouse cursor turns to a carpenter’s hand
- Left click near the top of the canvas
- Adjust the X-Y coordinates as follows:
- X: 0
- Y: 0
Follow the same steps to import our footer image, except adjust x-y coordinates as follows:
- X: 0
- Y: 400
Create the dashed line
Our dashed line will serve as a visual separator between our left and right “columns.” Follow these steps to create it:
- From the main menu, select View>Rulers
- From the Vector tool bar, select the line tool
- Move your mouse cursor right below our header image to line up with 260 using the Ruler as a guide:
- Press and hold the shift key while dragging the line down and release
- In the properties panel, change the following settings:
- W: 1
- H: 298
- X: 260
- Y: 101
- With the object selected, change the stroke options color (1.) to #999999 (2.):
- Locate stroke category in the properties panel:
- Change the stroke category to hard dash:
Create the left column pattern
Our left column has a light gray background pattern to help visualize the difference between the two columns. Follow these steps to create it:
- From the Vector tool bar, select the rectangle tool:
- Draw a rectangle in the vicinity of the left column
- In the properties panel, change the following settings:
- W: 260
- H: 300
- X: 0
- Y: 100
- Select light gray as a filloption (#999999)
Create the background
Our website has a subtle patterned image which repeats through our web page. Follow these steps to create it:
- From the Vector tools bar, select the rectangle tool
- Draw a rectangle in the vicinity of the right column area
-
In the properties panel, change the following settings:
- W: 38
- H: 38
- X: 379
- Y: 135
- With the object selected, select fill option (1.) and enter color as dark gray (2.):
- Change texture to Mesh (1.) and set amount to 20% (2.):
Slicing our graphics
Each of our web graphics will be exported as JPEG images. With this in mind, follow these steps to set JPEG as the default export option:
- In the Optimize Panel, select JPEG – Better Quality:
Slice header and footer
We need to slice each of these graphics independently so that we can insert them in our web page when needed. Follow these steps to slice each one:
- From the Vector tool bar, select the slice tool:
- Drag the slice tool over the header graphic
- Width, height, x and y coordinates should match that of our graphic. Also, the graphic will have a green tint when sliced
- In the properties panel, give our slice a name of header:
- Follow the same steps to slice our footer graphic, except give our slice a name of footer
Slice our page background
Follow these steps to slice our page background:
- From the Tool bar, select the slice tool
- Drag the slice over our page background graphic
- Width, height, x and y coordinates should match that of our graphic
- In the properties panel, give our slice a name of background
Slice our columns
In order to create and simulate equalizing columns in
- From the Tool bar, select the slice tool
- Drag the slice over our layout making sure it encompasses our left and right columns:
- In the properties panel, adjust the values as follows:
- W: 760
- H: 18
- X: 0
- Y: 198
- With the object selected, in the properties panel, give our slice a name of wrapper
Export and save our images
In Fireworks, we can export and save our images using the same method. Follow these steps:
- From the Vector tool bar, make sure slices are turned on to ensure each graphic needed is sliced:
- From the main menu, select File>Export
- In the Export drop down list, choose Images only
- Leave Include Selected slices only checked
- Navigate to your images directory Left click Export
Navigate to the directory where you have stored the project files download, your images should be present. At any time, you can modify colors, text and then export your images to your directory and they will be reflected in your website.
Save our layout
In order to make modifications to our layout in the future, we need to save it as a portable network graphic (PNG), which is Fireworks native editable format. Follow these steps:
- From the main menu, select File>Save
- Navigate to your directory where project files are stored
- In the File name text field, type ryan_layout
- Left click Save
Once completed, close Fireworks, we’re done with it.
We'll continue with creating our web page next.