Hi all, My question is about the tool(s) used in order to design some webPages Interface (for example in this link) : http://www.apple.com/support/ My Q is exactelly about the General design ... look for the small panels and the general nice look : Which tool (software-language....) can easly make that ?! Is this simply an HTML code?! JavaScript ?! Can DreamWeaver Do that ?! Many thanks for any Help
As the last two posters said: HTML, CSS and JavaScript. That is all it boils down to - you can add as many fancy libraries on top of that as you want. They all do the same thing in the end. You can speed up development by using libraries such as JQuery though - you can make very nice looking interfaces very quickly with that.
Hi Everybody, Thank u all for you useful answer .... Yes, The palletts in fact are made by general HTML and formatted by CSS ... But i ask if some one can help me to get these last formattings ... usually, the formatting code is putted into an external file with .css extention into this file, we can find ALL the formatting code .... hmmmm .. But how to get it ??! Look 4 example for the following code : <div id="content" class="grid3cola"> <!--primary content--> <div class="column first sidebar"> <div id="menu" class="box"> <h2>Browse Support</h2> <h3>for Products</h3> <ul> <li><a href="appletv/">Apple TV</a></li> <li><a href="hardware/">Computer + Server</a></li> <li><a href="ipad/">iPad</a></li> <li><a href="iphone/">iPhone</a></li> <li><a href="ipod/">iPod + iTunes</a></li> <li><a href="osfamily/">Mac OS</a></li> <li><a href="software/">Software</a></li> </ul> <form action="http://www.info.apple.com/redir.html" method="get"> <select name="URL" onchange="jumpTo('parent',this)"> <option value="find/">All products...</option> <option value="airport/">AirPort + Time Capsule</option> <option value="aperture/">Aperture</option> <option value="displays/">Apple Cinema + Studio Displays</option> <option value="remotedesktop/">Apple Remote Desktop</option> <option value="appletv/">Apple TV</option> <option value="appleworks/">AppleWorks</option> <option value="bluetooth/">Bluetooth</option> <option value="bonjour/">Bonjour</option> <option value="bootcamp/">Boot Camp</option> <option value="cinematools/">Cinema Tools</option> <option value="color/">Color</option> <option value="compressor/">Compressor</option> <option value="dvdstudiopro/">DVD Studio Pro</option> <option value="http://www.info.apple.com/usen/legacy/">Earlier Macintosh Servers</option> <option value="http://www.info.apple.com/usen/legacy/">Earlier Mac models</option> <option value="http://www.info.apple.com/usen/legacy/">Earlier Operating Systems</option> <option value="http://www.info.apple.com/usen/legacy/">Earlier Power Macintosh</option> <option value="http://www.info.apple.com/usen/legacy/">Earlier PowerBooks</option> <option value="emac/">eMac</option> ....... ....... ....... ....... ....... ....... ....... <option value="xserve/raid/">Xserve RAID</option> </select> </form> <h3>for Services</h3> <ul> <li><a href="photoservices/">Apple Photo Services</a></li> <li><a href="itunes/store/">iTunes Store</a></li> <li><a href="mobileme/">MobileMe</a></li> </ul> <hr> <div class="padtop10"></div> <div id="talktous"> <h3>Contact Us</h3> <ul> <li><a href="contact/">Technical Support</a></li> <li><a href="http://store.apple.com/us/help/">Apple Online Store Help</a></li> <li><a href="../retail/storelist">Apple Retail Store</a></li> <li><a href="../retail/geniusbar/">Genius Bar Reservations</a></li> </ul> </div><!--/#talktous--> </div><!--/#menu--> </div><!--/column.first.sidebar--> Code (markup): it is the code of the pallette in the left side of the site (Browse Support) When they write <div class="column first sidebar"> Code (markup): it means that the formatting style code is in the class : "column first sidebar" in an external file ... This is what i search ! in the post of Deacalion : What do u mean by "fancy libraries" ?? Are their Free css libr. on the net i can downl. and they will make pallettes and like ??! i found nothing like that! Many thanks for any help
I'm not sure if I understand you correctly, but I'll explain what I can and hope it answers your question. There are not really any css libraries you can download on the internet (although you will most likely find many examples of stylesheets to explain how to do things like 2 column and 3 column layouts). Most people will layout there sites as an image and then when it's time to code it, they will reason out the best way to organize the content of the page as code. As far as a site like the apple support page goes, it seems to be split into three columns after the header and navigation is complete. The left column you are referring too uses a class "column first sidebar". One thing to note (and I think this is why you couldn't find this class in the css file) is that it is not possible to define a class with spaces in the name. Therefore, when you see spaces in the class, as you see in the specified div, it is referring to the class ".column" and it's subclasses ".first" and ".sidebar". So this divider will take the style of all three defined classes to use for this div. Hope this answers your question.