Styling a Simple Form with CSS in Dreamweaver

18 04 2011

We will go ahead and create a form and then style it using CSS. Learn how to hand code a simple form and then hand code all of the CSS code you need to create a nice little form. The beauty of this tutorial is that you can do all of the coding in Dreamweaver or any HTML editing software, if you can type words and export an HTML file you will be able to follow this tutorial! Have fun learning some simple HTML and CSS! Follow me on Twitter! http://www.twitter.com Be sure to check out http://www.tutvid.com Check out the blog @ http

psd2cssonline.com – Here is a quick tutorial showing how to stylize text on your Drupal website. The example uses a theme created from a Photoshop design and converted to a Drupal Theme at psd2css Online, but the tutorial applies to any CSS web page really. UPDATE! – we now support WordPress themeing and Joomla themeing as well and everything in this tutorial works just as well for those themes made for those packages as well.


Actions

Information

35 responses

18 04 2011
emmy009

also i use macromedia dreamweaver 8,i wanna know is it possible to create standard images like your header(barner) and so on with dreamweaver or i gata do that in another program like photoshop etc.pls nat, i await your reply.. thanks again.

18 04 2011
emmy009

but i gat a problem using tables, that’s the normal tables, am made to understand that i can also use css to design a webpage but i tried looking for such videos here and couldn’t get what exactly i was looking for, i was wondering if u could teach me that by doing a video for me, or even teach me how to use tables to design a table ,

18 04 2011
emmy009

hey nathaniel,am mimshach from Nigeria and i really love yr videos , i have really learnt alot from you. i wanna say thank you.i gat this littlle challenge,Ok. i can fairly design a webite now thanks to you and some other guys here on youtube…

18 04 2011
Carlioslasaurus

You are a wonderful instructor, thank you.

18 04 2011
i3ak3ri301

@sumosumo84 This was so long ago I don’t even have it anymore

18 04 2011
sumosumo84

@i3ak3ri301 do you have code behind what your doing, or are you magically expecting it to work. For email all you need is html and javascript. If you want logging in and stuff, you need php. Comment back, and ill pm you with exact code you need

18 04 2011
sumosumo84

@i3ak3ri301 do you have code behind what your doing, or are you magically expecting it to work. For email all you need is html and javascript. If you want logging in and stuff, you need php.

18 04 2011
angelchastainc3ln3v

My name is Mike from LA Although there busizz4me.info

19 04 2011
DeeJayTimo

@davidknag You did this for learning, you didn’t do it for creating a whole website. Check his other tutorials, this is “Styling a Form with CSS” not “Creating a form for my website.”

19 04 2011
TinchoNa95

Hey! thanks for this great tutorial, but I had a problem how can I do to put my email in the css, so the people who wants to send me a messenge I could read it on my email home page. Thanks

19 04 2011
Seryosin

@davidknag You need to use a php. This tutorial shows only how to make the visual part of contact form.

19 04 2011
C0LEMAN777

Hey thanks for the tut, believe it or not i came to this video with no knowledge of CSS and you gave me some basics thanks

19 04 2011
cheatonly2win

Could have been better.

19 04 2011
GAMESGLORIOUSGAMES

ie angers me sooooo much… my form does not display properly

19 04 2011
silentpro105

Hey man, do u ever use firebug? The CSS changes translate really cool for beginners over videos like these…

19 04 2011
ahmedshaie

tutvid, i wanted to ask, can you do a video tutoiral on a twitter style status box, with counters and rollover effects, i’ve tried to do it, but keep stuffing it up, or ending up without a clue, i have sent you a message before, but u haven’t replied yet

19 04 2011
Techible

conTEXT is a good text editor i use for editing code on my Windows Vista

19 04 2011
imegglobal

Hi there- Your videos are so helpful! But I am having a problem with my contact form. My comments field is not in block format. The word “Comments” appears next to the E-mail input field and the Comments text box is on the next line. Any idea where I went wrong? Thank you for all your help.

19 04 2011
iApple14

Join me with IE😛 I hate it too, hate Windows, thats Why I switched to Mac, Totally Worth it!

19 04 2011
lekofev

Thank You so much Nathaniel, a’m learning a lot with your videotutorial, this code is a little hard, but i will try understand everycode^^, thank man, keep helping to world ^^,
Greetings from peru ^^, Sorry for my bad English

19 04 2011
graphicsite

This is so great and very helpful. Thanks a lot.
Christa

19 04 2011
DrJams

Don’t forget to use the accesskey Attribute in your forms. I love sites that use them. (so I can be lazy)

19 04 2011
Theben0987

@davidknag If you go to his website, he has a tutorial on how to send it via php.🙂 if not, just good, how to send mail via php.

19 04 2011
romanticblade

@fredv1 it is true that to learn coding its better to use plain text editor, but when you get to difficult codes, it starts getting hard to orientate around. thats why Dremweaver is irreplaceable when actually managing the web site. you can directly upload the files to ftp and is great when ure not the only one working on it.

19 04 2011
CompGuy911

Thanks, i am going to put da on my site

– Joseph/CompGuy

19 04 2011
kingvlad451

im changing the babyran en2 site but there a little problem when i minimize the firebug it goes back to normal

19 04 2011
turnitintolove

excellent tutorial. thanks!

19 04 2011
psd2cssonline

You know I didn’t even realize that I didn’t do that in the video. Absolutely – you can change any CSS value or even add new ones and delete existing ones live while you’re viewing the page.

19 04 2011
acorntechnique

Thanks very much for the interesting video!

19 04 2011
w1shEX

You know, if you’re offline (as in, don’t have to upload) you can use that little style-viewer IN Firebug to change CSS.

Saving you even more time.

19 04 2011
TheForgottenPanzer

ah?

19 04 2011
Antimidate

Ha ha!

19 04 2011
iskate40

hahaha

19 04 2011
carlogonewild

will you clear that throat first bfore you start your tutorial

19 04 2011
Faks89

well, that “firebug”.. I really dont know if its good or not, but have a look to “Web Developer Toolbar”. Its really nice and you can modify the css in firefox to and see the resoults live.. try it😉




%d bloggers like this: