Class

Class on Tuesday 10.8.13 More Photoshop

Today we are going to quickly talk about cameras and images and then jump into Photoshop and learn a bit more about how it works.

Before that though I want to point out that there is now page navigation at the top of the page which has info about classes, the midterm and resources (which will continue to grow).

Remember that the midterm is due soon. I’m changing the due date to Thursday

Cameras and Images

http://electronics.howstuffworks.com/cameras-photography/digital/digital-camera.htm

http://www.dummies.com/how-to/content/how-does-a-digital-camera-work.html

Other links from class

Photoshop

I’m going to show you how to use some of the basics in class. But there is always more. You could do a few courses on Photoshop and photo manipulation. To see video tutorials on how to do what we cover today and more you can visit this offical Adobe video tutorial page:
http://tv.adobe.com/show/learn-photoshop-cs6/

Files

We will use these files:

PhotoFiles.zip

Other Resources

These sites have some other tutorials. There are literally thousands more on the web. Want to do something? You can probably find a tutorial on it.

Tool Basics

when you see two things with a slash A/B, A is the shortcut for Windows (WIN) and B is it for Mac OSX (MAC)

  • Rulers and Guides
    • showing ruler in px
  • Selection
    • Marquee Tool:
    • Using Shift, Alt/Option, Ctrl/Cmd to change selection
    • Antialiasing
    • Selection > Grow
    • Similar
    • Filling a selection Alt+Backspace (WIN) / Option+delete (MAC)
  • Zooming (Scrubby Zoom)
  • Layers
    • Create New
    • Duplicate
    • Opacity
    • Blend Modes
  • Move Tool
    • Moving items
    • Selecting Layers
    • Transform options
  • Color Dropper
  • Text tools

Using Guides, Selection and Fill to do Mockup of web site

We will look at how you can plan out your site using blocks with text inside of them.

Some people extend this and go so far as to mock-up the entire design in detail with full text, images and everything. This practice is becoming less common with Responsive Web Design because it is just too difficult to keep up.

Fun with Content Aware filling

If we have time.

Class on 10.3.13

Today we will look at the midterm requirements and then do some CSS Positioning.

 

Midterm Requirements

There is a new Midterm Requirements page.

CSS Positioning

I created a CSS Floating page.

We will use these files to explore basic positioning: 10.3.13_example.zip

It is set up to do positioning, but we will have to add in the CSS to make it work.

 

Class on Tuesday 10.1.13 CSS Navigation and Positioning

Today we are going to finish up with the CSS we didn’t cover on Thursday of last week.

I’m going to recommend that instead of continuing to use my example files that you work with your assignment files today.

Last class we went through much of what you need to know to complete assignment 3 The one thing that we haven’t covered yet is how to style the navigation. We will cover that today and then give you some time to work on your projects

Navigation

I’m creating a separate post on Navigation so you can come back to it easier in the future. All of the navs you do in this class, and on most web sites, will basically use this model.

Navigation Post

Defining Sections of the page

Now you have almost everything you need to present a complete web page. All you really have left are the header and footer elements to learn. I’ve created a post on what the basic sections of the page are

Basic Page Sections

Reading and Videos

Watch the second CSS Video: http://www.youtube.com/watch?v=TCj9S-6Avs8
This one covers the basic styles for text elements on the page.

Read these Chapters to learn more about styling elements with CSS.

  • 11: CSS color
  • 12: CSS Text styling
  • 13: CSS Box styling

Class on Thursday 9.26.13

Today we are going to continue our work on CSS but first we will talk about the assignment that is due on Thursday.

Details on Assignment 3

There are a few web design principles that are behind what I’m requiring for this assignment. We’ll talk about them briefly

  • Consistency and Repetition. When someone comes to your site it is good if it is clear that each page on the site is part of the same website. One of the ways you do that is to be consistent in the way you lay out pages and to repeat elements of the design. In the assignment that is seen in the requirements:
    • that you have the same h1 heading on each page (with the same text inside)
    • there is an image directly after the h1
    • there is navigation directly after the image
    • each page is centered
    • each page uses the same .css stylesheet
  • Usability. This refers to how easy it is for people to use your site. Following the guidelines of Consistency and repetition go a long way towards helping to make the site usable. Some of the requirements that help with usability are:
    • The navigation must be exactly the same on each page and come near the top of the page.
    • Not using a font-size less than 16px
    • The width of the page is not allowed to be too wide (makes it easier to read)
  • Scanability. This refers to how easy it is for peopel to recognize the various sections of your page so they can quickly understand what it is about.
    • Everything for consistency and repetition pretty much also applies to scanability. People will remember where things are on the page as they click through and not have to search as much
    • Adding space inbetween elements shows the eye that one section has stopped and the next is beginning. The sections of the pages for this assignment are heading, top image, navigation, main content

