old post office banner

Adobe Dreamweaver

Adobe Dreamweaver logoThis software is available free for use at Idea Exchange, Old Post Office, Creative Studios.

Adobe Dreamweaver is a software application that enables you to design and publish dynamic websites without extensive knowledge of HTML, CSS or other coding languages. Build a website or web application that will scale to any browser or device and create unique designs to share your ideas online in an engaging and easily accessible way.

 

 

How to Guide

Starting a New Site

  • Select Site > Manage Sites.
  • The Manage Sites window appears. Click on the New Site button.

Manage sites

The Site Definition window will pop up.

Local site folder

You will now need to choose a Site Name and the Local Site Folder where you will be saving your files before starting to use the program. Click the Save button when you are done.

Eventually, you will also need to have a server to host your site online. You can specify this in the Manage Sites window under Servers. However, you can begin designing your site in Dreamweaver without this information.

Site setup

Templates vs. New Documents

Once you’ve started your site, you will be able to choose between working with a New Document or using a Starter Template. Click File > New… to open the window to make your choices.

Starter Templates

If you’re new to Dreamweaver and would like to start with a template that includes more CSS and HTML headings, choose a Starter Template from the available options. Here is an example of a simple template:

Simple template

If you would like to start from scratch, you will need to create a new HTML document for your text, text formatting and page content. Click New Document > HTML.

Insert HTML window

Later, you will likely want to create a CSS style sheet to link to your HTML documents to provide design elements such as background colours. This guide will help you get started with the basics. To discover even more about Dreamweaver, HTML and CSS, check the Learn More section. 

Saving Your Files

  • From the File menu, select Save, after you have created a new page and before you start to edit it.
  • Ensure you save the file in the folder you specified as the Local Site Folder when you initially created your site. This means that all your site’s pages, pictures and other materials are stored together and fully accessible to Dreamweaver.
  • In the Save As dialog box, enter a name for the file. If this page is your home page, make sure to name it index.htm or index.html (web pages can have either .htm or .html as their file extension).
  • Other pages can be named whatever you want, provided there are no spaces, caps or special characters in the file name.

Add Text to Webpages

  • Click on the page and begin typing the text you want to add. Press Enter only at the end of paragraphs. Whenever you press Enter, two spaces will appear between the paragraphs of text. If you only want a single space, press Shift-Enter instead.
  • You may add typical HTML formatting by highlighting the words you want to format, then clicking Tools > HTML and selecting your preferred formatting change (Italics, Bold, Underlined, etc).

Add Headings to Webpages

  • There are six pre-defined heading sizes, Heading 1 (H1) through Heading 6 (H6). Heading 1 is the largest and Heading 6 is the smallest.
  • Make sure the cursor is on the line you want to change.
  • On the Property Inspector menu on the right side of the screen, drop down the Insert options, choose Header and select the desired size from H1 to H6.

Property inspector heading

Type the text for your heading and press Enter.

To return to normal text, drop down the Format options on the Property Inspector menu and select Paragraph.

Creating Links

To create a link to someone else's web site

  • Highlight the text for the link.
  • In the Property Inspector menu, click the Link text box and type the URL for the website to which you will link (the web address starting with “http://”), then press Enter.

To create a link within your website

  • Select the text for the link.
  • In the Property Inspector menu, click the yellow folder icon at the end of the Link text box.
  • In the Select File dialog box, select the web page to which you want to link, then click Select.

Add Graphics to Webpages

  • Only two graphics file formats are supported on Dreamweaver: .GIF and .JPG. If you have a picture in another file format that you wish to use on your website, you will need to save it as either a .JPG or .GIF file. This can be done with an image editing program such as Adobe Photoshop.
  • Place the cursor where you want to insert the graphic.
  • Click the Insert Image button on the Insert Bar.
  • Select the image file that you want to insert.
  • Click Select to insert the image into the page.
  • On the right side of the Property Inspector, click in the Alt text box. Type another name for this graphic. This is the image description visitors to your website with visual impairments will hear described on their text readers.
  • Use the Align option to select how text will align with the graphic.

To create a Graphic Link:

  • Select the graphic that you want to link.
  • In the Property Inspector, click in the Link text box, type the link you want, and then press Enter.

Alt images window

Attaching CSS Styles Sheet

  • Have your initial HTML webpages open.
  • To add the link to CSS Styles, go to Tools>CSS>Attach Styles Sheet.

CSS style sheet

Select the CSS Styles Sheet you wish to attach.

Attach CSS File window

Previewing Pages

  • From the File menu at the top of the window, select Preview In Browser.
  • On the side menu that appears, you will see a web browser listed, such as Internet Explorer.
  • Click on the browser you want. The browser will open with your page displaying on the screen.
  • Check links to verify they go to the intended locations.
  • Close the browser window to return to Dreamweaver.

Publishing Finished Pages

To publish your finished webpage online, you will need to have a hosting server for your website set up under your site definition. Web hosting services are available from a range of companies online, including a number of free or relatively low-cost services.

  • Open your file in Dreamweaver.
  • Click the File Management button on the toolbar, and then select Put.
  • Connect to your hosting web server.
  • Dreamweaver will ask if you want to include dependent files (these are files, such as graphics, that are also included on the page.) Always click Yes.
Learn More