Dreamweaver 8 new Function Graphic example explanation

Dreamweaver

　　Part I: Dreamweaver 8 new features Overview

Like other software in the Macromedia Studio 8 Suite, Dreamweaver 8 adds a number of new features that make us happy, such as more advanced workflows, redesigned CSS tools, improved back-end FTP, tools for converting XML files, document amplification, Insert Flash Video and Flashpaper, code folding features, and so on.

Today we'll start with a simple introduction to the new features of Dreamweaver 8.

　　Click here to download Dreamweaver 8 (59.7MB)

　　I. Improvement of work flow

Workflow improvements can improve the productivity of web designers, such as placing all open documents in a single panel and switching documents with each other simply by clicking the document tabs. Alternatively, we can save the layout of the panels as "Workspace layout" (workspace layouts) to suit the design needs of different Web pages.

In addition to the above features, Dreamweaver 8 provides the following new features:

1. Zoom Tool

Using the zoom tool helps us to align the image more easily, select smaller objects, and view smaller text, as shown in Figure 1.

Figure 1

2. Auxiliary line

Drag guides that are vertical or horizontal in the page to position the object more precisely, as shown in Figure 2.

Figure 2

3.Flash Video Support

Now we can insert the Flash video file directly in the Dreamweaver8 and control the Flash video file like a VCR, as shown in Figure 3.

Figure 3

　　Second, the extended CSS support

Dreamweaver 8 also provides stronger support for CSS and enhances the display of complex stylesheet information. The CSS panel is now completely redesigned as a unified panel, bringing together the many CSS panels of the Dreamweaver MX 2004 into one location, as shown in Figure 4.

Figure 4

We can also use the new Visual Settings feature to help us see the complex CSS layout, as shown in Figure 5.

Figure 5

Adding a summary view to the CSS panel helps us quickly confirm the CSS attributes that apply to the currently selected element, as shown in Figure 6.

Figure 6

　　Third, file transfer function

When transferring files to the server using the previous version of Dreamweaver 8, the user cannot do other work in Dreamweaver, now, the new Dreamweaver allows us to do other work while transferring files, which can greatly improve the efficiency. The transfer interface for the file is shown in Figure 7.

Figure 7

　　Iv. support of Xml/xslt

The new XML/XSLT authoring feature simplifies the process of formatting XML files for Web browsing. We can create XSLT files and completely use CSS format to transform them into XML files that are difficult to understand, can be attached to local files, or remote files near the Internet, as shown in Figure 8.

Figure 8

　　V. Other new features

In addition to the new features mentioned above, Dreamweaver 8 other features have made some improvements, such as starter Pages, insert flash Paper, control of the background image, and so on, in the following introduction we will detail how they are used.

　　

Part II: Dreamweaver 8 new function examples to explain

We have to create a Web site first file process to experience the new features of Dreamweaver8.

　　First, the establishment of the site

Start Dreamweaver 8, execute the site/new site menu command, click the Advanced tab in the pop-up dialog box, set the site name and local root folder in the local information, and set the remote information, as shown in Figure 1. These features do not have much of a change compared to Dreamweaver 2004, but one of the "Maintenance Sync Information" option, when we made the completion of the page, will be synchronized updates to the server, so as to ensure that the content on the site is always the latest. The server's information must be set correctly, otherwise there will be an error when landing the update server later.

Figure 1

　　Second, Design Home

After the site is established, you can design the home page. As shown in Figure 2, the Startup dialog box for the software is xml/xslt two more options in creating a new project.

Figure 2

You may be familiar with XML, and XSLT is another language of the XML family, similar to CSS in HTML, but much more powerful than CSS functionality. It is more inclined to be a program language, but there is no common program language complex, even than JS and other scripting language is simple. converting XML to HTML is the main function of XSLT at the moment. After you choose to create an XSLT (whole page) new project, a pop-up dialog box asks how to locate the XML source, and you can select "Attach a local file on my computer or a local area network" or "Attach a remote file on the Internet", as shown in Figure 3.

