How To Slice and Code Photoshop PSD Template Lesson 5

[lucidphusion]

Quick Q:

I love the idea of attaching the CSS style sheet easily and have done so in a design I am working on.

Problem - It seems to work in Safari in Chrome, but IE and FireFox don't seem to respond to it at all.

Noticed - It seems that somehow I still have some CSS occurring within the template, but erasing it didn't help.

Also, I can only get the desired results in IE6/8 or FireFox8 if I manually code what I want (i.e. font, color, etc.) into the template itself.

Any help would be great!

[xiiazx]

THANK YOU SO SO SO SO SO SO SO SO MUCH ! THANK YOU

[mocinq]

You're awesome mate! 

[GlifeFilms]

Thank you so much for existing. Your tutorial has helped in a tremendous way.

May the Lord Almighty continue to Bless you, your family and business.

- Rod Whitehead / G Life Inc -

[nazeerbai85]

awesome man....u rock!! 

[FISHGOMOO4321]

You sir have earnt a subscribe. Please teach me at my University?

[mikemantoronto2010]

Dude in the timeline at 1:52 you say "When I'm finished, fingers crossed hopefully it will look like this" and if you pause the screen and look at the code you can see that his code is in tables. lol Tables are the old fashion way of building websites and quite frankly it's very unprofessional.

[prodigyset420]

Yea while you where flying through you said my computer would do some stuff like bring up the files and guess what words i mean....it did none of that... Im disscuraged i just want to slap my letters and link it to another page that looks the same. have a few little simple animations when i link the buttons....and have an image page that when i click on the pictures they come up full screen have a log in page where people can donate money so i can hire someone else to do this bullshit.

[exzcalibur]

Wow, Very clear, informative, enthusiastic and explained in simple terms. Some of these other CSS tutorials make it sound like rocket science and are very boring or good to look at if you can't sleep.

Even though what your doing is quite complex but the way you teach is so easy to understand. Good Job and Thank you, can't wait to get started myself...

[saladbowl12]

i have a question

does it work the same for a myspace layout ?

[Unvailable68]

hello i have question when you code a template when you want to write for example content the table floats away and mesiss up the template...

[1stoptutorials]

Hey Unvailable68, sorry in the delay. Uhmm it should not do that. If you want to send me your code so i can see whats up. This is my email address

1stoptutorials at gmail dot com

Thanks

[luckyvidoes]

Hey bro. I just love the way you teach.

I normally don't leave comments but...

yours is... just awesome bro! just awesome!

Keep up the good work alibaba! ;p

[1stoptutorials]

Hey luckyvidoes, thanks for your comment. I had a look at your videos as well they are really good as well. You do some great tutorials. Keep in touch

Ali

[djmurali32]

i gt problem in css part... the words are in pink colou and it never change... wat must i do?

[1stoptutorials]

Hey djmurali32, if it is pink that is because you have the wrong brackets. Make sure you have these brackets {} not these ()

Ali

[GPTDavid]

thank you i already send you an email on yahoo.

[GPTDavid]

hello again do you have aim or yahoo. ?

[1stoptutorials]

hey GPTDavid, both are

alf81uk at yahoo dot com

Thanks

A;o

[GPTDavid]

i have a question for you sir. do the photoshop images that i put on the background of the divs have to be gif. or can they also be png ?

[1stoptutorials]

Hey GPTDavid, no they can be any image format. jpg,png,gif etc..

Thanks

Ali

[GPTDavid]

i hope you don't mind. ones i make my template can you double check it for me? i mean just to check i didn't make any errors that would really help me a lot.

[1stoptutorials]

Hey GPTDavid, yeh no probs send it to me and i will have a look for you

Ali

[GPTDavid]

hi i'm David and i'm studying to be a webdesigner my self :D this is a very helpful video i'm almost done learning DreamWeaver. thank you for putting your time aside and making this tutorials. keep it up

[1stoptutorials]

Hey GPTDavid, thanks for your great comment. Glad you are enjoying them. Let me know if you get stuck

Ali

[hariiskal]

hey ali. great work..one question though.. I want to create the template for blogger

( my blog), and it is in xml.. should i create the new file at the beggining at this form or can i change it later ?? ( or i shouldn't do anything at all??)

[1stoptutorials]

Hey hariiskal, thanks for comment. There are a few different rules when making templates for blogs,.Blogger will have a skeleton template that you can add your code to and alow you to get the look you want but you will have to add some blogger code to it to make modules and things work.

[hariiskal]

@1stoptutorials can you explain things further please? what exactly do i have to do?

can you make a video tutorial of this in the web..just the basics.. There is nothing like this on the web.. and if there is a way to code the template like you did and then modify it somehow to fit in the blog.. please ali.. helpppppp!!thank you for your great tutorials

[1stoptutorials]

Hey hariiskal, i have never done it with blogger only wordpress. What you do is add your html to a index.php page and then have some wordpress syntax code to make it all work. I have added it to my list of tutorials.

[andresoares77]

Great tutorial, clear and simple.

[overtext]

thanks for the straight talk...you make it ez to learn this stuff :-)

[maqeurious]

Hi Ali, first of all this is a great tutorial.

I have created the css file and everything and when I go to write in the Margin/width/ height etc I notice that your font color changes to blue and you also have an automatic dropdown of codes to use. I don't seem to have this. My lettering always stays pink and and I don't get this dropdown menu. I noticed it especially when you used it to link the url of the header.

Am I doing something wrong here? Any help would be fantastic.

[1stoptutorials]

Hey maqeurious, that sounds like an error in the code, iw ould check to see that all css code finishes with a semi colon, so it should look like this ; . Best way to find out where to look is, search your css all the way to the top of the pink, if you can see blue css anywhere then it means you want to look for the start of the pink css, if there is no blue css anywhere then go right to the top and check there is a semi colon

[maqeurious]

Hi Ali,

After much frustration I found out what I was doing wrong. I was using the () symbols instead of the {} ones... duhhhh!!! So now I'm all good and continuing my way through your courses.

Thanks very much :D

[1stoptutorials]

Hey maqeurious, i remeber doing that before myself, the good thing about it is you won't do it again. Thanks

Ali

[weemanalito]

great tutorials and well explained to a novice like myself.

[weemanalito]

having problems, when typing margin in between

brackets cannot get the drop down box dont know if settings are right. using cs4 (please help)

[eddiekudzayi]

Very informative but I am wondering why you would want to code by hand in dreamweaver. I thought the whole idea of dreamweaver was to allow none coders to produce solid sites.

I could understand if you wanted to tweak the codes in some instances but you are doing everything by hand. For instance, instead of writing the code to center your page why not just click the table edge, right click, edit tag, select center.

Dreamweaver would then generate the code and this would save time ?

[1stoptutorials]

Hey eddiekudzayi, thanks for the comment. That is correct you can slice it up different and add it to tables and do that the easy way. But with photoshop templates you need to get into the code, you need to bebale to have full control of what you are doing and by using div tags that is power. I have done a course on how to use tables, this is another and more powerful way. Get into the code you will have som much more power than just building websites in design view. Thanks

Ali

[eddiekudzayi]

I suppose more knowledge is always better that no knowledge. Keep up the great work.

[djmickeyg]

awesome tutorial :D helped me!

i knew the rest but i wanted to know this :P!

[maldiga]

very nice sir!

[richekalen]

Wow you learned me so much in a matter of minutes looking forward to all your next videos!