Interface Design

[ellias2007]

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

[traq]

the designer (coder) does it. they might use Dreamweaver, some other software, or just a text editor. What you're seeing is html markup that is styled using css code.

Unless you decide to go find (or buy) a pre-made template, you'll need to learn and practice html+css. It's not too hard, but you do need to "get into it" before you'll be able to successfully make a nice, clean design yourself.

[ellias2007]

Hi,

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-->

it is the code of the pallette in the left side of the site (Browse Support)
When they write

<div class="column first sidebar">

it means that the formatting style code is in the class : "column first sidebar" in an external file ...
This is what i search !

Many thanks for any help

[traq]

"column first sidebar" actually refers to three different classes, separated by the spaces.

you can find the external stylesheets in <link> tags in the head section of the webpage, similar to:

<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css">

However, you should note that -especially in this case, dealing with Apple's website- simply copying the css code and using it for yourself is not necessarily a good idea. It can lead to legal issues, for example.

Again, if you want to do something like this yourself, it's not too difficult. Study some tutorials on css and html so you can become familiar with how they work, and then you can try to duplicate layouts you see around the internet. There are also plenty of free css layouts available that you can use (here on DD, for example).