Web Authoring with Dreamweaver

The following instructions describe how to set up a website on the CAEDM J: drive using Adobe Dreamweaver.

Dreamweaver is a commercial web authoring software package developed by Adobe. It is the most widely used web authoring software in industry. You can purchase a student version of Dreamweaver at the BYU bookstore for use on your home computer or laptop. Better yet, you have free access to all of the Adobe products, including Dreamweaver, on the CAEDM network.

The J:\www Directory

Before starting, let's review how webpages are hosted on the CAEDM system. When you logon to your CAEDM account you may have noticed that you have a subdirectory on the J:\ drive labelled "www". Everything you put in this directory will be visible on the internet using a web browser. This is done using an aliasing system handled by the CAEDM web server. For example, suppose that I create a web page in the J:\www folder called "mypage.htm". When I edit this folder while logged on to CAEDM, I edit it directly on:

J:\www\mypage.htm

To view this page using a web browser, I simply type in the following URL:

http://www.et.byu.edu/~username/mypage.htm

where username is my CAEDM user name. For example, if my CAEDM user name is njones, the URL becomes:

http://www.et.byu.edu/~njones/mypage.htm

Note that the "~" character is on the upper left corner of your keyboard.

Recall that each website typically has a default home page named "index.htm" or "index.html". If this file is present in the directory for your website, you can omit the name of the file in your URL. For example, the following two URL's both point to the same web page:

http://www.et.byu.edu/~username/index.htm

http://www.et.byu.edu/~username/

Thus, you can shorten the URL for your website by using "index.htm" as the name for your main web page (i.e., your home page).

Many websites involve multiple web pages. If you want to organize your web pages into subdirectories, that is not a problem. Simply create subdirectories inside your www directory and give them descriptive names. Each subpage can have its own default page (index.htm) if you wish. For example, suppose I have a subdirectory called "hobbies" that contains the following files:

index.htm
fishing.htm
skiing.htm
canyoneering.htm

The following URL would point to each of these pages:

http://www.et.byu.edu/~username/hobbies/    (for the index.htm page)
http://www.et.byu.edu/~username/hobbies/fishing.htm
http://www.et.byu.edu/~username/hobbies/skiing.htm
http://www.et.byu.edu/~username/hobbies/canyoneering.htm

Creating a New Site

To create a website on your J:\ drive using Dreamweaver, do the following:

  1. Launch Dreamweaver by selecting Start>Programs>Adobe Dreamweaver.

At this point, you should see the Dreamweaver welcome screen. Go ahead and close it. If you are launching Dreamweaver for the first time, it will ask you to select a color scheme and a default layout (Developer vs. Standard) - pick the Standard layout.

Before creating individual webpages, we will create a new "site". A site is a collection of web pages at a common location. Defining a site allows you to manage all of the web pages associated with the site as a single group.

  1. Go to the Sites menu and select the Manage Sites command.
  2. Click on the New Site button.
  3. Enter a descriptive name for your website in the Site Name box. This is simply used to identify your site in the list of websites managed by Dreamweaver.
  4. For the Local Site Folder box, click on the browse button and path to your j:\www directory. If you want your website to be based at the main level of the www directory, just select the www folder and select OK. Otherwise select the subfolder you wish to use for your website.

Note: If you were using Dreamweaver to set up a website for an off-campus hosting company, at this point you would use the Servers option of this form to enter the information about the remote servers hosting your site. You would then edit a copy of the files locally and then "push" them to the server as you edit them. But with the J:\www directory, once we create and save our files on the J: drive, they are immediately accessible on the web.

