Need help getting started =)

Discussion in 'Web Design' started by IceDiver, Jan 7, 2010.

to remove all ads.
  1. IceDiver

    IceDiver New Member

    Messages:
    10
    Hello,

    I'm looking to make my own website soon and I need your help with some quite basic things that I currently dont have the hang of. My skills and experience in web design are quite limited, I have made a couple of sites in the past, a long time ago while frameset were still hot stuff.. I think those are quite outdated now?

    Anyway, I have Dreamweaver, which I thought I would give a try, so I've been looking around in the program a bit and I seem to find solutions to most problems, but one thing I need help with. I want to make a site according to the "3 column absolutely positioned, header and footer" template, which is quite a common layout. My problem is that when I make a Spry menu in the left sidebar I can't get it to target links to open in the "mainContent", or center portion of the layout. I've been looking around on google and it seems there is difficulty targeting "divs"?

    How do I go about doing this? I think that this is probably the biggest issue I will have with building my page, the rest seems to come by itself since it will be quite a simple website.

    Hope you guys can shine some light on this for me!
     
  2. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    Firstly, Framesets weren't a good idea for most applications, even when they were all the rage. :)

    Now a days, in the modern semantic web, we prefer to use CSS for our styling and HTML for our basic structure. Thus separating style from structure in the same way as we like to separate our scripts from everything else. This helps clean up our code, making it easier to go back in and make changes at a later time.

    With CSS going mainstream, we now use <div>'s instead of tables in our HTML. These are then positioned and styled through our stylesheets. As you become more familiar with CSS, you will come to realize that you will rarely position things using the position:absolute property. Instead you will find yourself using the float property a lot.

    For basic layout techniques using the float property, the Floatuturial by Max Design is a great resource, as it explains everything in detail, using simple, easy to understand terms. I can only recommend you give it a read.

    http://css.maxdesign.com.au/floatutorial/

    As for targeting your content, you aren't using frames, so there is no target. You simply place your content inside the proper div, within your layout and save the page as any other. Then link to it from your menu. This is why includes are popular, as they eliminate the need to change your links individually on each page. If you do not know what includes are, do a search for server side includes or SSI. Most articles on it date back to the stone ages, but the way they are used hasn't changed.
     
  3. jonweb2009

    jonweb2009 New Member

    Messages:
    59
    Create a centralized layout.

    The you can seperate the header footer, sidebars or use one page as the main layout theme and create other pages using this layout.

    you cannot target div's in html
     
  4. IceDiver

    IceDiver New Member

    Messages:
    10
    Thanks for your replies!

    I read about includes before I even posted this thread, didn't really get the full hang of it, but I think I understand the principle. The problem with includes I think is the fact that you have to reload the entire page every time you click on a link in the menu?

    I understand that when using html you cant target divs, but what about AJAX? (never heard of it before btw..)

    I read this tutorial here, but I didnt get it to work in DW. When I click the link in div "sidebar1" that is supposed to open in "mainContent" which is the default name for the center div, nothing happens. Do you know how to get this to work? Do I need to enable javascript or something in DW?

    If I cant do this using AJAX, then I will go for includes for sure, but I think its nicer to not reload the page all the time, saving bandwidth and seems a little bit more professional to me?
     
  5. orangecopper

    orangecopper New Member

    Messages:
    327
    Hmm...
    Its a very common issue discussed or a webdesigner comes accross.
    firstly, if its a static website that your are developing, then its not a big issue if the whole page is refreshed, it Would not waste your bandwidth as the graphics already downloaded would be taken from the cache or temp folders, So no bandwidth loss at all.

    Further if you dont love developing the page in such a way that it reloads everything.
    Then below are the options you could possibly use

    1. Using a template system, develop a page in Dreamweaver and save it as "template" and re use the template ( dreamweaver help will make it clear) in this case, DW asssigns id to that design block and it would be statically available on the page and locad the rest of content

    2. Using a Dynamic template in PHP like smarty templates, in this case the code is developed already for header, footer, sidebars body etc and called as blurbs or functions.

    3. Ajaxify your website. A short note on ajax , its simply not something that came out of the blue, it was already there in java script, but a HTT function was used to make use of the javascript that enables the script to load the content internally without loading the page.

    Summary.
    To keep it simple i suggest you to use CSS if you know, If you are not sure, use Tables in Dreamweaver, start with parent table with 0 value of cell space and cell padding.
    Set it to 100% (not pixel) width. and build tables within it ! (like one more table in it and split it into 3 columns, 3 rows ( 1 row for header, one for body and one for footer )

    Specify cellpadding and cell spacing. and insert content, select tables and align them.

    insert content and spacing. (all in % for cross bowser compatibility.)
    Hope these points helped, if not let me know what you need more in any way i could share.

    Cheers
    Josh
     
  6. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    While I agree with you to a point, this really is a non-issue in most cases. However, a simple solution to your problem would be something like this.

    First off create a file containing the following Javascript function. I'll name it main.js for the sake of this example.

    Code:
    function tabSwitch_2(active, number, tab_prefix, content_prefix) {  
    	for (var i=1; i < number+1; i++) {  
    		document.getElementById(content_prefix+i).style.display = 'none';  
    		document.getElementById(tab_prefix+i).className = '';  
    	}  
    	document.getElementById(content_prefix+active).style.display = 'block';  
    	document.getElementById(tab_prefix+active).className = 'active';      
    }  
    
    Then in your index.html file you have something along these lines.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Example</title>
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="main.js"></script>
    
    </head>
    
    <body>
    	<div id="container">
    		<div id="column1">
    			<ul>
    				<li><a href="javascript:tabSwitch_2(1, 5, 'tab_', 'content_');" id="tab_1"  class="active">link 1</a></li>
    				<li><a href="javascript:tabSwitch_2(2, 5, 'tab_', 'content_');" id="tab_2">link 2</a></li>
    				<li><a href="javascript:tabSwitch_2(3, 5, 'tab_', 'content_');" id="tab_3">link 3</a></li>
    				<li><a href="javascript:tabSwitch_2(4, 5, 'tab_', 'content_');" id="tab_4">link 4</a></li>
    				<li><a href="javascript:tabSwitch_2(5, 5, 'tab_', 'content_');" id="tab_5">link 5</a></li>
    			</ul>
    		</div>
    		<div id="column2">
    			<div id="content_1" class="content_container">
    				Content for Link 1
    			</div>
    			<div id="content_2" class="content_container" style="display:none;">
    				Content for Link 2
    			</div>
    			<div id="content_3" class="content_container" style="display:none;">
    				Content for Link 3
    			</div>
    			<div id="content_4" class="content_container" style="display:none;">
    				Content for Link 4
    			</div>
    			<div id="content_5" class="content_container" style="display:none;">
    				Content for Link 5
    			</div>
    		</div>
    	</div>
    </body>
    </html>
    
    And of course we can't forget the our CSS stylesheet named style.css.

    Code:
    #container {
    	width: 960px;
    }
    
    #column1 {
    	float: left;
    	width: 200px;
    }
    
    #column1 ul {
    	float: left;
    	position:relative;
    	width: 200px;
    	display: block;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    #column1 ul li {
    	float: left;
    	position:relative;
    	display: block;
    	width: 200px;
    	background-color: #666666;
    	border-bottom-color: #000000;
    	border-top-color: #CCCCCC;
    	border-bottom-width: 1px;
    	border-top-width: 1px;
    	border-top-style: solid;
    	border-bottom-style: solid;
    }
    
    #column1 ul li a:link, #column1 ul li a:active {
    	display:block;
    	color: #FFFFFF;
    	padding: 3px 5px;
    	text-decoration: none;
    }
    
    #column1 ul li a:hover {
    	color: #FFFFFF;
    	font-weight: 600;
    	background-color: #999999;
    	text-decoration: none;
    }
    
    #column1 ul li a.active {
    	display:block;
    	color: #FFFFFF;
    	font-weight: 600;
    	background-color: #990000;
    	padding: 3px 5px;
    	text-decoration: none;
    }
    
    #column2 {
    	float: left;
    	width: 760px;
    }
    
    .content_container {
    	float: left;
    	width: 750px;
    	margin-left: 10px;
    }
    
    I also included this example in the attached archive. Hope this helps. :)
     

    Attached Files:

  7. IceDiver

    IceDiver New Member

    Messages:
    10
    Thanks for all your help and showing different solutions.
    I am currently using dreamweaver templates to do it, and it seems to work well along with being the easiest alternative.

    How can I make my gallery act so that when I hover over a picture I get a larger preview to show? I think this is javascripted or something.

    Here is an example:

    Link
     
  8. orangecopper

    orangecopper New Member

    Messages:
    327
    hey there..

    there are many many options to achieve this using jquery, mootools etc.
    A simpler Version of this would be using Highslide JS or Thumbshots, they are free and very easy to configure, it could give the same effect or even better, you can also do a google search with " auto thmbnailer scripts "

    Also the article here should help you: How to create portfolio thumbnails with auto preview

    Hope it helped
    cheers
    Josh
     
  9. IceDiver

    IceDiver New Member

    Messages:
    10
    I managed to create a gallery which works nicely and satisfies my needs. Now I am looking at making a guestbook for my site, I dont really understand how this works, it seems like you need a PHP4 / MySQL server and stuff?

    I only have a web hosting through my ISP, and I dont quite remember what support their servers have for this kind of thing, but how would I install a guestbook, and what good ones are there?
     
  10. orangecopper

    orangecopper New Member

    Messages:
    327
  11. lora.john

    lora.john New Member

    Messages:
    1
    I guess you need to learn some basics and use a friendly HTML/CSS editor like MS frontpage or dreamweaver, they make the life alot easier inthe beginning, goodluck
     
  12. IceDiver

    IceDiver New Member

    Messages:
    10
    I downloaded Jibberbook, but I cant get it to work..?

    If I link to it from my menu it will open over the whole screen, and only say "Jibberbook — A Free AJAX Guestbook", but there is no guest book anywhere?

    I tried to use php include to open it in my mainContent div, ie. the middle one, but that wont do anything.

    How do I get this thing up and running? I would like it to open in my main div instead of over the whole page.
     
  13. IceDiver

    IceDiver New Member

    Messages:
    10
    Anyone here who might know what the problem is with my guestbook and a php contact form that I am trying to php include in my div?

    They simply wont work :S

    Does the server need some special software to be able to run them? Since the web hosting is an ftp provided by my ISP I dont know if I can control that kind of stuff, and I certainly dont have any knowledge on it.

    EDIT:

    I've checked my ISP web hosting, and they do not support server side scripting. Is it possible to make a contact form and guestbook without that kind of scripting?
     
    Last edited: Jan 13, 2010

Share This Page