Ultradev example tutorial: 3.1 defines a site

The 3rd chapter: Applied database founds dynamic webpage

The first: Definition site

In front talk on and on so much has not begun to move Ultradev, cannot be able to bear or endure a bit urgently? Let us begin the brigade of Ultradev now.

The first condition that use Dreamweaver Ultradev establishs Web application is to want to had defined a site first (similar the establishs Web site procedure before us) .

1. runs Ultradev, choose menu Site ->What Define Sites appears is this interface, acquiescent word is 3 sites that have Ultradev predefine only, click New to found his site.



Clicking what appear after New is this face plate, above all we nod the Local Info that chooses left first

Site Name: The name of your site, take along with you, take here for Reg_user.

Local Root: The Web site that appoints you is in catalog, manage in Internet information with you implement medium catalog is same. O ther extraction are acquiescent the value is OK.



Choose left Application Server next


Server Model: The Web that chooses you uses order pattern, share 3 kinds, ASP 2.0, JSP 1.0, we choose ASP 2.0 here. What in Windows2000 we use is IIS5.0 + ASP 3.0, did not affect nevertheless.


Scripting: The language that process designing uses, can choose VBScript or JavaScript, be indifferent to, because Ultradev can help us automatically generate code, basically we need not write even a code.


Page Extension: What when the file is saved, acquiesce is suffixal.


Access: The issuance of the webpage means.


If choose Local/Network, can 2 places want to fill.


Remote Folder: The issuance of the webpage the position, general acquiesce is your website catalog place;


URL Prefix: The address of the website that is you, from above government serves in Internet information implement in the site pla ce that we know us in the procedure that establishs a site is Http://localhost/ , if you used another port to repair instead Http://localhost:x by oneselfAfter Xxx/ has filled this, we can use the view of Live Data View in Ultradev, it can help you absolve between editor and browser the trouble of switch, although show your dynamic data, it is a very close design.

If choose None, need not fill with respect to what, but if should debug your program you have to switch goes to browser window eloquence. Move in view of Ultradev slower, clay figurine myself is to prefer what will examine editor effect with browser window, so here I chose None.



After defining these two other need not use a pipe, if you compare an interested need to search to compare the book that introduces Ultradev in detail originally additionally? ^0^ , the Ultradev after clicking OK can tell you the amortize of a site can be built, begin to dog the connection between the file that you found, altering some document when you so is to may affect the Ultradev when the join of other file to be able to help you automatic modification is good.



Our site after OK is good with respect to the definition.



Be about to begin the trip of our excited Ultradev next time, you also can become a past master between raise one's hand.

Ultradev example tutorial: 2.4 UltraDev and the join code of all sorts of databases

The 2nd chapter: Install a database

The 4th: UltraDev and the join code of all sorts of databases

When we use Ultradev, can choose to use a variety of databases, our for instance commonly used Access database, Sql database, mysql is waited a moment. Ultradev is in with all sorts of database connective moment, needs database joins code is different. In him computer, can use DSN, decide join character oneself; On database server, can use DSN, decide join character oneself or be Server.Mappath; Friends are in begin to learn when, easy and promiscuous. In this series teaching material, I am listed here a few come out, as reference.

---------------------------------------------------------------

ODBC DSNLess Connection

(do not need DSN to join)


Join of MS Access ODBC DSNless


Driver={Microsoft Access Driver (*.mdb)};Dbq=c:\Somepath\dbname.mdb;Uid=Admin;Pwd=pass;

Join of DBase ODBC DSNless


Driver={Microsoft DBASE Driver (*.dbf)};DriverID=277;Dbq=c:\Somepath\dbname.dbf;

　


Join of Oracle ODBC DSNless


Driver={Microsoft ODBC For Oracle};Server=OracleServer.world;Uid=admin;Pwd=pass;

　


Join of MS SQL Server DSNless


Driver={SQL Server};Server=servername;Database=dbname;Uid=sa;Pwd=pass;

　


Join of MS Text Driver DSNless


Driver={Microsoft Text Driver (*.txt; *.csv)};Dbq=c:\Somepath\;Extensions=asc, csv, tab, txt;Persist Security Info=False;

　


Join of Visual Foxpro DSNless


Driver={Microsoft Visual FoxPro Driver};SourceType=DBC;SourceDB=c:\Somepath\dbname.dbc;Exclusive=No;

　


MySQL DSNless join

Driver={mysql}; Database=yourdatabase;uid=username;pwd=password;option=16386;

　


Above just was listed a few when using Asp, with the commonly used ADO connective code of the database that arrive. Want to noti ce nevertheless, in deciding join code dialog box oneself, every join code can be group only, cannot have group additionally, admit not to come out otherwise. If appear the circumstance of line feed, you get oneself to start work, them join rises.

Ultradev example tutorial: 2.3 founds Web site

The 2nd chapter: Install a database

The 3rd: Found Web site

Dynamic webpage wants a server to carry an explanation to move, dreavweaver Ultradev supports 3 kinds of trends application, ASP, JSP, ColdFusion, here we serve as example with the most commonly used Asp. Believe the operating system that has many friends is Windows 2000, can very convenient have site of a Web with respect to erect. The friend that uses Windows 9x should install Personal Web Server additionally, here not give uncecessary details, look for relevant data research please. With the friend of Windows 2000 Professional acquiescent likelihood did not install IIS to serve, can arrive Control Panel - > add delete a program - > add the installation in Windows component.

1. opens Internet to serve government implement. Can from begin - > Control Panel - > administrative tool - > Internet serves government implement open, OK also from begin - > program - > administrativ e tool - > Internet serves government implement open.



2. builds a site. The computer name that your Internet news service runs pitch on, right attack - > build - > Web site



Web site founds guide to will be opened, the first pace is the specification that wants you to input Web site, remove casually can, we name with UseUltraDev here, click next next:

This one pace is to be your Web site to appoint Ip address and port, use its acquiescent value, the webpage that wants those who found to browse us when us so is, the address is Http://localhost/xxx.asp. . . , if you had had a site to take up the Tcp port of 80, you can change another, like 9999, visit an address to turn into Http://localhost:9999/xxx.asp. Leader head need not be filled, cooperate the sentence that DNS sets, can found oneself fictitious lead plane, this is the word outside the problem:)



Again next, choose the catalog that your Web site is in, the place that the webpage that creates after you namely saves. Click the choice that browse the folder that you want to save a webpage. If pursue. Allow faceless visit to allow anybody to be able to visit your site, be about otherwise password, to debug the convenience of the program, also want to keep secret without what privacy at the same time, we are ticked off on this option.


Next one pace is to enquire you want a this Web site what visits attributive. Read taking is must, otherwise the file of your Html file and other blame Asp cannot see, because Asp carries an explanation to move by the server, for safe reason, this is read take option to should be not chosen however instead go up, these need not consider here, choose directly go up. Moving script also wants, otherwise our Web application did not rise with respect to application *_ ' other need not choose with respect to what use acquiesce went up. Click again next, our site is founded finished!



There still is a place to want to explain after the site was founded. General when we browse a webpage, the Url that needs to input a website only is OK the home page of open website, be like Http://www.163.net, what is the file name as to home page, this should tell here namely. Right the Web site that knocks you to just was founded, look carefully at attribute, choose documentation one co lumn, we can see have an option: Enable acquiescent documentation. Mystery was here. There is name of a file to be Default.htm below the Web site catalog that becomes you or when Default.asp, internet information manages implement can consider as him acquiescent documentation, such home page that we can open us directly with Http://localhost, other table of contents also is same, actually for instance this expresses Http://localhost/bbs/ Http://localhost/bbs/default.htm or Http://localhost/bbs/default.asp. Will tell to Windows system, big the ordinary form of a Chinese numeral is not divisional, so file name is Default.htm and DEFAULT.HTM did not part, unlike UNIX operating system, but had better name use unified style, do not have the appearance that big the ordinary form of a Chinese numeral exists at the same time, be like Default.htm.

Ultradev example tutorial: 2.2 uses ODBC join database

The 2nd chapter: Install a database

The 2nd, pass ODBC join database

Dreamweaver Ultradev 4 establishs link through data source and database. And, safety is compared if using data source to regard a database as join, once leak of Asp source code also can assure the safety of the database (in the list that database file does not want to be put in Web) . How to establish data source, follow me to come ^0^

