Free Web Development Training and Tutorials Blog




    



Reverse Animating a Movie

Here's a tutorial I just made, hope you guys like it. :) Title: Reverse Animating a Movie Description: This tutorial deals with reverse animating a flash movieclip. It uses a simple technique with minimal ActionScript . This tutorial assumes the reader to know about Buttons and Button actions, Motion Path, Paths to Object. Tutorial url: http://tutorial.templates247.com/tutorial1/ Thanks! Chris chris@templates247.com Templates247.com

[ more.. ]

Cascading Style Sheets Tutorial and Slides

Style Sheets, or CSS for Cascading Style Sheets, are sets of rules that allow you to control how your web document will appear in the web browser. CSS overrides the browser's default settings for interpreting how tags should be displayed, letting you use any HTML element indicated by an opening and closing tag (including the <p> tag) to apply style attributes defined either locally or in a style sheet. Style sheets contain rules, and a rule has several component parts. The first part of the Rule (<p> <H1>;) is called the Selector. This tells the browser which element on the page to work with. The curly bracket pair contains the Declaration, which is comprised of a Property (color) and a Value (#333333). Here's the basic syntax of a rule defined:

Selector { property: value }
Examples:
P {font-family: Times, 'Times New Roman', serif; font-size: 8pt; color: red; }
You can specify several properties on one rule:
H1 { font-family: Times, serif; color: black; font-size: 2em; }
You can group tags:
H1, H2, H3 { font-family: Times, 'Times New Roman', serif; }
You can also be very specific (contextual selector). In the example below, the rule will only be applied to emphasized text inside of a Heading1 tag. <h1>Heading <em>One</em></h1>
H1 EM { font-family: Times, serif; color: maroon; font-style: italic; }
To apply style sheets to an HTML document you can use a single linked (or external) style sheet. Use a single style sheet (in a separate file, saved with the .css suffix) to define multiple pages. A typical .css file is a text file containing only style rules (No javascript comments, no HTML or anything else, only CSS), as here:
P {font-family: non-serif; font-size: medium; color: red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}
To apply a linked .css style sheet ("stylesheetname.css" in the example below) to an HTML page, a <link> tag is added to the page header:
<link rel="stylesheet" href="/pathname/stylesheetname.css" type="text/css">
Creating a linked style sheet allows you to define your CSS rules in one place. Linked style sheets ease web page maintenance, reduce file size, and increase accessibility.

Why use style sheets?
  • create a set of web pages with consistent appearance
  • easier maintenance
  • separate page structure from page appearance
  • ADA compliance
  • reduce web page file size
  • reduce your reliance on non-standard tags such as <center> and <font>

The following CSS Tutorial Workshop and Slide Presentation, from West Virginia University, will teach you more on how to use and code web Style Sheets. The CSS workshop contains illustrated explanations and examples of the concepts being taught, followed by detailed learning activities.


Cascading Style Sheets Tutorial and Slides
  • Workshop Handout  [pdf, 11 pages, 145kb]
    • What are style sheets?
      • How CSS Works
      • Why use style sheets?
    • How to add style sheet rules to your web page
      • Linked or External Style Sheet
        • Activity 1: Apply a variety of external style sheets to the sample html file
      • Inline or Local Style Sheet
        • Activity 2: Add an inline style
      • Embedded or Global Style Sheet
        • Activity 3: Create a simple embedded style sheet
      • Text Properties
        • Activity 4: Add style rules to control text appearance
    • Margins, Indent, Alignment
    • Borders
    • Shorthand properties
      • Activity 5: Margins, Alignment, Indent
      • Activity 6: Borders
    • Class
    • Pseudo-class for links
      • Activity 7: Class and Pseudo-class for Links
    • Validation
    • Create different style sheets for print and screen
    • Using Style Sheets in Dreamweaver
    • References

  • CSS Workshop PowerPoint Presentation
  • CSS Workshop Data Files [zip]
  • Validate your CSS

Introduction and Intermediate HTML Workshop Tutorials

HTML stands for HyperText Markup Language, and is used for coding and developing web pages. It consists of ASCII text with special tags. The tags, which begin with < and end with >, are used to define the structure and appearance of the web page document.

Here are two HTML workshop tutorials (Introduction and an Intermediate), from West Virginia University. They review the HTML tags, give you an explanation of the tag, and show you how it appears on a web page. The introduction handout shows basic HTML topics such as paragraph and heading tags, lists, special characters, inserting hyperlinks, and images. The intermediate HTML handout covers colors, backgrounds, fonts, horiztonal rules, lists, tables, forms, frames, and meta tags.


HTML Workshop Tutorials


Free HTML Video Training

Here are 20 excellent new Video Training Modules that teach you some of the basics of coding in HTML to write and develop web pages, from learningelectric.com. These are totally Free and will teach you all of the many of the commonly used HTML tags. These free Access training videos are in Apple's QuickTime format, so you'll need to download QuickTime for free if you don't already have it installed.

20 Free HTML Video Training Tutorials


These Excel tutorials cover and teach the following Excel features and functionality:

Beginning HTML 
(10 tutorials)

Using HTML Font Tags (6 tutorials)

Coding HTML Hyperlinks and Images
  (4 tutorials)


Page :  1