Build A Successful Web Site http://buildasuccessfulwebsite.com Build a Web Site | Learn how to direct traffic to your web site. Mon, 05 Jul 2010 16:39:02 +0000 en hourly 1 http://wordpress.org/?v=3.0 Adobe Lightroom HTML Gallery Tutorial (Part 3) http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html_tutorials/adobe-lightroom-html-gallery-tutorial http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html_tutorials/adobe-lightroom-html-gallery-tutorial#comments Mon, 05 Jul 2010 13:12:33 +0000 admin http://buildasuccessfulwebsite.com/?p=450
  • Adobe Lightroom HTML Gallery Tutorial (Part 2)
  • Adobe Lightroom Gallery Template Tutorial
    • ]]>     Now all we have left to do is create the HTML pages for your images. If you have already downloaded my adobe gallery, start by saving “template.html” with the name of your first photo “myfirstphoto.html”. Then, begin editing the script as outlined below.

    <!– You will not have to modify too many things in this script. Just remember to save a template file so that if you make a mistake, you still have a file that you can go back to –>
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ >
    <!– Add a description of your content –>
    <meta name=”description” content=”">
    <!– Add some keywords –>
    <meta name=”keywords” content=”" >
    <meta name=”generator” content=”Adobe Photoshop Lightroom” >
    <!– Add a title –>
    <title>Site Title</title>
    <link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/custom.css” >
    <link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/master.css” >
    <script type=”text/javascript”>
    window.AgMode = “publish”;
    cellRolloverColor=”#A1A1A1″;
    cellColor=”#949494″;
    </script>

    <script type=”text/javascript” src=”support-files/live_update.js”>
    </script>
    <!–[if lt IE 7.]> <script defer type=”text/javascript” src=”support-files/pngfix.js”></script> <![endif]–>
    <!–[if gt IE 6]> <link rel=”stylesheet” href=”support-files/ie7.css”></link> <![endif]–>
    <!–[if lt IE 7.]> <link rel=”stylesheet” href=”support-files/ie6.css”></link> <![endif]–>
    </head>
    <body>
    <div id=”wrapper_large”>
    <div id=”sitetitle”>
    <!– Change your “Site Title” –>
    <h1 onclick=”clickTarget( this, ‘metadata.siteTitle.value’ );” id=”metadata.siteTitle.value”>Site Title</h1>
    </div>
    <div id=”collectionHeader”>
    <!– Change “My Photographs” –>
    <h1 onclick=”clickTarget( this, ‘metadata.groupTitle.value’ );” id=”metadata.groupTitle.value”>My Photographs</h1>
    <!– Change “Web Gallery created by Buildasuccessfulwebsite.com –>
    <p onclick=”clickTarget( this, ‘metadata.groupDescription.value’ );” id=”metadata.groupDescription.value”>Web Photo Gallery created by Buildasuccessfulwebsite.com.</p>
    </div>

    <div id=”stage2″>

    <div id=”previewFull”>
    <div id=”detailTitle”>
    </div>

    <div>
    <ul>
    <!– There is no previous HTML page. For the next HTML page you will need to replace this line with <li> <a href=”yourlinkhere.html”>Previous</a> </li> –>
    <li> Previous </li>
    <!– Change this link.It needs to point back to the “home” page of your gallery. It should point to the page you created in the second Adobe Lightroom HMTL Gallery Tutorial –>
    <li> <a href=”.html”>Index</a> </li>
    <!– This link should point to the next HTML page. For the last link image in the gallery, make the link point to your “home” page. –>
    <li> <a href=”.html”>Next</a> </li>
    </ul>
    </div>
    <!– Don’t forget about this link! It needs to point back to the home page of your gallery. It should point to the page you created in the second Adobe Lightroom HMTL Gallery Tutorial –>
    <a href=”.html”>

    <div style=”margin-left:96px;”>
    <div>
    <div>
    <!– This is where you place the code for your first large image in your gallery. Do not delete “image-files/”. You may have to change the height and width to “height=”450″ width=”300″ and the “margin-left” (above to :152px; –>
    <img src=”image-files/compact-disc.jpg”
    class=”previewFullImage preview”
    id=”previewImage”
    alt=”compact disc”
    height=”301″ width=”450″
    onclick=”var node=parentNode.parentNode.parentNode.parentNode; if( node.click ) { return node.click(); } else { return true; }”>
    </div>
    </div>
    </div>
    </a>
    <div style=”clear:both; height:5px”></div>
    <div id=”detailCaption”>
    </div>
    </div>
    </div>
    <div>
    </div>
    <!– Change the mailto:user@domain to your e-mail address, or delete this starting here –>
    <div id=”contact”>
    <a href=”mailto:user@domain”> <span
    class=”textColor” id=”metadata.contactInfo.value”>Contact Name</span>
    </a>
    </div>
    <!– and ending here –>
    <div>
    </div>
    </div>
    </body>
    </html>

    When you are done creating the first page go to the next until all your pages are edited. If you would like to add some text below the image, download this file and change it as necessary.

    The final product should look something like this:

    Adobe Lightroom Photography Gallery

    lightroom

    Related posts:

    1. Adobe Lightroom HTML Gallery Tutorial (Part 2)
    2. Adobe Lightroom Gallery Template Tutorial

    ]]>     http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html_tutorials/adobe-lightroom-html-gallery-tutorial/feed 0     Adobe Lightroom HTML Gallery Tutorial (Part 2) http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html-gallery-turtorial-part-2 http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html-gallery-turtorial-part-2#comments Sun, 04 Jul 2010 01:39:05 +0000 admin http://buildasuccessfulwebsite.com/?p=358
  • Adobe Lightroom Gallery Template Tutorial
  • How to Add an Image to Your Web Site
  • How to Center an Image
    • ]]>     Assuming your read my previous post, I will begin this tutorial by showing you how to link to your images and CSS pages. Open your favorite HTML editor and get ready to start copying and pasting. If you own Adobe Lightroom, you can export your files and change your index.html file. You should change it to “your main web site keyword”, for example “photographs.html” if you do not want it to be the index file for your web site. The index.html file is your home page file if you use SBI! (Site Build It!).

    Let’s begin by creating an HTML file and editing the head section. What you can do is either download adobe lightroom gallery and edit the photography.html file in your favorite HTML editor, or copy and paste the HTML in this tutorial into your html editor and edit from there. My comments will not appear when you open the HTML with a browser. They look like this: <!– comment –>. You do not have to delete them if you do not wish to.

    After you have downloaded the necessary files, begin by changing photography.html. If your gallery contains pencil drawings, you may wish to rename it pencil-drawings.html.

    <!–Scroll down to my next comment. Do not touch this code unless you know what you are doing –>
    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

    <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>
    <head>
    <meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ >
    <!– Change the description below. Keep it short –>
    <meta name=“description” content=“Lighroom Photography Gallery”
    <!– Change the keywords below. Do not forget to add commas between keywords. Do not add a comma after your last keyword –>
    <meta name=“keywords” content=“photography,software,photos,digital darkroom,gallery,image,photographer,adobe,photoshop,lightroom” />
    <meta name=“generator” content=“Adobe Photoshop Lightroom” >
    <!– Change the title. Make sure it contains your first keyword(s). –>
    <title>Lighroom Photography Gallery</title>
    <!– The code below has been changed for you –>

    <link rel=“stylesheet” type=“text/css” media=“screen” title=“Custom Settings” href=”support-files/custom.css” >
    <link rel=“stylesheet” type=“text/css” media=“screen” title=“Custom Settings” href=”support-files/master.css” >
    <script type=“text/javascript”>
    window.AgMode = “publish”;
    cellRolloverColor=”#A1A1A1″;

    cellColor=”#949494″;

    </script>
    <script type=“text/javascript” src=”support-files/live_update.js“>
    </script>
    <!–[if lt IE 7.]> <script defer type=”text/javascript” src=”support-files/pngfix.js”></script> <![endif]–>
    <!–[if gt IE 6]> <link rel=”stylesheet” href=”support-files/ie7.css”></link> <![endif]–>
    <!–[if lt IE 7.]> <link rel=”stylesheet” href=”support-files/ie6.css”></link> <![endif]–>
    </head>

    <!– this is where your head tag ends –>
    <body>
    <div id=“wrapper_thumb”>
    <div id=“sitetitle”>

    <!– Change “Photography” below to match your first keyword–><h1 onclick=“clickTarget( this, ‘metadata.siteTitle.value’ );” id=“metadata.siteTitle.value” class=“textColor”>Site Title</h1>

    </div>

    <div id=“collectionHeader”>

    <!– Change “My Photographs”–>

    <h1 onclick=“clickTarget( this, ‘metadata.groupTitle.value’ );” id=“metadata.groupTitle.value” class=“textColor”>My Photographs</h1>

    <!– Change “Web Photo Gallery created by Buildasuccessfulwebsite.com”–>

    <p onclick=“clickTarget( this, ‘metadata.groupDescription.value’ );” id=“metadata.groupDescription.value” class=“textColor”>Web Photo Gallery created by Buildasuccessfulwebsite.com</p>

    </div>

    <div id=“stage”>

    <div id=“index”>

    <!– We will worry about creating the HTML files later. So, if you have a picture of a compact disc, and have your picture saved as compact-disc.jpg, have the hyperlink point to ‘compact-disc.html’–>

    <div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID23A62AEC-2BA2-4FE3-8A58-2A1F90A16D14_thumb’ );” onmouseout=“window.gridOff( this.parentNode );”onclick=“window.location.href=’compact-disc.html’”>

    <!– The class “itemNumber” changes the large number on top of your image–>

    <div class=“itemNumber”>1</div>

    <!–Again same link as before (you can copy and paste). Add a title if you would like –>

    <a title=“compact disc” href=”compact-disc.html” onclick=“return needThumbImgLink;”>

    <!– For landscape photos you will use this code: <div style=”margin-left:15px; margin-top:37px;”> if your photo is portrait you will have this: <div style=”margin-left:31px; margin-top:15px;”>. If you have a lot of portrait images you may want to increase the number of pixels slightly. –>

    <div style=“margin-left:15px; margin-top:37px;”>
    <div class=“dropShadow”>

    <div class=“inner”>

    <!– Now change the link to point to your image file that you made using the first tutorial. Make sure it point to your thumb (smaller image) so that your gallery loads quickly. Edit the alt tag and the height and width depending on whether your image is portrait or landscape. If it is landscape photos leave the height and width the way it is. If it is portrait make sure you change it or you will have a squished photo. For portrait photos the height and width should be: height=”130″ width=”87″ and for landscape the height and width should be about: height=”87″ width=”130″ –>

    <img src=”image-files/compact-disc-thumb.jpg” id=“ID23A62AEC-2BA2-4FE3-8A58-2A1F90A16D14_thumb” alt=“compact disc” class=“thumb” height=“87″ width=“130″/>

    </div>

    </div>

    </div>

    </a> </div>
    <!– Do the same thing for your next photo. Do not foget any of the links –>
    <div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID66F73CF7-53DA-4EA5-A114-4B1DD7BC9B35_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’baby.html’”>

    <div class=“itemNumber”>2</div>

    <a title=“baby” href=”baby.html” onclick=“return needThumbImgLink;”>

    <div style=“margin-left:15px; margin-top:37px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change the image, the alt tag, and the width and height (if it is a portrait photo) –>
    <img src=”image-files/baby-thumb.jpg” id=“ID66F73CF7-53DA-4EA5-A114-4B1DD7BC9B35_thumb” alt=“baby” height=“87″ width=“130″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID46C15679-2928-43ED-8952-3718B29C1A37_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’movement.html’”>

    <div class=“itemNumber”>3</div>
    <!– Change code –>
    <a title=“movement” href=”movement.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>
    <div style=“margin-left:15px; margin-top:37px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/movement-thumb.jpg” id=“ID46C15679-2928-43ED-8952-3718B29C1A37_thumb” alt=“movement” height=“87″ width=“130″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft borderRight” onmouseover=“window.gridOn( this.parentNode, ‘IDCF067BE9-376C-4C1A-B497-80A66C52689F_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’girl.html’”>

    <div class=“itemNumber”>4</div>

    <!– Change code –>
    <a title=“girl” href=”girl.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>
    <div style=“margin-left:15px; margin-top:33px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/girl-thumb.jpg” id=“IDCF067BE9-376C-4C1A-B497-80A66C52689F_thumb” alt=“girl” height=“94″ width=“129″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>

    <div class=“clear”>

    </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘IDFB258F45-F244-46F9-950A-3B5B69A388A1_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’ball.html’”>

    <div class=“itemNumber”>5</div>
    <!– Change code –>
    <a title=“ball” href=”ball.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>
    <div style=“margin-left:15px; margin-top:37px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/ball-thumb.jpg” id=“IDFB258F45-F244-46F9-950A-3B5B69A388A1_thumb” alt=“ball” height=“87″ width=“130″ class=“thumb”/>

    </div>

    </div>

    </div>

    </a> </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘ID0D17AE79-5375-4226-8159-E9042839C15F_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’geranium.html’”>

    <div class=“itemNumber”>6</div>

    <!– Change code –>
    <a title=“geranium” href=”geranium.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>
    <div style=“margin-left:15px; margin-top:37px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/geranium-thumb.jpg” id=“ID0D17AE79-5375-4226-8159-E9042839C15F_thumb” alt=“geranium” height=“86″ width=“130″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft” onmouseover=“window.gridOn( this.parentNode, ‘IDD6C9D900-3B45-4ECF-A2F1-84A8916D432B_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’glass-house.html’”>

    <div class=“itemNumber”>7</div>
    <!– Change code –>
    <a title=“glass house” href=”glass-house.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>
    <div style=“margin-left:15px; margin-top:37px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/glass-house-thumb.jpg” id=“IDD6C9D900-3B45-4ECF-A2F1-84A8916D432B_thumb” alt=“glass house” height=“86″ width=“130″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft borderRight” onmouseover=“window.gridOn( this.parentNode, ‘ID19F46BF5-0AEB-4119-932C-54BE48CB6843_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’hibiscus.html’”>

    <div class=“itemNumber”>8</div>
    <!– Change code –>
    <a title=“hibiscus” href=”hibiscus.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>

    <div style=“margin-left:15px; margin-top:30px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/hibiscus-thumb.jpg” id=“ID19F46BF5-0AEB-4119-932C-54BE48CB6843_thumb” alt=“hibiscus” height=“101″ width=“130″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>

    <div class=“clear”>

    </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘IDDAB52CF3-56BC-4C58-864C-B701C90C0F48_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’interlock.html’”>

    <div class=“itemNumber”>9</div>
    <!– Change code –>
    <a title=“interlock” href=”interlock.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>
    <div style=“margin-left:31px; margin-top:15px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>

    <img src=”image-files/interlock-thumb.jpg” id=“IDDAB52CF3-56BC-4C58-864C-B701C90C0F48_thumb” alt=“interlock” height=“130″ width=“98″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID9E643A64-2D90-4811-9BAB-32EB01FDC02A_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’lilac.html’”>

    <div class=“itemNumber”>10</div>
    <!– Change code –>
    <a title=“lilac” title=“lilac” href=”lilac.html” onclick=“return needThumbImgLink;”>

    <!– Change code if necessary –>
    <div style=“margin-left:15px; margin-top:37px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/lilac-thumb.jpg” id=“ID9E643A64-2D90-4811-9BAB-32EB01FDC02A_thumb” alt=“lilac” height=“87″ width=“130″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>

    <!– Change code –>
    <div class=“thumbnail borderTopLeft borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID23CE4832-830E-4B5C-92DF-6CE8D1EDF9B0_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’leaves.html’”>

    <div class=“itemNumber”>11</div>
    <!– Change code –>
    <a href=”leaves.html” onclick=“return needThumbImgLink;”>
    <!– Change code if necessary –>
    <div style=“margin-left:37px; margin-top:15px;”>

    <div class=“dropShadow”>

    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/leaves-thumb.jpg” id=“ID23CE4832-830E-4B5C-92DF-6CE8D1EDF9B0_thumb” alt=“leaves” height=“130″ width=“87″ class=“thumb” />

    </div>

    </div>

    </div>

    </a> </div>
    <!– Change code –>
    <div class=“thumbnail borderTopLeft borderRight borderBottom” onmouseover=“window.gridOn( this.parentNode, ‘ID1D5BBD45-7CA4-49B7-BB72-BF85722727C7_thumb’ );” onmouseout=“window.gridOff( this.parentNode );” onclick=“window.location.href=’hook.html’”>

    <div class=“itemNumber”>12</div>
    <!– Change code –>
    <a title=“hook” href=”hook.html” onclick=“return needThumbImgLink;”>
    <div style=“margin-left:37px; margin-top:15px;”>

    <div class=“dropShadow”>
    <div class=“inner”>
    <!– Change code –>
    <img src=”image-files/hook-thumb.jpg” id=“ID1D5BBD45-7CA4-49B7-BB72-BF85722727C7_thumb” alt=“hook” height=“130″ width=“87″ class=“thumb” />
    </div>
    </div>
    </div>
    </a> </div>
    <div class=“clear”>

    </div>
    </div>
    </div>
    <div class=“clear”>
    </div>
    <div class=“pagination”>
    <ul>
    <li class=“current textColor”>1</li>
    <!– Place the link to your next gallery page here intead of # if you create more than one –

    <li class=“textColor”> <a href=”#“>2</a> </li>

    <li class=“previous textColor”> Previous </li>
    <!– Place the link to your next gallery page here if you create more than one –>
    <li class=“next textColor”> <a class=“paginationLinks” href=”#“>Next</a> </li>

    </ul>

    </div>

    <!– This starts the contact area, so if you want to delete it start here—>
    <div id=“contact”>
    <!– Delete or place your email address here –>
    <a href=”mailto:user@domain“> <span

    class=“textColor” id=“metadata.contactInfo.value”>Contact Name</span>

    </a>

    </div>
    <!– and end here –>
    <div class=“clear”>
    </div>
    </div>

    </body>
    </html>

    The modified Adobe Lightroom Gallery makes:

    • Your images search engine friendly
    • Your content search engine friendly
    • Your web site galleries receive more traffic!

    In the next tutorial you will learn how to add search engine friendly pages with the large images you created in the first Adobe Lightroom Tutorial.

    <!–Scroll down to my next comment. Do not touch this code unless you know what you are doing –>

    <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>

    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ >

    <!– Change the description below. Keep it short –>

    <meta name=”description” content=”Lighroom Photography Gallery”

    <!– Change the keywords below. Do not forget to add commas between keywords. Do not add a comma after your last keyword –>

    <meta name=”keywords” content=”photography,software,photos,digital darkroom,gallery,image,photographer,adobe,photoshop,lightroom” />

    <meta name=”generator” content=”Adobe Photoshop Lightroom” >

    <!– Change the title. Make sure it contains your first keyword(s). –>

    <title>Lighroom Photography Gallery</title>
    <!– The code below has been changed for you –>
    <link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/custom.css” >
    <link rel=”stylesheet” type=”text/css” media=”screen” title=”Custom Settings” href=”support-files/master.css” >
    <script type=”text/javascript”>
    window.AgMode = “publish”;
    cellRolloverColor=”#A1A1A1″;
    cellColor=”#949494″;
    </script>
    <script type=”text/javascript” src=”support-files/live_update.js”>
    </script>
    <!–[if lt IE 7.]> <script defer type=”text/javascript” src=”support-files/pngfix.js”></script> <![endif]–>
    <!–[if gt IE 6]> <link rel=”stylesheet” href=”support-files/ie7.css”></link> <![endif]–>
    <!–[if lt IE 7.]> <link rel=”stylesheet” href=”support-files/ie6.css”></link> <![endif]–>
    </head>
    <!– this is where your header section ends –>
    <body>
    <div id=”wrapper_thumb”>
    <div id=”sitetitle”>
    <!– Change “Photography” below to match your first keyword–>
    <h1 onclick=”clickTarget( this, ‘metadata.siteTitle.value’ );” id=”metadata.siteTitle.value” class=”textColor”>Site Title</h1>
    </div>
    <div id=”collectionHeader”>
    <!– Change “My Photographs”–>
    <h1 onclick=”clickTarget( this, ‘metadata.groupTitle.value’ );” id=”metadata.groupTitle.value” class=”textColor”>My Photographs</h1>
    <!– Change “Web Photo Gallery created by Buildasuccessfulwebsite.com”–>
    <p onclick=”clickTarget( this, ‘metadata.groupDescription.value’ );” id=”metadata.groupDescription.value” class=”textColor”>Web Photo Gallery created by Buildasuccessfulwebsite.com</p>
    </div>
    <div id=”stage”>
    <div id=”index”>
    <!– We will worry about creating the HTML files later. So, if you have a picture of a compact disc, and have your picture saved as compact-disc.jpg, have the hyperlink point to ‘compact-disc.html’–>
    <div class=”thumbnail borderTopLeft” onmouseover=”window.gridOn( this.parentNode, ‘ID23A62AEC-2BA2-4FE3-8A58-2A1F90A16D14_thumb’ );” onmouseout=”window.gridOff( this.parentNode );”onclick=”window.location.href=’compact-disc.html’”>
    <!– The class “itemNumber” changes the large number on top of your image–>
    <div class=”itemNumber”>1</div>
    <!–Again same link as before (you can copy and paste). Add a title if you would like–>
    <a title=”compact disc” href=”compact-disc.html” onclick=”return needThumbImgLink;”>
    <!– For landscape photos you will use this code: <div style=”margin-left:15px; margin-top:37px;”> if your photo is portrait you will have this: <div style=”margin-left:31px; margin-top:15px;”>. If you have a lot of portrait images you may want to increase the number of pixels slightly. –>
    <div style=”margin-left:15px; margin-top:37px;”>

    <div class=”dropShadow”>

    <div class=”inner”>
    <!– Now change the link to point to your image file that you made using the first tutorial. Make sure it point to your thumb (smaller image) so that your gallery loads quickly. Edit the alt tag and the height and width depending on whether your image is portrait or landscape. If it is landscape photos leave the height and width the way it is. If it is portrait make sure you change it or you will have a squished photo. For portrait photos the height and width should be: height=”130″ width=”87″ and for landscape the height and width should be about: height=”87″ width=”130″ –>
    <img src=”image-files/compact-disc-thumb.jpg” id=”ID23A62AEC-2BA2-4FE3-8A58-2A1F90A16D14_thumb” alt=”compact disc” class=”thumb” height=”87″ width=”130″/>
    </div>
    </div>
    </div>
    </a> </div>

    <!– Do the same thing for your next photo. Do not foget any of the links –>

    <div class=”thumbnail borderTopLeft” onmouseover=”window.gridOn( this.parentNode, ‘ID66F73CF7-53DA-4EA5-A114-4B1DD7BC9B35_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’baby.html’”>

    <div class=”itemNumber”>2</div>
    <a title=”baby” href=”baby.html” onclick=”return needThumbImgLink;”>
    <div style=”margin-left:15px; margin-top:37px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change the image, the alt tag, and the width and height (if it is a portrait photo) –>

    <img src=”image-files/baby-thumb.jpg” id=”ID66F73CF7-53DA-4EA5-A114-4B1DD7BC9B35_thumb” alt=”baby” height=”87″ width=”130″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft” onmouseover=”window.gridOn( this.parentNode, ‘ID46C15679-2928-43ED-8952-3718B29C1A37_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’movement.html’”>
    <div class=”itemNumber”>3</div>

    <!– Change code –>

    <a title=”movement” href=”movement.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:15px; margin-top:37px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/movement-thumb.jpg” id=”ID46C15679-2928-43ED-8952-3718B29C1A37_thumb” alt=”movement” height=”87″ width=”130″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft borderRight” onmouseover=”window.gridOn( this.parentNode, ‘IDCF067BE9-376C-4C1A-B497-80A66C52689F_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’girl.html’”>
    <div class=”itemNumber”>4</div>

    <!– Change code –>

    <a title=”girl” href=”girl.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:15px; margin-top:33px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/girl-thumb.jpg” id=”IDCF067BE9-376C-4C1A-B497-80A66C52689F_thumb” alt=”girl” height=”94″ width=”129″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>
    <div class=”clear”>
    </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft” onmouseover=”window.gridOn( this.parentNode, ‘IDFB258F45-F244-46F9-950A-3B5B69A388A1_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’ball.html’”>
    <div class=”itemNumber”>5</div>

    <!– Change code –>

    <a title=”ball” href=”ball.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:15px; margin-top:37px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/ball-thumb.jpg” id=”IDFB258F45-F244-46F9-950A-3B5B69A388A1_thumb” alt=”ball” height=”87″ width=”130″ class=”thumb”/>
    </div>
    </div>
    </div>
    </a> </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft” onmouseover=”window.gridOn( this.parentNode, ‘ID0D17AE79-5375-4226-8159-E9042839C15F_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’geranium.html’”>
    <div class=”itemNumber”>6</div>

    <!– Change code –>

    <a title=”geranium” href=”geranium.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:15px; margin-top:37px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/geranium-thumb.jpg” id=”ID0D17AE79-5375-4226-8159-E9042839C15F_thumb” alt=”geranium” height=”86″ width=”130″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft” onmouseover=”window.gridOn( this.parentNode, ‘IDD6C9D900-3B45-4ECF-A2F1-84A8916D432B_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’glass-house.html’”>
    <div class=”itemNumber”>7</div>

    <!– Change code –>

    <a title=”glass house” href=”glass-house.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:15px; margin-top:37px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/glass-house-thumb.jpg” id=”IDD6C9D900-3B45-4ECF-A2F1-84A8916D432B_thumb” alt=”glass house” height=”86″ width=”130″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft borderRight” onmouseover=”window.gridOn( this.parentNode, ‘ID19F46BF5-0AEB-4119-932C-54BE48CB6843_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’hibiscus.html’”>
    <div class=”itemNumber”>8</div>

    <!– Change code –>

    <a title=”hibiscus” href=”hibiscus.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:15px; margin-top:30px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/hibiscus-thumb.jpg” id=”ID19F46BF5-0AEB-4119-932C-54BE48CB6843_thumb” alt=”hibiscus” height=”101″ width=”130″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>
    <div class=”clear”>
    </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft borderBottom” onmouseover=”window.gridOn( this.parentNode, ‘IDDAB52CF3-56BC-4C58-864C-B701C90C0F48_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’interlock.html’”>
    <div class=”itemNumber”>9</div>

    <!– Change code –>

    <a title=”interlock” href=”interlock.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:31px; margin-top:15px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/interlock-thumb.jpg” id=”IDDAB52CF3-56BC-4C58-864C-B701C90C0F48_thumb” alt=”interlock” height=”130″ width=”98″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft borderBottom” onmouseover=”window.gridOn( this.parentNode, ‘ID9E643A64-2D90-4811-9BAB-32EB01FDC02A_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’lilac.html’”>
    <div class=”itemNumber”>10</div>

    <!– Change code –>

    <a title=”lilac” title=”lilac” href=”lilac.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:15px; margin-top:37px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/lilac-thumb.jpg” id=”ID9E643A64-2D90-4811-9BAB-32EB01FDC02A_thumb” alt=”lilac” height=”87″ width=”130″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>

    <!– Change code –>

    <div class=”thumbnail borderTopLeft borderBottom” onmouseover=”window.gridOn( this.parentNode, ‘ID23CE4832-830E-4B5C-92DF-6CE8D1EDF9B0_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’leaves.html’”>
    <div class=”itemNumber”>11</div>

    <!– Change code –>

    <a href=”leaves.html” onclick=”return needThumbImgLink;”>

    <!– Change code if necessary –>

    <div style=”margin-left:37px; margin-top:15px;”>
    <div class=”dropShadow”>
    <div class=”inner”>

    <!– Change code –>

    <img src=”image-files/leaves-thumb.jpg” id=”ID23CE4832-830E-4B5C-92DF-6CE8D1EDF9B0_thumb” alt=”leaves” height=”130″ width=”87″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>
    <div class=”thumbnail borderTopLeft borderRight borderBottom” onmouseover=”window.gridOn( this.parentNode, ‘ID1D5BBD45-7CA4-49B7-BB72-BF85722727C7_thumb’ );” onmouseout=”window.gridOff( this.parentNode );” onclick=”window.location.href=’hook.html’”>
    <div class=”itemNumber”>12</div>
    <a title=”hook” href=”hook.html” onclick=”return needThumbImgLink;”>
    <div style=”margin-left:37px; margin-top:15px;”>
    <div class=”dropShadow”>
    <div class=”inner”>
    <img src=”image-files/hook-thumb.jpg” id=”ID1D5BBD45-7CA4-49B7-BB72-BF85722727C7_thumb” alt=”hook” height=”130″ width=”87″ class=”thumb” />
    </div>
    </div>
    </div>
    </a> </div>
    <div class=”clear”>
    </div>
    </div>
    </div>
    <div class=”clear”>
    </div>
    <div class=”pagination”>
    <ul>
    <li class=”current textColor”>1</li>

    <!– Place the link to your next gallery page here intead of # if you create more than one –>

    <li class=”textColor”> <a href=”#”>2</a> </li>
    <li class=”previous textColor”> Previous </li>

    <!– Place the link to your next gallery page here if you create more than one –>

    <li class=”next textColor”> <a class=”paginationLinks” href=”#”>Next</a> </li>
    </ul>
    </div>

    <!– This starts the contact area, so if you want to delete it start here—>

    <div id=”contact”>

    <!– Delete or place your email address here –>

    <a href=”mailto:user@domain”> <span
    class=”textColor” id=”metadata.contactInfo.value”>Contact Name</span>
    </a>
    </div>

    <!– and end here –>

    <div class=”clear”>
    </div>
    </div>
    </body>
    </html>

    Related posts:

    1. Adobe Lightroom Gallery Template Tutorial
    2. How to Add an Image to Your Web Site
    3. How to Center an Image

    ]]>     http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html-gallery-turtorial-part-2/feed 0     Free Brainstorming Web Applications http://buildasuccessfulwebsite.com/planning/free-brainstorming-web-applications http://buildasuccessfulwebsite.com/planning/free-brainstorming-web-applications#comments Mon, 28 Jun 2010 02:23:24 +0000 admin http://buildasuccessfulwebsite.com/?p=380
  • Open Source Content Management Systems
    • ]]>     bubbl.us

    Bubbl.us is a simple and free web application that lets you brainstorm online.

    Why use bubbl.us?

    Because you can:

    • Create colorful mind maps online
    • Share and work with friends
    • Embed your mind map in your blog or website
    • Email and print your mind map
    • Save your mind map as an image

    And it’s FREE!

    Examples

    Features | Team | Future

    Check out our blog for news and updates.

    GE imagination at work
    Imagination Cubed is a very simple to use brainstorming tool.
    http://www.mindmeister.com/stylesheets/skins/default/images/logo_anon.png?1277052075
    Online Mind Mapping: MindMeister – free web-based collaborative mind mapping tool for brainstorming and project management.

    Related posts:

    1. Open Source Content Management Systems

    ]]>     http://buildasuccessfulwebsite.com/planning/free-brainstorming-web-applications/feed 0     Open Source Content Management Systems http://buildasuccessfulwebsite.com/planning/open-source-content-management-systems http://buildasuccessfulwebsite.com/planning/open-source-content-management-systems#comments Sun, 27 Jun 2010 23:45:32 +0000 admin http://buildasuccessfulwebsite.com/?p=373 Here is a list of some popular open source content management systems (CMS).

    BLOGS:

    b2evolution

    Short description: A blog script featuring multiple blogs, categories/sub-categories, skins, search function, multiple languages, search engines friendly URLs.
    Homepage: http://b2evolution.net/

    b2evolution support forum
    (We are not associated with the support forum)

    nucleus logo

    Short description: A powerful blog script featuring multiple blogs, multiple authors, drafts and future posts, bookmarklets.
    Homepage: http://nucleuscms.org/

    Nucleus support forum
    (We are not associated with the support forum)

    wordpress logo

    Short description: WordPress is a blogging software with a focus on ease of use, elegance, performance, and standards with a huge selection of themes and plugins.
    Homepage: http://wordpress.org/

    WordPress support forum
    (We are not associated with the support forum)

    Classifieds:

    noah's-classifieds

    Short description: A classifieds system featuring categories and subcategories in unlimited depth, image upload for categories and classifieds, variable fields per categories, customizable email notifications, locking categories, classifieds approval, auto-thumbnail generation, classifieds management by user, send classified to a friend.
    Homepage: http://www.noahsclassifieds.org/

    Noahs Classifieds support forum
    (We are not associated with the support forum)

    Content Managment

    drupal logo

    Short description: An advanced portal with collaborative book, search engines friendly URLs, online help, roles, full content search, site watching, threaded comments, version control, blogging, news aggregator.
    Homepage: http://drupal.org/

    Drupal support forum
    (We are not associated with the support forum)

    geeklog logo

    Short description: A portal system with a wide range of modules.
    Homepage: http://www.geeklog.net/

    Geeklog support forum
    (We are not associated with the support forum)

    joomla logo

    Short description: Joomla! is one of the most powerful Open Source Content Management Systems on the planet. It is used all over the world for everything from simple websites to complex corporate applications. Joomla! is easy to install, simple to manage, and reliable.
    Homepage: http://www.joomla.org/

    Joomla 1.5 support forum
    (We are not associated with the support forum)

    mambo logo

    Short description: A professional level yet easy to use Content Management System featuring inline WYSIWYG content editors, newsfeeds, syndicated news, banners, mailing users, links manager, statistics, content archiving, date based content, 20 languages, modules and components.
    Homepage: http://www.mambo-foundation.org/

    Mambo support forum
    (We are not associated with the support forum)

    phpnuke logo

    Short description: One of the most popular community-based portals with a big choice of modules and languages.
    Homepage: http://www.phpnuke.org/

    PHP-Nuke support forum
    (We are not associated with the support forum)
    phpwcms logo

    Short description: phpWCMS is a robust and simple but yet powerful web based content management system running under PHP and MySQL. phpwcms is in use on thousands of websites all over the world.
    Homepage: http://www.phpwcms.de/

    phpWCMS support forum
    (We are not associated with the support forum)

    php website logo

    Short description: Very powerful Content Management System with document manager, announcements, menu manager, photo album, block maker, FAQ, web pages maker, polls, information categorizer, calendar, link manager, form generator.
    Homepage: http://phpwebsite.appstate.edu/

    phpWebSite support forum
    (We are not associated with the support forum)

    siteframe logo

    Short description: A straightforward content-management system designed for rapid deployment of community-based websites. Nice-looking templates, oriented toward document-sharing, clean interface.
    Homepage: http://siteframe.org/

    Siteframe support forum
    (We are not associated with the support forum)

    typo3 logo

    Short description: TYPO3 is a free Open Source content management system for enterprise purposes on the web and in intranets. It offers full flexibility and extendability while featuring an accomplished set of ready-made interfaces, functions and modules.
    Homepage: http://www.typo3.com/

    TYPO3 support forum
    (We are not associated with the support forum)

    xoops logo

    Short description: A very popular advanced portal system.
    Homepage: http://www.xoops.org/

    Xoops support forum
    (We are not associated with the support forum)

    zikula logo
    Short description: Zikula is a Web Application Toolkit, which allows you to run impressive websites and build powerful online applications. Zikula has received praise for many things, but we believe the highlights are ease of use, quick and easy development, security and performance and lastly flexibility.
    Homepage: http://zikula.org/

    Zikula support forum
    (We are not associated with the support forum)

    Customer Relationships:

    craftysyntax logo

    Short description: A Live Help chat system featuring monitor your visitors, proactively open a chat session, multiple chat sessions, referrer tracking, page view tracking, multiple operators, canned responses/images/URLs, multiple departments each with different icons, leave a message.
    Homepage: http://www.craftysyntax.com/

    Crafty Syntax Live Help support forum
    (We are not associated with the support forum)

    helcenterlive logo

    Short description: Very powerful all-in-one help center including Live Help, Support Tickets and FAQ. Features include unlimited operators/departments, monitor visitors, initiate chat, collect visitor’s information, track visitor’s footprint, auto save chat transcripts, canned messages, leave a message, auto-assign tickets to operators, unlimited FAQ topics.
    Homepage: http://www.helpcenterlive.com/

    Help Center Live support forum
    (We are not associated with the support forum)

    osticket logo

    Short description: osTicket is a widely-used open source support ticket system. It seamlessly integrates inquiries created via email, phone and web-based forms into a simple easy-to-use multi-user web interface. Manage, organize and archive all your support requests and responses in one place while providing your customers with accountability and responsiveness they deserve.
    Homepage: http://osticket.com/

    osTicket support forum
    (We are not associated with the support forum)

    php support tickets

    Short description: A simple, one-admin Support Tickets system featuring self-registering, emailing to admin, attachments.
    Homepage: http://www.phpsupporttickets.com/

    PHP Support Tickets support forum
    (We are not associated with the support forum)

    support logic logo

    Short description: A Support Tickets system featuring multiple email addresses, admin/staff/user panels, canned responses, HTML tags support, email limit on a per user/day basis, attachments.
    Homepage: http://www.support-logic.com/index.php

    Support Logic Helpdesk support forum
    (We are not associated with the support forum)

    Discussion Boards:

    phpbb logo

    Short description: A widely-popular open-source bulletin-board package, works well, simple user interface and admin panel, clean look, scales well, and can be customized.
    Homepage: http://www.phpbb.com/

    phpBB support forum
    (We are not associated with the support forum)

    simple machines forum logo

    Short description: Elegant. Effective. Powerful. Free. SMF is all of the above. SMF is a next-generation community software package and is jam-packed with features, while at the same time having a minimal impact on resources.
    Homepage: http://www.simplemachines.org/

    SMF support forum
    (We are not associated with the support forum)

    E-commerce

    cube cart logo

    Short description: An easy to use yet powerful shopping cart featuring unlimited categories and products, multiple payment gateways, downloadable products. The design is very easy to modify.
    Homepage: http://www.cubecart.com/

    CubeCart support forum
    (We are not associated with the support forum)

    os commerce logo

    Short description: A power-user shopping cart with a big variety of modules and support of almost every payment gateway. A big developers community is ready to offer custom solutions depending on your needs.
    Homepage: http://oscommerce.com/

    OS Commerce support forum
    (We are not associated with the support forum)

    zen cart logo

    Short description: Zen Cart truly is the art of e-commerce; a free, user-friendly, open source shopping cart system. The software is being developed by group of like-minded shop owners, programmers, designers, and consultants that think e-commerce could be and should be done differently.
    Homepage: http://www.zen-cart.com/

    Zen Cart support forum
    (We are not associated with the support forum)

    Gallaries

    4 images logo

    Short description: An Image Gallery system featuring unlimited categories/subcategories, web-based and FTP images upload, auto-thumbnails, comments, send a picture, rate a picture, random pictures, extensive administration panel.
    Homepage: http://www.4homepages.de/

    4Images Gallery support forum
    (We are not associated with the support forum)

    coppermine logo

    Short description: An Image Gallery system featuring categories and albums, thumbnails and intermediate size pics, search feature, new and random pictures, user management (private galleries, groups), user comments, e-cards feature, slideshow viewer.
    Homepage: http://coppermine.sourceforge.net/

    Coppermine Photo Gallery support forum
    (We are not associated with the support forum)

    gallery logo

    Short description: An Image Gallery system featuring albums within albums, thumbnailing specific picture area, captions, rotate, reorder pictures, album-based attributes, album mirroring.
    Homepage: http://gallery.menalto.com/

    Gallery support forum
    (We are not associated with the support forum)

    Site Builders:

    soholaunch logo

    Short description: From basic, informational websites to robust e-business applications, this script vastly simplifies the creation and management of cutting-edge internet solutions. It installs at the end-users web site and empowers novices and seasoned developers alike with a streamlined development and management process unmatched by any other software product.
    Homepage: http://www.soholaunch.com/

    Soholaunch Pro Edition support forum
    (We are not associated with the support forum)

    Short description: Use Templates Express to install static templates to your website. You will need to use FTP and edit the html files, replacing the default text with your own text. Standard information like title, name, address and similar will be collected during installation and placed into the installed template in the appropriate locations.

    No related posts.

    ]]>     http://buildasuccessfulwebsite.com/planning/open-source-content-management-systems/feed 0     Sample Slide Show for SBI! http://buildasuccessfulwebsite.com/templates-4-sbi/sample-slide-show-for-sbi http://buildasuccessfulwebsite.com/templates-4-sbi/sample-slide-show-for-sbi#comments Tue, 04 May 2010 01:41:36 +0000 admin http://buildasuccessfulwebsite.com/?p=349 SBI! users will have a hard time making a slide show for their web site if they do not use some Java Script. So, I have modified some code so that you can add one to your SBI! web site easily.

    View:  Sample slide show for SBI!

    Download: Sample slide show for SBI!

    CC : Creative Commons License

    No related posts.

    ]]>     http://buildasuccessfulwebsite.com/templates-4-sbi/sample-slide-show-for-sbi/feed 1     Adobe Lightroom Gallery Template Tutorial http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html-gallery-template-tutorial-for-sbi http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html-gallery-template-tutorial-for-sbi#comments Wed, 28 Apr 2010 00:33:36 +0000 admin http://buildasuccessfulwebsite.com/?p=329 Welcome to to the Adobe Lightroom HTML gallery template tutorial for SBI! users. If you are an SBI! owner, and want to spruce up your web site with a nice HTML gallery from Adobe, you will soon realize that it will not work. However, I will show you in this tutorial how to change that by modifying the code to make it work.

    Lets have a look at what your gallery will look like first before we get to work. It will be a bit of work to create, so you may as well know what you are getting yourself into!

    Adobe Lightroom HTML Gallery Template (without modifications)

    The Structure

    First things first. Before we start modifying the code, you need to understand how to set up your SBI files so that you can upload them to the SBI server.

    1. Create a folder in your My Documents (for windows) folder, or elsewhere on your computer, and name it image-files.

    2. Create a folder in your My Documents (for windows) folder, or elsewhere on your computer, and name it support-files.

    3. Size all your landscape photos so that they are 450 px by 327 px and all your portrait photos so that they are 338 px by 450 px (see examples below).

    4. Save these photos to your image-files folder with names that describe the photo. For example girl-pencil-drawing.jpg

    5. Next we need the thumbnails saved into image-files folder. The landscape thumbnails need to be 130 px by 87 px, and the portrait ones need to be 87 px by 137 px.

    compact disc

    compact disc

    Once you are finished and have each image file both in a large (flower.jpg) and small format (flower-thumb.jpg) in your image-files folder, add these files to your folders.
    Now you are all ready to modify the HTML pages.
    I will explain that in my next tutorial…

    No related posts.

    ]]>     http://buildasuccessfulwebsite.com/html_tutorials/adobe-lightroom-html-gallery-template-tutorial-for-sbi/feed 0     CSS Templates for SBI! http://buildasuccessfulwebsite.com/templates-4-sbi/css-templates-for-sbi http://buildasuccessfulwebsite.com/templates-4-sbi/css-templates-for-sbi#comments Wed, 28 Apr 2010 00:24:51 +0000 admin http://buildasuccessfulwebsite.com/?p=324 There are new CSS templates for SBI! available. You can use them on any web site. They are brought to you through a Creative Common License which allows you to use and modify them as long as you provide a link back to us.

    The free CSS templates are made especially for SBI! users. Most excellent web site templates can not be used by SBI! owners because the structure of the links and pages are different.

    Now you can download or choose from (at least 6 so far) templates that will work on your web site, even if you are an SBI! member.

    Go to the newest addition to Buildasuccessfulwebsite.com:

    TEMPLATES4SBI

    No related posts.

    ]]>     http://buildasuccessfulwebsite.com/templates-4-sbi/css-templates-for-sbi/feed 0     CSS – Create Custom Headers http://buildasuccessfulwebsite.com/css-tutorials/css-create-custom-headers http://buildasuccessfulwebsite.com/css-tutorials/css-create-custom-headers#comments Mon, 05 Apr 2010 20:37:30 +0000 admin http://buildasuccessfulwebsite.com/?p=315
  • CSS Head Section
    • ]]>     It is a great idea to use custom headers within your HTML document. It is important to put your web page keywords in a header for better search engine optimization. Changing the way your header looks is easy with CSS (cascading style sheets). Heading one tags are considered to be the most important tags by the search engines. Heading 2 tags are less important and Heading 3 tags are usually headings withing a Heading 1 or Heading 2 tag.

    Let’s say your web page is about hotels in Ontario, and you decide to make that your heading.

    The HTML for that would be:

    <h1> Hotels in Ontario </h1>

    To change the appearance of Heading 1, Heading 2 and Heading 3 tags, create a rule for them in your css page or within your HTML document.

    If you do not have an CSS file, you can add this somewhere  between the head tags in your HTML page (top section).

    <style>

    H1 {
    font-size: 20px;
    color: #2a2a2a;
    margin-top:-10px;  /* this takes away some of the space that browsers will give to a h1 tag */
    margin-bottom:-15px;
    width: 240px; /* this is the width of the image */
    height: 10px; /* this is the height of the image */
    background: url( include the url of your image, for example, http://www.mysite.com/images/my_image.gif between these brackets) no-repeat;

    }
    </style>

    If you have created a CSS file add this rule to the file by copying and pasting the following code:

    H1 {
    font-size: 20px;
    color: #2a2a2a;  /* this is the font colour */
    margin-top:-10px;  /* this takes away some of the space that browsers will give to a h1 tag */
    margin-bottom:-15px;
    width: 240px; /* this is the width of the image */
    height: 10px; /* this is the height of the image */
    background: url( include the url of your image, for example, http://www.mysite.com/images/my_image.gif between these brackets) no-repeat;

    You can customize your header further by creating a cool background in Photoshop CS4, or another graphics editing program. Add a gradient to the image and make your headings stand out.  Save it as a gif file, upload it to your server, refer to it, and you are finished!

    Related posts:

    1. CSS Head Section

    ]]>     http://buildasuccessfulwebsite.com/css-tutorials/css-create-custom-headers/feed 0     CSS Head Section http://buildasuccessfulwebsite.com/css-tutorials/css-head-section http://buildasuccessfulwebsite.com/css-tutorials/css-head-section#comments Sun, 04 Apr 2010 01:08:49 +0000 admin http://buildasuccessfulwebsite.com/?p=307
  • What is CSS?
  • HTML Tags Reference
  • HTML Head Setup
    • ]]>     In this CSS tutorial I will teach you some simple cascading style sheet codes that you can use in your HTML documents to spice them up a little. By the end of this tutorial, your web page will no longer be simply black and white.

    The first thing you need to do is create a CSS page and refer to it in your HTML page. This information is found in my What is CSS? (link opens in a new window) post.

    Open the CSS document/script in your favourite HTML editor.

    Then add this code to the page:

    body {

    margin: 0;

    padding: 0;

    line-height: 1.5em;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 12px;

    color: #ffffff;

    background: #2a2a2a;

    }

    If you are working in DreamWeaver, save the CSS file onto your server. Or, if you do own DreamWeaver, save your HTML document, open your favourite FTP client and upload your file there. If you do not know what I am talking about look read my tutorial on FTP clients.

    Now, what you need to do is view the HTML page that refers the CSS file that you saved on your server. For example if the HTML file you saved to your server is called index.html (your homepage) then make sure the page refers to your CSS file. For example,  the code could be <link rel=”stylesheet” type=”text/css” href=http://www.yoursite.com/your_css_page.css />

    If it your HTML page links properly to your CSS page, then the body of your page should look different.

    Let me explain what you have done.

    You have told an internet browser how to display the content between the two body HTML tags (<head> and </head>) on your web page.  Now it knows that the margins are 0 pixels and that there is no padding.  You can play with this by changing the value to 10 or 20 pixels. See what happens when you save it to your server.

    The font for the document is Arial, Helvetica, sans-serif, and the font size is 12 pixels. This is the default font size of your page. The colour of your font is white and your background is charcoal black.

    Every colour is a combination of numbers, letters, or numbers and letters.  So if you change the colour #2a2a2a to #2f2f2f the colour will be come closer to black (much darker).

    White is #ffffff and black is #000000. Sometimes you will see black written as #000 and white as #fff. I would write them with all six numbers or letters. It only takes slightly longer.

    Never forget the number symbol or #. Otherwise, your colour will not appear.  Do not forget these two { } symbols either.

    ORGANIZING YOUR CSS PAGE

    One way in which to organize your CSS is to write multiple pages. Another way to keep it neat and tidy is to add comments that help you remember what codes you have written for what pages or sections within your HTML pages.  For example the comment /* header section*/ may help you quickly find the code for your header section.

    The better you become at writing CSS, the more complicated your page will become. So, keeping your code neat and tidy is important.

    I need a break from writing.  Another day I will continue explaining some other CSS codes which you can use and what they will do to your HTML page.  Maybe you would like to use tables to spruce up your page, or maybe you would like to learn how to place a nice coloured border around your image. Or perhaps want to spruce up your header section, or change the colour of your links.

    Related posts:

    1. What is CSS?
    2. HTML Tags Reference
    3. HTML Head Setup

    ]]>     http://buildasuccessfulwebsite.com/css-tutorials/css-head-section/feed 0     What is CSS? http://buildasuccessfulwebsite.com/css-tutorials/what-is-css http://buildasuccessfulwebsite.com/css-tutorials/what-is-css#comments Wed, 10 Mar 2010 02:10:00 +0000 admin http://buildasuccessfulwebsite.com/?p=302
  • HTML Tags Reference
    • ]]>     So what is CSS anyways? CSS stands for Cascading Style Sheets. These style sheets are used to control how your web site’s text, borders, headers, links, background, and other HTML elements look.

    You can add CSS within the HTML of your page, or save it as a separate css documet. I would keep it out of your HTML document, simply because it will make working with your codes that much more confusing.

    To refer to a CSS file on your web server is very easy.  Place this code just before your </head> tag.

    <link rel=”stylesheet” type=”text/css” href=”AND PLACE THE HTML LINK HERE EXAMPLE: http://www.mywebsite.com/stylesheet.css” />

    Remember to save your file onto your server FIRST. Otherwise your HTML document will look very funny.

    Related posts:

    1. HTML Tags Reference

    ]]>     http://buildasuccessfulwebsite.com/css-tutorials/what-is-css/feed 1