CSUMB-MIST
  • Home
    • Annotated Bibliography
    • Applications
    • Professional Organizations
  • Term 1A & 1B
    • T1. A. 501 Technology Workshop >
      • Set Up, ePortfolio
      • Audio / Video
      • Instructional Video
      • Interactive Video and Multimedia
      • Learning Management Systems
      • Tools- Research/ Searching
      • Webology
      • 501 Assignments
    • T1. A. 524 Instructional Technology >
      • Intro, ISD, Controversies
      • Behaviorism / Cognitivism
      • Constructivism
      • Performance/ Change Management
      • Views, Issues, Lecternnosaurus
      • Trends, Issues, Ethics
      • Current Issues/ New Directions
      • Wrap Up
      • 524 Assignments
    • T1. B. 522 Instructional Design >
      • Introduction, ISD Model
      • Needs Analysis 1
      • Task Analysis 2
      • Analysis / Design 1
      • Design 2
      • Asynchronous Seminar
      • Implementation / Evaluation 2
      • 522 Assignments
    • T1. B. 511 Writing Workshop >
      • APA / In-Text Citations
      • Evaluation APA/ Reference
      • Conjunction
      • Apostrophe
      • Annoted Bibliography
      • Implementation / Evaluation 2
      • Guides
      • Workshop Reflection
      • 511 Assignments
  • Term 2
    • T2. 520 Learning Theories >
      • Learning Theory
      • The Brain, Skinner
      • Robert Gagné - Information
      • Social Constructivism/ Metacognition
      • Inuit Holistic Lifelong L.M.
      • Albert Bandura
      • Motivation in Learning
      • Putting It All Together
      • 520 Assignments
    • T2. 531 Multimedia Tools >
      • Basics
      • Audio
      • Scripting, Editing, Titles
      • Framing, shots, and Movements
      • Preparation, Lighting, and Interviews
      • Theory and Copyright
      • Final Instructional Video
      • 531 Assignments
  • Term 3
    • T3. 526 Interactive Multimedia Instruction >
      • Authoring Software
      • Try it/ Guide me
      • Test me
      • Drag and Drop
      • Final Projects
      • Tin Can
      • Project Simulation
      • Audio / Images
  • Term 4
    • T4. 622 Assessment/ Evaluation >
      • Evaluation
      • Inferential Statistics and Evaluation Models
      • T-Test / Meaning of Scores
      • Data Collection Methods
      • Usability Test / Performance Assessment
      • Evaluation Data
      • Ethics, Bias, and Effective Evaluation
      • Data Analytics and Wrapping Up
  • Term 5
    • T5. 541 Multimedia Tools II: Interactive Media >
      • HTML5 / Common Tags
      • CSS
      • jQuery UI Lab 2
      • jQuery UI Lab 3
      • Storyboard/ lab 4
      • Local Storage Lab 5
      • Image Map/ Hot Spot
      • Final Project Description
      • 541 Assignments
      • checking_fluid_levels
    • T4. 626 Advanced Instructional Design >
      • 1 ISD Models, Team Projects
      • 2 Analysis 1, Needs Assessment
      • 3 Task Analysis, Content Types
      • 4 Assessments/ Testing
      • 5 Course Design, Lesson Design
      • 6 Development, Adding Activites
      • 7 Formative Evaluation
      • 8 Final Product
      • 626 Assignments
  • chat room
Picture

Multimedia Tools ll:  Interactive Media

Casading Style Sheets (CSS)

0   wk 1  wk 2   wk 3   wk 4  wk 5   wk 6   wk 7   wk 8   Assignments

Cascading Style Sheets (CSS)
IST:541. Term 5
Professor Miguel Lara, Ph.D.

Week 2 Objectives:

Cascading Style Sheets (CSS)
List of Content
Procedural Job Aid.  "How to Buy from a Vending Machine Tutorial"

Picture

Week 2.  Assignments.

Procedural Job Aid.
​How to Buy from a Vending Machine Tutorial
http://itcdland.csumb.edu/~dpayne/jobaid/index.html

Lab 2. 

