For those who not familiar with Adobe Dreamweaver but want to have a try on it, you can follow this Dreamweaver basic tutorial.

Before start this tutorial, create a folder name “tutorial-01” in your computer desktop. Inside the “tutorial-01” folder , create a folder name “images“. Put 1 photo inside the “images” folder.

1) Go to File > New > Blank Page > HTML

2) Under Design view mode. Go to top menu, Insert > Table. Follow the setting as below image.

3) Finish setting, click OK, It will look like that.

dreamweaver tutorial

4) Save the file into the “tutorial-01” folder, name it what ever you want, eg. “table.html

5) Click on the left Column, go to top menu, Insert > Image. Double click the “images” folder, and select the photo inside. Click OK.

6) If the Dreamweaver version you using have this step; it make pop up another window ask to fill Image Tag, on the “Alternate text” field, type in some words can represent the image. If your Dreamweaver didn’t pop up this window, just skip this step.

7) It will look like that in dreamweaver.

8) You can drag the center line to adjust the width for the left and right columns.

9) Click on the right column, type in some words.

10) To bold and change the font color, select the words you want to change. Go to bottom of the Dreamweaver, Properties panel. Follow the setting below.

11) Finish change the color & font size.

12) The words look middle on the table now. If you want it on top, select the right column again, go to the Properties panel, change the “Vert” to “Top“.

13) Here the final look.

14) To view in your browser, go to top menu “File” > “Preview in Browser” > select the browser you want it to view in. Or short cut key, click “F12” in your keyboard.

Hope you get some idea about how Dreamweaver work from this basic tutorial.