1. opens ODBC data source control implement face plate. Control Panel is opened in Windows 2000, open administrative tool again, you can see data cause (ODBC) this one, will tell to Windows9x, be directly in Control Panel is OK see.



Doubleclick icon to open government implement, choose systematic DSN again, our data source is added here.



2. adds data source. Click add pushbutton, begin to establish data source, be in next the driver that data source chooses in the dialog box, what use because of us is the database that Microsoft Access founds, so choice Microsoft Access Driver(*.mdb) regards a database as driver, if plan institute is shown.


Click the pushbutton that finish, show the dialog box of next graphs, data source name fills in casually can, it is a principle with be being written down easily simply, here we with Userinfo (watch name) will name, notice not to conflict. The specification is filled do not fill be indifferent to, it is the utility that describes this database just. Click choice pushbutton, choose your database file. The database that in finding us to be in on one, founds, pitch on can, if pursue.



After deciding, source of a data establishs a success, if plan institute is shown.

Ultradev example tutorial: 2.1 builds a simple Access database

The 2nd chapter: Install a database

The first, build a simple Access database

This one content that we found study about the database, the friend that has used Access to found a database is OK skip over does not look.

Open Microsoft Access, choice file - > build a database, choose a position to save your database file next, the Db1.mdb that we acquiesce by it here names save.



Saving what we see after the database is the interface below, doubleclick use design implement found a watch, begin to found table of a data. The application here you need to be done step by step according to measure only, although the database never has been contacted to also do not have a problem before you, if you want to make the application of deep administrative levels, involve the sentence of relation structure, that still had better look for a book of the database to look.



