Changing sizes and positioning of a Div layout

Posted by on Dec 14, 2010 in Website Development | 1 comment

In our last post, we discussed the basics of creating a CSS layout in Dreamweaver. For website designers, the basics of a good website designs starts with creating your website’s layout (before any images, text or design elements are incorporated). Now that you have your three layout boxes (Header, Content and Footer), we are going to start changing the positioning so that the layout is fit for an internet browser. Step 1: As mentioned in our previous post, you can change the positioning of the Div’s by clicking on the Div’s and dragging them around, but using fixed values for the positioning is much more accurate. To use fixed values for your Div positioning, click on the Div and go down to the property inspector at the bottom of the page. You will see that the positioning values of the left, top, width and height (called L, T, W and H) are in the boxes. Click on the Header Div and reset the values (the L should be 0 – this is how far you want the Div from the left side of the screen), make the Width 990 pixels, Height should be 100 and T should be 0). You may be wondering why the Width is 990 pixels – this isn’t an arbitrary number, it’s because we want this layout to fit inside a monitor resolution of 1024 x 768 (vertical scrolling isn’t a big deal in website design, but we want to avoid any horizontal scrolling). Click on the Footer Div and make the measurements as follows: L = 0, T = 560, W = 990, H = 50. You will see that there’s a “px” after the numbers, don’t take these letters out of the box when you are changing the numbers – the layouts will work in Dreamweaver but they won’t display in an internet browser if you remove the “px”. Now, click on the Content Div and change the values to the following: L = 0, T = 105, W = 990, H = 450. Step 2: You have now created the Div’s for your layout, but they won’t have any visibility in a browser yet. A good tip is to add a different background colour to each of the Div’s so that you can check them out in a browser (you can do this by clicking on the Div’s and them going down to the on property inspector at the bottom of the page – choose a bright background colour for each Div). Save the page and click on the globe icon at the top of the page so that you can see it in a browser. These are the basics of using...

read more

The basics of creating CSS layouts

Posted by on Dec 2, 2010 in Website Development | 1 comment

Most graphic designers will tell you that anybody can use Dreamweaver. Although this is true, you can’t always just download the program and expect to know how to start using it. If you’re an experienced graphic designer that hasn’t built a site in Dreamweaver before (or you have no website design experience and want to get the hang of it), your first point of departure is creating CSS layouts – also known as Div-based layouts. CSS layouts help you create a website with a creative layout without using inhibiting tables. So, after you’ve opened Dreamweaver, defined the site and saved the pages, this is what to do to start creating CSS layouts: Create CSS layouts Step 1: Turn the Insert bar on (if you don’t have the Insert bar turned on, go to the Window menu at the top of the page and look for insert – this is the first command in the drop-down menu).  Inside the insert bar, go to the Layout tab and click on the second icon in the bottom row called “Draw AP Div”. Once you’ve clicked on this button, you will be able to draw a box in your screen. Click anywhere in the screen and draw a box – this box is called a Div (if you have used Dreamweaver before, this can be confusing because these Div’s used to be called “layers” in previous versions of Dreamweaver). Step 2: To change the size of placement of the Divs, click on the box and drag. These Div’s can hold any type of content such as text, video, images, another Div and tables. If you come from a print background, Div’s may remind you of image boxes when designing in InDesign or Quark. For the first exercise, draw three Div’s (boxes) in the page – you can do this by going back to the “Draw AP Div” button on the insert bar. You will need three Div’s for this exercise because we are going to be making a header, content and footer layout. When you are done, close the Insert bar at the top of the page. Step 3: Click on the first Div so that it becomes highlighted, then go down to the property inspector at the bottom left hand side of the page and give the Div a different name than “AP div 1” (rename it to Header for this exercise). Grab second Div and rename it to Content and then the last Div and call it Footer. You can drag these Div’s around on the page to determine positioning, but it’s much more accurate to use fixed values for your CSS layouts. These are the basics of creating a CSS...

read more