PDA

View Full Version : Designing website for sisters flower business. Help on how to put her photos there?


xwgpx55
07-16-2009, 09:44 PM
I just got finished putting together the template for my sister's flower design website. I've only taken a simple half year course on dreamweaver in High School, but have designed my cousin's art website, and felt like taking on my sister's much needed website project on.

(Cousin's website I designed can be viewed at www.jenniferyoungpaintings.com) - very simple site.

Pretty much, I need something to go in the editable region I made in the template (in my gallery.html page) that can view the three different types of photos. She wants her photos of her work to be divised 3 ways, arrangements, holidays, and weddings/corporate.

I want to know what is the best way to approach this being a very large noob with complex dreamweaver stuff. I'm not familiar with CSS or Flash really, but can familiarize myself if needed. If anyone can point me in the right direction I'd appreciate it. I need to get this website done soon for her.

DWcourse
07-16-2009, 10:04 PM
I'd look at the Lightbox script (http://www.lokeshdhakar.com/projects/lightbox2/) or something similar.

xwgpx55
07-16-2009, 11:19 PM
see, the directions up there are extremely vague for someone like me.

Also, it talks about putting certain commands in the header, which I can't access because that section is locked due to me using a template.

Anything else out there that can give me a good step by step? I've been looking on google all day and can't find anything in plain english.

DWcourse
07-16-2009, 11:25 PM
A file based upon a template should have an area that looks like this:

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->

You can add content between the two comments:

<!-- InstanceBeginEditable name="head" -->add content here<!-- InstanceEndEditable -->

xwgpx55
07-17-2009, 01:06 AM
I really can't see how I use this. I don't know where to put the images or any of the files in the lightbox download file. Is there a step by step guide somwhere?

d a v e
07-17-2009, 04:17 AM
there's a step-by-step guide on the lightbox site.

xwgpx55
07-17-2009, 05:19 AM
yeah I tried it. it didnt work. I ended up using a wizard for it. Now that I have the images in a table, I cant seem to find a way to get the table on the website correctly.

Here is a screenshot of what it looks like now.

What is an easy way of centering it? theres another 2 sets of 12 pictures that I need to fit in there as well. I thought using a table would work but all that goes in there is the code itself in text format.

http://img199.imageshack.us/img199/2076/dicksp.jpg



Anyone have ideaas?

edbr
07-17-2009, 06:08 AM
can you copy your code and post it here?

DWcourse
07-17-2009, 06:36 AM
There are Dreamweaver extensions (http://cli.gs/vY1ndd) that can help you out (including one for lightbox)

d a v e
07-17-2009, 10:44 AM
There are Dreamweaver extensions (http://cli.gs/vY1ndd) that can help you out (including one for lightbox)
although the lightbox extension is only for version 10 (cs4?!)

xwgpx55
07-17-2009, 03:48 PM
<!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"><!-- InstanceBegin template="/Templates/static.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- Start VisualLightBox.com HEAD section -->
<link rel="stylesheet" href="engine/css/lightbox.css" type="text/css" media="screen" />
<script src="engine/js/prototype.js" type="text/javascript"></script>
<script src="engine/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="engine/js/lightbox.js" type="text/javascript"></script>

<style>
.gallery {
zoom:1;
width:390px;
}
.gallery a {
display:block;
float:left;
margin:5px;
opacity:0.87;
text-align:center;
}
.gallery a:hover {
opacity:1;
}
.gallery a img {
border:none;
display:block;
}
.gallery a#vlightbox{display:none}
</style>
<!-- End VisualLightBox.com HEAD section -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>gallery - (( Flower Girl New York ))</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
.style1 {color: #FFFFCC}
body {
background-color: #FFFFFF;
}
a img { border: none; }
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
.gallery { zoom:1;
width:390px;
}
#apDiv1 {
position:absolute;
left:413px;
top:337px;
width:416px;
height:405px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:415px;
top:344px;
width:409px;
height:396px;
z-index:1;
}
#apDiv3 {
position:absolute;
left:306px;
top:341px;
width:393px;
height:370px;
z-index:1;
}
#apDiv4 {
position:absolute;
left:735px;
top:341px;
width:393px;
height:400px;
z-index:2;
}
#apDiv5 {
position:absolute;
left:524px;
top:772px;
width:389px;
height:302px;
z-index:3;
}
-->
</style>
<!-- InstanceEndEditable -->
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('gallery_glow.jpg','clientsandser vices_glow.jpg','contact_glow.jpg','about_glow.jpg ','clients_glow.jpg','press_glow2.jpg')">
<div align="center"><a href="about.html"><img src="fg_logo.jpg" width="573" height="152" /></a></div>
<p align="center">&nbsp;</p>
<p align="center"><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','about_glow.jpg',1)"><img src="about_nav.jpg" name="Image4" width="107" height="38" border="0" id="Image4" /></a><a href="gallery.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','gallery_glow.jpg',1)"><img src="gallery_nav.jpg" name="Image5" width="116" height="41" border="0" id="Image5" /></a><a href="clientsandservices.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','clients_glow.jpg',1)"><img src="clients_nav.jpg" name="Image6" width="242" height="41" border="0" id="Image6" /></a><a href="press.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','press_glow2.jpg',1)"><img src="press_nav.jpg" name="Image9" width="105" height="42" border="0" id="Image9" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','contact_glow.jpg',1)"><img src="contact_nav.jpg" name="Image8" width="122" height="41" border="0" id="Image8" /></a></p>
<p align="center">&nbsp;</p>
<!-- InstanceBeginEditable name="EditRegion3" -->
<body>
<!-- Start VisualLightBox.com BODY section -->
<div class="gallery">
<a href="./data/images/DSC00203.jpg" rel="lightbox[sample]" title="DSC00203"><img src="./data/thumbnails/DSC00203.png" /></a>
<a href="./data/images/DSC00602.jpg" rel="lightbox[sample]" title="DSC00602"><img src="./data/thumbnails/DSC00602.png" /></a>
<a href="./data/images/DSC00614.jpg" rel="lightbox[sample]" title="DSC00614"><img src="./data/thumbnails/DSC00614.png" /></a>
<a href="./data/images/DSC00781.jpg" rel="lightbox[sample]" title="DSC00781"><img src="./data/thumbnails/DSC00781.png" /></a>
<a href="./data/images/DSC01171.jpg" rel="lightbox[sample]" title="DSC01171"><img src="./data/thumbnails/DSC01171.png" /></a>
<a href="./data/images/DSC01272.jpg" rel="lightbox[sample]" title="DSC01272"><img src="./data/thumbnails/DSC01272.png" /></a>
<a href="./data/images/DSC01337.jpg" rel="lightbox[sample]" title="DSC01337"><img src="./data/thumbnails/DSC01337.png" /></a>
<a href="./data/images/DSC01342.jpg" rel="lightbox[sample]" title="DSC01342"><img src="./data/thumbnails/DSC01342.png" /></a>
<a href="./data/images/DSC01368.jpg" rel="lightbox[sample]" title="DSC01368"><img src="./data/thumbnails/DSC01368.png" /></a>
<a href="./data/images/P9140046.jpg" rel="lightbox[sample]" title="P9140046"><img src="./data/thumbnails/P9140046.png" /></a>
<a href="./data/images/P9140119.jpg" rel="lightbox[sample]" title="P9140119"><img src="./data/thumbnails/P9140119.png" /></a>
<a href="./data/images/P9140133.jpg" rel="lightbox[sample]" title="P9140133"><img src="./data/thumbnails/P9140133.png" /></a>

