After all the lessons that we discussed, Dreamweaver speeds up the process of development on the basis that w have already mastered, the Art of Web Development. Dreamweaver provides access to a number of tools that will make you develop your page not only faster but also professional looking.
Dreamweaver was originally created by the company known as Macromedia, the first version of the software was released in December 1997. Back then, Macromedia has its own set of products up until it was acquired by Adobe 2005. Adobe linked all their software into one very useful package.
• double click the desktop icon or go to ( START( ALL PROGRAMS ( MACROMEDIA ( DREAMWEAVER
Two workspace view that can b used:
( DESIGNER WORKSPACE – deals mostly with the visual outcome of the page. ( CODER WORKSPACE – deals with the code of the files you are currently editing.
PARTS of a DREAMWEAVER WORKSPACE
1. MENU BAR – the top most part of the window. This is where the commands and menus are accessed conventionally. 2. INSERT TOOLBAR – it is located below the menu bar. This is where the useful links to object to be inserted are located. 3. PROPERTY INSPECTOR (TAG inspector) – is in the lowest part of the screen. This panel show the properties of the items currently selected in the document window. 4. DOCUMENT WINDOW – the center part and often the biggest. This is where the document is displayed either on its source view or in design view. 5. SOURCE VIEW – shows the page as an assembly of codes and scripts. 6. DESIGN VIEW – shows the page as a collection of object. This is where an initial visual confirmation is possible. 7. PANELS & PANEL GROUPS – located on the rightmost or leftmost part of the screen. This panel contain the mostly used application functions that you require. It can also be customized to suit you development needs.
MAXIMIZING the document window – to make the most out of the document window, the panels were made to be hidden if needed.
EXPANDING the PANELS – panels can also be expand and collapse.
MY FIRST PAGE
Another way of creating a new document is by clicking FILE ( NEW…
The next Dialog box lets you choose what type of file you will be developing. • HTML 4.01 Transitional – page can use tags that are already deprecated. • HTML 4.01 Strict – page will use only non-deprecated tags. • XHTML – is the next generation of HTML. This involves the use of only the allowed tag
ADD TITLE to your PAGE – to add title to your page, go to the page tab. Type the title of the page in the title field.
TO SAVE the PAGE – It is recommended that the files be saved regularly after every successful operation. Top save your work, go to FILE( SAVE or HIT CTRL + S. Save your document as “index.html”. The browser automatically looks for this file as a starting page of a website. The other file name that can be used is “default.html”.
INSERTING TEXT – inserting text is just the same as any word or text editor, you can type in the content or you can copy the contents from a file or paste the text from another source.
EDITING THE CONTENT – The property inspector panel handles the properties of the objects inside the page, including texts. This is the property of the text can be changed.
INSERTING IMAGES – To insert image, you can use the insert toolbar.
CHANGING THE PAGE PROPERTIES
TO CREATE A HYPERLINK – highlight the text that you want to become a hyperlink ( Click on the Hyperlink button.
TO USE ANCHOR TAGS – Make an anchor first. Put the cursor on the location in which you want to put an anchor to.
TABLES - Click the table button or...