Sample news page

Google Webmaster Tools

Summary of recent posts

  • Sample post THE TOPMOST FULL-WIDTH COLUMN OF A "TWO COLUMN" LAYOUTI usually set the Layout to "Two column". I often leave the full-width boxes above and below the ...
    Posted Mar 29, 2016, 3:47 PM by District Webmaster
Showing posts 1 - 1 of 1. View more »


Sample post

posted Mar 26, 2016, 7:09 PM by District Webmaster   [ updated Mar 29, 2016, 3:47 PM ]

THE TOPMOST FULL-WIDTH COLUMN OF A "TWO COLUMN" LAYOUT
I usually set the Layout to "Two column". I often leave the full-width boxes above and below the columns blank, so I really could have set the Layout to "Two column (simple)". But as I lay out the page, sometimes I find I do want to use those full-width columns. Rather than change the Layout, I can quickly use those full-width boxes if I need them.

For example, if I have several lists to display, I sometimes put them in two or three columns down below and put the introductory text up in this full-width box. If all of your text looks similar, it is a good idea to use Insert for Horizontal line at the bottom of this top full-width box to help separate that text from the columns below.

TEXT TRICKS
I usually put the text in this left column and images in the right column. Usually I use the default font and size, but sometimes I bump it up from 10 pt to 12 pt. or even more.

You can also use boldface, italics, and underline. You can even highlight text with different colors, or change the color of the text. or both!  But use those tricks sparingly to highlight important things.

By default, weblinks just change the color, and are underlined when the mouse hovers over them. That might not be noticeable to some readers, so I often boldface my weblinks.

BREAKING UP LONG POSTS
One way to break up a post is Insert a Horizontal line, as I did above this section.

You can also break up long posts by typing in some headings, selecting them by clicking and dragging with the mouse, and changing their Format to Heading 2 or Heading 3 or Heading 4

This is a Heading 2 for a big section break.

And here is some filler text below that heading. If I need a smaller heading for a subsection, I could use Heading 3 like I did below:

This is a Heading 3 for a subsection.

And this is more filler text for that subsection. Equally important sections should use the same heading size:

This is another Heading 3, for example.

And this is even more filler text for that section. There is one more heading size:

This is a Heading 4, the lowest level of heading.

And this is the last of the filler text for that heading.

Not only will changing the heading size adjust the size of its font, headings are what you use for a Table of Contents for a long page. The different heading sizes organize that table of contents into outline format.

After you set up the page, you click at the top (or wherever you want the table to be), and pick Table of contents from the Insert menu. Below is the table of contents generated from the above headings:

LAYING OUT IMAGES
On a small screen (like a smartphone), the entire leftmost column is displayed and after that comes the next column and so forth. So my usual layout  of two columns delays the images until after all of the text. I like that for most news articles which folks might be viewing on their smartphone. 

However, sometimes you need an image to appear in the middle of some text for the flow of a story. In that case, I embed the image in the text. If it is a big image, I'll put it on its own between paragraphs, picking whatever size option looks best: S, M, L, 100%, or Original, and I'll set its alignment to centered. (See the right column of this post for how I deal with the overflowing link box problem when you set an image to 100%.) 

The image below is set to be centered and on its own between paragraphs:

Bus stop sample image

If you click on the above image while this post is in edit mode, here is how the controls are set:

Centered standalone image

But if it isn't a very big image, I'll instead set the image so that text flows around it, and I usually set the image to align to the right so text flow around on its left side. The smaller bus image to the right is set that way.

If you click that image, this is how the controls are set:

Right aligned embedded image

FORMATTING IMAGES

I put captions under an image, using italics.
The above image is medium and centered.

You can stretch an image to the full width of a column. The image below is set to 100%. Notice, however, how the box around it is a bit too wide. The right edge gets cut off:


I really don't like that, so if I set an image to 100%, I either remove its link, so the surrounding box goes away:


Or, if I want to keep the link so readers can view a larger image or so that the image becomes a weblink, I'll click in set it to 100% but then I click somewhere in this column to put the cursor here, then I click the <HTML> box at the top of the page. I scroll up through the HTML code until I find image's width code, and change it from 100% to 90%. That yields the result below - a wide image that has a link box but doesn't overflow the column.


Here is what the relevant HTML code look likes before I change it:
100 percent image width

And here I've changed it to 90% and then I click Update:
90 percent image width

USING GRAPHICS AS WEBLINKS
By default clicking on a graphic displays the underlying full-size image. But you can change that to any weblink and thus turn a graphic into a handy weblink to a service or page. This is especially helpful for folks using small screen devices.
  1. Click on the graphic while in page editing mode.
  2. Select Change in the top line of the pop-up box showing the graphic’s links.
  3. In the dialog box, change Link to this URL: to the desired web address. (Text to display: only affects the alternate text that shows up when an image is not displayed.)
Changing an image&#39;s link

    1-1 of 1