Week 2 Topic.  CSS Rules-

  1. Body-  
    The first CSS Rule is the Body.
    body  {
    background:  #000000;    /* background color * /
    color:  #444;                        /* text color for whole document * /
    font - size:  12px;
    font- family; Verdana, Geneva, Sans-Serif;
    }

    "H1" and "H2" heading elements.
    h1,  h2  {
         text - align: center;     /*  centers h1 and h2 content   * /
    }


  2. Wrapper-
    #wrapper   {
    width:  900px;
    margin:  0 auto;  /* centers wrapper  */
    border:  solid 0px black;
    }

    To avoid having web pages with long lines of text, it is convenient to wrap the whole content of a web page within a div container and restrict its width.  

    To add a "wrapper" div container, add the following line right below to the >body> tag:
    <div id-"wrapper">

    Notice that id="wrapper" does not have the hash tag, however the CSS rule does.

    Close the wrapper container with the following line right before the closing </body>tag:
    <div>  <!--closing the wrapper -->

    Save the file and jobaid.css file and refresh / reload the index.html file in your browser to see the latest changes.  Explore changing the width of the #wapper and also the width of the border.


  3. .stepTitle-
    It has some padding, the text alignment is to the left, the font size is little larger (16px) and the font weight is bolder.  The dot is used when the CSS rule is applied to a class and the hash tag is used when it is applied to an id.  

    An id is used to distinguish unique HTML elements, use it when you want  to apply a specific style to just one element in the entire document.   A class is used when the same style is going to be applied multiple times.

    .stepTitle  {
    padding:4px;
    padding-top:10px;
    text-align:left;
    font-size:16px;
    font-weight:bold;
    border-top-left-radius:  10px;

    Another style that we are applying to the ".stepTitle" class is the "border-radius" to round the corners.  As seen in jobaid.html.


  4. .stepDescription and the .stepImage-
    They are class rules.  An important CSS rule in both of them is the "float:left".  In Web design a webpage with multiple columns must be surrounded by a div and each div must be floated, preferable to the left.

    Note:  When having floating elements, it is necessary to "clear" the floating after there are no more columns to be floated.  In the "index.html" document, the floating is cleared with the following line:

    <br style="clear:both">


  5.  Section 4:  Add the remaining steps

    Copy and past the stepTitle and stepContent div containers and be sure to include them within the closing </wrapper>. 

Reference:  Tutorials/Job Aid (Lara, 2016)

Payne e-Portfolio
Dana Payne

Testing the chat box widget from chatango.com
Titled ​Q&A
.

​​E-mail dpayne@csumb.edu

  • Home
    • Annotated Bibliography
    • Applications
    • Professional Organizations
  • Term 1A & 1B
    • T1. A. 501 Technology Workshop >
      • Set Up, ePortfolio
      • Audio / Video
      • Instructional Video
      • Interactive Video and Multimedia
      • Learning Management Systems
      • Tools- Research/ Searching
      • Webology
      • 501 Assignments
    • T1. A. 524 Instructional Technology >
      • Intro, ISD, Controversies
      • Behaviorism / Cognitivism
      • Constructivism
      • Performance/ Change Management
      • Views, Issues, Lecternnosaurus
      • Trends, Issues, Ethics
      • Current Issues/ New Directions
      • Wrap Up
      • 524 Assignments
    • T1. B. 522 Instructional Design >
      • Introduction, ISD Model
      • Needs Analysis 1
      • Task Analysis 2
      • Analysis / Design 1
      • Design 2
      • Asynchronous Seminar
      • Implementation / Evaluation 2
      • 522 Assignments
    • T1. B. 511 Writing Workshop >
      • APA / In-Text Citations
      • Evaluation APA/ Reference
      • Conjunction
      • Apostrophe
      • Annoted Bibliography
      • Implementation / Evaluation 2
      • Guides
      • Workshop Reflection
      • 511 Assignments
  • Term 2
    • T2. 520 Learning Theories >
      • Learning Theory
      • The Brain, Skinner
      • Robert Gagné - Information
      • Social Constructivism/ Metacognition
      • Inuit Holistic Lifelong L.M.
      • Albert Bandura
      • Motivation in Learning
      • Putting It All Together
      • 520 Assignments
    • T2. 531 Multimedia Tools >
      • Basics
      • Audio
      • Scripting, Editing, Titles
      • Framing, shots, and Movements
      • Preparation, Lighting, and Interviews
      • Theory and Copyright
      • Final Instructional Video
      • 531 Assignments
  • Term 3
    • T3. 526 Interactive Multimedia Instruction >
      • Authoring Software
      • Try it/ Guide me
      • Test me
      • Drag and Drop
      • Final Projects
      • Tin Can
      • Project Simulation
      • Audio / Images
  • Term 4
    • T4. 622 Assessment/ Evaluation >
      • Evaluation
      • Inferential Statistics and Evaluation Models
      • T-Test / Meaning of Scores
      • Data Collection Methods
      • Usability Test / Performance Assessment
      • Evaluation Data
      • Ethics, Bias, and Effective Evaluation
      • Data Analytics and Wrapping Up
  • Term 5
    • T5. 541 Multimedia Tools II: Interactive Media >
      • HTML5 / Common Tags
      • CSS
      • jQuery UI Lab 2
      • jQuery UI Lab 3
      • Storyboard/ lab 4
      • Local Storage Lab 5
      • Image Map/ Hot Spot
      • Final Project Description
      • 541 Assignments
      • checking_fluid_levels
    • T4. 626 Advanced Instructional Design >
      • 1 ISD Models, Team Projects
      • 2 Analysis 1, Needs Assessment
      • 3 Task Analysis, Content Types
      • 4 Assessments/ Testing
      • 5 Course Design, Lesson Design
      • 6 Development, Adding Activites
      • 7 Formative Evaluation
      • 8 Final Product
      • 626 Assignments
  • chat room