Macromedia Dreamweaver is one of the many visual HTML editors in the ...
correct HTML code generation but with support for XHTML, PHP, Coldfusion (cfml
),.
Macromedia Dreamweaver Tutorial Introduction Macromedia Dreamweaver is one of the many visual HTML editors in the market. Visual HTML editors in the past have proven to be more of a hassle rather than a helpful tool for web designers due to reasons such as non-standard and poor HTML code generation using proprietary extensions. Dreamweaver has changed that by providing not only correct HTML code generation but with support for XHTML, PHP, Coldfusion (cfml), XML, ASP, Dynamic HTML (DHTML) and others (you can find a list by choosing to create a new document in Dreamweaver) as well as site management, JavaScript libraries and a clever design which allows Dreamweaver to be easily extended and adapted to new HTML standards. What Dreamweaver really is, is a WYSIWYG (What You See Is What You Get) with a clever text editor for code, an ftp utility as well as some other handy utilities. In most cases the code that it generates is good though there are times when it could be better.
Dreamweaver Tour of Tools and Panels The following are brief descriptions of the windows and other elements in Dreamweaver’s workspace. For more detailed information, see Dreamweaver Help (Help -> Using Dreamweaver).
The Welcome window provides tips on setting up your workspace (e.g. panel groups) for various purposes, and information on new features for those who have used previous versions of Dreamweaver. The Insert bar contains buttons for inserting various types of “objects,” such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set various attributes as you insert it. For example, you can insert an image by clicking the Image icon in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar. The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser. The Document window displays the current document as you create and edit it.
The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties. Panel groups are sets of related panels docked together under one heading. To expand a panel group, click the expander arrow at the left of the group’s name; to undock a panel group, drag the gripper at the left edge of the group’s title bar. The Site panel allows you to manage the files and folders that make up your site. It also provides a view of all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh). The figure above shows Dreamweaver’s basic interface. Dreamweaver provides many other inspectors, panels, and windows not shown here, such as the History panel and the Code inspector. Many of these items can be "docked"—that is you can combine windows, inspectors, and panels into tabbed windows. To open Dreamweaver's windows, inspectors, and panels, use the Window menu. A check mark next to an item in the Window menu indicates that the named item is currently open (though it may be hidden behind other windows). To display an item that isn't currently open, choose the item name from the menu. If a panel or inspector is checked but does not appear, choose Window > Arrange Panels.
Set Up Dreamweaver for Your Personal Web Space Start by defining your site and tell Dreamweaver how you connect to it (ftp, LAN etc), what sort of technologies you will use (PHP, Coldfusion etc), and where to keep your local files and where to test them. To do this there is a simple wizard to follow. On the site panel from the first drop down menu (Files) choose edit sites.
A small window will appear.
Choose new site and then follow the wizard to define your personal web space on the university server.
Connect to your NetDrive site to find the address you have to use for this connection.
If the university server has PHP installed so in the next step you can use PHP technologies support. The next section in the wizard is asking you to define the use of a testing server. In this case, your testing server will be the same as your publishing server. So, choose to edit your files locally and upload them to the testing server.
Create as simple web page. Start by choosing to create a new file. File>new, a menu will appear choose Basic Page on the left panel and HTML on the right panel. As we want to make the HTML code XHTML compliant, tick the box ‘Make code XHTML compliant’/ ‘XHTML transitional compliance’ on the bottom right of this menu.
You are now presented with a blank page You will see three buttons: Code, Split, and Design. •
Code shows the code that Dreamweaver has generated and allows you to write your own HTML code.
•
Split allows you to view both the HTML code and the design view.
•
Design shows you how the web page looks at the current moment.
Please to take a look at the Code view. Before you start doing anything the Dreamweaver should have already generated this: • • Untitled Document• • •
Now let us go back to the design view. From now on you are more than welcome to experiment and try different things. The exercise is just a walk through of the most basic functions in Dreamweaver. Let us set a few of the properties on the page that we are about to make Modify>page properties. This is the window that you get.
Now please try out everything on this menu as this is the only way to really learn what everything does. Most of the options are quite intuitive or require little work, and some of them can give quite impressive results through the use of a couple of tricks. Now let us get back to our page. The most difficult part is deciding what goes where i.e. what will be our design. That is if we already have the content and to avoid wasting time on generating content, use the following text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.**
Add a picture to your page.
Add pictures This button adds pictures to the page. Note: It is always best to copy the images either into the folder with our web page or in a special folder where all the images of our site are stored. This folder should reside inside the folder where our site is (where the HTML file(s) is/are).
Create links Highlight a text or a picture and on the property inspector in the link box type the URL that you want to connect to, or the relative path or absolute path to the file that you want to connect to.
Or press this button.
**
A menu will appear:
This is the dummy text which, by tradition, web developers use to create their designs when they don’t have content. You can find the passage and some more explanation here: http://www.lipsum.com/
Text stands for what shows on the web page, link for where you are linking to. You can also select from the following reserved target names: •
_blank loads the linked file into a new, unnamed browser window.
•
_parent loads the linked file into the parent frameset or window of the frame that
contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window. •
_self loads the linked file into the same frame or window as the link. This target is
the default, so you usually don't need to specify it. •
_top loads the linked file into the full browser window, thereby removing all frames.
Link paths You need to know that when you link to a file there are two ways, relative and absolute path. Relative path is the path to the file in relation to were your page is saved e.g: images/beach.jpg Means the file is stored in a folder inside the folder your web page is stored. Absolute path The absolute path is the path in the hard drive to the file that you are linking to. eg: c:/wwwroot/my_site/images/beach.jpg To link to an email the command is: mailto:
[email protected] Or you can use this button
wich is the automated version.
There are two ways to create the design of a webpage. The old fashion way is to do it with tables. The new thing is XHTML and table-less design were all the design is dealt in the CSS (cascading style sheet). While the new style has numerous advantages it is very complicated because of the different browser interpreting CSS in a different way.
Tables So lets start by making a table by pressing this button on the menu that pops choose how many rows and columns you need. With tables you need to know about is cell spacing and cell padding
• • •
CELLSPACING controls the space between table cells. Although there is no official default, browsers usually use a default of 2. CELLPADDING sets the amount of space between the contents of the cell and the cell wall. The default is 1. CELLPADDING is usually more effective than CELLSPACING for spreading out the contents of the table.
