Tables are considered very old school these days, let me show you why. So let's go ahead and close this site. To close the site in Expression Web you simply choose File, Close Site and I want you to notice too if I Alt+Tab right now that I have seemingly multiple versions of the program open, that's because each time you create a new site you get a new instance of the program. So I am going to go ahead and close this one and we can close out the FrontPage now, we are done with that. So I am just using Alt+Tab switching around, kind of cleaning up what I have on the screen here.
So we are back to Expression Web, you should have both Expression Web and FrontPage open and now I want to open a website that I have saved for you in your lesson folders. Since you are opening an existing website you don't have to use the Import option, you can simply choose File, Open Site and on your Desktop you should find in your Project Files in Lesson 02 a folder called California Nature Site. Select that and choose Open and it will open the site into Expression Web. I want you to go into the friend's folder and let's open the wolves.htm page. We are going to look at this page which was designed in CSS and compare it with a page in FrontPage. So let's Alt+Tab, switch back over to FrontPage, I am going to close the site here and open a site, again on my Desktop in Project Files Lesson 02 and I am going to open the Chocolate Game in FrontPage and this time because I did promise you would get to learn the chocolate game in this training, I want you to open the instructions.htm page and you will see actual playing instructions for the chocolate game.
So notice again that this site was created with a layout in an HTML table and you can see the boundaries of the cells of that table or what are controlling the positioning of these images and the text that goes with it. And if you are reading along here, the chocolate game is played by having a piece of chocolate on your forehead and the trick is to get that chocolate into your mouth without the use of your hands. My friend Paul and his son Ted are doing a brilliant job here. Ultimately if you do win you get to eat the chocolate. So this site was designed in a table in HTML which is a very common approach to web design but it's considered rather old school today.
I want to switch over back to Expression Web now and look at this site which was done with CSS and Div tags. So you could have built this exact same design, using an HTML table, but instead of table cells what you are seeing here are actually Div tags, you see here it says div#story here and here you have another div. This page was also created with a dynamic web template which helps to automate some of the process of development. You are going to see how to do both of those things in the next two lessons. But before we do that I wanted you to appreciate why this design approach is preferable to use in tables.
So as I scroll down the page again this could have been done in a simple table layout but instead this here is another Div tag positioned on the page with CSS, and one of the places you really can see the dramatic effect of CSS is if you preview your page just using the standard preview option and I am going to preview this in Firefox. If you don't have Firefox on your computer already I highly recommend that you get it not only because it's good to test in multiple browsers, so I have Internet Explorer to test and I also like to test in Firefox but because Firefox has some special CSS Options, for example here you see right now that little rollover effect you might think those are images, you might think I have two graphics there are I am using the image rollover but that's actually all created in CSS and what's really happening behind the scenes there is that is plain text formatted as an ordered list, certainly doesn't look like an ordered list, no bullets, none of the alignment challenges of unordered list. This is a standard H1 tag except I changed the formatting of the H1. These images are aligned also using CSS and if you view this page in Firefox you will have the advantage of being able to remove the CSS style sheet and see the underlying structure of the page. You do that by choosing View, Page Style, No Style and you can do this on any page on the web that uses CSS and watch what happens. Wow, pretty dramatic change. What I have done is to remove the CSS formatting and leave only the text and images in its most basic formatting and this is a good test of CSS because it lets you see, see that really is an ordered list, it's just a bulleted list tag that I have changed the style of the CSS.
You can also now see the structure of this page. So I have the image and then I have a cut line that were actually on the left side of that page and then what was on the right side of that page, this headline and this image and the story that went with it and at the very bottom the copyright information that was in the footer of that page.
Being able to take apart a page like this and still have the structure make logical sense. This part of it what makes CSS so valuable on the Internet today. So imagine this, if you had designed this page in a table and let's go back to FrontPage to that table, when you take the structure of a page like this, it doesn't always flow in the right order, it's not always clear whether this picture should come before this picture should come before this text. It will flow down the page the same way as if you have done in CSS, in a logical structure. It's much harder to get that effect in tables and that's why CSS is preferred.
A logical page structure like this is important because imagine that I were blind or visually impaired and using a browser that was reading this page to me. The structure of this page helps me identify oh, these are links to other places on the page. Ah, this text goes with this image, whereas if I had laid this out in a table this text might have been way down below this story and this picture and not associated with the image, because I laid it out in CSS I was able to keep like information together and that's not just important for accessibility although if you have to meet accessibility standards this is by far the best way to design. But think too this is also the best way to design if your page maybe redesigned to display on say a handheld device or a really big projection screen we are seeing more and more ways that web pages are being displayed on the Internet and CSS is by far the most flexible option when you need to redesign a page because you can remove the styling and still understand the logic and the structure of the page.
Transcription by:
Scribe4you Transcription Services