N No ot te es s

landyaddaInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 3 χρόνια και 8 μήνες)

69 εμφανίσεις








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)



Introduction

to Dreamweaver

Macromedia Dreamweaver

is a professional HTML editor for designing, coding, and developing websites, web pages, and web
applications. Whether you enjoy the control of hand
-
coding HTML,

or prefer to work in a visual editing envi
ronment,

The workspace layout

In Windows, Dreamweaver provides an all
-
in
-
one
-
window integrated layout. In the integrated workspace, all windows and panels are
integrated into a single larger application window.


The Document window

The Document window sh
ows the current document. You can select any of the following views:

Design view

is a design environment for visual page layout, visual editing, and rapid application development. In this view,
Dreamweaver displays a fully editable, visual representation o
f the document, similar to what you would see viewing the page in a
browser.

Code view

is a hand
-
coding environment for writing and editing HTML, JavaScript, server
-
language code
--
such as PHP or
ColdFusion Markup Language (CFML)
--
and any other kind of code
.

Code and Design view

lets you view both Code view and Design view for the same document in a single window.

When the Document window has a title bar, the title bar displays the page title and, in parentheses, the file’s path and file
name. After
the file
name, Dreamweaver displays an asterisk if you’ve made changes that you haven’t saved yet.

The Document toolbar

The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and

a
split view that
shows both Code and Design view.

The toolbar also contains some common commands and options related to viewing the document and transferring it between the lo
cal
and remote sites.








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)




The following options appear in the Document toolbar:

Show Code View

disp
lays only the Code view in the Document window.

Show Code and Design Views

displays Code view in part of the Document window and Design view in another part. When you
select this combined view, the option Design View on Top becomes available in the View Op
tions menu. Use this option to specify
which view appears at the top of your Document window.

Show Design View

displays only the Design view in the Document window.

Server Debug

displays a report to help you debug the current ColdFusion page. The report in
cludes errors, if any, in your page.

Document Title

allows you to enter a title for your document, to be displayed in the browser’s title bar. If your document already
has a title, it appears in this field.

No Browser/Check Errors

enables you to check cros
s
-
browser compatibility.

Validate Markup

lets you validate the current document or a selected tag.

File Management

displays the File Management pop
-
up menu.

Preview/Debug in Browser

allows you to preview or debug your document in a browser. Select a browse
r from the pop
-
up menu.

Refresh Design View

refreshes the document’s Design view after you make changes in Code view. Changes you make in Code
view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clic
king this button.

View Options

allows you to set options for Code view and Design view, including which view should appear above the other.
Options in the menu are for the current view: Design view, Code view, or both.

Visual Aids

lets you use different vi
sual aids to design your pages.

The status bar

The status bar at the bottom of the Document window provides additional information about the document you are creating.








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)




The tag selector shows the hierarchy of tags surrounding the current selection. Click
any tag in the hierarchy to select that tag and all
its contents. Click
<body>

to select the entire body of the document. To set the
class

or
id

attributes for a tag in the tag selector, right
-
click (Windows) or Control
-
click (Macintosh) the tag and select

a class or ID from the context menu. The tag selector is the preferable
method for selecting tags because it ensures that you are always selecting the tag with accuracy.

The Insert bar

The Insert bar contains buttons for creating and inserting objects suc
h as tables, layers, and images. When you roll the pointer over a
button, a tooltip appears with the name of the button.

The buttons are organized into several categories, which you can switch on the left side of the Insert bar. Additional catego
ries appea
r
when the current document contains server code, such as ASP or CFML documents. When you start Dreamweaver, the category you
were last working in

opens.


Some categories have buttons with pop
-
up menus. When you select an option from a pop
-
up menu, it be
comes the default action for
the button. For example, if you select Image Placeholder from the Image button’s pop
-
up menu, the next time you click the Image
button, Dreamweaver inserts an image placeholder. Anytime you select a new option from the pop
-
up m
enu, the default action for the
button changes

The Insert bar is organized in the following categories:

The Common category

