Dreamweaver CC is one of the software that help you build websites and mobile apps. The beginnings of the program was with Macromedia company. When Adobe bought this company, its programs became Adobe’s property.
The software has undergone major improvements, especially when Adobe started Creative suites. Adobe added Dreamweaver within the web creative suite. Dreamweaver became easier to use in the process of code writing, and there has also been some additions to help with design.
In this article, I will guide you through an exercise on how to use the new tools in web design that Adobe released.
Create fluid, responsive web pages in Dreamweaver:
To build a website compatible with the new devices like smart phone and tablets, you have to design it using Fluid option.
Select fluid grid layout from the welcome screen when you start the software which will display a window, you can change some settings like size and then click create.
You will have save window message, select the location where you would like to save as CSS file.
You must save your file again but this time in html format.
In the design screen you will see a DIV area, and since you want to start from scratch you need to delete it.
In insert panel, select structure, it has a lot of orders for design, select header.
You will see ” Insert Header” window, select ID and give it a name. Select insert fluid element then press OK
You will see the header on top of your design with text in it, delete the text because we need to insert an image. Go to insert menu, click image then image again, then select the image you would like to insert.
Once you have the image in the header, you may want to center it, select CSS designer panel and from source select style.css. Select the name of the file you chose when you saved it ( in the case of the picture “web app.css”) select media then global and from selector window select the” +” sign to make new selector.
Delete everything in the new selector expect ” #top image ”
You will see in the properties panel new options for image and from ” display ” select ” block”
Then select margin and ” auto ” on both sides ( left and right)
Now, it is time to do the menu buttons
Click beyond the image and select enter (or return on MAC) to create a space between the logo and the menu.
From the insert panel select structure and then navigation.
You will see a window, select ID and name it.
You will see a rectangle similar to Div in your design with text in it, remove the text and from insert select structure and then select unordered list.
A window appears, select ID and give it a name
You will create the menu buttons inside the Div in your design, so go to select panel and then structure then select “list item”.
Now rename the first button (About)
To create a new button you can repeat the previous steps, or simply select “duplicate ” button.
You can add padding for more space between the text and the borders of the button
Select text option in insert panel and select center option .You can change color too.
You can also change the background color from background option.
finally you can curve the corners of the button
The web design has become more design focused and less code focused.