Day 4

Today’s files

  • Getting started with Animal Info Page
    • Setting up files, reset stylesheet, etc. – start from scratch
    • Folder for images
    • Image file names
    • Keep track of sources
  • Layout – pp. 370-376
    • Columns with float
    • The clearing div
  • Image editing basics
    • Size of images
    • Basic editing
    • Saving images
  • Background images
    • CSS – ch. 16
      • background-image
      • background-repeat
      • background-attachment
      • background-position
      • background shorthand property
    • Useful tiling backgrounds at Subtle Patterns
  • Header images in CSS
  • Adding comments
    • HTML – <!-- comment -->
    • CSS – /* comment */
  • Site Setup
    • Access your DreamHost Web Panel
    • Turn off auto renewal
      • Billing & Account > Manage Account
      • Select credit card, then button to forget it
    • Make changes to FTP user
      • Users > Manage Users > Edit
      • Set User Type to SFTP User
      • Change password – this will be something you share with me

To do

  • Will have Tuesday to work on Animal Info Page – bring image files to work on if necessary
  • Animal Info Page due by noon next Thursday – use submission form

Day 3

Today’s files

  • Images
    • figure
      • <img src="" alt="">
      • figcaption
  • How websites work – Introduction
    • Domain name/web address entered into browser
    • DNS translates domain name into IP address
    • Browser uses IP address to connect to web server
    • Server sends requested webpage back to browser
  • Animal Info Page
    • Getting started
    • Saving images
    • Image sizes
      • Start as big as you can
      • Header and content images should start as big or bigger than the size of your container
      • Background images should be around 1,600-2,000 pixels wide (or any size if tiling)
    • Lynda.com free trial
  • Will check About Me Page before you leave

To do

  • Find content and images for Animal Info Pagekeep track of sources
  • Make sure to verify domain and make sure it is working before next class – if not you will need to contact DreamHost support

Settings and Extensions for Brackets app

Settings:

  • Under the File menu, check Enable Experimental Live Preview if you want to use a browser other than Chrome. Note that this may cause issues with Live Preview, in which case you will need to download Chrome.
  • Under the View menu, check Highlight Active Line.
  • Under the View menu, uncheck Live Preview Highlight. This can only be done while Live Preview is turned on.
  • Under the View menu, uncheck Lint Files on Save.
  • With a document open, click on Spaces: 4 in the bottom right corner to switch to Tab Size: 4.

Extensions:

Extensions can be added by clicking the brick icon along the right-hand side or choosing Extension Manager from the File menu. Search for the following extensions and click the install button.

  • Tabs – Custom Working will add file tabs along the top like in Coda.
  • eqFTP will connect to your web server and publish your files when you save them locally. We’ll go over this more in class.

Day 2

Today’s files

  • DreamHost
    • $29.95 for one year of hosting, includes a free domain name
    • Renews at a much higher price, so we will turn off auto-renewal in class
    • Do not use school email address
  • CSS
    • 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 below
    • Properties
      • Color – ch. 11
      • Text – ch. 12
        • font-family
        • font-size (in pixels)
        • line-height (in ems)
        • font-weight (bold)
        • font-style (italic)
        • text-decoration (underline)
        • text-align
  • Layout and the CSS box model – see below
    • divp. 187
    • Styling – ch. 13
      • width
      • padding
      • border
      • margin
      • Centering your div
        • margin: 0 auto;
    • Classes and IDs – pp. 183-184, 238
      • Spans with classes
        • <span class="..."></span>
  • Images
    • Naming
    • 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
    • Using Coda reference books (also, HTML and CSS versions on the web)

To do

  • Finish up About Me Page – will be due by the end of class on Tuesday
  • Buy hosting and domain name through DreamHost before Tuesday

CSS rule structure

selector {
    property: value;
}

CSS box model

CSS box model

Day 1

Today’s files

  • Introductions
  • Syllabus
  • Tools and resources
    • Textbook
    • Outside of class
    • Where to save files
    • Coda
      • Setting up a site
      • The basics
  • HTML
    • File structure – ch. 1
      • index.html
        • Previewing your page in a browser
      • Basic page structure
      • Elements made up of tag pairs – <tag></tag>
      • Occasional single tags – <tag>
      • Attributes – <tag name="value">
    • Elements
      • Text – ch. 2
        • <h1><h6>
        • <p>
        • <strong>
        • <em>
        • <hr>
      • Lists – ch. 3
        • <ul><li>
        • <ol><li>
      • Links – ch. 4
        • <a href="http://...">
        • <a href="mailto:...">
    • Miscellaneous
      • Viewing source code
  • About Me Page
  • DreamHost
    • $29.95 for one year of hosting, includes a free domain name
    • Renews at a much higher price, so we will turn off auto-renewal in class
    • Do not use school email address

To do

  • Work on content of About Me Page
  • Bring image file to use next class
  • Go to Hover and find a domain name you like that ends in .com, .net, .org, or .info (don’t buy from there)
  • Buy hosting and domain name through DreamHost