New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Building custom starter pages

From: Managing CSS in Dreamweaver

Video: Building custom starter pages

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.

Building custom starter pages

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.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20778 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.