• Latest
  • Trending

Web Development for Music Educators pt 2

June 1, 2006

Ensemble Sound – Simple Steps for MONUMENTAL Results!

July 18, 2025
Meet Chief Musician Noel Marcano By U.S. Coast Guard Band Staff

Meet Chief Musician Noel Marcano By U.S. Coast Guard Band Staff

July 17, 2025
ADVERTISEMENT
Marching Band Camp: 5 Pro Tips for Directors From WindConductor.org

Marching Band Camp: 5 Pro Tips for Directors From WindConductor.org

July 16, 2025
Making Hard Decisions as a Leader

Making Hard Decisions as a Leader

July 15, 2025
My Story

My Story

July 12, 2025
Doing Better Next School Year

Doing Better Next School Year

July 10, 2025
Bring Harmony to Your Classroom

Bring Harmony to Your Classroom

July 10, 2025
Composing for Middle and High School Choirs – A conversation with Laura Farnell and Reginald Writer – Part 1

How Choir Practice Builds Confidence in Middle School Students

July 5, 2025
I Love ASTA!

I Love ASTA!

July 3, 2025
Technology: DAW Bundles

Features You Must Have in a Small Portable USB Audio Interface!

June 28, 2025
Choosing the Right Microphone(s) to Record Your Choral Rehearsal

Choosing the Right Microphone(s) to Record Your Choral Rehearsal

June 28, 2025
Best Budget Microphones for High School Podcasting

Best Budget Microphones for High School Podcasting

June 30, 2025
Friday, July 18, 2025
  • Contact
SBO+
  • Departments
    • Concert Band
    • Orchestra
      • String Section
    • Choral
    • Marching Band
    • Jazz
    • Modern Band/Popular Music
      • Mariachi
    • Theater
    • Editorial
      • Upclose
      • Advocacy
        • NAfME Neighborhood
        • MAC Corner
        • MusicEd: Mentor Minute
      • Commentary
        • Bubbett’s Bookshelf
        • Leadership Tips
        • Perspective
        • InService
          • America’s Bandmasters
          • America’s Musicians
        • Tone Deaf Comics
      • Features
    • News
      • Headlines
      • New Products
    • Performance
      • Woodwinds
        • Wind Talkers
      • Percussion
        • GoodVibes
      • Repertoire
      • Playing Tips
    • Technology
    • Travel/Festivals
      • Fundraising
  • Current Issue
    • Past Issues
  • Awards/Entries
    • Teachers’ Choice Awards
    • 50 Teachers Who Make a Difference
  • Subscribe to SBO+
    • Subscribe
    • Login/Manage Subscription
    • Support
  • Advertise
    • Email PR!
No Result
View All Result
  • Departments
    • Concert Band
    • Orchestra
      • String Section
    • Choral
    • Marching Band
    • Jazz
    • Modern Band/Popular Music
      • Mariachi
    • Theater
    • Editorial
      • Upclose
      • Advocacy
        • NAfME Neighborhood
        • MAC Corner
        • MusicEd: Mentor Minute
      • Commentary
        • Bubbett’s Bookshelf
        • Leadership Tips
        • Perspective
        • InService
          • America’s Bandmasters
          • America’s Musicians
        • Tone Deaf Comics
      • Features
    • News
      • Headlines
      • New Products
    • Performance
      • Woodwinds
        • Wind Talkers
      • Percussion
        • GoodVibes
      • Repertoire
      • Playing Tips
    • Technology
    • Travel/Festivals
      • Fundraising
  • Current Issue
    • Past Issues
  • Awards/Entries
    • Teachers’ Choice Awards
    • 50 Teachers Who Make a Difference
  • Subscribe to SBO+
    • Subscribe
    • Login/Manage Subscription
    • Support
  • Advertise
    • Email PR!
No Result
View All Result
SBO+
No Result
View All Result

Web Development for Music Educators pt 2

June 1, 2006
in Technology
Share on Facebook
ADVERTISEMENT

 

As good as tables and frames are for improving the look of your Web pages, Cascading Style Sheets (CSS) are equally as important. A simple definition is that CSS is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. CSS gives you, the creator more control over the appearance of your Web page. CSS is an excellent addition to plain HTML. With plain HTML you manually define the colors and sizes of text and tables throughout your pages. If you want to change a certain element you will have to work your way through the entire document and change it whenever necessary.

