Sevtopolis Design

Navigation Bar Best Practices

2011-12-20T14:05:00.005-05:00

Navigation links placement on your website plays a big role. Avoiding navigational confusion is an extremely important part of website usability. Here are the basic characteristics of a good navigation bar:

Navigation bar should be consistent throughout the site, no matter if you choose to use a horizontal, vertical navigation bar or both. Give the user what they expect. Avoid confusion! Or else the visitors could become extremely frustrated and never want to return to your website again.
Make the primary navigation stand out by using graphics or different links style, but keep it simple. Do not overwhelm the user with complicated designs, no matter how cool it might be. Avoid using strictly images with no text, because people interpret images differently.
Try using text links that contain keywords and avoid flash menus. The labels should be descriptive so that visitors will find exactly what they’re expecting to find when they click on a hyperlink. Evaluate your content thoroughly and ask yourself what information or product your users need to access quickly.
The navigation should be flexible enough to accommodate any amount of additional links as required.
Consider using "Call to Action Buttons" for some of the most- important links, instead including them in the menu. Such as: "Donate", "Learn "Shop Now", "Get Started", "Get a Quote".
Make the button as large as possible while keeping it professional looking. Putt ample amounts of white space around the them for better
Provide visual Clues about what page are you on or the pages you have visited. For instance change the color of the tab, or add an image.
Use "bread crumbs" for larger websites. "Bread crumbs" can greatly enhance the way users find their location within the website’s hierarchy.

Java Script for Web Designers- Part 1 Variables

2010-12-07T17:51:00.009-05:00

Why Variables are useful

Variables are used to hold values. The value can be changed at any time and this will lead to changes in something that happens in the script.Variables are useful because they can save you time in writing your script and will simplify the code.
They can also be used to hold a value that will be input by the user.

Naming Variables

You can give variables a meaningful names so they can be easily recognized when you comeback later to your script.
Variables are case sensitive and the name must begin with a letter or underscore. The other characters can be letters, numbers and underscores.
Blank spaces are not allowed.
Another rule to keep in mind is to avoid using java script reserved words for instance false, float, boolean , break...

Variably types:

Numbers: just numbers that will remain the same unless you perform some sort of calculation. If the value is a big number an exponential notation can be used.
String:represents a strung of text, numbers or just about anything. string needs to be placed inside quotation marks. Special characters such as tabs(\t or \v for vertical), quotation marks (\" or \') , backslash(\\) or newline (\n) can be used. They all begin with (\)
Boolean: they are useful when you need a variable that can only have values of true or fals. Instead of using the words true or falls you can use the number 1 for true and 0 for false.
Example:

var likecoffee=true
var likeicecream=false
Null: means that the variable has no value. Null is not a zero it is simply nothing. Useful when you test for input in script

Here is an example of using Variables in script:



<script type="text/javascript">
var bikecolor="green";
var NewString="every day";
document.write("I like to ride my"+bikecolor+"bicycle"+NewString);
</script>

The code prints the sentence in the browser:
I like to ride my green bicycle every day

Essential jQuery/Simple Animations:

2010-06-11T14:30:00.025-04:00

This article contains 3 tutorials on how to create simple animation effects using the functions: Animate, SlideToggle, FadeIn and FadeOut

1). Animate: Description:

.animate( [ duration ], [ easing ], [ callback ] )

A map of CSS properties that the animation will move toward.
Duration: A string or number determining how long the animation will run.
Easing: A string indicating which easing function to use for the transition.
Callback: A function to call once the animation is complete. Read More

Tutorial 1:

In this example we have created a simple HTML page with 3 images. When we click on one of these images they will all shift to the left and then the width is re sized. Live Demo

<script type="text/javascript">
$(document).ready(function(){
$("img").click(function(){
$("img").animate({"left":"500px"},"4000");
$("img").animate({"width":"300px"},"4000");
});
});
</script>

<p><img src="image1.gif" alt="Image1" style="position:relative;"/></p> <!--The image
needs to be possitioned -->
<p><img src="image2.gif" alt="Image2" style="position:relative;"/></p>
<p><img src="image3.gif" alt="Image3" style="position:relative;"/></p>
</body>

