California Career and Technical Education Standards

• IT.B.B5.5 Know strategies for optimizing Web design for fast delivery and retrieval.
• IT.B.B5.6 Know the tools needed to enable databases to collect data from Web site visitors...

• Set/Hook: Let's look at Chevrolet - Hooks / Set

  Have all student open up their music page from the previous lesson, the one involving many new rules for CSS.  Have them open it in a web browser and Notepad.  Then have them pay attention to your screen.

  Let’s look at some commercial web sites

  Let’s pick some web sites that are professionally made and analyze the appearance all across the site.  What do we see in common between all the pages within the site?

  Let’s look at     www.chevy.com      and      www.ford.com     and move about a few of the web pages.  Besides gawking at all the nice cars and trucks, can you notice what is common between all the pages at Ford, or all the pages at Chevy?  They have a common appearance, a common color theme involving color of backgrounds, pictures, size and shape.  The main thing that changes is the content between each page, but the general theme stays the same all throughout the site.

  Take a look at www.espn.com  and you’ll see the same thing.  We could pick out almost any professional web site involving almost any business, sport, school, or government site and it will always show common thematic appearance across the entire site.

  Can you imagine working for a company like Chevy as one of the web designers or developers, and the boss orders a change of the background color and picture resulting in necessary color changes of text and borders?  There’s perhaps 100 web pages in which you’d have to make major changes involving backgrounds, colors of text and borders, etc, etc…   Can you imagine doing such a thing?  Changing hundreds or maybe thousands of lines of code in all the web pages?  No way!

  So to make life easier, we introduce the idea of External CSS files.  One file takes care of the CSS rules for the entire site.  A few changes and we’ve changed the entire looks of the site.

  This is what you’re going to do today.  You’ll export the CSS rules in your existing music web page and put it into an external CSS file and then make 2 more pages in just a few minutes, a page about your family and one about your school.  This will be so much easier now that we’re going to use external CSS.  So watch how we’ll do it.

  • Music page with Internal CSS [ Download ] null
  • clouds.jpg [ View Image ] [ Download Original ] This picture of clouds for the background must be placed in a folder called images.
• Introductory Info/Student Notes: - Lecture

  First, what should the main page, the one about YOU be called?  Most of you will want to name that one something like   "robert.htm"  or whatever your name is.   But, sorry, you really shouldn’t do that.  This is the first page that everyone wants to find easily without having to type in names of individual pages.  Just like when you go to chevy.com you’re taken to a default page.  The web server knows what you’re looking for.  The main page on a web server usually has a given default name, something really exciting like "default.htm" or "index.htm"   or   "home.htm"   depending on the server type.  So let’s go with  "index.htm"  and that will work as the main initial page for most web servers.  So don’t forget, the first page in our site will be "index.htm"   We’ll standardize on 3-letter file extensions like htm, not html.

  Now how do we move the rules to an external CSS file?

  We’ll take the lines of all the CSS rules and then CUT them.  (Highlight all the rules in the head of your music file from {body  to the last ending bracket } of all the rules.  Remember, this is the area for the rules up in the head.  This is not the body and other statements in the body or HTML of the content of the file.   We are only in the head.  Then CUT with CTRL X.)

  Now we’ll paste all this into a new document in Notepad or any simple text editor.  Go to a new document in Notepad and then paste, CTRL-V.

  Save this file in a new folder within your web site, but not in the images folder.  Call this new folder  "css"    and save the file there and name it   "main.css"

  The folder and file can be called anything we want but these names are fairly common and self explanatory.

  Now back in the music page, there’s no CSS, no Internal CSS.  We cut it all out.  So remove the lines that have to do with “style” that are still there and put the following code in place of where all the style rules used to be, inside the head but after the title:

   

  <link href="css/main.css" rel="stylesheet" type="text/css" />

   

  So now the beginning of the web page looks like this in the HTML code:

   

  <html>

  <head>

  <title>My Favorite Music</title>

  <link href="css/main.css" rel="stylesheet" type="text/css" />

  </head>

  <body>

  Now save the music page and watch things carefully now in the browser as your refresh it (hit F5).  See any difference?  You shouldn’t or there’s something wrong.  Usually it’s a matter of misspelling a file or folder name, so check that carefully.

  And that’s it!  You’ve made an EXTERNAL CSS FILE and you really don’t need any internal CSS any more.  Perhaps you could use internal CSS if needed when you have to customize the CSS in any one particular page, but usually you can handle all that in the external file if you manage things correctly.
