PDA

View Full Version : Photoshop and Dreamweaver


moonpeach
08-11-2011, 04:09 PM
Hi guys , i've designed a website in photoshop and exported it as a HTML and images to dreamweaver, I've previously dont this but i've forgot how, My template is just the HTML and CSS combind at the moment, I want to move the CSS in the HTML to its own style.css and then the command to put into the HTML to point the CSS at the style.css

I think this will also solve the problem i have next where i type text in the boxes i have created and the box would to disapear

Corrosive
08-11-2011, 04:16 PM
Hi guys , i've designed a website in photoshop and exported it as a HTML and images to dreamweaver

I've actually given up...

Under the CSS styles property panel, click on the little link icon and then create and attach a new stylesheet. Cut an paste your styles into that.

moonpeach
08-11-2011, 05:11 PM
I have just done that, created the style.css and "linked" it and at the top of the index.html in the code its now showing <link href="style.css" rel="stylesheet" type="text/css"> . I forgot exactly what i do with everything else in the index.html as whenever i try to put text in the box it either dispears, or it goes before or after the box http://screensnapr.com/v/i5EGL3.jpg

Corrosive
08-11-2011, 06:41 PM
That's probably because you let Photoshop write your HTML ;)

What are you saving about Ashton Vale?

moonpeach
08-11-2011, 06:48 PM
I told it to export as HTML and saved as web and devices if that makes sense

I cannot say at this moment. For more information keep your eye out of a press release.

domedia
08-11-2011, 06:54 PM
moonpeach, the real problem here unfortunately lies in the HTML export from Photoshop. Photoshop is not meant for creating web pages. At one point you you're going to be forced to ditch all the tables that it generated to complete your project. The sooner you do it, the sooner you can get the site completed. I doubt anyone can help you with the code when it comes from PS. :-/

Corrosive
08-11-2011, 07:07 PM
I told it to export as HTML and saved as web and devices if that makes sense

What domedia said :wink:

I cannot say at this moment. For more information keep your eye out of a press release.

It is the Ashton Vale I'm thinking of right?

moonpeach
08-11-2011, 07:18 PM
moonpeach, the real problem here unfortunately lies in the HTML export from Photoshop. Photoshop is not meant for creating web pages. At one point you you're going to be forced to ditch all the tables that it generated to complete your project. The sooner you do it, the sooner you can get the site completed. I doubt anyone can help you with the code when it comes from PS. :-/ I know what your saying, I had to create a webpage for my BTEC last year and it was export via PS and ending up removing the tables, But it's just remember what exactly im removing, Heres a snippet:
<!-- Save for Web Slices (ashtonvale.psd) -->
<table id="Table_01" width="1201" height="901" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="10">
<img src="images/ashtonvale_01.gif" width="4" height="900" alt=""></td>
<td colspan="4" rowspan="4">
<img src="images/ashtonvale_02.gif" width="196" height="163" alt=""></td>
<td colspan="7">
<img src="images/ashtonvale_03.gif" width="1000" height="75" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/ashtonvale_04.gif" width="669" height="88" alt=""></td>
<td rowspan="2">
<a href="http://twitter.com"><img src="images/ashtonvale_05.gif" width="39" height="40" alt=""></a></td>
<td rowspan="3">
<img src="images/ashtonvale_06.gif" width="16" height="88" alt=""></td>
<td>
<a href="http://facebook.com"><img src="images/ashtonvale_07.gif" width="40" height="37" alt=""></a></td>
<td colspan="3" rowspan="3">
<img src="images/ashtonvale_08.gif" width="236" height="88" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/ashtonvale_09.gif" width="40" height="51" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ashtonvale_10.gif" width="39" height="48" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/ashtonvale_11.gif" width="10" height="737" alt=""></td>
<td colspan="9">
<img src="images/ashtonvale_12.gif" width="1177" height="62" alt=""></td>
<td rowspan="6">
<img src="images/ashtonvale_13.gif" width="9" height="737" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="62" alt=""></td>
</tr>
<tr>
<td colspan="9">
<img src="images/ashtonvale_14.gif" width="1177" height="27" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="27" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/ashtonvale_15.gif" width="176" height="581" alt=""></td>
<td colspan="6">
<img src="images/ashtonvale_16.gif" width="803" height="556" alt=""></td>
<td rowspan="4">
<img src="images/ashtonvale_17.gif" width="198" height="648" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="556" alt=""></td>
</tr>
<tr>
<td colspan="6">
<img src="images/ashtonvale_18.gif" width="803" height="25" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/ashtonvale_19.gif" width="175" height="67" alt=""></td>
<td colspan="7">
<img src="images/ashtonvale_20.gif" width="804" height="43" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="43" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/ashtonvale_21.gif" width="804" height="24" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="24" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="175" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="669" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="39" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="16" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="29" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="198" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->

