Web Design: PSD to CSS, Part 2
by Joey at 3:15 amOK. Now that we have exported our PSD to CSS/XHTML, we can open our HTML file in your personal favorite code editor. I prefer Dreamweaver, however, you can even edit in TextEdit in Mac OSX. Once you open it up, you can see a few things. First, notice the code: <type=”text/css”> This is your Cascading Style Sheet link, or CSS. This defines your stylesheet. Because of the way Photoshop exports the CSS file, it is included into the HTML file rather than creating a separate .css file within your folder. Below this code, you will begin to see #Table_01, which in this case is the start of your divisions within the web site.
For this particular web site, in the first part of the stylesheet, I want to center the web site within the browser, so when the window is adjusted it continues to stay centered, on a gray background. Because Photoshop has exported the gray color background I wanted to begin with, we don’t have to worry with it. Now, to position the CSS properly and in the center, you must change the left position to 50%. And to allow this to work, add in the code: margin-left: -512px;. This is actually half of the width of your document.
Test it, and see if it works. If not, consult a few different sites to gather more information. If you know what you want, more than likely someone has had a problem with it before and has posted a solution online. Go here for some additional information on centering DIVs and also adjusting the position of your design.
Now, for a quick lesson in external .css and how to link those to your HTML. While some CSS is applied directly to an HTML document, by creating a separate CSS document and linking it within the HTML code, one can use a particular stylesheet across several pages. To achieve this, copy your CSS that is currently in your HTML and create a new file. In Dreamweaver, select File – New – CSS. Paste the code in and save with your choice of name. For this exercise, I have selected style.css.
When you save it within the same folder as your HTML, you can begin to connect and link it for use. The code necessary for this is: <link href=”style.css” rel=”stylesheet” type=”text/css” />. Now you can use the same stylesheet for all of your site.
We’ll continue to build our Web site using CSS and HTML.
