On this page:
Using Macromedia Dreamweaver
Dreamweaver is one of the leading web page design software, created by Macromedia. With its WYSIWYG features Dreamweaver is the professional choice for building websites and applications. Dreamweaver has a powerful combination of visual layout tools, application development features, and code editing support. All these features enable both designers and developers at every skill level to create visually appealing and standards-based websites quickly. From leading support for CSS-based design to hand-coding features, Dreamweaver provides the tools you need in an integrated, streamlined environment.
Dreamweaver has enjoyed widespread success since the late 1990s; currently it holds approximately 80% of the HTML editor market. Dreamweaver is set up to handle everything – blogs, shopping carts, surveys, message boards, .NET applications, media sites, and just about anything involving mark-up languages. This tool is available for both Windows and Mac platforms, but also can be run on Unix-like platforms.
The user-friendly interface of Dreamweaver lets you design and manage both simple and complex websites easily. As a WYSIWYG editor, Dreamweaver can hide the details of HTML code from the user, making it possible for the novice and non-experts to easily create web pages and sites. You can drag and drop page elements in Design View, without concentrating much on code. You can easily manage your site text, image, link etc., connect to database like MySQL and MS Access, and filter and display content using scripting technologies without any previous programming experience.
Main Workspace
Dreamweaver’s main workspace centers around three main elements – the main window, which toggles between design view, code view and split view, the panels and the menu bars where you find all of the handy tools and libraries and site window, where majority of the file management tasks for a Dreamweaver site takes place.
Document Window and Toolbar
Document window is the place where you can add elements to your web page – either by using Dreamweaver’s interface or by typing HTML code.
Dreamweaver offers three document views:
Design View – in this view, you can draw individual layers and table cells on the page, drag and drop graphics, and type text as you would in a word processor.
Code View – in this view, you can edit HTML and other codes like java scripts included in the page.
Split View - it displays both design and code in split window.
Let us see how these views work. For example, you open the Design view and type text – This is my first web page like this:
Now, if you click on Code to see the code behind this text, you will see the following HTML code:
The Split view will show both the design and the code. This is how it looks in the split view:
Document Toolbar
Code, Split and Design – are the three important document toolbars, as they let you switch between Code, Split and Design views.
File Management
The document toolbar also contains commands for naming, previewing, and publishing the current document.
Standard Toolbar
The standard toolbar is located just below the document toolbar. It contains the same commands you would find on most standard Windows toolbars – such as New, Open, Save, Cut, Copy, Paste etc.
Property Inspector
This toolbar contains fields and buttons that let you specify the properties of text and objects you place on your page. In the example provided above, we have used the Property Inspector to change the format of text – such as style, size, color etc.
Insert bar
This bar contains most of the commands you will use to add elements to your pages. These include images, hyperlinks, tables, forms, and multimedia objects. These commands are also grouped in categories (Common by default). You can choose the category from the drop down menu at the left side of the toolbar.
Panel groups
The Panel groups are displayed vertically on the right side of the Dreamweaver window. They group together the related information and commands you will use to design your web pages and build and publish your website. Each panel group contains one or more panels. To expand a panel group and view its available panels, click on the arrow in the upper left corner of the group.
Design panel group:
It has two panels – CSS Styles and layers. CSS Styles are used to create and attach new styles in your document and maintain existing styles. The layers panel displays all the layers in the current document.
Code panel group:
The Code panel helps you work with the code in your page – HTML, JavaScript and ASP. The Snippets panel lets you save code snippets that you can use later. The Reference panel gives a comprehensive HTML reference library.
Application panel group:
It helps to include dynamic content in your websites.
Tag Inspector:
It displays all the attributes of your page elements.
Files panel group:
It has two panels – Files and Assets. The Files panel is used to manage your website files – upload and download files to and from web server. You can also use this panel to switch between your various sites. The Assets panel is used to manage the reusable elements of your web pages like object libraries and templates.
How to create a web page
Let us take the example given above. We have written – “This is my first page” on the page using the text editor. Let us give a title of this page.
Click inside the Title box in Document toolbar and write – “Jimmy’s Shop – Home Page”. Now save the page with .htm or .html extension. Once the page is saved, open it in a browser. It will be displayed like this:
You can write as much text on the page as you wish and format it with the help of Property Inspector. However, don’t forget to save the file after every change, else the changed content will not be reflected when you open the page in browser.
�
Adding images
Adding images to the web page, and formatting them is very easy when you are working with Dreamweaver. To add an image to your web page document, you need to point to where the image should be located. Now, click on Insert menu and choose Image. You can also insert image by clicking on the Image button in the Insert bar. The Select Image Source dialog box will be displayed. Select the image you want to insert and click on OK. The image will be placed on the page like this:
Now, if you view the HTML source code for this image, the image tag looks like this:
<img src="newimage.jpg" alt="Rex" width="62" height="75" border="2" align="left">
The tag tells the browser the image’s name (newimage.jpg), location (in the same directory as the page that displays it), and size (62 pixels wide by 75 pixels tall) and alt text (Rex). Alt text means – when you mouse over on the image, you will see the text Rex.
Adding Links
Dreamweaver lets you insert hyperlinks into your web pages in different ways:
Manually creating links:
Highlight the text or image you want to convert to a hyperlink; in the Link field of the Property Inspector, type the name of the file you want to link and press Enter. This is how it is done:
If you want to link the page to any existing web page, type the complete URL of the page in the Link text box and press Enter.
Now as you open the page in browser, that section appears hyperlinked; if you click on it, you will be taken to the linked page.
Browsing for files to create links:
You can also browse for file you want to link to by clicking on the Browse for file button in the Property Inspector. To do this, select the text you want to link and click on Browse for file button 
next to the Link field. The Select File dialog box opens. Select the file you want to link and click on OK.
If the file you are linking is located outside the root folder, Dreamweaver asks you to copy the file to your site folder. Otherwise, the file may not be included when you publish the site.
Advantages of Dreamweaver
The main advantage of Dreamweaver is its smooth WYSIWYG interface, dockable panels that improve workspace management, and built-in FTP and content management. Dreamweaver is compatible with most operating systems including Mac OS X and it supports almost all major programming languages. With Dreamweaver, you can create your own templates and use them to edit hundred of pages of your site with a single mouse click.
Pages created with Dreamweaver typically result in cleaner HTML code and they look almost perfect in Internet Explorer, Netscape Navigator and Opera. Laying out tables, moving images and coding links – Dreamweaver can cleanly code all these as an organized and patient programmer.
Dreamweaver does simply wonderful things with Server Side Includes (SSI) – ASP and PHP codes look much nicer in Dreamweaver.
Trial Version of Dreamweaver
Want to take a test drive? Go to Macromedia.com to download the trial version of Dreamweaver software from Macromedia website.
Dreamweaver is perhaps fully prepared to do the world of web design a whole lot of good and using it is no doubt an easy option to design attractive web pages. However, if you are really serious about web page design, you need to reach the hand coding level since it is the best way to create stunning web sites. Hand coding gives you the freedom of using the tags and styles exactly as you want to use them.
back to top
