- Home
- World Wide Web
- Introducing HTML
- Introducing CSS
- Dreamweaver Interface
- Top Tips
- Putting it all together!
- Design Principles
- Accessibility
- Useful Links
- Glossary
If you see this symbol in the text it is a Link to Glossary with more detailed information
The Dreamweaver interface
Introduction
Before we use Dreamweaver we will familiarise ourselves with the workspace. This workspace is the default but it can be changed to suit your own working practices. For now we will keep the standard default design workspace.
The diagram below shows the main areas you will be using, you will get to know them better as you make use of them.
- A - Document window for your page design
- B - Insert toolbar displays buttons you can use to add elements to your web page
- C - Document toolbar provides buttons for document related actions
- D - Properties Inspector
- E - Menu bar for standard operations
- F - Panel group, contains related panels
- G - Panel with related buttons and functions
- H - Status bar
- I - Show/Hide button
Dreamweaver has been the industry standard as a WYSIWYG web design tool for a number of years. At first glance you may find it a bit intimidating but if you look at Microsoft Office applications, you probably use every day, they can be just as complicated but you can use them at whatever level until you gain confidence and want to get more out of them. To be an 'expert' takes time and the best way of learning the software is to use it!
Dreamweaver suits the novice who is updating pages to the expert who may be using server side scripting with things like php and SQL. We will only have time today to look at a small part of what Dreamweaver is capable of. We will be concentrating on things that will be useful to you in keeping your website up to date and adding new content using the Dreamweaver software.
We would like to give you the confidence to use it and show where you can obtain help on the Internet, through books and of course through Richard and myself.
Remember like any software you use there are many ways to do a task, you have to find the way that suits you best. For example something like Copy & Paste you can go to the File menu and select copy(1), right click your mouse button and select copy (2) or choose copy from the visual standard menu at the top of the document window (3).
If you have been using FrontPage or any other web editor you can transfer your site to Dreamweaver, although FrontPage is notorious for adding extra folders and files that may need to be removed.
Working with Dreamweaver
Start up
Open Dreamweaver from the Start Menu in the bottom task bar, when it first opens it may ask you if you would like designer or coder view, select designer view.
You will now get the standard startup screen for Dreamweaver and you can do many different things from this screen like open a new page, open recent pages define a site etc. You can decide how you want to use it in the future.
Changing Preferences
Activity 17
In this first activity we will look at Dreamweaver Preferences and alter some of the defaults.
Click on Edit in the Menu bar and choose Preferences from the bottom drop down list. You will see a box with a list of categories which you can change.
Click on the General Category and make sure the following boxes are checked or unchecked and then click OK
Now open the Copy/Paste category and make sure the following items are checked as in the diagram and click OK.
Close the preferences box as we will not be changing anything else today but you may want to change something else later on, when you get used to using Dreamweaver.
Opening the First Page!
Activity 18
We will now open our first page, go to File > New in the Menu bar the new document dialogue box will open up. There are a lot of different page types but the one you want is normally selected for you and that is Category > Basic Page >HTML. The document type should have XHTML 1.0 Transitional selected, if it is not selected you can open up the preferences from this dialogue box and go to the New Document Category and change the DTD so that when you open a new page again this will be the default. Click Create and your new page will open in the document window.
Close this page without saving it. To close you can go to File > Close or use the cross in the right hand side of the document window.
When a dialogue box prompts you to save click no.
We will be using many of the Dreamweaver tools in the next section - Top Tips and Putting it all together! So we will not be going over all the buttons etc. now. But before that there is one tool that is a Dreamweaver exclusive the Property Inspector and we will introduce its properties before we go on to the next page.
Using the Property Inspector
The Property Inspector is a very useful tool, the default is shown below and enables you to edit text add headings, styles, bullets, links etc. but its versatility is that it changes according to the HTML element you are working on. Activity 14 will explain what happens to the Property Inspector as you add different elements to your page.
Activity 19
Open the activity_14.htm file from the project_files folder inside the workshop folder in Dreamweaver (not in Internet Explorer) File > Open and Browse to the project_files Folder.
Follow the instructions on the page!
Next section Top Tips >>
