Results 1 to 4 of 4

Thread: Interface Design

  1. #1
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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.

  3. #3
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 :



    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

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

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    "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:
    HTML Code:
    <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).

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
  •