Figure 3

The Dreamweaver8 also provides a new set of sample creation "Starter Pages" from which we can choose the style we want to design, as shown in Figure 4.

Figure 4

1. Use of auxiliary line

We select the HTML document for the base page, click the Create button, and go to the edit page of the blank document, as shown in Figure 5. The first thing you'll find is that there are rulers around the document, and while there are ruler features in Dreamweaver 2004, the actual use is not very large, It is now easier to determine the location or size of a page element by combining the newly supplied guides (shown in the Green Line) in Dreamweaver8.

Figure 5

Execute the View/Guide menu command and you will see the Guide Control menu as shown in Figure 6.

Figure 6

Make sure that the Show Guides option is checked, and then drag the mouse vertically or horizontally on the ruler of the document to show the default green guides. Of course you can also select the "640x480, default" option in the menu to generate a guide for the appropriate page size, as shown in Figure 7.

Figure 7

Move the mouse pointer over the square of the secondary line partition, and then press the CTRL key to display the height and width of the square, as shown in Figure 8.

Figure 8

If you want to lock the guides, you can perform the View/guide/Lock guides menu commands. If you select the Align Guides option, you will automatically close to the guides when you insert elements into a Web page. If you select guides near elements, dragging guides automatically approaches the elements in the Web page. To remove a guide, you can drag it to the top or left of the page to disappear automatically, and to remove all guides, you can perform the View/guide/Clear Guides menu command.
Perform the View/Guide/Edit Guides menu command to eject the Guides dialog box, as shown in Figure 9. Here we can set the color of the guides, the color of the distance, and so on.

Figure 9

2. New features for background settings

Let's see what new changes have been made to setting up the document background. Execute the Modify/page properties (shortcut ctrl+j) menu command, Pop-up Page Properties dialog box, in the "appearance" category will find a repeat option below the background image, you can choose No-repeat, Repeat, Repeat-x, repeat-y, As shown in Figure 10.

Figure 10

Click the browse button after the background image to find a picture as the background of the page, and then take a look at the different background images brought by four different options. First select the "no-repeat" option, which means that the background picture is not displayed repeatedly, displays only the original size of the image, and displays only once, as shown in Figure 11. In previous versions, as long as the background image of the Web page is set, it will be tiled in the Web page, and now we have a stronger control over the background image.

Figure 11

If the repeat option is selected, the background image is repeated in the X and Y directions, as in previous versions, as shown in Figure 12.

Figure 12

If the Repeat-x option is selected, the background image is displayed repeatedly in the x-axis direction, as shown in Figure 13.

Figure 13

If the REPEAT-Y option is selected, the background image is repeatedly displayed in the y-axis direction, as shown in Figure 14.

Figure 14

Set the caption text and select a suitable picture as the background image, as shown in Figure 15.

Figure 15

3. Use of magnification function

Insert a table that meets the requirements, and then insert the corresponding image in the cell that is processed by the image processing software, as shown in Figure 16.

Figure 16

There are three buttons on the bottom toolbar, the Arrow selection tool, the hand move tool, and the Zoom tool. Use the zoom tool to make it easier to align images, select smaller objects, and view smaller text, as shown in Figure 17.

Figure 17

You can also select the appropriate magnification or zoom out directly in the selection box behind the Zoom tool, and you can also select "Composite selected" to fit all "fit width" as shown in Figure 18.

Figure 18

4.Flash Video Support

Support for Flash video is available in Dreamweaver8, we can insert Flash Video file directly. Continue working in the previous file, execute the Insert/media/flash Video menu command, and eject the Insert Flash Video dialog box, as shown in Figure 19.

Figure 19

In the video type, you can choose between progressive Download videos or streaming video (streaming media format videos). If you choose the first option, you can enter the address of the video file directly in the URL field, or if you select a video file in streaming media format, you need to enter the server URL address, start with the rtmp://format, and enter the file name of the streaming media in Sream name, as shown in Figure 20.

