My new WEBSITE.. took me forever to get right

January 31, 2006

Hi neowin,

I hope there are still lots of people coming here, i have been away for a few months...

anyways, I have upgraded my website

http://www.studio7designs.com/

it is almost CSS and HTML compliant.. I need to tweak the code and also I need to complete the website...

can you guys give me any pointers ?

thanks

Aran

<b>PS thanks for the suggestions so far everyone, it made my day, If you have ANY suggestions please email me at aran [a t) studio7designs.com as I will be away from the forum for a while past feb 1st.. thanks!</b>

Edited January 31, 2006 by Nautica

January 31, 2006

looks pretty good. I like it alot.

January 31, 2006

looks pretty good. I like it alot.

thanks mat:):)

January 31, 2006

Looks great... very professional.

January 31, 2006

I like it alot

January 31, 2006

all i can say is wow, you did a great job, taking a long time to get it right has its own rewards

January 31, 2006

all i can say is wow, you did a great job, taking a long time to get it right has its own rewards

hey thanks so much for your imput

I WILL be adding more color to the site, look at the weddings page to see a preview of the photos I am going to add

are there too many google ads?

cheers

Aran

January 31, 2006

Really nice! Pitty of all those ads :/

January 31, 2006

Really nice! Pitty of all those ads :/

Ill take out the ads on the right panel?

how does that look?

cheers

Aran

January 31, 2006

^ that would be better...

Maybe you can integrate the google search bar somewhere at the top of the page, or in a sidepanel...

January 31, 2006

thats pritty slick, my suggestion, if thats what your looking for, is maybe slowly fade the images up the top, becuase while i was reading (as much as the photos are very nice) i got distracted.

very good work here though :)

January 31, 2006

thats pritty slick, my suggestion, if thats what your looking for, is maybe slowly fade the images up the top, becuase while i was reading (as much as the photos are very nice) i got distracted.

very good work here though :)

hey, how can I do that ?

can you link me to a tutorial for making fading gifs?

thanks

January 31, 2006

ha no wonder i thought it was so good, i got all the ads blocked.

Nice photos also, can they be viewed bigger

January 31, 2006

Very nice work! It looks simple and professional.

I think you should fade the images on the top like blade707 alredy said.

January 31, 2006

I took out most of the text ads, left a couple on the left hand side-bar ( kinda hidden there so its not so in your face etc.)

Ill fad out the top banner...

please, anymore suggestions...

Also, anyone have a good feeback form that I can use?

January 31, 2006

For the fading, just use javascript... That's the easiest to add more photo's if you want to...

January 31, 2006

For the fading, just use javascript... That's the easiest to add more photo's if you want to...

nice idea, can you link me with a tutorial please, I am more of a designer then a java coder... thanks for the help I really appreciate it everyone!

January 31, 2006

http://www.dynamicdrive.com/dynamicindex4/index.html

This is a really good websites for such javascripts...

January 31, 2006

http://www.dynamicdrive.com/dynamicindex4/index.html

This is a really good websites for such javascripts...

hell YA!

sweet thanks..

also, one more question..

I want my top banner to change everytime someone loads the page, or goes to another page on my website... I dont like people seeing the same rotating images... Id rather deliver random images to my top banner area every new page load ( my banner area at top is to showcase my photography so this is VERY important )

do you know of any script that would do this?

Thanks

January 31, 2006

http://www.dynamicdrive.com/dynamicindex14...inslideshow.htm

This one starts with a random image everytime. And it fades! And it runs in Opera, IE and Firefox (Y) (Y)

January 31, 2006

http://www.dynamicdrive.com/dynamicindex14...inslideshow.htm

This one starts with a random image everytime. And it fades! And it runs in Opera, IE and Firefox (Y) (Y)

dude, sooo sweeeeet!!!

thanks for finding that for me...

so I pretty much put the code in the location of my banner?

Ill grab my code real quick, can you point me out to where i would put it?

thanks

&lt;body&gt;&lt;div id="wrap"&gt;

&lt;div id="header"&gt;
&lt;h1 class="style3"&gt;&lt;span class="style9"&gt;&lt;a href="../index.html"&gt;STUDIO&lt;/a&gt;&lt;/span&gt;&lt;a href="../index.html"&gt;&lt;span class="style5"&gt;7&lt;/span&gt;&lt;span class="style9"&gt;DESIGNS&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;"I can see you fly. You are an angel with wings, high above the ground!"&lt;/strong&gt;&lt;br /&gt;(traditional haiku poem)&lt;/p&gt;
&lt;/div&gt;

