Dreamweaver 8 with Vista

Content Start

Note: only Dreamweaver 8 will work for transferring files via Bb Vista’s secure connection.

Create HTML Files: Word versus Dreamweaver

Word

Dreamweaver

Compose, revise, and spell check.  Prepare content in Word until almost ready to put online.

Can compose in but spell checker is a bit clunky. Good for slight revisions and semester updates.

Add and resize images with basic accessibility, pasting into Dreamweaver will export and make web ready.

Add images that are already sized for web use with more advanced accessibility options.  Use Word to resize images.

Define basic formatting like H1-H3, lists, block quotes- colors will not transfer.

In addition to basic formatting, define colors or apply external CSS styles.

Create links to external website, email, and places inside same document.

Also allows creation of links to other pages in the site.

Don’t save as HTML when working in word- paste into Dreamweaver.

Paste from Word into Dreamweaver to create HTML

Does not include file management and transfer.

Keeps track of files and makes WebDAV connection to Bb Vista easy.

Cannot build accessible table.

Helps create accessible tables


*Note: When using either of these tools to create your HTML pages, you want to avoid using the HTML editor in Bb Vista as it will often mess up the code to the point where it can no longer be edited in Dreamweaver.

Why use Dreamweaver instead of Word to manage HTML?

  • Easier to update pages
  • Easier to link pages
  • File transfer and management is great in Dreamweaver

Organizing local computer

It is important to start organization from the beginning of your development.

  • Poor organization leads to broken links and missing files

Create a project folder

  • Includes working documents - items that do not belong on Bb Vista.
  • Create an images folder

Create a Bb Vista folder

  • Will be a mirror image of your files on  Bb Vista server
  • Is the Local “Root” folder in Dreamweaver

