21th December 2011

Our company announces the launch of it's new website. But that is not true. Just finally the start of this page. We have collected some interesting Templates over the past year and are now trying to implement them in our pages. The one we are in at the present was crafted by dcarter. He is over in the UK. We like the relaxed atmosphere of the pages. So, we used them for our 'Building Descriptions'. Hopefully, the relaxed pages, describing the hectic programming, will and you.

1st January 2012

It arrived without incident...

NOTES: This area can be used for news or any other info.

other info

This space can be used for additional information such as a contact phone number, address or maybe even a graphic.

Design Continuation... page 5

Blend Description

Blend is another Template that we really like. In fact the dateline above was 'borrowed' from it. We are describing it here for you and for us. It, like this one, has a lot of interesting concepts and features. Both have a fixed layout. As we have been studying the HTML world, we have been finding that 'there are ways'. You just have to be smart enough to use them. What 'ways' are we talking about?? How's about flexibilty and fitting to various screen sizes?? We do believe, that on a lot of machines that try to read our pages, they are finding them quite big. -AND- they do not reduce, or resize, well.
LIES. I Tell LIES!! Guess it depends on how long you have been attempting to write Web Pages and how many versions of the different Browsers you have been through to be able to understand what we are about to say. The latest Versions of Firefox DO NOT present any problems in reducing -or- enlarging our screens. 'Ctl +' will increase the size of the Text and 'Ctl -' will decrease it. 'Ctl 0' will put the page back to its Normal size. So, No problems... forget what we were gona talk about. (It's over in the TipsPage, if you are interested. Concerns the font types. )

 Added Aug 21, 2012   We have made changes to this template to fit our needs for our site. For some reason we could not get the 'Jump-to' and 'Return-from' to work in the HTML that we had previously been using. Those were the Templates we had obtained from -and- they served us well. Our lack of understanding was the biggest problem. This one and the Blend Templates are properly constructed and the Jump/Returns work. So they have become our new 'Base'. Most generally we will be using the 3 column format -but- occasionally only want a two. Which side gets removed will depend on out mood at the time. Extra notes get put in here cause... well we forget.
Found the problem with the Jump/Returns. Seems you can not specify a page hieght. We had all the previous Web Pages with a specified height and scroll capabilities.
     height: 473px;
     overflow: auto;
Gona have to figure out a new way to scroll the center and not the sides.

  • header: As the name suggests, this is at the top of the Page. It uses one of the images, "img02.jpg", which is a thin vertical line of Dual Tone that is smeared across the background. In other words it repeats for one row of a specified length or width. The main thing is ... it sets the stage for the Horizontal Characteristics.
    width: 1000px;   height: 193px;
  • logo: Now you may wonder why this is in this list. Well, it is inside the header and IF the header width is changed you want to change the length of this also... since it is specified and NOT free floating.
    width: 970px;   height: 150px;
  • menu: Same for this one. It is also inside the Header and must be coordinated which any changes in size.
    width: 1000px;   height: 30px;
  • wrapper: This is strange. It is simply a container for the lower portion of the Web Page. At this time no sizes are specified -but- they could be if needed.
    width: nothing specified.
  • page: This consists of one or two SideBars and a Content.
    width: 1000px;
  • sidebar: Now in the "Original Blend" there are two sidebars with a Calendar on one side. The whole look and concept is what attracted us to this. As we have worked with the code, we have learned how to make minor changes to use this with just one SideBar. Either the Left or the Right depending on what we want or feel like. -But- the width and placement of these affects the Horizontal calculations.
    width: 220px;   (x 2 = 440px;)
  • content: Finally we have the content which is the most important part of the Page to begin with. It gets all, or the greatest portion of, the space that's left over. Now then, the size will naturally fluctuate with whether we use one or two SideBars and the sizes of the SideBars. It is of most importance to keep these three coordinated.
    width: 560px;
  • footer: And last but not least, we have the Footer, the Info at the Bottom of our Page. The size of the footer is more or less dictated by the above components. In order to keep things looking nice it must be in proportion to the others.
    width: 1000px;
  • post & entry: Both of these have a line height.

The above entities, and in particular trying to get them to look the way 'we' wanted them to look, is what brought about this Page. Words... words are used to describe things. Sometimes you need to pay attention to the meaning of words. Especially some words at certain times. Take for instance; cascading. One of its definitions states: a succession of stages, processes, operations, or units. Essentially, you can, and do, describe your Web Pages in a series of steps, or stages. AND you can specify that certain elements operate differently in certain sections of the Web Page. Example from above; the <p> for paragraph operates differently in the 'header' section than it does in the 'content' section. This is specified in the CSS file. So, whenever you are working with someone else's code and things don't seem to work correctly; stop. Examine the 'includes' more closely and see if a 'rule' has been changed.

One of the changes made 'buffaloed' me for quite some time. In the 'header' we have the 'Title' of the document followed by an author's notification. These are all on one line -but- the Title item is inside <h1>'s and the Author info is inside <p>'s. By 'normal' rules these items should be on separate lines. ??? Why are they not? Because... the rules were changed by the creator of this 'Template' for all <p>'s that appear inside a 'logo' item. This requires examining the CSS file.

In the 'logo' definitions, both 'h1' and 'p' are specified as float left. If you place several floating elements after each other, they will float next to each other if there is room. And that was what was happening here. We wanted the Author Info line below the title. So we had to remove the <p> descriptor from within the logo descriptor in the CSS file. You won't see that in the examples here ... cause ... we are trying to keep as much of the original as possible -and- let you make your own changes. Examples of our changes can be seen in the references on the Left Side of this Page.


Smart Phone Page Design.

Another reason for this page is; We finally broke down and got one of them thar intelligent phones. Our LG Wave AX380 is having some problems. Primarily with the fabulous BlueTooth we got on approximately June 15th, 2011... a Plantronics Voyager PRO+. Through tesing on our own (Using wife's Bluetooth) we found that we could not stay connected because of the phone. However, recent events have given suspicions to the BlueTooth device itself. This will not be confirmed until we get the new SmartPhone. -But- back to the subject.

As mentioned above, the 'header logo' definition had both the Title and the Paragraph floating. We changed it and took out the Paragraph floating aspect. Now for the colors, they used a DuoTone image(img02) at the top to get things started. In a decent Graphics Editor, you can get it to paint, or fill, with Gradients. It starts with one color at the top and ends with another at the bottom, blending them as it moves down. Rather clever idea. The final color at the bottom will be the color for the rest of your Web Page... Unless you get fancy and make other changes. The major areas of concern for color are:

  • img02 - Backgroung image for the Header. As stated above, this one sorta sets the color theme for the whole WebPage.
  • img01 - Background image for the Body - plus the default color.
    Technically, the numeric color setting of the background doesn't mean a thing UNLESS the image is missing!!! It is everything outside of the header and the page. Well, not totally true. The image is outside of everything. You won't see the image UNLESS your browser window is wide enough.
  • body - Here, as usual, we set the default Background and the default Text color.
  • a & a:hover - When mouse is NOT over and when it IS.
  • RelDatesa & RelDates a:hover - When mouse is NOT over and when it IS. From the name it appears this had a usage with some Dates. However, they were not used in the Template.
  • logo h1 - Title text color in Header Logo.
  • logo p - Paragraph text color in Header Logo.
  • logo a - Link text color in Header Logo.
  • menu a - Link text color in Menu.
  • menu a:hover - Hover text color in Menu.
  • menu .current_page_item a - Default Link text color in Menu. We did not use this one. It was supposed to indicate a default selection, home in this case. -But- because it did not turn off IF and WHEN you selected another, we didn't think it fit quite properly.
  • page - This is the section that contains both of your columns and the content section. Need to set the default background color.
  • latest-post - Another one that was not used in the Template.
  • title a & title a:hover - These are the Title lines above each section and they can be links to other places.
  • byline - This creates the fine print under the Headers. (or where ever you use it)
  • links - Used for References... contains default color.
  • sidebar li li - Has a bottom border color.
  • sidebar li h2 - Has a background and text color.
  • sidebar a & sidebar a:hover - Has text colors
  • s & x - Search Box Background and Text colors. Plus border.
  • footer, footer a & footer p - Textual colors and Backgroung colors in the footer along the bottom.
  • - ======== things we added ============
  • title2 - This is a derivitive of our own that we have used for a long time. It will be included in the CSS section at the top of the HTML file. Has some colors.
  • subtitle -
  • onelinerBox -
  • WinColors -
  • SuSEcolors -
  • nav li ul -

Ok, Let's Do It

Allllrighty Now. First, we need to copy the Template to our New Area, in which to build the SmartPhone WebPage. The dir will be called: MySmartPhone. Then we will ReName the Template files to Blend-HTCRezound.html and Blend-HTCRezound.css. While we are Building it, both files will be in the same dir. An 'images' dir will be created under this one to hold the images used. All these items will be placed in the appropriate areas after the build is complete. -Or- maybe sometime before.

First we must take care of the "house" work. These involve the settings at the top of the page primarily and maybe a few others.

  • The <DOCTYPE> is already set - part of the Template.
  • The creation date & Author: 31 December 2011 by Chuck Taylor
  • Comments:Some minor things about the Page and possible a mention of the Original Authors.
  • ======== in the head section ============
  • link: to our favicon
  • Title: HTC Rezound - Smartphone
  • Author:
  • Copyright:
  • description:
  • link to our css file Blend-HTCRezound.css
  • link to Calendar css: epoch_styles.css
  • links to and inclusion of: Any Javascript you want need.
  • inclusion of: Any other CSS styles that you want.
  • :

 Body  Now we get to the meat of it all. The characteristics of the body have already been spelled out in the CSS file. If you need any changes they should be made there. Can't think of any right off hand. The rest of the Web Page is a series of div's, the first being the header.

 Header:  This be the top most portion of your viewable Page.

  • Our Lord: First we mention and credit the Lord.
  • Title: Next is our Logo and the Page Title.
  • Author: A mention of the Author. We decided to place it below the Title.
  •  Menu:   A horizontal menu with appropriate references. Most of which will be other areas on your site. Off site references are along the side. The important part here is the colors. One for NO mouse over and one for YES mouse over.
  • RSS: We haven't messed with the RSS stuff much -but- may in the near furure so for now we will leave them.
  • Width: We will leave the 1000px width for both and make adjustments in the sections below these two.

 wrapper:  Other than it is a container for all of the following items, we can see no real purpose in this. There are no specifications for it, it is just a declared division. -But- then we don't always understand everything we see -or- know. We will perform experiments with leaving it out ... later ... and report the results.

 page:  Another container, with characteristics. It has a width of 1000px and a background color. It will hold the two SidePanels and the Content.

 Sidepanel 1   If we are using it, this will be the Left Sidepanel.

 Content   We will always, or should be, be using this one, the Contents. It has a 'Normal' width of 560px which if added on to the two Sidepanels 'Normal' of 220px will give 1000px. However, for this one we are going to increase it to 670px cause we are dropping the Left Sidepanel.

 Sidepanel 2   If we are using it, this will be the Right Sidepanel. In this Sidepanel he has a section he calls the 'Tags'. We could not really see a use for it -but- Web Searching found information on this concept in Wikipedia. Which is where you will go if you click on the word. We may -or- may not use this feature of the Template. It's a place holder for now.