We will also talk about wireframes uploading and turning it in

CSS Continued

For this make sure you have the files from last class. If you don’t, you can download this file:100class_9.24.13_inClass.zip

We will continue to look into CSS. To make sure you have what you need for the assignment we will cover:

  • Setting the font-family
  • setting the font-size
  • The CSS Box Model: and go over block vs inline elements again
  • Setting padding and margins.
  • setting width of elements
  • Centering the page

I don’t think that we will get through everything listed here today. So whatever we don’t cover we will cover on Tuesday. The assignment isn’t due until the end of the day on Tuesday so you will have time to work on it in class and after class. I recommend that you get started over the weekend if you haven’t gotten started already.

Fonts

There are two basic things that you will want to style

  1. The font that is used
  2. The size of the font

font-family

You set the font with the font-family property. The value for the property is a list of fonts you would like the computer to use. The browser will try to use the first font in the list and if the user’s computer doesn’t have that, then will try the second and so on. Use quotes if the name has spaces. Here’s an example:

p{
    font-family: "Helvetica Neue", Helvetica, Arial;
}

So what happens if the users’s computer doesn’t have any of the fonts? What we do is specify one of five generic font types at the end and the computer will pick a font of that type:

  1. serif
  2. sans-serif
  3. monospace
  4. cursive
  5. fantasy

Something you will have to learn is the differnce between those and what fonts belong to which of the generic families. For the above example we would add sans-serif like so:

