Need with construction process. . .

13/06/2008, 20h06

Hi All

I put a post on here about 2 months ago regarding exporting a PSD, and using
the HTML that Photoshop generated. All the kind people on here quickly pointed
me into the direction of learning coding rather than letting something produce
it for me. So i did. . . .
But i have a new problem - there are lots of tutorials out there for how to
code HTML and CSS, but none that show you the correct process for producing
sites.

The current site i am on has a background that i made in PS and just exported
as a image. It has a content section (blank black box) and the background
(grunge grey stuff) all in one image. Now when i take this into DW, i add it as
the background for the body of the site. I center it, and no-repeat the image.
I test it and all is good.
SO i start to add my navigation, which is just text links, not buttons. I add
it on top of the area where i want it to be - BUT - when i resize the browser,
the background stays centered but the links stay where they are.
What i want is for the links to move with the changing size of the browser -
HOW?

Also, is this the correct 'working ethic' for a site? To have the content
areas as part of the background and just position parts on top of the site so
that they look like they are in the correct areas?

I guess basically, i have a background image that is centered with no repeat.
I want the site to be centered, AS WELL as the links. I would like them to all
stay in relation to each other when a browser changes size. Where am i going
wrong? In the HTML or CSS?

Sorry if i have explained it in a bad way, i'm just trying so hard to learn
the right way of doing things.

Many Thanks In Advance

JP

13/06/2008, 20h08

Here is the extract of the code:

HTML:

</head>

<body>

<div id="content">
</div>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Contact</a></li>
</ul>

</body>

</html>

And the CSS:

body {
font-family:Arial, Helvetica, sans-serif;
background:url(images/main_back.jpg) center top no-repeat; <-- Is this
correct????
background-color: #202020;
}
ul#nav { what to put here??????
}

13/06/2008, 20h21

Did you follow this link (and subsequent ones)?

Taking a Fireworks comp to a CSS-based layout in Dreamweaver
http://www.adobe.com/devnet/firework...youts_pt1.html

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"thewakeplace.com" <webforumsuser@macromedia.com> wrote in message
news:g2uggd$r1d$1@forums.macromedia.com...
> Hi All
>
> I put a post on here about 2 months ago regarding exporting a PSD, and
> using
> the HTML that Photoshop generated. All the kind people on here quickly
> pointed
> me into the direction of learning coding rather than letting something
> produce
> it for me. So i did. . . .
> But i have a new problem - there are lots of tutorials out there for how
> to
> code HTML and CSS, but none that show you the correct process for
> producing
> sites.
>
> The current site i am on has a background that i made in PS and just
> exported
> as a image. It has a content section (blank black box) and the background
> (grunge grey stuff) all in one image. Now when i take this into DW, i add
> it as
> the background for the body of the site. I center it, and no-repeat the
> image.
> I test it and all is good.
> SO i start to add my navigation, which is just text links, not buttons. I
> add
> it on top of the area where i want it to be - BUT - when i resize the
> browser,
> the background stays centered but the links stay where they are.
> What i want is for the links to move with the changing size of the
> browser -
> HOW?
>
> Also, is this the correct 'working ethic' for a site? To have the content
> areas as part of the background and just position parts on top of the site
> so
> that they look like they are in the correct areas?
>
> I guess basically, i have a background image that is centered with no
> repeat.
> I want the site to be centered, AS WELL as the links. I would like them to
> all
> stay in relation to each other when a browser changes size. Where am i
> going
> wrong? In the HTML or CSS?
>
> Sorry if i have explained it in a bad way, i'm just trying so hard to
> learn
> the right way of doing things.
>
> Many Thanks In Advance
>
> JP
>

13/06/2008, 21h46

> What i want is for the links to move with the changing size of the
> browser -
> HOW?

You are still treating Dreamweaver like Photoshop...as a desktop publishing
application.

Unfortunately, that's not how HTML works. You're going to have to dive into
HTML.

In this case, you likely don't want to export your background as one big
image. You probably want to export the page background as one image (that
will likely tile) and then the content background as another image (that
also will tile).

Then, in DW, you build your page using CSS and/or Tables. THEN you place the
background images where you need them.

-Darrel

13/06/2008, 21h58

I did do the tutorial yes - And it came out good.
But the style of the site in that tutorial isn't the same type as the one i
want to do in Dreamweaver.
I prefer PS for producing graphics, FW seems a little restricted with regards
to what you can achieve.

-OR, can i just import my PSD file into FW and go from there?

Sorry to be a pain. . .

13/06/2008, 22h00

> FW seems a little restricted with regards
> to what you can achieve.

For the web? Hardly.

> -OR, can i just import my PSD file into FW and go from there?

Sure.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
==================

