About 75 other misc videos here:
Part 1 - 1 : (10:30)
- I downloaded files for lesson here
- Used a repeating x-axis image to create an infinate background for the hearder and footer.
- Has Dreamweaver but was coding by hand in a Mac program.
- Croped header out of .psp file and inserted, again hand coding angain with Mac TextMate.
Part 1 - 2 : (17:20)
- Inserting Nav bar with header image as a background.
- Is doing so with at <ul> list. Will make it sit as he wants with .CSS
- Block level, floated left (so inline), pushed down. In stlye.css : ul#nav li a {
- display: block ;
- width : 130px;
- float: left;
- margin-top: 168px;
- color: white;
- font-weight: bold;
- also added in ul#nav { list-style: none; - the got rid of bullets
- also added in ul#nav { padding-left: 125px; - move menu items left, he did this after adding the page wraper below.
- gave list items a 1.2em size
- got rid of text decoration (underline)
- gave nav links a hover and active states (10:45)
- Created a page wrapper (8:00)
- margin: 0 auto; centers
- Threw in some filler text into body.
- (13:10) Building footer
- Copyright and a few nav links
- Similar to the header.
- .css shorthand is like clock, top (12) - right (3)- bottom (6)- left (9)
- With all the hand coding, this one is a little tough to follow.
Part 1 - 3 : (32:00)
- Moved footer out of pagewrap.
- <div main-content>, <div left column>, <div right-column>,
- <div main-content>, padding at bottom, float left column left and set width to 530, float right column right, clear both (7:00)
- gibberish in left, right is currently blank
- Font size in 1.3em, line height 1.4, margin bottom, 0.8 em
- (9:00) header <h1>, 3.0em
- (10:30) sidebar, hex code with eye dropper for color for line at top, border-top 8px
- Cut and paste text out of photoshop for sidebar hearder <h2>
- Make right side bar text a little smaller 90%
- Padding to pull right side text down from border line
- Copying out of PhotoShop gave text problem charactors, copy clean text
- TV image in right sidebar, think of everything on page as blocks (19:00), could use negitive top margin to get tv antenna into text block above, use JPG for images with alot of gradients.
- (21:30) Remote controll on left. <div quick-jumps>, <span> bullets so that can .css them>
- Can float left within another float left within the main content
- made text upercase and bold with .css
- (25:00) making bullets <span> yellow
- made links black
- Style <h3> tags
- (28:00) adjusting colors
- (29:00) insert remote image as a background image to allow for it to spill over into text block. Add bottom of box, add padding, define height of box. Padding bottom 110.
Par 2 - PreQual (22:00) Creating a PhotoShop Document
- Restored a previous file using time machine on a Mac.
- Some of the layers and other aspects of the file I downloaded were corrupted, perhaps because made on a Mac
- Showed completed file then deleted it and started from scratch.
- (3:30) 781x536 size only because of screen cast size, this is not good for real life web design
- Made image smaller 736 x 500, then even smaller than that, I missed it
- (4:00) His default background is checkerboard grey and white, mine is white. Alt - Del to make forground color of black.
- My PhotoShop may work differently. For me, the background is locked and I could not figure out how to call up a layer style for it. Instead, I used a new layer for pattern.
- Choose background pattern. He had many more to choose from and just picked one that was close.
- Lightened buy using a white layer over top and then using opacity slider, Layer | Layer Style | Color Overlay | Slide bar back and fourth - but this gives haze and looses detail...so...Layer | New Adjustment Layer | Hue / Saturation (defaults OK) | Adjust lightness slider. A hue/saturation layer effect every layer beneth it including black background
- (7:00) Choose rounded rectangle tool | Set radius to 15 | create box mostly the size of the image inside the image, make white,
- (9:00) makeing tabs with rounder rectangle tool, I did not have a patten like his. Select black arrow tool then Alt-click tab to copy and drag to make new tabs. Can move individually by selecting layers. Total of 4 tabs.
- He is able to select multiple layers (tabs first) by shit-clicking and then he moves an align them with buttons at top which I can not figure out how to do with my version even thought I have those same buttons.
- I gave up, look for PhotoShop vids for V7.0
Part 2 -1 (22:00) Files here
- He likes to design in some other medium (PhotoShop) then start the web page by setting up the structure and finishing it by inserting text and images into that structure based on the photshop file.
- He does this all with DIVs:
- <div body>
- <div header>
- <div wrap>
- <div nav>, <ul>
- <p> for content, may come back and make <div>
- <div sidebar>
- <div footer>
- (8:00) Starting to chop up photoshop doc to pull out usable images for header - footer - and nav, likes have image right up against guides
- (10:30) Textured backgrounds blend with the eye even if they are not pixle perfect.
- (13:30) Use a good sized piece of background, his about 150x150
- (14:30) Went to a pre-made .css file with his basic set up or "Reset". This file is attached to exercise file.
- (16:30) Took full header wide in one image, play with formats and qualities for file sizes and best display.
- (17:20) changed mind about header div, deleted, stuck header image inside page wrap
- (18:20) Set page wrap width to width of header image, about 650. Narrow because screen cast resolution. My page will be wider.
- (19:20) Plugging his site and advertisers
Part 2-2 (26:00)
- Background and nav (no .css) done to this point.
- Create tab states, off, roll-over, and active
- In photoshop duplicate existing tabs once and drag below original tab layer, opacity going through another layer changes color some and he is going to use this for roll-over.
- Copy again and drag this layer above main content, change color to white. This will be used for active.
- Use slice tool - slices from guides to get tabs exactly the same size. Do same with tabs for other two sets of tab states
- (6:00) Create new image containing all three image for each tab stacked up vertically. Will use background-position .css to make appear the way we want on the webpage.
- (7:20) Repeat with other two tab sets, does need to be pixle perfect to this step.
- (9:00) back to code. .css for ul#nav
- display: inline
- ul#nav li a {display: block;}, and some other .css, in HTML give links classes, back to .css, set width.
- (15:00) Set roll-over position to center,center
- (16:00) Slice from photoshop for center of content area, content-background reapeat-y into wrap
- (19:00) main content <div>
- (20:30) Footer, crop out of photoshop, deleted earlier <div> and inserted into wrapper. Block element in wrapper so inherits width, set height and background image of what we just croped out of photoshop
- (23:00) Plugs