Please Review!

[trigatch4]

this is my first site and its for a beach house of family friends. i think the design is okay but im wondering about the efficiency html wise and stuff like that. hoping to get input.

www.shoresensation.com

all comments about everything welcome - even mean ones!
thank you in advance

[ray326]

You need to id each of your divs and pull that far right one in under the banner. On the tour home the extras list should be a list (<ul>). The background is yellow on my browser; did you mean it to be white?

[thewebman]

topsail island? my grandparents have 2 beach houses on Surf City. about the site: the links at the top look really choppy. and why not use a dropdown for the all the links on the left? and the blue links on the left don't go well with their background.

[KDLA]

The navigation area could stand some padding on the left.

The starfish, which appears onmouseover, is quite pixelated and seems to have pieces of a background surrounding it. Could the quality of this image be improved?

As pointed out earlier, some of the text links do look pixelated. Maybe you're going for that sandy look?

There's an awful lot of scripting in the code. Would it be better, since it is repeated on each page, to move it to an external page? It might clean up your code quite a bit.

KDLA

[trigatch4]

What do you mean by padding on the text links?

I was afraid that there might be a lot of code. It is simply a Dreamweaver template using layers. How is it possible to store this externally? What are the negatives of this code?

I should probably learn HTML better so I could manually clean it up. Then again I also need to learn PHP, MySQL, Java... the list goes on and right now I'm stuck on trying to get a couple websites up and running!

[trigatch4]

ONE MORE THING - why is it nearly impossible to highlight text with your cursor? I have this problem with each page I design and it must be something with Dreamweaver templates/layers or how I'm incorrectly writing text.

Any thoughts?

[KDLA]

- External js: In Dreamweaver, go to "code view." Locate this coding in your document <p><br>
<u>Virtual Tour</u><br>
<a href="/VirtualTour/Bedrooms.htm">Bedrooms</a><br>
<a href="/VirtualTour/Kitchen.htm">Kitchen</a><br>
<a href="/VirtualTour/GreatRoom.htm">Great Room</a><br>
<a href="/VirtualTour/Den.htm">Den</a><br>
<a href="/VirtualTour/Deck.htm">Deck</a><br>
<a href="/VirtualTour/PlayRoom.htm">Play Room</a><br>
<a href="/VirtualTour/Garage.htm">Garage</a></p>
<p><u>Guide to Topsail<br>
</u><a href="/GuideToTopsail/Golfing.html">Golfing</a><br>
<a href="/GuideToTopsail/Fishing.html">Fishing</a><br>
<a href="/GuideToTopsail/Dining.html">Dining</a><br>
<a href="/GuideToTopsail/Shopping.html">Shopping</a><br>
<a href="/GuideToTopsail/WaterSports.html">Water Sports</a><br>
<a href="/GuideToTopsail/HouseFavorites.html">House Favorites</a><br>
</p>
<p><u>Contact</u><br>
<a href="/Contact/CheckAvail.html">Check Availability</a><br>
<a href="/Contact/Reservations.html">Reservations</a><br>
<a href="/Contact/email.htm">E-Mail Questions</a><br>
</p>
Before it, insert this line:
<div style="padding-left: 5px;">
after it, insert this line:
</div>
So it looks like this:<div style="padding-left: 5px;">
<p><br>
<u>Virtual Tour</u><br>
<a href="/VirtualTour/Bedrooms.htm">Bedrooms</a><br>
(the rest of your links....)
<a href="/Contact/email.htm">E-Mail Questions</a><br>
</p>
</div>
This will add some space between the left edge of the teal box and your navigation links.

- The highlighting problem is probably due to your pages being constructed in layers.

- To clean up your code, you'll want to create a separate js (javascript) file. In Dreamweaver, Go to File/New, then select "Basic Page" in the lh box, then "Javascript" in the rh box. Copy this code into it:<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

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_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_findObj(n, d) { //v4.0
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 && document.getElementById) x=document.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];}
}

function MM_timelinePlay(tmLnName, myID) { //v1.2
//Copyright 1997 Macromedia, Inc. All rights reserved.
var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
tmLn = document.MM_Time[tmLnName];
if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
if (myID == tmLn.ID) { //if Im newest
setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
fNew = ++tmLn.curFrame;
for (i=0; i<tmLn.length; i++) {
sprite = tmLn[i];
if (sprite.charAt(0) == 's') {
if (sprite.obj) {
numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
keyFrm=1;
for (j=0; j<sprite.values.length; j++) {
props = sprite.values[j];
if (numKeyFr != props.length) {
if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
else sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
} else {
while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
else sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
} } } } }
} else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
if (fNew > tmLn.lastFrame) tmLn.ID = 0;
} }
}