"thewakeplace.com" <webforumsuser@macromedia.com> wrote in message
news:g2un0o$4ql$1@forums.macromedia.com...
>I did do the tutorial yes - And it came out good.
> But the style of the site in that tutorial isn't the same type as the one
> i
> want to do in Dreamweaver.
> I prefer PS for producing graphics, FW seems a little restricted with
> regards
> to what you can achieve.
>
> -OR, can i just import my PSD file into FW and go from there?
>
> Sorry to be a pain. . .
>

13/06/2008, 22h11

I'm not treating DW like PS as such, i am aware of the differences.

What i don't know is the structure to which you build a page depending on how
you want it to look.
EG - What if i have a background or look to the site that isn't 1 color or
patten that can be repeated? The site i am trying to put together has some
similar characteristics to www.oakley.com - where the background is a little
grungy, not symmetrical, not 1 color, and not repeated? Plus have the content
drop shadowed over the grey background?

Wow, i must make you guys sick and tired and roll your eyes at me

Cheers

14/06/2008, 00h08

> What i don't know is the structure to which you build a page depending on how
> you want it to look.

Isn't that is what we all struggle with?

> EG - What if i have a background or look to the site that isn't 1 color or
> patten that can be repeated? The site i am trying to put together has some
> similar characteristics to www.oakley.com

That is basically a CSS styled html page with a big flash in the middle.

- where the background is a little
> grungy, not symmetrical, not 1 color, and not repeated? Plus have the content
> drop shadowed over the grey background?

I suggest you go and get Firefox browser and then install Firebug. That
will let you examine all elements on a webpage to see how it's
constructed, which CSS rule attached to which elements etc. It will give
you a much better understanding of how these sites are put together. You
could also try to download the site using an appropriate tool for this
(can't remember what they're called). Then start to play around with the
CSS and see what happens.

I also suggest to read one of the best /hands on/ books out there...
bulletproof web design by Dan Cederholm @ simplebits.com.

>
> Wow, i must make you guys sick and tired and roll your eyes at me

Absolutely

Just kidding of course. The concept can be a bit difficult
to grasp at first but once you start to get it... it will be a
continued learning experience from then on

>
> Cheers
>
>

--
Kim
---------------------------
http://www.geekministry.com

13/06/2008, 20h06	#1
thewakeplace.com Messages: n/a Hébergeur:	Need with construction process. . . Hi All I put a post on here about 2 months ago regarding exporting a PSD, and using the HTML that Photoshop generated. All the kind people on here quickly pointed me into the direction of learning coding rather than letting something produce it for me. So i did. . . . But i have a new problem - there are lots of tutorials out there for how to code HTML and CSS, but none that show you the correct process for producing sites. The current site i am on has a background that i made in PS and just exported as a image. It has a content section (blank black box) and the background (grunge grey stuff) all in one image. Now when i take this into DW, i add it as the background for the body of the site. I center it, and no-repeat the image. I test it and all is good. SO i start to add my navigation, which is just text links, not buttons. I add it on top of the area where i want it to be - BUT - when i resize the browser, the background stays centered but the links stay where they are. What i want is for the links to move with the changing size of the browser - HOW? Also, is this the correct 'working ethic' for a site? To have the content areas as part of the background and just position parts on top of the site so that they look like they are in the correct areas? I guess basically, i have a background image that is centered with no repeat. I want the site to be centered, AS WELL as the links. I would like them to all stay in relation to each other when a browser changes size. Where am i going wrong? In the HTML or CSS? Sorry if i have explained it in a bad way, i'm just trying so hard to learn the right way of doing things. Many Thanks In Advance JP

13/06/2008, 20h21	#3
Murray ACE Messages: n/a Hébergeur:	Re: Need with construction process. . . Did you follow this link (and subsequent ones)? Taking a Fireworks comp to a CSS-based layout in Dreamweaver http://www.adobe.com/devnet/firework...youts_pt1.html -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "thewakeplace.com" <webforumsuser@macromedia.com> wrote in message news:g2uggd$r1d$1@forums.macromedia.com... > Hi All > > I put a post on here about 2 months ago regarding exporting a PSD, and > using > the HTML that Photoshop generated. All the kind people on here quickly > pointed > me into the direction of learning coding rather than letting something > produce > it for me. So i did. . . . > But i have a new problem - there are lots of tutorials out there for how > to > code HTML and CSS, but none that show you the correct process for > producing > sites. > > The current site i am on has a background that i made in PS and just > exported > as a image. It has a content section (blank black box) and the background > (grunge grey stuff) all in one image. Now when i take this into DW, i add > it as > the background for the body of the site. I center it, and no-repeat the > image. > I test it and all is good. > SO i start to add my navigation, which is just text links, not buttons. I > add > it on top of the area where i want it to be - BUT - when i resize the > browser, > the background stays centered but the links stay where they are. > What i want is for the links to move with the changing size of the > browser - > HOW? > > Also, is this the correct 'working ethic' for a site? To have the content > areas as part of the background and just position parts on top of the site > so > that they look like they are in the correct areas? > > I guess basically, i have a background image that is centered with no > repeat. > I want the site to be centered, AS WELL as the links. I would like them to > all > stay in relation to each other when a browser changes size. Where am i > going > wrong? In the HTML or CSS? > > Sorry if i have explained it in a bad way, i'm just trying so hard to > learn > the right way of doing things. > > Many Thanks In Advance > > JP >