With CSS you define the colors and sizes in “styles.” Then, as you write your documents, you refer to the styles. Therefore if you change a certain style it will change the look of your entire site. Another advantage is that CSS offers much more detailed attributes than plain HTML for defi ning the look and feel of your site. Finally, CSS can be written so you will only need to download it once – in the external style sheet document. When surfing the rest of your site, the CSS will be cached on the users computer, and therefore speed up the loading time.

But CSS is not just a method for controlling the look your Web site or just a tool for stylizing text. CSS is the “gold standard” tool for the design and structure of a Web site. Let’s get a bird’s eye view of the power CSS can provide through a properly built HTML site.

 

CSS Fundamentals
To start, let’s strip all design away from a Web site and look at raw site as a Web search engine (Web crawler) does: no graphics, no color, no java, and absolutely no Flash. The problem with many sites is that the most crucial information is most commonly conveyed as graphics (i.e. Logos, product names, etc.). What’s the reason for this? Plain HTML text just doesn’t look that sexy. Type looks far better stylized in a graphic, and yet even more fun in Flash! But this is all in vain if you don’t have enough scannable information, which Web crawlers can read. Lynx is a great tool for viewing a site via an Internet search engine (Google, Yahoo, etc.). If you don’t see what you want to with Lynx, then a Web crawler certainly won’t either. But this issue also extends beyond just catering to Web crawlers.

Many users viewing sites with their PDA, or dial-up users who are frustrated with loading graphics may opt to set their browser preferences to not load graphics in order to speed page load times. If your site doesn’t properly describe all of the necessary and important information using text and standard HTML tags, the end user may not “get the message.” Secondly, your information should be properly described and organized using HTML tags. The HTML code should be setup to allow the common tags (i.e. H1, H2, etc) to properly categorize what is the most important information on the page. A Web crawler will give more importance to information contained in tags versus tags. So imagine if all of your page’s information contains tags.

What is the most important info? It is impossible to tell! I’m sure you’re asking what all of this has to do with CSS. The answer is: A properly built and structured HTML page is necessary for creating an efficient and powerful style sheet. This doesn’t mean that additional HTML methods for page content organization aren’t allowed. With CSS, tags are your best friend, and a very necessary tool for setting up your content to be manipulated with CSS in order to achieve your desired look. Specific Examples This does not mean, however, that every bit of content that you want designed needs to be enclosed in tags. Visit: www.westciv.com – a site entirely stylized using CSS. For starters, notice the navigation buttons; examine the page source code. You will discover that these navigation buttons are simply built using and structure.

However, those navigation buttons don’t look anything like an unorganized list. They are specifically placed buttons with active rollover attributes, and best of all, perfectly readable by any Web crawler or user not loading images. Delve through the HTML code of this site to see how it is built and especially explore the CSS file that is referenced from the page (www.westciv.com/screen.css ). Take note how each of the different areas of the page are organized (the navigation, content, etc). Within the CSS, using IDs and CLASSes, the placement and look can be completely controlled using the CSS. Now try viewing the site using a text browser, such as Lynx. Notice that all of the information is still there, and still very well organized…just not as visually appealing.

But for all that westciv.com has going for it, they actually failed to address one issue. CSS standardizes how the page content looks between different browsers. The very unfortunate reality is Microsoft’s non-adherence to W3’s standards for application and execution of the defi ned rules that most other browsers (such as Mozilla, Safari, and even Netscape) neatly adhere to. To circumvent these differences between browsers and achieve consistency involves a little bit of trickery and exploring bugs with Microsoft Internet Explorer. A great source for the specifics on what to setup and how to apply can be found in Bulletproof Web Design by Dan Cedarholm, published by New Riders Press.

This is an excellent book that very thoroughly covers CSS for design along with addressing the issues discussed in this article. It goes in great detail on how to design sites that achieve the same look as many highly regarded and very attractive sites utilizing CSS, greatly simplifying the coding required and making site expansion or modifi cation incredibly easy.

For a good example of how CSS can improve your Web site, go to the Riverside County Law Library at: www.lawlibrary.co.riverside.ca.us/. Cascading Style Sheets (CSS) have the ability and power to do the same thing as complicated HTML or javascripts, but with much less coding and hassle. Also, where normal HTML coding is not cross compatible between different browsers (i.e. IE, Netscape, Opera, Firefox), CSS is recognized by all browsers. Recently, their Web master, Bret Christensen, discovered a CSS that acts as a mouseover but changes the color of the links. Instead of creating different images, he just inserted the 8-line CSS code for a nifty addition that is compatible with
all browsers.

