PDA

View Full Version : Need a little website help.



Espezito
December 18th, 2005, 09:36 AM
I posted this on Eatpoo.com as well, but I figured CA.org would be a good spot as well. I've been searching the net and such for an answer to my question but havn't really found anything I can understand. I'm new to making websites, so I could really use some help.

The work section of my website, dmboyledesign.com, is a mess... So I want to redo in a way that I think would be best for people to view my work. I know it's been done many times before, it's just that I have no clue how to do it!

I want my thumbnails and full images to be displayed on the same page, with the thumbnails on the left and full image on the right. I have multiple sections I'd want thumbnails for, such as 'sketchbook', 'illustrations', '3D', 'projects' etc. and when the heading is clicked the thuimbs appear below which can be clicked and the full image appears to the right. Instead of image thumbnails I'd like to go with plain grey boxes... so I can clear up all the thumbnails I've made.

I made a lil drawing to sort of visualise what I want to do:
http://www.dmboyledesign.com/website.jpg

I have Macromedis Studio MX, and hav been using dreamweaver to put the site together. Please share some knowledge and I'll be forever in your debt!

Thanks in advance!

S.C. Watson
December 18th, 2005, 11:29 AM
Espezito,

Little consistant problems like this was one of the main reasons that I bailed from web design...

I know what you're are talking, though off hand I don't know how to do it, though I think it can be done through the use of style sheets, or perhaps a javascript snippet. I don't have the time to hunt down the code right now, but if you know of a sight that utilizes a menu like that, take a look at their code to see what they're doing. Often times the code is free, so long as you include the developers name in the page html.

~Oreg.

scumgrinder
December 18th, 2005, 01:34 PM
If you have the macromedia studio, you probably have flash which means that should be the best option for your menu, if you can find a way to manage the thumbs dynamically (say, using xml), you will only need to do the menu once and won't have to update it everytime you add a new image. Or you will need to do some fancy scripting using dhtml if you don't want to use flash. Either way it is too complex to explain in here. I would suggest you to change the layout and stick with dreamweaver and use the templates and libraries to make things easier. Unless you REALLY want that menu

llothcat
December 18th, 2005, 01:58 PM
actually, i think a combination of php, sql, and css can do it. I have something similar on my site that I play with, but i never wanted the image on the same page as the thumbnails. Look up free php galleries, and you'll get a whole bunch to try out and play with. You'll also learn a bit of the programming that goes into it. Most programming resources for each of these things are free...i usually only buy the books when i get tired of having to look up code snippets.

Blue
December 18th, 2005, 03:19 PM
This pretty much is how I have my site (http://www.temion.net/) set up (although mine isn't finished). Play with this code, it is a good base of what you need. (Also, i use Cutenews for my content management, this code is one of their free example php files. Download cute news [here] (http://cutephp.com/cutenews/) if you are interested)


<?PHP

?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<style>
<!--
A { color: #003366; text-decoration: none; }
A:link { color: #003366; text-decoration: none; }
A:visited { color: #003366; text-decoration: none; }
A:active { color: #54622D; }
A:hover { color: #54622D; }


BODY,TD,TR{
font-family: verdana, arial, sans-serif;
color:#000;
font-size:11;
font-weight:normal;
}
.banner {
font-family: georgia, verdana, arial, sans-serif;
color:white;
font-size:x-large;
font-weight:bold;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
border-top:1px solid #FFF;
background:#003366;
padding:7px;
}
.description{
font-family:verdana, arial, sans-serif;
font-size:x-small;
font-weight:bold;
}

//-->
</style>
</head>
<body bgcolor="#ffffff">
<div align="center"><center>
<table border="0" width="700" cellspacing="0" cellpadding="0">
<tr>
<td class=banner >
Put here your title<br>
<span class="description">and this is your description</span>
</td>
</tr>

<tr>
<td>
&nbsp;
</center>

<table border="0" width="100%" cellspacing="0" cellpadding="6">
<tr>
<td width="180" valign=top style="border-right: 1px dotted #000000;"><table border="0" width=93% cellspacing="0" cellpadding="0">
<tr>

<td width="100%" style="border-top: 1 solid #000000; border-bottom: 1 solid #000000" bgcolor="#F3F4F5" height="26">
<p align="left">&nbsp;<b><font color="#003366">Navigation</font></b></p>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="?">main page</a>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="?do=archives">archives</a>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="?do=stats">statistic</a>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="?">other link</a>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="?">other link</a>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;
</td>
</tr>
<tr>

<td width="100%" style="border-top: 1 solid #000000; border-bottom: 1 solid #000000" bgcolor="#F3F4F5" height="26">
<p align="left">&nbsp;<font color="#003366"><b>Quick search</b></font></p>
</td>
</tr>
<tr>

<td width="100%">
</td>
</tr>
<tr>
<!-- The Quick Search Form -->
<form method="post">
<td width="100%" align="center">&nbsp;<br>
<input type="text" name="story" size="14">
<input type="hidden" name="do" value="search">
</td>
</form>
<!-- End of the Search Form -->

</tr>
<tr>

<td width="100%">
&nbsp;
</td>
</tr>
<tr>

<td width="100%" style="border-top: 1 solid #000000; border-bottom: 1 solid #000000" bgcolor="#F3F4F5" height="26">
<p align="left">&nbsp;<b><font color="#003366">banners/sponsors</font></b></p>
</td>
</tr>
<center>

<tr>

<td width="100%">
&nbsp;
</td>
</tr>
<tr>

<td width="100%">
&nbsp;put some banners here
</td>
</tr>
<tr>

<td width="100%">
&nbsp;
</td>
</tr>
<tr>

<td width="100%">
&nbsp;and another banners here
</td>
</tr>
<tr>

<td width="100%">
&nbsp;
</td>
</tr>
<tr>

<td width="100%" style="border-top: 1 solid #000000; border-bottom: 1 solid #000000" bgcolor="#F3F4F5" height="26">
<p align="left">&nbsp;<font color="#003366"><b>Friends</b></font></p>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="http://cutephp.com" title="PHP News Content Management System" target="_blank">CutePHP Scripts</a>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="http://news.google.com" target="_blank">Google News</a>
</td>
</tr>
<tr>

<td width="100%">
&nbsp;<a href="http://mozilla.org" target="_blank">Mozilla.org</a>
</td>
</tr>
</table>

<p align="center"><br><br>
<br>
<br>
<br>
</center>
</td>
<td width="520" valign="top" align="center">

<table border="0" width="453" cellspacing="1" cellpadding="3">
<tr>
<td width="441">
<?PHP

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Here we decide what page to include
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

if($_POST['do'] == "search" or $_GET['dosearch'] == "yes"){ $subaction = "search"; $dosearch = "yes"; include("./search.php"); }
elseif($_GET['do'] == "archives"){ include("./show_archives.php"); }
elseif($_GET['do'] == "stats"){ echo"You can download the stats addon and include it here to show how many news, comments ... you have"; /* include("$path/stats.php"); */ }
else{ include("./show_news.php"); }

?>
</td>
</tr>
</table>

</td>
</tr>
</table>
</td>
</tr>

</table><br><br><center>
<table border=0 width=700 style="border-top: 1px dotted #000000;">
<tr><td>
<p align="center">put your footer and copyright here

</td></tr></table>
</body>
</html>

Espezito
December 18th, 2005, 04:24 PM
Thanks a bunch guys! I'll mess around a bit now and see what I can come up with. :)
If there are still more options or tips I could use feel free to post more. Thanks again!