Now instead of $("img")we will use $(this)and only the image that was clicked will be shifted and re-sized.("this" is referring only to the element that caused the event). Live Demo

<script type="text/javascript">
$(function(){
$("img").click(function(){
$(this).animate({"left":"500px"},"3000");
$(this).animate({"width":"300px"},"3000");
});
});
</script>

2). SlideToggle: Description

.slideToggle( [ duration ], [ callback ] )

Duration: Determine how long the animation will run.
Callback: A function to call once the animation is complete.
The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Read More

Tutorial 2:

Live Demo

<script type="text/javascript">

$(function(){
$(".btn").click(function(){
$("#panel").slideToggle("slow"); <!--With the element initially hidden (in this case: #panel),
we can show it slowly when we click on an element with class btn.-->
$(this).toggleClass("active");
});
});
</script>

<style type="text/css">
.btn
{
border-style: solid;
border:solid 1px #954A23;
background-color: #B83103;
padding: 5px 35px;
color: #fff;
}

#panel {
background-color:#B83103;
height: 80px;
width:350px;
padding:50px 0 0 80px;
display:none;
color: #fff;
font-size:26px;
}
style>

<div id="panel">Welcome to our Website</div>
<a href="#" class="btn">Slide Panel</a>

3). Fade In Fade Out: Description

.fadeIn and .fadeOut( [ duration ], [ callback ] )

The .fadeIn().fadeOut() method animates the opacity of the matched elements.

Tutorial 3:

.Live Demo

<script type="text/javascript">

$(function(){
$('img').hide();

$('#link1').click(function(){
$('p').fadeOut(2500);
$('#image1').fadeIn(2500);
$('#image2').fadeOut(2500);
$('#image3').fadeOut(2500);
});

$("#link2").click(function(){
$('p').fadeOut(1500);
$('#image1').fadeOut(1500);
$('#image2').fadeIn(1500);
$('#image3').fadeOut(1500);
});

$("#link3").click(function(){
$('p').fadeOut(1500);
$('#image1').fadeOut(1500);
$('#image2').fadeOut(1500);
$('#image3').fadeIn(1500);
});

});
</script>

<style type="text/css">
#panel{
float:left;
width:400px;
}
#nav{
float:left;
width:200px;
}
#image1,#image2, #image3{
position:absolute; <!--Note: The images needs to be positioned in order to appear
at the top of the page.-->
}
</style>

<ul id="nav">
<li><a id="link1" href="#" title="click">Show Image1</a></li>
<li><a id="link2" href="#" title="click">Show Image2</a></li>
<li><a id="link3" href="#" title="click">Show image3</a></li>
</ul>

<div id="panel">
<img id="image1" src="image1.gif" alt="Image1"/>
<img id="image2" src="image2.gif" alt="Image2"/>
<img id="image3" src="image3.gif" alt="Image3"/>
<p>Some text here</p>
</div>

Essential jQuery/ Working with Elements

2010-06-02T10:46:00.016-04:00

1. Appending Content to Element

<head>

<title>Appending Text to Element</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>

<script type="text/javascript">

function addContent(){
  $("p").append("<b> Hello! How are you?</b>");
}
</script>
</head>

<body>
<h1>Appending Text to Element</h1>
<p>There is a message for you</p>

<form>
<input type="button" value="see the message" onclick="addContent()"></input>
</form>
</body>

2. Loading HTML document into an Element

<head>
<title>Loading HTML doument into an Element</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">

$(document).ready(function() {
  $('#ourcontent').click(function(){
      $(this).load('document.htm');
  }); 
});
</script>

</head>

<body>
<div id="ourcontent">click me</div>
<p>First paragraph</p>
<p>Secont paragraph </p>
<p>Third paragraph </p>

</body>

The HTML above will be used for the next two examples as well

3. Generating new HTML

<script type="text/javascript">
$(document).ready(function() {
 $('#ourcontent').click(function(){
   $("<div id='coffee'>I love coffe</div><div>I don't</div>")
      .filter("#coffee").click(function() {
          alert("coffee lovers only");

   }) .end().appendTo("p");
 });
});
</script>

