/    Sign up×
Community /Pin to ProfileBookmark

Interface Design

Copy linkTweet thisAlerts:
Jul 20.2010

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

[url]http://www.apple.com/support/[/url]

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 ?!
[COLOR=”Red”]Is this simply an HTML code?! JavaScript ?! Can [COLOR=”SeaGreen”]DreamWeaver[/COLOR] Do that ?![/COLOR]

Many thanks for any Help
?

to post a comment
Full-stack Developer

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jul 20.2010 — The page isn't that badly designed, but every design feature you see on the web is basically HTML and CSS. Some animations and things are done in JavaScript or with Flash, but nearly everything you want can be done with HTML and CSS. The better you get (i.e. the more practice) the more efficiently you'll be able to do it.

DreamWeaver presumably could do it, but I know from seeing the code here, how horrible it is, and how awkward the rollovers and things like that are implemented.

Am I to surmise that you know no HTML or CSS? I suggest you learn them [url=http://w3schools.com/]at w3schools[/url] if you intend to do a lot of web-design.
Copy linkTweet thisAlerts:
@ellias2007authorJul 27.2010 — Hi Declan1991,


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 :



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


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

When they write

[CODE]<div class="column first sidebar">
[/CODE]

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
Copy linkTweet thisAlerts:
@Declan1991Jul 28.2010 — If you want to see all CSS that is associated with an element, download and install Firebug for Firefox. If you want to do it manually, look for div, div.column, div.first, div.sidebar etc. But that's tedious to say the least, because styles can be inherited from any parent element as well.
×

Success!

Help @ellias2007 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...