• Check for Understanding: - Check Understanding
  1. True or False:  It’s best for each individual web page of a web site to be unique in color, design, and theme to give the maximum feel of contrast across the site.
     Answer:  False
  2. It doesn’t make any difference what you call the initial web page of a web site.
     Answer:  False
  3. What should you name the initial web page in any given folder for our server and assignments?
     Answer:  "index.htm"
  4. What is the name of the folder for our CSS files?
     Answer:  "css"
  5.  What is the name of the external CSS file for this assignment?
     Answer:  "main.css"
• Demo/Modeling: - Demo / Modeling

  Now that you have external CSS you can make multiple web pages, multiple html files all resulting in similar styles and colors, unifying the site with a thematic approach.  We’ll do that now with the music page, saving it as   "index.htm"   and again another page as   "school.htm"  resulting in a web site of three uniform  pages.  "Index.htm" will be all about you and your family.   "School.htm" will be all about this school.

  But wait!!! What about those three statements in the leftsidebar?  Those are going to be links to your three pages.  So let’s change those into links now so we don’t have to edit all three pages of links individually.

  Change the H2 heading “Me” in the leftsidebar to link to a relative web page called  "index.htm".  It should read like this now:

   

  <div id="leftsidebar">

      <h2><a href="index.htm">Me</a></h2>

   

  Now do the same for “school.htm” and “music.htm”  Make those headings into similar links.

  Now let’s make the "index.htm" and "school.htm" file in merely a few seconds.  I’ll show you how, then you’ll do this on your own.

  Take "music.htm" and save it as "index.htm" in the same folder where the music file was.

  Then take that resulting file and save it as  "school.htm"   in the same folder.

  And that’s it.  You now have three web pages.  But we need to edit them.  SO “have at it,” editing the three web pages, only changing the headings and paragraphs of the “maincontent” division.  Leave everything else alone.

  One word of caution:  Do NOT share any personal information by which a person could identify you personally and find you.  Do not share your full name, your address, phone numbers, etc.

  Once you have a full page about YOU  and one about YOUR SCHOOL you can have the fun of changing the CSS for the entire site in as many ways as you would like.  Make a change to the background picture in the "main.css" file for instance.  Save the CSS file and then refresh any one of the pages in the browser and click through to all the pages in the site.  All pages should change.

  As time allows, change the background, colors, borders, etc.

  If time allows, insert a picture in your “header” so that your picture is in all 3 pages.  You could even change the background of the header in the CSS to have your picture in the background of the header but not repeating that picture.  See the www.w3schools.comweb site for help on making a background not repeat.   We suggest you not use a personal picture of yourself to protect your privacy.
• Guided Practice: - Guided Practice

  Students will now save their "music.htm" as "index.htm" and "school.htm" and then edit the pages as needed in the maincontent division.  They will fill the page with enough information as required by the teacher, usually one full screen in the browser.

• index.htm [ Download ] "index.htm" A page all about YOU with a reference to an external CSS file
• music.htm [ Download ] "music.htm" with a reference to an external CSS file
• school.htm [ Download ] "school.htm" A page all about your school with a reference to an external CSS file
• clouds.jpg [ View Image ] [ Download Original ] "clouds.jpg", the background file to be saved in the "images" folder.
• main.css [ Download ] "main.css" An external CSS file. Place this file in a folder next to the images folder and other htm files. Call the folder "css" and place this file in there with this name "main.css"