Join James Williamson for an in-depth discussion in this video Getting text into Dreamweaver, part of Dreamweaver CC 2013 Essential Training.
Now that we've explored working with the structural elements of our pages, we need to turn our attention to the actual content itself. Although you can certainly type to your hearts content inside Dreamweaver, chances are, most of the copy that you're going to work with will either be created by you or another person in a program other than Dreamweaver. So we're going to start by discussing how to get that text from those documents into Dreamweaver. Now, to do that, I've opened up the programs.htm file, which you can find in the 05_02 folder.
And then, also inside the programs directory, inside that. Now, I've not only got that file open here, but also in Microsoft Word, I have the programs.doc file that's available in the underscore assets directory. So, this is the Word document. And chances are, you're probably going to be getting content from Word that people want to place inside your webpages. You know, and it's actually a pretty easy way for clients to get to, body copy to you, and other people that you might be working with, within your office, that sort of thing. So there are a few things that they can do for you to make life a little bit easier. Now, one of those things is not saving the page as Word or HTML document. That'll create more problems than it'll solve. But I'm going to show you a few tricks that can make life a little bit easier for you if you are moving text from Word into Dreamweaver. The first thing I want to do is I'm just going to select all of the text on my page and I'm going to copy it.
Okay? So pretty standard. Copy and paste, right? But Dreamweaver has some workflows built into it that make this copy and paste workflow a lot more efficient. Okay. So, I'm going to go back into Dreamweaver and I'm going to place my cursor here in Design view in sort of this empty area below the header because this is where I want my main content to go. I'm going to go ahead and paste that, which is either Command or Control+V. And when I do that, hmm, well, that doesn't look good at all. If I go back to my Word document, I had all this structure built into it and everything was formatted. Maybe not visually the way that I want, but at least structurally the way I wanted it.
But when I pasted inside Dreamweaver it just came in as just text. (INAUDIBLE). Now that's hardly what I wanted and I'm betting that if you did this along with me that you didn't see this. Now the reason for that is Dreamweaver has a set of preferences that control how pasted text into the page is formatted, alright? So, I'm going to undo that and I want you to undo that along with me. And I'm going to go up to my Dreamweaver preferences, again on the PC you would go to Edit > Prefferences. And I want to go right here to Copy and Paste. So I had text only selected, I doubt you did because it's not the default. But text only gives you just that, only text, no structure, no formatting. Now there are going to be times when you want that option, so it's nice to know it's available to you.
Let's take a look at some of the other things we have here. We also have text with structure. And that would give us not only the text itself, but structural elements like paragraphs, lists, tables, things like that. Then we also have text with structure plus basic formatting. That's all the above plus things like bold and italic. And then finally we have this one. And I'm going to try this one. Text with structure plus full formatting. That's not only bold and italics and all that stuff. But also the styles that somebody may have style detected with inside Word or another program. If it understands them it'll bring those in as well. Now, when you bring in text with formatting like this, you also get a few options down here.
For example, retaining line breaks. If somebody hits Enter they get a new paragraph inside Word, but if they hold down the Shift key and hit Enter, they get a line break. It's very handy for creating addresses, for example, where you have a line break but you don't want a paragraph, so you can retain those. And then, we also have this cleanup word paragraph spacing, which I really love because it's very common for people in word to hit Return twice to get space between their paragraphs rather than formatting the spaces. And if you leave that, you end up with a lot of empty paragraphs in your Dreamweaver documents, or your HTML files. So I want to turn that off. You can also convert smart quotes to straight quotes if you like. That's going to give you the pipes characters instead of the actual encoded smart quotes.
So I'm not going to choose that. Alright, so I'm going to go ahead and click OK. And then I'm going to go back to that same area. And I'm going to paste again. So I didn't need to copy it again. I just needed to paste it. Now this time when I did that, notice that not only did I get structure. And if I go to split screen view here and minimize my panels and icons, I can see that the structure came over. Here's my paragraph. Here's some headings. Here's another paragraph. But in addition to that, I got this weird formatting. I got this sort of gold color for my text and I've got these weird things like MSO normal. So those were the styles that were applied inside Word. Now, I really didn't want those, so I'm, again, going to go back and undo that. And this time, I'm going to go back to my Preferences. And I'm just going to choose Text with structure plus basic formatting. So bold, italic, plus all the structural elements. Again, I'm going to click OK.
Make sure I'm in design view. Click where I want the copy, and I'll paste it again. So notice, we didn't change, really, copying the text. We only copied it once. But based on all the preferences that we selected, we got the copy formatted exactly the way we wanted to. Now how did all this work? Well if I go into Code view or Split view, you'll notice that academic programs came in with an H1. And the rest of them came in with their paragraphs or H2. That sort of thing. Now some of the text like the names of the chairs, for example, came in with the strong element around it, which now means they're bolded.
And we have things like headings that go all the way down to an H3. Okay, so the formatting of them is being done by the CSS that we have for our site. So that's no great mystery. But what you might be curious about is, how did DreamWeaver know which headings that you wanted and where you wanted paragraphs, that sort of thing. How did it know? Well, if I go back into Word it's actually fairly simple. If I click inside of Academic Programs, for example, you can see that I've applied the style of header one to it. If I click in Academic Departments it has a Heading 2. If I go down to Animation, it has a Heading 3. So those sort of default formatting styles inside Word. Dreamweaver's going to recognize those and use those inside your documents. So when you're creating a document in Word, if you can use these structural styles like Heading 1, Heading 2, Heading 3, Dreamweaver is going to take care of the paragraphs for you, so that's just normal body copy. But if you can do that in any bold and italics that you apply will come in a strong tag of emphasis tags.
If you can either do that or you can train your co-workers or clients to do that for you, you're going to save yourself a lot of work because all those structural elements are going to come over into Dreamweaver. So, it's kind of nice that you can bring over the structure as well as the text. Now, if somebody gives you just a regular dot, txt or text file, you can open that directly up inside Dreamweaver and copy and paste, but be aware that the structure of the file isn't going to come through. You're just going to get the text and then you'll have to structure it yourself after you paste the text in. Now, for the most part, this copying and pasting workflow that I'm showing you here is going to work just fine within Dreamweaver, whenever you need to bring text in from Word. However, there is yet another way to bring text into Dreamweaver from Word, and I'm going to take a look at that in our next exercise.
- Learning how to approach web design
- Managing workspaces
- Defining a new site
- Managing starter pages
- Exploring the authoring options
- Creating links
- Setting CSS preferences and styling a page
- Placing and styling images
- Working with tabular data
- Uploading files
- Checking for broken links