Build this site with Dreamweaver only?

2003-05-25

I was hoping to build a seemingly simply site using only Dreamweaver. I don't know HTML but I have used Dreamweaver to build sites in the past, but nothing like this site.

only the layout idea ----> http://www.beingaround.com

Here's what I'm hoping to accomplish:

* When the user clicks on links, I don't want the entire site to reload a new page. I just want the section the user clicks for to load seperately. For example: If you click on the "Photography" link, I only want teh top part of the site to load the photos. What's the easiet way to accomplish this in Dreamweaver? Frames?

* At the bottom of the site, I want to have a news section with a scroll bar.

Again, I don't know how to write HTML but I assume this can all be acomplished using Dreamweaver. If anyone could help out, I would really appreciate it. Thanks!

Scape3d · 2003-05-25 #2

Sorry, I posted the wrong site.

This is the layout I want to create using Dreamweaver:
http://guru1025.tripod.com

colorblind · 2003-05-25 #3

Hey Scape ...

Frames is what you should go for, if you don't want to use HTML ...

Frames allow you to do relaod or change certain parts of the page without having to reload the entire site.

Also, keep tables in mind, as far as putting graphics on the right spot ...

Scape3d · 2003-05-25 #4

Thanks for responding Colorblind.

1. How exactly would I use the frames with this design? For instance, how many frames would I need to use? I would like the main navigation (Photos, Words, Links, Contact) to not reload after they're clicked. Also, when you click for a different photo, I don't want the entire page to load.

2. If I do split up the site into frames, how would I get the light green border around the site to look seamless?

3. You mentioned that since I don't want to use HTML, frames would be the only way. Is there any way to do this without using frames? Is there someway I can get Dreamweaver to get the layout that I want?

Thanks again. If anyone else can help, please do.

midnite · 2003-05-25 #5

that type of layout is easy with dreamweaver. what i would do is use layers. you make a few layers the same size each and put a picture in each one. you make all layers hidden and one on top of the other, putting them were you want them to appear when the user clicks a button.

then you make the buttons for the pictures. like the small 01, 02, 03 boxes in the site you posted. click on the 01 box and attach a behavior to bring to the front the layer that contains picture number 1. click on the 02 box and attach a behavior to bring to the front the layer that contains picture number 2. this will hide the previous layer from the viewer. do this for the rest of your pics.

as for the initial layout just make a table the size that you want and center it, and place the layers and the elements inside.

to get rid of the green border, and i think you mean around the clickable items (?), use link scrubber from studio VII:
http://projectseven.com/extensions/i...mscrubhelp.htm

i've been told i'm a terrible tutor, so sorry if i make no sense. but trust me, buy a book and go with layers

.

Scape3d · 2003-05-26 #6

