The University of Arizona

Videos created using Camtasia illustrating various features commonly used on websites. This is aimed at new users of Dreamweaver 8. The length of the video is in minutes and seconds.

  • Defining a Local Site, length 4:16
    Starting a website by defining where the files are stored on your local computer.
  • Typing Paragraphs and Single Lines, length 4:23
    Illustrates the difference between using an Enter key and a line break command when typing text in a Dreamweaver document.
  • The Title Tag, length 1:55
    What is a title tag on a web page and why is it important?
  • Options for Opening Files, length 2:30
    Variouis options for opening an existing web document on your site.
  • Defining the Remote Site, length 4:08
    How to tell Dreamweaver about the remote server, particularly if using the CALS server. To post through Dreamweaver, you need to define the remote site information.
  • Posting and Getting Files, length 3:52
    How to post to your remote site using Dreamweaver and how to get files from the remote server, in this case the CALS server.
  • Basic Page Properties, length 5:24
    Using the page properties panel to set basic font type, font size, coloring of text and background.
  • Text Properties in the Properties Panel, length 7:24
    Illustrates how a style rule is created when text traits are applied to selected text, and how to repeat effects elsewhere on the page and delete effects.
  • Importing Text, length 3:31
    Two ways to import text into a web page. One is for importing Word files and one could be used for other word processing formats or just part of a Word file.
  • Text Traits in Older Documents, length 7:53
    This illustrates what "embedded font codes" are, created by releases prior to Dreamweaver MX 2004, and how you might delete these older font codes.
  • Viewing Your Page in a Browser, length 4:44
    How to see what your web page looks like in your preferred browser, without posting the file, and how to add in another installed browser for use while in Dreamweaver.
  • Using a Template to Create a Dreamweaver Page, length 4:18
    How to use a template defined for your site to create a web document. This would be applicable only if you have inherited a site which already has templates.
  • Blank Spaces and Special Characters, length: 3:50
    You can insert a special character to get blank spaces in a line. This video shows how to insert non-breaking spaces and other special characters like the copyright symbol.
  • Bulleted and Numbered Lists, length 2:37
    Shows how to inserted bulleted and numbered lists in a document.
  • Adding Links, length 5:46
    Links are at the heart of the web, and you need to have at least one link on each HTML page. This video shows both linking to a document on your site and linking to other sites.
  • Setting Link Properties, length 5:16
    How to use the Page Properties menu to change the appearance of links. The default for links are to make them underlined and initial links are blue and visited links are purple. A common trend is to turn off underlines unless the mouse is over the links and to have a different color for the "rollover" link. You might also want link colors to fit your color scheme.
  • Placing Graphics without Tables, length: 4:54
    Shows placing a graphic without using a table layout. Placing graphics next to text does not result in pages like with a word processor, so most of the time you will not use this method to place images next to text.
  • Positioning Graphics with the Float Property, length 5:14
    A special style sheet rule is the float property that lets you put text next to an image. This demonstrates floating a graphic to the left of a page.
  • Copying Page Traits for a New Document, length 2:44
    If you have a set of internal style sheet rules that you want to use on other pages, you can save your document under a new name, and delete the content, but the rules remain since they are in the "head" area of the web document.
  • Starting a Table, length 6:12
    This focuses on the initial questions that appear when you start to create a table, whether it is a table for data (text and numbers) or a table for a layout. For all tables, you need to make decisions about expressing the table width as a percentage of the user's screen or as a set pixel width. This clip demonstrates using a table width in pixels.
  • Data Entry in Tables, length 5:33
    Once the table structure is there, you can enter text (and numbers) into the cells. This clip also shows how to insert rows and columns as well as how to delete (in this case) a column.
  • Table Properties, length 6:16
    There are several traits that apply to an entire table, including alignment (to center the table horizontally), table color, and cell spacing and cell padding. These latter two traits are used constantly.
  • Cell Properties, length 4:42
    Other traits found in the Properties panel only affect one or more cells in a table. Horizontal and vertical alignment of information/text/graphics inside a table are common cell traits you will want to use. Alignment of cell contents and background color for the cell are other options.
  • Monitor Resolution Affects Page Layout, length 4:13
    This clip illustrates changes in a site's appearance as the monitor resolution changes. Since I cannot really change the monitor resolution in the middle of a recording, I demonstrate by resizing the window for the website. As you start to think about designing tables, pages and layouts, keep in mind monitor resolutions are not the same.
  • Using a Table for Graphic Placement, length 7:09
    The third option for placing text next to images is to use a table structure. This clip illustrates adding a table to an existing document and copying information into appropriate cells. You can also just start with an "empty" table.
  • Layout Ideas for Web Pages, length 6:01
    Several years ago ECAT came up with some sample layouts for initial webpages. This video demonstrates briefly these six videos. Alhtough you might not want to use these layouts, they can give you ideas you might want to use.
  • A Simple Table Layout, length 11:54
    This clip takes one of the layouts and makes changes to it. This layout has one central graphic header and text links, and uses white space in three narrow columns that have no content, to give spaces between items on the page.
  • Tables for Layout: Starting the Layout, length 11:45
    The same layout used in "The Simple Table" is expanded here, to have three columns with different content, including a large image in the center. Various Page Properties and table and cell properties are used to create the page look. Text is placed in selecetd cells in the layout.
  • Tables for Layout: Completing the Layout, length 12:48
    The layout started in the previous clip is completed. including more uses of joining and splitting cells, and adjusting spacings using cell properties for parts of the table.
  • Images as Links, length 2:50
    Images on your page can be made into a link. This can be used on buttons or other types of images on your page.
  • Imagemaps, length 7:43
    Dreamweaver lets you make a hotspot on just a part of an image, that acts as a link to another website or a page on your site. Images which have hotspots are called imagemaps.
  • Metatags, length 10:25
    Description and keyword metatags added to your document can help people using search engines more easily find your web page or website. This clips demonstrates adding both types of metatags and how to edit existing metatags.
  • Indenting through the Properties Panel, length 5:48
    Text indent and text outdent are icons in the Properties panel. This demonstrates applying both to existing text.
  • The Definition List, length 8:54
    The definition list has both a primary "head" area that begins at the left margin and a secondary area that is indented from the left margin of the document. This clip illustrates applying definition list coding to existing text and creating a definition list from scratch.
  • What Are Style Sheet Rules? length 4:26
    An overview of why style sheet rules were created by the World Wide Web Consortium, that sets web standards, and reasons you should use style sheet rules in your documents.
  • Examples of Editing Style Sheet Rules, length 16:53
    This clip illustrates simple changes to exiting style sheet rules, like changing the default names given rules (or selectors) by the Properties panel, and adding new rules using the Dreamweaver style editor.
  • The Internal and External Style Sheet, length 8:56
    It is better for consistency on a site to use an external style sheet that is referenced by all the documents on your site. This clip shows how to take an internal style sheet, export it, and link to the external style sheet.
  • Working with Permissions on the CALS Server, length 17:35
    Permissions refers to settings assigned to files and folders on the CALS server that affect who can edit and delete files in a site. This video illustrates how to find out what are the permissions associated with a file or folder on your site and how you can change settings so others in your web group can work with the files. This is only an issue if multiple people are working on a website.
  • Creating a Template, length 13:02
    This shows an example of taking a layout and making it a template for Dreamweaver.
  • Constraining Display with a Body Width Rule, length 9:36
    If you don't limit the width of a page's display with tables and pixels, you can use the width property for the body tag to limit the display. However, other coding has to be added if you want the display to be centered horizontally but have the text at the left margin of the contained area.
  • A Simple Layout Using Style Sheet Rules, length 16:39
    This video illustrates taking the look used on the template and creating a similar look using style sheet rules, not tables. This layout uses six ID selectors. This video highlights various properties for these rules and how to insert the DIV tag referencing these ID selectors.