Dreamweaver is probably the most powerful software for building websites, making the whole process of website creation as easy as possible. You don’t need advanced knowledge on HTML and CSS to build amazing pages in Dreamweaver, you just need to know basic techniques of using the software, you need to learn how to create tables, forms, styles, how to format text, change background colour, add links and so on… In this Article I’m going to explain the basic elements in Dreamweaver and how to use them in your web pages.
How to use tables in Dreamweaver?
Tables are a great way to present tabular data or for building a nice layout of text and graphics on a web page. It gives you the possibility to create different layouts by separating the whole page in different cells, rows and columns, nesting tables into tables and much more. In Dreamweaver you don’t need to write any kind of code to insert a table, you simply select the “table” element from the “insert bar”, choose the width and height in pixels, the number of rows and columns, the width of the table border, background colour and your table is automatically inserted into the document.
How to create layouts with Div tags?
I would recommend you to use Div tags for laying out your Dreamweaver pages. The reason is that using tables sometimes results in a larger file size, and it’s not a very SEO friendly technique. Using Div tags in Dreamweaver actually gives you much more options to make your pages look great by creating styles for each Div tag. In this case all the code connected to the layout of your website is stores in an external CSS document, which makes it possible to create hundreds, even thousands of pages with the same layout by simply attaching the style sheet to them.Div tags can be used to layout your whole page but also to centre blocks ot content, create tables without using Table tags, create different colours in different areas of the document.
To insert a Div tag you need to select the Insert menu > Layout Objects > Div tag, or simple select “insert new div tag” for the insert panel of Dreamweaver.
How to create CSS styles in Dreamweaver
There are two ways to use Style in Dreamweaver. the first one is to create styles in the document, in this case they will only affect the style of one page, or to create external style sheets and attach them to one or many pages.
When using the Properties panel to format your content, Dreamweaver automatically inserts styles in the beginning of your document between the HEAD tags.
A better option is to create external Cascading Style Sheets by selecting File > New > CSS > Create from the menu panel. Then you can attach this style sheet to the document by using the “Attach Style Sheet” option from the “CSS Panel” in the “Panel Groups” on the right side of the software window. Then simply browse to locate the CSS file to attach. You can create CSS rules by selecting this option from the CSS panel. Dreamweaver automatically writes the code for you in the selected CSS file.
Dreamweaver has hundreds, thousands of options to help you create great websites… Sometimes simple, sometimes more advanced. However, if you’re just starting remember that the learning process always starts with the basics. After you learn the basics, you can experiment with more advanced features for creating even better websites.