Saturday, September 29, 2012

How to Create a Fix Navigation Bar at the Top of Your Page

I want to save this link before I forget, then come back and edit the page.

Create a Fixed Navigation Bar at the Top of Your Web Page


The simple tutorial comes from Fuel Your Creativity. The site provides the files to download or you can take the code directly from the page.

The idea is to fix the navigation at the top of the page and keep it there even as you scroll down. It is a simple matter of using a fixed position layout of the navigation.

I want to go back and examine the issue because the major sites seem to have gotten away from this practice. One wonders about its impact on iphones. The second issue seems to be screen space which is always at a premium. Still, one should consider the advantages.

It is contrarian. That's good because it will stand out. It creates a visual reference. Again, good, because the eye is drawn to the navigation bar.

One possibility that I can consider is using the fixed navigation on the index page and then removing it on all other pages.

There are examples out there to see.

Sunday, September 23, 2012

980 vs 960 pixel width layout

The debate over a making your web layout 980 or 960 comes down to a two or four column layout versus a three column layout. The number 980 is easily divisible by 2's and 4's while 960 has the advantage of being divisible by 3.

Read Quantumodo for a full explanation of the advantages of 980.  Apple uses this layout.

Now, if you are doing the math, then the four column layout allows a max width of 245 pixels. Apple, however, wisely scales its images down to 237 pixels to allow for some white space. That comes to a margin of 4 pixels of white space on each image. Since images are next to each other, the margin doubles to 8 pixels.



Notice that I changed the layout on this blog to 980 pixels.

Friday, December 17, 2010

It's Snowing

video
This time every year I try to add a little snow to my web pages. There are two ways that I know of to do this. The first is with flash. Flash is not difficult and all that is involved is action script that is available with a simple search.

The second method is with javascript.

Wednesday, December 1, 2010

WordPress Nextgen Gallery

Notes from the Underground WordPress.

Bonnie Cotier's explanation of how to upload the Nextgen Gallery to your WordPress blog.

[gallery id="0"]

This is a test of the magic gallery plug in.

I will also want to check out the create a photo gallery tutorial found at http://wordpress.tv/2009/01/05/creating-an-image-gallery/

Wednesday, November 24, 2010

How to get multiple pages from same website to rank on first page of Google

How to get multiple pages from same website to rank on first page of Google?

Multiple page indexing on Google is now common place. If someone is searching for what Google deems as a very specific search toward a particular website, it will list up to 7 pages. According to Google, this applies “for queries that indicate a strong user interest in a particular domain."

You can read about indexing generally here.

I think the question needs to be refined - "How to get sub-pages from same website indexed by Google?"

There is discussion out there with the general conclusion that the "generation of these additional links are based upon user-behavior based information".



Some attributes that should be considered include:

* Popularity associated with a web page,
* Likelihood that the information on a web page will be accessed by a user,
* Likelihood that the information will be useful to a user submitting a search query, or;
* Other factors associated with the quality of a web page.

 I need to think about this and get back to this post.

http://www.seobythesea.com/?p=406

Monday, November 22, 2010

RSS in Plain English

Two things to know.

First, "emailusers" on WordPress. This app sends out an email to registered customers who want to see your latest blog post.

Here it is explained(fast forward through the bull),

http://www.youtube.com/watch?v=0yWKqe_T5D8

Second, is the RSS feed. Here it is, RSS explained in plain English.

Saturday, November 20, 2010

Show a bigger image with javascript

Displaying a bigger image by rolling over a thumbnail with the cursor is not difficult. Dreamweaver already has the javascript code for it. An explanation of how to use Dreamweaver to achieve this effect is found at DigitalFamily.

I am looking at this because I need to use this or a similar function to display products on a page from a small thumbnail image. By rolling over the thumbnail with the mouse, one gets a larger image displayed in a separate area. One issue that I need to consider is creating a box where the larger image will appear.I also wonder how to achieve this effect in Blogger.

Online catalogs like Gap use a similar tool to great effect.

There is a stripped down code readily available. I have copied this completely from GeekswithBlogs, so don't give me any credit.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="ecmascript">
        function ShowBiggerImage(obj)
        {
            document.getElementById("LargeImageContainerDiv").innerHTML = "<img src='" + obj.src + "'+'width=150 height=200' >";
        }
        function ShowDefaultImage(obj)
        {
            document.getElementById("LargeImageContainerDiv").innerHTML = "";
        }
        function move_Area(event)
        {
         event = event || window.event;
         LargeImageContainerDiv.style.left=event.clientX+document.body.scrollLeft+10;
         LargeImageContainerDiv.style.top=event.clientY+document.body.scrollTop+10;
        }
        document.onmousemove = move_Area;

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Image ID="Image1" runat="server" Width="60px" Height="80px" ImageUrl="~/Images/FretsOnFire.jpg" onmouseover="ShowBiggerImage(this);" onmouseout="ShowDefaultImage(this);"/>
        </div>
        <div id="LargeImageContainerDiv" style="position: absolute; z-index:2"></div>
    </form>
    </body>
</html>