Setting up your workspace
As Dreamweaver has changed over the years, different things will change about the user interface. However, most things you will find have stayed the same, and if you have an older version, you don’t have to upgrade.
When you run Dreamweaver, you can pick from several different types of layouts for the applications, such as designer, coder, app developer, etc.
Defining a Site
You will want to define a site to store your files. This helps Dreamweaver organize your files, and helps if you have to change file names, etc. With the way Dreamweaver works, you will ALWAYS want to define a site.
Common Areas
Welcome Screen
Displays when you start Dreamweaver, or don’t have any files open by default. This can be turned off.
Shows you recently worked on files as well as allowing you to create new documents from an easy to access menu. To access an existing file from the list, simply click on its file name.
Creating a New Document
Dreamweaver CS4 provided 32 CSS styles to help you design a page/site. These are still found today, however I recommend not choosing one of those, as they are often hard to change later on for your own designs. We will work on building our own designs from scratch.
Lots of different types of files can be created. Everything from your HTML, CSS, and JavaScript, to plain text files, PHP, Action Script and much more.
Document View
There are 3 main document views that you can choose from. Most people start in mainly design view, however over time they will move into code view as they learn HTML code – and find it faster to type it, than to navigate around for different parts.
Code – all you see is the HTML code- Design – All you see is the “WYSIWYG” view. A semi-accurate view of what will occur on a web page
- Split – Where you see the code in a panel, and the design in a panel beside or below.
Changing Headings and Text
Click in the header section – change the placeholder text
You can also click inside a section, and type new text.
Notice how all text is “Flow Control” – i.e. you can’t drag text to where ever.
Inserting Images
Click where you want the image
Select the Insert Image from the “Insert Bar” “images” icon.
- image location
- alt attribute text
- what it is for
- how standard browsers use it
Modifying CSS styles
The CSS Panel allows you to easily add and modify your CSS for a given style sheet and/or page.
In addition to adding new CSS selectors, and thus styles, you can also see a list of CSS selectors. If you click on a selector, you can then edit it’s settings or remove it entirely.
Dreamweaver is smart enough to look inside of all of your style sheets to display the selectors.
In this example, you can see that I have the “All” button selected. This will show you all of your CSS styles, with the properties for that tag in the bottom half of the panel.
There is also a current, which will only show you the currently selected style. If multiple selectors are used to create the style for a tag, it will merge them together.
Property Panel
The property panel/property inspector allows you to easily modify the properties of a web page element.
This panel is context sensitive, meaning it will change based upon what HTML element your mouse cursor is in, adding or removing properties that are relevant to that tag.
Previewing your Document
- In Live View – This uses the same engine as is found in Safari, and formerly Chrome. (Chrome just split off to do their own display engine.)
- In a Browser – Now you can test inside an real web browser.
A Quick Start to Dreamweaver’s Interface was originally found on Access 2 Learn
