- #HOW TO CREATE A SITE USING DREAMWEAVER CS6 HOW TO#
- #HOW TO CREATE A SITE USING DREAMWEAVER CS6 CODE#
The Padding settings of zero ensure that any content appearing within the element will butt right up against edges of the container. Before layouts became almost universally controlled using DIV tags and CSS, the only way to create columns in a website was by using tables - a cumbersome (although workable) alternative. Essentially, this means that you can place several DIV tags next to each other within a single DIV container, thus creating ‘columns’. Then other elements can appear to the right (or left) of the floated element. What ‘float’ does is position an element within the flow of the text and move it as far left (or right) as possible.
The setting ‘float’ is something of a misnomer. These Box settings create a DIV tag rectangle 150 pixels wide. This Block setting serves only to side-step the ‘ Double Float-Margin Bug’ which is a feature (amongst many others) of Internet Explorer 5/6. These Background settings simply give the DIV tag a background color of #F00 (red). Rule Definition: (select your existing style sheet from the popup) In the CSS Rule Definition Pane:īackground-color: #F00 (for now we’ll just make this a solid red) Make the following selections from the New CSS Rule panel that will appear: Select ‘At insertion point’ from the popup menu. This’ll ensure that the new DIV is placed within the main body container.
#HOW TO CREATE A SITE USING DREAMWEAVER CS6 CODE#
Once they’re laid out, I’ll start to style their appearance and content.įor the left column, I used the settings below to achieve figure 2.įirst, ensure that the cursor (in the code window of Split View) is positioned immediately after the opening tag. To do this I’ll need to use a combination of background JPEG images and CSS wizardry, but I’ll get to that later.įor now I’m going to create the three columns as solid, colored rectangles so that I can focus on the layout and their relationship to each other. Eventually what I’d like to do is create a rounded box into which will go additional subheadings and links. The first (left column) DIV tag will be called #ud-left-panel (or whatever you choose). CSS3 please is a great place to grab the relevant code. It is now possible to create rounded corners using CSS3 and not background images - as long as you don't mind them not working in version 8 (and below) of Internet Explorer. In order to achieve this layout, we’re going to create three new DIV tags which will be placed side by side within the existing #body-container div tag.
If there’s no additional ‘tip’ to be displayed, the right column will remain blank - there’s nothing worse than filling up ‘white space’ just for the sake of it. The right column will be reserved for ‘hint’ and ‘tip’ panels, which will be placed near the text it relates to.
The familiar horizontal menu system goes across the top, and space is allowed for navigation down the left side, which will display specific links relevant to the category being visited, as well as other relevant links to the section. The most important thing is the content, which is why it’s ‘front and centre’.
The thinking behind this layout is simple. Create a Three Column Layout Decide what's going to go where and whyĪs figure 1 shows, the original Photoshop design allows for a three-column layout - two equally narrow columns on the left and right, and a single, wide column for content in the middle.
#HOW TO CREATE A SITE USING DREAMWEAVER CS6 HOW TO#
How to create three columns across a fixed width website using Float Left.
0 kommentar(er)
