Dreamweaver Tutorial: How to Convert a .PSD to .HTML (Part 2)
Today we’re going to be taking the .PSD website template that we made in a previous tutorial, and type up the CSS stylesheet for it. This is the last tutorial in this series; scroll down for the links to the 3 previous tutorials leading up to this one. Click to tweet this video: octotw.it If you don’t have Dreamweaver, then download the trial from here: www.adobe.com How to Define a Website Folder: www.youtube.com How to Make a Website in Photoshop: www.youtube.com How to Convert a .PSD to .HTML (Part 1): www.youtube.com CSS reset: meyerweb.com Firefox: www.mozilla.com Web Developer toolbar: addons.mozilla.org Download the .PSD: octotuts.com Download the css version: octotuts.com Follow me: twitter.com Be a fan: facebook.com For more tutorials and extras: octotuts.com
Don’t forget to check out our other video tutorials or share this video with a friend.
0 votes
Loading...10 responses to “Dreamweaver Tutorial: How to Convert a .PSD to .HTML (Part 2)”
Leave a Reply to TheJWeb Cancel reply
Video Tutorials
Bringing you the best video tutorials for Photoshop, Illustrator, Fireworks, WordPress, CSS and others.
Video tutorial posted 23/09/12
Pages
Random Videos
![C# Xna Platformer Made Easy Tutorial 1 – ScreenState [Part 1]](http://www.videotutorials.co.uk/wp-content/uploads/2014/07/ad9a9_c23_tutorial_default.jpg)
![Particle Effects Tutorial in Unity 3D – Fireworks pt.1 – Smoke Explode [PACKAGE INCLUDED!!!]](http://www.videotutorials.co.uk/wp-content/uploads/2014/11/33879_fireworks_tutorial_default.jpg)
![Full Portrait Retouch Tutorial – Start to Finish! [Lightroom + Photoshop]](http://www.videotutorials.co.uk/wp-content/uploads/2013/03/42daa_lightroom_tutorial_default.jpg)
Video Categories
- 3DS Max Tutorials (150)
- After Effects Tutorials (160)
- C# Tutorials (121)
- Colour (6)
- Crazy Effects (1)
- CSS Tutorials (120)
- Dreamweaver Tutorials (139)
- Excel Tutorials (127)
- Featured (10)
- Fireworks Tutorials (131)
- General Effects (9)
- HTML Tutorials (143)
- Illustration and Vector (1)
- Illustrator Tutorials (174)
- IMove Tutorials (119)
- Lightroom Tutorials (145)
- People and Faces (3)
- Photoshop Tutorials (169)
- Text Effects (7)
- Uncategorized (32)
- WordPress Tutorials (140)
Tags
VideoTutorials.co.uk
-
Videotutorials.co.uk offers the web's best Photoshop tutorials, Illustrator video guides, CSS and HTML tutorials and much more all in one place. With new videos being added every day, you can learn how to master software and code to give your images and website some great effects.
Our site has beginner, intermediate and advanced video tutorials of varying lengths so you can learn a new skill at your own speed and level. So whether you're a web designer, print designer or just wanting to edit some family photos, you can get to it quickly and easily using these free video guides. (more)
when i open it up it doesn’t have the source code and style.css tabs. some please help!!
How do i make other pages? do i just make a complete new one and start over or can i copy most of the Index and change it? and do i include the text/css again? or do i make a new one for the “About” page? sorry for multiposting.
AND also ,the nav bar isn’t aligned.. Christ, this is not going well.. i’m just trying to make a small site for a minecraft server but i think it’s not working out very well.
only problem is, my collums are underneath eachother, and not horizontal.. What i’d do wrong?
I’m a complete noob to .css
This video was most definitely not boring. A great resource for beginners!
13:40 He spelled #header wrong 😉
hey if your wondering how to have the nav text in a line you need to add this CSS
#nav li {
display: inline;
}
he did this for the footer but not for the header, obviously he added it at some point and didn’t display it in the video, other then that good video
Yeah… You left out how to move the navigation bar down as well has aligning the text used with the links in the navigation bar and how to align the social networking icons. You went from not having them aligned to suddenly having them aligned without telling us, making us go through your source to find the solutions. Someone else commented their “solution” which was also incorrect.
#nav {
background-color:#f2f1e9;
height: 30px;
width: 960px;
margin-left: 10px;
padding-top: 10px;
padding-bottom: 5px;
}
#nav span {
color: #4d4d4d;
}
#nav la {
position: relative;
display: inline;
margin-right: 10px;
margin-left: 10px;
}
#nav li a {
color:#000;
}
#nav li a.hover {
text-decoration: underline;
}
if your still interested
how do you know the position of the elements to style in css.