At this point, your settings should look something like this (your path should start with "J:\"). In this example, I am using a subdirectory called "demo".

  1. Click Save to save the site.

At this point you should your new site listed in the Files window.

If the Files window is not visible, go to the Window menu and select the Files command. This window is where all the files associated with your website will be organized and displayed.

Creating a New Web Page

Now you are ready to make your first web page.

  1. Right-click on the folder for your website at the top of the Files window and select New File.
  2. For the name of the new file, enter index.html.
  3. Double-click on the new file to open it.

Before editing the page, we need to make sure we are in Design mode.

  1. At the top of the window, locate the three button as shown below and make sure the one on the right is set to Design. This allows us to edit the page in WYSIWYG mode.

  1. Enter some text as a heading at the top of the web page ("Welcome" or something).
  2. Select File|Save (or press Ctrl-S) to save your changes.

Let's test our new web. Bring up a web browser and type in the URL of your web. As described above, this will be something like:

http://www.et.byu.edu/~yourusername/

Be sure to add the name of the subdirectory if appropriate.

Editing Your Web Page

Let's review some basic editing options. First of all, let's assign a style to the heading (controls the font size, etc.).

  1. Make sure the Properties window is open. If necessary, got to the Windows menu and select the Properties command.
  2. Make sure your cursor is on the first line (the one containing the header you just made) and select the Heading 1 option from the Format selector at the top left of the Properties window.

Your heading now should appear larger and in bold. We will now enter some lines of text.

  1. Make sure the cursor is at the end of the heading and hit the Enter key. This will move the cursor to the next line.

Each component of a web page corresponds to a certain style or tag type. The default style is the Paragraph style. Note that the new line is automatically defaulted to Paragraph style. You should also note that paragraphs are all separated by one blank line.

  1. Type in a second line of text.
  2. Hold down the Shift key and hit the enter key again.
  3. Type a third line of text.

At this point, your page should look something like this:

Note that last line did not have a separator. That is because Shift-Enter creates a line break within an existing paragraph. This is a simple and quick way to control the line spacing.

Viewing and Editing the HTML Source

The underlying code for web pages is HTML (hypertext markup language). We are currently viewing the web page in WYSIWYG (what you see is what you get) mode. To view in the native HTML format:

  1. Click on the Code button at the top of the window.

Your source should look something like this:

Each of the items is wrapped in a pair of "tags". For example, the heading is enclosed in <h1></h1> tags. Each paragraph is enclosed in <p></p> tags. Some tags do not come in pairs. For example, the <br> tag marks a line break within a paragraph. Tags can also be nested. Everything is nested within the <html></html> tags. The main body of the page is nested within the <body></body> tags. You can next formatting tags within paragraph tags. For example <b></b> tag is used to make something bold.

  1. Choose one of the words in one of your paragraphs and manually type <b> and </b> before and after the word.
  2. Pick another work and wrap it in italic tags: <i></i>.

To view our changes:

  1. Switch to hybrid view (code and design) by selecting the Split button.
  2. Switch back to WYSIWYG mode by clicking on the Design button.

You can also adjust the formatting on selected text using the formatting tools in the Properties window.

Images

Most web pages utilize images or graphics in addition to text. Since HTML is simply a text format, images must be stored separately from the text. So inserting an image is a two step process:

Step 1: Save a copy of the image to a folder on your website in either JPG or GIF format.
Step 2: Insert a link to the image from your HTML source.

To illustrate the process, let's find and image and put it in our web page.

  1. Bring up a web browser and find a web page with an image you would like to use.
  2. Right-click on the image and select Save Image As...
  3. Optional: Change the name of the figure to something simple (myfig.jpg or myfig.gif for example).
  4. In the Save Image dialog, path to the J:\www directory (include subdirectory if necessary) and click on the Save button.

This completes step 1. Now we need to create a link to the image in our web page.

  1. Put your cursor in the location on the web page where you wish to insert the image. You may want to make a new line.
  2. Locate the image in list of site files in the Files window. Drag the image file onto the main editor window at the location you wish to insert it.

Your image should appear at this point. You may want to switch to Source mode to see the HTML code associated with your image. You can also edit the image properties in the Properties window.

Hyperlinks

Next we will create a hyperlink to another website. Each hyperlink consists of two parts: 1) the text that is displayed and 2) the underlying URL of the webpage associated with the hyperlink. We will create a hyperlink to the ESPN website.

  1. Create new paragraph by moving the cursor to the end of an existing line and hitting the Enter key.
  2. Type "I like ESPN." on the new line.
  3. Select the "ESPN" part of the new line. (you can double-click on the word to select it)
  4. Type "www.espn.com" into the Link field in the Properties windown and hit the Enter key.

The color of the link should change. To test your link:

  1. Click on the Save icon to save your changes to the web page.
  2. Bring up the web browser showing your page and click on the Refresh button.
  3. Click on your link to test it.

Tables

Tables are a great way to organize information in your web page. They can be used with borders to present a traditional table of information in rows and columns or they can be used without borders as a simple way to arrange information (images, links, etc.) on your web page. To insert a table:

  1. Create new paragraph by moving the cursor to the end of an existing line and hitting the Enter key.
  2. Select the Insert|Table command in the menu.
  3. Enter the number of rows and columns you need (this can be changed later) and then click OK.

A small table should appear in your web page. Position the cursor in each cell and type some text. Note that you can insert images or any other web content in the table of your cell. To edit the table:

  1. Right-click on a cell or set of cells in the menu and select the Table option to expose a submenu

This should appear:

You can also edit a table by selecting a cell or cells and using the table options in the Properties window:

Additional Web Pages

To add new pages to your web, just create additional pages the same way you created the index.htm page, but use a different name. Save the pages to the same folder. You can create links to these pages from your main page using the Link field in the Properties window and typing in the name of the page (don't use the full path). Or you can click on the small crosshair symbol just to the right of the Link field and drag it over to a file in the Files window to create a link.

Where to Go From Here

We have barely scratched the surface. Play around with the Dreamweaver interface to find many more tools and options. You can also find countless resources on the web, including tutorials. Have fun!