This document summarizes the topics to be covered in the Web Technologies CS 382 lecture, including inspecting layouts, floating and positioning elements, different types of layouts, and creating layouts from wireframes or Photoshop files. It also outlines the structure of pages and elements, different style properties, and how to use floats, positioning, z-indexing, and fixed, fluid, elastic, and hybrid layouts. The lecture will involve creating a website project from a PSD file in Netbeans, writing HTML and CSS, discussing element classes/IDs and styles, and experimenting with positions, styling, and hovers. Students are given instructions on finding their PSD assignment and due date.

1. Web Technologies – CS 382
Lecture 2
3 Hrs

2.  Inspecting the layout
 How to represent in HTML
 How to find elements
 Floating, Positioning, Stacking
 Layouts
 Creating From wireframe OR PSD
 Shaking Hands with Photoshop
 And of course CSS …

3.  Structure of
 page
 Or even a specific element

4.  Structure of
 page
 Or even a specific element
 Styles of
 page
 Or even a specific
element
 Its structure is based on some
wireframe
 Style is upto designer ability to
visulize

5.  Float
 Values: left | right | none | inherit
 Default: none
 Inherit: no
 Always mention width of elements
 Clearing Floated elements
 Clear: both | right | left | none | inherit
 Floating multiple elements
 You can create columns using floats

6.  position
 Values: static | relative | absolute |
fixed | inherit
 Default: static
 Inherit: no
 Relative
 Move relative to original position
 Actual position is preserved as space
 Absolute
 Removed from flow
 positioned with respect to the
browser window or a containing
element

7.  Fixed
 Stays in document window even
scroll
 Specify using offset
 Top | left | right | bottom

8.  Z-index
 Values: number | auto | inherit
 Default: auto
 Inherit: no
 See page 367

9.  Fixed
 Fixed in pixels
 Scrolls when window get smaller
 Fluid (liquid)
 Adjust according to window
 % used
 Elastic
 Width change, element size change
 Em used
 Hybrid
 Combination of px, em, %
 See Chapter 16

10.  We will be creating today
 Open The PSD
 Discussion
 Run Wamp Server
 Create web project in Netbeans
 Write HTML
 Discussion
 Assign proper class & id to elements
 Write CSS (embedded)
 Discussion
 Be general like one rule all the things
 Positions (float & Clear)
 Style each element (header to footer)
 Hover affects
 Done

19.  Find PSD
 Apply formula to get your PSD
 Group# % 6
 Due Date
 16 Feb 2016 8:45AM
 Email: shehzadaslam@uet.edu.pk
 Subject: WT 2014-AS2
 Folder name must be group member rollnos
 Book Reading
 Chapter 15, 16 from Learning web design
 Chapter 17 for more visual affects if you want (DYS)