On a personal note, CSS quite literally saves one’s life and sanity. When Bret finished the coding for all his pages, he did a quick check and noted that when he changed the font size, his Web pages just freaked out. By adding a simple CSS in the , he was able to avoid time consuming modifications to ensure cross compatibility between browsers. The only reason not to use CSS in your design is not knowing how! For excellent online tutorials to better understand CSS and its capabilities, go to: www.htmlgoodies.com/beyond/css/index.php, www.w3schools.com/css/ and www3.org/Style/CSS/learning. For more background on CSS style sheets, go to: www.w3.org/Style/ and www.sitepoint.com/books/css1/.

CSS Summary
To review, here are some advantages and reasons to learn CSS:

  • Write faster-loading, dramatically smaller pages
  • Speed up site maintenance by separating the content from the layout
  • Write device-independent pages that will work on everything froma PC to an Internet-enabled refrigerator
  • Write search-engine friendly pages that can actually be understood by search-engine crawlers.
  • Write more accessible code, which is now a legal requirement in some countries

Again, if you are a novice with CSS,I strongly recommend Bulletproof Web Design by Dan Cedarholm as a logical place to get started as well as giving you good ideas and background on CSS.

 

You may also like:

Technology: Music Ed Apps Setting up a music technology lab. The 2014 Best Communities for Music Education Default ThumbnailWeb Development Series Building Your Own Web Page
ADVERTISEMENT
ADVERTISEMENT

POPULAR STORY

  • 50 Music Teachers Who Make a Difference

    50 Music Teachers Who Make a Difference

    1358 shares
    Share 543 Tweet 340
  • When Selecting New Choral Music, Choose Success

    1294 shares
    Share 518 Tweet 324
  • Concert Band Set-up Fundamentals

    1093 shares
    Share 437 Tweet 273
  • The Immediate Threat to School Music Programs

    1008 shares
    Share 403 Tweet 252
  • TI:ME Announces Free PreSonus Revelator USB Microphone at 30th Anniversary Celebration at TMEA

    970 shares
    Share 388 Tweet 243
ADVERTISEMENT

SchoolMusic.Travel

Top 10 School Music Travel Destinations in the Northwest USA

Top 10 School Music Travel Destinations in the Northwest USA

Mountains, music, and vibrant cities — the Northwest offers unforgettable experiences for student groups. 🎷 1. Seattle, WA – Innovation Meets Inspiration• Why it’s great:…

Top 10 School Music Travel Destinations in the Northeast USA

Top 10 School Music Travel Destinations in the Northeast USA

From Broadway to Boston, the Northeast inspires music students with rich culture and iconic venues. From Broadway lights to historic concert halls, the Northeast is…

Top 10 School Music Travel Destinations in the Midwest USA

Top 10 School Music Travel Destinations in the Midwest USA

The Midwest is the heartbeat of America — and it beats in 4/4 time. The Midwest is the heartbeat of America — and it beats…

Top 10 School Music Travel Destinations on the West Coast

Top 10 School Music Travel Destinations on the West Coast

Coastlines, concert halls, and creativity — the West Coast delivers stunning performance opportunities. From iconic performance halls to scenic coastal venues, the West Coast offers…

Next Post
Web Development for Music Educators pt 3

Web Development for Music Educators pt 3

  • July 2025

    Articles | Digital Issue
  • June 2025

    Articles | Digital Issue
  • May 2025

    Articles | Digital Issue
  • April 2025

    Articles | Digital Issue
  • March 2025

    Articles | Digital Issue
© 2005 - 2025 artistpro, LLC
7012 City Center Way, Suite 207
Fairview, Tennessee 37062
(800) 682-8114

No Result
View All Result
  • Departments
    • Concert Band
    • Orchestra
      • String Section
    • Choral
    • Marching Band
    • Jazz
    • Modern Band/Popular Music
      • Mariachi
    • Theater
    • Editorial
      • Upclose
      • Advocacy
      • Commentary
      • Features
    • News
      • Headlines
      • New Products
    • Performance
      • Woodwinds
      • Percussion
      • Repertoire
      • Playing Tips
    • Technology
    • Travel/Festivals
      • Fundraising
  • Current Issue
    • Past Issues
  • Awards/Entries
    • Teachers’ Choice Awards
    • 50 Teachers Who Make a Difference
  • Subscribe to SBO+
    • Subscribe
    • Login/Manage Subscription
    • Support
  • Advertise
    • Email PR!

© 2005 - 2024 artistpro, LLC 7012 City Center Way, Suite 207 Fairview, Tennessee 37062 (800) 682-8114

Wenger EndurAd Promo