MediaLab Sitegrinder 3 hints

Card Set Information

Author:
Anonymous
ID:
51387
Filename:
MediaLab Sitegrinder 3 hints
Updated:
2010-11-23 15:53:43
Tags:
medialab Sitegrinder SG3 Hints
Folders:

Description:
Sitegrinder 3
Show Answers:

Home > Flashcards > Print Preview

The flashcards below were created by user Anonymous on FreezingBlue Flashcards. What would you like to do?


  1. -$
    Used on Layer Type: Image Buttons, Text Buttons, Forms

    Matches to Other Layers with Hints: None

    Description:

    • The -$ hint simply tells SiteGrinder that the
    • particular button or form that it is attached to is an ecommerce enabled button
    • or form. The -$ hint is never used by itself. Instead it is a modifier
    • hint that can be used on \ or -form layers. A \ layer that also has the -$ hint
    • will not appear in the Links control alongside other buttons. Similarly, a
    • -form layer that also has the -$ hint will not appear in the list of forms in
    • the plugin user interface. Not all ecommerce modules may support using -$ and
    • -form together.

    • If a page has any -$ buttons or forms, then in
    • the SiteGrinder CMS, you'll see an ecommerce control and all the -$ layers on
    • the page listed there. If you open that entry, you'll be given a list of
    • ecommerce operations that the button might be able to perform. See the
    • information on the different ecommerce modules to see what options they each
    • support. Choosing an operation may cause other entry fields to be added
    • to the dialog. Fill them out with the required information.
  2. -Background
    Used on Layer Type: Image

    Matches to Other Layers with Hints: -column, -pagesize

    • Description:
    • The -background hint can be used to place a
    • repeating tile (or affixed bitmap image) on the browser window, the page, or
    • any column.

    • Any -background layer specifies the tile for
    • something else, either another layer or the browser window's background.
    • If a layer is named "browser-background", then the -background
    • layer defines the tile for the browser window itself. Otherwise the base
    • name of -background layer should match a -pagesize or -column layer, for
    • example a layer named "contact-pagesize" would get its background
    • from "contact-background".

    • There is also a variation for footers that takes the
    • layer name "footer-background".
  3. -Blog
    • Requires: SiteGrinder 3 with the SiteGrinder Control add-on, a Site with Remote
    • CMS

    Used on Layer Type: image, text

    Matches to Other Layers with Hints:

    Description:

    • The -blog hint designates an area of the page
    • that can have blog entries and allow site visitors to make comments on the blog
    • entry. Blogs are configured in the Content Manager.

    • If you create new pages in the Content Manager
    • from page designs containing blogs, the blogs on the new pages will have their
    • own unique content.
  4. browser-background
    • Used on Layer Type: image with either pattern overlay or gradient overlay
    • layer style

    Matches to Other Layers with Hints: none

    Description:

    • A layer whose complete name is
    • "browser-background" indicates to SiteGrinder both the tile that
    • should be used in the background of the browser as well as how it should
    • repeat.

    • The tiling image is set by adding either a
    • Pattern Overlay layer style to the layer or a Gradient Overlay layer
    • style. If using a gradient it needs to be exactly vertical or exactly
    • horizontal depending on how it is to repeat.

    • Tile repeating is set based on the contents of
    • the. For example if the layer content extends from the left to the right
    • side but not to the bottom the layer will repeat horizontally only.
  5. Browser-backgroundcolor
    Used on Layer Type: image with color overlay layer style

    Matches to Other Layers with Hints:

    Description:

    • A layer whose complete name is
    • "browser-backgroundcolor" indicates to SiteGrinder the color that
    • should fill the entire background area of the browser window behind all other
    • elements, even background tiles.

    • The color is indicated by adding the Color
    • Overlay layer style to the layer and setting the color of the layer style to
    • the color you want to use as the browser background.

    • The contents of this layer don't matter, but
    • having the contents fill the entire document area and placing it behind all
    • other layers will give the most accurate preview.
  6. -Button
    Used on Layer Type: any

    • Matches to Other Layers with Hints: -hover, -click, -hovershow, -clickshow, -hide,
    • -hoverhide, -text

    Description:

    • The -button hint indicates that a layer or
    • layer group represents something that will interact with the mouse, usually by
    • changing in appearance when hovered over and causing some action on click, such
    • as taking the site visitor to a new page.

    • Buttons can change in appearance in many ways
    • based on mouse movement and also cause areas of the page to change in
    • appearance.

    • Buttons can consist entirely of css text when
    • the -button hint is added to a type layer that has anti-aliasing set to
    • "none" or also uses the -text hint. In this case the hover and
    • click settings are edited in the Design Manager.

    • In other cases buttons will consist of an
    • image layer or anti-aliased type layer with optional additional hinted layers
    • to represent alternate appearance for hover, click, etc.

    • Button links can be set with -link layers or
    • using controls in the Content Manager or automatically if a button has the same
    • name as a page layer comp. For example, a layer named "home-button"
    • will match to a layer comp named "home-page".
  7. -centercut
    Used on Layer Type: image

    Matches to Other Layers with Hints: -column with a vertically repeatable image section

    Description:

    • The centercut hint is one of the techniques
    • you can use to create arbitrary areas that have background tiles that can grow
    • vertically while still properly displaying the tile.

    • Normally a -column layer's contents will not
    • appear on the final web page. However, if used with a -centercut layer it
    • will be.

    • The -centercut layer contents will not appear
    • on the final page; instead the contents tells SiteGrinder what part of the
    • column you want "cut out" and replaced by a vertically growing tile.

    • When using an image layer for a -column, place
    • a second layer atop it with the -centercut hint. The -centercut layer should be
    • rectangular, and reach at least the left and right edges of the column, and
    • have the same base name as the column. ("news-column" will
    • match to "news-centercut")

    • The column layer contents will be sampled in
    • the vertical center of the area of the centercut layer to produce a 1 pixel
    • tall tile that will be used to fill the expanding area.

    • IMPORTANT: Layer styles applied to the -column layer won't be used by the
    • -centercut layer. You'll need to render the layer styles into the column
    • layer contents. (See the Photoshop
    • Techniques Reference for instructions on rendering layer styles.)
  8. -Click
    Requires: SiteGrinder 3

    Used on Layer Type: image

    Matches to Other Layers with Hints: -button

    Description:

    • The -click hint used on a layer or layer group
    • indicates the way an image button should look when the site visitor clicks
    • it. A click layer will match to a -button layer with the same name, as in
    • "Home-button" and "Home-click".

    • -Click is used less frequently than -hover
    • because often clicking takes the visitor to a new page immediately.
  9. -Clickhide
    Used on Layer Type: any

    Matches to Other Layers with Hints: -button

    Description:

    • Causes a layer or layer group to become
    • invisible when a button with a matching name is clicked.
    • "Home-button" matches to "Home-clickhide" for example.

    • -Clickhide is used less frequently than
    • -hoverhide because often clicking takes the site visitor to a new page
    • immediately.
  10. -Clickshow
    Requires: SiteGrinder 3

    Used on Layer Type: any

    Matches to Other Layers with Hints: -button

    Description:

    • Causes a layer or layer group to become
    • visible when a button with a matching name is clicked.
    • "Home-button" matches to "Home-clickhide" for example.

    • Clickshow is used less frequently than
    • -hovershow because often clicking takes the site visitor to a new page
    • immediately.
  11. -Column
    Used on Layer Type: image

    • Matches to Other Layers with Hints: -centercut, -backgroundcolor, -background, button
    • reveal/hide hints like -hovershow and -hoverhide, -scroll

    Description:

    • Columns group many page elements so they
    • rearrange themselves intelligently when other page elements change size or
    • position. Columns can also ensure backgrounds and borders behind these
    • changing areas stay beautiful and organized.

    • The -column hint is a boundary hint, meaning
    • it "contains" other layers if their contents are above the contents
    • of the column layer in the layer palette and their contents don't extend beyond
    • the edges of the column layer's contents.

    • Columns can contain other columns, but columns
    • cannot intersect other columns.

    • Columns are extremely versatile, so you should
    • read or view the introductory supporting materials before trying to use them.
  12. -Content
    Requires: SiteGrinder 3

    Used on Layer Type: image

    Matches to Other Layers with Hints:

    Description:

    • Indicates that a layer should not be treated
    • as decoration,

    • but instead as important content on the page
    • in the underlying HTML code. This also allows replacing the contents of
    • this layer in the Content Manager.
  13. edit-button
    Requires: SiteGrinder 3 and the Control Add-On

    Used on Layer Type:any

    Matches to Other Layers with Hints:

    Description:

    • When a layer or layer group is named
    • "edit-button", it will create a special button on the built page that
    • will allow anyone viewing that page in a browser to log in and begin editing
    • the page in the browser using SiteGrinder 3's content management system.

    • This only functions for sites deployed using
    • the "remote CMS" option, which can only be chosen if the SiteGrinder
    • Control add-on is activated.
  14. -embed
    Used on Layer Type: text

    Matches to Other Layers with Hints:

    Description:

    • -Embed allows you to add arbitrary web code to
    • anywhere on a page. This kind of code is usually copied and pasted from
    • services like YouTube, PayPal, or Twitter to embed videos, buy now buttons,
    • twitter feeds, etc.

    • To use this hint you create a type layer by
    • clicking and dragging with the type tool. The rectangle you drag out will
    • be the rectangle the embedded code draws its contents in, such as a YouTube
    • video.

    • After you create the rectangle you paste the
    • -embed code you want to use into the contents of the type layer. Finally
    • you add the -embed hint to the layer name, as in "Surprised Kitty
    • -embed".

    • In SiteGrinder 2 this hint was called
    • "-literal".
  15. -Fav
    Used on Layer Type: image

    Matches to Other Layers with Hints:

    Description:

    • When used on an image layer this hint will add
    • a "favicon" to your site, which is the tiny 16x16 pixel icon that
    • shows in the browser's address bar when visitors are viewing any of your
    • pages. For best results you should use a 16x16 layer so you will know
    • exactly what you are going to get. If you use a larger layer SiteGrinder
    • will scale it down to 16x16.
  16. -footer
    Used on Layer Type: layer groups only

    Matches to Other Layers with Hints: -pagesize, footer-background, footer-backgroundcolor

    Description:

    • Layers placed inside a layer group with the
    • -footer hint will be aligned with the bottom of the browser window if the
    • browser window is taller than either the original Photoshop document height or
    • the -pagesize layer if there is one. If the window is the same size or
    • smaller than the original document height or pagesize layer, then the footer
    • layers will be drawn at the bottom of the content just as they appeared in the
    • original.

    • Footers can have background colors and tiles
    • as specified by the associated footer-background and footer-backgroundcolor
    • hints contained in the footer group.

    • Different pages can have different footers in
    • the the same document by organizing the footer group visibility in the
    • different page layer comps.
  17. footer-background
    • Used on Layer Type: image with either pattern overlay or gradient overlay
    • layer style

    Matches to Other Layers with Hints:

    Description:

    • The footer-background hint can be used to
    • place a repeating tile across the bottom of the browser window.

    • The tile is specified by either the Pattern
    • Overlay or Gradient Overlay layer style applied to the layer named
    • "footer-background". The contents of the layer can be whatever
    • you like, but for an effective preview the contents should stretch horizontally
    • across the full width of the Photoshop document behind all the other footer
    • layers and be the height of the tile.
  18. footer-backgroundcolor
    Used on Layer Type:

    Matches to Other Layers with Hints:

    Description:

    • The footer-backgroundcolor hint can be used to
    • place a solid color across the bottom of the browser window.

    • The color is specified by the Color Overlay
    • layer style applied to the layer named
    • "footer-backgroundcolor". The contents of the layer can be
    • whatever you like, but for an effective preview the contents should stretch
    • horizontally across the full width of the Photoshop document behind all the
    • other footer layers and be the height of the footer. The height of the
    • colored background will match the height of the footer groups contents.
  19. -form
    Used on Layer Type: text

    Matches to Other Layers with Hints:

    Description:

    • The -form hint tells SiteGrinder to create an
    • interactive web form based on the contents of the type layer that uses this
    • hint. Most common form controls are supported. They are created
    • using a simple system that is detailed in the form documentation.

    As a quick example, the underlines in the line

    "Name:_______________"

    • typed into a form layer would become a text
    • entry area of the form.

    • All the form fields and the submit button are
    • created together in the same type layer using this system. Only one
    • control can appear on each line of a form.

    • Form data settings, such as the email address
    • to send the contents of the form to, are set in the Forms panel of the
    • SiteGrinder plug-in window.

    • Form layout can be further customized using
    • the Form controls in the SiteGrinder Design Manager.

    • Forms can be used in concert with the
    • SiteGrinder ecommerce features provided by the Commerce add-on.
  20. -g
    Used on Layer Type: -text

    Matches to Other Layers with Hints:

    Description:

    • The -g hint is only used when you want to
    • force a type layer that has anti-alias set to "off" to be rendered as
    • an image on the final built web page. It is rarely used.
  21. -h1 -h2 -h3 -h4 -h5 -h6
    Used on Layer Type: text

    Matches to Other Layers with Hints:

    Description:

    • The h1-h6 hints cause the first paragraph of a
    • type layer to be styled using the corresponding header tag level in the
    • underlying HTML. The rest of the paragraphs in the layer will use the -p
    • tag.

    • Just add the -h level you want to the type
    • layers name, as in "My Body Copy -h1" or "Item of interest
    • -h3".

What would you like to do?

Home > Flashcards > Print Preview