Video Tutorial - How to use Dreamweaver 8

If you've just purchased Dreamweaver and not yet sure how to go about designing and Internet web site with it, then this is the tutorial to watch. This tutorial is recommended for beginners wanting to learn the basics of putting together their first web site.

This Dreamweaver tutorial covers the following steps:

1. setting up your first webpage and giving it a title.
2. setting your page properties including background images or color, default text font and link colors etc.
3. adding images to your first Internet web site design.
4. adding tables to use as navigation and inserting content into them.
5. how to preview your webpage to make sure it looks how you intend.

By the end of the tutorial you'll know how to design and view your first website using Dreamweaver 8.

To start the video tutorial on how to design an Internet web site click the arrow.

 

Learn how to format your webpage with Dreamweaver.

This tutorial will show you how to use numerous tools available in Dreamweaver to get your webpage looking exactly as you intend. Firstly it demonstrates how to change page properties including text color, size and type as well as talk you through adding a background color or image. It then goes on to discuss css style sheets and formatting tables ie. adding columns and rows.

Take some time to experiment with different webpage settings and don't be afraid to make mistakes. The important thing is to work out what looks best and have fun learning along the way.

To start this Dreamweaver video tutorial press the arrow.

How to use the find and replace tool in Dreamweaver

One of the most useful time saving tools in Dreamweaver is often overlooked by webmasters. The find and replace tool is fantastic for when you need to quickly delete a specific block of code that is found on numerous webpages. As this tutorial video demonstrates, you simply need to view your source code and highlight the block of text you wish to delete. Then you right click on it and choose 'replace'. From there you can opt to delete the text from either the current document only or from a folder of documents. As you can see, this would save you a ton of time opening each HTML file separately and manually deleting the same block of code from each page.

To start this Dreamweaver video tutorial press the arrow (go) button.

Defining a "Site" in Dreamweaver

This tutorial shows you how to define a site in Dreamweaver. Sadly this is a process that is often overlooked by beginners and experienced webmasters. I say sadly because it can save you a lot of time in the future if you want to change around the path to any of your files. For example, if you make a webpage about flowers and a few months down the track you decide you want to move that file into a subfolder called 'nature' for instance, then what dreamweaver does is it automatically changes all your sites links to match the change. In other words you DON'T need to open every page that links to that flower file and change the path to it manually. As you can imagine, this is also helpful in minimizing broken links through out your website.

To start this Dreamweaver tutorial on local root folders, press the arrow.

This post is listed at Technorati under: Dreamweaver

Creating rollovers in Dreamweaver 8

Here is a tutorial for beginners using Dreamweaver 8 showing you how to make image rollovers. Before following this tutorial you will need to have two images. One for the original display and a second one for the rollover image. Rollovers can be used for images, basic butons or full blown navigation systems. It also demonstrates how to link your button to a URL (website) and how to test it before uploading to your web host.

A handy keyboard shortcut mentioned in this video tutorial is F12 which brings up the page your working on into a new browser so you can check that everything is looking as planned.

To start this Dreamweaver 8 tutorial press the go arrow.

 

 

Dreamweaver shortcuts

Keyboard shortcuts can be a real time saver when creating websites in Dreamweaver. For example, consider the time it takes to bring up code view then search for a specific line of HTML. Now imagine the time you could save if you simply pressed Control+Tab followed by Ctrl+F and typed in part of the line your needing to find. Dreamweaver then goes directly to the HTML code you need.

Listed below are keyboard shortcuts I use most often when using Macromedia Dreamweaver:

Ctrl+N Opens a new document to start editing.

Ctrl+W Closes the current document. If it's not been saved previously you will be prompted to do so.

Ctrl+O Open an existing document from your hard drive.

Ctrl+S Save the current document that you have in view. If it's never been saved, you will be prompted for a file name.

F12 View the current document in a Browser

Ctrl+Q Quickly closes Dreamweaver, does not save changes so use this shortcut carefully.

Ctrl+Z Undo the last change.

Ctrl+Shift+Z Redo the last undo.

