PDA

View Full Version : Typing problem in Dreamweaver? (Desperate for help ASAP!!)


Tw1tcHy
05-27-2011, 01:57 PM
Hey guys sorry to bother but I'm new to Dreamweaver 8 and I'm so frustrated right now! D: I tried using a Photoshop addon called Sitegrinder 3 to design a website and let Sitegrinder automatize the coding project of converting from PSD to HTML since everyone seems to be able to use it so flawlessly, but when I used it the formatting on the pages was different i.e. word spacing changed, words were on the wrong part of the page etc, so I imported the HTML files into Dreamweaver to fix them up a bit where the program couldn't, and some I've been able to fix, others not at all. My problem is when I try to type things onto a blank template of the website. Everything disappears. Here are screenshots to show you what I mean

Here's what it looks like when I import the HTML into Dreamweaver. Note the messed up text formatting from Sitegrinder


http://img89.imageshack.us/img89/9985/81949838.gif


Now for this one this is when I try to edit or retype any of what's currently on there. Nothing happens really, it just re types with the awful formatting (and I can't figure out why!)


http://img84.imageshack.us/img84/1227/30788784.gif


And in this final pic, if I delete those "section" things with the bits of text in then to try to rewrite whole new fresh text and add pictures, this is what happens. Everything but the blank template disappears and I can't do anything anyways! I'm so mad right now, would love someone if they could PLEASE help me ASAP!


http://img714.imageshack.us/img714/885/16965574.gif


I can't even highlight the stupid text and change the size that way! Man this sucks :mad:

d a v e
05-27-2011, 03:11 PM
can't really tell without seeing all the code - upload a page and then we can see

Tw1tcHy
05-27-2011, 03:20 PM
Will do, give me one second! I literally just now got done trying to type a whole page out by using layers to place the images and texts and tested it out and now it's all weird too.... I'm speechless...

Tw1tcHy
05-27-2011, 03:29 PM
Ok so here are all of the files, includes all of the pages of the site (not many) and all of the images and what not to, just the way sitegrinder exported it.

http://www.mediafire.com/?dllq8l4gebvn241

The file "special.html" is the one I was just now working on in Dreamweaver. I used a blank template of the site (I created that as well) and added in the text for it and the pictures each all on their own layers. Probably could have done 1 picture and 1 description of text per layer but oh well. It looked really good and I thought I had the issue fixed until I tested it out. This is how it looked in Dreamweaver once I finished with it and how I want it to look when it's done (minus the appearance of the layer boxes of course)

http://img717.imageshack.us/img717/2392/11615444.png

This is how it actually came out (and should show up for you if you look at it in that zipped folder)

http://img196.imageshack.us/img196/5038/22642750.png

I REALLY don't understand what's up with it this time...

mangofreak
05-27-2011, 07:01 PM
The problem you have is that you are using a converter to make the code. That in itself is wrong. As far I can see you do not need Ap elements(layers) to do
that design.

You just need a few divs and a good set of CSS rules to lay your design out.

A quick sample:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
<!--
.container{width:900px; margin:0 auto 0 auto;}
.item-box{width:900px; margin-bottom:15px;}
.text-box-left{width:770px; padding:5px; float:left;}
.text-box-right{width:770px; padding:5px; float:right;}
.img-box-left{width:110px; padding:5px;float:left;}
.img-box-right{width:110px; padding:5px;float:right;}
.title{margin-bottom:0; padding:4px 4px 0px 4px;}
.clear{clear:both;}

-->
</style>
</head>

<body>
<div class="container">
<h2 class="title">Title</h2>
<div class="item-box">
<div class="text-box-left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel enim varius felis luctus tincidunt ac eget lacus. Ut vel mi sed velit interdum elementum. Donec volutpat ultricies cursus. Nam consequat semper turpis nec facilisis. Nullam quis ante nunc. Curabitur ut sapien a velit tincidunt tempor. Nulla posuere volutpat elementum. Proin in turpis lacinia libero auctor laoreet nec in magna. In in lectus nec eros vulputate tincidunt in ut nibh. Etiam at tortor nibh, in tristique mauris. Phasellus et nulla nulla, laoreet convallis metus. Aenean convallis consequat dolor eget tincidunt. Etiam vel est odio.</div>
<div class="img-box-right"><img name="" src="" width="100" height="100" alt="" /></div><br / class="clear">

</div>

<div class="item-box">
<div class="text-box-right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel enim varius felis luctus tincidunt ac eget lacus. Ut vel mi sed velit interdum elementum. Donec volutpat ultricies cursus. Nam consequat semper turpis nec facilisis. Nullam quis ante nunc. Curabitur ut sapien a velit tincidunt tempor. Nulla posuere volutpat elementum. Proin in turpis lacinia libero auctor laoreet nec in magna. In in lectus nec eros vulputate tincidunt in ut nibh. Etiam at tortor nibh, in tristique mauris. Phasellus et nulla nulla, laoreet convallis metus. Aenean convallis consequat dolor eget tincidunt. Etiam vel est odio.</div>
<div class="img-box-left"><img name="" src="" width="100" height="100" alt="" /></div><br / class="clear">

</div>

</div>
</body>
</html>



copy that to a empty page in DW. Not hard, really. learn a bit of CSS and HTML and you can have great design, tableless and easy to maintain.

Tw1tcHy
05-27-2011, 10:05 PM
Oh man I'm screwed. I know HTML just fine, but I don't know CSS to save my life :roll: Well this sucks... I don't even know what to do with the sample coding you just gave me :(

mangofreak
05-27-2011, 10:38 PM
Open a new document.

Go to code view.

Delete the code you get. copy and paste the code I posted on that new page.

Go to design view and review the sample.

That should give you an idea of the whole thing.

For what you need review some CSS image background rules.

I got to run but I'll have a look later.

Good luck