U3 Day 11-13: PD Discussion Topic
I reminded them of the instructions they had to write for folding a piece of paper into a paper airplane. I told them to remember what it was like to know what needed to be done but without the right instructions, your paper airplane didn’t look like a normal paper airplane.
I like to lead a class discussion of the importance for consistency in the look-and-feel on a website that has many pages. I explain that css allows this.
This allows the designer to separate the style from the content. By using an external reusable code, there is consistency and the designer wouldn’t need to retype the entire content of the style each time they add a new page. At this point, the students can complete another html/css project from one of the selections (bulleted list) provided in the ECS curriculum guide.
I explained content vs structure.
Helping students understand the importance of organization as a way to increase their ability to keep up with their files is the argument I will make.
I tried to relate it back to school uniforms. Our school uniform policy is actually a CSS sheet…it dictates what all students should look like and applies the same settings to everyone. While you can differentiate with shoes or socks or a t-shirt underneath, the same set of styles apply to the whole population.
This other example I gave is that HTML is a skeleton, and CSS are the clothes we put on the skeleton to dress it up and make it look better. They seemed to like this metaphor and understand what I meant by it.
1 Like
Since it is the holiday season, I would compare the CSS to cookie cutters which make the cookie dough conform to certain shape rules. The HTML would be like the cookie dough, it is the content which the CSS forms into particular styles.
You want to keep the cookie cutters separate instead of being stuck on the dough. That way you can stay organized and can change out the cookie cutter designs easily.
In the previous discussion someone compared CSS to a contract. I can see that. When Web pages are linked to a CSS page, the elements or tags must uphold the contract by abiding by the style definitions in the CSS page.
Greetings
The easiest comparison would be food (ex. apples and oranges). Both are fruits and good for you but sever different roles. Files and directories to organize them is another. Even though you may have all of the material, if it is not organized where you can manipulate the information, it will not serve you well and efficiently.
I like the idea of explaining HTML files as the body of your web page and CSS as the outfits that you will put on the body. You keep them organized and separate to make it easy to try different outfits/styles on your webpage.
I attended our Saturday workshop and one of the participants has a visual of the various tags that was great. It illustrated what happens when you leave out the various header tags.
I love consistency. I come from a math background and remind the students to look for patterns.
I have assigned 3 largish programs. One with inline styles, one with internal style sheets and one with an external style sheet. We have done galerry walks and discussed what makes a site look good. After we have finished the last site we will discuss the more professional appearance of the external style sheet.
I would have show them the differences of usability and overall visual quality of Websites that properly and successfully us CSS vs Websites that do not.
What kind of comparisons can you come up with regarding the importance of separating html and css files for good design in maintaining a large website to share with your students?
When we dissected websites (by looking @ the source codes) that caught my students attentions, they quickly arrived at the conclusion that html was for content and css was for style. After making that observation… They looked at their storyboards and developed the CSS needs to craft the 3-4 page website projects they were working on with their partners then they added the content… It was a very natural process AFTER we dissected some webpages that caught their attentions. Comparisons were not needed…
Students are getting used to different file extensions such as .css and they are gaining valuable organizational skills. Our own website is being used as an example of html, css and javascript programming.
I use the same explanation that HTML is the body of the page and CSS is the formatting style. I pointed out to students that their formatting styles should show consistency.
I cannot think of a need for a comparison, my whole thought process is that if you have an external style anytime you want to make a style change you can do it offline and determine if there are any bugs in the code before implementing it. I hope I not wrong with my assumption, since this is relatively new to me.
I like this analogy, it relates to my school as well. I think I will use it with my students. Thank you