Minggu, 26 Desember 2010

Unit 2. The Dreamweaver Interface

Posted by Andra pratama 21.20, under | No comments

Unit 2. The Dreamweaver Interface (I)

We're going to see which are the basic elements of Dreamweaver 8: screen, bars, panels, etc, also we will learn to know how to differentiate between each one of them. We'll learn how they are called, where they are and what they are used for. We'll also see how to obtain help, in case that at some moment we don't know how to continue working.

When we know all this we'll be ready to begin to create web Pages.

The initial screen

When we start Dreamweaver an initial screen appears like this one, we're going to look at its fundamental components.

We will list the names of the different elements so it will be easier to understand the rest of the course. The screen that is next (and in general all those of this course) does possibly not coincide exactly with what you see in your computer, since each user can decide what elements they want to see at every moment, as we'll see ahead.

The tool bars

Title bar

The title bar contains the name of the program (Marcromedia Dreamweaver 8) and the name of the document we are working with, between parenthesis you can see the name of the file format this file is codified. At the end on the right are the buttons to minimize, maximize/restore and close the program.

Menu bar

The menu bar contains Dreamweaver operations, grouped in drop down menus. When we click on Insert, for example, we'll see the operations related to the different elements that can be inserted in Dreamweaver.

Many of the operations can be done from these menus, but sometimes it's preferable (or compulsory) to do them from the panels.

The Standard ToolBar

The standard toolbar contains icons to execute some of the most habitual operations immediatelly, like Open

, Save

, etc.

The document toolbar

The document toolbar contains icons to execute some other habitual operations that the standard toolbar doesn't include. These operations are for example changing the view of the document, preview, etc.

The status bar

The status bar shows us in every moment the HTML tag we are in (in the image, as we are in a blank document, we are directly on the <body> tag). We also can swich between the selection, drag and zoom modes using the three buttons on the right. You can select the zoom which you want to view the Design View selecting a percentage or just tipying it on the percentage textbox (the default is 100%).

Panels and Inspectors

Dreamweaver uses floating windows similar to the toolbar ones, these are known as panels or inspectors. The difference between panel and inspector is that, in general, the appearance and options of an inspector changes depending on the selected object.

Through the Window option on the menu bar, it's possible to show or to hide each one of the panels or inspectors. We're going to look at the most important ones.

The Properties inspector

The Properties inspector shows and allows us to modify the more frequent properties that are used in the selected elements. For example, when we select element a text it will show the type of font, the alignment, whether it's in italic or bold, etc.

Clicking on the button

you can unfold more options. This button is in the bottom-right corner.

It will surely be the tool that you are going to use most in Dreamweaver.

The insert toolbar or panel of objects.

The insert toolbar or panel of objects allows you to insert elements in a document without having to use the menu. The elements are classified according to their category: tables, text, forms, etc.

It's possible to configure this panel so that the icons of the objects are shown as buttons (in the previous image), as names, or both simultaneously.

Tutor 2

Document views

You can change the view of the document through the document toolbar.

Design View

The Design view allows you to work with the visual editor. It's the default view of Dreamweaver and the one that is used most of the time.

The code View

The Code view is used to be able to work totally in code programming mode. It doesn't allow you to directly have a visual reference of how the document is being shown according to the way the code is modified.

The Split view

The Split view allows you to divide the window in two zones. The top area shows the source code, and the bottom, the visual editor. When a change is made in one of the zones, this change is applied directly on the other.

The Help Guide

Through the Help menu you can:

Go to the help dialog which is very similar to the one of Windows, where you can search by subject, index, or content. You can select the Using Dreamweaver option or press F1.

Open tutorials (Getting Started and Tutorials option).

Open the Reference panel in which you will find the syntax and the description of HTML tags.

Go to the Dreamweaver Support Center in the Macromedia Web.

Go to the Macromedia Online Forums.

0 komentar:

Posting Komentar

Cara Membuat Teks Berjalan dan Berkedip di Blog WordPress, Blogspot, Joomla dan Blog Yang Lain

Mungkin file tutorial ini sudah tak asing lagi bagi para peblogger yang sudah malang melintang dalam menjelajah dan mengubek-ubek blognya. Tapi mungkin juga ada yang belum tahu mengenai tutorial sederhana tentang cara membuat teks berjalan dan berkedip pada blog wordpress, blogspot, joomla ataupun pada blog dengan css yang lain.

Cara ini juga berlaku pada website dengan design sendiri yang berformat html. Teks berjalan dan berkedip pada bahasa html disebut dengan marquee behavior. Nah, kalau teman-teman mencari arti kata marquee di kamus, maka artinya akan lain yaitu “tenda besar”. Pastinya nggak nyambung kan..

Tidak panjang lebar, berikut tutorial cara membuat teks berjalan dan berkedip pada blog wordpress, joomla, blogspot, dan blog yang lain :

1. Marquee 1.0.0