enables you to create and insert the most commonly used objects, such as images and tables.

The Layout category

enables you to inser
t tables,
div

tags, layers, and frames. You can also you choose among three views of
tables: Standard (default), Expanded Tables, and Layout. When Layout mode is selected, you can use the Dreamweaver layout too
ls:
Draw Layout Cell and Draw Layout Table.

T
he Forms category

contains buttons for creating forms and inserting form

elements.

The Text category

enables you to insert a variety of text
-

and list
-
formatting tags, such as
b
,
em
,
p
,
h1
, and
ul
.

The HTML category

enables you to insert HTML tags for ho
rizontal rules, head content, tables, frames, and scripts.

Server
-
code categories

are available only for pages that use a particular server language, including ASP, ASP.NET, CFML Basic,
CFML Flow, CFML Advanced, JSP, and PHP. Each of these categories prov
ides server
-
code objects that you can insert in Code view.

The Application category

enables you to insert dynamic elements such as recordsets, repeated regions, and record insertion and
update forms.

The Flash elements category

enables you to insert Macro
media Flash elements.








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)



The Favorites category

enables you to group and organize the Insert bar buttons you use the most in one common place.

The Coding toolbar

The Coding toolbar contains buttons that let you perform many standard coding operations, such a
s collapsing and expanding code
selections, highlighting invalid code, applying and removing comments, indenting code, and inserting recently used code snipp
ets.
The Coding toolbar is visible only in Code view and appears vertically on the left side of the

Document window.



The Property inspector

The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as
text or
an inserted object. The contents of the Property inspector vary depending on the

element selected. For example, if you select an image
on your page, the Property inspector changes to show properties for the image (such as the file path to the image, the width
and height
of the image, the border around the image, if any, and so on).


The Files panel

You use the Files panel to view and manage the files in your Dreamweaver site.



About Dreamweaver files








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)



You can work with a variety of file types in Dreamweaver. The primary kind of file you will work with is the HTML file. HTML
files
--
or Hypertext Markup Language files
--
contain the tag
-
based language responsible for displaying a web page in a browser. You
can save HTML files with either the .html or .htm extension. Dreamweaver saves files using the .html extension by default.

Following
are some of the other common file types you might use when working in Dreamweaver:

CSS
, or Cascading Style Sheet files, have a .css extension. They are used to format HTML content and control the positioning of
various page elements. For more information o
n working with these types of files, see
Understanding Cascading Style Sheets

in
Using
Dreamweaver
.

GIF
, or Graphics Interchange F
ormat files, have a .gif extension. GIF format is a popular web graphic format for cartoons, logos,
graphics with transparent areas, and animations. GIFs contain a maximum of 256 colors.

JPEG
, or Joint Photographic Experts Group files (named after the orga
nization that created the format), have a .jpg extension, and
are usually photographs or high
-
color images. The JPEG format is best for digital or scanned photographs, images using textures,
images with gradient color transitions, and any images that requi
re more than 256 colors.

XML
, or Extensible Markup Language files, have a .xml extension. They contain data in a raw form that can be formatted using XSL

(Extensible Stylesheet Language). For more information on working with these types of files, see
Displaying XML Data in Web

Pages

in
Using Dreamweaver
.

XSL
, or Extensible Stylesheet Language files, have a .xsl or .xslt extension. They

are used to style XML data that you want to display
on a web page. For more information on working with these types of files, see
Di
splaying XML Data in Web

Pages

in
Using
Dreamweaver
.

CFML
, or ColdFusion Markup Language files, have a .cfm extension. They are used to process dynamic pages. For more
information on working with these types of files, see
Building ColdFusion Applications Rapidly

in
Using Dreamweaver
.

ASPX
, or ASP.NET files, have a .aspx extension. They are used to process dynamic pages. For more inf
ormation on working with
these types of files, see
Building ASP.NET Applications Rapidly

in
Using Dreamweaver
.

PHP
, or PHP: Hyper
text Preprocessor files, have a .php extension. They are used to process dynamic pages. For more information on
working with these types of files, see
Building PHP Applications Rapidly

