Presenter: Richard Merrill, Autograff Inc.

Size: px

Start display at page:

Download "Presenter: Richard Merrill, Autograff Inc."

Godwin Gregory
6 years ago
Views:

1 Presenter: Richard Merrill, Autograff Inc.

2 File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus

3 Common folder and page names: /bv/ pers.html /2/ vcj.php?inf=1 /diffiles/ rntf.asp

4 Human-readable system names: /contracts/manufacture.html /services/business.php /insurance/liability.asp If it s easier for humans, it s easier for spiders.

5 Meta Tags Metadata Set controls data entry Template region for text block Text block with pass-through code

6 Creating the Metadata Set Hides meta tag fields from editors

7 Using the Metadata Set Essential meta tags not available to editor. Any metadata can be hidden or shown.

8 < /> Tags created by Cascade: <link href="/cms/renderfile/client/css/styles.css" media="all" rel="stylesheet" type="text/css"/> href media rel type Elements in alphabetical order

9 System Region in Head Section <html xml:lang="en"> <head> <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type"/> <system-region name="headtags"/> <link href= /css/styles.css" rel="stylesheet" title="global styles" type="text/css"/> <script language="javascript" src= /files/scripts/globalmenu.js" type="text/javascript"/> </head>

10 Text block

11 Pure CSS Dropdown Menu Why a CSS dropdown menu? Unordered Lists use less HTML Formatting with XSLT Nested lists modular More accessible Search spiders read easily

12 Menu HTML Unstructured: <a href="about.html">about</a> <a href="services.html">services</a> Structured: <ul class="global"> <li><a href="about.html">about</a></li> <li><a href="services.html">services</a></li> </ul > Easily read by screen readers without access keys List gives semantic structure

13 XSLT formats unordered lists About Services Plumbing Electrical <ul class= folder"> Design <li><a href="about.html">about</a></li> Wiring <li><a href="services.html">services</a> <ul class= page"> <li><a href="plumbing.html">plumbing</a></li> <li class= subpage ><a href="elec.html">electric</a> <ul class= subfolder > <li><a href= design.html >Design</a></li> <li><a href= wiring.html >Wiring</a></li> </ul > </li> </ul > </li> </ul >

14 Global Menu CSS <html xml:lang="en"> <head> <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type"/> <system-region name="headtags"/> <link href= /site/css/styles.css " rel="stylesheet" title="global styles" type="text/css "/> <script language="javascript" src="/files/scripts/globalmenu.js" type="text/javascript"/> </head>

15 CSS Menu basic elements ul.folder { } ul.folder li { } ul.folder li:hover { } [also on mouse-out] ul.folder li a { } ul.page { } ul.page li { } ul.page li:hover { } [also on mouse-out] ul.page li.subpage:hover { } ul.page li.subpage a { } ul.subfolder { } ul.subfolder li { } [also on mouse-out] ul.subfolder li a { }

16 IE6-Specific Javascript <html xml:lang="en"> <head> <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type"/> <system-region name="headtags"/> <link href= /site/css/styles.css" rel="stylesheet" title="global styles" type="text/css"/> <script language="javascript" src="/files/scripts/globalmenu.js" type="text/javascript"/> </head>

17 Nested menu structure Global Menu Local Menu Submenu Global Menu <li> Local Menu <li> Submenu <li>

18 Menu Example Go to Cascade example

19 Flyout menu usability Natural path

20 Flyout menu usability Natural path intersects wrong dropdown item

21 Flyout menu usability Required path Natural path

22 Dropdown to include in Global Menu XSLT uses metadata set to include/not include folders/pages/links in global menu

23 Using the Metadata Set Choose to include in global menu (property set in folders only)

24 Page and folder hierarchy Basic page and folder hierarchy: Root folder Main Category (global menu) Subcategory page/ folder (local menu/dropdown) Sub-subcategory (flyout menu)

25 XSLT for folder order XSLT uses file/folder/link in first position in folder as index XSLT uses folder order to order appearance of menu items

26 Menu and folder relationships 1 Change page name

27 Menu and folder relationships 2 Move page

28 Menu and folder relationships 3 Change name, move page Make Reference to page, place in folder

29 Menu and folder relationships 4 Wrong order

30 Menu and folder relationships 5 Correct order

31 Menu and folder relationships 5 Page set not to index does not display in dropdown.

32 Local menu on moved pages incorrect Lists main category folders instead of pages inside a category folder

33 New Local Menu Block for one Root Page

34 Local menu now correct Apply page-specific block at page level: it now lists pages inside its folder

35 Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus

36 Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus

37 Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus

38 Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus

39 Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus SEO goals met!

40 Brooksville, Maine

A designers guide to creating & editing templates in EzPz

A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page