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

Preparing custom starter pages

From: Managing CSS in Dreamweaver

Video: Preparing custom starter pages

Once you have gone through the process of creating your layout and presentation styles, chances are that you won't want to do it again to achieve the exact same, or even similar, results. As such, finding ways of reusing your styles, whether it's for other projects for the same client or just a way of reusing the same layout with a different design, can save you a considerable amount of time. In this chapter, we are going to focus on techniques in Dreamweaver that allow you to reuse your CSS and your code for future projects. We will start by taking a look at how you can create your own custom starter pages as a way of helping you jump start future projects.

Preparing custom starter pages

Once you have gone through the process of creating your layout and presentation styles, chances are that you won't want to do it again to achieve the exact same, or even similar, results. As such, finding ways of reusing your styles, whether it's for other projects for the same client or just a way of reusing the same layout with a different design, can save you a considerable amount of time. In this chapter, we are going to focus on techniques in Dreamweaver that allow you to reuse your CSS and your code for future projects. We will start by taking a look at how you can create your own custom starter pages as a way of helping you jump start future projects.

Let's take just a moment to review what it is that we are going to be building. In Dreamweaver, if you go File and choose New, you can go to Blank Page HTML, and you have some Preset Layouts that you can choose from. Notice there are 1 column versions, 2 column versions, 3 column versions, that sort of thing. And these are very solid layouts, but from time to time you might create a layout that you want to reuse over and over again for different projects, and you might want to go through the same process, stripping out all the presentational markup, just having Layout Only styles, or being able to rapidly build pages based off a certain point.

This is a really good way of doing this. So Dreamweaver also allows us to create our own custom starter pages. This requires a little bit of know- how in understanding which files within Dreamweaver you have to update. So I am going to hit Cancel and just take a moment to take a brief tour of our starter page. So what we have done here - now, a good bit of this has already been done - but the strategy and the theory behind what we are doing here is we are trying to make everything as neutral as possible, and by that I mean not related to Explore California. We want a layout that we could use really for anything. So what I have done here is stripped out a lot of the Explore California-specific styling.

We are going to talk more about that in just a moment. But we have also given some instructions. So we just opened up one of the regular Explore California pages, stripped things out, started changing things around a little bit, so that we could get a more neutral layout. Notice, for example, that we have some instructions in the body copy on how to do certain things. We have instructions for the way the header should be treated. We have instructions for the navigation, instruction for breadcrumbs, footer. So these are all things that we are basically just passing along to either ourselves, or whoever might be creating pages based off of starter page in the future.

Now, notice also that the Footer has been changed. It has been neutralized a little bit. We don't have that sort of Explore California-specific graphic in the background. We have sort of descriptive items here for where certain content goes. You will also notice that the navigation has been changed. Instead of those Explore California- specific navigation links, we just have the sample links there. And if you want to delve in that a little bit more deeply, if I switch over to the main.css and scroll down to about line say 320 or so, you are going to find these base navigation selectors, and they have been modified and commented.

So we are telling folks if you are going to use background images for your navigation instead of text, uncomment that out. We also have comments explaining how to use the background images, that sort of thing. So the code has been modified and commented to make things a little bit easier for you. It's a great recommendation. If you are going to work with starter pages, you want to add more comments to your code rather than less, so that you kind of leave yourself or other people's instructions on how to build pages with that. Okay. Now, that being said, a lot has been done, but we still have more left to do.

You will notice, for example, that the Header is still the Explore California graphic. This image probably will not be available to us when we create starter pages. Starter pages consist of HTML and CSS. So links to images are going to show up as broken links. So we certainly don't need that image there, but we need to be able to represent that image that's supposed to go there. So we are going to use a placeholder image for that. And even though we can't really see it, maybe I am going to collapse my panels down, so we can see this a little bit, we still have this background graphic in the background. It's that sort of gradient that's going down there, and that's really sort of Explore California-specific.

So those three things we want to go ahead and deal with. Okay. Let's first turn our attention to this accent image that we have on the page. I am going to go ahead and select that. Just click on it one time to select it. And I am going to Delete it, so Backspace or the Delete key now. I am going to be very careful about doing this. When I hit Delete, I am not going to move my cursor at all. I am going to leave my cursor at exactly where it is. You can see it's blinking right here. Then I am going to go up to my Common Objects. I am going to go to my Insert Images, and grab that pulldown menu, and I am going to insert an Image Placeholder. An Image Placeholder is a neat little Dreamweaver device.

It's going to give us a square or rectangle the size of the image that we need in that place, and we can name it, and even give it alt text. So I am going to say Image Placeholder. I am going to go ahead and name the one, accent_image. It has to be all one word. I just like being descriptive with it. I am going to go ahead and give it a Width of 350 pixels, and I am going to give it a Height of 315. I could give it a Color as well. I think I will just stick with sort of a neutral gray color, like this sort of light gray there. And then I can give it Alt text if I needed to, but I don't really need to. So I am going to go ahead and click OK, and now our placeholder image shows up on the page.

Well, it's the exact size that our image is going to be, but we want it to behave like that image as well. So I am going to go ahead and select this placeholder image, and the cool thing about it is I can do anything to this placeholder image that I could do to a normal image. I could Add a link to it. I could All Tag it. I could do all sorts of stuff. What's really neat is I also have this little Fireworks Create button. So when I am ready to go ahead and build this graphic, I could double-click it, or hit the Create button and go out to Fireworks or Photoshop, build the image, and have it brought back in. I am going to select this class. Grab the pulldown menu, and I am going to choose articleImage.