function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
//Copyright 1997 Macromedia, Inc. All rights reserved.
var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
tmLn = document.MM_Time[tmLnName];
if (numGotos != null)
if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
jmpFwd = (fNew > tmLn.curFrame);
for (i = 0; i < tmLn.length; i++) {
sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
if (sprite.charAt(0) == "s") {
numKeyFr = sprite.keyFrames.length;
firstKeyFr = sprite.keyFrames[0];
lastKeyFr = sprite.keyFrames[numKeyFr - 1];
if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
for (j=0; j<sprite.values.length; j++) {
props = sprite.values[j];
if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
if (sprite.obj != null) {
if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
else sprite.obj[props.prop2][props.prop] = props[propNum];
} }
} else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
}
tmLn.curFrame = fNew;
if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
}

function MM_initTimelines() { //v4.0
//MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
var ns = navigator.appName == "Netscape";
var ns4 = (ns && parseInt(navigator.appVersion) == 4);
var ns5 = (ns && parseInt(navigator.appVersion) > 4);
document.MM_Time = new Array(1);
document.MM_Time[0] = new Array(1);
document.MM_Time["Home"] = document.MM_Time[0];
document.MM_Time[0].MM_Name = "Home";
document.MM_Time[0].fps = 15;
document.MM_Time[0][0] = new String("behavior");
document.MM_Time[0][0].frame = 201;
document.MM_Time[0][0].value = "MM_timelineGoto('Home','1')";
document.MM_Time[0].lastFrame = 201;
for (i=0; i<document.MM_Time.length; i++) {
document.MM_Time[i].ID = null;
document.MM_Time[i].curFrame = 0;
document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
}
}
//-->
Save it as menu.js, or some other title that you'll remember. Then, delete the code starting at <script> to </script> from your document
Instead replace it with <script type="text/javascript" src="menu.js"></script> (Make sure that this in in the <head> section of your document, not the <body>.)
You'll want to do this with each page in your site.

For more information, visit http://www.netmechanic.com/news/vol5/html_no3.htm.

KDLA

[ray326]

<p><br>
<u>Virtual Tour</u><br>
<a href="/VirtualTour/Bedrooms.htm">Bedrooms</a><br>
<a href="/VirtualTour/Kitchen.htm">Kitchen</a><br>
<a href="/VirtualTour/GreatRoom.htm">Great Room</a><br>Oh, that's just pitiful.

[KDLA]

Oh, that's just pitiful.
(you could provide some advice on how to change it, kind and gentle ray) ;)
KDLA

[bpeh]

your gifs as menus doesnt look that great with white spots on it... agreed that the left menu is too near the edge. otherwise i really like the clear and simplicity of the design.

[the tree]