p{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

We will cover that in more detail in a later class. For now remember these guidelines:

  • most font’s are serif or sans-serif. Use these 90% of the time.
  • Fonts that look like handwriting or fancy old text are often cursive
  • fonts that are totally different with wild shapes and such are fantasy

You often learn at first by imitating

I would recommend at first that you use a site like this one: http://cssfontstack.com/
They allow you to copy
fonts and have thought about it a lot.

font-size and line-height

You set the size of the font with the aptly named font-size property. Here’s an example:

p{
    font-size: 16px;
}
Units

When you set a property like font-size you need to say what units you are using. For now, it’s easiest if you think in pixels which is px later we will learn some more units.

line-height

Whenever you set the font-size it’s a good idea to set the line-height too. This controls how much space there is between the lines. It is similar to setting single space or double space lines in MS Word, but you have more control. Line-height is one of the few that don’t need units. Most of the time just use a number between 1.3 and 2. Here’s an example:

p{
    font-size: 16px;
    line-height: 1.5;
}

The CSS Box Model

I’ve said it before and I”ll say it again: Everything on a web page must be inside of tags the other part to that is that visually, to the browser, all tags are boxes. To see that in action copy the CSS below and paste it at the very top of your styles.css file, then look at your .html page in a browser again.

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

There how that works. The * is called the universal selector. It selects all elements on the page. When you put in more than one of them at a time it it selects child elements.

Let’s look at this HTML as an example (we’re only including the body because you can’t style html and head elements).

<body>
    <h1>Heading</h1>
    <p> SOme text with <em>emphasis</em></p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>list item 3</li>
    </ol>
</body>
  1. The * is the first level, which starts with the body and includes everything else, so everythign would get a dotted red outline
  2. The * * would target just elements that were children of body and change their outline to dotted green. h1, p, ol in this case
  3. The * * * would target the elements inside of the previous elements and give them a dotted orange outline, em and li in this case.

So, once you get this example you are on your way to understanding:

  • Everything is in an element
  • Elements are boxes
  • These boxes(elements) can be nested inside each other
  • When one box is nested in another box, it is called the child element of that outside box and the outside box is called the parent element.
  • When we talk about layout, you will also hear the parent element referred to as the containing element because it contains the other elements.

Box Model Diagram

Open the link to this web site and we will see a visual diagram of how the box model works: http://www.redmelon.net/tstme/box_model/

This, http://www.w3.org/TR/CSS2/box.html, is the offical explanation, but may be a bit too complex for you right now. You may want to come back to it later when you have a more specific question about the model.

Block vs Inline

The final concept to get is that not all of the boxes are treated the same for each element. The two types are called Block and Inline. The basic difference is that

Styling the Box Model

Then you’re ready to learn the different properties

  • width
  • height
  • padding (can be set at once or for each side: top, right, bottom, left)
  • margin (can also be set at once or for each side: top, right, bottom, left)
  • border (can also be set at once or for each side: top, right, bottom, left)

For Inline elements you can only set:

  • padding-left
  • padding-right
  • margin-left
  • margin-right

Top and bottom padding and margin will not work and width and height settings wont’ take effect either. However you can change the

  • line-height

to make an inline element have a bigger height. I recommend not just randomly doing that but have a good reason and make sure you are targeting just the thing that needs more height with your selector.

Let’s look at an example. I have an element with a class of highlight. To give it a width and height of 200 pixels, add a 1px solid red line around the element and give it a 10px padding inside that border, you would write:

.highlight{
    width: 200px;
    height: 200px;
    border:1px solid #ff0000;
    padding: 10px;
}

A note about height
Generally you don’t want to set the height of elements. The content inside of the element will set the height for you.

Padding and margin use that number for each side of the box. You can also style each side individually. If I just wanted the padding and border on the top and bottom I could use:

.highlight{
    border-top:1px solid #ff0000;
    border-bottom:1px solid #ff0000;
    padding-top: 10px;
    padding-bottom:10px;
}

There are other ways to write this, which we will learn as we go along.

A note about border
Border might need a bit more explaining. It is a compound property that lets you set the border-width, border-style and border-color at once. You kind of need all three for a border to show so most people use border and then give a value for each one of those (order is not important). But to show you, both of the examples below are the same:

.highlight{
    border:1px solid #ff0000;
}

/* or */

.highlight{
    border-width:1px;
    border-stye: solid;
    border-color: #ff0000;
}   

Centering the page

To center the page we need to do two things to the body element (we use the body because it contains everything on the page):

  1. give it a width
  2. set the left and right margins to auto

Here is an example of setting 600 pixel width page that is centered:

body{
    width:600px;
    margin-left: auto;
    margin-right: auto;
}

You can also use shorthand with the margin property. That looks like

body{
    width:600px;
    margin: 0 auto;
}

The first number, 0, applies to the top and bottom margin and the second value, auto, applies to the left and right margins. You must use auto for the second value to center, but you can change 0 to another number, just don’t forget the unit value:

body{
    width:600px;
    margin: 50px auto;
}

Class on Tuesday 9.24.13

Here are the files we worked on in class: 100class_9.24.13_inClass.zip

Today we are going to start with going over FTP again (we didn’t really get to finish it fully last class) and then diving into CSS.

FTP

In order for people to see your files on the web, you have to upload them to a web server. To upload files we can use the FTP protocol. This a protocol like the HTTP protocol the browser uses but it is designed to upload and download files.

I have created a separate post on FTP with Filezilla you can read here.

CSS

Today we will really get into CSS. I will use

To give you a hands on introduction.

Other Materials

Class on Tuesday 9.17.13

This week we are going to focus on images. How to add them to your HTML file and how to do basic cropping and resizing in Photosohp and some of the concepts you need to know about what they are and how they should be used.

Old Business

At the beginning of class we will quickly go over the assignment and some HTML and using Blackboard.

Images

We will start on Tuesday with jumping right in and learning how to add images to a page and opening Photoshop and doing some basic image editing.

Images are covered in Chapter 5 in the book which you should read and will help if you forget how to do things we did in class when you get home.

There are also some supplemental materials the book provides that are helpful for this. I’ll link to those in the sections below.

Planning for Adding Images

Before you start adding images to your page you need to know at least a couple of things:

  • The dimensions you want for the image. This is the width and height in pixels.
  • What image you want on the page. If you don’t know that yet you will need the next section.

Finding Images

Sometimes you already have images ready before you start creating the page but often you need to find images. First let’s look at the type of images you might want to look for. Our book has a resource for this: http://htmlandcssbook.com/extras/choosing-images-for-your-site/

The book resource is great with helping to understand how images are used. The only problem is that the images shown are professional photographs and if you can’t shoot them yourself and don’t have the money to buy them then there is still often the problem of actually finding an image.

Creative Commons
In order to use an image on a web site you have to have permission from the creator of the image to use it. Formally this is a license (if a friend allows you to use an image at least have them send you an email saying it’s OK). The Creative Commons license is one image creators can give their images that allow people to use them and even edit them and manipulate them. Their website has a search that can be a good place to start looking:

Here are two other page with more information about what you can and can’t use and how to find images:


For the following examples you can use images you found while we were doing the Creative Commons search or you can download the following zip file and use images from that. They’re my images (a random set) and you can use them for class.

imagesForTesting.zip

Cropping and Resizing Images in Photoshop

There are two basic things you need to do to an image to use it on the web.

  1. Resize it to fit on the site.
  2. Crop it to the Aspect Ratio you want.

Both of these actions change the image’s Image Dimensions

We are going to explore what these are and how to do them in Photoshop.

The book as a tutorial on changing the image dimensions:
http://htmlandcssbook.com/extras/image-dimensions/

File Formats and Saving for the Web

After you’ve edited your image you need to save it in a format that works on the web. Photoshop’s native .psd file format won’t work. Generally you use one of the following 3 formats:

  1. JPEG (.jpg, .jpeg): These are used for photographs and images with a lot of detail and gradients.
  2. PNG (.png): This is used for images without a lot of detail like icons and text rendered as an image. The PNG format can also do transparent backgrounds in images.
  3. GIF (.gif): This is simlar to PNG but it is a proprietary image format.
More on GIF

Because this is proprietary (technically you have to pay a company to use the format) many people have stopped using it and use PNG instead. You don’t need to use it, but you should know about it and some people do because older browsers sometimes have trouble with PNG files (especially the transparency). Nowadays not many people use those browsers anymore. The other reason people use GIF files is to create animated gifs. Some links for those if you’re intersted because we won’t cover them in class:

Saving for the web

The book also has a tutorial on saving images out for the web which you can use:
http://htmlandcssbook.com/extras/resizing-and-saving-images-for-the-web/

Adding Images to Your HTML Page

Finally, we are ready to add an image to the page. The good news is that once you understand a couple of details, this is the easy part.

One thing to remember is that the image stays as a separate file and is not embedded in the page like MS Word might do. You can just tell the browser where to find the image and where it should add it to the page when it makes the page.

A basic image has these pieces:

  • img tag <img>: where you put this on the page tells the browser where to place the image
  • src attribute src=”images/cat.jpg”: this tells the browser where to find the image file
  • alt attribute alt=”dog chasing ball”: this is a text description of the image. Blind people and those with text browsers use this to know what the image is about. ALWAYS INCLUDE THE ALT ATTRIBUTE.

Optional

  • width attribute: this tells the browser how wide the image will be
  • height attribute: this tells the browser how tall the image will be.

Don’t use:

  • align attribute. We will use CSS for this instead

Absolute vs Relative Paths

The src attribute in the img element is where you tell the browser it can find the image. This is called the image path. There are two ways to do this.

A Relative path is directing how to get to the image relative to the current HTML page.

Examples:

  • file is in same place as html: src=”cat.jpg”
  • file is in folder named images: src=”images/cat.jpg”
  • file is in folder named animals that is in a folder named images: src=”images/animals/cat.jpg”
  • file is in folder named animals that is outside of your root folder where the .html file is: src=”../animals/cat.jpg”

To keep things simple we always use a folder named images that is in the same place as the HTML files and put all of our images there so the src is always src=”images/filename.jpg”

An Absolute path is a full url to an image on the web. It starts with http:// and if you put it in the address bar of your browser it would show the image.

Warning a common mistake when using some programs is that they insert an absolute link to a file on your hard drive. It will look somethign like:

src=”file:///C:/Users/Username/Desktop/cat.jpg”

This is not correct and won’t work. Change it to be a realtive link. You may have to move the file to your images folder first.

Example img elements

Relative examples

<img src="images/cat.jpg" alt="Picture of my cat fluffy">

<img src="images/dog.jpg" alt="My dog Fido" width="200" height="150">

Absolute example

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Iris_cat.jpg/320px-Iris_cat.jpg" alt="picture of orange kitten named iris being held in a hand">
<!-- iris uploaded by Alvesgaspar to http://commons.wikimedia.org/wiki/File:Iris_cat.jpg -->

Different people will require different ways of attributing an image. I used a comment here but a better way, if possible is to add text to the page with the creator’s name and a link to the original. We will look at that in another class.

Book Examples

The book also has examples from Chapter 5 of adding images. You will need to View Source or use the Inspect Element to see what the pages are: http://htmlandcssbook.com/code-samples/chapter-05/