Figure 20

In the skin option, select the appearance of the player, enter the width size, enter a height size, and if the constrain option is selected, the ratio of width to height is locked. If you select the Auto play option, the video file is played directly when you open the Web page. Selecting the Auto rewind option allows you to play the video repeatedly. As shown in Figure 21.

Figure 21

After inserting Flash video into the Web page, we can continue to modify these properties of the video file, just click the video file, the corresponding options appear in the property panel, as shown in Figure 22.

Figure 22

5. Extended CSS Support

After inserting a video file into a Web page, we then enter a text below it to experience what new changes Dreamweaver8 's CSS support has brought to us. Use the Text tool to enter a paragraph of text, and then open the CSS panel as shown in Figure 23.

Figure 23

The new CSS panel is completely designed to be a unified panel where we can quickly confirm styles, edit styles, and view styles applied to page elements.

Click Add property to enter the style properties directly, such as I type color, and then select a color in the color selector that follows, as shown in Figure 24. Of course, other CSS properties can also be entered directly here, which is much more convenient than the previous revision of the page code.

Figure 24

Click the current button in the CSS panel to display a CSS summary of the currently selected content, and a CSS that is not related to the selection will appear as a strikethrough, as shown in Figure 25. This feature is very helpful for us to quickly confirm the CSS attributes that apply to the currently selected element, and it is easy to see in the list which of the styles is applied to the currently selected element. The new CSS Control Panel allows us to easily format the content of a Web page by freeing it from a variety of complex CSS styles.

Figure 25

All right, let's take a look. New support for CSS is provided in the Visual Assistant. Perform the View/Visual Assistant menu commands, you will find more "CSS Layout backgrounds", "CSS Layout box Model", "CSS Layout outlines" three options, respectively, the background mode, box mode and outline contour mode show CSS style effects. As shown in Figure 26.

Figure 26

In addition, there is a new feature that deserves our attention-the Style rendering toolbar, which we can design for different media types, such as screens, handheld devices, printouts, TV devices, projection devices, and so on. When we attach an external style sheet to a document, you can specify the type of style sheet, and the following is a set of three style sheet files that apply to screens, print devices, and televisions, and are linked to a Web page.

<link href= "Css/level1_arial.css" rel= "stylesheet" type= "text/css" media= "screen"/>
<link href= "Css/level2_arial.css" rel= "stylesheet" type= "Text/css" media= "print"/>
<link href= "Css/level3_arial.css" rel= "stylesheet" type= "Text/css" media= "TV"/>

Right-click on the toolbar, select the Style rendering option, and a "style rendering" button appears below the toolbar, as shown in the red box in Figure 27.

Figure 27

Each button has its own purpose, from left to right, screen, print, handheld device, projector, TTY, TV, and turn on/off CSS. Click on a different button to activate the appropriate media type, and the associated CSS file is loaded.

When creating a page, we just need to create the appropriate media type CSS file, Dreamweaver 8 will show exactly how we designed the page to be displayed in the appropriate media.

6. Code Folding function

Let's take a look at the new Code folding feature, and if you're writing HTML code, you're probably not unfamiliar with a few pages of code, and it's really annoying to find a line in your code and toss and turn the scroll bar. This problem has been solved in Dreamweaver 8, so we can easily find and control the relevant code by simply using the plus and minus signs on the left side of the editor.

Open the home page we made, click the "Code" button, and switch to Code view, as shown in Figure 28.

Figure 28

In Code view, drag the mouse to select a section of code, the left side of the code will appear two minus signs to include this code together, as shown in Figure 29.

Figure 29

Clicking the Collapse Entire label button folds the code together, (and clicking this button while holding down the ALT key allows you to collapse the external label), as shown in Figure 30.

Figure 30