in
Using Dreamweaver
.

Creating new files in Dreamweaver

This section tells you how to create a new blank document in Dreamweaver.

You can also create new documents in Dreamweaver that are based on a Dr
eamweaver design file or on an existing template

To create a new blank document:

1.

Select File > New.

The New Document dialog box appears. The General tab is already selected.

2.

From the Category list, select Basic Page, Dynamic Page, Template Page, Other, o
r Framesets; then, from the list on the
right, select the type of document you want to create.

For example, select Basic Page to create an HTML document, or select Dynamic page to create a ColdFusion or ASP
document, and so on.

For more information about
options in this dialog box, click the Help button in the dialog

box.

3.

Click the Create button.








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)



The new document opens in the Document window.

4.

Save the document).

Saving files in Dreamweaver

When you create a new document, you need to save it.

To save a n
ew document:

1.

Select File > Save.

2.

In the dialog box that appears, navigate to the folder where you want to save the file.

3.

In the File Name text box, type a name for the file.

Avoid using spaces and special characters in file and folder names and do not b
egin a filename with a numeral. In
particular, do not use special characters (such as é, ç, or ¥) or punctuation (such as colons, slashes, or periods) in the na
mes
of files you intend to put on a remote server; many servers change these characters during u
pload, which will cause any
links to the

files to

break.

4.

Click Save.

Opening files in Dreamweaver

In Dreamweaver, you can easily open and edit your documents.

To open a file:

1.

Select File > Open.

2.

In the Open dialog box, select the file and click Open.

I
nsert tables

Next you’ll add a table that will hold text, graphics, and Macromedia Flash assets.

1.

Click once on the page to place the insertion point in the upper
-
left corner of the page.


1.

Select Insert > Table.

2.

In the Insert Table dialog box, do the fo
llowing:

o

Enter
3
in the Rows text box.

o

Enter
1
in the Columns text box.

o

Enter
700
in the Table Width text box.

o

Select Pixels from the Table Width pop
-
up menu.

o

Enter
0
in the Border Thickness text box.

o

Enter
0
in the Cell Padding text box.

o

Enter
0
in

the Cell Spacing text box

Insert images








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)



After you create your page layout, you are ready to add assets to the page. You’ll start by adding images. You can use severa
l methods
to add images to a web page in Dreamweaver. In this section, you’ll add four dif
ferent images to the index page for Cafe Townsend,
using various methods.

Insert text

Now you’ll add some text to the page. You can type text directly in the Dreamweaver Document window, or you can copy and past
e
text from other sources (such as Microsoft
Word or plain text files). Later, you’ll use Cascading Style Sheets (CSS) to format the text.

Insert layers

Next you’ll add layers to the page. A layer is an absolutely positioned element that you can use to hold images, text, Flash
files, and
other conten
t.

Add more layers

Now you’ll add more layers to the page. You’ll use the first layer (banner_graphic) as a reference point for positioning the
other
layers. You’ll also use the CSS Layer Backgrounds feature to help you position and distinguish between lay
ers.

About web applications

A web application is a website that contains pages with partly or entirely undetermined content. The final content of a page
is
determined only when the visitor requests a page from the web server. Because the final content of t
he page varies from request to
request based on the visitor’s actions, this kind of page is called a dynamic page.

Common uses for web applications

Web applications have many uses for both site visitors and developers, including the following:



Let visito
rs find information quickly and easily on a content
-
rich website.

This kind of web application gives visitors the ability to search, organize, and navigate content

as

they see fit. Examples
include company intranets, Microsoft MSDN (
www.msdn.microsoft.com
), and Amazon.com (
www.amazon.com
).



Collect, save, and analyze data provided by site visitors.

In the past, data entered in HTML forms was s
ent as e
-
mail messages to employees or CGI applications for processing. A
web application can save form data directly into a database and also extract the data and create web
-
based reports for
analysis. Examples include online banking pages, store check
-
ou
t pages, surveys, and user
-
feedback forms.



