Agenda for Thursday, February 2

  • Updated schedule
    • (1) About Me Page and Animal Info Page due at the beginning of next class at the latest
    • (2) Progress Check 1 next class
    • (1) Single Purpose Site and (2) WordPress Site due Tuesday 2/14 at the beginning of class
  • (1) Hosting Check
  • (1) Single Purpose Site
  • (1) Process and Design – ch. 18
    • Process
      • Idea
      • Purpose/audience
      • Content
      • Wireframe/site map
      • Code/design first page
      • Code/design additional pages
    • Design
      • “It’s not just what it looks like and feels like. Design is how it works.” -Steve Jobs
      • Communicating through organization and prioritization
      • Visual hierarchy
        • Size
        • Color
        • Style
      • Grouping
      • Similarity
  • (2) WordPress
    • Working with the built-in JS menu

Agenda for Tuesday, January 31

  • (2) Work on WordPress Site and Independent Project
  • (1) Finish images and captions
  • (1) Layout – pp. 370-376
    • Columns with float
    • Clearing div
  • (2) WordPress Site
    • Site structure
    • Using pages versus posts
    • Understanding theme files
  • Hosting Check this class and next

Layouts for Animal Info Page

  • Red: header (image)
  • Orange: content (overview of animal)
  • Yellow: sidebar (interesting facts)
  • Green: footer

Agenda for Tuesday, January 24

  • (1) Hosting due next Tuesday – start now!
  • (1) Animal Info Page
    • Start with content
      • Title
      • Overview of animal
      • 4-6 interesting facts
      • Footer
    • Images
      • Header
      • 2 for content
      • Background
  • (2) Hosting and FTP setup
  • (2) WordPress Site
  • (1) Images and captions
    • Using classes and IDs – pp. 183-184, 238

Images

  • Images
    • Create a folder in your project for images
    • Image editing basics
      • Save the largest version of an image you can find
        • Header and content images should be at least as big as your container
        • Background images should be tiling or very large (1,600 pixels wide or larger)
      • Basic editing and exporting
      • Rename your images – lowercase, no spaces, etc.
      • Image formats
        • JPG – photographs
        • PNG – images with transparency
    • Background images
      • CSS – ch. 16
        • background-image
        • background-repeat
        • background-attachment
        • background-position
        • background shorthand property
      • Useful tiling backgrounds at Subtle Patterns
      • High resolution images at Unsplash
    • Header images in CSS
    • Images in content
      • Centering
      • Floating
        • float property with margin and padding as needed

Images with and without captions

To include an image in your HTML file, use the following code:

<img alt="Description of picture" src="image.jpg">

If you’d like your image to have a caption, use a figure element:

<figure>
    <img alt="Description of picture" src="image.jpg">
    <figcaption>Caption for picture</figcaption>
</figure>

You may wish to add a class to your figure element for easy styling:

<figure class="example">
    <img alt="Description of picture" src="image.jpg">
    <figcaption>Caption for picture</figcaption>
</figure>

You can then style your image and caption using .example, .example img, and .example figcaption in your stylesheet.

CSS Basics

View example in your browser or in Basecamp

  • CSS
    • Stylesheet and reset stylesheet
    • File structure – ch. 10
      • style.css
      • Link to in HTML – <link rel="stylesheet" href="style.css">
      • Import reset stylesheet – @import url("reset.css");
      • Rule structure – see bottom of post
    • Properties
  • Layout and the CSS box model – see bottom of post
    • divp. 187
    • Styling – ch. 13
      • width
      • padding
      • border
      • margin
      • Centering your div
        • margin: 0 auto;
  • Images
    • Resizing
    • Centering
      • display: block;
      • margin: 0 auto;
  • Miscellaneous
    • Links and :hover pseudo class
    • Styling lists – pp. 333-336
      • list-style-type
    • Styling horizontal rules
      • border
    • Viewing source code in a browser
    • Using Coda reference books (also, HTML and CSS versions on the web)

CSS rule structure

selector {
    property: value;
}

CSS box model

Agenda for Tuesday, January 17

HTML Basics

View example in your browser or in Basecamp

  • HTML file structure – ch. 1
    • Creating your first page
      • Name it index.html
      • Previewing your page in a browser
    • Basic page structure
      • Tags, elements, and attributes
        • Elements made up of tag pairs and the content between them – <tag></tag>
        • Occasional single tags – <tag>
        • Attributes – <tag name="value">
      • <body>, <head>, <title>
      • DOCTYPEp. 181
      • Character encoding
  • Elements
    • Text – ch. 2
      • <p>
      • <h1><h6>
      • <strong>
      • <em>
      • <hr>
    • Lists – ch. 3
      • <ul><li>
      • <ol><li>
    • Links – ch. 4
      • <a href="http://...">
      • <a href="mailto:...">
    • Images
      • <img alt="Description of picture" src="image.jpg">