Similarly, if you select the code, click the "Collapse selected" button, you can also fold the code, we use this button is more (hold down the ALT key while clicking this button, you can collapse the external selected).

After you collapse the code, if you want to expand the collapsed code, you can click the Expand All button, which expands all the code that collapses together, as shown in Figure 31.

Figure 31

On the collapse and expansion of code, there is a more convenient way, that is, after the code is selected, directly click the minus sign before the code snippet can collapse the code, click the plus sign can expand the code, how, this feature is often write code friends is not very handy ah!

7. Background File transfer

In previous versions of Dreamweaver, there were not many people who believed in the FTP transfer tool, because it was a waste of time. If you want to upload files to the server, you can only watch it upload files, but you can not use Dreamweaver to design other files, so many friends have chosen to use other professional FTP upload tool to update their website.

I used to Dreamweaver FTP upload as an optional function, until the advent of Dreamweaver8, only to change my view. A few days ago, the Web server seems to be attacked, using the CuteFTP tool can not login to the server, helpless want to try Dreamweaver8 FTP upload function, set up the server's upload address, host directory, login name and password, click Connect to the Remote host button, It's a surprise to have a successful connection, as shown in Figure 32.

Figure 32

Click the expand to display local and remote sites button on the right side of Figure 32 to switch to the Site view, as shown in Figure 33.

Figure 33

On the left side of the window is the remote site file, which is the file of the Web server, and the local site file on the right. Select the file to upload, then right-click, select "Upload", the system will prompt whether to upload the relevant files, as shown in Figure 34. If you have changed the content of this webpage in the process of webpage modification, and need to update at the same time, you can click the "Yes" button, Dreamweaver 8 will automatically search for everything related to uploading files, such as pictures, Flash, other pages and so on, and upload them to the remote site.

Figure 34

At the same time uploading files, you can completely ignore the background file upload, continue to do other work in the Dreamweaver, this can save a lot of time.

In addition, in the production of a Web page, you can choose to save directly to the remote server, only to execute the "file/save to Remote Server" menu commands, if you must correctly set the URL of the FTP information. The Save file dialog box pops up, as shown in Figure 35. Click the "Save" button to save the file directly to the server's appropriate directory to complete the file upload.

Figure 35

8. About the timeline

About the timeline, as opposed to Dreamweaver2004, it seems to be a new feature, but it actually existed long before the 2004 version, but only in 2004 Macromedia suddenly removed this feature, the new version of the timeline and compared to the previous changes have been some. Accustomed to using 2004 of friends may feel this function is unfamiliar, we are here to briefly describe its use, and make a simple timeline animation.

Create a new Web page file, draw a layer, then insert a picture in the layer, right-click on the layer, and select the "Add to Timeline" option, as shown in Figure 36.

Figure 36

If your system does not have the timeline panel open, you can execute the window/Timeline menu command and open the Timeline panel as shown in Figure 37.

Figure 37

When you add a layer to the timeline, a blue rectangular block is automatically displayed in the layer. Drag the two white dots before and after the rectangle block to change the length of the timeline, or you can enter the value of the frame directly in the red box shown in Figure 38, FPS being the frame rate.

Figure 38

Select the layer and then execute the Modify/timeline/Record Layer Path menu command, and the system will automatically record the trajectory of the motion when we drag the layer. OK, now select the next keyframe in the timeline, drag the layer in the page, record the underlying trajectory and add keyframes in the timeline, as shown in Figure 39.

Figure 39

When the AutoPlay and looping options are selected, the timeline animation is automatically played when you open the page. Save the file, and then press the F12 key to preview the effect bar!

Review:

By understanding the new features of Dreamweaver8, I believe you will have reason to upgrade your Dreamweaver, because in the process of designing the Web page it did bring us great convenience and achieved a new leap, whether it is functional or performance has been greatly improved, Enables us not only to create and release more expressive and compelling content for networks and mobile devices, but also to be more efficient and less time-consuming.