&lt;img id="frontphoto" src="../images/front.gif" width="760" height="175" alt="studio7designs_main_banner" /&gt;

&lt;div id="avmenu"&gt;
&lt;h2 class="hide"&gt;Menu:&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="../index.html"&gt;Home Page &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../gallery/gallery.html"&gt;Photo Gallery &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../website_designs.html"&gt;Website Designs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../Journal.html"&gt;Daily Photo Blog &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../weddings.html"&gt;Weddings Victoria&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../contact_us.html"&gt;Contact us &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

my banner is the "<img id="frontphoto" src="../images/front.gif" width="760" height="175" alt="studio7designs_main_banner" />"

would I put the script in there?

thanks

January 31, 2006

&lt;head&gt;
&lt;script type="text/javascript"&gt;
/***********************************************
* Ultimate Fade-In Slideshow (v1.5): ? Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""]
fadeimages[1]=["photo2.jpg", "", ""]
fadeimages[2]=["photo3.jpg", "", "_new"]

var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p&lt;theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&amp;&amp;dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('&lt;div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"&gt;&lt;div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"&gt;&lt;/div&gt;&lt;div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"&gt;&lt;/div&gt;&lt;/div&gt;')
else
document.write('&lt;div&gt;&lt;img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"&gt;&lt;/div&gt;')

if (iebrowser&amp;&amp;dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree&lt;100){
obj.degree+=10
if (obj.tempobj.filters&amp;&amp;obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex&lt;obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='&lt;a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'"&gt;'
slideHTML+='&lt;img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px"&gt;'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='&lt;/a&gt;'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&amp;&amp;dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex&lt;this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&amp;&amp;crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}
this.rotateimage()
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;div id="wrap"&gt;

&lt;div id="header"&gt;
&lt;h1 class="style3"&gt;&lt;span class="style9"&gt;&lt;a href="../index.html"&gt;STUDIO&lt;/a&gt;&lt;/span&gt;&lt;a href="../index.html"&gt;&lt;span class="style5"&gt;7&lt;/span&gt;&lt;span class="style9"&gt;DESIGNS&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;"I can see you fly. You are an angel with wings, high above the ground!"&lt;/strong&gt;&lt;br /&gt;(traditional haiku poem)&lt;/p&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
new fadeshow(fadeimages, 760, 175, 0, 10000, 0, "R")
&lt;/script&gt;

&lt;div id="avmenu"&gt;
&lt;h2 class="hide"&gt;Menu:&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="../index.html"&gt;Home Page &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../gallery/gallery.html"&gt;Photo Gallery &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../website_designs.html"&gt;Website Designs&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../Journal.html"&gt;Daily Photo Blog &lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../weddings.html"&gt;Weddings Victoria&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="../contact_us.html"&gt;Contact us &lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

And you just change this:

fadeimages[0]=["photo1.jpg", "", ""]
fadeimages[1]=["photo2.jpg", "", ""]
fadeimages[2]=["photo3.jpg", "", "_new"]

January 31, 2006

isn't your website taken from the templates from oswd.org??

http://www.oswd.org/design/preview/id/2199

looks exactly the same!!

January 31, 2006

yes I have it so its working 100% in IE... but in FF and Opera it comes out very wonky...

do I have to put the

&lt;script type="text/javascript"&gt;
new fadeshow(fadeimages, 760, 175, 0, 10000, 0, "R")
&lt;/script&gt;

in a special holder? like a <div> or <p> ?

it seems that the code is not held properly in FF and opera.. the top banner floats all over the place

January 31, 2006

nice site, love the gallery :)

January 31, 2006

Very nice clean looking site. The only thing letting it down is the google adds down the side. They draw away from the clean layout. Nice clear content on there also, good job :).

I dunno if it's just me but it does run slow every now and then. Get it on a faster host possibly.

Sign In

My new WEBSITE.. took me forever to get right

Question

Nautica

Link to comment

Share on other sites

60 answers to this question

Recommended Posts

Got3n

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

theyarecomingforyou

Link to comment

Share on other sites

Opelman

Link to comment

Share on other sites

LG1

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

Cadish

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

Cadish

Link to comment

Share on other sites

mc_leish

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

LG1

Link to comment

Share on other sites

Kenny McCormick

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

Cadish

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

Cadish

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

Cadish

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

Cadish

Link to comment

Share on other sites

najmul

Link to comment

Share on other sites

Nautica

Link to comment

Share on other sites

Yazoo

Link to comment

Share on other sites