You will notice that it goes ahead and floats, just like the image was doing before that. Text wraps around it. And the only thing that's really kind of weird about doing this is notice the padding actually displays as a gray background. So you might be tempted to think that the image is really close to the text, but it's not. Make sure you select it, and double-check that padding to make sure that that is okay. So that takes care of the actual image tag that was on the page, but it doesn't help us with these background images that we still have. So we need to identify the rule that's driving these, and go ahead and make that rule a little bit more neutral in regards to any type of image.

So we will replace the image with color. So what I am going to do now is just click inside Explore California. This way I don't have to hunt down where that rule is. I am going to go ahead and hold down the Alt key and click on that image. And on the Mac, you would hold down the Command+Option key to bring up the Code Navigator. Now, when I bring up the Code Navigator, I notice something really weird here. I have starter_page, and I have main.css, and they have the exact same cascade. What is going on here? Well, this is something very important about starter pages. The CSS for a starter page must be located in the head of the document.

So it must be using embedded styles only. Well, all of our styles were moved to an embedded style, but it's still linked to the external style sheet, as well. So during the process of creating a starter page, the CSS styles were moved to an embedded style, but the link to the external style sheet wasn't broken. As you can see, this could cause a lot of confusion. What if I edit this instead of this? That would be a problem. So before we do any of this, what we are going to do is go right over here to the CSS Styles panel, highlight the main.css, and then just click the Trashcan icon. Now remember, don't have an individual rule selected, have the actual CSS selected.

Click the Trashcan icon one time. Clicking it repeatedly will result in other things being taken away, and you don't need that. We also don't need the link to the print style sheet, so we are going to Delete that, too. Don't have any links to external style sheets in your starter pages, because it's going to be document-relative, and you might not use the same naming conventions or even locations for styles in the next project. All right. So now all we have are embedded styles. That's going to make life a little easier. Let's come back to our header graphic here. Again, I am going to Alt+click this or Command+Option click, depending upon my platform.

And we have two header selectors. The first one gives positioning, height, that sort of thing. The second one is giving the background image. That's the one we need to edit. So I am going to go ahead and click on that, and that's going to give me the sort of Split Screen View. I am going widen that up just a little bit. And sometimes when you widen it, you have to scroll back up a little bit, but that's okay. So about line 238, I see the #header background URL. I am going to change that. I am going to highlight the entire property, which is the link to the external graphic, and I am just going to go ahead and change that to a color.

So I am going to type in #193742, and now if I click back in Design View, the graphic goes away, and the color just shows up. So that's replacing the graphic with sort of a relatively neutral color, that dark blue color, and when I create a brand-new page off of this, I will know to go in there and edit that and switch that out with the graphic. Now, how would I know that? Well, I would know it because I created this page, but somebody else wouldn't, would they? So one of the things that you can do for people, if you really feel like being nice to them, and I am going to use the Code Navigator to navigate back up into my styles, is it's not a bad idea to go ahead and add a comment to this.

And you can comment things out any number of different ways. I like commenting them out like this, right beside the property. So I can just hit space and type in: replace color with background image. And it wouldn't hurt to let somebody know what size that image needed to be, as well. So I can go up here in the header and find that the height is 237px. The width is 192. So we are 192 x 237. I found my other header, and I am going to say 237px x 192px, and I am going to highlight that, wrap it with a CSS comment, and now anybody building a page off of this will at least have some instructions on how to deal with that.

Now finally, we need to do the body tag. I am going to move up to the body tag. You will notice that the body tag is also using a background color and an image. I think color is a little too specific for this site, so I am going to go ahead and highlight that. Make it a little bit more neutral by doing #333, which is a gray, almost black, and as soon as I do that, if I switch back to Design View, I can really see that all the way around the edge, just that sort of dark color. So I am going to go ahead and save that, preview that in my browser, and now I can see there is really no Explore California-specific stuff anywhere. Neutral colors.

We have our Image Placeholder going on. We have sort of the Header area, right here, that doesn't have an image in it. This page is ready to go. So the last thing that we need to do to this page in order to make it a starter page is to give it a descriptive name. So I am going to go to File and choose Save As, and save in the 03_01 folder, and I am going to save it as 2ColExplore.htm, so 2ColExplore. So this would tell somebody it's a 2 column layout. It's based off of the Explore California Web site, or theme, or whatever you were doing.

You just want to be really descriptive with the name, or at least as descriptive as you can be within that. So I am going to go ahead and Save that, and we are ready to move on to our next exercise. Now, in this case, our page had to undergo really extensive changes before we could use it as our started page. You could tell by all of the stuff that was already done. The goal of saving a starter page is to have a neutral page layout that's not dependent upon any specific images or content. Now, in the case of the Explore California site, the one that we have been working on, this required us to pay attention to the page navigation, background images, and element styling to make sure we stripped away enough specific content to create an effective starter page.

I would really recommend going and checking out a version of the Explore California page in one of the other Exercise Files, and comparing it to the starter page and looking at the changes that have been made, so that you can sort of understand some of the decisions that were made as well. Okay. So now we have got a neutral page, with the desired layout and structure. Now, we need to let Dreamweaver know that we want to use this as a starter page, and we are going to do that in our next movie.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20813 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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Managing CSS in Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.