SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interface Design

    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

  2. #2
    SitePoint Member
    Join Date
    Sep 2006
    Location
    Belgium
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast Baylisstic's Avatar
    Join Date
    Jul 2010
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Small panels? like the gradients? These would be images - Photoshop or something similar is what you need.

  4. #4
    SitePoint Member perth web's Avatar
    Join Date
    Jul 2010
    Location
    Perth, Western Australia
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there are sites that you can download PSD free to use.. do a search in google for them..

  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

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


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

  7. #7
    SitePoint Enthusiast Baylisstic's Avatar
    Join Date
    Jul 2010
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •