website templates and stuff

[blah-de-blah]

sorry i'm not sure if this is the right forum but it seems the best...

so anyways what i was wondering was how to make a website template (i think thats the right word, i'm trying to say the background and designs on every page), so they can be inserted into frontpage in teh correct size.

What program would be best to make this? i was thinking photohop but could you get it to the correct size (so like 1024 X 768).

thx for the help <:}

[Dave]

Hey, if you want to design using photoshop you can.

I have used photoshop to design a template, and then i throw it into fireworks and slice it up!!

But I use dreamweaver, so im not to sure bout Front Page.


:)

[blah-de-blah]

ahh cool...

but what'd you mean by 'slicing it up' ?

[DDD]

The program you want is dreamweaver. It allows you to make a template. Then base new documents off that document. So when you make a template . You open a new doc from that template. Then when you want to make additions to a doc you change the template and dreamweaver knows which docs were based on that template and changes them all. I use them all the time. I have a site with like 100 pages. The client wanted to change the image at the top. So I changed the template and DW changed all 100 pages in like 5 secs. Imagine doing that manually.

[blah-de-blah]

wow sounds cool...dammit havta buy and learn another program!
o wait...can you actually MAKE the template in dreamweaver or do you import it from somewehre else? just to make sure and everything :) thx

[DDD]

You make the template in dreamweaver, However you could start with a design in fireworks or Photoshop. Slice it up and save the html file. Open that html file in dreamweaver and convert it to a template. Dreamweaver is something you should not do with out.

[blah-de-blah]

sounds really cool i'm gonna get it now :) thx for tellin mee about it <:}

[Dave]

Yeah get dreamweaver!!

Then We can show you how to slice up!!

:P

[Jubba]

On the scripting side you could also use CSS and using that you could make every page look the same way. This doesn't include graphics though. This just controls the size and color of text, body color, table attributes, etc etc...

for more on t his go to:

http://www.w3schools.com/css/default.asp

[RenaissanceGirl]

Photoshop also has layout slicing abilities through Image Ready.

[blah-de-blah]

alrite so i got the trial, and so lets just say a plain grey background with like a normal banner with a side bar thing for now.

And lets say i've drawn it in photoshop, so after that, how would i manage to get it into dreamweaver? do i have to save it as a specific format type? thx :ub:

[DDD]

Okay what you have to do is when you slice the image up. Save the slices in a folder that is in the root of the site you are working with. When you did the slicing a .htm file was produced. In dreamweaver go to file>open then browse the .htm file that photoshop created from the sliced objects. Open it. Voila!!! You should see your sliced image. If you use fireworks for your slices you will be better off. Why you ask. Well Im glad you asked. Because at the top under the common tab you will see a insert fireworks html button. Ths allows you to browse to your fireworks .htm file you created with slices. It will also delete the htm file upon insertion. Why is that important? Im glaad you asked. What will happen if you use like ps7 the chance is that the path to all img src will look like this img src= "file///c:/images/this/that.jpg" and you will have to go thru and strip those. But when you integrate with fireworks it will do it for you. Plus if you decide to change your sliced object you can do it straight from dreamweaver. You will not be able to if the source image is from ps7. There are many more benefits to dreamweaver but I dont wanna sound like I work for them or something. Let me know if you need more help.

WOOHOO MY 200th POST!!!!

[mdipi]

wow! thanks 3D! i am doing mine in PS7, but i suppose i should bring it over to FWMX when the time comes...this is everthing i need to know, congrats on the 200!

[Eberth]

is fireworks better that photoshop to slice the objects??

[Dave]

dont know why, i rather use fireworks than photoshop!!

(maybe coz i havnt used photoshop to slice :P )


:)

[DDD]

It is a preference thing I find that the tools are easier to use and the interface is more intuitive. Actully it is not really ps7 that does the slicing you have to send the image to image ready so I find that cumbersome. They both have their advantages but for effects I go with ps7 for drawing and slicing I go with fireworks.

[reverendflash]

They both have their advantages but for effects I go with ps7 for drawing and slicing I go with fireworks.

I agree 100%

Revhttp://www.aulman.com/rev.gif

[blah-de-blah]

hmm...so let me get this straight

first i make my thing and slice it up (edit>insert>slice)

then do i have to export it into an html file or something? because i tried to save it just normally as a firewords doc. and i don't seem to get the htm. file your talking aboout...

[DDD]

Once it is sliced up you go to file>export name your file. then in the "save as type" drop down choose "html and images" In the next drop down "HTML" choose "Export HTML File" Then in the next dropdown "Slices" choose "Export Slices". You will see 3 check boxes below the check boxes check the middle one "Include Areas without slices" and the last one "Put Images in Subfolder" browse to seperate folder usually within your images folder to put your slices in. (this is purely for organization. Fireworks will makes many little files of your image so you dont wanna pollute your images folder with that stuff) Then click save. That will produce the htm file you wanna open in DW.