Explanation: We first created two div elements (one with an id “coffee”). Then we narrow down the selection only the to div with id “coffee” and add an event handler to it that will fire an alert when clicked.
Finlay we have used end() method to go back to the set of div and append them to the p elements of the page.

4. Moving Elements

<script type="text/javascript">

$(document).ready(function() {
$('#ourcontent').click(function(){
    $('p:last').append($('p:first'));

});
});
</script>

5. Wrapping elements

<script type="text/javascript">

$(document).ready(function(){
  $('#ourcontent').click(function(){
      function wrapper(){
      $("p").wrap("<h1></h1>")
      };
  }); 
});
</script>

Essential jQuery / Selecting Elements

2010-05-07T15:53:00.029-04:00

To verify that we have selected a particular element we will turn its background to red by clicking on a button “Stripe”
Here is a simple HTML Page that will be used throughout this post:


<head >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

function stripe(){
    $('#paragraph3')
        .addClass('NewClass');
}
</script>

<style>
p.NewClass{background-color:red;}
</style>
</head>

<body>
<h1>Selecting Elements:</h1>
<p> This is a paragraph 1.</p>
<p> This is a paragraph 2.</p>
<p id="paragraph3"> This is a paragraph 3.</p>
<p class="paragraph4"> This is a paragraph 4.</p>

<form><input type="button" value="Srtipe" onclick="stripe()"></input>
</form>

</body>

1. Selecting by ID:

In this example we have selected the third paragraph by calling the function &(#id), which returns an element with the same ID. We have changed the background by adding a class to the selected element. ( toggleClass() function can be used instead of addClass)

2. Selecting by Class:

function stripe(){
$('.paragraph4') 
.toggleClass('striped');
}

3. Selecting a Set of Elements:

function stripe(){
$('p')   
.toggleClass('striped');
}

4. Selecting the First or the Last of a Set of Elements / or both

function stripe(){
$('p:first')   
.toggleClass('striped');
}

There is also a selector that selects the last of a Set of elements: $('p:last')
If you would like to select the first and the last elements:


function stripe(){
$('p:first')
.addClass('striped');
$('p:last')
.addClass('striped');
}

5. Selecting elements with specific text:


function stripe(){
$('p:contains("2")')
.addClass('striped');;
}

6. Not() Selectors

:not(selector) Removes all elements matching the specific selector.For instance in this example all the paragraphs will be selected but not the paragraph with the specified ID


function stripe(){

$(':not(#paragraph3)')
.addClass('striped');
}

7.Selecting Elements that are Headers ( h1, h2…)

function stripe(){
$(":header")
.addClass('striped');
}

8. List of Selector is available Here

CSS must know tricks

2010-04-15T23:20:00.025-04:00

1. Hiding text under Image .

<h1><span></span>Our Services:</h1>

The Span inside the h1 element give us an element to which we can apply a background. Positioning the span absolutely moves it from the documents flow and the HTML text can flow underneath it.

If the HTML text grows beyond the image, It will peek out from behind the image. For this reason we make the width of the text and the image exactly the same and set the overflow to “hidden”. In this case the width is set to 100% so that the span and the text automatically expand.

h1
{
position: relative;
height: 60px;
width: 100%;
overflow:hidden;
}

h1 span
{
position: absolute;
left: 0px;
top: 0px;
height: 60px;
width: 100%;
background-image: url(../images/services.jpg);
background-repeat: no-repeat;

}

Hiding text under Image using text indent.

<h1>Our Services:</h1>
h1
{
height: 60px;
background: url(../images/services.jpg) no-repeat;
overflow:hidden;
text-indent: -9999px;
}

There is a disadvantage of text-indent image replacement: if the image does not display, there will be a gap in the page.

2. Rounded Corners and a Drop Shadow in CSS.

Here is an example on how to style a Submit Button with rounded corners and a drop shadow in Pure CSS. Unfortunately it does not work on IE ( We have set different with and color borders to create an “outset effect” to add a visual interest in IE) .

Click Here for Live Demo

.Submit_btn
{
padding: 6px 45px;
border-style: solid;
border-width: 1px 1px 2px 2px;
border-color: #AA5628 #70381B #70381B #AA5628;
background-color: #954A23;
display: inline-block;
font-family: Georgia;
font-size: 17px;
text-shadow: 0 -1px 2px rgba(0,0,0,0.5);
cursor: pointer;
color: #fff;
text-decoration: none;
font-weight: bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.Submit_btn:hover
{
background-color: #733415;
}

3. Transparency settings for all browsers.

To cover all your bases, you need four separate CSS statements.

#DivTransparent

{
filter:alpha(opacity=50); /*.....needed for IE.....*/
-moz-opacity:0.5; /*.....old versions of the Mozilla browsers.....*/
-khtml-opacity: 0.5; /*.....old versions of Safari .....*/
opacity: 0.5; /*.....most versions of Firefox, Safari, and Opera.....*/
}

4. Transparent PNG in IE 6.

Newer browser such as Firefox and Safari have offered support for PNG images with full alpha channel transparency, dealing with transparent png’s in IE 6 is a real headache.
Besides the color information each pixel in the PNG file also carries a separate alpha channel of information on how transparent it is. Unfortunately IE does not fully support this alpha channel transparency.

img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
The AlphaImageLoader does not work for tiled and positioned background (background-repeat or background-position)
Read more here:
http://code.google.com/p/ie7-js/

5. Minimum height in all browsers.

Sometime we need an element to have at least a certain height, and then stretch to accommodate more content. Unfortunately IE doest render the min-height property correctly!

#divName {
min-height:500px;
height:auto !important;
height:500px
}

6. IE Double Float Margin Bugs.

A floated element with a given margin suddenly has doubled the margin in IE 6.
By changing the display of the floated element to “inline” can fix the problem:

#DivFloat {
float:left;
width: 400px;
margin: 10px;
display: inline; }

