Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
Although you can type to your hearts content in Dreamweaver, chances are that most of the copy that you work with will be created by you or another person in a program other than Dreamweaver. Getting text from those documents into Dreamweaver is a fairly straightforward process, but like most processes in Dreamweaver, there are some options that you really need to know about to make the most of your workflow. Let's examine this process in a little bit more detail. So I have our resources.htm file open. Now, you may have noticed, if we're looking over the Files panel, that we also have an _assets directory that has a resources.doc in it as well, that, of course, is a Word document.
I'm just going to switchover to Word really quickly, and this is the document that we're going to be importing into our Dreamweaver file. Now, notice that it has some built-in structure. It has some formatting. It has some bold text, some italicized text. It has got some lists down here at the bottom. So all of our text is formatted and structured really kind of the way that we want it. Well, I'm just going to go ahead and select all of my text, so it either is a Ctrl+A or Command+A, and then I'm going to copy it, Ctrl+C, Command+C depending upon what platform you're on, and now I'm going to switch back to Dreamweaver. All right.
Now that I'm back in Dreamweaver, I'm just going to go ahead and click at the top of the page, and I'm just going to paste, Ctrl+V, or I can go up to Edit > Paste, wow! Well, that wasn't really exactly what I was hoping for. Now notice all my text came in, so at least I'm that far ahead, but it came in as one big, old block of text. I was hoping for slightly better results. So I'm going to undo that and take a closer look at my preferences. So I'm going to go up to Edit and choose Preferences. If you're on the Mac, you want to go to Dreamweaver and choose Preferences.
And I want to take a look at the Copy/Paste category. Now I've always equated this to like Goldilocks and the Three Bears, some porridge is too hot, some porridge is too cold, and you're looking for the setting for you that's going to be just right. All right. Let's go through our options here. Currently, my preference was set to Text only, and that is why I got one big, humongous block of text with no structure. I also can choose Text with structure. That would be paragraphs, lists, and tables. Those would come over. Text with structure plus basic formatting (bold and italic), and we'll check this option out, Text with structure plus full formatting (bold, italic and styles).
Now you might think to yourself, "That's going to save me a lot of time. "I can go ahead and style all my text the way I want it in Word and just paste that directly in a Dreamweaver and my job is finished." Well, let's take a look at that option. If I choose Text with structure plus full formatting, again, I get some options down here that come open: Retain line breaks that would be any Shift, Enters that you've done in Word, and Clean up Word paragraph spacing. And what does that mean? Well, if you guys use Word a lot, you know it's very common to hit Enter twice to get space between paragraphs. That's kind of a no, no, because you end up actually with blank paragraphs between your text.
So Dreamweaver would go through and just sort of strip all those out. So those are two nice, little options. I'm just going to leave them selected. So I'm going to go ahead and click OK and paste my text. This time when it comes in, notice that all the structure came in. There are my lists, although something weird is going on there. I have all my headings. I've got text size coming in, wow. This is looking great! Well, sometimes things that look great on their surface aren't so great when you dig underneath it a little bit. So I'm going to go switch over to Code View, and I see something going on that I'm not too pleased about. Look at this.
I have some embedded styles that came in from Word. Now obviously, if I were working within a larger site, these styles might conflict with my other styles, but certainly they are going to add extra weight to my pages that I don't need. And then I've got some really weird stuff going on here, Span style, so I have some in-line styles going on. I have a lot of formatting going on that really shouldn't be driven this way. It should be driven by my styles. A lot of these classes are Word-specific classes. So I've really cluttered up my code by doing that. So that's really not the option I wanted to do. So I'm going to go ahead and undo that as well.
So now I'm going to go back to my Preferences, and let's see if we can find the ones that is just right for us. I'm going to try this one, Text with structure plus basic formatting. That will retain all paragraphs, all headings that you've created, that sort of thing, but it's also going to keep your bold and italic text as well, but it won't bring over all those messy styles from Word that we don't really need. Again, we still retain these options down here, so I'm going to select those, and I'm going to click OK again. So one more time, paste the text that we've copied. Now, look at this.
That looks a little better, although it still have this little weird thing going on here. Sometimes you're just going to see a couple of things that you're going to get to clean up manually, and usually going in a Code View will help you with that. So I can see in Code View, for some reason, Dreamweaver thinks this is two uls, Unordered lists, so I'm just going to remove the opening and closing Unordered List tag, go back in Design view, and now that looks a lot better. So again, I hope that reinforces the concept that I was talking about earlier.
It's really important to know how to modify the structure of your HTML. If you're not familiar with HTML, that would have been a very difficult edit to make. Going back up through here, I can see all my structure. When I click inside of the tag, I can see that that's a heading three, just like I wanted. Here's a heading one, here's a heading two. If I click inside my bold tag, I notice it's being bolded through the use of the tag, which is structurally sound. And my italicized text is being italicized through an tag, which again, is structurally sound HTML. So the integration between Word and Dreamweaver is pretty good.
If you use some of the basic styling in Word and choose heading one, heading two, Dreamweaver is going to retain that and actually map that to tags. If you italicized text in Word, you bring it over, Dreamweaver is going to convert that to an tag or bold tag is going to convert to a tag. So there is a pretty tight integration between them. Now, copying and pasting your text in the Dreamweaver is likely to work fine for most of the stuff you'd need to do, but there is another way to bring text into Dreamweaver from Word, and we're going to take a closer look at that in our next movie.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.