HTML2revised.docxjma260rev 09/09/2015

Review so far

What we’re doing is working locally, saving to USB device, testing, and then “publishing”; sending (FTP or drag and drop) the html and image files to the server (somewhere inside our pub folder)

Recall our goal: a Digital Portfolio, something like this

  • Open your currentUSB index.htm page in Notepad(The last index page you saved in the previous class, HTML basics):

Add styling:inside <head>

<style type="text/css">

body {font-family: "Gill Sans MT",verdana, sans-serif;

color:#666666;

background-color:#cccccc;

}

h1 {font-family:verdana;

font-size : 2em;

color : #087368;}

</style>

Next up: Creating AnOrdered (and unordered) list of class projects

The previous module showed that we can create lists preceded either by bullets (called unordered lists) or with numbers (ordered lists)

We’ll put our (ordered) list inside the second row, right after the paragraph we extracted from the syllabus, but before the </td>.

Note:olstarts the list, </ol ends the ordered list. Each item in the list has an <li> (list item) </li>associated with it

  • First listitem will be a link to an “About Me”,page, so add a start tag for the ol element, an end tag /ol,as well asa single <li> and/li> with About me as content:
  • Type the ol>…and <li >lines now

Here is mine:

We will be using NULL links for now. Replace later.

Current index page :Use of <ul>

  • Save and test it
  • See the result of using <ol
    Note: If you had changedolto ul, bullets, not numbers, would display
  • Modify your <li>lines:

The list will change as we go through the semester, and we’ll update index.htm using Dreamweaver.

  • Save and then test

Links and paths

Links can be relative (to pages inside pub) or absolute, outsidepub

Let’s made the last two items JMA260,andDuquesne University, useabsolutepathlinksbecause they are external to ourpub folder. For those, we usean absolute path (i.e. a complete URL) for them…starting with The others will (eventually) use what are called relativepaths.

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

Example: Create an absolute pathlink to Duquesne University

Remember:

  • <a is the open tag
  • href is an attribute of the <atag; a name, an = and a quote enclosed value
  • Create an absolute pathlink to the JMA260class website
  • The href value would be:

“

  • You finish it
  • Save and test

Null links

We had nothing to link the other li’s to as of yet, so for them we usednull links.

Recall the format is:

a href="#">Text for Link</a>

We wanted the links to be inside the list items…i.e.. Something like this:

<li> <a href=”#”>Text here</a<li>

Adding a Copyright Symbol, your name and an email link insideRow 3

We need to let the viewer know when the page was made and who made it---. We also want to copyright our work. To add a copyright symbol, enter&copy;followed by the person/organization copyrighting the page.

  • Delete thenbsp;.
  • Add &copy;YourName…see below
  • I wrapped the copyright line inside a paragraph: I also added an email link:
  • Save and test
  • Result:
  • Email link won’t work in our labs because there is no default email program, but will on most computers
  • If it workedyou would get a dialog box for the email link
  • Drag or FTP index.htmto your Z: driveJMA260 folder
  • Test using a syntax like:
  • Or select your name in the schedule page.

Next: a banner in Photoshop (For row 1)

We eventually need four colors that “go together”: a banner’s background color, banner’stext color and the html body’sbackground color, and body text.. We also need to create the actual banner. Use Photoshop to create the banner, color.adobe.com to choose the colors.

Photoshop Briefly

Photoshop creates/editsraster graphics (a.k.a. bitmap graphics;difficult to enlarge, shrink graphics; pixel-based)

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.

White, Gray, Black colors

If you want a white banner, you specify maximum amounts of Red, Green, Blue: #FFFFFF (alsoin decimal: 255 255 255)…upper case, lower case OK.

Use the identicalRGB values to create a gray color, #C0C0C0, for example. Use 0 0 0 for black. For other colors, specify varying amounts of Red, Green and Blue.

Two Color Models

  • There are two color models: RGB and CMYK ... we just saw RGB. 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 gamutor. color space
  • Choose RGB if for Web. RGB; gamut larger than CMYK, which is used for print.

Color Picker

  • Once we select a color, we will enter its value in a PhotoshopColor Picker:

  • I finally chose:

for me:

  • Text on the banner #EFEFFA
  • Banner Background #9DB2F3
  • Body Background: # EFEFFA
  • Body Text: #666666

Note: Body Text and Body Background were your two colors from color.adobe.com

For more instructions on color, see: )

