MEMBER ZONE
SEARCH NATIONAL SITE
SECURITY LEVELS

Lesson - 9

Fonts and Color - Adding Styles to your Announcements

WYSIWYG allows you the ability to add different Fonts, Sizes and Colors

As we covered earlier, discretion is needed in the use of too much color and too many different font faces and sizes. 

It is recommended that you use Coast Guard Auxiliary Standard colors on your site

 

Some colors JUST don't belong, can look very unprofessional  

 

DO NOT USE ALL CAPITAL LETTERS 

 

Use Bold Fonts For Headlines ONLY

 

Highlighting Text 

You are able to use Fonts, Highlighting, Underlining, Strikethrough and much more. Just take time to sit back and look at your page in "preview", have another flotilla member review it before posting for public and or member view. 

To be able to Highlight Text   

  • After typing your sentence or paragraph
  • Select the sentence or paragraph you want to highlight
  • go to <li> at the bottom of the Text area (your icon may be different due to where you are at in your announcement, it could be <Div>, <p>, <ul>, <span>, <tab>
  • While you have your text selected, hover your cursor over the icons to see the effect it would have.

  •  Click the <"TAG"> you wish to use
  •  Click Highlight, choose the color you want to use. 

 

Changing Fonts

You can change fonts almost a easy as highlighting text

 The default CSS text is Arial 12 pixels. This can be changed by;

  • After you have entered your text, select the Sentence or paragraph you wish to change the font on.

  • Click on the <TAG> below, click on Properties
  • Select Style builder in the file tabs    

The System Font text box is a drop down menu with the following styles of font;

  • Caption
  • Icon Labels
  • Menu Text
  • Messagebox
  • Small Caption
  • Status Bar
 

The Font Family text box is a drop down menu with the following font faces;

  • Arial (default)
  • Veranda
  • Comic Sans MS
  • Courier
  • Georgia
  • Tahoma
  • Times New Roman
  • Wingdings -  

            

Style Builder allows you to "Decorate" your text; 

  • Underline
  • Overline
  • Strikethrough Text

 

You are able to "Style" your text;

  • Bold
  • Italic
  • Capitalization; Not Set, Uppercase, Lowercase, Initial Cap

 

You will have to choose the "Size" of your text;

  • Not Set
  • XX-Large
  • X-Large
  • Large
  • Small
  • X-Small
  • XX-Small
  • Larger
  • Smaller  
Or you are able to set Font Size By;

 

  • px - pixel
  • pt - point
  • pc - pica
  • cm - centimeter 
  • mm - millimeter
  • in - inch 

 

 

The relation between the absolute units is as follows: 1in = 2.54cm = 25.4mm = 72pt = 6pc

 CSS requires that 1 px must be exactly 1/96th of an inch in all printed output.

 

 

Changing Colors

WYSIWYG Announcement Editor the default (recommended) colors are WOW Red and WOW Blue

But there are however other colors available through the "Style Builder" and just like highlighting text or changing fonts, adding or changing color is just as easy.

  • After entering your text, select the sentence or paragraph you want to colorize
  • Click on the <TAG> below
  • Open the Style Builder File Tab
  • Click on Color
  • Choose the color you want for your font.

In Style Builder you are able to customize your announcement. Always preview you page prior to saving it. When you are finished building your page, SAVE,SAVE, SAVE! 

 

 

 

 

 

Exercise 9

  • Add a new announcement with four lines of text
  • Set each line to a different font Family
  • Set each line to a different font size
  • Set each line to a different color
  • Set each line to a different Style/Decoration (e.g., underline, strikethrough, bold, italic)


New Announcements can be added easily

 

 

Caution should be taken with use of color 

 

 

The use of more than two Font Faces is not recommended 

 

 

The recommendation is to use the Nation Standard colors