Next we design an user to register used u ser news list. Doubleclick use design implement found a watch, open design interface. In field name the user message that you write to consider a record in one column (best field name does not name with Chinese, such later process designing when won't have too much trouble, also should notice the key word that did not use him database at the same time---For instance Temp, such word and database program can have conflict, use watch name as far as possible + next slip + the means of the name will name, for instance Tbl_userinfo_name, we are used first here name processing simply) . We founded 6 fields in all, the Id that saves an user to register for Username(respectively) , Userpass (the user registers used code) , Usermail (the email address of the user) , Reg_date (the user registers time) , Homepage (the individual homepage address of the user) , Phone (the connection phone of the user) . Data type form uses its acquiescent text type, field size is 50, first we come to the face undertake handling to individual field again.
Will tell commonly, telephone number of address of user name, password, email, connection won't exceed 50 character (of course, if somebody is baleful,the word that has inputted long string can sign up for a fault, so our retrospective webpage is made in should do a few restriction) , and individual homepage address, exceed possibly---Be like Http://www.netease.com/~cosix/html/ . . . . . . , so we adjust its field volume for 200.



The date of time kind instead that registers date / time, *_ ' of course. Next the function function that we can transfer him Access adds an acquiescent cost for him, =Now() , when this expresses to be added when data, database system is the value of Reg_date field automatically with the intercrop when the server is current, such we are OK leave out makes an input register the one pace of date in the webpage.



Revise after ending, those who click tool column to go up those who save chart to save us is new the watch that found, this is to be able to jump out dialog box of a warning, tell you the watch had be notted define advocate key. Not advocate if bolting, cannot decide this records the only place in the watch, can make a mistake when delete or compiling a record so, so we should found advocate key. Advocate the value of key is won't reduplicative. Clicking is, found advocate key.


If pursue, founded to be called ID advocate key (on the side those who have a key icon) , data type is automatic number.



In click save, the name of the watch that your input saves this secondary, we name with Userinfo.



A watch has been founded! Be very simple?




How to because we had been not acquired,make the content that adds a record, so here our while you're at it is moved add a few content to go in, the test that facilitates we undertake after a while. If pursue.



Good, a complete database is built, what to do next, hum, and listen to next answering to decompose.

Ultradev example tutorial: 1The operation interface of.5 Ultradev

The first chapter: Ultradev brief introduction

The 5th: The operation interface of Ultradev

Taking Dreamweaver UltraDev 4 of your one pace development through an example by me now, you can discover, it is OK to make dynamic webpage so so easy.

Above all, let the operation interface that Dreamweaver UltraDev sees in light of us first, here introduces the content that we will use only, other what did not introduce is OK oneself consider one time slowly.

This is Dreamweaver Ultradev advocate interface, at first sight and Dreamweaver do not have how many distinction.



This is source code and the interface that see earning consults each other, you can see the code that the Dreamweaver when your editor generates very easily, can very convenient study Html oh:



This is the interface that edits source code completely with handiwork:


Now, let us view specific menu option again:

　　

Menu of Edit of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of FILE menu 　

　　

Menu of Text of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of Modify menu 　

　　

Menu of Command of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of Site menu 　

　　

Menu of View of 　 of 　 of 　 of 　 of 　 of 　 of 　 of 　 of Window 　 　

　　　

Insert menu


Believe the friends that had used Dreamweaver should be familiar with the application of these menu quite. The option that red circle stays in often can be used after us. Next, the our again detailed content that reads Insert menu and Window menu.
Insert ->Live Objects carries these option, you are OK insert very expediently into what linage occupies, newer, show wait for an operation, be like graph 1-22



Window ->Object this face plate is compositive the content inside Insert menu, you can realize each function inside Insert menu through clicking the icon above face plate. Be like graph 1-23



Click Object trigonometry symbol comes out above face plate each content inside menu of these subproject correspondence Insert.

Window ->Properties defines the attribute of all sorts of elements in the webpage to be like graph 1-24 through this face plate



Window ->Credence of photograph of this face plate crosses Behaviors the friends of Dreamweaver are to not be familiar with those who pass most, pass him, we are OK in the very convenient webpage that uses all sorts of specially good effect us. At the back we say plug-in unit application when, if use this face plate,having a lot of plug-in unit is.

Be like graph 1-25


Window ->Launcher is equivalent to Windows inside start column quickly, the quick and convenient face plate that opens your place to need



Window ->Does Reference have Html or the syntactic problem of Javascript respect? Open this face plate, you with respect to be clear at a glance. Can inquire at any time for you with.



The elite part that is us next, data Bindings and Server Behaviors face plate, pass these two face plate, realize the dream that we need not write program code to also can develop the website with a complete function to use a program!

Window ->Data Bindings this face plate is to found record volume to use, if you are not clear about to if what calls a record collect, also have nothing to do with, you can be his understanding is join database use (of course the function is more than and such) , on join we can undertake the database of data add, delete, editor, show wait for an operation, what leaves a message board, the investigation program that should write hundreds of code before also can be made between raise one's hand finish. Itch to try? Fasten urgent, come slowly. ^0^



Window ->On Server Behaviors join the database still is no good, the data that says above is added delete waiting for an operation is finished in this face plate, saw these the Insert Record above face plate, UpdateRecord option?



See here believes everybody had had particular impression to Dreamweaver Ultradev, be about to begin to produce the Web application of ourselves next. Have the feeling of extremely anxious? (tell you secretly, extremely anxious is after I saw the help of Ultradev in those days. . . . ) . Next we will carry the case that a simple user registers, take everybody the basic function that the abecedarian learns to apply Ultradev, if show, add, delete, editor record, still have make a simple search engine and tiring-room of a website management. But---Wait a moment, how does Web application go without the database? So next content is to teach everybody how to found a simple database with Microsoft Access 2000, because he is used,the reason of use Access is easier, suit medium or small applying, contain on the machine that believes most friend it. Good, see next answering decompose please.

Ultradev example tutorial: 1The installation of.4 Ultradev

The first chapter: Ultradev brief introduction

The 4th: The installation of Ultradev

Before you should use Dreamweaver Ultradev to make tiring-room, you must prepare a piece of serial number that provides of the original CD of Dreamweaver Ultradev and Macromedia.

Ready? Ok, so we are in the measure below, the form with Step By Step, reveal the installation process of Dreamweaver Ultradev and method to you.

1.Put CD into CD driver, enter next in putting the list that has Dreamweaver Ultradev4.0. At that time you can see the sign that indicates like the arrowhead of graph 1-1, that installation program that is Dreamweaver Ultradev4.0.



Graph 1-1

2.Doubleclick the installs a program icon of Dreamweaver Ultradev, this installation program begins solution pressing, the document that needs place solves extrude to come, in order to offer installation, be like graph 1-2



Graph 1-2

3. Installation program solution is pressed after ending, click " Next " , occurrence installation welcomes a dialog box. Be like graph 1-3. Click " Next " .



Graph 1-3

4.Picture of occurrence copyright agreement, of course, you must accept this agreement, choose namely " Yes " , will not continue otherwise the installation below.



Graph 1-4

5.In the face plate that enters then, fill unit of full name, job or the alignment order that are orgnaization name and product. After finishing, click " Next " .

Ultradev example tutorial: 1The environment that.3 Ultradev place needs

The first chapter: Ultradev brief introduction

The 3rd: The environment that Ultradev place needs

The server kind that backs as a result of Ultradev place has a variety of, the configuration that when using Ultradev so, needs and the environment that must have are endless also and same. Here place is enumerated, it is commonly used type, offer reference only.

The systematic lowest that Ultradev place asks configures as follows:

IntelPentium processor or compatible processor

The processing rate of 166MHz is rapidder perhaps.

Windows 95, Windows 98, contain the WindowsNT4 of ServicePack 5. 0 or Windows 2000 operating system

The RAM of 48MB, the usable disk space of 30MB

Microsoft data visits package

Because Ultradev needs relevant data package, if the Office of newer without installation version is returned on your machine (for instance Office2000) if, the website Http that you must go to Microsoft company: ／ ／ WWW. Microsoft. ／ of Com ／ Data Download. Htm downloads MDAC 2. 1(Microsoft Data Access Components) . Normally, when you install Office 2000, MDAC 2. 1 can automatic installation is on your system. In MicrosoftVisLlalStudio 6. 0 in also data visits package. And these are must, before you make your tiring-room, your machine must want to have these package.

Run the system of dynamic page to configure

In Dreamweaver U1traDev, implementation already included to found dynamic page when Web application. Before network server dispatchs dynamic page to the browser, applied server can handle this trends page in move. To run dynamic page, you need an application server, it needs to support ASP(Microsoft only ' S Active Server Pages) , JSPl.0(Sun ' in S Java Server Pages) or A11aire ColdFusion any a kind, can make file of HTML source code before submitting dynamic page for the browser.

The article assumes you ha ve network server already, also have applied server. Namely your network server has a compositive applied server, just like PWS(MiCrosoft ' S Personal WebServer) and IIS(Intenet Information Server) in that way. If you do not have these requirements, new perhaps user, read more relevant theme Http;//www on the net please. Macromedia. Resources of ／ of Support of UltradeV ／ of Com ／ Software ／ .

ASP server

Want to choose a kind of server below only, with respect to can contented requirement:

. MiCrosoftIIS namely MiCrosoR, SIntemetlnfonnationServer, you can find IIS in WindowsNTSerVer and Windows 2000Server.

. MiCrosoftPWS MiCrosoft ' S Personal Web Server, the compression that it is IIS edition, but. In Windows95, 98 or move on WindowsNTWorkstation. If you bought Windows95, NT Workstation, you are OK the website HtV from Microsoft company: ／ ／ Www. Microsoft. Pws of ／ of Ie of ／ of Com ／ Windows downloads PWS freely. If be Windows 98, you are installing dish of AddOns ／ PWS that go up it is found in catalog.

. The Web server that any is using installs the Chili that has newest version ' SoftASP.

If your tiring-room needs to use a database, you still must install database software, for instance Sql Server or the software that are Mysql Server and so on.

Ultradev example tutorial: 1The characteristic of.2 Ultradev

The first chapter: Ultradev brief introduction

The 2nd: The characteristic of Ultradev
　　
In this one in, our circumstantiate says the outstanding characteristic of Ultradev, so that friends can master Ultradev better, make the dynamic website system that makes oneself with rapidder rate thereby.

Since Macromedia gives Ultradev the full name that have,be Dreamweaver Ultradev, so we are OK also from a bit the fate brings lovers together sees between them. Yes, can say, dreamweaver some, dreamweaver Ultradev had, and Dreamweaver place is the most pressing of need, dreamweaver Ultradev also was had. A word, had Ultradev, you can abandon out and out Dreamweaver. The advantage with the most distinct Ultradev, acceded namely the visible editor interface of Dreamweaver, close and friendly, easy begin; But write a tool as language of a tiring-room, the distinguishing feature with the mainest UltraDev is to be able to make webpage an d database relevant couplet. The as associated as the database capacity that Ultradev place has, make the capacity that it has operation database, these including that add record, modification record, read take the operation such as record, inquiry record, fixed position record. Of hearten making a person is, these are professional convention ability of programmer place proprietary, use Ultradev now, can do easy to doly decided. Ultradev still supports a variety of languages, support includes Asp2. 0, JSPl. O and ColdFusion4. 0. Below Ultradev, you can choose a kind of server technology that you like, will write the administrative backstage supporter that you need.

Specific have the following characteristic:

1. Need not edit source code to create Web application program directly.

2. Use what define beforehand, but editorial style watch founds form quickly, include proper facial expression and distribution among them, design beautiful and pra ctical form thereby.

3. The server that be previewed in working area and edits place choosing carries data.

4. Receive any repeatedly conveniently ODBC, JDBC or ADO database; Join, browse and check ＼ of such as MiCrosoft SQL Server the industry such as Oracle8i, Sybase, Infonnix and IBM DB2 standardizes a database.
　　
5. ASP, JSP or ColdFusion application come true in onefold design environment.

6. Have ingoing (ChecNn) , change goes (CheckOut) and design record (the efficient conglomerate form of the synergic characteristic such as DesignNote) develops way.

7. Use inside style of editor of form of the service library of buy, HTML, CSS and foot history option board is more convenient, improve work efficiency greatly.

8. The site map with use compositive U1traDev (the HTML with SiteMap) existing analysis and ASP site are more convenient, this tool can let you join structures of any a kind of catalog will manage a file . Mix very easily the uses a program content of the other mainstream such as MiCrosoft Of6ce, Macromedia Fireworks, Flash, Shockwave joins each other.

9. Use JavaScrlpt and XML are custom-built the integral application that includes bill of fare inside, utmost ground develops UltraDev function.

Look at look at, some friends can't help wanting to ask, that Dreamweaver and Ultradev, differ specificly where be? We say the distinction between them simply below, good let friends distinguish in study better.

Odd from the exterior, it is very difficult of the distinction that sees Dreamweaver and Dreamweaver Ultradev at a draught, it is merely in comparing DW3 bill of fare much a few commands, but these two products have essential difference however. If want to say Dreamweaver is the webpage editor of a similar Fronpage, so U1traDev can say is editor of process of a webpage application. We are done with Dreamweaver place, we are called a webpage for the m oment, so do with Ultradev place, call it tiring-room program. The compatibility between them also is done not have so that say, in the plug-in unit that can use in Dreamweaver, can apply smoothly in Ultradev.

Ah, fine dilatancy comes, the distinction of Dreamweaver and Ultradev but not little, do not see them like an appearance.

So, if we want to install Dreamweaver Ultradev, the configuration that what kind of machine needs and what kind of environment should provide to them? Continue to pay close attention to the article below please.

Ultradev example tutorial: 1.1 what is Ultradev

The first chapter: Ultradev brief introduction

The first: What is Ultradev

Enter a family to had made trend in broadband net today, the change quickly of development it may be said that the network is in China, at a tremendous pace! And since ancient times the hero gives a boy, we these hot-blooded square steel, elegance and talent luxuriant youth, had become " sea cleans out sand " main force. Who does not want to carry a network, become the 2nd Yang Zhiyuan; Become the 2nd Gates! Accordingly, do a webpage, do a website, a part in becoming our youth to live.

Before long, we these just contact a network " dish bird " , use the tiring-room language that dynamic script writes to others, be to be expected to cannot be reached really. Those " expensive young draws accord with " the script language of type, for the person to just contacting a network, no less than makes the same score the blue sky on the pace, unable to do what one wants very much to do!

But, no less than in those days the occurrence of Fronpage and like ending not to know HTML language to cannot write a webpage, do not know script language to cannot write the history of dynamic webpage, also was ended! And end this history " Fronpage the 2nd " , it is the DreamweaverUltraDev that Macromedia company rolls out.

If you open DreamweaverUltraDev, since mix,you can discover it Dreamweaver is about the same an appearance. Be, dreamweaverUltraDev is can undertake to dynamic webpage on the foundation of Dreamweaver editorial Web makes a tool. It included the function of Dreamweaver, and increasing the support of page of dynamic to making Web. So, the server edition that we call it Dreamweaver commonly or the buildup that are Dreamweaver edition.

You do not know no less than HTML language, like also can write a webpage through the visible operation interface of Fronpage. You can offer completely through Dreamweaver Ul traDev " be seen namely earning " edit a function friendlily today in person, will write ASP, JSP, CFML even PHP this a few in server technology, establish our dynamic website system.

If you are,one just is entered people " dish bird " , then you also need not worry. You just need to master a few main operations of Dreamweaver, can be opposite immediately Dreamweaver UltraDev begin. Although be used to what write tiring-room with script language to " langouste " for the ace of class, dreamweaver UltraDev also is indispensable tool. Offer because of the Dreamweaver UltraDev of newest version " Show Code And Design Views " mode, can let code of your give attention to two or morethings and visible interface, can accomplish already write fluent, can debug at any time again, observation effect. It is fish and bear's paw really, in all receiving bursa ah!

Current, high speed of electronic business affairs develops today, need to make the website that has alternan t function extremely, in order to satisfy the development requirement of electronic business affairs. But put backstage to write a skill not only at present undermanned, and widespread presence tiring-room writes function of relevant development tool to be not perfected. This a few make design and development process efficiency low, weakened the interactive experience with due network thereby. Can say, where to have need, where to have invention and creation. The occurrence of efficient and economic application development tool, it is inevitable.

Current, macromedia Dreamweaver UltraDev4 is the newest version of this software, also be current can be opposite exclusively the perfect solution that the encode of the different level such as Microsoft Active Server Pages (ASP) , Sun Microsystems Javaserver Pages (JSP) and Allaire ColdFusion Markup Language (CFML) has editing handling. Use it, do not need to master complex source code language. And its component as platfo rm of Macromedia Dreamweaver whole operation, the main bridge action of the working content that in pairs is having be in harmony to add up to a large network to develop personnel of the design in the group and program personnel.

From this year in July, since Macromedia Dreamweaver UltraDev4 comes out formally, it already got the wide support of business of application development of the network inside international limits, with the network video application development with respective suit complete to source code pilot needs. Because it can apply at MAC at the same time,reach WINDOWS at the same time in two kinds of operating systems, also offerred the complete compatibility that applies to JSP, ASP, ColdFusion thereby. The person that network application is founded can use new edition Server Behavior Builder, generate the code that accords with respective development standard conveniently. Be based on its to found a client to serve applied ability, macromedia Drea mweaver UltraDev4 assembled library of material of script of server of a commonly used ASP, JSP, CFML beforehand at the same time, convenient use at be being inserted in the database new record and undertake upgrading to already having a database.

If you want not to understand the characteristic of Ultradev, continue to pay close attention to the article below please.

Dreamweaver 4 compendious tutorial (8, add interactive effect for the webpage 3)

8, add interactive effect for the webpage

　　Citing: How to open a browsing window that does not have tool column


In the link of character or picture, should set Target only for " _blank " the webpage that but make,links is in a new window open. But you had seen see some webpages, the new window of open is not to contain tool column, condition column, of network address column? Is such window how do?


Get on cursor make choice of in a link first (can be picture link, also can be literal link) , press the button on behavior face plate, choice: Open Browser Window, pursue as follows:

See following dialog boxes then: 　　 Citing: How to open a browsing window that does not have tool column

After the setting is good, can see this behavior face plate has appeared for. Additional, the proposal adds Events instead the incident of bracket, be like OnClick instead (OnClick) , can get used to more browsers so, pursue as follows:

Such, we are clicked below the condition that browse a moment ago that piece pursues, can see " whats don't have " the window that browse:

Other Behaviors results do not make the introduction more, everybody is OK oneself try.

　　 ① Url: The page that opens in new window;

　　 ② Width, Height: Of new window wide with tall;

　　 ③ Attributes: Choose the property of new window, represent what content respectively as to these 6 attribute, everybody can try by oneself, can deepen impression;

　　 ④ The name of new window; When if be in many links,joining the Behavior of Open Browser Window, window name is set into same, the webpage that links so can be in same show in the window that browse, and won't open new window all the time.

Dreamweaver 4 compendious tutorial (8, add interactive effect for the webpage 2)

8, add interactive effect for the webpage

　　Make mixedder interactive effect

In Dreamweaver, more complex result calls the function of Behaviors implementation through, of Behaviors understanding from literal is " behavior " , we call the response of incident again. Adopt the change of webpage element, the shift that is like a mouse, click etc " incident " (Events) , spark play a window, shut a page to wait " answer " (Actions) , be an incident answer. And worth while and glad is, "Behavior " the process that make is goofy type almost.


Press Shift+F3, open behavior face plate, pursue as follows:

Action is joined in the webpage, need is the following 3 measure:

1, the element that chooses generation action, for example the picture, character that takes a link, layer. If need to load to begin occurrence effect in the page, can choose the label on condition column
2, by pushbutton the choice is answered one kind (different element, corresponding response also differs somewhat) , install the attribute that this answers in subsequently dialog box; It is to be able to offer the response of the choice to explain below:

　　 Call JavaScript: Call a paragraph of JavaScript;

　　 Change Property: Change the CSS style of Html label;

　　 Check Browser: According to different browser, enter different page;

　　 Check Plugin: Whether does examination browser hold the plug-in unit that be necessary;

　　 Control Shockwave Or Flash: Control Shockwave or Flash animation broadcast;

　　 Drag Layer: The person that make browse can pull the element in eating a layer;

　　 Go To URL: The link goes to appointed network address;

　　 Jump Menu, Jump Menu Go: Jump the menu of page type and Go pushbutton;

　　 Open Browser Window: Open the new window that browse;

　　 Pl ay Sound: Broadcast voice;

　　 Popup Message: Play an admonitory window;

　　 Preload Images: Read in a picture ahead of schedule;

　　 Set Nav Bar Image: The picture of set navigation column;

　　 Set Text: The character shows in specific place;

　　 Show Hide Layer: Show or conceal a layer;

　　 Swap Image, Swap Image Restore: Commutation picture and restore original photograph;

　　 Timeline: Those who control time route broadcast;

　　 Validate Form: The validity of proof list sheet;

　　 Get More Behaviors: Download more behavior incident.


3, choose incident (Events) , the decision sparks below what circumstance answer. Common incident has:

　　 OnMouseOver: The mouse moves to go up to the target;

　　 OnMouseUp: When pressing the mouse unlocks Zun Jian again;

　　 OnMouseOut: When the mouse removeds;

　　 OnMouseDown: Press when the mouse (do not need to unlock Zun Jian) ;

　　 OnClink: When clicking;

　　 OnDblClick: When doubleclicking;

　　 OnLoad: When be record in a webpage;

　　 OnUnload: When leaving a page;

　　 OnResize: When the size that changes the window that browse when the person that browse;

　　 OnScroll: The person that should browse procrastinates use roll when.

Dreamweaver 4 compendious tutorial (8, add interactive effect for the webpage)

8, add interactive effect for the webpage

　　Make simple interactive result


Often see such effect on the webpage, move to go up to a piece of picture when the mouse when, original picture is another piece of picture with respect to switch, after the mouse removeds, restore original about again, be how do? Leaving piece when, mention Dreamweaver to compare Frontpage champion among them a place is Dreamweaver can make the webpage that can have interactive sex. Now, we use Dreamweaver to make this the simplest interactive result -- commutation picture.


Prepare the picture with two pieces of same size, one piece is the mouse has not moved the condition that go up, another piece is the mouse moves the picture after going up, for example the following two graphs, zun Tu is a raised pushbutton, right graph is sunken the pushbutton below:

Click object face plate go up, see the dialog box that be as follows:

　　 ① Image Name: The number name of commutation picture effect, dreamweaver can allocate automatically;

　　 ② Original Image: Specify primitive picture, (for example here is raised graph)

　　③ Rollover Image: Appoint a mouse to move the picture after going up (for example here is sunken the graph below) ;

　　 ④ Url: The link network address of the picture;


For example according to go up after the setting of the graph ends, press OK, can preview the effect by F12 next.

Dreamweaver 4 compendious tutorial (7, the composing of the webpage 4)

7, the composing of the webpage

　　The composing function that adds newly

In front had taken with the functional brushstroke graph layer and form crossing-over, because be in,be DW4, rolled out a new Layout composing function, can more direct undertake weaving to page layout conveniently. In object face plate most lower part has 4 button:

Standard view (Standard View) : The view below acquiescent condition;

Composing view (Layout View) : Turn into composing view, it is this function that less important introducing;


Press after pushbutton, two pushbutton of the Layout above can use:

Form composing (LayOut Table) : It is like draw inside the page composing form;

Unit case composing (LayOut Cell) : Unit check is drawn in form.
The tool composing that we try to use above now a new page: Build a page, the dot enters composing view, the dot gives form in the picture on the page, again dot, in form the picture gives unit case, among them form can express with green casing, unit case can show with blue, not certain unit squares formed by crossed lines can show with gray, pursue as follows:

Here, each form, the adjustment with the OK and optional size of unit case. The dot after finally returns standard view, you can discover, a moment ago drew " Layout Table " form of already all translate into. Pursue as follows:

Additional, there is a number on the form on composing view, denotive the width that is form, click a number, can see the following menu:

　　 Make Column AutoStretch: The row is automatic and adjustable, it is form can come according to screen scale self-correcting width, be equivalent to be the width definition of form per cent.

　　 Add Spacer Image/Remove Spacer Images: Increase / move go transparent picture. The action of transparent picture props up the width of form namely.

　　 Clear Cell Heights: Height of cleared and unit case.


The following, it is GoEway.com uses the scene that using Layout function to undertake page composing, compare with standard view photograph, intuitionistic much.

Dreamweaver 4 compendious tutorial (7, the composing of the webpage 3)

　　The use of the layer


If you feel to use form to undertake locating control too hard to page element, might as well the attempt uses a layer (Layer) this good thing. Click the pushbutton of attribute face plate, cursor can become a cross, procrastinate on editor window move, can found give a layer, we can input the webpage element of the majority on the layer, for example picture, character. The advantage of the layer is to be able to set any positions in the page, pursue as follows:

After choosing a layer, corresponding attribute face plate is as follows:

　　 ① Layer ID: The name of the layer, use at identifying different layer;

　　 ② L, t: The position of the layer, l is the distance that is apart from page left border, t is the distance that is apart from the border on the page;
W, h: Of the layer wide and tall;

　　 ③ Z-Index: The Z axis of the layer is ordinal;

　　 ④ Bg Image: The setting of the layer pursues;

　　 ⑤ Vis: The indication condition of the layer, among them Hidden is conceal the layer, be in sightless condition;

　　 ⑥ Bg Corlor: The setting color of the layer;

　　 ⑦ Tag: The code means that the layer uses, the DIV of general use acquiesce can;

　　 ⑧ Overflow if the character inside the layer is too much, or the picture is too big, when the size of the layer can't show entirely, can choose:
Visible: The share that exceed shows all the same;
Hidden: The share that exceed is concealed;
Scrool: No matter have,deny exceed, show scroll;
Auto: Have occurrence roll of the ability when exceeding;
For example we choose Auto, so the layer in above example, can show when browse for:

The good point of the layer is apparent, but defect as much apparent, make a webpage that gets used to different resolution hard for example; Used many layer hind when a page, the complex rate of the page increases and bring about an editor to rise special loaded down with trivial details; Editor condition and the practical effect of the condition that browse have quite apparent difference to wait. Normally people is to use use Layer to undertake composing, the practice that is layer changeover form next (Modefy>Convert>Layers To Table) , particular operation is not added more here narrate, everybody but oneself try.

Dreamweaver 4 compendious tutorial (7, the composing of the webpage 2)

7, the composing of the webpage

　　Of the use of form

Face the parameter of form and unit case according to going up, we can make the following form:

Above is a 3 × the form of 2, form width resembles element for 350, the width of every unit case is 33% , 1/3 what take form namely, among them unit case 1 with unit case 4 already amalgamative; Unit case edge is apart from, width of line of unit case span, form is 10; The impression of form is gray, the frame color of 5 is unit case gules, the impression of 6 is unit case green;


Above example, we are setting of form line width 0, in the editor condition falls, the table that see is:

Width is the frame line of 0, in the editor the meeting below condition expresses with dotted line, and the practical effect that browse is:

Visible, width won't show in the browser for the form line of 0. Actually so called use form to undertake composing, use form line to be the form of 0 namely, differentiate the page for many area, achieve the result of fixed position composing thereby. Additional, form and form are OK of nest, for example above in form, in unit case 2 lis insert width of a form again for 100% , form line width is the form of 0, it is unit case respectively① ② ③Set different setting scene, can see below editor condition:

And the practical effect that browse is:

The nest of form is made in the webpage in often be used, it is especially in the portal website such as sina, Sohu, Netease, it is to make much information is revealed trimly before the person that browse, the nest of form is used most often. The home page that next graphs are GoEway.com is editing the circumstance below condition, can see, thickly dotted ground covered the page form line:

Dreamweaver 4 compendious tutorial (7, the composing of the webpage)

7, the composing of the webpage

　　The use of form


Form is a of the webpage very important element, because HTML itself did not provide more composing measures, we often are about the careful composing of webpage of implementation of form of have the aid of. A wanted skill is weighed most in can saying of form is the webpage is made, form is applied stand or fall, reflect the level of stylist of know clearly webpage directly.


Click object face plate, see the dialog box that be as follows:

　　 ① Rows: The linage of form; Columns: The row of form is counted;

　　 ② Width: The width of form, the unit can be Pixels (resemble number) or Percent (per cent) . The form size that presses definition resembling element is fixed, and the form that defines by per cent, can change according to the size of the browser. Can continue to explain two kinds of distinction that define a method deep from the back;

　　 ③ Border: The width of form line;

　　 ④ Cell Padding: Unit case span; Cell Spacing: Unit case edge is apart from. So called unit case, it is the each small division inside form.

After be being installed according to what be like a graph, have to arrive below this form:

Nod on form line, can choose whole form completely, can see in attribute face plate right now:

　　 ① Rows, cols: The travel of form and row;

　　 ② W, h: Of form wide and tall, normally the circumstance falls, we won't define the height of form;

　　 ③ CellPad, cellSpace: Unit case span and unit case edge are apart from; Border: The width of form line;

　　 ④ Ailgn: Pair of neat means of form, can rely on form left (Left) , in buy (Center) , lean right (Right)

　　⑤ : Eliminate the high setting of travel;
: Eliminate the width setting of the row;
: By per cent the setting of form width changeover is like element;
: It is the setting of form width per cent by changeover resembling element;

　　 ⑥ Bg Color: Install the setting color of form;

　　 ⑦ Brdr Color: Install the color of form line;
　　 ⑧ Bg Image: Set the setting plan of form, if set setting plan, setting color with respect to invalidation; Click the portfolio pushbutton from the back to choose setting plan;


If we move cursor among them an unit case, the attribute face plate that sees right now differs somewhat again:

　　 ① : Amalgamative and unit case (before should choose to need amalgamative and unit standard accordingly first) ;
: Fractionation unit division, fractionation is much travel or much line;

　　 ② Horz: The level of unit case interior is right neat means, action and similar;
Vert: Of unit case interior fore-and-aft to neat means;

　　 ③ W, h: The width of unit case and height;

　　 ④ Bg: Unit standard background pursues;

　　 ⑤ Bg: Color of unit standard background;

　　 ⑥ Brdr: Color of unit case frame.

Dreamweaver 4 compendious tutorial (6, establish super link)

6, establish super link

Super link (Link) , abbreviation link, be an one-way correlation concerns between page and page. Through clicking a link, we can jump to another page from a page. We can establish a link in character, picture.


1, literal link


Need is chosen to build the character of the link in the page, pursue as follows:

The Link in attribute face plate, fill in link address, when the person that browse clicks this link, the browser turns to this page with respect to bound, for example what here fills in is: Http://www.goeway.com

If you hope this page is,in new window is opened, can choose in Target " _balnk " .
If want to link the file inside the website, OK click:

In pursueing on, we are the character catenary receives Index2.htm this file, of special attention is most the option of the Relative To of the bottom, means chooses the form of opposite way, acquiesce is Document, also can choose Site Root, distinction depends on, document is to show opposite way is begin consideration from this page, and Site Root is from the root catalog begins consideration (namely " / " ) , pursue as follows:

Additional, if use the link of the mode make it of Site Root, open a page to browse a regular meeting to make mistake directly in this locality hard disk, but in Dreamweaver beforehand clear mode and upload on after the server, won't have a problem.
2, picture link


The picture links build process and literal link likeness, do not make the introduction more. But what should put forward particularly is, certain picture, after adding a link, can appear the frame of a blue, want frame take out, set Border for 0 can.


3, the link that heat up an area


The picture that introduces in front is linked, a piece of graph can corresponding a link, can is a piece of figure many more corresponding Where is link? The answer is possible, after choosing a piece of picture, map option can see in attribute face plate:

Among them: Found rectangle to heat up an area, found original shape to heat up an area, establish polygonal hot division. For example we are nodded now, cursor becomes a cross, can give the hot division of rectangle of a blue in the picture on the picture right now:

Right now corresponding attribute face plate is:

No less, in Link the input links an address (" # " state a sky is linked) , and the character that Alt heats up zone time place to show to be pointed to when the mouse, with the Alt likeness of the picture. We can carry the hot district with different choice, heat up an area through adjusting the volume that the reference point of 4 horn adjusts temperature. Through heating up an area, we can become a link in the eye of orangutan, become a link on mouth again at the same time, link different page respectively.
About the clew of the link


1, if want to link an E-mail address, fill in in Link place: "Mailto: Piao two protects Ailto:h of   鏼Elp@goeway.com, so little when attacking this link, answer the E-mail process that opens acquiesce, for example Outlook, send E-mail to arrive Help@goewa.com this address.

2, if link the file that the browser cannot open, for example the file such as Exe, Zip, so the person that brows e is in when clicking this link, can shoot a dialog box, the inquiry is the where that saves the file hard disk, this realized the function that the file downloads.

Dreamweaver 4 compendious tutorial (5, the webpage that lets you is more beautiful)

　　Modal watch makes character more add elegant demeanour


Tell above, it is the setting of pair of a few the mainest characters, if want to play a more trick on the character, helped with respect to what need list of style of have the aid of.


Compiling position, press Shift+F11, accessibility style expresses a dialog box (CSS Styles) :

Click right those who play role, build a pattern:

As above graph, the style that is you in Name place has a name, dreamweaver acquiesce can be in before the name decimally, the purpose is to avoid to label with other HTML promiscuous, for example the name that I have here is " Myfont " (Unamed1 instead Myfont) ; Define is a choice use exterior style to express or establish a pattern in this page only (This Document Only) , our choice is former, such OK much page is common watch of a style, press OK certainly.

In the dialog box that catchs again, input style expresses the name of the file, it is for example " Myfont " , by " save " , generated a type that makes Myfont.css to express a file so, as above graph.

According to on plan institute shows setting pattern, size is literal size, we are set for 9 Points (abbreviation 9pt) ; Line is we set row spacing for 13 Points (another kind of common setting method is 150% ) , got so so called 9 pounds font. After the setting ends, return a style to express a dialog box by Ok, can see one cries " Myfont " the style had been joined, see figure below.

Then, you can choose a paragraph of written language, choose Myfont in modal dialog box again, how? Does the character become delicate a lot of? 9 pounds font is body of the Song Dynasty can show the smalliest below the premise of changeless form the most delicate size, make in the webpage consequently in be used extensively.


Besides 9 pounds word, still have the form of a written or printed character of a kind of 10.4Pixel, it is interpose between 12pt and 9pt, often also be used, everybody is OK oneself try.


If need to cite in other page already some modal watches, the dot on the dialog box can be expressed in the style. Additional, it is an editor already some styles, it is to delete a style.

Dreamweaver 4 compendious tutorial (5, the webpage that lets you is more beautiful)

　　Literal processing

Proper picture, can make webpage add lustre to not little, but also do not forget, character, just be the essential factor with a the mainest webpage. Let our look back on see Dreamweaver can make fun of some of what trick on the character now.

Choose a paragraph of written language, right now attribute window shows as follows:

1, Format: Can choose a few kinds of character patterns that set beforehand;

2, the style that chooses a written language, what can choose here is completely it is English font, if want to choose other form of a written or printed character, be about to choose most a of the bottom, Edit Font List. . .

　　 ① Can decrease a symbol to increase through adding or delete list of a font;
　　 ② Perhaps choose " Add Fonts In List Below " (add font list) , can add list of a font likewise;
　　 ③ The choice needs to mix the style of font list, can choose at the same time many (preferential show the first kind of form of a written or printed character, when the first kind cannot show, show the 2nd kind, the 2nd kind is returned, show the 3rd kind, such analogize) ;
　　 ④ Add font font list⑤, or move from inside font list except;

After the choice is good, press " OK " , can choose to a moment ago should mix the style of list in DW.

　　 Attention: Do not contain certainly on the system because of others as same as you style, do not sum a few special form of a written or pr inted character in list so and use. If really need uses these style, ought to do the reuse after becoming a picture.
3, Size: Literal size, the number is larger, the script is older also

4, the color that chooses a written language here:

You not only can above color is chosen on edition of this mix colors, still can choose the aleatoric color on screen. Among them can the color on take out character, make its show for acquiesce color is worth; Can choose the mix colors edition of other type; Color can choose on edition of patulous mix colors:

Here, can choose more rich color not only, OK still through filling in RGB numerical value chooses color and save this colour colour rise after going to the lavatory, call.


5, it is to install font to be thick substance and inclined body respectively.

6, the buy that sets setting character left, buy medium, place is right.

7, grade of setting character paragraph, be like:

GoEway is a good website
Novice guideline is a good column
Or

1. GoEway is a good website
2. Novice guideline is a good column

Dreamweaver 4 compendious tutorial (5, the webpage that lets you is more beautiful)

　　The processing of the picture

Those who assume we insert now is this piece of following pictures:

The dot chooses this picture, open attribute face plate (Ctrl+F3) , can see the state of following graphs:

1, the size of the skeletonize graph of the picture and picture.

2, the length of the picture is wide, if the picture grows Yu Kuan to follow the word with the abhorrent size of original intent, the number here can show with thick substance; The dot takes a piece of picture, you can see the picture is met a casing is nodded with 3, 3 the dot represents the directional drawing that differs the picture to 3 respectively, achieve enlarge and contractible result thereby; In drawing process, pressing Shift key, pull the point that moves horn to go up again, can make the picture maintains drawing of aspect ratio exemple, pursue as follows. If want to restore the photograph to be original size, can press attribute face plate right of next horn " Reset Size " pushbutton.

 

3, SrcIt is the position that the picture is in; LinkBe this picture correspondence exceed a link, because do not have make it link, so here shows for empty; From the back two pushbutton, former and OK pull an arrowhead, point to picture or link the certain file of folder directly, latter is the method according to the tradition opens folder to seek certain document, according to the experience that operates actually, former effect is not big; TargetIt is dozen of evolution type of the link. About the link build will introduce at the back with the note.

4, Align: Pair of neat means of the picture, this is one of the most fundamental webpage composing pattern, everybody can debug means by oneself, do not occupy space here, the detail can consult:
Http://www.goeway.com/web/dreamweaver/series/bighead/align.htm;
　　 Alt: I t is the specification of the picture, if I input here: "I am orangutan who am I afraid of " , when browse, move the mouse to go up to the picture, can see these specifications;
　　 Border: The frame width of the picture, input for example 10:

5, the buy of the picture left, be placed in the middle, place is right, believe to want you to had used Word only, won't feel unfamiliar to him.

6, Map: Use at the different area on a picture to make many different links, also stay wait for from the back the introduction when how the introduction establishs a link.

Dreamweaver 4 compendious tutorial (5, the webpage that lets you is more beautiful one of)

5, the webpage that lets you is more beautiful

　　With picture beautification your page

The webpage above is honest too drab also, cannot make everybody satisfactory of course, we come now one pace beautification our page. And the simplest and direct method is the picture is added on the webpage. And greatly, people says a webpage is beautiful, show the picture on the webpage is pretty namely normally.

Click the pushbutton on object face plate, shoot a dialog box next, the picture that chooses those who insert to need, pursue as follows:

If by the file of the choice, it is the file beyond website catalog, the system can ask you moment duplicates the picture inside the website, pursue as follows. The answer is of course " be " , otherwise after the webpage passes a server, the picture won't be shown, because the picture is not at all inside the website:

Then, choice picture is in of the website deposit the position, pursue as follows. My practice is will all picture additional deposit in same a catalog, show like plan institute for example " Images " , so OK and convenient search. Also somebody likes to mix picture and webpage file put together, watch each one convention, without what particularly good, also it doesn't matter is particularly bad.

Save end, with respect to the effect that can see a page:

Dreamweaver 4 compendious tutorial (4, begin from the simplest webpage)

4, begin from the simplest webpage

　　Build a page

Recommend everybody to complete the operation that builds webpage file in site window commonly, everybody is clear about such conduce newly-built page is in the specific place of whole website:

Method one: Choose the File on menu>New File

Method 2: In pitch on of this locality catalog need builds the list of the page, click right key, choose New File

 

In Dreamweaver UltraDev, the file name write from memory that builds a page thinks Untitled.asp. We should give this page to have a name afresh, it is for example " Index.htm " . Incognito method is slow on file name place is attacked twice (pursue as follows) , not too fast, can becoming otherwise is double stroke open this file.

Among them, of Htm since file suffixal, the type that also is this webpage file explains, showing this webpage file is the HTML file that attributes a static state (also can express with suffixal Html) , everybody is tightened after write down the suffixal instead Htm the webpage or Html, after passing a server otherwise, the browser cannot be opened normally.

[Clew]

Why is the name of the first page of the website Index.html normally is other? Cite a case, infiltrate in the browser when you Http://www.goeway.com/index.html when this network address, did not appoint explicitly actually open which page, but the server can search Index.html automatically this file, if have, show this file, if do not have, look for Index.htm again, do not have some words again, probable meeting displays wrong message. And look for Index.html first, look for Index.htm again this order is decided by the server, and the server of great majority is fo llow this kind of principle, and average user has no right to revise this kind of set. So we are when the webpage that make, had better name the first page of the website for Index.html or Index.htm.

　　 Install page attribute


Install page attribute, it is a necessary process. Double stroke opens the Index.htm that a moment ago built, turn automatically to edit the window. Choose Modify>Page Properties installs a few necessary page attribute, pursue as follows:

　　 ① Title (caption) : The caption of the page can show the wrong upper part in the browser directly, open GoEway.com website with the browser for example, the headline that can see this page in the top left corner of the browser " online guideline of GoEway.com – " . Wu necessary nurturance is each page set the habit of a caption, this facilitates already of the person that visit browse, also conduce to you be in the webpage distinguishs in editing process different page. Although caption is not the element with an essential webpage, but it is to reflecting webpage fabricant to have however deny it is consider of the person that browse from fine point.

　　 ② Background Image (background picture) : Click Browse pushbutton, can add background picture for the webpage.

　　 ③ Background (setting color) : Acquiesce is white, click can choose other facial expression. Fr om the back " #FFFFFF " be with 16 enter the RGB colour that makes a form show.

　　 ④ Text (literal facial expression) : It is literal setting black here. Want to notice, if incorrect setting reachs literal color to undertake installing (right now RGB colour shows for empty) , so when the browser is showing a page, with respect to the acquiescent setting that can use a system. But may distinguish somewhat because of the setting of different system, answer those who bring about a page to show the effect also is differ in thousands ways so. Because, reveal your design thought to allow page system better, with respect to the setting color that must not forget set page and literal facial expression.

　　 ⑤ Link (link color) : Set is super the color of the link, do not set formula acquiesce to be blue.

　　 ⑥ Left and Top: The margin that sets wrong department and coping is a part from, install commonly for " 0 " the editor with square facilitating webpage.

After ensuring the setting of the page is proper, click OK end.
　　 Make a the simplest webpage

The head since all things is difficult, let us be made from the simplest webpage first. If you are,according to foregoing measure one pace is done, so should OK following similar pictures:

Right now cursor is in those who edit the window most most top left corner, importable now any characters that you like, for example: "Welcome to GoEway.com " , choose a written language, menu is pulled to choose literal size below the Size on attribute face plate, for example " 6 " , click again make literal buy medium, beat a few carriage return before the character again, make move below the character, until make a character complete as to the page till central height, pursue as follows:

Choose menu File>Save saves a page, congratulation you, the first your webpage had been finished, see page effect by F12, satisfactory?

Dreamweaver 4 compendious tutorial (3, the preparation before making works -- definition website)

3, the preparation before making works -- definition website

Before beginning formally to make a webpage, had better define a new website first, this is to use site window to undertake administrative to site file better.

　　 The method of the definition

　　Method one: In site window next pulling menu chooses last Define Sites, pursue as follows.

Can play right now give a new dialog box, clicking New pushbutton is to define a new website, if need to be opposite in the future old have website redefine, can to the left you need the pitch on in website list the website of redefine, click Edit pushbutton next but.

　　 Method 2: The choice commands menu Site>New Site option.

　　 Install basically

In the dialog box that sees then, should undertake the following the setting with 3 simple paces:

① Site Name (website name) : The website that is you has a name, this name is having identified effect only, the real name after be being released with the website has nothing to do, for example the name here is: "My website " , and actually my website cries " online guideline " ;

② Local Root (catalog of this locality root) : Setting website is in the position of this locality hard disk, the aleatoric catalog that clicks the folder icon from the back to be able to choose hard disk serves as the catalog that deposits website file;

③ Cache (cache) : Build cache to be able to make the shift of the file, incognito, search the operation speed that waits for site management to promote greatly, because this suggests,everybody is hit here swallow the bait. 　　　

After finishing, return site window, can see following similar pictures:

Can see, "My website " the name has appeared in site window, because be a newly-built site, be in a blank that sees in this locality catalog.

After site definition ends, can make the webpage that belongs to yourself formally.

Dreamweaver 4 compendious tutorial (2, preliminary understanding Dreamweaver)

2, preliminary understanding Dreamweaver

　　Of Dreamweaver start

The installation procedure of Dreamweaver is very simple, one but after be being installed successfully, with respect to the option that can beginning menu to find Dreamweaver:

　　 Editor window

Start Dreamweaver for the first time, what see above all is the editor window of Dreamweaver, must not give above thickly dotted float window is frightened, actually commonly used, the following:



① entree is odd: The majority function that can find those who edit the window here;
② tool column: Be Dreamweaver4 is new add a function;
③ object face plate (Objects) : In the webpage in editing process, will add corresponding element for the webpage through clicking the pushbutton of object face plate, be like picture, form, layer, Flash. We call these elements for the object. Click object face plate to go up be down arrowhead, can insert the object of other type, be like special character (Characters) , the table is simple (Froms) etc.



④ attribute face plate: Use at showing the attribute of the webpage element of a pitch on, can revise on attribute face plate. Choose different webpage element, the content that place of attribute face plate shows also differs somewhat, for example picture and the attribute that form shows are different. In addition, click attribute face plate right the small triangle of next horn is OK the need that the basis uses, narrow or spread out attribute face plate, the proposal is installed usually to develop pattern.
Group of ⑤ face plate (say again but berth float face plate) : Dreamweaver still has a lot of a lot of other float face plate, we are OK the be fond of according to oneself, reset of different float face plate, this is group of so called face plate. In Photoshop, also have similar idea.
⑥ starts column quickly (say to start face pl ate again) : Use at show or concealing response float face plate. The face plate that start and right the miniature of next horn starts column one to one correspondence; It is switch manages to the site among them implement, it is switch to behavior face plate, it is to examine webpage source code.
⑦ edits area: See with " place namely the means of earning " shows by editor webpage content:

[clew 1] if the position of float face plate on screen is too messy, exceeded desktop range even and when inconvenience is operated (appear easily especially after the resolution that changed monitor this kind of circumstance) , can choose the "Window in entree sheet>Face plate of float of Arrange Panels" automatic recomposition.

[clew 2] the be opened quickly and shuts hot key that is a few commonly used float face plate below, remember well, because will be used by frequent ground in the process that make again:

Properties attribute face plate: Crtl+F3Face plate of CSS Styles style: Shift+F11
Behaviors behavior face plate: Shift+F3
Objects object face plate: Crtl+F2
　　Site window　　


Site window is Dreamweaver another important window, left half catalog that is long-range site, show commonly for empty, connect in FTP only the ability below condition has indication content; Right half are this locality catalog in current editor, the resource management that resembles Windows a bit implement? Yes, the action of site window is actually intuitionistic and your site that like letting you let resemble managing the file in hard disk conveniently, manages.



In the process that after be in, the webpage makes, will be often between editor window and site window switch.

Dreamweaver 4 compendious tutorial (one, Dreamweaver brief introduction)

One, Dreamweaver brief introduction

The place of manufacture a " that Dreamweaver is Macromedia company sees namely the webpage of earning " edits a tool. Differ with Frontpage, what Deamweaver uses is the design style of edition of face of Mac machine float, may feel incommensurate to abecedarian. But after you were used to its mode of operation, frontpage can not be likened to the intuitionistic sex that can discover Dreamweaver and efficient sex.

Dreamweaver to DHTML (dynamic webpage) support is particularly good, can make the interactive page specially good effect of a lot of blindfold easy to doly. What the programming of plug-in unit type makes its function OK and infinite is patulous. Dreamweaver and Flash, Firework calls the webpage of Macromedia to make 3 swordsman, because be the product of same company, there is a very close together couple on the function consequently. Accordingly, the first selection that says Dreamweaver is advanc ed webpage is made has not been been.

The version with newest Dreamweaver is: DReamweaver 4.0 and Dreamweaver UltraDev4.0. Of the program such as latter support ASP, JSP write with debug. Will tell to abecedarian, the Dreamweaver of these two version is being used on won't have too big difference. And this book is with newest Dreamweaver4.0 fiducial. (above software can download in Http://www.goeway.com/software/index.asp)

DreamWeaver form magical function - the detailed of line draw a frame round that make is solved (5)

4>Lie between those who be apart from frame to make


"Lie between be apart from frame " basically use the project list that ranks each columns or channel in the webpage, understand for convenient everybody, the author first make finish graph of the following effect to be revealed to everybody below, following:




The corresponding process that make is below, (be apart from with making 3 casing lie between it is a specification)


Insert in the webpage above all a 3 form object, direct in inserting a process " Border " set is 0, "CellSpace " set is 2, "CellPad " set is 1, if pursue





Attention: Undertake installing here, in be the same as attribute board, be completely equivalent.


The mouse presses Zun Jian to be not put, procrastinate on each unit case move, at the same time pitch on object of 3 unit case. attribute board lieutenant general its " Bgcolor " set is " gules " , notice this color lies betwe en the color that is apart from frame namely.


Lie between the effect that be apart from to come true, should use here " nest form " made. The author tells everybody a few designs first " nest " the note when form, when form is inserted in unit case, best beforehand the fixed position attribute of content of will unit case " Horz " (or so position) reach " Vert " (fluctuation position) respectively set is " Left " and " Top " , the needless trouble that nest table is old hours such avoiding that adjust again, direct and dilatory right next horn can come true. Following




Ordinal object of a form is inserted in 3 unit case, will " Border " , "CellSpace " , "CellPad " whole set is " 0 " , be in at the same time attribute board lieutenant general the setting color of every form all set is with webpage setting color " white " , still having a bit additionally is, will " Width " (wide) and " Height " (tall) all set shows for scale condition falls " 10 0% " , can make it fills whole and unit case automatically according to size so.


Can preview now examine the effect.


In lying between those who be apart from frame to make, the width that depends on frame with the different point of filament frame 1 it is to pass " CellPad " attribute will come true, is not in front " CellSpace " , here " CellPad " the distance between the border that those who point to is the content in unit case and unit case, what be inserted as content by us in this exemple undoubtedly is 3 another form. So adjust " CellSpace " the span that can change each frame, for instance " 6 " the effect of the unit





Same, you can formulate similar method make what vertical stroke puts lie between be apart from frame.


We analysed the making process of common frame type in a few kinds of webpages meticulously above, principle and adjust a method. The form with parallel effect believes more be helpful for e verybody knowing their respective difference, deepen impression thereby, hope everybody can find more frame results according to similar design thinking more of course.

DreamWeaver form magical function - the detailed of line draw a frame round that make is solved (4)

3>"Thick " of line frame make


Had above the making foundation that introduces filament frame, believe everybody understands thick wire frame much simpler. Thick wire frame is the effect with a kind of particularly thick frame, he often cooperates other webpage element to finish those who specify the result.


Make in filament frame in, we are mentioned pure will " Border " set is 1 short of " refine " requirement, so coarseness should do not have a problem, very good, because of this thick wire frame make had two kinds of methods.


Method one: Use Border to come true


The form that pitch on has inserted, attribute board lieutenant general " Border " cost set is " 8 " (the aleatoric value that can be need width) , at the same time special attention wants " CellSpace " replacement is " 0 " , pass finally " Brdr Color " the color of set frame, still be with red here exemple, if pursue





If pursue,preview the ef fect:




Method 2: The difference that adopts CellSpace will come true


Give uncecessary details is absent here, when wanting to make filament rim only " CellSpace " also set is " 8 " , can achieve with above identical effect.

DreamWeaver form magical function - the detailed of line draw a frame round that make is solved (3)

2>Of filament frame make


Filament frame is a kind of method with commonly used look of one's duty of area of the fixed position in the webpage, cooperate the use of specific picture, often can achieve right result, so how to make filament rim?


Everybody knows, alleged filament frame, a case of 1 simple 1 list is on general exterior, so are we worth the Border of form object directly set is 1 not OK? See the making effect below please:

Insert the form that an one-way sheet lists in emplacement of webpage middle finger likewise, the any place of the casing outside clicking form with the mouse with pitch on it, attribute board lieutenant general " Border " cost set is 1, OK also at the same time will another " CellPad " and " CellSpace " buy 0, if pursue:







Preview the distinct effect graphic representation below condition:






From inside the graphic representation above, see simple fra me place not hard effect of 1 short of, we look below, how adopt pair of form " clever " what the setting will realize a requirement is fineness.


Same in above form, will in attribute board, "Border " , " Cellpad " the setting is " 0 " , "Cellspace " the setting is " 1 " , notice " Cellspace " those who point to is the distance volume between unit case and unit case. If pursue





form " Bgcolor " set is " gules " , at the same time of will unit case " Bgcolor " set is with webpage setting color - " white " , if pursue,preview the effect:





To facilitate everybody understands, here author explains a little again below. Among them we will " CellSpace " set is 　 1, when the setting color of set form, had included this one share undoubtedly. After that the unit case set of the face is apropos it " swing " fell. Facilitated to show the result that go up so, so color of change form context changes the color of frame namely .

DreamWeaver form magical function - the detailed of line draw a frame round that make is solved (2)

The indication condition Width from " Percent " more instead represents actual bulk " Pixels " , such avoiding that put in the window what when shrinking, cause is unbalanced, OK, use form of mouse make choice of in webpage editor window at the same time, attribute board is as follows:



This is the form attribute setting below acquiescent condition, will among them " Border " , "CellPad " , "CellSpace " be worth whole set for 0.


The mouse is nodded for nothing in form interior, at this moment attribute board is already automatic switch installs the window to the attribute of unit case, of will unit case " Bg " set is " gules " (the color that is final filament, can install freely) , at the same time " H " the setting is " 1 " , if pursue





Click an editor the window is left those who go up " Show Code View " pushbutton enters source code window, ＜ of ＞ of code ＜ Td / between Td ＞ " " take out, can see the eff ect now.





In addition, you can pass those who adjust form " Width " the length that is worth control filament. Similar method, still can make set upright a filament.