Ctrl+C Copy the selected text and put it on the clipboard.

Ctrl+V Paste the text on the clipboard at the cursor location.

Ctrl+A Select all the text in the window.

Ctrl+F Search within the current document for text and replace it with other text if you choose.

Shift+Return Go to next line directly under current cursor position.

Ctrl+Shift+Space Insert a space along the horizontal line at your current cursor position.

Ctrl+T Add a tag quickly in the design view.

Ctrl+J Displays page properties window so you can edit background, text color etc.

Ctrl+Alt+A Quickly insert a named anchor at cursor.

Control+Tab Brings up code view so you can edit your HTML code directly.

Free Dreamweaver Extensions

What are extensions?

Dreamweaver extensions are small programs that you can install into your software that provides added functionality. For example, they could add a rollover navigation or an Abbreviation and Acronym addon to Dreamweaver that can be used with a simple click of a mouse. I guess you could say, extensions such as behavior addons makes Dreamweaver more efficient.

How to install Dreamweaver extensions

To install extensions or addons you need to download and use an Extenstions Manager. You can get these directly from the Adobe website.

Download Dreamweaver Extension Manager for version 3

Download Extension Manager for all later versions of Dreamweaver

Note: You can download Managers for either Macintosh (4729k) or Windows (2407k).

Where to find free Dreamweaver Extensions.

ProjectSeven has several popular extensions. I especially recommend looking at 'Layer AniMagic'. This addon allows you to create cool menus that slide open or scrolling galleries of your prized works for example.

Rabi's Dreamweaver Extensions includes: Menu Builder, Text Rollover, Insert Sound, Banner Builder, Button Rollover, Right-Click Menu, Transitions, Scrolling Text, Frame Buster, Favorite Icon, Meta Tag Generator, Special Characters, Status Message, Form Builder, Add-to-Favorites, Print and News Tickers.

Technocurve has a terrific Lorem Ipsum extension. Webmasters find this addon useful for when they want to fill in website space with dummy text that is of no particular language. They can then show their clients how the site design will look without needing the actual content.

Harold's Home has useful Dreamweaver extensions for Abbreviation and Acronym, characters including copywrite, registered trademark or Euro and Beta etc.

4Level Extensions has a handy LoadImage addon that helps you to easily load thumbnails and create a mini image photo gallery. They also have extensions for Language Redirect, Open Browser Window, Jump Menu, Link To Js Files and many others.

And last but not least, it's worth your time taking a look through Adobe Dreamweaver Exchange Downloads as well. Not all these ones are free so you'll have to read the small print first.

How to make a website that checks to see if your visitor has the appropriate browser plugins.

There are numerous browser plugins that your visitor may need in order to view your website properly depending on its content. For example, Flash, Shockwave, Live Audio, QuickTime, Windows Media Player. If the website visitor doesn't have the appropriate plugin you have two choices. You can redirect them to a page that doesn't need that specific addon, or you can send them to a website where they can download the plugin.

Dreamweaver makes it easy to add the code that checks for plugins. Firstly open your HTML page and press your keyboards F8 to open the Behaviors Action window. Then press the 'plus' icon, followed by 'check plugin'.

Press select > Choose plugin from the drop down > Type in 'Go To' URLs > press OK

Here is the website address for popular plugins if you want to send them to the download page:

Adobe Flash Player
http://www.adobe.com/products/flashplayer/

Shockwave Plugin
http://www.adobe.com/shockwave/download/download.cgi

QuickTime Plugin
http://www.apple.com/quicktime/download/win.html

Windows Media Player Plugin
http://www.microsoft.com/windows/windowsmedia/download/

Thats it, Too easy!

Shown below is a visual tutorial demonstrating how to use Dreamweaver to check for browser plugins and redirect to a specific page depending on the outcome. For example, you might have one version of your website that uses Flash animation and another version that is created with basic HTML. If your visitor has the Flash plugin installed in their browser they will be redirected to the Flash version of your website. If not, they are redirected to the HTML pages.