To override this problem, Web Progmmer developed WYSIWYG type program. That means Whta You See Is What You Get. By using this type, people can design their own WebPages in a similar way to a word processing or Desktop Publishing program: What you layout on the screen is what the user will seeon their computer. People don't have to know anyone HTML code while designing but it is still present and generated automatically in the background. If you have knowledge of HTML, then you can edit it manually if you desire.
Dreamweaver is a WYSIWYG web-designing program that provides an effective interface for quickly creating high quality WebPages. It contains a range of powerful tools for incorporating the latest web design elements into sites to give them a highly professional look.
Dreamweaver MX:
Macromedia Dreamweaver MX is a professional HTML editor for designing, coding, and developing websites, web pages, web applications. Whether you enjoy the control of hand-coding HTML or prefer to work in a visual editing enviroment, Dreamweaver provides you with helpful tools to enchance your web creation experience.
The visual editing features in Dreamweaver let you quickly create pages without writing a line of
code. If you prefer to code by hand, however, Dreamweaver also includes many coding-related tools and features. And Dreamweaver helps you to build dynamic database-backed web application using server languages such as Asp, ASP.NET, Cold Fusion Markup Language(CFML, JSP, and PHP.
WHAT IS A WEB APPLICATION?
A web application is a website that contains pages stored on a web server with partly or entirely
undetermined content. The final content of a page is determined only when the user requests a page from the web server. Because the final content of the page varies from request to request based on the user's actions, this kind of a page is called a dynamic page.
A web application is a collection of regular and dynamic web paged. A regular web page is one
that does not change when a user 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 dynamic.
PROCESSING REGULAR WEB PAGES:
A regular website comprises a set of related HTML pages and files hosted on a computer running a web server.
A web server is doftware that serves web pages in response to requests from web browsers. A page request is generated when a user clicks a link on a web page, chooses a bookmark in a browser, or enters a URL in a browser's Address text box and clicks Go.
The final content of a regular web page is determined by the page designer and doesn't change
when the page is requested. Here's an example:
Nepal
One of the beautiful countries in the world.
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.
Note: Strictly speaking, a "static" page may not be static at all. For example, a rollover image or
a Flash movie can make a static page come alive. However, this help system refers to a page as static if it is sent to the browser without modifications.
When the web server receives a request for a static page, the server reads the request, finds the
page, and sends it to the requesting browser, as shown in the following figure:
Steps 1: Web browser request static page.
Steps 2: Web server finds page.
Steps 3: Webserver sends page to requesting browser.
In the case of web application, sertain lines of code are undetermined when the user 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 PAGES:
When a web server receives a request fr a regular web page, the server sends the page to the requesting browser. But, the web server reacts differently when it receives a request for a dynamic page: it passes the page to special software extention 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 removes the code on from the page. The 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:
Step 1: Web browser requests the dynamic page.
Step 2: Web server finds page and passes it to application server.
Step 3: Application server scans page for instruction and finishes page.
Step 4: Application server passes finished page back to web server.
Step 5: Web server sends finished page to requesting browser.
ACCESSING A DATABASE:
An application 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 to the page's HTML. For more information: The instruction to extract data from a database is called a data 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 directly with a database because the database's proprietary format renders the data undecipherable in much the same way that a Word document opened in Notepad is undecipherable. The application server can communicate only through the intermediary of a database driver. A database driver is software that acts like an interpreter between the application server and the data used in the dynamic page.
Here's a simple database query written in SQL:
SELECT lastname, firstname, fitpoints FROM employess
This statements 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:
You can use almost any database with your web application, as long as you have the appropriate
database driver for it.
If you plan to build small low-cost application, you can use a file-based databse, such as one created in Microsoft Access. If you plan to build robust, business-critical application, you can use a server-based database, such as one created in Microsoft SQL Server, Oracle 9i, or My SQL.
If your database is located on a system other then your web server, make sure you have a fast
connection between the two systems so that your web application can operate quickly and efficiently.
Step 1: Web browser request dynamic page.
Step 2: Webserver finds page and passes it to application server.
Step 3: Application server scanspage for instructions.
Step 4: Application server sends query to database driver.
Step 5: Driver executes the query against the database.
Step 6: Recordset is returned to driver.
Step 7: Driver passes recordset to application server.
Step 8: Application server inserts data in page, then passes the page to the web server.
Step 9: Web server sends finished page to requesting browser.
CREATING YOUR FIRST WEBSITE IN DREAMWEAVER:
Set up a local site:
The mostcommon approach to creating a website using Dreamweaver is to create and edit pages on your local, and then upload copies of those pages to a remote web server to make them publicly available. It's possible to use Dreamweaver in other ways (such as running a web server on your local computer, or uploading files to a staging server, or using a mounted disk as if it were your local disk), but the lessons in this guide assume that you're working locally and then uploading to a remote server.
. A website: a set of pages on a server, to be viewed by a visitor to the site using a web browser.
. A remote site: the files on the server that make up a website, from your ( the author's) point of
view rather then a visitor's point of view.
. A local site: the files on your local disk that correspond to the files in the remote site. You
edit the files on your local disk, then upload them to the remote site.
. A Dreamweaver site defination: a set of defining characteristics for a local site, plus information on how the local site corresponds to remote site.
Normally, you would start creating a website by planning it: figuring out how many pages to create, what content appears on each page, and how the pages are connected to each other.
You'll create a site definition using the Site Definition dialog box. You can fill in this dialog box
in either of two views: Basic or Advanced. The Basic approach guides you through site setup step by step. If you'd rather edit site information without guidance, you can click the Advanced tab at any time.
The following procedure describes how to set options in Basic version of the dialog box, which
is also known as the Site Definition Wizard.
To define a site:
1. Choose Site > Manage Sites.
2. Choose New - Site
The Site Definition dialog box appears.
3. If the dialog box is showing the Advanced tab, click Basic. The first screen of the
Site Definition Wizard appears, asking you to enter a name of your site.
4. In the text box, enter a name to identify the site wihtin Dreamweaver. The name can be anything
you want. For example, you could name the site About Pokhara.
5. Click Next to proceed to the next step. The next screen of the wizard appears, asking if you
want to work with a server technology.
6. Select the No option to indicate that for now, this site is a static site, with no dynamic pages.
7. Click Next to proceed to the next step. The next screen of the wizard appears, asking how you
want to work with your files.
8. Select the option labeled "Edit local copies on my machine, then upload to server when ready(recommended)."
9. The text box allows you to specify a folder on your local disk where Dreamweaver should store the
local version of the site's files. Its easier to specify an accurate folder name if you browse
to the folder rather than typing the path, so click the folder icon next to the text box.
10.Click Next to proceed to the next step. The next screen of the wizard appears, asking how you
connect to your remote server.
11.For now choose None from the pop-up menu. Click Next to proceed to the next step. The next screen of the wizard
appears, showing a summary of your settings.
12.Click Done to finish.
13.Click Done to allow Dreamweaver to create the site cache.
The Site panel normally shows all the files and folders in your site,but right now your site doesn't contain any files or folders. When there are files in a site, the file list in the Site panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop.
If you already have a set of local HTML files that you want to use to create a website, you can use the file browser in the Site panel to copy those files into your newly created site's folder. However, you may want to complte the lessons in this guide using the files provided with Dreamweaver before you start using your own files.
ADDING NEW PAGES:
New pages can be added directly from the Site Window (Files Tab) once a site has been created . You can also add the new pages from the Design view.
From Site Window:
1. Right click on the pre-defined Site name (About Chelsea).
2. Click on New file.
3. Type a nme for the new file like (index.htm) and open it by double clicking on the file icon.
Defining file as a homepage:
1. Choose the required the file name from the Site Window.
2. Click the right mouse button.
3. Choose set as home page and click on it.
Defining a site:
1. Go to site menu.
2. Click on Manage Sites.
Then Manage Site dialog box with various sites appears.
3. Choose required site name.
4. Click on Done.
> Common (by default setting)
> Layout
> Forms
> Text
> HTML
> Applications
> Flash Elements
> Favourites
ABOUT HYPERLINKS
Hyperlinks are shortcuts for jumping between elements on the web. A hyperlink allows the viewer to jump to another webpage, jump to another website, or launches an e-mail application.
Text, images and part of an image can be used as hyperlink an, for both elements, the cursor turns into a pointing hand when it is positioned over a hyperlink on a webpage. If you click at this point,you will be taken to the linked item.
Hyperlinks can be linked to:
Other location within the same page.
Link: #Anchor name
Note: You have to define Anchor Name at first before creating link using Insert-Invisible Tags- Named Anchor.
Other pages within the same website.
Link: xxx.html
Note: This type of link is called Document-relative link. This type of linking can be created using Modify- Make Link (CTRL+L) menu.
Other website:
Link: http://www.mail.yahoo.com
Link: http://www.macromedia.com/software/dreamweaver
Note: This type of link is called Absolute links.
E-mail links:
Link: mailto:Chelsea@ulci.com.np
HYPERLINK PROCEDURE:
1. Select required text, image or part of an image (i.e. hotspots; using map tools).
2. Type required file name to be linked at Link box inside the property bar.
Like:
Link: "xyz.htm' (in case of document_ Relative Link).
Or, Link: "#pop" Or, "xyz.htm#abc" (incase of Internal Link)
Or, Link: mailto:abc@yahoo.com (in case of E-mail Link)
Or, Link: http://www.doe.gov.np (in case of Absolute Links)
3. Press Enter Key.
LINKING TO A SPECIFIC PLACE IN A DOCUMENT:
You can use the property inspector to link to a particular section of a document by first creating
named anchors. Named anchors let you set markers in a document, which are often placed at a specific
topic or at the top of a document. You can then create links to these named anchors, which quickly
take your visitor to the specified position.
Creating a link to a named anchor is two-step process. First, create a named anchor; then create a
link to the named anchor.
To craete a named anchor:
1. In the Document window's Design view, place the insertion point where you want the named anchor.
2. Do one of the following:
. Choose Insert > Named Anchor. Or Press Control+Alt+A
. Select the common tab in the Insert bar and click the Named Anchor button.
The Named Anchor dialog box appears.
3. In the anchor Name field, type a name for the anchor.
Note: If you do not see the anchor marker, Choose View > Visual Aids > Invisible Elements.
To link to a named anchor:
1. In the Document window's Design view, select text or an image to create a link from.
2. In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor.
For example:
. To link to an anchor named "top" in the current document, type #top.
. To link to an anchor named "top" in a different document in the same folder, type filename.html#top.
Note: Anchor names are case sensitive.
To link to a named anchor using the point-to-file method:
1. Open the document containing the named anchor you want.
2. In the Document window's Design view, select text or an image you want to link from. (If this is
another open document, you must switch to it.)
3. Do one of the following:
. Click the point-to-file icon to the right of the Link text box in the Property inspector and drag it to
the anchor you want to link to: either an anchor within the same document or an anchor in another
open document.
. Shift-drag in the Document window from the selected text or image to the anchor you want to link
to: either an anchor within the same document or an anchor in another open document.
Changing the document title
The title of an HTMK page helps site Visitors keep track of what they're viewing as they browse, and it
identifies the page in the visitor's history and bookmark list. If you don't title a page, the page
will appear in the browser window, bookmark list, and history list as Untitled Document.
Note: Giving the document a filename (by serving it) is not the same as giving the page a title.
To locate all untitled documents in your site, use the site > Reports command.
To change the title of a page:
1. With the document open, do one of the following:
. Select Modify > Page Properties.
. Selct View > Toolbar > Document (if it isn't a;ready selected).
2. In the Title text box, enter the title for the page and the Document window (and in the Document
toolbar, if it's showing). The filename of the page and the folder the file is saved in appears
in parentheses next to the title in the title bar. An asterisk indicates the document contains
chnages that have not yet been saved.
No comments:
Post a Comment