Help creating website

[funnyman82]

Hey,

I am working on a website and I am trying to get a certain look to it, similar to this website : www.arteelegante.ca

How would I put something like that together?

Thanks.

[funnyman82]

Anyone have any ideas?

[Bogie]

Hey,

I am working on a website and I am trying to get a certain look to it, similar to this website : www.arteelegante.ca (http://www.arteelegante.ca)

How would I put something like that together?

Thanks.Designs, like this, are usually created in Photoshop and then adding a menu using Javascript or DHTML.

The "ideas" need to be yours for concept. "In the eye of the beholder". Most good-looking websites start with a person who is good with concept and has a creative mind. The tools used (Photoshop, etc.) are just that, tools.

You may find a template that suits your needs and be able to massage it to your colours, concept, etc.

Templates:
www.designload.com (http://www.designload.com)
www.aplustemplates.com (http://www.aplustemplates.com)
www.boxedart.com (http://www.boxedart.com)

If you want free ones .... search Google for "free website templates".

The look of your example website could be created using simple tables and cells, adding graphics and table/cell/page coloured backgrounds, and a javascript menu.

[funnyman82]

I have access to photoshop 5 and frontpage and dreamweaver mx. Are these programs enough for what I want to do? I am making a simple website for my church with that kind of design.

One of the problems i am having is the screen size. Basically I want people with any screen resolution to be able to see this website as i designed it. I want to have a border around the screen about 50pixels all the way around and the page centered on the screen. But when i switch to the resolution i use, it is all messed up.

I would love to use templates but since I am doing our church website it has to be pretty custom to what we want.

[Bogie]

I have access to photoshop 5 and frontpage and dreamweaver mx. Are these programs enough for what I want to do? I am making a simple website for my church with that kind of design.

One of the problems i am having is the screen size. Basically I want people with any screen resolution to be able to see this website as i designed it. I want to have a border around the screen about 50pixels all the way around and the page centered on the screen. But when i switch to the resolution i use, it is all messed up.

I would love to use templates but since I am doing our church website it has to be pretty custom to what we want.

Use tables and cells and make the main table about 780 wide, centered on the page.

Don't worry about filling each user's screen - won't work and maintain your design format.

The site sample you linked to is very basic and would be easy to recreate. Simple table and cells. See here for a quick one I just created (http://www.geeksmedia.com/funnyman82/)

[funnyman82]

Where do i create these tables and cells? In photoshop or frontpage?

[funnyman82]

i created something right now check this Website (http://www.mcfwc.com/church/index2.htm)

I used frontpage to create this.
Next thing i want to do is when you rollover the menus at the top i want them to change color. How do I do this?

[Bogie]

You have the basic idea. What you have created is only a starting point for you. You have found out how to create tables and cells, but in a format similar to word processing. You now need to apply this to a webpage HTML format.

I suggest reading through some tutorials on making websites using Front Page.

FrontPage Tutorial from Microsoft (http://www.microsoft.com/downloads/details.aspx?FamilyID=299DFA4E-8BEC-4A9D-9F8A-277F43EE8EF6&displaylang=EN)

FrontPage in the Classroom (http://www.actden.com/fp2000/java/) (go to the Table of Contents link)

IceMocha FrontPage (http://www.icemocha.com/tutorials.htm)

You need to understand webpage structure and how to create. Learn this first (see above tutorials), then worry about creativity later.

[funnyman82]

Hey Bogie, i finished going through the tutorial and it showed how to create a navigation tree which is very helpful in organizing all the pages, which can get very confusing if you dont do it properly.

So what I am planning to do now is to create copies of the home page and pasting it on to the different pages so they all look the same.

One thing the tutorials did not show was how to make the rollover buttons for the menu. How do you make them change color when you mouse over them? Another thing that i want to do is, some of the other pages that i am going to have are a bit long and wont fit in the table that i have right now. How do I make it so you get a vertical scroll bar on the right side so you can scroll down in the window? Can this be done in frontpage?

I am trying to keep everything in frontpage 2002. But if i have to create stuff outside i want to be able to bring everything back to frontpage.

Thanks.

[funnyman82]

I figured out that frontpage uses dhtml and tried to create my buttons as two pictures so one is black and one is blue but the colors do not match when i bring it from photoshop to frontpage as a jpeg or bmp...

[funnyman82]

any ideas?

[ChrisK]

I would suggest making it standard jpg's and use a javascript mouse over to create the 'mouse-over/roll-over' effect.

There is no need to be using DHTML.

[funnyman82]

as i am new to all of this, how do i create a javascript mouse over? Can i use frontpage?

[ChrisK]

I'm don't use FP's built in features (it added junk code for no reason).

Here is a link to a JS mouse-over generator:
http://javascript.internet.com/generators/preload-images.html

[funnyman82]

i tried out that link and on loadup the image is there but when i mouse over a box with an 'x' shows up...

[Nuke]

Make sure you have the urls in there correctly. If the images are in the same folder as the script you can just use the image names as the url.. ie "image.jpg" and "image2.jpg". If they are in a subfolder called e.g. images then the url would be images/image1.jpg and so on.

[ChrisK]

Make sure you have the urls in there correctly. If the images are in the same folder as the script you can just use the image names as the url.. ie "image.jpg" and "image2.jpg". If they are in a subfolder called e.g. images then the url would be images/image1.jpg and so on.

yep.

[funnyman82]

I have uploaded the new site again, but one question i have is how to disable someone from right clicking or highlighting things on the page. Right now if you highlight the page you can select everything and it shows up like columns of a table.

New Website (http://www.mcfwc.com/newsite/index.htm)

[Nuke]

No way to stop people from highlighting or right clicking really. There are a couple of right click scripts but they're pretty useless I think. What you can do is merge unused cells to get rid of that table look when highlighted if you want.

If you did merge the cells it would look more like this when you highlighted..
Link (http://marc.mubble.com/webpages/funnyman/funnyman.jpg)

[ChrisK]

No way to stop people from highlighting or right clicking really. There are a couple of right click scripts but they're pretty useless I think. What you can do is merge unused cells to get rid of that table look when highlighted if you want.

If you did merge the cells it would look more like this when you highlighted..
Link (http://marc.mubble.com/webpages/funnyman/funnyman.jpg)


yep. yep.

[funnyman82]

Thanks for the tip Nuke, I will do that.

[Tim]

to improve things a bit, I would raise the quality level of the images a little. Using gradients, especially blues, and browns can lead to 'banding' at the best of times, so increasing compression on the jpg can degrade it further. For the text buttons, I can see a lot of of artifacting around the letters (as well as the logo) , again watch how hard you are compressing. If you really want sharper text, I tend to use transparent gifs for that as text is far sharper.

[funnyman82]

i am afraid of the site being to slow to load up. will increasing the compression not make the site slower?
How do you create transparent gifs? Can this be done in photoshop and be brought into frontpage?

Thanks.

[Tim]

my rule o' thumb is, compress until I see artifacting, and try to back it off a little. If in the end the file size is too high, I try to tweak here and there without giving up on quality too much.

You're using a gradient that also has the logo as well. it's only 12k, that logo needs help. I would suggest either, lower the compression it so the logo looks better, or, separate the logo from the gradient, make it a gif. I use fireworks I find photoshop far too bulky for direct web graphics.