So far

Reviewed CSS Added a table

3 rows Copy/paste from course syllabus

Anchorsandlists.pptx 01/22/2016

Overview• Create a list of projects we will create throughout the remainder of the course• Use null links• Use Photoshop to create a banner• Discuss 2 color models• Create a 3-row table

Add ordered list

Use <ol> One <li> for each project we create Start with null links Q: How do we format/show/indicate a null link? Q: Were does a null link send the viewer?

OL (bullets or numbers as the list items?)

Open index.htm from previous module (htmll-2-1) Or download and change myIndexv2.txt to htm extension, save in JMA260

Add <ol>

Add a <li>

links

Make the <li> s be links

<li ><a href=“#”>About Me /a> </li>

Copy and paste 9 times

Add null links, plus <li>s

Use copy/paste

Paths

Absolute and relative Absolute: The complete URL, starting with “http://www.....

Rule: Use complete (absolute) paths when the destination page is outside your pub folder, if inside pub, we use relative paths

Row 3

Save and render: should be on USB

Publish

i.e. copy index.htm, USB to pub/jma260

test

Banner/Photoshop

We need 4 colors: We need four colors that “go together”:

The banner’s background color The banner’s text color the html body’s background color, body text..

We also need to create the actual banner. Use Photoshop to create the banner, color.adobe.com to choose the colors.

See link to the adobe site

10 points

List your name What are 4 analogous colors (in RGB format)to #efeffa (5 points) Complementary colors to efeffa? (5 points) Hand in Friday

Photoshop

Edit/create raster, bit mapped, images Limited ability to enlarge or shrink

Color Models

RGB CMYK

RGB

It uses varying amounts of Red, Green and Blue. Each color values range between 0 and 255. Using base 16 (hexadecimal), the values the RGB values range between

0 and FF. A hash tag indicates that the specified value is hexadecimal

0-9, A,B,C,D,E,F

Another color model:CMYK

The other model uses percentages of Cyan, Magenta, Yellow, and Black. Each model has a set of colors it can display; it’s called the gamut or.

color space Choose RGB if for Web. RGB; gamut larger than CMYK, which is used for

print

My Selected colors

Colors I selected Text on the banner #EFEFFA Banner Background #9DB2F3 Body Background: # EFEFFA Body Text: #666666

The basics

Start Photoshop (64 bit) File>New>name it Banner Width: 1024 pixels Height: 65 Background: Transparent:, Resolution 72 ppi (pixels per inch)

Opening window

Preferences

2 columns Workspace—essentials

Note small white triangles on some tools

Layers What are they? Show panel

Layers Rename Layer 1 to Banner by double-clicking it, and specifying the

new name Analogy

Transparent sheets of plastic Each having a single shape

Coloring the banner

Double-Click the Set foreground color tool,

Recall my selected banner color was #9DB2F3 Type that into color picker: (Don’t need the “#”)

Colorizing…

Click with Paint Bucket tool May hide under gradient

Layer Effects

Click fx in Layer panel

Fx…

Choose bevel and emboss: Check Preview Make adjustments as you see fit

esp Size

Add text

Select Type>Panels>Character Panel:

My selections:

I chose: Trajan Pro Bold , size 48 points (pixels) Q: ppi? #efeffa as the color Click OK

Add the text

Use horizontal type tool Type Your name , then vertical bar then Digital Portfolio

Q: What’s wrong? How fix? (Might find move tool useful) Watch what layer you’re on at all times Note the new (text) layer

Contrast Using Drop Shadow

Want text and banner to use contrasting colors… complementary colors OR, choose layer styles (fx) and choose drop shadow

Experiment with the parameters Try it on your own, now

Contrast via stroke

Put stroke on outside of each characater

Add contrast via stroke

Save so we can use on our index.htm pagesave 2xOnce as psdThen as one of the following:• Gif• Png• jpg

• On your own: Add a 1 px stroke (border) around the text• Choose to add the stroke to the outside of each character

Graphics formats

Three basic graph formats for Web GIF Jpeg Png (8 and 24) Tiff for print

GIF

Only 256 colors OK for graphics (banner probably OK as GIF) Handles transparency

jpg

Also jpeg 16 million colors

For photos on Web Some compression (lose some quality)

Note, also tiff, for print With, without compression

Png: Portable Network Graphics

8 bit is 256 colors Png 24; 16 million colors Png 8

Default for Photoshop

Back to photoshop…

Will save as a Photoshop Document (psd) Q: Why the psd? And png 8 Save in JMA260/Images as banner.png and banner.psd…

Save #1

Choose File>Export>Quick Export as png

Save #2

File>Save Save in JMA260/Images as banner.psd

Adding to index.htm

Replace the first row with:<tr><td><img src="images/banner.png" width="1024" height="65" alt="banner for Joe Smith’s banner“/> </td></tr>

Use the banner for our index.htm

Modify the index table, row 1 to include the png version of the banner

Rendered version

END