Introduction to Dreamweaver

 

1.    Welcome to Dreamweaver

 

 

  1. The toolbars and the Common tab

 

 

 

 

  1. The Layout tab

 

 

  1. The Text tab

 

 

  1. Properties Panel

 

 

  1. The Assets Panel

 

 

Getting Started: Defining the Site

 

  1. Choose SITE from the menu

 

 

  1. Choose New Site…

 

 

 

 

 

 

 

 

 

  1. The New Site Window will come up:

 

 

  1. Give the site a name

 

  1. Choose a local root folder

 

  1. Choose a default images folder

 

  1. Enter the http address to enable the Link checker

 

 

 

 

 

  1. The final result should appear as follows:

 

 

  1. Hit OK

 

 

 

 

 

 

 

 

Creating your first page

 

  1. Enter a name for the page

 

 

  1. Choose File, Save As, and save the page as “index”

 

 

  1. Note that “index” now appears within the Site Panel

 

 

 

  1. Choose Modify; then Page Properties;

 

 

  1. You will see the following window:

 

 

  1. Choose the background images and colors that you prefer, and set the appropriate margins.

 

  1. Please use appropriate design principles

 

    1. In the event that you’re not good at choosing color schemes, Dreamweaver has a feature to help you.

 

 

    1. Choose Commands; Set Color Scheme

 

    1. Choose through the range of matched colors.

 

 

Working with Text

 

  1. Begin by entering text into the WYSIWYG Panel

 

  1. Change the color of the text by selecting the text and changing it in the Properties Panel

 

 

  1. Set font size in the Properties Panel

 

  1. Choose the Font Family in the Properties Panel

 

 

  1. Use the Properties Panel for Bold and Underline

 

 

  1. Use the Properties Panel to Align Text

 

  1. To check spelling, choose Text, then Check Spelling

 

 

  1. The Spell Check Window will appear

 

 

  1. To Find and Replace text, choose Edit, then Find and Replace

 

 

  1. The Find and Replace Window will appear:

 

 

  1. Note that you can perform this task on the Entire Site

 

Working with Links

 

  1. Choose and select the text which you want to stand as the link

 

  1. If it is a link within the site, click on the folder in the Properties Panel

 

  1. Choose the file which you wish to link to in the select window

 

 

  1. If the Link is external, simply type it into the Properties Panel

 

 

  1. To create a link before you put in text, you can use the link button on  the Common Tab.

 

 

  1. The Link window will then open

 

 

 

 

 

 

Images

 

  1. To add an image, click on the image button on the Common Tab

 

  1. Note—if you do not have the image, but want to put in a place holder, there is also a button for that on the Common Tab

 

  1. Once you click to add the image, Dreamweaver will create a selection window so you can navigate to it on your hard drive.

 

 

  1. Once the image is added, note that it is highlighted and the properties panel now provides you with options and settings regarding the image.

 

 

  1. Note that the image has been added to your image folder:

 

 

  1. If you want to link to another file type (other than html), such as a .txt file, begin by right clicking on the image, and choosing Make Link

 

  1. That will open the selection box where you can navigate to the file you want

 

 

Previewing Your Page

 

  1. Make sure that you save your page.

 

  1. Choose File; Preview in Browser; iexplorer

 

  1. The Page appears as it will in Internet Explorer

 

 

For Further Assistance:

 

 

http://www.tntech.edu/institute

 

institute@tntech.edu

 

931-372-3675