What domedia said :wink:



It is the Ashton Vale I'm thinking of right?
Ashton Vale, Bristol, yes it is

Corrosive
08-11-2011, 07:27 PM
Honestly, just remove all of it and start again. You are going to run into problem after problem doing it this way. Ashton Vale will be long gone by the time you have finished.

Websites are built by people not software and you need to use semantically correct tags for laying out the page and CSS to style it.

If you are doing some kind of action group or public forum then go and get Wordpress, download a template that is close to what you want and add your logo and content. You'll be up and running days rather than months and you can go save the Vale.

moonpeach
08-11-2011, 09:22 PM
I know that photoshop is not designed to do that, and wordpress at this stage is not neccesary because there will be plenty of landing pages, of which can be done in wordpress but is not neccesary. I do want to continue with this HTML it's just that if there is a guide to removnig which tables then that would be useful, I've previously done it before but like i previously said this was last year and of which i have forgotton exactly how....

moonpeach
08-13-2011, 12:24 PM
bump..........

Corrosive
08-13-2011, 12:29 PM
Bump away but you've nor listened to any of the answers we have given you. Domedia has summed it up nicely;

Photoshop is not meant for creating web pages. At one point you you're going to be forced to ditch all the tables that it generated to complete your project. The sooner you do it, the sooner you can get the site completed. I doubt anyone can help you with the code when it comes from PS. :-/

No one will be up for picking apart a table based design. It just isn't worth it. Learn CSS and semantic layout and we'll help you all we can. Sorry if that sounds harsh but that is the way it is.

moonpeach
08-13-2011, 12:49 PM
What exactly is the point of having the feature to export for web and devices if its not supposed to be used then...

Corrosive
08-13-2011, 12:59 PM
What exactly is the point of having the feature to export for web and devices if its not supposed to be used then...

It is designed as a preview/mock-up tool, not for production websites.

Surely when you see that Photoshop has had to create a load of 1 pixel gifs to try and make sense of your layout you know that something is wrong. In these days of Google ranking on page speed the appearance of excess (and useless) images and bloated code is just a non-starter on the www.

The only production use it has is for HTML newsletters where inline styles and tables are the only thing most mail clients will display correctly.

moonpeach
08-13-2011, 01:19 PM
The only reason why i would like to do it this way is because i would like, if i needed to edit and add a picture to the psd or edit a picture in the design and simply save the image, I've previously done this with a project i had to do in school, cept i forgot which tables i had to remove and add to the CSS..

Corrosive
08-13-2011, 01:49 PM
The only reason why i would like to do it this way is because i would like, if i needed to edit and add a picture to the psd or edit a picture in the design and simply save the image, I've previously done this with a project i had to do in school, cept i forgot which tables i had to remove and add to the CSS..

All Domedia and I are trying to say is that, in our experience of this forum and certainly the pros who hang out here, the help will dry up almost instantly because we all code to web standards. You'll just have to go it alone I'm afraid. :(

domedia
08-13-2011, 06:05 PM
The only reason why i would like to do it this way is because i would like, if i needed to edit and add a picture to the psd or edit a picture in the design and simply save the image, I've previously done this with a project i had to do in school, cept i forgot which tables i had to remove and add to the CSS..

I don't question why you would like to do it that way. If it was that easy, I would do it too :) I'm saying that it's not how you build a web page. It will not work.

And it's not a matter of removing the tables, that solves nothing.

Of course you're free to try whatever you want, but it would be wrong of me not to let you know about the problems with your approach. You either have to learn to make web pages, or find someone that can help you out.