Extend a Web page to the browser

Source: Internet
Author: User
Tags extend dreamweaver
Browser | Web page In the past, we are often dreamweaver by the automatic scaling of the form, and the fontpage can feel the envy of drawing forms. But now in the dreamweaver4, it all becomes very simple.

DREAMWEAVER4 provides two views, a layout view, and a standard view. If you think you've been able to control the Dreamweaver table, then you can work in a standard view that you're familiar with, and if you like the Fontpage table feature, you can do that in Layout view. And in this view you can also make your page a certain part of the fixed, and the other part of the automatic extension, so no matter how large your browser window, you can make your Web page suitable for the browser window, without distortion.

If you've ever used a Macromedia company's other product fireworks, you know fireworks can generate HTML files, but it will also produce a 1-pixel gif that fills the blank area of your table so that your form doesn't deform. Now DREAMWEAVER4 also has this feature, it can automatically generate a GIF named spacer to fill your table, so that your table does not occur automatically scaling phenomenon.

To achieve the above two functions, in the dreamweaver4 is very simple. Let's start with a new site, and then we'll draw a 1*3 table with familiar table tools, and don't care about its width. Because we can get it to fit in the browser window automatically (you can also draw a table directly in Layout view) and then, click the Layout View button at the bottom of the object panel, and then a dialog box appears, and you don't have to worry about it, it's just a simple introduction to the use of two tools in Layout view and so on, press OK. We switched to layout view.

Now look at the top left-hand corner of our table with a Green layout table label that represents your table. There are three blank parts in the label and each one is marked with a width and a small triangle. In this table, I want the leftmost column in my table to be fixed, and the entire table fits the width of the browser. Before the dreamweaver4, it was very difficult. We can set the table to 100% to fit the width of the browser, but it's rather difficult to fix a cell. But now you just have to decide which part of the table you want to fix and which part you want to stretch. The only thing to remember is that we can only get one column to stretch automatically!!

Here, I decided to use my blue table as the extension column.

Select the last column, click the triangle button above it, and select Make Column autostretch in the menu that appears.

Because it's a new site, a dialog box prompts you to put some spacer pictures in some other line in order to be able to stretch the line Dreamweaver. There are three options below:

Create a spacer Image: Creates a spacer picture, which is not displayed in the browser window, but acts as a fixed table.
Use a existing spacer image: using existing spacer pictures.
Don ' t uses spacer images for Autostretch: Do not use spacer images to stretch, so other rows will deform.

This dialog box does not appear for sites that have already been defined, but you can still add spacer images using Add spacer image, and now we choose the first one. In the pop-up window select the spacer picture's storage directory, OK. The Automatically stretched column we defined is already populated with our entire document window, and in the browser it also stretches automatically to fit the width of the entire browser. The two remaining lines are filled and fixed by spacer pictures, and they will remain the same width in the browser.

You can see a wavy line on this line that represents the stretched column. The table was 400 when it was originally made, but now that the Blue column is automatically enlarged and filled with the entire document window because of the automatic stretching column.

Turn from: Dynamic Network production guide www.knowsky.com

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.