FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


Site Nav Suggestions...





tidruG
Hey guys help me out here...
I'm designing a new site from scratch.
Can some suggest anything for the menu/navigation...?
I don't know DHTML/Javascript or any of the scripting languages... so please, all suggestions must be made keeping that in mind...
Originally, I was going to use some Javascript menu from some free-scripts site, make the modifications and store them as one file, giving the links to every page in the site, so that whenever I want to modify the menu, I won't have to do it on all pages, I can just do it on the one file containing all menu information....
Anyone have any better ideas, or suggestions for websites from where I can get Menu scripts?


Any and all suggestions are welcomed.
littlegiant
Quote:
Originally, I was going to use some Javascript menu from some free-scripts site, make the modifications and store them as one file, giving the links to every page in the site, so that whenever I want to modify the menu, I won't have to do it on all pages, I can just do it on the one file containing all menu information....


Not sure if you thought Javascript would take care of the one-file site menu process for you (I didn't think that was possible but I could be wrong). I use SSI to create a one-file site menu that is automatically inserted on every page on my site. You can implement SSI by inserting the following code in between the <body>...</body> tags of all the pages on your site that you wish to have a site menu:

<!--#include virtual="sitemenu.inc"-->

The sitemenu.inc file contains the HTML code for your site menu. No <html>, <head> or <body> tags are required. Just the code to create the menu.

As for the menu itself, if it doesn't contain alot of links, I'd steer away from DHTML as a significant number of people these days are now surfing with Javascript turned off.

(edit)

Woops. Forgot to mention that all pages running SSI should carry the .shtml extension. You can run SSI on .htm or .html files but that's a little more complicated.
devadutta
tidrug wrote:
Hey guys help me out here...
I'm designing a new site from scratch.
Can some suggest anything for the menu/navigation...?
I don't know DHTML/Javascript or any of the scripting languages... so please, all suggestions must be made keeping that in mind...
Originally, I was going to use some Javascript menu from some free-scripts site, make the modifications and store them as one file, giving the links to every page in the site, so that whenever I want to modify the menu, I won't have to do it on all pages, I can just do it on the one file containing all menu information....
Anyone have any better ideas, or suggestions for websites from where I can get Menu scripts?


Any and all suggestions are welcomed.


I personally feel that You should keep away from scripts for navigation.
Keep it as simple text links. People really like it that way(Not only my opinion,but of many other webmasters think the same). Keep text links at clever locations and keep the layout simple.
And all these do not require any JS of DHTML. all you need is html.
If you still want to use it,
Navi scripts are available in bulk at www.hotscripts.com
tidruG
OK i'll try doing some research on SSI (I have absolutely no idea what it is or what its full form is) and also try to think if I can insert normal text links... maybe I could use Shared Borders in Frontpage... what say?
littlegiant
SSI stands for Server Side Includes

You can get the full details here -

http://httpd.apache.org/docs/howto/ssi.html

The part that I was referring to can be found here -
http://httpd.apache.org/docs/howto/ssi.html#includingastandardfooter

FriHost supports SSI.

Sorry I don't know much about using FrontPage. I create web pages by editing the HTML directly (the best way IMHO).
tidruG
Yeah well, I suppose you think it's kinda lame to use a HTML Editor... lol, got a friend who agrees with you...

But frankly, I use a WSIWYG editoe because it makes formatting and hyperlinking easier and faster, at least to me. lol. And among the WYSIWYG editors I've used, I've found Frontpage the best... even better than Dreamweaver.
littlegiant
Lame? No, I wouldn't say that exactly as long as one who uses WYSIWYG has no delusions about being a professional web designer (for which knowing HTML is a must).

I've received emails from people telling me that Dreamweaver is far more difficult to master than learning HTML coding. Now I haven't tried Dreamweaver yet but I don't doubt it. I spent some time trying to tutor someone on how to use Netscape Composer and it was no picnic.

As for WYSIWYG in general, some operations may appear to be faster but your options are definitely limited compared to working directly with the source code. Moreover there are several excellent HTML editors (i.e. text editors) that can be custom configured to perform so fast that it's almost like WYSIWYG (better in fact).
tidruG
Well, I'm not a complete dud when it comes to HTML. I use Frontpage, but if you gimme a HTML editor without WYSIWYG, I think I can survive. lol.

Anyway, yeah, it takes a lot of patience to learn a WYIWYG editor too, because some options are sort of limited and you really have to think of a way out of a sticky spot.... but in the end, if nothing works, I edit the HTML directly... it's all really a question of how and what you get used to, by frequent use.
THE11thROCK™
If anyone is not used to using Frontpage, there's no problem with HTML editing. You can even construct your page from scratch using Frontpage with HTML editor built-in. Very Happy
tidruG
that's correct. Frontpage has got a built-in HTML editor. It was added in Frontpage 2002 (xp), and that's about the best new feature in Frontpage xp. I haven't bought Office 2004 yet, so does anyone have any dieas about anything awesome in FP 2004?
billybob
if you dont know java just create ur own buttons u cant still make them animated + look gud this is a bad example http://themesite.atspace.com
Texas Al
It's okay that you don't know HTML/PHP/CSS, that's not a problem. Just be warned that the process of following my advice may result in you learning something about them even if you didn't intend to. If you absolutely do not want to learn anything, go with FrontPage. Otherwise...

Go into the Fantastico item on your cPanel (on Frihost) and see what it has available. Fantastico can install these things for you with just a few clicks.

If your site has a bunch of different moderately sized pages, you should install one of the two items in the Wiki section, doesn't matter which one, though I use TikiWiki. People think of wikis as collaboration tools but even if you're the only person using it, it's still a handy way to keep your site up to date without having to hand-code pages.

If your site is just one big page with lots of little writeups on it, you should install one of the many weblog items Fantastico offers. I don't know which one to recommend... I use Mambo, but that's a CMS rather than just a weblog, and the learning curve is a bit steep. Maybe install several, play with them, and see which you like better.

So there you go-- a no-HTML way to have a website. But then you'll start wanting to make it look different from all the other websites out there... and there's the part where you start unintentionally learning things. If the wiki or blog you're using supports templates, you may find yourself figuring out how to customize the colors and graphics (thus learning a little HTML, CSS, and maybe PHP). If not, you may find yourself hacking the source for the program (thus learning a lot of PHP and maybe HTML and CSS).

But this is an easier and more fun way to learn than methodically trying to memorize stuff as if it's some kind of homework. When you learn by doing you learn what you need when you need it.

I would suggest staying away from Javascript unless it's impossible to do what you need to do any other way-- Javascript slows down page-load times and most of the stuff people want-- flyovers, tool-tips, scrollbars, etc. can be accomplished using CSS alone.
tidruG
Thanks for posting in your suggestions. Of course I want to learn more stuff, Al.

Anyway, I haven't had much time to make the site yet. So I guess I'll first make a new site, even if it only has a few pages, and then check out Fantastico. I haven't had much time to devote to my site of late.

Thanks for the suggestions. Keep posting, though Very Happy
mike4652
Have you ever tried HTML kit?
It not only offers loads of plug-ins but it does have a prototype editor in it that gives you visual editing. It also is great for learning HTML,CSS.
And best of all it is free.
http://www.chami.com/html-kit/
I have been using it for a long time and it is a great program.
I also have FP 2000 when I need to test a layout, or background.
You might say I have a problem or habit of trying as many editors that I can get my hands on. But that is how I learn .
rpp
i like to use DHTML nav links.
digibluez
Here's my solution,i suggest ot use php.extension if you have a html editor,that shows only html files use it,but after you done,change ext. to php.
It's lot easier to make coplicated nav pages in php.

I'll show what i use.The whole structure---some may got better solutions but here's my 2 cents for ya.
MY current site dose not have it implented so dont bother going ot look it.
I'ts my current projects stuff that im' working on.I'm not soem pro ,just a newb in php...but still i think i could give you inspiration of learning soem more php/mysql.what i know,i learner from the NET by myself.

/WWW/xxx/
--------------
./inc ...functions.php; pngfix.php; nav.php; img.php...etc.
./img ...lots of images(lol)
./templates ...the base files
./boards ...miniBB
./chat ...phpopenchat
./gallery ...adobe flash gallery
./styles ...img.css; links.css; portal.css; why so many files?I use dreamweaver and it is easier to keep track of the styles.
./db ...flat files databases quotes.db; facts.db; etc.
./scripts/ ...misc scripts folder
./js ...where all the javascripts lie in!
./whatever ....whatever...(lol)
--------------
You need many files,so it wont be a big mess.
Now lets take a closer look of my files:
Functions.php this is the main files where all my php functoins are stored.
Its included in index.php.

functions.php

Code:
<?
if((getenv("HTTP_USER_AGENT") == "Microsoft URL Control - 6.00.8862") || (getenv("HTTP_USER_AGENT") == "Microsoft URL Control - 6.00.8169")){
exit;
}
define('_VALID_INCLUDE', TRUE); //to keep unwanted visitors away from include files
function compress_output_gzip($output) {return gzencode($output);}
function compress_output_deflate($output) {return gzdeflate($output, 4);}
if(isset($_SERVER['HTTP_ACCEPT_ENCODING'])) {$AE = $_SERVER['HTTP_ACCEPT_ENCODING'];} else {$AE = $_SERVER['HTTP_TE'];}
if ($support_deflate) {header("Content-Encoding: deflate"); ob_start("compress_output_deflate");}
else{if ($support_gzip){header("Content-Encoding: gzip"); ob_start("compress_output_gzip");}
else {ob_start(); }}
$templatepath="/www/xampp/htdocs/brucewillis/v4/templates" ;
$root="/www/xampp/htdocs/brucewillis/v4" ;
// Cracker Tracker Protection System
// Created by: www.cback.de
// Begin CrackerTracker  StandAlone
$cracktrack = $_SERVER['QUERY_STRING'];
$wormprotector = array('chr(', 'wget', 'cmd=', 'rush=', 'union', 'UNION', 'echr(', 'esystem(', 'cp%20', 'mdir%20', 'mcd%20', 'mrd%20', 'rm%20', 'mv%20', 'rmdir%20', 'chmod(', 'chmod%20', 'chown%20', 'chgrp%20', 'locate%20', 'grep%20', 'diff%20', 'kill%20', 'kill(', 'killall', 'passwd%20', 'telnet%20', 'vi(', 'vi%20', 'INSERT%20INTO', 'SELECT%20', 'nigga', 'fopen', 'fwrite', '$_REQUEST', '$_GET');
$checkworm = str_replace($wormprotector, '*', $cracktrack);
if ($cracktrack != $checkworm){
$cremotead = $_SERVER['REMOTE_ADDR'];
$cuseragent = $_SERVER['HTTP_USER_AGENT'];
die( "Attack detected! <br /><br /><b>Hack Somewhere else moron</b><br />$cuseragent" );}
// End CrackerTracker StandAlone


As you may know the png files dont appear transperet in IE.It will be fixed in IE7,but till then i use this,took me soem time to google it.

pngfix.php

Code:
<?php
/**
*  KOIVI PNG Alpha IMG Tag Replacer for PHP (C) 2004 Justin Koivisto
*  Version 2.0.11
*  Last Modified: 8/4/2005

*  This library is free software; you can redistribute it and/or modify it
*  under the terms of the GNU Lesser General Public License as published by
*  the Free Software Foundation; either version 2.1 of the License, or (at
*  your option) any later version.

*  This library is distributed in the hope that it will be useful, but
*  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
*  or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public
*  License for more details.

*  You should have received a copy of the GNU Lesser General Public License
*  along with this library; if not, write to the Free Software Foundation,
*  Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA

*  Full license agreement notice can be found in the LICENSE file contained
*  within this distribution package.

*  Justin Koivisto
justin.koivisto@gmail.com
*  http://www.koivi.com
*
*  Modifies IMG and INPUT tags for MSIE5+ browsers to ensure that PNG-24
*  transparencies are displayed correctly.  Replaces original SRC attribute
*  with a binary transparent PNG file (spacer.png) that is located in the same
*  directory as the orignal image, and adds the STYLE attribute needed to for
*  the browser. (Matching is case-insensitive. However, the width attribute
*  should come before height.

*  Also replaces code for PNG images specified as backgrounds via:
*  background-image: url(image.png); or background-image: url('image.png');
*  When using PNG images in the background, there is no need to use a spacer.png
*  image. (Only supports inline CSS at this point.)

*  @param string $x  String containing the content to search and replace in.
*  @param string $img_path   The path to the directory with the spacer image relative to
*                      the DOCUMENT_ROOT. If none os supplied, the spacer.png image
*                      should be in the same directory as PNG-24 image.
*  @param string $sizeMeth   String containing the sizingMethod to be used in the
*                      Microsoft.AlphaImageLoader call. Possible values are:
*                      crop - Clips the image to fit the dimensions of the object.
*                      image - Enlarges or reduces the border of the object to fit
*                              the dimensions of the image.
*                      scale - Default. Stretches or shrinks the image to fill the borders
*                              of the object.
*  @param bool   $inScript  Boolean flag indicating whether or not to replace IMG tags that
*                      appear within SCRIPT tags in the passed content. If used, may cause
*                      javascript parse errors when the IMG tags is defined in a javascript
*                      string. (Which is why the options was added.)
*  @return string
*/
function replacePngTags($x,$img_path='',$sizeMeth='scale',$inScript=FALSE){
    $arr2=array();
    // make sure that we are only replacing for the Windows versions of Internet
    // Explorer 5.5+
    $msie='/msie\s(5\.[5-9]|[6-9]\.[0-9]*).*(win)/i';
    if( !isset($_SERVER['HTTP_USER_AGENT']) ||
        !preg_match($msie,$_SERVER['HTTP_USER_AGENT']) ||
        preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']))
        return $x;

    if($inScript){
        // first, I want to remove all scripts from the page...
        $saved_scripts=array();
        $placeholders=array();
        preg_match_all('`<script[^>]*>(.*)</script>`isU',$x,$scripts);
        for($i=0;$i<count($scripts[0]);$i++){
            $x=str_replace($scripts[0][$i],'replacePngTags_ScriptTag-'.$i,$x);
            $saved_scripts[]=$scripts[0][$i];
            $placeholders[]='replacePngTags_ScriptTag-'.$i;
        }
    }

    // find all the png images in backgrounds
    preg_match_all('/background-image:\s*url\(([\\"\\\']?)([^\)]+\.png)\1\);/Uis',$x,$background);
    for($i=0;$i<count($background[0]);$i++){
        // simply replace:
        //  "background-image: url('image.png');"
        // with:
        //  "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
        //      enabled=true, sizingMethod=scale, src='image.png');"
        // I don't think that the background-repeat styles will work with this...
        $x=str_replace($background[0][$i],'filter:progid:DXImageTransform.'.
                'Microsoft.AlphaImageLoader(enabled=true, sizingMethod='.$sizeMeth.
                ', src=\''.$background[2][$i].'\');',$x);
    }

    // find all the IMG tags with ".png" in them
    $pattern='/<(input|img)[^>]*src=([\\"\\\']?)([^>]*\.png)\2[^>]*>/i';
    preg_match_all($pattern,$x,$images);
    for($num_images=0;$num_images<count($images[0]);$num_images++){
        // for each found image pattern
        $original=$images[0][$num_images];
        $quote=$images[2][$num_images];
        $atts=''; $width=0; $height=0; $modified=$original;

        // We do this so that we can put our spacer.png image in the same
        // directory as the image - if a path wasn't passed to the function
        if(empty($img_path)){
            $tmp=split('[\\/]',$images[3][$num_images]);
            $this_img=array_pop($tmp);
            $img_path=join('/',$tmp);
            if(empty($img_path)){
                // this was a relative URI, image should be in this directory
                $tmp=split('[\\/]',$_SERVER['SCRIPT_NAME']);
                array_pop($tmp);    // trash the script name, we only want the directory name
                $img_path=join('/',$tmp).'/';
            }else{
                $img_path.='/';
            }
        }else if(substr($img_path,-1)!='/'){
            // in case the supplied path didn't end with a /
            $img_path.='/';
        }

        // If the size is defined by styles, find them
        preg_match_all(
            '/style=([\\"\\\']).*(\s?width:\s?([0-9]+(px|%));).*'.
            '(\s?height:\s?([0-9]+(px|%));).*\\1/Ui',
               $images[0][$num_images],$arr2);
        if(is_array($arr2) && count($arr2[0])){
            // size was defined by styles, get values
            $width=$arr2[3][0];
            $height=$arr2[6][0];

            // remove the width and height from the style
            $stripper=str_replace(' ','\s','/('.$arr2[2][0].'|'.$arr2[5][0].')/');
            // Also remove any empty style tags
            $modified=preg_replace(
                '`style='.$arr2[1][0].$arr2[1][0].'`i',
                '',
                preg_replace($stripper,'',$modified));
        }else{
            // size was not defined by styles, get values from attributes
            preg_match_all('/width=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
            if(is_array($arr2) && count($arr2[0])){
                $width=$arr2[2][0];
                if(is_numeric($width))
                    $width.='px';
   
                // remove width from the tag
                $modified=str_replace($arr2[0][0],'',$modified);
            }
            preg_match_all('/height=([\\"\\\']?)([0-9%]+)\\1/i',$images[0][$num_images],$arr2);
            if(is_array($arr2) && count($arr2[0])){
                $height=$arr2[2][0];
                if(is_numeric($height))
                    $height.='px';
   
                // remove height from the tag
                $modified=str_replace($arr2[0][0],'',$modified);
            }
        }

        if($width==0 || $height==0){
            // width and height not defined in HTML attributes or css style, try to get
            // them from the image itself
            // this does not work in all conditions... It is best to define width and
            // height in your img tag or with inline styles..
            if(file_exists($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images])){
                // image is on this filesystem, get width & height
                $size=getimagesize($_SERVER['DOCUMENT_ROOT'].$img_path.$images[3][$num_images]);
                $width=$size[0].'px';
                $height=$size[1].'px';
            }else if(file_exists($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images])){
                // image is on this filesystem, get width & height
                $size=getimagesize($_SERVER['DOCUMENT_ROOT'].$images[3][$num_images]);
                $width=$size[0].'px';
                $height=$size[1].'px';
            }
        }
       
        // end quote is already supplied by originial src attribute
        $replace_src_with=$quote.$img_path.'spacer.gif'.$quote.' style="width: '.$width.
            '; height: '.$height.'; filter: progid:DXImageTransform.'.
            'Microsoft.AlphaImageLoader(src=\''.$images[3][$num_images].'\', sizingMethod='.
            $sizeMeth.');"';

        // now create the new tag from the old
        $new_tag=str_replace($quote.$images[3][$num_images].$quote,$replace_src_with,
            str_replace('  ',' ',$modified));
        // now place the new tag into the content
        $x=str_replace($original,$new_tag,$x);
    }
   
    if($inScript){
        // before the return, put the script tags back in. (I was having problems when there was
        // javascript that had image tags for PNGs in it when using this function...
        $x=str_replace($placeholders,$saved_scripts,$x);
    }
   
    return $x;
}
?>


Make sure you got a blank spacer.gif in the./ img dir.This script also makes it so that all IE users wont be able to copy any png images from your site,all they get is a spacer.gif even in the source code.
to make it work you need to put te following code at the last line in your index.php
Code:
<?php include_once 'inc/pngfix.php';
echo replacePngTags(ob_get_clean());?>


now lets take a look at my navigation file.
nav.php


Code:
<?
 defined('_VALID_INCLUDE') or die('Direct access not allowed.');


error_reporting (E_ALL ^ E_NOTICE);
if(!$go){ $go = $HTTP_GET_VARS['go']; }

if($go=="" or $go=="home"){
   include_once("$root/index.php");
}elseif($go=="main"){
   include("$templatepath/nav_center.php");
}elseif($go=="disclaimer"){
   include("$root/pages/disclaimer.php");
   if($go=="news"){
   include("$root/news/show_news.php");
}elseif($go=="headlines"){
      include("$root/news/show_news.php");
}elseif($go=="archives"){
   include("$root/news/show_archives.php");
}elseif($go=="search"){
   include("$root/news/search.php");
   }elseif($go=="journalists"){
   include("$root/news/members.php");


}
This means if you put a link i index.php <a href="?go=headlines">headlines</a> it includes the page $root/news/show_news.php /the function root look at functions.php
Therewore you only need one base files index.php No need to add all graphics to other files.All processes willl be made trough index.php

Now you can also make seperate nav_left.php nav right.php whatever to include.But dont forget to add...defined('_VALID_INCLUDE') or die('Direct access not allowed.'); .to keep away some visitors.Or bots.

Ok now lets get over with it.
My index.php Smile yes finnaly the heart.

Code:
<?php include_once("inc/functions.php");?>
<!-- _*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_


         Created and maintained by Ruudik Niitmets (http://www.digibluez.no-ip.org)
         COPYRIGHT 2005 Ruudik Niitmets,
         Digibluez@gmail.com.
      
       You are not allowed to use the CSS file or any other scripts,graphics from this webiste.
       Content and all news belong to Bruce Willis Fan Site Http://brucewillis.no-ip.org
       All other trademarks and images are the property of their respective owners.
      
       Made with Macromeida DreamweaverMX,PhotoshopCS2.
                 
_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_*_ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="imagetoolbar" content="false"/>
<meta name="Content-Language" content="en-GB" />
<meta name="MSSmartTagsPreventParsing" content="true"/>
<title>BRUCE WILLIS | FANS | INTERACT</title>
<meta name="title" content="Bruce Willis Fanpage(Photos,Movie info's,Bio,Filmography)" />
<meta name="Description" content="Bruce Willis fanpage.Full Movie Stills gallery,photos,biography,detailed filmography." />
<meta name="Keywords" content="HOSTAGE, Bruce Willis, Bruce, Willis, Official, actor, Die Hard, Moonlighting,bruce willis,brucewillis,bw,fanpage,sincity,photos,images,pictures,gallery,brucewillis.no-ip.org,bio,films,fimlography,movies,info,men,sexy men,strong men,celebrity's,moviestars,hollywood,celebs," />
<meta name="author" content="ruudik niitmets,http://digibluez.no-ip.org/,digibluez@gmail.com" />
<meta name="copyright" content="ruudik niitmets 2005,digibluez.no-ip.org" />
<meta name="robots" content="ALL" />
<meta name="revisit-after" content="5 days" />
<meta name="document-rating" content="General" />
<meta name="distribution" content="global"/>
<meta name="Document-state" content="Dynamic">
<meta name="cache-control" content="Public" />
<link rel="author" href="http://digibluez.no-ip.org/"/>
<link rel="home" title="home" href="http://brucewillis.no-ip.org/"/>
<link rel="shortcut icon" href="http://localhost/brucewillis/v3/styles/images/favico.ico" type="image/x-icon" />
<!--<script type="text/javascript" src="http://www.makepovertyhistory.org/whiteband_small_right.js"></script>
<script type="text/javascript" src="http://openmind.clemish.com/webbands/random_right.js"></script>-->
<link href="styles/portal.css" rel="stylesheet" type="text/css"/>
<link href="styles/links.css" rel="stylesheet" type="text/css"/>
<link href="styles/tables.css" rel="stylesheet" type="text/css"/>
<link href="styles/img.css" rel="stylesheet" type="text/css"/>
</head><body><div id="center" align="center">
<table width="744"  border="0" cellpadding="0" cellspacing="0" class="table">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="whitbg"><a class="navmenu" href="?go=films">Films</a>::
<a class="navmenu" href="?go=bio">Bio</a>::
<a class="navmenu" href="?go=quotes">Quotes?</a>::
<a class="navmenu" href="?go=facts">Facts</a>::
<a class="navmenu" href="?go=photos">Photos</a>::</td>
  </tr>
  <tr>
    <td class="whitbg">
<a class="navmenu" href="http://localhost/brucewillis/v4/boards/">Forums</a>::</td>
  </tr>
</table>
<table width="744" border="0" align="center" cellpadding="0" cellspacing="0" class="table">
  <tr>
<td width="889" height="318" valign="top" class="centercontent"><? include"$root/inc/nav.php"; ;include"$root/boards/news.php";?></td>
<td width="114" align="right" valign="top"><table width="113" border="0" cellpadding="0" cellspacing="0">
  <tr>
<td width="71" align="right"><img src="/brucewillis/v4/scripts/php/randomimage.php" alt="bruce willis photos" width="100" height="150" border="0"/></td>
</tr></table>
<table width="114" border="0" cellpadding="0" cellspacing="0" class="content"><tr><td align="right" >
</td>
</tr></table>
<table width="114" border="0" cellpadding="0" cellspacing="0" class="content"><tr><td align="right">
&nbsp;</td></tr></table>
<table width="114" border="0" cellpadding="0" cellspacing="0" class="content"><tr><td align="right">
&nbsp;</td></tr></table></td></tr></table>
<a href="rss2.php" rel="nofollow"><img src="http://localhost/brucewillis/v4/img/xmlrss.gif" alt="rss" class="noborder"  /></a>
<a href="http://www.mozilla.org/products/firefox/" rel="nofollow"> <img src="http://localhost/brucewillis/v4/img/firefox_copy2.gif" alt="firefox"  class="noborder"  /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer" rel="nofollow"><img src="http://localhost/brucewillis/v4/img/css.png" alt="CSS valid"  class="noborder" /></a>
<a href="http://validator.w3.org/check?uri=referer" rel="nofollow"><img src="http://localhost/brucewillis/v4/img/xhtml10.png" alt="xhtml valid"  class="noborder" /></a>
<a href="http://php.net"><img src="http://localhost/brucewillis/v4/img/php.gif" alt="php powered" class="noborder" /></a> 
<a href="http://macromedia.com" rel="nofollow"><img src="http://localhost/brucewillis/v4/img/dreamweaver.gif" alt="made with dreamweaver" class="noborder"></a>
<img src="http://localhost/brucewillis/v4/img/noie.gif" alt="noexplorer"  class="noborder"  />
<a href="http://zvonnews.sourceforge.net/" rel="nofollow"><img src="http://localhost/brucewillis/v4/img/zflogo.png" alt="powered by zfeeder" class="noborder"></a>
<a href="http://minibb.net/" rel="nofollow"><img src="http://localhost/brucewillis/v4/img/minibb.jpg" alt="powered by minibb2005" class="noborder"></a>
<br/>
<a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" rel="nofollow"><img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights.gif" /></a>
</div></body><?php include_once 'inc/pngfix.php';
echo replacePngTags(ob_get_clean());?></html>



[code<? include"$root/inc/nav.php";?>][/code]This is the place where all other pages will be included if you got a link like ?go=headlines
then the code in nav.php ?go=headlines will be included.


Any questions suggestions.
Hope it helps some one.

And BTW dont use this as a tut or at your scripts page.All rights belong to me Smile
digibluez
Geez. double post erro ..lol darn phpbb
mike4652
If you down load 1st Page 2000, It has a automatic java code generator for image swapping. You can make buttons for your nav. and use a image swap effect. http://www.evrsoft.com/ The editor is Free no strings attached. It also has some stock DHTML scripts with it. It is real easy to set it up also. Laughing

If you like using Front Page, You can use shared borders to set your navigation up in. Then you only have to edit it on any one single page and it will update all pages in your web.
tidruG
mike4652 wrote:
If you like using Front Page, You can use shared borders to set your navigation up in. Then you only have to edit it on any one single page and it will update all pages in your web.


That's what I'm planning on... however, with the shared border, it becomes very hard to see its HTML and change the script to your liking... but most likely, I'm going to make a simple text-link Navigation Bar structure... Most likely going to use DHTML or CSS for the table cell effects... now just have to look for a simple CSS or DHTML - based script.

BTW, you don't have to use Javascript to change your button on mouseover. It can be done with DHTML... and with FrontPage, it's even easier... no coding required... just use the mouse to select the buttons and the changed buttons after the mouseover.
mike4652
Front Page does make it easy to do mouseovers but it still has problems with it's code. It is a bit unstable. For a good mouseover, 1st Page 2000 is real simple and stable. Have you ever used the hover button style in Frontpage? I guess I just like a plain HTML editor. Laughing
tidruG
mike4652 wrote:
Front Page does make it easy to do mouseovers but it still has problems with it's code. It is a bit unstable. For a good mouseover, 1st Page 2000 is real simple and stable. Have you ever used the hover button style in Frontpage? I guess I just like a plain HTML editor. Laughing


Don't EVER use the Hover button or those other stupid things... they mess up the code. I was talking about DHTML effects... most of those also are among the things in FP that I wouldn't recommend to anyone not lazy, but the Mouse-over Image changer DHTML effect is good... works well on all browsers as well... try it once if you have FP. Otherwise, of course, your method is good enough,
mike4652
Quote:
Don't EVER use the Hover button or those other stupid things...

That is a under statement. Laughing I made that mistake once upon a time. and it was a big mistake. the whole site turned to junk real fast. Crying or Very sad
That is one of the many reasons why I don't use front page.
Over all it sure junks up code.
lockwolf
A few site nav tips

1. Decide whats important: A good thing to know is what do you want people to find out about your site. Go through and prioritise your site by what you want people to go to.

2. Make important stuff easy to get to: once you have decided what you want everyone to go towards, make it easy to access. You dont want people to go through 50 pages to get to the forums or something like that

3. Avoid putting something less important on the homepage: You dont need a link to something like a small game (if more than one) or a single tutorial (if more than one) on the homepage. If you have a large ammount of something, you should have a path like Home>Games>Action>Game or whatever.

4. Make it easy to get back to the homepage: Kinda A DUH but its true, if the person has to retype your url in every time they want to get to the homepage, people will get annoyed.

Thats all I got this late at night
mcridder
www.dynamicdrive.com and http://javascriptkit.com have many varieties of these as well as other forms of interactivity.


or


SoThink DHTML Menu > http://sothink.com/webtools/dhtmlmenu/index.htm


Twisted Evil Twisted Evil Twisted Evil
threezeroone
Site Nav Suggestions? well, keep your navigation simple. Use menus if necessary. That would be helpful if lots of sections are in one page. Wink
Antwon
Screw the HTML editors! Screw the FrontPage! Screw the learning! Love the copy and paste!

Code:

<html>
<head>
<title>
YOUR TITLE HERE
</title>


<!-- Controls Color And Shtuff For Menu -->


<style type="text/css">
<!--
.menutitle{
   cursor:pointer;
   margin-bottom:0px;
   background-color:#3300CC;
   color:#FFFFFF;
   font-family:Verdana, sans-serif;
   font-size:8pt;
   font-weight:bold;
   text-align:left;
   padding:5px;
   border-bottom:1px solid #330000;
}
.menutitlehover{
   cursor:pointer;
   margin-bottom:0px;
   background-color:#0099FF;
   color:#FFFFFF;
   font-family:Verdana, sans-serif;
   font-size:8pt;
   font-weight:bold;
   text-align:left;
   padding:5px;
   border-bottom:1px solid #330000;
}
.submenu{
   margin-bottom:0px;
   color:#000000;
}
.suboption{
   padding:1px;
   padding-left:5px;
   color:#FFFFFF;
   background-color:#000000;
   font-size:8pt;
   text-align:left;
   font-weight:bold;
   cursor:pointer;
   letter-spacing:1px;
}
.suboptionhover{
   padding:1px;
   padding-left:5px;
   color:#FFFFFF;
   background-color:#0099FF;
   font-size:8pt;
   text-align:left;
   font-weight:bold;
   cursor:pointer;
   letter-spacing:1px;
}
a.suboption:link{
   color:#FFFFFF;
   background-color:#990000;
   text-decoration:none;
}
a.suboption:hover{
   color:#FFFFFF;
   background-color:#660000;
   text-decoration:none;
}
a.suboption:visited{
   color:#FFFFFF;
   text-decoration:none;
}
//-->
</style>


<!-- Controls Object Defined -->


<script type="text/javascript">
function nav_on(name)
{
   name.className = "menutitlehover";
}
function nav_off(name)
{
   name.className = "menutitle";   
}
</script>


<!-- Controls Menu -->


<script type="text/javascript">
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
   if(document.getElementById){
   var el = document.getElementById(obj);
   var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
      if(el.style.display != "block"){ //DynamicDrive.com change
         for (var i=0; i<ar.length; i++){
            if (ar[i].className=="submenu") //DynamicDrive.com change
            ar[i].style.display = "none";
         }
         el.style.display = "block";
      }else{
         el.style.display = "none";
      }
   }
}
</script>
</head>


<!-- Controls Size Of Menu -->


<table border="0" cellpadding="0" cellspacing="0" id="AutoNumber5">
<tr>
<td align="left" valign="top" width="175">
<div id="masterdiv">


<!-- The Menu -->


  <div class="menutitle" onmouseover="nav_on(this)" onmouseout="nav_off(this)" onclick="SwitchMenu('sub5')">
  TEXT HERE
  </div>
    <span class="submenu" id="sub5">
    <div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location='LINK HERE'">
    TEXT HERE
    </a>
    </div>
    <div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location='LINK HERE'">
    TEXT HERE
    </a>
    </div>
    <div class="suboption" onmouseover="this.className='suboptionhover'" onmouseout="this.className='suboption'" onclick="window.location='LINK HERE'">
    TEXT HERE
    </a>
    </div>
    </span>


<!-- Forums -->


  <div class="menutitle" onmouseover="nav_on(this)" onmouseout="nav_off(this)" onclick="window.location='LINK HERE'">
  TEXT HERE
  </div>

</body>
</html>


Hurray for copy and paste techniques! Enjoy...
threezeroone
The code is Nice but you also have to understand them if ever errors occur, you can't just copy and paste them to your page.

Copy and Paste is not a good habit in webdesigning. But its up to you where you are comfortable at.
tidruG
I've kind of decided to go with simple Text links at the top of my page, right under a logo or something. I'm making a static website (except for the forums), and I don't mind looking like an amateur (because I am). But I value the suggestions. Keep watching this space, I'll post a link to the site when I'm done with some of the basic pages... however, keep posting, I'm sure lots of other members have gained from these experienced replies.

PS: I agree that FP messes up the code. But I don't have much time on my hands, and I'd rather use a WYSIWG editor for the basic formatting. Once again, DO NOT USE ANY OF THE FRONTPAGE "SPECIAL" FEATURES UNLESS YOU'RE REALLY REALLY DESPERATE Wink
ammonkc
I've never really like to rely on JavaScript for my navigation. You'll almost definately run into crossbrowser compatibility problems. I've found that using css is a little bit better but still not that great. another thing to think about is that the user can easily disable javascript on the client side, making navigation of your site impossible. If you really want cool animation in your navigation, I would use flash.
budazz
yeah flash is easy to use when you want to have a cool navigation...try dreamweaver..it has a lot of flash buttons Very Happy
Motoracer380
i use photos for my links.. ue photoshop ans ave for web with each link as a slice.. then save for the web and if your doing rolloevers after you save for the web just re color the links how you want them to show on rollover.. use the slice select tool and change the slice names that you changed... and save it to the web as the same name in the same folder as the last save but dont overwrite anything because you'll already have the two sets of images oth dif colors you aleready have all the ohers in the folder... but yes i find images the fastest easiest way to do it.
snowboardalliance
I would say use php instead of SSI personally
You don't even need php knowledge to use the include function, but you can add more php functionality later also.
tidruG
Alright, I'm a little stuck again. I want to use PHP... my idea was to use dynamic content, with a simple logo and basic navigation buttons at the top of the page, and the actual matter right below it. I've been trying to look for a very basic tutorial on how to have a very basic dynamic content layout, without much success... anyone using a simple dynamic content layout... could you show me how you're doing it please?
Motoracer380
who knows??? i think you knows!!!.. no.. you dont.. i dont either so thats ok.
threezeroone
budazz wrote:
yeah flash is easy to use when you want to have a cool navigation...try dreamweaver..it has a lot of flash buttons Very Happy



but some browsers don't have plug-ins for flash,you have to install it first (in some cases).. you don't want your visitors to go installing some plug-ins first if they want to navigate through your site, right? but, yeah, flash is cool! Smile
budazz
threezeroone wrote:
budazz wrote:
yeah flash is easy to use when you want to have a cool navigation...try dreamweaver..it has a lot of flash buttons Very Happy



but some browsers don't have plug-ins for flash,you have to install it first (in some cases).. you don't want your visitors to go installing some plug-ins first if they want to navigate through your site, right? but, yeah, flash is cool! Smile


well maybe your right...i think you only need plug ins when you have a movie swf...(not sure lol) Laughing
threezeroone
all flash embedded in your page are in .swf format.. LOL
Related topics
How did you hear about FRIHost ?
Hacker-proof site without php?
Front page
the.shogunate.v1:infection
Suggestions on my site please
Suggestions for my Site
Basic video conversion
Suggestions on my Web Site Please!
Feedback and suggestions for improvement of my site
Google Search bar Location
DFD's Vs Site Nav Diagrams etc
your ideas on current layout (part 2)
my new site... :)
Building a site for my music. Any suggestions?
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.