13/06/2008, 21h46	#4
darrel Messages: n/a Hébergeur:	Re: Need with construction process. . . > What i want is for the links to move with the changing size of the > browser - > HOW? You are still treating Dreamweaver like Photoshop...as a desktop publishing application. Unfortunately, that's not how HTML works. You're going to have to dive into HTML. In this case, you likely don't want to export your background as one big image. You probably want to export the page background as one image (that will likely tile) and then the content background as another image (that also will tile). Then, in DW, you build your page using CSS and/or Tables. THEN you place the background images where you need them. -Darrel

13/06/2008, 21h58	#5
thewakeplace.com Messages: n/a Hébergeur:	Re: Need with construction process. . . I did do the tutorial yes - And it came out good. But the style of the site in that tutorial isn't the same type as the one i want to do in Dreamweaver. I prefer PS for producing graphics, FW seems a little restricted with regards to what you can achieve. -OR, can i just import my PSD file into FW and go from there? Sorry to be a pain. . .

13/06/2008, 22h00	#6
Murray ACE Messages: n/a Hébergeur:	Re: Need with construction process. . . > FW seems a little restricted with regards > to what you can achieve. For the web? Hardly. > -OR, can i just import my PSD file into FW and go from there? Sure. -- Murray --- ICQ 71997575 Adobe Community Expert (If you MUST email me, don't LAUGH when you do so!) ================== http://www.projectseven.com/go - DW FAQs, Tutorials & Resources http://www.dwfaq.com - DW FAQs, Tutorials & Resources ================== "thewakeplace.com" <webforumsuser@macromedia.com> wrote in message news:g2un0o$4ql$1@forums.macromedia.com... >I did do the tutorial yes - And it came out good. > But the style of the site in that tutorial isn't the same type as the one > i > want to do in Dreamweaver. > I prefer PS for producing graphics, FW seems a little restricted with > regards > to what you can achieve. > > -OR, can i just import my PSD file into FW and go from there? > > Sorry to be a pain. . . >

13/06/2008, 20h08	#2
thewakeplace.com Messages: n/a Hébergeur:	Re: Need with construction process. . . Here is the extract of the code: HTML: </head> <body> <div id="content"> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Video</a></li> <li><a href="#">Images</a></li> <li><a href="#">Downloads</a></li> <li><a href="#">Contact</a></li> </ul> </body> </html> And the CSS: body { font-family:Arial, Helvetica, sans-serif; background:url(images/main_back.jpg) center top no-repeat; <-- Is this correct???? background-color: #202020; } ul#nav { what to put here?????? }

13/06/2008, 22h11	#7
thewakeplace.com Messages: n/a Hébergeur:	Re: Need with construction process. . . I'm not treating DW like PS as such, i am aware of the differences. What i don't know is the structure to which you build a page depending on how you want it to look. EG - What if i have a background or look to the site that isn't 1 color or patten that can be repeated? The site i am trying to put together has some similar characteristics to www.oakley.com - where the background is a little grungy, not symmetrical, not 1 color, and not repeated? Plus have the content drop shadowed over the grey background? Wow, i must make you guys sick and tired and roll your eyes at me Cheers

14/06/2008, 00h08	#8
kim Messages: n/a Hébergeur:	Re: Need with construction process. . . > What i don't know is the structure to which you build a page depending on how > you want it to look. Isn't that is what we all struggle with? > EG - What if i have a background or look to the site that isn't 1 color or > patten that can be repeated? The site i am trying to put together has some > similar characteristics to www.oakley.com That is basically a CSS styled html page with a big flash in the middle. - where the background is a little > grungy, not symmetrical, not 1 color, and not repeated? Plus have the content > drop shadowed over the grey background? I suggest you go and get Firefox browser and then install Firebug. That will let you examine all elements on a webpage to see how it's constructed, which CSS rule attached to which elements etc. It will give you a much better understanding of how these sites are put together. You could also try to download the site using an appropriate tool for this (can't remember what they're called). Then start to play around with the CSS and see what happens. I also suggest to read one of the best /hands on/ books out there... bulletproof web design by Dan Cederholm @ simplebits.com. > > Wow, i must make you guys sick and tired and roll your eyes at me Absolutely Just kidding of course. The concept can be a bit difficult to grasp at first but once you start to get it... it will be a continued learning experience from then on > > Cheers > > -- Kim --------------------------- http://www.geekministry.com

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email