Viewers: in countries Watching now:
Managing CSS in Dreamweaver with James Williamson shows how to create cascading style sheets that are efficient, reusable, and easy to navigate. In this course, James shares tips on how to find and use panels and tools, and how to deploy style sheets to screen, print, and mobile environments. Course topics include creating customized starter pages, learning to rapidly hand-code CSS through using Snippets, and using Dreamweaver's CSS preferences to deploy lightweight styles. Exercise files are included with the course.
Now that we have built a custom starter page, the only thing left for us to do is to let Dreamweaver know that our new page is the starter page. To do that, we will need to copy our page into Dreamweaver's directory structure. Although we could stop there and still have the functionality we want, we are going to take our starter page a little bit further by adding a preview image for it, and passing along some descriptive information for our page in Dreamweaver's New Page dialog box. Now, I have Dreamweaver open right now, but no individual file open. And for what I need to show you guys now, we are going to have to go exploring through our hard drive.
So I am on a PC. The location of the files for me is going to be a little different than for any of you guys that are on the Mac, but once we get into the folder, the location is exactly the same. So what I am going to do is go down to my Start menu, and I am just going to go to My Computer. I am going to go to my Local Disk. Now, I am going to go into my Program Files (x86). I'm on my Windows 7 here. Any version of Windows you are going into Program Files. Now on the Mac, you are going to go into your Application Directory. From there, we are going to go into Adobe, and we want to go to Dreamweaver CS5. Inside Dreamweaver CS5, we want to go into configuration. All right.
So once again, you want to find the Adobe folder inside either Program Files or your Application's Directory, if you are on the Mac. Go in the Dreamweaver CS5 folder/configuration. Now, once you are in configuration, it's the same for all of us. We want to go into BuiltIn and Layouts, BuiltIn and Layouts. So let's examine what is here. So we see oneColFixCtr.htm, oneColFixCtr.png. We see that sort of pattern repeated over and over again.
As a matter of fact, if you go to Dreamweaver and choose File > New > HTML, you can quickly and easily see what those files are: 2 column fixed, left sidebar, 1 column fixed, centered. So again, returning to our folder. That's exactly the structure we are seeing here. So these are the actual layout files: an HTML file followed by a PNG. Now, the PNG is the actual preview file. You can see here, for example, that we see a preview for each one of these guys. That's sort of descriptive as to what the page is all about. Okay. So in order to make ours work, we need to have a preview file, and more on that in just a moment, and then the HTML file that we created in the previous exercise, and they all need to go in this folder.
Now, that would be all well and good, and it would still work, but all of this information that I am getting in the dialog box here, where I have a description of it, and that sort of thing, I wouldn't be able to get that unless we somehow let Dreamweaver know that we have a new starter page, and this is the description for it, and this is the preview that we use for it, that sort of thing. So how do we do that? Well, let's go back into either our Finder or Explorer window here. I notice that there is also another folder here called _notes. When I open that up, I see that we have some text files that also follow that same naming convention.
Notice that it says oneColFixCtr.htm.mno. MNO is a Macromedia notation file. It takes you a little bit further back before Adobe and Macromedia merged. But this is basically an XML file. It's an XML file that describes to Dreamweaver where the starter page is, what its name is, what preview image to use for it. So if you want to pass along that same information, you are going to need to pass that information on to Dreamweaver. The best way to do this, honestly, is instead of trying to write your own, take one of the existing ones and just change it.
So I am going to click on any of these. I will just take this twoColFixLt.htm.mno. Anyone of these would work for what we are doing. Now, what I am going to do is I am going to right-click this or Ctrl+Click it, and I want to Edit it with Adobe Dreamweaver CS5. So even if that's not your default, based on your installation, like mine, you want to edit this with Adobe Dreamweaver CS5. You can open this up in Notepad, or WordPad, or TextEdit; any Text Editor would work. We might as well open it up in Dreamweaver as well, so that you edit with Adobe Dreamweaver CS5. There is our file open.
Now, I don't want to close this window just yet. I am just going to minimize it, because we are definitely going to be coming back to that. All right. So this is an XML file. It's pretty easy to determine exactly what's going on here. Notice that we have a tag called infoitem, so information about the item. We have a key attribute that basically tells Dreamweaver what type of information is being passed. So document type, it's a layout document, what the name of the document is, the description of the document, and preview. Now, currently it's pulling all these information sort of dynamically from a function. It's running a function, and it's passing in these literal string values to the description.
And that's going to basically take script that is writing the descriptions and populate them with what we see here. Now, what's really nice about this is you don't have to know all this. You can just type in a literal value for all of these. So what we are going to do is we are going to go ahead and save this. Let me go to File and choose Save As. We definitely don't want to overwrite this. So we just want to do Save As. We also want to make sure we are saving it in the same directory. So again, notice that you are going to go either in Program Files or your Application Directory, depending upon which platform you are on, into Adobe > Dreamweaver CS5 > configuration > BuiltIn > Layouts, and _notes.
I know it's long, but you want to double-check that, okay? Okay. Now, what we are going to do is we are going to name this the exact same thing that our starter page is named. That's helpful for a lot of reasons. It looks for this document to be named the same as the starter page itself. So you want to make sure they are exactly the same. I am going to type in 2ColExplore.htm.mno. So again, the exact same name that we named our document earlier, 2ColExplore.htm, you want to follow that.
So you want to make sure it's case-sensitive. And at the very end of it, there is going to be mno. So I am going to go ahead and save that. So now we have our own note object inside of that folder, and now we can pass the values that we want for it. So, for example, right here, the new document name, I am going to take the literal string that they have here, and I am going to replace it with 2ColExplore_theme. Now, you can pass in spaces and punctuation here. It's okay. I just kind of like that nice, compact explanation.
It's a 2-column Explore theme layout. Now, we need to give it a description. The description can be a lot more descriptive. So again, I am going to highlight the literal string value, and inside this, I am going to type in Explore theme - to let them know it's from the Explore theme - fixed width, 2 column, badge header, large footer. So we are being a little bit more descriptive there.
Now, the preview is something that we need to change as well, and I want to talk about that for just a moment. You can look over in the Files panel, and I will expand this a little bit so you can see it. We have a PNG file that's already been saved, 2ColExplore.png. Now, how did we get that? What I did was I took one of the Explore California pages, previewed it in the browser, and took a screenshot, took it back into Photoshop, or Firework,s or whatever image editing program you like, and cropped it down. It has to be a specific size. It has to be 227 pixels wide, 193 pixels tall.
As soon as you have that, you can save it as a PNG file, as a JPEG, as a GIF; any of those will work, but I saved this one as a PNG file. So I am going to highlight the value for the PNG file here and change that, as well. I want it to be exactly the same as this. So here I am going to type in 2ColExplore.png. Okay. So it's case-sensitive. You want to check your spelling there. Make sure that's right. Make sure everything is the way that you need it to be. So our note file is finished. I am going to go ahead and Save that and Close it.
You want to go ahead and exit out of Dreamweaver. I am just going to go to File and choose Exit. Whenever you are adding a new starter page, Dreamweaver needs to refresh that cache. One way to force it to do that is to close out the program and then open the program back up again. Okay. I want to go and open up my _notes folder. I am just going to hit my Back button, so that I am back into the Layouts folder. So you want to be in the configuration folder of Dreamweaver, in the BuiltIn directory, and in Layouts. Then in another window, I am going to open up my Exercise Files. This is the folder you can find on the Desktop.
I am going to open up Chapter_03, got into 03_02, and find those two files. That's the 2ColExplore.htm file that we created in the previous exercise, and this is the preview. So I am going to grab both of those guys, and I am just going to Copy them. I like doing copying instead of moving. That way I have got the originals if I ever need to make changes to them, or if something doesn't work, I can kind of open them up and see what's going on. I am going to go ahead and copy them to layouts folder. There they are. I will close that. Close the other window. Now I can launch Dreamweaver again.
All we need to do to check to see if this works is go up to File and choose New. Now when we go to Blank Page > HTML, you can see right here, we have our new 2ColExplore_theme. When I select that, we see the preview image of the page design. So you can make this a little bit more descriptive than sort of their generic layouts. So there is that. Notice that here is our description: Explore theme, fixed width, 2 column, badge header, large footer. So again, you could be as descriptive as you want. We get the option of Adding the CSS to the Head of the document, Creating a New External CSS File, Linking to an Existing File.
We can use any Document Type we want. This is a really cool way to reuse your code and extend the life of these layouts that you are creating. I will go ahead and create my page, and here is my starter page. So if I go over to Design View, there is the starter page that we worked on. All the CSS is in the head of the document, as we asked it to. Although, we certainly could have placed it an external style sheet. So one of the main attractions to using these starter pages is they aren't tied to a specific site. We have a natural starting point now for working on new projects based on this layout. They can be extremely detailed, with a lot of content styling already completed, or if you would like, they can also be really, really basic, with just a rudimentary layout, no presentational styling at all.
How you use them is totally up to you, but by creating a series of starter pages with pre-built layouts for your projects, you can extend Dreamweaver's power and functionality even further.
There are currently no FAQs about Managing CSS in Dreamweaver.
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.