Tutorial/dreamweaver/tips dreamweaver Handling Word documents is a coup

Source: Internet
Author: User
Tags add format file size dreamweaver
Dreamweaver|word| Skills | As a web designer, I do not know whether you have the experience: the customer to your website material is a lot of Word documents, although it is easy to read, you can add to the Web page is not very convenient. In particular, it is time-consuming and laborious to add one item to a Word document that contains a form. Although word can save a document as a Web page, there are too many wasted code generated and the file size is too large.

But fortunately, Dreamweaver has provided us with a handy command to reduce the size of the HTML files produced by word substantially, except that you may not have noticed its application.

Below you first open Dreamweaver, click on the command menu, a closer look. You'll notice that there are two of them: clean up the HTML and clean up Word's HTML, and it looks like Dreamweaver has given us the command to work with Word documents. Here's an example to let you understand this command.

Here for you to provide a schedule with Word , you can download down to try. We'll use this table to take the example step-by-step to convert the Word document containing the table into a code-clear HTML file.

  Step1:
Dreamweaver can not handle doc documents, so we need to use Word to save this document as HTML format, this step is simpler, in Word, select "File-Save as", save type Select HTML.

  Step2:
  Look at the other saved HTML document, the document has more than 50 k! This is just a timetable!
Open this HTML file with Dreamweaver, select the Code view, you can see the code here is simply terrible! Take a look at the document with the Dreamweaver menu " command → clean word html" that we just mentioned.

It's much better to look at the code at this time, but there's still a lot of junk code. Then look at the size of the document, from the original more than 50 k quickly dropped to less than 20K.

  Step3:
Take a closer look at the code, there are a lot of tags we don't need, such as

, ,

. In fact, we can completely delete them. Here's another menu, " command → clean html," to clean up the document. Select the menu " commands → clean html", click the specified tag, and fill in the not-used tags we have just seen.

The format is this: label name, sign signature. For example here, we should fill in the P,span,div ( Note: The middle with a half-width comma "," separated ). then click OK. Wait a moment, and you'll find that our documents are pretty clean. A closer look at the TD tag will reveal that its class attribute is meaningless. Below we will delete it. Manually delete one by one? Of course not! We can use the search and replace commands to remove them all. Okay, get moving.

  STEP4:
  Opens the Find and Replace menu ( edit → find and replace, shortcut key ctrl+f) provides four ways in the Drop-down box that precedes the find content. Source code, text, advanced text, and specify labels. Here, you can clean it up in the form of the source code or by specifying a label. Here we use the method of specifying the label to clean the class attribute, so that we can understand its usage. Source code of the way we should all know better, here is not much wordy.

The function module of this panel has been roughly mentioned in the figure above. Not very complicated, if you do not understand the place, please click on the Help panel. Here, the parameter settings are shown above, and then click Replace All. To complete the processing of this document. If you are not satisfied with TD's Width property, you can also use this method to delete all of them. At this point, the processing work is complete. We succeeded in narrowing a document of more than 50 k to less than 3K, and it was easier to paste it into the page we were applying.

Finding and replacing seems to be a pediatric thing, but it's very powerful. When you do a website in the future, if you encounter a site with a lot of files in a certain label need to be modified, as long as they find the same rules can be used to mass replacement. There are also advanced texts that are not overlooked and are quite useful tools.



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.