7. Specificity Rules.

Specificity determines, which CSS rule is applied by browsers. “Specificity is a type of weighting that has a bearing on how your cascading style sheet (CSS) rules are displayed.” [Understanding Specificity] Click Here to Read More

Is your site ready for redesign?

2009-12-08T22:09:00.012-05:00

Many organizations make a great effort to set up a website and then never bother
to re-evaluate their web site's design or position in the marketplace.

Looking at a website as an extension to the company’s brochure will put you at a
disadvantage sooner or later. Trends in website design change constantly. Modern
looking site in 2006 is going to look dull and outdated in 2010. And there is more.
An outdated site may turns visitors away.

So how do you know if your site is ready for redesign?

The content of the website is outdated - “Content is the king”. The content should
be kept current at any cost. Even if the site is “Static” it needs updates so the
users find a reason to visit the site frequently and search engines put the site
higher in their ranks as a site with valuable new information.

The website is not using a CMS - Your website should really be built using a content
management system (CMS). The one very good reason to do so is to separate design
and content. This separation will give you an option to keep the content of the
site up to date without recurring cost of repeated updates and deployments. Also
changing design at later stage will not affect the content of the site, thus saving
money on entering the old content in the new site.

The website is too complex - If you site is getting too large with a lot of pages,
complex navigation and content you should really consider simplifying it. Cut the
number of pages to the absolute minimum you can possibly tolerate. Simplify navigation
and provide alternative pats to different tasks. On each page consider removing
or hiding any content that does not address the needs of your primary audience.

The site uses deprecated techniques like frames or Flash intro pages and tables
for layout - frames and flash intro pages have been out of the main stream for at
least a decade now. Even sites created entirely with flash are becoming more rear
since search engines have hard time searching the content of such sites.

The website has low search engine rank - Search engine optimization (SEO) is crucial
of any website. By improving your search engine rating you'd increase the volume
an the quality of the traffic to the web site. While many SEO changes can be made
to existing sites, sometimes it might be time to start over. Table-based design
can hamper the sites rank since they generate so much extra content that ends up
overwhelming the search engines spiders. Streamlining your design and minimizing
you content can make your site rank higher in search engines.

