Working with designs and layouts

A PDF from dynamicweb.com explaining how to use designs and layouts in Dynamicweb CMS

Transcript

1. Developers Guide Designs and Layouts IMPLEMENTING DESIGNS IN DYNAMICWEB Version: 1.1 2010.07.06 English
3. Designs and Layouts, Implementing designs in Dynamicweb © 2010 Dynamicweb Software A/S (Ltd). iii LEGAL INFORMATION © Copyright 2010 Dynamicweb Software A/S (Ltd). All rights reserved. Alteration or reproduction of this document or parts hereof is strictly prohibited, regardless of form or means, unless explicit permission has been acquired from Dynamicweb Software. Dynamicweb is a registered trademark of Dynamicweb Software. Company and product names mentioned in this document may be registered trademarks or trademarks of third parties.
4. Designs and Layouts, Implementing designs in Dynamicweb © 2010 Dynamicweb Software A/S (Ltd). iv CONTENTS Introduction _____________________________________ vi What this document is about ............................................................... vi Who this document is for ..................................................................... vi Related documents .............................................................................. vi Related documents .............................................................................. vi 1 Designs ______________________________________ 1 1.1 Concept .................................................................................... 1 1.2 Location .................................................................................... 1 2 Layouts ______________________________________ 3 2.1 What is a layout? ...................................................................... 3 2.2 Installing a layout ...................................................................... 3 2.3 Applying a layout ...................................................................... 4 3 Making the layout template dynamic ______________ 6 3.1 Content placeholders ............................................................... 6 3.2 Navigation ................................................................................. 9  3.2.1 Requirements ........................................................................... 12 3.3 Search forms .......................................................................... 12 3.4 Send to friend ......................................................................... 14 3.5 Printing.................................................................................... 14  3.5.1 Using media print ..................................................................... 14  3.5.2 Using Add This and Add To Any............................................... 15  3.5.3 Using alternative layout template .............................................. 15 4 Paragraphs – content __________________________ 17 4.1 Placeholders ........................................................................... 17 4.2 Default placeholder ................................................................ 18 4.3 Changing a placeholder ......................................................... 18 4.4 Paragraph templates .............................................................. 18  4.4.1 Applying ................................................................................... 18  4.4.2 Location ................................................................................... 19  4.4.3 Default placeholder paragraph template ................................... 20 4.5 Placeholder settings ............................................................... 20 5 Static content – images, CSS and JS _____________ 22 6 Using master pages ___________________________ 23 7 Template tags ________________________________ 24 7.1 Master and page tags ............................................................. 24 7.2 Extending layout templates .................................................... 24 8 Parsing______________________________________ 25
5. Error! Unknown document property name. - Designs and Layouts Contents © 2010 Dynamicweb Software A/S (Ltd). v 8.1 How parsing works – what it does, how and where ............... 25  8.1.1 Content placeholders ............................................................... 27  8.1.2 Navigation ................................................................................ 28  8.1.3 Search forms ............................................................................ 29 8.2 Overruling parsing rules ......................................................... 30  8.2.1 Keeping your markup ............................................................... 30 9 Miscellaneous ________________________________ 32 9.1 Requirements ......................................................................... 32 9.2 Changing layout for pages ..................................................... 32
6. Designs and Layouts, Implementing designs in Dynamicweb © 2010 Dynamicweb Software A/S (Ltd). vi INTRODUCTION What this document is about This document explains how to implement designs in Dynamicweb 7.1 and forward. It introduces the concept of Designs and Layouts and explains how these templates is being setup and used. Who this document is for This document is for frontend developers and designers that needs to implement the overall design of a Dynamicweb solution. Related documents  Technical Release Notes, Dynamicweb 7.1: Describes technical issues included in Dynamicweb 7.1. News  Using master pages (6th July 2010): Document updated with information on using master pages. See 6 Using master pages.  19.1.0.3: InlineStylesheet template tag no longer includes background-image from Dynamicweb stylesheet.  19.1.0.3: Stylesheets template tag no longer includes the external CSS chosen on the Dynamicweb stylesheet.  19.1.0.4: Possibility to overrule parsing of Title-tag, Content placeholders and navigation. See 8.2 Overruling parsing rules.
7. Designs and Layouts, Implementing designs in Dynamicweb Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 1 1 DESIGNS 1.1 Concept Designs and Layouts are a concept being introduced with Dynamicweb 7.1 to really improve the time and effort of implementing a Design in Dynamicweb. A design is a collection of layouts. A layout is an html file containing the markup that makes up an entire webpage layout. Example 1 – desing and layout structure  Design 1 (Folder on disk) o Frontpage (File on disk – i.e. Frontpage.html) o Sub Front Page (SubFrontPage.html) o Content Page (ContentPage.html) o Produt Page (ProductPage.html) This new approach handles several issues with the current way of implementing designs.  Today the design, templates and setup is dependent on some registration in the administration. This information is placed in the database and makes it cumbersome to move a design from one solution to another. This new approach makes it possible to copy a design from one solution to another in minutes.  It takes a great deal of knowledge of Dynamicweb template hierarchy to setup a design.  You have to split the html of the design in several different templates making it not that transparent.  Paragraph setup templates are needed to be used to have multiple containers for content. This requires setup on every page and an editor needs to learn how to use these. All of these issues are eliminated or minimized with the new approach. Layout templates are  Extremely fast to implement  Easy to understand  Have total design freedom  Can be copied from one solution to another  Are contextual – so templates for one website is not used on another Layout templates are a compilation of the previous Master, Page and Paragraph setup templates all of which is deprecated when using layouts. Dynamicweb 7.1 (19.1.0.0) is required for this way of implementing designs. Released May 2010. 1.2 Location Layout templates are placed in a new folder in Templates folder.
8. Designs and Layouts, Implementing designs in Dynamicweb Designs Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 2 The root of the new templates is /Files/Templates/Designs/. Each design is a collection of Layouts. Every design has its own subfolder of Designs, and the name of that folder is the name of the design. Throughout this document we will use a design called “Condition” giving a subfolder with that name: /Files/Templates/Designs/Condition/. In Figure 1 below there are 2 designs, Condition and Flowers Figure 1. Design location and folder structure. Layout files are placed in a Design folder.
9. Designs and Layouts, Implementing designs in Dynamicweb Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 3 2 LAYOUTS 2.1 What is a layout? A layout is simply an html file that makes a webpage layout. It consist of one html file with markup and whatever css, js and image files needed to do a layout. For this guide a free downloaded example from http://www.freecsstemplates.org/ will be used (http://www.freecsstemplates.org/preview/condition/). 2.2 Installing a layout A layout is installed by copying the files that is needed to the design folder (/Files/Templates/Designs/Condition/) where “Condition” is the name of this design. From http://www.freecsstemplates.org/preview/condition/ markup, CSS and images are downloaded. See Figure 2. Figure 2. Downloaded layout files. The downloaded files are copied to (/Files/Templates/Designs/Condition/). See Figure 3. Figure 3. The layout files copied to the appropriate folder. The layout can now be previewed either by opening Index.html in a browser by double clicking or by accessing the URL where its location is, i.e.: http://head.local.dynamicweb.dk/Files/Templates/Designs/Condition/Index.html - see Figure 4.
10. Designs and Layouts, Implementing designs in Dynamicweb Layouts Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 4 Figure 4. Preview of the layout directly in the browser. The layout is now installed on the solution. 2.3 Applying a layout The layout is now installed simply by copying it to the template folder. It can now be applied to a Language/Area in Dynamicweb so it will be used on pages created in Dynamicweb. Go to the websites properties (Langugage/Area or frontend module), and the ribbon tab “Layout”. See Figure 5 Figure 5. Website properties, layout tab.
11. Designs and Layouts, Implementing designs in Dynamicweb Layouts Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 5 In the layout dropdown chose the layout we just added (Condition). Save and preview the page. See Figure 6. Figure 6. Preview of the website with the layout attached. It is now a Dynamicweb page showing the layout, but it has no dynamic content – this is just showing the layout as it was downloaded. Taking a look at the source code will reveal some changes in the references for included CSS, JS and image files though.
12. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 6 3 MAKING THE LAYOUT TEMPLATE DYNAMIC 3.1 Content placeholders To change the layout template to show content from Dynamicweb instead of the static content i contains in the markup, content placeholders have to be defined. A content placeholder is a location in the markup where the output of the paragraphs of that page will be displayed. A content placeholder can be any html element in the layout template and any number of placeholders can be defined. Content placeholders are defined by applying a CSS class to the html elements that we want to be dynamic. Open the layout template in an appropriate html editor and locate the html element that should be a placeholder. Given the layout in our example, the layout file (index.html), is opened and the markup that contains the main content is located – the piece of text starting with “Welcome to Condition”. See Figure 7. To change the static html to a Dynamic content placeholder, set the class attribute to the value of dwcontent and set the title on the html element. To be a valid content placeholder, the element needs an ID, class=”dwcontent” and a title. Figure 7. Editing the layout – setting content placeholders. If the content placeholder html element already have a CSS class specified, simply add dwcontent to the list of classes, i.e.: <div class=”myclass dwcontent”></div>
13. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 7 After defining the content placeholder, it can now be seen in the administration. See Figure 8. Figure 8. A content placeholder shows up in the administration. Create a paragraph with some content and preview the page. The content from the paragraph is now showed in the newly defined content placeholder. Figure 9. Preview with a content placeholder and some content. The layout now has one dynamic content area. The layout also has some text in the left column that needs to be Dynamic. See Figure 9. Go back to the markup of the layout template and locate the markup that contains the text in the left column. Change it to a placeholder by adding “dwcontent” in the class, give it an ID and a title. See Figure 10.
14. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 8 Figure 10. Second place holder. The layout now has 2 dynamic content place holders. The newly created placeholder appears in the administration. See Figure 11. Figure 11. Second dynamic placeholder. Add some content by right clicking the placeholder header, choose New paragraph. Preview the page to see the result. See Figure 12.
15. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 9 Figure 12. Preview with 2 dynamic content placeholders. An unlimited number of content placeholders can be created. Make sure the ID is unique (also a w3c requirement). 3.2 Navigation Next step is to make the navigation dynamic so it represents the navigation structure of the website. The navigation for layout templates relies on XML/XSLT based navigation. Locate the markup in the layout that is the navigation. Give the UL element and ID and a class named “dwnavigation”. See Figure 13. Figure 13. Defining a dynamic navigation. By doing only this, the navigation uses a set of default values to render navigation and uses a default layout template (LIclean.xslt). Preview the page to see the result. See Figure 14.
16. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 10 Figure 14. Dynamic navigation. The navigation is now dynamic using the default values. This layout has room for sub navigation items below the left content container. Locate the markup in the layout template to makes this Dynamic. By adding dwcontent as class and an ID, it will use the Default values and do navigation with the same items in the top navigation. Figure 15. Sub navigation with top pages.
17. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 11 The default values can be overruled by adding a Dynamicweb specific attribute to the UL tag called settings. See Figure 16. Figure 16. Settings for a navigation item. Preview after applying the new settings. See Figure 17 Figure 17. Subpage navigation with settings. In the table below it is possible to see all available settings and their default values. Possible settings Property Description Default Possible values startlevel The absolute level from which the XML should include navigation items from 1 1-99 endlevel The absolute level to which the XML should include navigation items from 99 1-99 template Name of XSLT template used for parsing the navigation XML LIClean.xslt Any valid existing navigation XSLT template. Must be placed in /Templates/Navigation, /Templates/Designs/Navigation or /Templates/Design/DesignName/Navigation expandmode How the navigation XML expands and which nodes it includes. Path None Path All
18. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 12 Pathonly parentid Limits the navigation to items placed under the page with the ID specified 0 Any valid page id In Figure 18 find an example using all the settings. It will display all navigation items in level 2 below the page with ID 2131 using the template LIClean.xslt. Figure 18. Example of static navigation using all settings. 3.2.1 Requirements It has to be a UL element that defines navigation. If the navigation markup in a layout template is not wrapped in UL it has to be wrapped in that before it can be made a Dynamic navigation. See Figure 19. Figure 19. Defining navigation for non-UL based markup. It is possible to use the old navigation methods by adding a stylesheet to the Area or page that this layout applies to. Then navigations can be attached to the page template that the stylesheet is using – making the navigation template tags available in the layout template 3.3 Search forms Search forms can also be made dynamic. Start by creating a page in Dynamicweb and attach the search module to a paragraph on that page. See Figure 20
19. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 13 Figure 20. Page with search. Locate or add the form in the layout template that is wanted to act as search form and give it a class named “dwsearch”. See Figure 21. Figure 21. Defining a sarch form. Preview the website and try doing a search from the search form in the layout template. See Figure 22 Figure 22. A search result from the layouts search form.
20. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 14 3.4 Send to friend Adding a “send to friend” functionality can be accomplished by using the Add This (www.addthis.com) or Add To Any (www.addtoany.com) services which are available as template tags in Dynamicweb. See Figure 23. Figure 23. Adding Add This feature to layout template. Preview the website with the new settings. See Figure 24. Figure 24. Preview of add to this Send to friend feature. 3.5 Printing 3.5.1 Using media print It is recommended to use the media attribute on stylesheet references to do printer friendly versions of the content. Create a stylesheet for printing of the content and include it in the layouts head section and give it a print media attribute. See Figure 25.
21. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 15 Figure 25. Using media CSS attribute to do printer friendly pages. 3.5.2 Using Add This and Add To Any “Add This” and “Add To Any” provides printer friendly features. See section “3.4 Send to friend” how to set this up. See Figure 26. Using add this for printer friendly pages.Figure 26. Figure 26. Using add this for printer friendly pages. 3.5.3 Using alternative layout template It is possible to apply an alternative layout template for printing purposes with different layout. Create a layout template specific for printing and add a link to the page with at parameter that specifies the alternate template. See Figure 27. LayoutTemplate=Designs/Condition/Print.html Figure 27. Using an alternate layout template for printing. Clicking the print link, will result in the page being rendered using the alternate template. See Figure 28.
22. Designs and Layouts, Implementing designs in Dynamicweb Making the layout template dynamic Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 16 Figure 28. Using an alternate layout template.
23. Designs and Layouts, Implementing designs in Dynamicweb Paragraphs – content Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 17 4 PARAGRAPHS – CONTENT 4.1 Placeholders Multiple placeholders can be created for each layout template. The ID of the content placeholder acts as the reference to the paragraphs that are inserted to that placeholder. In the database (Dynamic.mdb), in the table Paragraph, column ParagraphContainer, the ID of the content placeholder the paragraph belongs to is registered. Content or paragraphs can be moved from one content placeholder to another simply by dragging it to another location in the list of paragraphs on the page. See Figure 29. Figure 29. Moving content from one placeholder to another. The placeholder for a paragraph can also be changed by editing the paragraph, on the ribbon tab “Options” in the layout dialog. See Figure 30. Figure 30. Changing content placeholder from paragraph.
24. Designs and Layouts, Implementing designs in Dynamicweb Paragraphs – content Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 18 4.2 Default placeholder When a layout is applied, the existing content (paragraphs) on the pages is not attached to any of the content placeholders. They will then be linked to the default content placeholder. The default placeholder is the first one in the markup. This can be changed using the settings attribute on the HTML element defining the content placeholder add settings=”default:true”. See Figure 31. Figure 31. Changing the default content container using settings attribute. 4.3 Changing a placeholder If there is a need to change an existing placeholder in the layout template, be aware that it can move content around. If the ID of a content placeholder element is changed it will lose it reference to the paragraphs linked to that placeholder. They will then be linked to the default content container instead. The name of the content placeholder (title attribute) can be changed – it is simply a name used in the administration and the change will not break anything. 4.4 Paragraph templates When changing a language/area to use layout templates instead of legacy Dynamicweb stylesheets, another set of paragraph templates are used. If the paragraphs where created in a stylesheet context and have a paragraph template attached, they will be ignored after applying the layout. 4.4.1 Applying When editing a paragraph, the template selector shows a list of paragraph templates. By default the paragraph will not get a template attached – that will be done on runtime using the content placeholders default paragraph template. By choosing a paragraph template on the paragraph the use of that specific template is forced. See Figure 32.
25. Designs and Layouts, Implementing designs in Dynamicweb Paragraphs – content Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 19 Figure 32. Choosing a paragraph template. 4.4.2 Location Paragraph templates for layouts are by default located in /Files/Templates/Designs/Paragraph. The paragraph template selector creates a list of templates inside that folder. The templates can be made contextual so different designs and layouts can have different paragraph templates. By creating a paragraph template folder inside a design folder, paragraphs will only be able to use paragraph templates from that design. I.e. create a folder called paragraph in /Files/Templates/Designs/Condition/Paragraph. See Figure 33. Figure 33. Creating a paragraph template folder for a specific design. By creating a paragraph folder in the design folder, all layouts share the same set of paragraph templates. This can be limited even more so that one layout in a design can have a specific set of paragraph templates. This is done by creating a folder in the design folder with the name of the layout file and place a paragraph folder in that, i.e. /Files/Templates/Designs/Condition/Index/Paragraph. See Figure 34.
26. Designs and Layouts, Implementing designs in Dynamicweb Paragraphs – content Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 20 Figure 34. Creating a paragraph template folder for a specific layout. By doing this, pages using the layout /Condition/index.html can only use templates from /Condition/Index/Paragraph folder. 4.4.3 Default placeholder paragraph template By default paragraphs on pages using layouts do not have a paragraph template attached to them. They will use the default template that applies for that content placeholder or for that layout. If no paragraph template is specified on the paragraph, it will look for a template in this order: 1. If the content placeholder has a paragraph template specified, that will be used. See Figure 35. 2. Otherwise if the nearest context paragraph template folder contains a paragraph template called “Default.html”, that will be used. See Figure 36. 3. Otherwise the first template in the nearest context paragraph template folder will be used 4. Fallback to the first template in /Files/Templates/Paragraph. Figure 35. Defining the default paragraph template for a content container. Figure 36. Defining the default paragraph template in nearest context folder. 4.5 Placeholder settings In the table below it is possible to see all available settings and their default values. Possible settings
27. Designs and Layouts, Implementing designs in Dynamicweb Paragraphs – content Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 21 Property Description Default Possible values default Specifies if the content placeholder is default or not. If more than one content placeholder is set to true, the first one in the markup will be used. False True False template Reference to default paragraph template to use for this specific content placeholder. 99 Location to a valid paragraph template file, i.e.: Designs/Paragraph/Left.html Example Figure 37. Settings for a content placeholder.
28. Designs and Layouts, Implementing designs in Dynamicweb Static content – images, CSS and JS Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 22 5 STATIC CONTENT – IMAGES, CSS AND JS Referencing static content like images, CSS and JS is done using the relative path of the location of the layout template. Given the location of files in the example below. See Figure 38. Figure 38. Static content and external scripts location. Using images, CSS and JS files is done simply by referencing them relatively to where the layout template is located. See Figure 39. Figure 39. Adding static references. Dynamicweb handles the references when the layout template is used.
29. Designs and Layouts, Implementing designs in Dynamicweb Using master pages Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 23 6 USING MASTER PAGES It is possible to reuse markup across different layouts by using Master pages. The concept is known from ASP.NET and works the same. A master page can be used across several layouts that share the same markup for i.e. headers, navigations and footer. A master is created by defining a placeholder in the markup for the html of the different layouts. This is done by using the template tag <!--@ContentPlaceholder-->. In the layout template a master page is defined in the first line of the html: <!--@MasterPageFile(Master.html)-->. Before parsing starts, the master is merged with the layout template – the content of the layout template is inserted where the <!--@ContentPlaceholder--> tag is located in the master page.
30. Designs and Layouts, Implementing designs in Dynamicweb Template tags Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 24 7 TEMPLATE TAGS 7.1 Master and page tags Layout templates can use the same template tags available for Master and Page templates: http://templates.dynamicweb.dk/TemplateTags/Dynamicweb-template-tags/Page- tags.aspx Also all general tags from Dynamicweb are available: http://templates.dynamicweb.dk/TemplateTags/Dynamicweb-template-tags/General- tags.aspx Layout templates are proxied through the Master and Page template objects in the pageview and have all the same capabilities. Insert <!--@DwTemplateTags--> to see all available tags in a layout template.. 7.2 Extending layout templates Layout templates can be extended using the same template extenders that can be used for page and master templates. See Figure 40 and Figure 41. Figure 40. Extending a layout template using a pagetemplateextender. Figure 41. Extending layout template using a notification subscriber.
31. Designs and Layouts, Implementing designs in Dynamicweb Parsing Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 25 8 PARSING A layout template is parsed before it is used in the frontend. This is done to make the template Dynamic, update all references to static files and to add the capabilities it needs to be a template. The parsing relies on valid markup – the parsing will fix minor errors, but if the markup is in bad shape, the parsing might not work as expected. 8.1 How parsing works – what it does, how and where A layout template is parsed whenever it is changed and the parsed version of the template is placed in the same location as the original with .parsed added to the filename. Using a layout template called Index.html results in a parsed template called index.parsed.html in the same location. See Figure 42. Figure 42. Location of parsed template. The parsing handles a number of things that Dynamicweb relies on to work as intended. These include the following things  Title tag  Meta tags  Stylesheet and javascript tags  References to static content like images, CSS and JS  Content placeholders  Navigations  Search forms See below for an example of an unparsed and parsed layout template. See Figure 43 and Figure 44
32. Designs and Layouts, Implementing designs in Dynamicweb Parsing Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 26 Figure 43. Unparsed layout template. Figure 44. Parsed layout template.
33. Designs and Layouts, Implementing designs in Dynamicweb Parsing Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 27 8.1.1 Content placeholders Content placeholders are parsed using the following rules 1. The added dwcontent class is removed from the element 2. Title attribute is removed 3. Inner html of the element is replaced with a template tag, <!--@DwContent(contentPlaceholderID)--> Figure 45. Unparsed content placeholder. Figure 46. Parsed content placeholder.
34. Designs and Layouts, Implementing designs in Dynamicweb Parsing Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 28 8.1.2 Navigation Navigations are parsed using the following rules. The entire element (always a UL) is removed and replaced with a template tag, <!--@DwNavigation(NavigationID)--> Since the entire UL tag is replaced with the template tag, remember to take CSS classes and element ID into consideration. If they layout depend on these, make sure to move them to the layout template. Figure 47. Unparsed navigation element. Figure 48. Parsed navigation element.
35. Designs and Layouts, Implementing designs in Dynamicweb Parsing Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 29 8.1.3 Search forms Search forms are parsed using the following rules 1. The added dwsearch class is removed from the form element 2. Action attribute is set to “/Default.aspx” 3. Method is set to “get” 4. A hidden field with name ID is added with the value of <!-- @DwAreaSearchPageID--> which will return the first page ID on that language/area that contains a search module. 5. The first input element of type text is changed to have the name “q”. if no input element of type text exists, one will be created. Figure 49. Unparsed search form. Figure 50. Parsed search form.
36. Designs and Layouts, Implementing designs in Dynamicweb Parsing Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 30 8.2 Overruling parsing rules The parser has some rules for where to insert the different elements such as Dynamicweb template tags. If the location chosen by the parser is giving problems, i.e. because of the sequence of CSS files, simply insert the template tag in the original layout template at the desired location – the parser will not insert them if they do already exist. Content placeholders and Navigations cannot be overruled like this – the system needs this information and reads them from the original. 8.2.1 Keeping your markup It is possible to have the parser leave your HTML and text alone. Consider a title tag like this: <title>Condition by Free CSS Templates</title> - it will be parsed to <title><!--@Title--></title>. Title This can be overruled by adding the template tag to you layout template and the parser will not manipulate the existing markup or text. <title><!--@Title--> - Condition</title> will not be parsed because the required template tag is already there – the parsed template will look like the original: <title><!--@Title--> - Condition</title>. Content containers The same can be accomplished on content containers. By default the inner html of the container is replaced with a template tag. The original template: The template parsed: By adding the content template tag (<!--@DwContent([idOfContainer])-->) to the original, the parser will leave the inner html making it possible to overrule the parser. Adding the DwContent template tag to the original layout template: Navigations By default the outer html of the navigation is replaced with a template tag. The original template:
37. Designs and Layouts, Implementing designs in Dynamicweb Parsing Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 31 The template parsed: By adding the navigation template tag (<!--@DwNavigation ([idOfNavigation])- ->) to the original, the parser will leave the outer html making it possible to overrule the parser. Adding the DwNavigation template tag to the original layout template: The parsed navigation with html from the original template
38. Designs and Layouts, Implementing designs in Dynamicweb Miscellaneous Version 1.1 © 2010 Dynamicweb Software A/S (Ltd). 32 9 MISCELLANEOUS 9.1 Requirements Layout templates have these requirements  Only html files are supported (*.htm and *.html)  The markup have to be (more or less) valid html  The parser relies on valid html and will try to fix potential issues – but really messed up markup will not work.  Xslt templates are not supported yet. 9.2 Changing layout for pages On the properties of a page on the layout ribbon tab it is possible to choose a different layout template for a specific page. Figure 51. Choosing an alternate layout template on a page.