[blah-de-blah]

alright now that i got that to work, how do i lock it or something so that i can type stuff over it and everything?

oh and one more thing, if i want to edit it i have to go back to fireworks and do it there, then reopen it in dreamweaver right?

i hope i'm nto annoying you :beam: thx =)

[DDD]

Your not....I like helpin. As far typing over stuf you have 2 options. Each depending on your design. 1 way is to before exporting click on one of your slices. In the properties panel change the slice type to a html slice. This will allow this space to be typed over in DW. The other way is to manually make the img src of a table cell a background image. How you do this is to cut the path out of the img src and place it in a background image. That way is a lil messy but it is best when you need that area to be a repeating image due to scaling of the page. As far as updating the document from dreamweaver. While in dreamweaver right click on the image and select edit with fireworks this will bring up the original png file so make sure you save the png file b4 exporting. make your changes and you will notice at the top of the document window a button that says done click that and it will automatically update DW. pretty cool huh

[blah-de-blah]

the first way you talked about (html slice), i'm not sure which properties panel you meant..? is it just the one at the bottom of the screen?

and the second way (backgroudn iamge thing), do you go to page properties and insert it there? i tried it there just now but it repeats itself you get what i mean? so like on one page, there are about 3 backgrounds of the same thing, but instead i only want one in the center, how should i fix this? thx

[DDD]

you can fix the repeating background with css
like this:



.yourstuff {
background-image : url(yourimage.jpg);
background-repeat : no-repeat;
}

And yes the property panel is the one at the bottom, when you click on a slice you should see a drop down that say gif slice or something like that. Change it to html slice, after you do that click edit and you can actually put your html in there or wait and do it in DW. You have to really plan out your slices to prevent gaps and stuff you will see what I am talking about as you do this more.

[blah-de-blah]

alrite this is beginning to annoy me even if its not annoying you :)

so i got the html slice thing working (in a way), because now that i do that, no graphics show up in dreamweaver, only the layout guidlines stuff (the dotted lines that divide the slicing stuff). i hope you understood that...

so how do i fix it so i can see the graphics? i tried typing over the html and it works, i jsut needa get the graphics working again. how should this be done? thx

[bcogswell11]

You know, I should definetley get a copy of Dreamweaver. I don't know much html at all, and after I do a new site with Flash, I want to make an html site. This seems like such a good way to do it. Thanks guys!

-brad-:evil:

[mdipi]

yeah it is! but i learned HTML first, so its a bit easyer. ok now i got FW (for more than just this) but do i need to HTML slice it? i think i will just leave it in image form...

[DDD]

Please understand I think you should learn HTML and CSS becuase dreamweaver will and FW will do alot for you but to truely harnass the power you must know how to manipulate it. I use these tools to expedite what I already know. It speeds up my turn around time. But any way I think you are in table view try switching to standard view.

go to View>>Table View>>Standard view

If that does not work let me know.

[blah-de-blah]

sorry but its still not working!!

i've tried so many ways...ok this is what i did:

-create the slice thing and exported as html/htm

-create a new file in dreamweaver

-click on the fireworks html button under the common button

-found my file and click delete upon insertion

i then clicked ok but then all i get is the frames and not the actual graphics. is it something wrong with my fireworks file?

or do i have to create a specific file in dreamweaver (when you click 'new', it asks you if you want basic page, dynamic page, template page etc...)?

[LoungeActx]

Frontpage? eww.

GoLive or Dreamweaver are the way to go!

[DDD]

could you post a link then I can look at the source code. I cannot really understand why it is not working. Are making sure that you include areas with out slices. That is a option on the export dialog box. When you insert the FW htm. Look at the paths to the sliced images. Make sure they are valid. Also you have to save the file that contains the FW slices or else you will get those crazy paths file://c:/......... So you are not getting broken images?? just blank spots?? ALso make sure that your slices are gif slices and not html slices. Anything outside of that you have a defective copy of dreamweaver of fireworks. reinstall it.

[blah-de-blah]

hmm well i'm pretty sure they are gif slices. In fireworks i made them html slices and then in the folder, it says blahblah.gif so i think thats correct.

the paths to the slices are just images/nameoftemplate.gif

and i included areas without slices...

i'm not sure whats wrong, maybe i will try to reinstall dreamweaver. but then again, its a trial so it should be ok. is there anyway to reinstall a trial?

because i've done that before and lets say i had like 10 days left, then when i reintsall it will say i have have 10 days left still not back to 30. do i havta delete a cookie or soemthing like that!?

[blah-de-blah]

well i worked my way around it by making the part i want to type on html and the rest an image thing so you can see those and you can type on the html. i geuss that'll do for now until i get better at this. thx for the help 3diva!