Subtitles of the Movie

In the previous movie, I demonstrated how to create your first styles, there are two types of Styles that you'll work with in Dreamweaver, Embedded Styles and External Linked Style Sheets. Here's an example of two Embedded Styles, called this because the style definitions are actually embedded in the HTML of this particular document. Linked Style Sheets can be linked to multiple documents. Here's an example in the HTML of a linked External Style Sheet right here. Spry Menu Bar, Horizontal.CSS, there's a, notice there's a link in the HTML, for the location of that external Style Sheet. Now there are advantages and disadvantages of each type of style. Embedded Styles they are easier to manage and use but their not as flexible because these style definitions are only available in this specific document so you don't get the advantage of using an individual style across multiple pages to allow you to improve the consistency of your pages across a website. The advantages of Linked Styles or Link Style Sheets is they can be used on all the pages of a website ensuring that this styling is consistent. But their harder to manage and organize, so generally I have my students start off with Embedded Styles and then I quickly move them over to using Linked External Style Sheets. So in this movie let me give you some tips and techniques for helping organize and maintaining your External Style Sheets so you don't run into problems, thereby reducing or eliminating the one disadvantage of using External Style Sheets. Let me start off with demonstrating the problem that you'll encounter if your not careful and organizing and maintaining your style sheets. Here's a page for example that's very plain, doesn't have much content to it and is not formatted at all and the reason for that is the link to the External Style Sheet that defines how this page should be formatted has been broken. This can occur if you move either this file or the External Style Sheet or you rename either of those files or files just get corrupted. So to reattach the external Style Sheet that defines the formatting here, let's open up the CSS Styles Window in Dreamweaver and then in the upper right hand corner in the contextual menu, choose Attach Style Sheet, there is the Style Sheet that should be attached to this file, click OK and now notice that immediately the appearance of this page changes drastically so that now I can see how it should be formatted. So imagine the shock that you'll have if one day your pages look like this and the next day they look like this, because you haven't managed and organized your files properly. So the first tip I have is to always work with a site to find a new site for your Dreamweaver Project here in the Site Definition Dialog Box, give the Site a descriptive name, test site, identify the local root folder, this is the key right here, this local root folder. I'm going to identify mine here in my VTC folder and in my Work Files folder; right here I'm going to select that Folder. Now I need to make sure that all of my files then get saved to this local root folder and I recommend that you save them to the root like I've done right here. Here are my various HTML files with the Firefox icon identifier. Here are my External Style Sheets, Class Selector in Sample 2, so the key is you want to never change the name of these Style Sheets here in the operating system and never move these to different folders. I also recommend that my students keep these in the same folder. Also I recommend that you try to limit your Style Sheets, start off with just one and then later as your projects grow in complexity you might want to organize your styles into modules or functional categories. For example you might have a Style Sheet to style all your media, you might have one for each module of the website, for example you might want to have a default style where all of the pages of your website use that default style. You might want to have a separate style for forms or a separate style sheet for forms, maybe one for your video pages and so on. If you do need to make changes to your organization go ahead and do this in Dreamweaver, never change the names of your files or the locations of your files here in the operating system, here in my Vista operating system. Instead open up the window, Files, Window here and then you have a File Manager and if you change the names here Dreamweaver will use something called a site cache to update any files that are dependent upon that particular. So in the case of Cascading Style Sheets, External Cascading Style Sheets, all of the pages in your website will probably rely on that file so it's very important that, that particular file be organized and maintained very precisely and very carefully. So my main tip here to repeat is try not to change the name or locations of your Cascading Style Sheets and if you do need to change locations or names, always do it here in the files window of Dreamweaver. If any of these concepts are unfamiliar to you I strongly recommend that you review one of our VTC courses covering Dreamweaver itself and review those sections on setting up sites and managing sites. Let me now move on to the next movie and review more about how to use the Dreamweaver CSS Styles Panel here that I've introduced you to including how to use it in the All Mode and also how to use it in the Current Mode using the two tabs here at the top.