Help in building a website like this on a Mac?

Joined
Sep 21, 2010
Messages
2
Reaction score
0
Points
1
Hi everyone,

I'm a newbie when it comes to website designing. I'd like to learn how to create a page like this one in terms of its navigation:

Hello Delta // Cultural Photography of the Mississippi Delta // News

I like the navigation at top, where if you click on each section (like "pricing"), the word changes color, and it loads the content below without reloading the entire page. Both the header of the page ("Hello Delta") and the navigation section stay put, without using frames or Flash. I'm not sure what to even call this kind of site design (yup, total newbie ;P).

Is it difficult to learn? Is there a Mac program that can help me create a page that uses something like that? Programs can be ones you pay for.

Any help would be greatly appreciated. Thanks!
 

CrimsonRequiem


Retired Staff
Joined
Jul 24, 2008
Messages
6,003
Reaction score
125
Points
63
Your Mac's Specs
MBP 2.3 Ghz 4GB RAM 860 GB SSD, iMac 3.4 GHz Intel Core i7 32GB RAM, Fusion Drive 1TB
I think it's Java script that they used. The navigation is a standard list, and the formatting or the way it looks was achieved with CSS and Java.
 
OP
M
Joined
Sep 21, 2010
Messages
2
Reaction score
0
Points
1
Forgot to add...is there a way for me to do that using regular text that changes color? I don't have any big graphics programs yet to make custom graphic buttons. I'd be happy with a navigation menu like that using text that changes color with a mouse hover, and clicking leads to loading different pages below without the navigation or header reloading.

Ideally, a program where I can do that fairly easily by template or something would be great. Not sure if that exists. :\ Thanks!
 
Joined
Oct 5, 2010
Messages
3
Reaction score
0
Points
1
It can be done with a simple css code :) the 'hover' element would do the trick so long as the link colors are different from one another. hope i helped with the links part :) as for the pages loading in one pages, that's java script code. search for the website 'dynamic drive' and there are numerous tutorials and tricks there.

<style>
A:link {text-decoration: none;
color: black;}
A:visited {text-decoration: none;}
A:active {text-decoration: none;}
A:hover {text-decoration: underline;
color: red;}
</style>
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top