Small group worksheetLecture Code: 669314http://decal.aw-industries.com

Web Design:Basic to Advanced Techniques

Web Design:Basic to Advanced Techniques

Today’s Agenda Finish Old Quiz & Attendance

Announcements

Touch on Quiz #6

Small groups to do worksheet

AnnouncementsMini Project #3 – Part 2 due Tonight

Quiz #6 due Tonight

No HW over break!

Get Started on Final Project

Lecture Feedback Feature

JavaScript Next

Web Design:Basic to Advanced Techniques

Quiz #6Was hard.

A lot of freedom for implementationHaven’t had much experience combining all concepts from

classBut good – now we can address lingering issues with

XHTML/CSS this class

Brief tutorial online: quiz_6 tutorial.pdf under Assignments sectionBy brief I mean ~ 16 pages, but it is mainly examples of

code.

What was up with the buttons?All 4 buttons on one image

Why?Bottom set for :hover effectLess images means fewer images to load = faster!Since we’ll need all 4 images anyways we’ll just put

them together on one file and just transfer one fileHow do we just display 1?

Apply it to a block level element with height = ½ * height_of_image and width = ½ * width_of_image 30px by 87.5px, we round up to 30px by 87px

60px

175px

30px

87.5px

Buttons? HUH? O_oHTML

<a href="#" id="gallery-left”></a>

<a href="#" id="gallery-right”></a>

CSS#gallery a {

display: block;background-image: url(images/layout/gallery-buttons.png);background-repeat: no-repeat;height: 87px;width: 30px;

}#gallery-left {}#gallery-left:hover {

background-position: 0 -87px;}#gallery-right {

background-position: -30px 0;}#gallery-right:hover {

background-position: -30px -87px;}

Centering a DivHTML

<div id=“centerer”>

<div id=“toBeCentered”>

</div>

</div>

CSS

#centerer {

text-align: center;

}

#toBeCentered {

margin: 0 auto;

width: 1000px;

}

Small group worksheetLecture Code: 669314http://decal.aw-industries.com

Web Design:Basic to Advanced Techniques