Update websites that have constantly changing content.

A web application frees the web designer from continually updating the site’s HTML. Content

providers such as news
editors provide the web application with c
ontent, and the web

application updates the site automatically. Examples include
the
Economist (
www.economist.com
) and CNN (
www.cnn.com
).

How a web ap
plication works

A web application is a collection of static and dynamic web pages. A
static web page

is one that does not change when a site visitor
requests it: The web server sends the page to the requesting web browser without modifying it. In contrast,

a
dynamic web page

is
modified by the server before it is sent to the requesting browser. The changing nature of the page is why it’s called dynami
c.

Processing static web pages








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)



A static website comprises a set of related HTML pages and files hosted on a

computer running a web server.

A web server is software that serves web pages in response to requests from web browsers. A page request is generated when a
visitor
clicks a link on a web page, selects a bookmark in a browser, or enters a URL in a browser’
s address text box.

The final content of a static web page is determined by the page designer and doesn’t change when the page is requested. Here
’s an
example:

<html>


<head>


<title>Trio Motors Information Page</title>


</head>


<body>


<
h1>About Trio Motors</h1>


<p>Trio Motors is a leading automobile manufacturer.</p>


</body>

</html>

Every line of the page’s HTML code is written by the designer before the page is placed on the server. Because the HTML doesn
’t
change once it’s on
the server, this kind of page is called a static page.

When the web server receives a request for a static page, the server reads the request, finds the page, and sends it to the r
equesting
browser, as shown in the following figure:


In the case of web a
pplications, certain lines of code are undetermined when the visitor requests the page. These lines must be
determined by some mechanism before the page can be sent to the browser. The mechanism is discussed in the following section.

Processing dynamic pag
es

When a web server receives a request for a static web page, the server sends the page directly to the requesting browser. Whe
n the
web server receives a request for a dynamic page, however, it reacts differently: It passes the page to a special piece of

software
responsible for finishing the page. This special software is called an application server.

The application server reads the code on the page, finishes the page according to the instructions in the code, and then remo
ves the
code from the page. T
he result is a static page that the application server passes back to the web server, which then sends the page to
the requesting browser. All the browser gets when the page arrives is pure HTML. Here’s a view of the process:








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)




Accessing a database

An appl
ication server lets you work with server
-
side resources such as databases. For example, a dynamic page may instruct the
application server to extract data from a database and insert it into the page’s HTML.

The instruction to extract data from a database
is called a database query. A query consists of search criteria expressed in a database
language called SQL (Structured Query Language). The SQL query is written into the page’s server
-
side scripts or tags.

An application server cannot communicate directl
y with a database because the database’s proprietary format renders the data
undecipherable in much the same way that a Microsoft Word document opened in Notepad or BBEdit may be undecipherable. The
application server can communicate with the database only

through the intermediary of a database driver: software that acts like an
interpreter between the application server and the database.

After the driver establishes communication, the query is executed against the database and a recordset is created. A re
cordset is a set
of data extracted from one or more tables in a database. The recordset is returned to the application server, which uses the
data to
complete the page.

Here’s a simple database query written in SQL:

SELECT lastname, firstname, fitpoints

FR
OM employees

This statement creates a three
-
column recordset and fills it with rows containing the last name, first name, and fitness points of all
employees in the database

Here’s an illustration of the process of querying a database and returning data to

the browser:








Web Designing
\

Desktop Publshing

Dreamweaver


(
(
N
N
o
o
t
t
e
e
s
s


)
)




You can use almost any database with your web application, as long as the appropriate database driver for it is installed on
the server.

If you plan to build small low
-
cost applications, you can use a file
-
based database, such as one create
d in Microsoft Access. If you
plan to build robust, business
-
critical applications, you can use a server
-
based database, such as one created in Microsoft SQL Server,
Oracle 9i, or MySQL.

If your database is located on a system other than your web server,
make sure you have a fast

connection between the two systems so
that your web application can operate quickly and

efficiently.