<!--[if lte IE 6]><script src="engine/js/pngfix_vlb.js" type="text/javascript"></script><![endif]-->
<a id="vlightbox" href="http://visuallightbox.com/">Online Family Photo Album by VisualLightbox.com</a>
</div>
<!-- End VisualLightBox.com BODY section -->

</body>

<!-- InstanceEndEditable -->
<p align="center">&nbsp;</p>
<p align="center"><img src="fg_info.jpg" width="568" height="25" /><a href="mailto:info@flowergirlnyc.com"><img src="fg_email.jpg" width="219" height="24" /></a></p>
</body>

<!-- InstanceEnd --></html>

xwgpx55
07-17-2009, 08:13 PM
the above is the code for the site I took the screenshot of in the link on the first page.

another question..

How do I give the page a boarder/colored margin like is done here?

http://www.shawnelliott.com/

I want something closing in the space on the sides.

edbr
07-18-2009, 03:29 AM
wrap all your content in a div and assign borders to it

xwgpx55
07-18-2009, 06:27 AM
wrap all your content in a div and assign borders to it

Im sorry for being such a noob, that's kinda foreign to me. I really don't know much coding, more of just the mechanics of the design view. Any better way to put it?


also, any input on the code I posted?

blanchard
07-18-2009, 10:12 PM
I've just used lightbox and found a video tutorial on youtube too.

DWcourse
07-18-2009, 10:37 PM
I've just used lightbox and found a video tutorial on youtube too.

So, why not share?:roll: