#14: Converting a Photoshop Mockup: Part Two, Episode Three
We wrap up the mockup conversion here in Episode Three. We create the “article area” and the “sidebar” (semantic class naming!), and then we clear the float. We use Firebug to steal the typography from the live CSS-Tricks. Then we fix up the header a little bit in Photoshop and use CSS Image Replacement for the logo.
Running time: 24 minutes
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)
Links from Video:
Get the Flash Player to see this player.
I've got a couple questions.
The first is why does the date say November 19th at the top when today is the 22nd, and you created that many months ago?
The second is why didn't you show us how to make it multiple pages so we can use the tabs at the top. I'm now going to try to do this for a while, but it would have been nice if you had concluded with that.
Besides that you did an awesome series, I watched them through to the end, and am working on my side now. Hopefully i'll be able to integrate some of this with that moo stuff and have it be crazy.
JonRWilson.com
The weird date is because I'm in the process of moving these video pages away from static pages like they were on into WordPress pages. The date is the day I created the WordPress page not the original date of the publishing. I didn't really think about that…. if I find some time I'll try to figure out those dates and adjust them.
Absolutely awesome!!!!!!!!!!
I really appreciate all of these screencasts.. very informative and i have to admit that i have no idea how you talk to yourself for that long.. heh
love this site!!
cheers!
Yep, you are right, sorry about forgetting that. If you check out the "Three State Menu" tutorial, it covers that and shows you can can set that state via an ID on the body.
I don't think that you explained how to code the ON state of the menu buttons.
I'm pretty sure I can figure it out. Just change the state to top instead of bottom on the backgrounds right?
My menu works perfectly in firefox but appears like a staircase in internet explorer. I’m not sure how to go about creating a workaround for ies quirks-I’m working on a mac-is it a matter of trial and error-or do you think it is a matter of inserting the workaround for the transparent png?
Thanks—
Seriously one of the BEST web design videos i have seen. Finally someone who explains an goes step by step with css an making stylesheets and using photoshop to make websites in clear examples and best of all for free.