The site is slow-Waiting for a page to render for more than second is not an option
anymore. We as Internet users have so many choices that are a click away, we have
no patients to wait. The rule of the game is: “No mater what you show just show
it quick”. Once user is on the page you need to make it as easy as possible to perform
the tasks that you want them to perform on your site, whether it’s to purchase a
product, read a particular article, or contact you.

The website is lagging behind competition – You should definitely make sure your
site does not look outdated compared to your competitors websites. It OK to postpone
your website redesign of all competitors do the same. But if they updated their
site recently and have a cool new features. You should really consider adding similar
features as well. That said you should not blindly copy their design and features,
but carefully consider a way to exceed the functionality they have by keeping the
site as simple as you possibly can.

Throw the right Exception (.NET)

2009-11-10T11:09:00.011-05:00

Throwing an exception is an important part of the exception handling process. Each
exception thrown in CLR or in your code will be eventually handled in the process
of code execution. In order to make exception handling more effective it is very
important to throw the exception that precisely describes the error.

.Net framework has a rich exception class type hierarchy that should be used when
throwing an exception is considered. Although there are hundreds of classes in this
hierarchy most of the time, the exceptions you throw from within your methods should
be of type Argument Exception or InvalidOperationException, or an exception derived
from these types. The reason being almost all the time the exceptional situation
for a given method is caused by invalid arguments send via methods parameters.

Following are the most commonly used classes derived from from ArgumentException.

ArgumentNullException

ArgumentOutOfRangeException

IInvalidEnumArgumentException

The ArgumentException and derived classes have a string property called "ParamName".
This property is set with the name of the parameter/argument that causes the code
to throw the exception.


   throw new ArgumentNullException("user", "The user cannot be null.");

Choosing the right exception type is important but even more important is
to write a message that describes the exception precisely. The exception type is
used mostly if some were in the code exists a catch section that checks for a given
type and makes a decision based on the type of the exception.

There are legitimate reasons to throw an exception from within the catch section
in the "try catch" block. One scenario is to wrap an exception inside
another exception. Another scenario is to replace a specific exception with more
generic exception to prevent exposing of a sensitive information. The third scenario
is to log an exception and throw it back again to be handled by the normal application
process.

The type of the thrown exception from within catch section depends of the type of
the situation you are trying to handle, but in general rule is when wrapping an
exception to add the original exception as InnerException and when replacing the
exception leave the InnerException empty.


   try
   {
     // database access can fail
   }
   catch (SqlException ex)
   {
     // do some local cleanup here
     throw new DataAccessException("Invalid SQL operation", ex);
   }

It is important here to mention the difference between "throw" and "throw
ex". In the situation when an exception is catch, some processing(logging)
is done and the same exception is thrown back, a "throw" should be used
instead of "throw ex". The later truncates the stack trace because it
creates a new exception and the former throws the same exception up the chain and
the stack trace has been preserved. In IL throw(ex) calls the "trow" instruction
and "throw" calls "retrow" instruction.


   try
   {
     // database access can fail
   }
   catch (SqlException ex)
   {
     LogError(ex);
     //throw ex; // DON’T DO THIS!
     throw;
    }

To wrap everything up:

In helper method or in class libraries execution path throw "ArgumentException"
or "InvalidOperationException" or classes derived from them. Set "ParamName"
property of the "ArgumentException" to the invalid parameter name.

Choose a message that describes the exception precisely. Always assume the message
will be shown to the user.

If you need to "wrap" the exception in a more meaningful exception always
pass the original exception as inner exception.

If you need to rethrow an exception up the chain and preserve the history in stack
trace, use "throw" instead of "throw ex".

Add JQuery to ASP.NET Master Page

2009-11-05T14:43:00.008-05:00

Recently we've been working on few ASP.NET project that require a decent amount
of rich user interaction so we decided to add JQuery to our "standard"
web forms project with master pages. The goal was to link JQuery to all pages in
out application by linking it to the application master page and crate and link
individual JavaScript files to the pages that needed JQuery functionalities. For
example we would have a "default.js" file that will be linked to "default.aspx"
page. That sounds great in theory but there were few problems. Since the master
page injects it's controls in the actual rendered page the relative path in the
master page is only valid if the master page resides in the same folder as the rendered
page. That will break all relative paths for all pages that are not in the same
folder in the project's folder tree. For example the following link will only work
if the master page and rendered page are in the same folder or in the same level
in relative to the linked files and will be a broken link to all pages that are
bellow or up in the hierarchy.

 
<head runat="server">
    <title>
    </title>
    <script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js" />
