Posts

Showing posts with the label horizontal navigation

Google Sites Tutorial - Pages and Navigation

I am posting here for your enlightenment a walkthrough tutorial for creating pages and setting up a navigation bar. The video is pretty self-explanatory so I needn't provide much of an introduction.  However, I make reference to this post on designing a background with the 'blank slate' theme. Please take note of the tips and tricks mentioned in the video, these may things even a Google Sites' users may have overlooked.

Google Sites Tutorial - Horizontal Navigation and Drop Down Boxes

Google Sites released the option for horizontal navigation not too long ago.  This new features greatly enhances the professional look of websites, and I have used it on all my new sites.  Please refer to my post on background layout for easy integration of horizontal navigation into your web design. Horizontal Navigation is more appealing because we process information best that way.  It makes sense, we read from left to right.  Another benefit from this feature is that it eliminates the need for a sidebar.  While sidebars have their place in web design it is better to implement it on your terms, not because you have to for navigation purposes. Also, horizontal navigation enables the use of dropdown boxes.  These are links that appear when the category is hovered over.  For instance, in my bakery website example.  I have a page called Baked Goods, the sub-pages of which will be scones, muffins, cupcakes, etc.  Those sub-pages, which you ...

Google Sites Tip - Background Layout

Image
When you making a background for your Google Site make sure you use "Blank Slate" as your theme.  This is the only theme I know of that support transparency. First of all, take note of your header's height in 'Site Layout.'  If it is 125 pixels high, make a header that is exactly 125 pixels high. Here's a great tip for horizontal navigation: The horizontal navigation bar is 25 pixels high.  So, in this scenario where you have a 125 pixel header, create a background that incorporates your horizontal navigation bar starting at 125 to 160.  That will give you some space above and below your bar. If you don't want any space above and below make it snug 130 to 155. Click on and save this background and use on your website.  Just make sure your header height is 125px.   Here's what it looks like on your Google Site Here an example of a finished product using good background layout and design.