The tutorial shows how to use your phone to select colors based on the colors on your phone

Back to Photoshop

  • Start Photoshop (64 bit)
  • File>New>name itBanner
  • Width: 1024pixels
  • Height: 65

Note: The trend is to design for phone, tablet pages… that resize themselves,…, so the banner will change sizes as needed: Called responsive. Also, you can change these values to suit your own requirements.

  • Background: Transparent:,
  • Resolution 72 ppi (pixels per inch)

It’s easy to forget to set units to pixels:

  • Click OK

I like to set the toolbox to be 2 columns wide:

Note small arrows on many tools?  More tools are hidden and are revealed if you click the white arrows

  • I selected the Essentials workspace:
  • Then, I selectedReset Essentials

From now on, you only need to select Reset Essentials

  • Open/view the Layerstab:Window>Layers or select it from the panel on the right

Note: As you will see, we create Photoshop images as a series of layers with different content in each layer

  • Rename Layer 1 to Bannerby double-clicking it, and specifying the new name

Note:

Layers analogy

  • Pretend you have 4 clear sheets of plastic.
  • Sheet 1 has a tree
  • Sheet 2 has a person
  • Sheet 3 has a car
  • Sheet 4 a house
  • Now, we want adifferent tree We would only need to change one “layer”. Versus if we had one sheet with everything on it
  • You would have to redraw everything!

Coloring the banner

  • Double-Click the Set foregroundcolortool,

The color picker opens: We want to apply the color we selected.

  • My color valuewas#9DB2F3

And you should see:

  • Click OK
  • Select the Banner layer. If you don’t, you will receive a message saying you need to select a layer before coloring it.
  • Click the PaintBucket Tool: (may be hiding under gradient tool)
  • Click the banner to color it

Bevel and Emboss: Layer Styles; fx

Layers can have special effects (Layer Styles) applied to them. Use the fxbutton to manage these effects.

  • With the Bannerlayer selected, chose theLayer Style tool (fx) in lower right corner
  • Choose Bevel and Emboss(Makes things look 3 dimensional, by adding highlights and shadows)
  • Set the size to about 13px
  • Click OK

Result:

Add the Text

Need to specify font, font color, and font size: The Character Panel

  • Select Type>PanelsCharacter Panel:

…to reveal the Character panel.

  • Enter the content as defined below:
  • Choose a font; (I chose Trajan Pro Bold, a size 48 points (pixels)… and a color… #efeffa as the color
  • Click OK
  • Click theHorizontal TypeTool:

Type: Your name, then the vertical bar and Project Portfolio:

The text (your name) may not fit. If so, change the size of the font

Use the Move tool to move the text around:

  • Change your mind and instead Choose GeorgiaBoldas the font ( a serif font)
  • Move the text (Move tool, plus arrow keys)

Note there is a new (Text) layer

Add a drop shadow to the text

  • Select the text layer (your name)
  • Choose the fx button in the Layer panel, then Drop Shadow

Try these values:

Here is mine:

Add a stroke (border) around the text

  • Select the text layer
  • Click fx
  • Choose Stroke
  • Use these values:
  • Close the window
  • Use Move tool (plus arrow keys) and push the text towards the right
  • Use the arrow keys (called nudging) to move the text a pixel at a time

Optimizing for the Web

  • Choose File>Export>Quick Export>Quick Export as PNG:
  • Save in jma260/Images

Now, let’s modify our index.htm page to include the image

  • Modify the index table, row 1

Render

Notes: Be sure that you spell the banner name EXACTLY as you did when you saved it.

Normally the page renders faster if youspecify width, height attributes. The page will allocate enough space to hold the image, otherwise browser has to figure this out and page is slower to display.Responsive pages scale, in that case do not specify height and width.

  • Test and save
  • Drag/FTP the following to your networkpub/JMA260folder:
  • Theindex.htm page
  • The banner into Images

Test:

Or click your name on the class site.

END

HTML lists and bannersPage 1