Hey Midnite, that sounds like a good idea. I'll give that a try. One more thing though. I really don't want to use any frames so how would I set up the bottom part of the site (where I'll have the news section) with scroll bars? Is there an easy way to do that in Dreamweaver? Thanks again.

midnite · 2003-05-26 #7

sure, use layers again. insert a layer where you want the news to be. make it the exact size you want it. (specify the size in the size fields, don't just stretch it out to the size). on the overflow poperty select "scroll". insert your news into the layer. in dreamweaver your layer will stretch out to fit your content. don't worry about that. when you preview it you'll see the layer will be the size you specified it to be, but now there's scroll bars on it.

you can color the layer's background with the properties inspector and you can color and resize the type by applying styles to it. you can also insert a background image into the layer behind the text which would add a cool effect. it could even be a small image that is "tiled".

also if the news section is not gonna be shown at first, make the layer hidden. then make a "news" button and attach a behavior to it to make it become visible when the user clicks the button.

two great books to learn dreamweaver behaviors are "dreamweaver 4 magic" and "dreamweaver mx magic" by New Riders. the first one is better and still applies to mx. also you could go to macromedia.com and go to the dreamweaver exchange forums. you'll find alot of useful behaviors there you can download for free. an explanation of what they do is included, so you can't go wrong.

(or you could always do it in flash

)

midnite · 2003-05-26 #8

oh, i forgot, you could also change the color of the scroll bars to better fit your site's color scheme. not all browsers support this, but it's better than nothing. here's a code i used for a site:



i've never tried it on a layer but i'm sure with a little alteration it'd be easy to use on one. feel free to try it but make sure you don't use the same colors i used or i'll put your site in the copycatz section

Scape3d · 2003-05-26 #9

Midnite, I tried using your layers idea. While it's a good one, the problem is if the browser window is resized, the content in the layer stands still. It doesn't stay centered in the browser like content inside of tables.

Man, there has to be an easy way to only make the photos reload when when you click on the buttons! It seems like such a simple action.

<----- Frustrated!

midnite · 2003-05-26 #10

ok, i see what you're saying. there's another step i forgot to mention because i forgot you want your site centered. ok keep in mind that i'm not the best teacher out there, so you're likely to get confused

but i've done what you're asking before, and this is how i did it:
go to the macromedia dreamweaver exchange forum and get the "letterbox" extention. once installed go ahead and use it. this will make 5 frames. i know you didn't want to use frames but if you want it centered this is your best bet, as colorblind knew.

make a page any color you want the surrounding color to be, and use that page for the top, bottom, right, and left frames.

as for the middle frame, set the size of it using the properties inspector to whatever the size of your site is.

save the whole frameset and call it index.htm (or index.html)

make your main page, and align the table to the left. it helps if you make your table like 25pixels smaller than the size you entered in the frameset page. if not then you'll get some stupid scrollbars. just make the page, not necessarily the table, have the same color as that other frame page so that no one could tell it's a little smaller. put your elements and layers in there.

back at the index frameset, make the middle frame be the mainpage you just made. viola!

now when someone resizes their browser window, what moves around is the frameset borders, and not the mainpage you made. so the layers stay in place.

midnite · 2003-05-26 #11

if you don't care about your site being completely centered, like:
http://www.fox-company.com/

and you only need it centered on the sides, like:
http://www.ultimatte.com/

...then you don't need the letterbox extention. here's what you do instead:

create a page.

go to view and select visual aids frame borders.

drag a frame from the left. make the border width 0. on the column value make it 1. on the units make it relative.

drag a frame from the right. make the border width 0. on the column value make it 1. on the units make it relative.

make the center frame whatever size you need it to be for your site.

save the frameset as index.htm (or index.html).

do the same things after this as with the previous tutorial.

lastly, you'll want to contribute heavily to the "hey let's help midnite get a powerbook G4" fund

.

midnite · 2003-05-26 #12

hey, a good example is:
http://www.xs-engineering.com/

see how if you resize the browser windows the elements don't move? the side navigational elements are on layers. the thing is that the page they are on is inside a frameset. so when the brower is resized what moves is the two frames on the sides, not the main page. this type of framset will keep you centered.

now you owe me a double contribution to the "hey let's help midnite get a powerbook G4" fund

Scape3d · 2003-05-26 #13

Midnite, I see what you mean with the left and right frames. That sounds like what I need but it didn't seem to work 100% for me.

Here's what I did:

1. I started a new page.
2. Made new frames on left and right sides.
3. Put content in middle frame (photos in layers)
4. Previewed in browser. Middle frame moves around when browser is resized but the layers stayed in place. They did follow the content that was in the main frame.

I did check out http://www.xs-engineering.com/ and that's exactly what I need. When you resize the browser window, everything stays in together but it centers itself.

I feel like I'm close Midnite! Any suggestions? By the way, I really appreciate all of your help so far.

midnite · 2003-05-26 #14

when you say "put content in the middle frame", you mean you built a page and linked it into the middle frame right? otherwise i'm not sure if it would work correctly.

you should build a seperate page. put a table and all the elements, including the layers, in the table. make sure the table and the layers are aligned to the left. don't center it or they might move around when resized. you want the frameset to take care of the centering for you, not the table.

save that page as "mainpage.htm" or something, and link that page into your middle frame in the frameset you built.

other than that i'm not sure why the layers aren't staying where they're supposed to. they should, just like the xs site.

you could try posting your code here and see if i or one of the gurus here can figure it out. not sure if there's more we can do without seeing your code.

Scape3d · 2003-05-26 #15

Ok, that makes sense, but how do I "link" the seperate page (cotent page) into the middle frame of my frameset?

midnite · 2003-05-26 #16

in the frameset page, go to window, others, and check frames on. a panel window will open up showing you your frameset map. click in the middle square on that map. it might say (no name) or something like that.

on your properties inspector you'll see a field called src. on the right of that field you'll see a little folder icon. click on that icon and navigate to where you saved your content page, and select it. link the side border pages the same way by clicking on their area in the frames map. that should do it.

and by now you might as well just give me a powerbook G4

swinhoe · 2003-05-27 #17

frames = bad

layers = bad.

did you get sorted ?

midnite · 2003-05-27 #18

in my defense, i did tell him up front that he could do it in flash

Scape3d · 2003-05-27 #19

Well, I must give MANY MANY thanks to Midnite for all of his amazingly dedicated help throughout this whole ordeal. I finally got the site centering problem worked out using Midnite's framing methods. Thanks a million for that Midnite.

Now, after so many troubles and headaches, I've decided that I really hate HTML. I mean I really dislike it. The site I'm working on looks good in Flash but not very good in HTML. Why? Because HTML simply does not let you design freely. I wanted to venture out into HTML because I think it's a good thing to know and I've seen some really well done sites in HTML so I tried it. I feel a little like I'm giving up but I don't think I'll use HTML as much as I thought. There are way too many limitations. Maybe if I knew how to work with IFrames, DHTML, and Javascript things might be different. Who knows.

Here's what I have so far in HTML (Dreamweaver). It just doesn't look as good as the Flash version. http://guru1025.tripod.com

Swinhoe. You said that frames and layers are bad. I've always heard that too so I've always been weary of using them. Now I know I don't like them. Just out of curiosity, what are the main problems with frames and layers? Browser problems, sizing issues, etc...? Let me know.

Once again, thank you Midnite. I will ask the Gods to drop a Powerbook G4 down on you.

midnite · 2003-05-27 #20

very well built! you nailed it

don't give up on html though. it's really necessary for certain sites. flash is great for a broadband audience, but terrible for your modem users. that's why the most widely visited sites are done in html. ebay, yahoo, cnn, any retail site. sometimes you have to think audience over design.

i seriously recommend you get some tutorial books for html and dreamweaver. unlike photoshop and programs like that, it's really frustrating to learn it on the fly. and as you saw with those sites from 2advanced, sometimes a hybrid flash/html site is the perfect solution.

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Creative Software > Web • Build this site with Dreamweaver only?


		You are currently viewing our website as a guest which gives you limited access to forums, files and other resources. Click here to join now for free, and start interacting with our members, download files and much more! Click here if you are looking for our Flash files and other professional assets.

	Scape3d	2003-05-25 #2
	Sorry, I posted the wrong site. This is the layout I want to create using Dreamweaver: http://guru1025.tripod.com

	colorblind	2003-05-25 #3
	Hey Scape ... Frames is what you should go for, if you don't want to use HTML ... Frames allow you to do relaod or change certain parts of the page without having to reload the entire site. Also, keep tables in mind, as far as putting graphics on the right spot ...

	Scape3d	2003-05-25 #4
	Thanks for responding Colorblind. 1. How exactly would I use the frames with this design? For instance, how many frames would I need to use? I would like the main navigation (Photos, Words, Links, Contact) to not reload after they're clicked. Also, when you click for a different photo, I don't want the entire page to load. 2. If I do split up the site into frames, how would I get the light green border around the site to look seamless? 3. You mentioned that since I don't want to use HTML, frames would be the only way. Is there any way to do this without using frames? Is there someway I can get Dreamweaver to get the layout that I want? Thanks again. If anyone else can help, please do.

	midnite	2003-05-25 #5
	that type of layout is easy with dreamweaver. what i would do is use layers. you make a few layers the same size each and put a picture in each one. you make all layers hidden and one on top of the other, putting them were you want them to appear when the user clicks a button. then you make the buttons for the pictures. like the small 01, 02, 03 boxes in the site you posted. click on the 01 box and attach a behavior to bring to the front the layer that contains picture number 1. click on the 02 box and attach a behavior to bring to the front the layer that contains picture number 2. this will hide the previous layer from the viewer. do this for the rest of your pics. as for the initial layout just make a table the size that you want and center it, and place the layers and the elements inside. to get rid of the green border, and i think you mean around the clickable items (?), use link scrubber from studio VII: http://projectseven.com/extensions/i...mscrubhelp.htm i've been told i'm a terrible tutor, so sorry if i make no sense. but trust me, buy a book and go with layers .

	Scape3d	2003-05-26 #6
	Hey Midnite, that sounds like a good idea. I'll give that a try. One more thing though. I really don't want to use any frames so how would I set up the bottom part of the site (where I'll have the news section) with scroll bars? Is there an easy way to do that in Dreamweaver? Thanks again.

	midnite	2003-05-26 #7
	sure, use layers again. insert a layer where you want the news to be. make it the exact size you want it. (specify the size in the size fields, don't just stretch it out to the size). on the overflow poperty select "scroll". insert your news into the layer. in dreamweaver your layer will stretch out to fit your content. don't worry about that. when you preview it you'll see the layer will be the size you specified it to be, but now there's scroll bars on it. you can color the layer's background with the properties inspector and you can color and resize the type by applying styles to it. you can also insert a background image into the layer behind the text which would add a cool effect. it could even be a small image that is "tiled". also if the news section is not gonna be shown at first, make the layer hidden. then make a "news" button and attach a behavior to it to make it become visible when the user clicks the button. two great books to learn dreamweaver behaviors are "dreamweaver 4 magic" and "dreamweaver mx magic" by New Riders. the first one is better and still applies to mx. also you could go to macromedia.com and go to the dreamweaver exchange forums. you'll find alot of useful behaviors there you can download for free. an explanation of what they do is included, so you can't go wrong. (or you could always do it in flash )

	midnite	2003-05-26 #8
	oh, i forgot, you could also change the color of the scroll bars to better fit your site's color scheme. not all browsers support this, but it's better than nothing. here's a code i used for a site: <!-- body { scrollbar-face-color:#C1D3CE; scrollbar-highlight-color:#C1D3CE; scrollbar-3dlight-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#C1D3CE; scrollbar-track-color:E2EAEA; scrollbar-arrow-color:FFFFFF; } --> i've never tried it on a layer but i'm sure with a little alteration it'd be easy to use on one. feel free to try it but make sure you don't use the same colors i used or i'll put your site in the copycatz section

	Scape3d	2003-05-26 #9
	Midnite, I tried using your layers idea. While it's a good one, the problem is if the browser window is resized, the content in the layer stands still. It doesn't stay centered in the browser like content inside of tables. Man, there has to be an easy way to only make the photos reload when when you click on the buttons! It seems like such a simple action. <----- Frustrated!

	midnite	2003-05-26 #10
	ok, i see what you're saying. there's another step i forgot to mention because i forgot you want your site centered. ok keep in mind that i'm not the best teacher out there, so you're likely to get confused but i've done what you're asking before, and this is how i did it: go to the macromedia dreamweaver exchange forum and get the "letterbox" extention. once installed go ahead and use it. this will make 5 frames. i know you didn't want to use frames but if you want it centered this is your best bet, as colorblind knew. make a page any color you want the surrounding color to be, and use that page for the top, bottom, right, and left frames. as for the middle frame, set the size of it using the properties inspector to whatever the size of your site is. save the whole frameset and call it index.htm (or index.html) make your main page, and align the table to the left. it helps if you make your table like 25pixels smaller than the size you entered in the frameset page. if not then you'll get some stupid scrollbars. just make the page, not necessarily the table, have the same color as that other frame page so that no one could tell it's a little smaller. put your elements and layers in there. back at the index frameset, make the middle frame be the mainpage you just made. viola! now when someone resizes their browser window, what moves around is the frameset borders, and not the mainpage you made. so the layers stay in place.

	midnite	2003-05-26 #11
	if you don't care about your site being completely centered, like: http://www.fox-company.com/ and you only need it centered on the sides, like: http://www.ultimatte.com/ ...then you don't need the letterbox extention. here's what you do instead: create a page. go to view and select visual aids frame borders. drag a frame from the left. make the border width 0. on the column value make it 1. on the units make it relative. drag a frame from the right. make the border width 0. on the column value make it 1. on the units make it relative. make the center frame whatever size you need it to be for your site. save the frameset as index.htm (or index.html). do the same things after this as with the previous tutorial. lastly, you'll want to contribute heavily to the "hey let's help midnite get a powerbook G4" fund .

	midnite	2003-05-26 #12
	hey, a good example is: http://www.xs-engineering.com/ see how if you resize the browser windows the elements don't move? the side navigational elements are on layers. the thing is that the page they are on is inside a frameset. so when the brower is resized what moves is the two frames on the sides, not the main page. this type of framset will keep you centered. now you owe me a double contribution to the "hey let's help midnite get a powerbook G4" fund

	Scape3d	2003-05-26 #13
	Midnite, I see what you mean with the left and right frames. That sounds like what I need but it didn't seem to work 100% for me. Here's what I did: 1. I started a new page. 2. Made new frames on left and right sides. 3. Put content in middle frame (photos in layers) 4. Previewed in browser. Middle frame moves around when browser is resized but the layers stayed in place. They did follow the content that was in the main frame. I did check out http://www.xs-engineering.com/ and that's exactly what I need. When you resize the browser window, everything stays in together but it centers itself. I feel like I'm close Midnite! Any suggestions? By the way, I really appreciate all of your help so far.

	midnite	2003-05-26 #14
	when you say "put content in the middle frame", you mean you built a page and linked it into the middle frame right? otherwise i'm not sure if it would work correctly. you should build a seperate page. put a table and all the elements, including the layers, in the table. make sure the table and the layers are aligned to the left. don't center it or they might move around when resized. you want the frameset to take care of the centering for you, not the table. save that page as "mainpage.htm" or something, and link that page into your middle frame in the frameset you built. other than that i'm not sure why the layers aren't staying where they're supposed to. they should, just like the xs site. you could try posting your code here and see if i or one of the gurus here can figure it out. not sure if there's more we can do without seeing your code.

	Scape3d	2003-05-26 #15
	Ok, that makes sense, but how do I "link" the seperate page (cotent page) into the middle frame of my frameset?

	midnite	2003-05-26 #16
	in the frameset page, go to window, others, and check frames on. a panel window will open up showing you your frameset map. click in the middle square on that map. it might say (no name) or something like that. on your properties inspector you'll see a field called src. on the right of that field you'll see a little folder icon. click on that icon and navigate to where you saved your content page, and select it. link the side border pages the same way by clicking on their area in the frames map. that should do it. and by now you might as well just give me a powerbook G4

	swinhoe	2003-05-27 #17
	frames = bad layers = bad. did you get sorted ?

	midnite	2003-05-27 #18
	in my defense, i did tell him up front that he could do it in flash

	Scape3d	2003-05-27 #19
	Well, I must give MANY MANY thanks to Midnite for all of his amazingly dedicated help throughout this whole ordeal. I finally got the site centering problem worked out using Midnite's framing methods. Thanks a million for that Midnite. Now, after so many troubles and headaches, I've decided that I really hate HTML. I mean I really dislike it. The site I'm working on looks good in Flash but not very good in HTML. Why? Because HTML simply does not let you design freely. I wanted to venture out into HTML because I think it's a good thing to know and I've seen some really well done sites in HTML so I tried it. I feel a little like I'm giving up but I don't think I'll use HTML as much as I thought. There are way too many limitations. Maybe if I knew how to work with IFrames, DHTML, and Javascript things might be different. Who knows. Here's what I have so far in HTML (Dreamweaver). It just doesn't look as good as the Flash version. http://guru1025.tripod.com Swinhoe. You said that frames and layers are bad. I've always heard that too so I've always been weary of using them. Now I know I don't like them. Just out of curiosity, what are the main problems with frames and layers? Browser problems, sizing issues, etc...? Let me know. Once again, thank you Midnite. I will ask the Gods to drop a Powerbook G4 down on you.

	midnite	2003-05-27 #20
	very well built! you nailed it don't give up on html though. it's really necessary for certain sites. flash is great for a broadband audience, but terrible for your modem users. that's why the most widely visited sites are done in html. ebay, yahoo, cnn, any retail site. sometimes you have to think audience over design. i seriously recommend you get some tutorial books for html and dreamweaver. unlike photoshop and programs like that, it's really frustrating to learn it on the fly. and as you saw with those sites from 2advanced, sometimes a hybrid flash/html site is the perfect solution.