Notes 10/6

IMPORTANT CONCEPT = lots of html pages, 1 style sheet

If you don’t know whats going on…. right click on, inspect (on actual internet html page)

  • roll over elements on right to highlight what you are working with
  • if you eliminate height, size will adjust to content

 

Main itself exists as html. Main left is made-up. Whenever you make something up, in style.css you must call it a class (.main)

name gallery images “thumbnails”

alt =  (is a descriptor)

I. Events Page Cont.

Source Code: (as many images as you want)

Screen Shot 2016-10-06 at 9.55.59 AM.png

Style.css:

Add main ul and main li …. adjust padding, to center images, adjust margin of main ul

Remove height (//) in both main & container to fix pictures overlapping page — check to see if it breaks code on other pages!

Screen Shot 2016-10-06 at 9.47.16 AM.png

II. Add page links to event page thumbnails

Copy menu page and rename “event 10_04” (basically creating a new event sub page), repeat for each event thumbnail (event 10_05…..)

In photoshop, create (600px height event images), export as JPEG @ quality 60% to “images folder” as event1_600.jpg

Screen Shot 2016-10-06 at 10.39.35 AM.png

Event 10_04 Source Code: 

Add 600px image to new event 10_04 page

screen-shot-2016-10-06-at-10-55-18-am

Event 10_05 Source Code:

screen-shot-2016-10-06-at-10-55-41-am

Event Source Code:

Link thumbnail to new html sub page event 10_04 — using <a href=>

Link thumbnail to new html sub page event 10_05

Screen Shot 2016-10-06 at 10.55.53 AM.png

 

Style.css:

Screen Shot 2016-10-06 at 10.58.51 AM.png

Screen Shot 2016-10-06 at 12.38.00 PM.png

Advertisements