(you could provide some advice on how to change it, kind and gentle ray who is cool but generally inferiour to the tree)
Like so possibly?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Shore Sensation
</title>
<style type="text/css">
<!--
body{
margin: 0;
padding: 3em;
}
h1{
margin: 0;
padding: 0;
}
div#menu{
width: 100px;
float: left;
padding: 0.3em;
margin: 0;
background-color: #9cc;
}
div#menu h2{
font-size: 1em;
padding: 0;
margin: 0;
font-weight: normal;
text-decoration: underline;
}
div#menu ul{
margin: 1em 0;
padding: 0;
list-style-type: none;
}
div#menu ul li{
margin: 0;
padding: 0;
}
div#menu ul li a{
display: block;
width: 100%;
height: 100%;
color: #00f;
text-decoration: none;
}
div#menu ul li a img{
border: none;
}
div#menu ul li a:hover{
background-color: #aee;
}
div#content{
width: 700px;
padding: 10px;
float: left;
}
.jump{
display: none;
}
-->
</style>
</head>
<body>
<h1>
<img src="http://www.shoresensation.com/SSBanner.gif" alt=
"Shore Sensation dot com">
</h1>
<div id="menu">
<a href="#content" class="jump">Skip to content</a>
<h2>
Some list
</h2>
<ul>
<li>
<a href="#">Lorem ipsum dolor.</a>
</li>
<li>
<a href="#">Nulla consequat tellus.</a>
</li>
<li>
<a href="#">Duis vitae purus.</a>
</li>
<li>
<a href="#">Quisque vitae augue.</a>
</li>
<li>
<a href="#">Nullam tristique augue.</a>
</li>
<li>
<a href="#">Nulla rutrum consequat nisi.</a>
</li>
</ul>
<h2>
Some other list
</h2>
<ul>
<li>
<a href="#">Lorem ipsum dolor.</a>
</li>
<li>
<a href="#">Nulla consequat tellus.</a>
</li>
<li>
<a href="#">Duis vitae purus.</a>
</li>
<li>
<a href="#">Quisque vitae augue.</a>
</li>
<li>
<a href="#">Nullam tristique augue.</a>
</li>
<li>
<a href="#">Nulla rutrum consequat nisi.</a>
</li>
</ul>
</div>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Nam nisi. Morbi varius. Nullam rutrum consequat est.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum ligula velit, luctus vitae, mollis vitae,
suscipit in, nulla. Pellentesque eros. Ut tincidunt
blandit ipsum. Duis et massa. Morbi tempor, nisi sed
dictum accumsan, augue leo ullamcorper sem, eget dapibus
sem est at enim. Suspendisse sit amet quam. Morbi commodo
quam non ligula. Sed sit amet tortor vel velit vulputate
ultricies. Nullam vitae ante nec ligula faucibus
pulvinar. Nunc non dui. Quisque tincidunt, arcu ac luctus
posuere, nisl pede vestibulum ipsum, non fermentum arcu
nisi vitae felis.
</p>
<p>
Quisque quis enim ut tortor cursus scelerisque. Morbi
nisi. Aenean at odio. Suspendisse suscipit, sem ut
consectetuer mollis, augue velit tempor diam, vel feugiat
magna dui at lorem. Pellentesque vitae enim. Integer
facilisis nibh quis ipsum. Nunc luctus egestas sem.
Integer aliquet cursus dui. Phasellus non mi. Ut
venenatis ipsum placerat justo. Phasellus consequat, quam
ut sagittis suscipit, velit libero cursus felis, eu
vestibulum neque nisi vel mauris. Vestibulum aliquet
massa non diam. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos hymenaeos.
Suspendisse lectus.
</p>
<p>
Suspendisse aliquam feugiat magna. In et ipsum. Morbi
rutrum massa sit amet mauris. Nam et tortor adipiscing
justo iaculis egestas. Mauris sodales felis ac eros
vehicula vehicula. Suspendisse nec felis id nibh bibendum
malesuada. Quisque a enim et augue molestie ornare.
Pellentesque vulputate, turpis ut fermentum sagittis,
erat est porta sem, at tempor metus purus non dolor.
Mauris felis eros, ultrices auctor, sollicitudin vel,
laoreet ac, odio. Sed interdum libero eu arcu. Quisque
eget odio non sapien volutpat blandit. Quisque vel mauris
quis ante fringilla dictum. Etiam et mi in libero ornare
ultricies. Nullam pellentesque.
</p>
</div>
</body>
</html>

[KDLA]

who is cool but generally inferiour to the tree
SMOOTH, tree, real S-M-O-O-T-H

[trigatch4]

Can you explain to me why my version of the HTML Code is "oh... so pitiful" when the recommended replacement is quadruple the length and much less legible?

Don't get me wrong - I know there is a good reason. But, instead of copying and pasting the fix, I'm trying to LEARN... HOW and WHY to make the changes. Same goes for the java code of the title bar. How is it possible that a simple JPG in a layer at the top could create such crappy code? In any case, it seems like the provided solution with java is an even lengthier code.

Call me a newb... I may be. But, I'm trying to learn.

I appreciate everyone's help thus far... look forward to learning more from you all.

[Mania]

Can you explain to me why my version of the HTML Code is "oh... so pitiful"?

Well.. the html code looks like it was written somewhere in the 90's. I would suggest to take your time and look through some tutorials about the very basics of writing good (x)html and css. Soon enough you could for instance put your whole leftside links into one div-element and control the way everything looks from a seperate css-file. Good luck. :)

[Jilt]

I don't know much about HTML, but there seems to be a letter missing from the word 'accomdating' on your site.

Kind regards,
Jilt

[ray326]

Can you explain to me why my version of the HTML Code is "oh... so pitiful" when the recommended replacement is quadruple the length and much less legible?That is a list of links and should be marked up as an unordered list. The modern philosophy of web design is to use semantically correct HTML for content and CSS for presentation.

[thelorax89]

Hi,

I was using your website and noticed that none of the contact links work. I'm trying to contact the owner to reserve the house.

Please advise how I can contact the owner. Send reply to my email please at downieisland@mindspring.com

Thanks,
Sam Uhl