• Course Information
• Readings
• Schedule
• Assignments
• Resources
• Technology
• Errors and Feedback

 

Unit 5: Building websites; Part 2

 

  1. Working with Javascript and CSS

You have now learned to create three types of websites:

Template driven systems that do all the work for you;
Sites that require you to write all of the html for each page;
Sites that use server side includes which reduce development time and allow you to make site-wide changes with relative ease.

Next we will learn how to make a web site interactive and to use style sheets to format and edit your pages with relative ease.

One of the reasons that website development exploded in the past decade is that much of what you find on the web can replicated with relative ease. If you find something that you like in a traditional website (i.e. one not developed in Flash), you can view the code used to create that page: Simply right-click on a page then select View Source (or something similar, depending on the browser) and the code used to make that page will often appear. Once you are familiar with html code, the process of coping, pasting, and extending the code becomes routine.

In the following sections we will examine Javascript and Cascading Style Sheets. When you know a little more about these topics, the code can be modified and integrated into your own site.

  • Javascript

    Although writing Javascript is complex (and we will not attempt to do so at this time), re-using Javascript is straightforward. .

    To use Javascript: Conduct a Google search for the term "javascript".or "free javascript code". Inspect a number of javascript sites, then download and place the Javascript code in your own web pages. You will find that many sites include directions for how to use their Javascript in your projects. The process involves copying/ pasting Javascript code into the <HEAD> </HEAD> or <BODY> </BODY> tags of your web page.

  • Cascading Style Sheets (CSS)
    • Begin by wathching the following set of videos on the PSU Ask Lynda site: CSS Fundamentals -- chapter 1 (videos 1 - 8). These videos will give you an excellent introduction to the basics of using CSS.

    • If you are using an html page, you can use a STYLE tag in the head of the document (i.e. between the <HEAD> and </HEAD> tags). The following example defines a new style (a:hover) that creates a 'hover' state over all anchor tags (i.e. <a> </a>).

      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>CSS Demo</title>
      <style type='text/css'>
      a:hover {
      color: #FF0000;
      padding-bottom: 2px;
      border-bottom: dotted 2px #930;
      }
      </style>
      </head>
      <body>
      <a href="http://cnn.com">CNN</a>
      </body>
      </html>

      or

    • If you are using SSIs, place a STYLE tag between the #INCLUDE# directives, and before your html content

    <!--#include file="source/pagetop.html-->
    <style type='text/css'>
    a:hover {
    color: #FF0000;
    padding-bottom: 2px;
    border-bottom: dotted 2px #930;
    }
    </style>
    <p><a href="http://cnn.com">CNN</a></p>
    .
    .
    .
    <!--#include file="source/copyright.html-->

    or

    • You can import your CSS from a text file. For example, if you place a style into a text file titled 'myStyles.css' and store the file in a folder titled 'source' you can use a STYLE tag in the head of the document (i.e. between the <HEAD> and </HEAD> tags)

    <LINK REL=stylesheet TYPE=text/css href="styles/css_demo.css">

The previous examples illustrate how to style all of the tags within a document. That is, after creating a style with a:hover, all anchor tags within the page would behave in the same way. An alternative approach is to define and apply styles individually to tags. For example, the following code defines a style: sidemenu.

.sidemenu
{
font-size: 10px;
line-height: 16px;
color: #2D210E;
font-family: verdana, arial, helvetica, sans-serif;
margin-left: 10px;
color: #2D210E;
text-decoration: none;
}

To apply the style, embed 'class= sidemenu' within a tag as illustrated below:

<a class=sidemenu href=index.html>Course Information</a>

  1. Below are a few styles that I used when designing this page. Try them out for yourself or do a Google search for "sample css" to access examples of css that you can modify and include in your own websites.

.title {
font-size: 13px;
line-height: 13px;
color: #2D210E;
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
margin-top: 9px;
margin-bottom: 0px;
}

.main {
font-size: 10px;
line-height: 16px;
color: #2D210E;
font-family: verdana, arial, helvetica, sans-serif;
}
hr
{
color: #E4E2DF;
width: 580px;
height: 5px;
}
p {
font-size: 11px;
line-height: 11px;
color: #2D210E;
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 0px;
}