Purpose of this tutorial
Create a page in Dreamweaver and center-align the contents of the page. If you are looking for the code to center your page, dive directly to the section “Center the Content”. However, if you are new to web design and are getting started with Dreamweaver, I suggest that you go through every step of this tutorial.
Can I do it without knowing CSS?
No. If you aren’t conversant with CSS, I advise you to take a quick class on CSS and come back. You don’t have to go into a lot of depth, just read the essentials. It should not take you more than an hour or a couple of hours at the most.
How do I center a page?
You create a container (DIV) for the other DIVs on the page. When you center-align the container DIV, the rest of the content gets center aligned as well. Simple! While it is not necessary that you use Dreamweaver for the tutorial, some of the steps that are mentioned are very specific to the use of this software. If you are conversant with HTML and CSS, you will do just fine without these steps using the editor of your choice.
Create a new site
Before we proceed to create a page that centers itself with respect to the display, we will first create a site to store all the files we will be creating hereafter.
Before you proceed, create a folder or directory on your computer called FAQ_Tutorials. I am on a Windows computer, and I have created this in my C drive.
- Select Site > New Site.
- In the Dialog Box that appears, enter the following information.
- Site Name: Tutorials on FAQs
- Local Site Folder: Click the Browse or Folder icon. Navigate to the FAQ_Tutorials folder on your computer. Click Select Folder.
- Click Save.
That was simple! You now have created a Site with the name Tutorials on FAQs, and the files for this site will reside in the FAQ_Tutorials folder. Great job!
Create a new page
We will now create a web page that we will save in the FAQ_Tutorials folder.
- Just to make it easier to manage your files, create a subfolder called “FAQ1_center_webpage” in the FAQ_Tutorials folder.
- In Dreamweaver, select File > New. Ensure that the options Blank Page, HTML, and <none> are selected in the New Document Dialog that is displayed.
- Click Create.
- Select File > Save As.
- Navigate to the FAQ1_center_webpage folder.
- Save the file with the file name “centering_a_webpage”
- Click OK.
Create the Container and Header
For the web page, we will create a container div that will hold the contents of the page. When we center the container, all the contents inside get centered as well.
In the container, we will include three DIV tags: Header, Body, and Footer.
- In Title, replace “Untitled Document” with “Centering a web page”
- In the Insert panel, select Structure from the menu.
- Click Div.
- In the Insert Div dialog, enter container in the ID field. Click OK.
- Delete “Content for id “container” Goes Here”.
- Ensure that the cursor is within the Div. Click Header in the Insert panel.
- In ID, select Head and click OK.
You now have a parent container with the Header div tag inside it. Great going!
Style the Header Tag
Let’s style the Header tag so that we can differentiate it from the other Div tags that we are going to create. And for this, you guessed it right; we are going to need some CSS love.
We will style the header to give it a blue background color with white text.
- Just after the Title tags in the code view, we will enter the style tags <style></style>.
- In between the tags, we will enter this piece of code:
- Click in the Design view. Do you see a blue box with white text in it? Good!
Create the body and the footer
Let’s go ahead and create the other two DIVs below the header.
- Ensure that the cursor is after the closing div tag for the header (</header>).
- Click Div in the Insert panel.
- In the Insert Div dialog, select After Tag and <header id=”head”> from the Insert options.
- In ID, enter body, and click OK.
- In the Insert Panel, click Footer.
- In the Insert Footer dialog, select After Tag, and <div id=”body”> from the Insert options.
- In ID, enter foot, and click OK
You have now created a container DIV with three child DIVs (Header, body, and Footer). When you center the container DIV, all the three child DIVs get centered as well.
Style the body div and the footer tag
Follow the procedure described for Header in “Style the Header Div” to add styles for the body and footer Divs. Add the styles below the style for the header.
You should now see three boxes blue, yellow, and red one below the other. If you don’t, go back and see where you went wrong.
Center the content
Now that we have the contents ready, we are going to center them with respect to the browser they are displayed on.
This is what we will do: Define a width for the container, set the top and bottom margins to 0, and the left and right margins to auto. This clears the space to the left and right of the margin allowing the browser to calculate the margin.
While you can add the style for the container tag anywhere, I suggest that you put it above the style for the header because this is the parent tag.
Preview the page in a browser
- Select File > Preview in Browser.
- Select the Browser in which you want to preview the page.
The contents of the page should now be center-aligned. Some of the older versions of Internet Explorer might not work with this code. As a workaround you might have to create a class for the body and center-align text. Unless there is a real necessity to support really older versions of browsers, this step is not necessary.
Some useful notes on linking CSS files
In this tutorial, we have used CSS on the same page as that we have designed. However, it is not a good idea to have CSS on every web page if your website has many pages. A better idea is to create a single or few CSS files and link it to the HTML pages. That way, you can make changes at one location and have them reflected across multiple pages.
For example, you can create a CSS file called theme.css and link it to your HTML page.
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
Here, the theme.css is the name given to the CSS file. You can choose any name you want. The CSS file here is on the same path as the page to which it is linked. However, if your CSS file is within a folder called CSS, you will have to specify the path as say, “href=/css/theme.css”. See http://compugoddess.com/relative-vs-absolute-links/ for information on relative paths.