</head>

We have spend some time and found two solution for this problem. The first one is
to add JQuery to the ScriptManager on the master page and then use ScriptManagerProxy
if another .js file that refers to a JQuery is added to the content page. An alternative
solution is to use ResolveUrl on the master page. The first solution is applicable
when a Script Manager is used in the web application /web site master page. If you
are planning to use ASP.NET AJAX Script Manager on your pages you can do the following:
Add Script Manager to the as a first component of form element in the master page
and put the ref to the JQuery using asp.net "~" as you would normally
do with any server control. Please note, that "<asp:scriptreference>"
is used to create a ref to an ".js" file.

 
<%@ Master
Language="C#" AutoEventWireup="true" CodeBehind="SiteScript.master.cs"
Inherits="WebApplicationTemplate.MasterPages.SiteScript" %>
<%@ Register
Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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">
<head runat="server">
<title></title>
<link href="../Styles/site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.3.2.min.js" />
</Scripts>
</asp:ScriptManager>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

On the actual pages another javascript file that refers to the JQuery reference
can be linked to a page using ScriptManagerProxy.

 
<%@ Page Title="" Language="C#"
MasterPageFile="~/MasterPages/SiteScript.Master" AutoEventWireup="true"
CodeBehind="delme.aspx.cs" Inherits="WebApplicationTemplate.delme" %>
<%@ Register
Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2"
ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/Default.js" />
</Scripts>
</asp:ScriptManagerProxy>
<div id="mainDiv">
<img src="Images/btn_web20.png" alt="web 2.0 button"/>
</div>
</asp:Content>

In this example Default.js has a reference to a JQuery and contains script that
works specifically with the default.aspx. page

 
$(document).ready(function() {
$('#mainDiv').hide();
$('#mainDiv').fadeIn(3500);
}
);

The second approach for adding a JQuery to all pages is to resolve the path of the
linked JavaScript file using "ResolveUrl".

 
<%@ Master Language="C#"
AutoEventWireup="true" CodeBehind="Site.master.cs"
Inherits="WebApplicationTemplate.MasterPages.Site" %>
<!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" >
<head runat="server">
<title></title>
<script
type="text/javascript" src="<%=ResolveUrl("~/Scripts/jquery-1.3.2.min.js")%>"/>
<asp:ContentPlaceHolder ID="m_Head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:ContentPlaceHolder ID="m_Content" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>

Then the actual page can put the link to it's own javascript file in the header
like this.

 
<%@ Page Title="" Language="C#"
MasterPageFile="~/MasterPages/Site.Master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebApplicationTemplate.Default" %>
<%@ Register
Assembly="DiscoveryLogicWebControls"
Namespace="DiscoveryLogic.Web.UI.WebControls"
TagPrefix="dlc" %>
<asp:Content ID="Content1"
ContentPlaceHolderID="m_Head" runat="server">
<script
src="Scripts/Default.js" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2"
ContentPlaceHolderID="m_Content" runat="server">
<div id="mainDiv">
<img src="Images/btn_web20.png" alt="web 2.0 button"/>
</div>
</asp:Content>

Note, that when the file is linked in the actual page itself the ResolveUrl is not
needed, since the relative path specified in the header content place holder is
not going to change. Each of the approaches add the JQuery to the all pages of the
web application/website project but the HTML generated is quite different. (The
Html can be seen by seen in each browser by right click on the page and clicking
"View Source".) If "Script Manager" is already in use in the
application is probably better to add link to JQuery using ScriptManager/ScriptManagerProxy
feature, but if this is not the case use of ResolveUrl might produce a smaller HTML
since ScriptManager adds some markup overhead. The important point to call out is
that mixing and matching two approaches might result in non functional page, especially
if a JavaScript file is added in the content page's header but the JQuery is linked
via script manager on the master page.