Interface Design

Hi all,
My question is about the tool(s) used in order to design some webPages Interface (for example in this link) :

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

Small panels? like the gradients? These would be images - Photoshop or something similar is what you need.

If you look the source code you will see that they use html + css + javascript. I never used Dreamveaver but I think it’s should be possible if you have all elements.

there are sites that you can download PSD free to use… do a search in google for them…

Hi every Body,
Thank u all for you useful answers …
Dear Baylisstic and perth web :

No, They are NOT photoshop images …
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 ??!
:rolleyes:

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

As others have stated, that website uses a mixture of HTML, CSS and JavaScript (with images in between), you could make something that functions and looks about the same using any conventional code editor and just applying the stylistic flourishes as you require them. You don’t need an expensive tool like Photoshop or Dreamweaver to produce the effects, but if you already have those programs you could make use of them. It’s a pretty simple design they’ve created. :slight_smile:

Ellias, if they are not images why is this in the css:
http://www.apple.com/support/home/images/more_icons-1.gif
http://images.apple.com/support/home/images/header_184bg.png

:wink: