Adding text and images
Video: Adding text and imagesAdding text and images provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 Getting Started
Viewers: in countries Watching now:
James Williamson provides a practical introduction to Adobe's do-it-all web design and development tool in Dreamweaver CS4 Getting Started. He shows how to generate standards-compliant XHTML and CSS, as well as rock-solid PHP, ColdFusion, ASP, AJAX, and more, using Dreamweaver's developer-friendly Code view and WYSIWYG Design view. From creating basic page layouts to embedding multimedia, James shares techniques for publishing a finished site quickly and efficiently. Example files accompany the course.
- Defining and structuring new sites
- Adding and styling text, images, video, Flash, and more
- Previewing work in progress using multiple browsers
- Integrating assets from other CS4 applications
- Uploading and managing finished sites
Adding text and images
Regardless of whether you start out using one of Dreamweaver's starter pages or whether you are building your own design from scratch, you will need eventually to get your images and your text on the page. When adding text to your pages, you can type directly into Dreamweaver if you would like, but chances are the bulk of your copy is going to be written in another program, like Word. To help to speed the process of getting text in your pages, Dreamweaver supports multiple workflows. You can copy and paste text, open text files, or on the PC, you can import Word and Excel documents directly into Dreamweaver.
If you choose to import Word documents, you can keep the basic formatting structure or you can discard it and just import the text. So we are going to import some text on our page, and we will use that workflow of importing Word documents directly. Now, if you are on a Mac, unfortunately the Mac version of Dreamweaver doesn't support that workflow, so you would need to open up the Word document separately, copy and paste the text. You could also save the Word document as a text file; you could open the text file in Dreamweaver and then copy and paste the text directly inside Dreamweaver as well. So I have got some body copy here. I am going to highlight this body copy and delete it; sort of get it out of the way and create a blank space for this.
Looking over at my Files panel, I am going to open up the Source folder, and inside that, you see I have a Word document there that says intro_text.doc. Now there are a couple of different ways to get this on the page. One way would be to go to File > Import, and I can import the Word and Excel documents directly in that way. An easier way I think is to just grab the file and simply drag and drop it. So I am just going to grab it and drag it into the position that I want the text to appear. Now, when I do that, I see the Insert Document dialog box appear. Now, for those of you that are on the Mac, you can drag and drop a Word document onto the page,. What happens however is that you don't get this dialog box that comes up, and it automatically creates a link to the document.
So if you are wanting to give your users the capability of clicking on a link and then being able to download this Word document, that would be a great way to do that, a very fast and easy way to do that. But on the Mac, you don't get the option to insert the contents like you would on the PC. Once we choose to insert the contents, we have to choose how we want the contents to be inserted. Do we want just the text, do we want the text with basic structure, or do we want to bring in the styles related to that Word document as well? So I am going to just choose the text with structure plus basic formatting. That will retain any bold and italicized size text, but it won't bring any Word styles in that might conflict with my existing CSS.
So I am going to go ahead and click OK, and it brings the text in. Now, look how intelligent Dreamweaver is. If I click inside this bold text, I can see using the tags selector down here, that it's surrounded by a strong tag. If I click inside my italicized text, I see it is surrounded by an em tag. So instead of trying to modify the styles, what Dreamweaver has done for me is it has structured the XHTML correctly to achieve the results that we saw in the Word document. So that's a very smart workflow. Now, adding images to your page is just as easy, if not easier, than adding text. You can insert images from the menu, from the Insert panel, or by using the Assets panel. The Assets panel also allows us to preview and organize our images, so let's take a look at that.
I am going to click over on the Assets panel and I get to see a listing of all the images on my site. If I click on the images, I can see a preview of them and that's great because sometimes I will forget exactly what a graphic is and by clicking on it I can quickly and easily identify it. Well, right now we are seeing all the images on our site and since we have a small site, it doesn't take that long to look through them, but on larger sites, this could take a long time and it would be very easy to sort of get lost. So they have another feature in the Assets panel and that allows us to organize our images in a series of favorites. So I am going to take these two images, I am going to right-click them, and choose Add To Favorites.
Now, these are the only ones that I have added to Favorites so far so when I go over to my Favorites area by clicking on this radio button, they are the only ones I want here, but I could add other files to my Favorites. I could even create folders within the section, to create subdirectories of images. This only organizes them here in the Assets panel; you are not creating folders on your hard drive and you are not moving your images anywhere. Just a nice way of sort of filtering out the results. So let's say between these two images, let's just say I decided I want the surf1 on my site at the top of my sidebar. So I am going to select surf1. Now, I can drag and drop this the same way I did the Word document, or if you wanted to place it in a very precise location, and you have your cursor already there, you can click on the graphic, and then just click the Insert button down at the bottom of the Assets panel.
Now again, Dreamweaver controls the accessibility and says, "You need some Alt text for this," so I am just going to call this sidebar graphic, click OK, and my image is placed on the page. So Adobe has made adding assets to your page quick and easy. The integration between programs like Word and Dreamweaver means that you won't have to take any extra steps in getting external text into your documents. Features like the Assets panel make managing your images and adding images to your pages simple as well. By making it easy to get content on your pages, Dreamweaver allows you to spend more time focusing on planning on other aspects of your site, and that's a good thing.
There are currently no FAQs about Dreamweaver CS4 Getting Started.