Tutorials

Here you can find some examples of using WebYep which can help you get a deeper insight of how to apply WebYep to your pages. These tutorials assume that you are using Adobe® Dreamweaver® to build your web pages and thus can make use of the WebYep Dreamweaver Extension.

Important hints regarding Dreamweaver usage:

The Dreamweaver Object Palette:

Dreamweaver's object palette (menu "Window", item "Insert") is where you can find icons for inserting various elements like tables, images etc.

After installing the WebYep Dreamweaver Extension, this palette is extended by the category "WebYep" which contains icons for inserting the WebYep Elements.

Make all invisible elements visible

As the WebYep Elements are tiny pieces of PHP code, they can be made visible in Dreamweaver by enabling (making visible) the "Invisible Elements":

  • Go to menu "Edit", item "Preferences"
  • Switch to category "Invisible Elements"
  • Enable all listed elements.

The WebYep-Elements in your page should then look like this:

You can quickly hide/show these "Invisible Elements" by choosing menu "View", submenu "Visual Aids", item "Hide All" (or. "Show All").


To Top of Page

Positioning the cursor

Positioning the text cursor by clicking somewhere inside the Dreamweaver document is good enough most of the time. But if you want to place the text cursor exactly before or after a specific part of your document (before or after a tag or HTML element), using the "tag selector" (at the lower left corner of a Dreamweaver document) would be preferable:

Clicking somewhere inside the bold sentence will show a hierarchy of tags in the tag selector as shown in the picture above: The cursor is inside a <b> tag, which is inside a <p> tag, which is inside a <body> tag.

Clicking the "<b>" tag in the tag selector would then select the whole bold sentence. Pressing the "cursor left" (or "cursor right") key afterwards would place the text cursor exactly before (or after) the <b> tag (and thus the bold sentence).

If your try to achieve this by simply clicking at the end of the sentence, chances are good that you end up inside the <b> tag instead of after it.

Assigning CSS styles

You can also use the tag selector to assign CSS styles to an HTML tag.

To do so, position the text cursor somewhere inside the tag you want to assign a style to. The tag selector will show the tag hierarchy that leads to the current position.

Now click the tag in the tag selector to which you want to assign the style to with the right mouse button and in the context menu popping up look in the submenu "Set Class" for your desired style and choose it.

That way you can easily assign CSS styles to tags that surround WebYep Elements - e.g. a Paragraph (<p> tag) with a WebYep Short Text Element inside it, thereby defining the look of the WebYep Element itself.


To Top of Page
© 2009, Objective Development