Getting your WebDav information in Bb Vista

  • Open your browser and go to the Bb Vista Log In page (http://www.vista.nau.edu).
  • Log in using your jan id and password.
  • In the Build tab, navigate to File Manager .

Designer Tools

  • Click on the small grey action menu to locate the WebDAV folder path.

File Manager

  • The WebDAV address is automatically highlighted so you can copy the information into Dreamweaver. 

WebDav Address

  • Copy the WebDAV address (control+C = shortcut). This information will be pasted into Dreamweaver when you set up the connection.

Set up your Site in Dreamweaver

  • Open Dreamweaver
  • In the Toolbar, Select Site. Select Manage Sites.

Manage sites

  • When the Manage Sites dialog box appears, select New. Select Site.
  • The Site Definition dialog box appears.
  • Use Advanced tab.  You will set up the WebDAV connection between your local and remote folders here.

  Local Setup

In the Local Info Category

Give a descriptive name to your site so you can identify it quickly later. (ECI599_Fall2006)

Select the Local root folder to point to a local folder on your computer.

  • If you will be using images, define your Default images folder within your main folder.
  • You do not have to define the info below the Default images folder.

In the Remote Info Category

  • Under Category select Remote Info
  • Access:  Select WebDAV
  • Paste the URL copied from Bb Vista into the URL box (control+V to paste)
  • Use Jan login and password.

Remote Info

At this point, you can select Test to connect to Bb Vista.

Note:  If you get an error message on the test, recheck your password entry. If you change your jan password, you will have reenter the new password.

Setting up multiple sites

  • Define descriptive names for sites and folders
  • Define a separate site for each unique instance of a class or for different classes - don’t put all your classes in one folder.

Creating a Basic HTML Page

  • Menu bar > File > New > Basic page > HTML

New Document

  • Type in a title that reflects the topic of the page.

document title

  • Type your content as you would in Word or copy your content from an open Word document (you can also select all of your content and drag and drop into Dreamweaver).
  • Note: there is a bug in the current version of Dreamweaver.  Word documents that contain images need to be put into a new, unsaved Dreamweaver document for the images to show properly. 
  • Keep formatting in Word simple
  • The format or properties panel is located at the bottom of the Dreamweaver window.  You can format your document the same way you would in most word processing tools, using Headings, Bold, Italic, Font, ordered lists, and unordered lists.

properties panel

  • To view your document in a browser, save the file and then click on the globe  icon.
  • If you want to see the HTML code, you can toggle between the Code, Split, and Design tabs located at the top of the open file.

Toggle

Creating a Hyperlink in a Basic HTML Page

There are several different types of links

External

  • to an outside website
  • Paste full the full URL (http:// address)
  • Select New window - target frame

Internal within a single document (called an anchor)

  • Links to a place within the current document

email

In your file structure

  • Links to another web page or document within your files
  • Attention to file location is important

Creating an External link

  • Type in the text as you'd like it to appear when you link to it. Highlight the text.
  • Place the URL in the Link field in the Properties tool bar.
  • Select "_blank" in the Target drop down box to have the link open a new window.

link in properties panel

Creating an Internal link (named anchor)

  • In your document, place the cursor where you want the link.
  • Menu bar > Select the anchor icon

anchor icon in the toolbar

  • Type the name of your anchor into the Anchor name field. Remember to use a-z and 0-9, no spaces.

named anchor field

  • The anchor marker is now in your document.

anchor marker

To Link To A Named Anchor

  • Highlight the text or an image where you want to create a link.
  • Go to the Point to File icon to the right of the Link field in the Properties panel. Click on the icon and drag to where you placed your anchor.

linked anchor

  • A link is automatically placed in the Link field of the Properities panel.

anchor link

 

Creating an email link

  • Place the cursor where you'd like the link to appear in your document.
  • Go to the Menu bar and select Insert. Then select Email Link.

create email link

  • Fill in the fields of the Email Link dialogue window with the text you want to be linked and the actual email address.

email link

  • Select OK.

Link to another file in your files

  • Linking to other files in your file structure is verys similar to linking to an anchor within the same page. We use some of the same tools.
  • Highlight the text you want to link to the other web page or to the document (in this case, we will be linking to a .pdf document.
  • Go to the Point to File icon to the right of the Link field in the Properties panel. Click on the icon and drag to where your file is placed within your defined site.

link to a pdf file

Adding a Table

In the Creating Web Pages with Word training, we learned that accessible tables cannot be created in Word. However, accessible tables can be created in Dreamweaver quite easily.

  • Place the cursor where you'd like the table to appear in your document.
  • Go to the Menu bar and select Insert. Then select Table.

insert table

  • In the Table dialogue window, you will define the parameters of your table.

table dialogue

  • Table Width has two options. With pixels, you will get a fixed width table. With percent, you will get a table to is scalable to fit the size of the reader's screen.
  • Define where you'd like your headers to appear in your table.
  • Add a Caption.
  • Select OK.

table

Setting basic formatting for whole document

  • Go to the Properties panel and choose Page Properties.

page properties

  • Set document Appearance, Links, and Headings.

page appearance

  • Most of the time, you will want to avoid using background images and colors other than white.
  • Note: If working with an e-Learning Center Instructional Technologist, make sure your formatting is extremely plain until after you have discussed CSS formatting and Templates.

Adding Images

image icon

  • Place the cursor where you'd like the image to appear in your document.
  • Go to the Image icon and select it.
  • Choose the file you'd like to have in your site.

Alternatively:

  • Find the image in your list of files and drag it to the place you want it in your document.

Note:

  • Size images properly prior to adding in Dreamweaver. Dreamweaver doesn't resize the image like Word does.
  • Only use .jpg and .gif.
  • Fill in the ALT attributes - this helps with accessibility.

image accessibility

  • Include citations to adhere to basic copyright laws.

Uploading files to Bb Vista

  • Expand files window to the two column view. 

expand files

  • Use the synchronize icon to transfer files.

synchronize

 

  • You can upload either the whole site or selected files.
  • You can choose to either put or get newer files (put them up on the web server or get them from the web server).

get or put