The next tab over to the right is the Diagrams Tab. Diagramming a site is very useful for when you want to get an idea of how you want to layout a site or a new section of the site. Well, that is actually building all of the pages. I am just going to double click on this diagram so you can see what I am talking about. Let me move it up just a bit so it is in the viewable area. You are probably wondering how all these things get here. Well, let me show you.
First of all, there is a set of objects in the Objects Palette called Diagram. To add an object to a diagram, you simply grab the object and drag it out on to the diagram. Now, all these objects that are here already, I put there and did I create the diagram itself? Well, there are a couple of ways. You could from the diagram menu and say New Diagram or you could in the diagram portion of the site window, you can right click and say New Diagram. There are several ways to make new diagrams. When you are creating your diagram, it opens up this page which has sort of a grid, sort of like graph paper. You just drag and drop diagram objects from the site portion of the Objects Palette on to the Diagram Grid. And then you can use the Inspector Palette to set attributes for how you want them to look and things like that. It is really, really fun to do this and I encourage you to get in there, open up a diagram and play around with it a bit. It is not going to hurt anything. These two absolutely has nothing to do with your website until you click this button up here which actually submits these pages into your site. So, what it does is it is going to create real pages out of these icons that you have placed on to your diagram. It will put them into your site.
If you change your mind, you can recall the pages which will take them back out of the site again. Diagramming is a really good method for quickly mapping out the structure of your site before actually creating the pages, the Fun Tool and it is a useful tool. I am going to close up the design right now and say do not save. I will move over to the final tab which is the CSS tab. I got three items in here, CSS files, Classes and Identifiers. This is going to really give me a good idea of where I am using cascading style sheets in my website. The CSS file is showing me any external CSS files that were created and are used in my site. Remember an external sheet is a standalone document that you can put into your website and hook to many, many pages to the one external file. They are all going to be referencing that one external file. However, you can also define cascading style sheets within a document. The cascade part of the name Cascading Style Sheets comes from the fact that if a style is defined in more than one place, the definition that is closest to the object it is defining is the one that has precedence.
So for example, I have a paragraph that I have defined in the page itself as being red and I also have an external style sheet assigned to that page. I have that paragraph defined as being blue in the external style sheet. Well, that paragraph will look red because the internal style is closer to the actual paragraph. You can also create what is known as an inline style and that is where you get these classes. These are applied inline which means they are defined not in the head portion of the page which is in an internal style sheet as defined. But, they are defined right in the line where it is being used. This would have a higher importance that either internal or in external style.
Now, I can see here that this style of the border has been defined twice. In other words, it has been defined once in one place and once in another place. If I right click on it, I can say go to the definition. Here, it has shown me that same class is being defined in two places index.html and in starthere.html, two different definitions. It is being used twice. So there is a lot of information that has imparted here in the CSS Tab of the site window. Identifiers now are slightly different in classes and we are going to discuss CSS in much more detail when we get to the CSS lesson. But, just so you know an identifier which is normally known as an ID, it can only be defined once per page. So, you could not have the same definition used in more than one spot on a page.
Transcription by:
Scribe4you Transcription Services