Home

OpenCms 6 User's Guide

1. Editor WYSIWYG Editor M Element body M So Y A o a akl vroe Rire DSC ev Bauaaan lO x norma BU ee EE ee T Welcome T Lorem ipsum dolor sit amet consectetuer adipiscing elit T T Morbi scelerisque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos hymenaeos Aenean pulvinar velit vel dui Nam ligula ante dignissim ut commodo ac consectetuer a tellus 1 TlAliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros porta eu hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis ac posuere ut laoreet id ipsum Maecenas nec sapien Duis pretium porta risus Nam faucibus urna vel erat Donec feugiat orci in turpis Ut sed purus Nullam eros nulla semper Illustration 70 Showing the details markers can make it easier to place images correctly on the page As the first example we will insert an image in 1ts own paragraph In the example in Illustration 70 the Toggle details is enabled to make it easier to place the image Start out by selecting all the text inside the second paragraph and delete it now you re left with an empty paragraph move the text cursor inside the empty paragraph El Click on the Image gallery bu
2. OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 31 Look In C3 Billeder a ea co BR B 4s jpg icon_ni gif niclas git fidvin gif icon_no gif opencms _admin_properties gif icon_pd gif pdf_icon _clock gif icon_sa gif po gif _syncfolder_properties gif icon_sp gif A redvin gi on_bd gif icon_ss gif sub clos on_dm gif martin gif sub opet on_ne gif michael gif subPil a T gt File Name hvidvin gif r dvin gif Files of Type OK Cancel Illustration 59 The upload applet makes it easier to upload several files in one go In the example two images has been selected Click OK to begin the upload An animation indicates that the upload is in progress It also shows the size of the upload which is the combination of the sizes of all of the selected files see Illustration 60 Upload Zip File Please wait uploading data 686 kb Illustration 60 While the upload is in progress this screen is shown it shows the size of the data being transferred Since this upload method is similar to uploading a ZIP archive with the HTML upload function it will apply the same methodologies when it comes to determining file names and file types You can use the Rename move and Change type from the context menu to changes either value for the uploaded files Illustration 61 shows the result note that it has changed the names o
3. Illustration 97 Galleries are listed like a special kind of folder and can be handled like any other type of folder Upload image The step above created a new empty image gallery The next step is to upload some images to the gallery This 1s done like shown in 2 12 Upload p 28 Go into the gallery folder and upload some images As an example we have uploaded four images as shown in Illustration 98 Back amp gt Upload New Cf Level Up Location misc ED sites default O E A AP PR EA PERA Date expired benefits Y Y 4lag_en gif 4lag_en image 3461 5 28 06 8 12 PM 3 misc i S Y books jpg books image 9212 5 28 06 8 12 PM S Y fjerpen jpg fjerpen image 9330 5 28 06 8 12 PM SS Y hus jpg hus image 22369 5 28 06 8 12 PM Illustration 98 Images are also files and eventually need to published to be visible on the public part of the home page To publish the gallery and the newly uploaded images go one Level Up in the explorer and publish the gallery folder This will publish the folder as well as the images inside 1t New galleries do not have any dependencies and does not appear in the navigation so you can publish them without any visible effects on the public web site If you upload an image to a gallery and subsequently uses that image on a page publishes the page but forgets to publish the image the image will not show on the public web site You will notice that there are warnings duri
4. A uti Lab H Page 37 and hiding various marks in the text Illustration 64 shows how the paragraphs are marked and in the last line there 1s a line break mark as well Bold Italic and Underline Select some text in the editor and click on the wanted style You can combine one or more of the styles Again only use these if the Style selector does not hold an appropriate style Furthermore be careful with the underlining text usually underlined text on a web page is associated with the hyper link function Users will therefor assume that they can click on text which is underlined in order to jump to a new page It is better to use bold or italic to emphasize some text Keep in mind that as much as possible should be controlled by means of the styles in the template So if you feel that you need to make a heading bold then it is better to update the style in the template rather than to keep on manually applying bold to the heading Colors The Font Color and Color buttons enables you to set the color on the text and the background respectively Select the text you want to alter and then one of the functions You can now select one for the colors from the color selector When you click on a color it will be shown in the top and the HTML color code will be listed in the field Click OK to set the color on the text or the background BE cx Illustration 65 Click on a color swatch to select it Ber caref
5. Besides navigating by means of the folder overview you can navigate by clicking on the folder name in the resource list this is the text in the Name column If you click on a file in the same way it will open a new browser window showing the contents of the file this way you can test the look of a page in you web browser Back gt Upload ue New Cf Level Up Location benefits Illustration 7 The explorer tool bar is used for navigating the contents of the site and for creating new pages ot A Back returns you to the folder you visited before the current one Use this to back track your way similar through the virtual file system Level up takes you to the parent folder for the current folder You can only go up as far as the selected sites root folder The Location field shows you the path of the current folder 1 e the folder who s contents 1s shown the resource list You can also enter the location of another folder into the field and press return this will display the and thusly jump directly to that location New is used to create a new file or folder This function is disabled if you are in the Online project since no changes can be made in the Online project OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 7 Upload opens a new screen where you can select files on your local PC to be uploaded to the OpenCms system There are two tool
6. Delete Illustration 20 You can copy both files and folders In the Copy resource dialog you must enter the name of the new file In this case we just copy inside the same folder you just need to type the name of the new copy name it secure html Besides the name you also have to specify whether you want to create a copy or make a sibling Siblings will be treated later on here we need a copy so just leave 1t as 1ts default setting Copy the file as new resource OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 14 Copy resource easy html Title Easy State new O Create a sibling of the resource Copy the file as new resource Copy to secure html Search Illustration 21 You can enter the name in the field or use the search function If you want to copy the file to another folder you can either enter the path in the Copy to field or you can click on the Search button The latter opens a new window from which you can select among the existing folders If you select or enter a path to a folder in the field the new copy will be created in that folder with the original file name If you enter a path with a file name then the resource is copied to the folder with the new filename If the copy should end up in the current folder you only need to enter the new file name for it as we did in this example Project Offline v Publish project Si
7. Link to named anchor This is basically the same procedure as for links Typically it will be for internal links because you OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 52 know what named anchors you have added to those pages External pages may require some research to find the named anchors on the page 1f there are any at all As an example we assume that there is a named anchor on the benefits easy html page Select the page to link to by selecting it with the Folder selector Next you have to edit the path it inserted in the Link URL field At the very end at a number sign followed by the name of the anchor see Illustration 86 Make sure you do not add extra space or the like As this 1s a link like any other link you have to consider the target as well here we have an internal link so we use the Same window as target ecccooey Link URL benefits easy html important_part a Target Same window Y Cancel Illustration 86 To target a specific part of a linked page add a number sign and the name of the anchor to the URL You can use named anchors internally on a page as well This could be a Go to top of the page link To do that you should first place a named anchor at the top of the page using the Anchor button name lt top Next insert a text or likewise Go to top select it and click on the Link button Then enter the number sign fol
8. Properties easy html Property Value Used Template Demo template v Title Easy again Keywords Description Add to navigation Navigation Text lEasy again Insert after no change v Ok Cancel Advanced Illustration 44 Every sibling has its own set of properties which can be defined independently of other siblings Open a page in the browser and notice the change to the navigation Illustration 45 Clicking on the Easy and the Easy again respectively will take to a the pages as you expect and the window title gets OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 24 updated accordingly So this works exactly as this was a plain file copy o Gif interlei e Frontpage LAI a i ha e Benefits YN OFITI Y l Hcpag O Easy again O Secure gt Quick Easy e Contact Work in progress Demo template Copyright 2005 CodeDroids ApS Illustration 45 Navigation and titles are different for the two pages but their content is the same Both pages are empty since we have not edited them So you must either take our word for it and believe that if you were to edit one of them the changes in the content is reflected on the other page Or you must jump to the next chapter and see how you edit the pages and see for yourself Here we have two siblings sharing the same contents but you can make ma
9. Create outline diagrams to get an overview of the structure similar to the diagram in Illustration 3 OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS Editing Page 33 3 Editing In this chapter we will go through the tools you have to your disposal in OpenCms when 1t comes to editing the contents of the pages on your homepage There are different editors for the various types of resources Most of the time you will be editing pages by means of the page editor This is named a WYSIWYG editor what you see is what you get 1 e fonts and images appear in the editor as they will on the web page There 1s an alternative editor the source code editor which shows all the HTML codes Rarely if ever will you need to use the source code editor so we will not describe it further here OpenCms supports a selection of page editors Depending on the setup and your web browser OpenCms will choose one or the other page editor Thus you may experience that the editor looks a bit different from the one described here When you use the page editor to edit a web page you will notice that 1t very much resemble what you may be familiar with from your word processor But there are few import areas where a web page 1s different from a piece of paper Your pages will be viewed by web users that use different web browsers which not always agree upon how to render a given HTML page The users have screens of varying sizes and color
10. dead links and outdated information On the other hand you have the workplace where you will be working when you are updating the homepage From a technical point of view this 1s also a part of the homepage but a part that only privileged users will have access to The workplace gives you an alternate view of the homepage here you can see the pages and images that makes up the homepage You can add new pages edit existing ones and delete old ones Project Offline v Publish project Site sites default gt v View Explorer Y Reload Preferences Help Exit Of Back Upload ws New Y Location E sites default Name Type Date last modified Date released Date expir benefits a benefits Benefits folder 5 25 06 3 31 PM 3 download S Y download PDF files downloadgallery 5 28 06 8 25 PM O html snippets S Y htmi snippets HTML snippets htmigallery 5 28 06 8 42 PM Ca links amp Th Y links Useful links linkgallery 5 28 06 8 32 PM a misc de misc Misc demo pictures imagegallery 5 28 06 6 54 PM E contact html Contact xmipage 125 5 28 06 12 30 PM E amp Y index html Welcome to my homepage xmipage 3389 5 29 06 4 36 PM User cpr logged in at 1 18 06 3 11 PM from 192 168 100 100 Illustration 2 An example of how the explorer view of the workplace looks like For the most of the time you will be using the workplace view called the Explorer You use the explorer to manipulate the file
11. markers that indicate changes compared to the Online version are gone this indicates that no changes have been made to the Offline project since the last time 1t was published 2 7 Change navigation If you have followed the previous exercises precisely you will notice that the front page itself is not visible in the navigation menu since you did not add it to the navigation see Illustration 26 This is not an unusual way to do it as long as you can get to the front page by other means The demo template does not provide other ways to get to the front page Since we really want to be able to get OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 18 back to the front page by just clicking on a link we will change the navigation such that the front page appears in it Open the context menu for index html in the root folder choose Change navigation Back Upload gt New G Level Up Location 7 ED sites default Name title i type size Date last modified Date released 19 benefits Ga amp Y benefits Benefits folder 5 25 06 3 31 PM S Y contact html Contact xmlpage 125 5 25 06 3 20 PM index html Welcome to my homepage xmlpage 125 5 25 06 2 35 PM Lock Secure EXpPort Change type Change navigation Edit controlcode Histor Illustration 29 There is a specific function for changing the navigation properties You will be presented
12. see below for en explanation Finally you can control the background color See Illustration 69 OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 41 Table cell To work with a cell place the marker in the cell and then click on Table cell This opens a small window as shown in Illustration 69 Height and Width must be given in pixels Note that the browser may decide to overrule the value you give here 1f 1t somehow conflicts with some other value set on the row the table or the elements surrounding the table Background color and Border color is chosen with the color selector or you can enter the HTML color code directly if you prefer The border color is not related to the border set on the table the color relates to the border of the cell The exact effect depends on the styles set by the template Height in pixels Width in pixels Horizontal alignment Not specified Vertical alignment Not specified o Background color Oy Border color Oy Cance Illustration 69 You can set the attributes of a cell per cell or for all cell in a row Horizontal alignment can be Not specified Left Center Right The setting controls the horizontal alignment of the contents of the cell Vertical alignment can be Not specified Top Middle Bottom Baseline The setting controls the vertical alignment of the contents of the cell 3 5 Images Before you uses an im
13. 79 You can enter the path manually or use the Select button browse for the file or folder Ca Click on the Select folder button and opened the benefits folder using the small button and then click on the index html file see Illustration 80 This insert the path into the Link URL field Site http www codedroids com sites de LM El sites default a benefits easy html E index html E quick html H secure html download html snippets Ca links 3 misc El contact html E index html E index html Illustration 80 The resource tree shows the files and folder avail able Target should be Same window This setting tells the browser to show the new page in the same window as holds the link Click OK to return to the editor window the text now appears like a link in relation to the demo template we use this means 1t underlined You can test the link by using the Preview function Insert an external link Before we described the preferred method to work with external links we just mention that you can insert external links the same way as internal link Follow the procedure described above except this time you cannot use the Select folder function as the external page is not listed in the file browser So here you have to type in the full web address URL in the Link URL field As an example select the first two words in the first line click on Link bu
14. Illustration 38 New resources can be renamed or moved without being marked as deleted first Open one of the pages in the web browser and notice the changes We have not stated anything about the position of the very easy html page in the navigation so you can consider its position as being chosen randomly It is not really random not much inside computers are but unless you are really interested in comparing numbers and the like it is really okay to assume that a moved page is positioned randomly in relation to the other pages in the same folder and then just moved by changing the navigation as shown previously Finally publish the project to push the changed into the Online project Smooth sailing so far 1f you are the only one working on the site In a true working environment though with several users working on the homepage you may run into files and folders to which you only have limited access It is very likely that you can read a resource but you may not be allowed to delete Then you are not be able to move the resource since this implies deleting the original You will have to consult the system administrator if you think there is a problem with the permissions you are given 2 9 New sibling Siblings in OpenCms are similar to the shortcuts you may be familiar with from your PC It is a way to have more than one file name including the full path to point to the same contents this way there is more th
15. It is a two step process The first step is to mark the wanted position on the page that you want to link to This mark is called a named anchor the anchor is not visible on the final web page The second step is than to link to the page as usual but also to include the name of the named anchor in the URL that you enter on the link The web browser will then go to the referenced page and try to position the contents of the window such that the position where the named anchor appear is at the top of the window this may include scrolling the contents Insert a named anchor Select some text at the position you want the browser to jump to on the page j Click on Anchor button Enter the name for the anchor in the Anchor field do not use space and other special characters As an example we enter important part as the name Then click OK Anchor important_part Ok Cancel Illustration 85 A named anchor marks a spot in a page to which links can ref erence You now have a name anchor set on the page which you can refer to when you insert links to the page Typically the named anchor is not supposed to change the style of the text on which it is set But the style may be defined in such a way that the style of the selected text changes If this is undesired then it is possible to add an extra space to the text and then select only the space when setting up the named anchor this way the real text is left unchanged
16. Name Title Size E image with caption Image with caption placed below 0 kb Y X Title Image with caption placed below qQ Caption goes here Illustration 108 The preview of the HTML snippet often look a bit strange The snippets often need to be in a certain context to display correctly in serting the snippets on the page in the editor causes them to display cor rectly There are some restrictions on the HTML that can be used in the gallery In particular programmatic content such as Javascript and the like will be problematic It is outside the scope of this guide to cover that subject OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS
17. O e Sibling O amp upload new file Cancel Illustration 10 Page is the most commonly used file type Choose Page and click Continue gt gt OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 9 Y ou will now be presented with an screen as shown on Illustration 11 Here you among other things provides the resource name following the naming convention described in 2 3 Files and folders p 7 Create new page Name contact html Template Demo template M Copy body from Default body lt o B Edit properties of the new file cancel Illustration 11 Provide the name select the wanted template and possibly predefined contents Name the page contact html and choose Demo template as the template for the page The template decides how the page will look when shown on the homepage Typically there will be 2 3 templates for a site often the front page gets its own template because the layout differs significantly from that of the other pages Check the Edit properties of the new file box If this is not checked then the next step is skipped and you will not be asked to set the properties on the file It is possible to skip setting properties in this and do it at a later point in time if the need arises In some cases there may be predefined contents that will ease your work so you do not start with a blank slate E g if you have a lot of product
18. PM quick html Quick xmipage 125 5 28 06 10 32 AM secure html Secure xmipage 125 5 28 06 10 31 AM Illustration 35 A move or rename of the a published resource is done by copying the resource to the new folder and or name followed by a delete of the original The contents of the benefits folder is now as shown in Illustration 35 As easy html1 has been published previously OpenCms marks it as being deleted rather than deleting it right away This is marked by a strike through This approach enables you to see that easy htm1 has been changed since it was last published i e deleted Next time you publish the resource it will be removed from the Online project as well as being removed from the Offline project Now go a level up to see the contents of the root folder Back Upload 3 gt New Cf Level Up Location sites default lame Tte MBR Lses Date last modified Date released Date expired 19 benefits benefits Benefits folder 5 25 06 3 31 PM Ba Y contact html Contact xmipage 125 5 28 06 12 30 PM el Y easy html Easy xmlpage 125 5 28 06 10 28 AM S Y index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM Illustration 36 The moved resource is marked as being new since there is no corresponding resource in the Online project You can see that easy html directly inside the root folder and it is marked as a new resource blue that yet has to be published After moving it we wi
19. The files may contain HTML and you may give them the htm1 extension in the filename But they must be of the type Plain see Illustration 107 Plain text files are edited with the source code editor so you need to know about HTML code to edit the snippets Please select the new resource type O 1 Folder O Extended folder X Structured content O Page Text O JISP 0 External Link O e Sibling O Upload new file Continue gt gt Cancel Illustration 107 The files inside HTML galleries must be plain files Illustration 108 show a small example the HTML snippet inserts a table set up so it can be used to place the picture caption below a picture Basically this snippet does the same as described in 3 5 Images p 45 The preview provided in the lower half of the gallery window does not really look like one should expect This is because many of these snippets only looks correctly when they are use in the proper context Also in this case the real image is missing this would only be inserted once the snippet is places on the page Similar the caption also need to be edited since it is just a dummy text that is included in the snippet But compared to the description presented earlier you only need to call up the HTML gallery select the right snippet and insert 1t on the page then add the right image and caption text HTML snippets demo html snippets m 5 amp
20. ac posuere ut laoreet id ipsum Maecenas nec sapien Duis A SIT pretium porta risus Nam faucibus urna vel erat Donec feugiat orci in turpis Ut sed purus Nullam eros nulla semper eu tee iaculis nec nonummy nec odio Fusce tincidunt nibh in mauris 1 T Morbi scelerisque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per CATET inceptos hymenaeos Aenean pulvinar velit vel dui Nam ligula ante dignissim ut commodo ac consectetuer a tellus L Tai et gia am PHP and MySQL Wel Development q Tam faucibus urna vel erat Donec feugiat orci in turpis _1 Illustration 77 Text can flow around more than just images it works with other elements such as tables as well OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 47 interlet MS e Frontpage Benefits Welcome O Easy O Secure gt gt Quick Lorem ipsum dolor sit amet consectetuer e Contact adipiscing elit Aliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros porta eu hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis ac posuere ut laoreet id ipsum Maecenas nec sapien Duis pretium porta risus Nam faucibus urna vel erat Donec feugiat orci
21. and can contain spaces and so forth The title 1s listed when you later pick a gallery from within the page editor Usually a galleries should not be listed in the navigation so make sure the Add to navigation is unchecked Create new image gallery Name misc Edit properties of the new file Continue gt gt Cancel Illustration 95 Extended folders need a name like any other type of folder Properties misc Property Value Used Title Misc demo pictures E Add to navigation Navigation Text Insert after Finish Cancel Advanced Illustration 96 The usual folder properties applies to extended folders as well Generally galleries should not be part of the navigation OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS Galleries Page 59 Click Finish to create the new gallery You are then return to the explorer and the explorer shows the new gallery folder as shown in Illustration 97 Since a gallery is just a special kind of folder it eventually need to be published e Back Upload New C Level Up Location d sites default Mamen ie TES Lze Dame last modifed _ Date released Date expired 1 benefits benefits Benefits folder 5 25 06 3 31 PM 9 misc Ss Y misc Misc demo pictures imagegallery 5 28 06 6 54 PM contact html Contact xmipage 125 5 28 06 12 30 PM index html Welcome to my homepage xmlpage 2587 5 28 06 6 53 PM
22. attributes of the file you copy the only thing not copied is the actual contents which is shared with file you copy from Back Upload oS New C Level Up Location E sites default I benefits Type Date last modified Date released benefits Benefits folder 5 25 06 3 31 PM contact html Contact xmipage 125 5 28 06 12 30 PM index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM very easy html Easy xmlpage 125 5 28 06 10 28 AM Date expired Lock Edit page Edit sourcecode Rename Move Delete Illustration 39 Siblings are created by copying the properties and attributes of the file you copy from but the contents of the file is not copied it is shared Compared to the previous example of how to copy you have to choose Create a sibling of the resource in the Copy resource dialog Enter benefits easy html and click OK see Illustration 40 Copy resource very easy html Title Easy State unchanged Create a sibling of the resource Copy the file as new resource Copy to benefits easy html Search Ok Cancel Illustration 40 To make a sibling select Create a sibling of the resource In the resource list you will notice that the document icon now is marked with a small arrow and this applies to both the one you have copied from very easy html and the one you just created benefits easy html see Illustrati
23. chars Publish Save Redo Copy Table Anchor Image Extem Table Toggle directly row gallery links gallery details Heading 1 Arial vis Y B zu IE fee B I I I I I I I I Style selector Font selector Bold Under Center Bullet Indent Font line List Color Font Italic Align Align Enume Unindent Color size Left Right ration Illustration 63 Overview of the functions available in the page editor The middle row holds various functions to save cut and paste and to insert and access various elements such as tables and pictures The is also a Help button which will activate the online help The last row includes tools to control the styles and formatting of the contents 3 2 Text editing As stated in the beginning of this chapter there are a few items to keep in mind when editing a web pages But for the most part editing is just like you know from your word processor So we assume that you are familiar with basic editing functions such as cut paste search and so forth The page editor also has an Undo and Redo function otyle selection As mention earlier this is one of the areas where it is a very good idea to do it right the first time Le use the standard styles whenever possible This will save you a lot of work in the long run As a Starting point you should always use the standard styles listed in the Style selector Only use the Font and Font size selector in very special cases Once you start specifying t
24. e SE E 38 a de A A 41 A o OU O 47 a io Tne A A entend on 53 EE E APP E o E A 57 de A E A 57 4 2 Download palleries PEI 60 Sn link galeriei es rate a s E A E bee ee lee 61 A RA 63 Login Page 1 1 Login In order to access the OpenCms workplace you need a user name and a password If you do not have this information already you have to contact your system administrator Point your browser to the address of the workplace and enter your user name and password in the fields and click on the Login button Please Login lt Illustration I Only users with valid user name and password can edit the homepage This is a password protected area Please enter your user name and your password User name Password Once your are logged in you will be presented with the virtual workplace looking similar to the screen shown in Illustration 2 If it does not look like anything happens once you have clicked on the Login button it is likely you have a pop up blocker that prevents the system from opening a new window with the workplace If that is the case you need to either disable the blocker or set it to allow pop ups from the address After doing that you should be able to login OpenCms opens a new window and will try to close the old one Some browsers will prompt you 1f you want to close the old window If that 1s the case acknowledge that 1t can go ahead and close the old window If yo
25. for the files that are stored in the virtual file system Since you are not prompted during the upload when using the Unzip file function you will have to change these value by altering the type and name of the uploaded files afterward Click Continue gt gt to go to the last step If the Edit properties of the new file was checked in the previous dialog you will be prompted for the properties for uploaded file You will notice that usually the only property used for binary files is the title Different file types has different sets of properties OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 30 Properties poem pdf Property Value Used Title My poem Finish Cancel Advanced Illustration 57 You can enter a title for the uploaded file Back Upload gt New Level Up Location a sites default Date last modified Date released Date expired 19 benefits C3 benefits Benefits folder 5 25 06 3 31 PM contact html Contact xmlpage 125 5 28 06 12 30 PM index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM cf Y poem pdf My poem binary 8422 5 28 06 5 36 PM Illustration 58 After being uploaded the file is marked as a new file and is ready to be published Images and binary files can be replaced via the Replace function in the context menu Name type and properties remain unaltered when you replace such a file you upload a new fi
26. image and click the Insert image button This open the dialog box shown in Illustration 74 from here you can control various aspects of the image Billedkilde http www codedroids com ire Focus on managing contents i oa Afstand Justering Let Vandet 5 Bredde lo Lodret 0 a Illustration 74 Alternate text is required by the HTML standard it serves as a help to visually impaired users that rely on screen reader soft ware The source shows the web address URL of the image You should not need to alter this value This function is actually not aptly named as you should never use it to insert images If you use the browse button in the dialog you will be able to select images from your local PC but hopefully users on the Internet cannot see the contents of you hard disk and thus no one but you can see the image on the final page Always use the image galleries instead of this function when you need to insert an image on the page You should give an alternate text This is an help to users that need see your web page by means of a screen reader The screen reader will read out the alternate text on the image thus giving the visually impaired user an impression of what the image is showing As a starting point the title of the image as set when you uploaded the image is inserted as the alternate text but you can change it here Alignment controls the placement
27. in a gray color dimmed this indicates that the resources are not available to you This may be because of the type of resource or the permissions set on the resource Finally if the text is shown in italics 1t indicates that resource at the time the list is shown is outside the release period given by its release and expire dates Locking In order to facilitate multiple user working one the same homepage OpenCms will lock resources in order to prevent more than one users from editing the same page at the same time OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 8 In the resource list locked resources are marked by a small padlock In the example in Illustration 8 secure html is locked This means the file has been locked by another user and you cannot edit the file as long as that user has not released the lock To any other user that lock is shown with the locked padlock There is a third type of lock This is used in relation with siblings 1 e files that share the same contents If you have locked one of the siblings then the other siblings with the same content will show the padlock shown here TA Looking at quick htm1 you will see a open padlock This means that the resource is locked by you You can lock folders as well Locking a folder will indirectly lock all the resources inside the folder including sub folders and their sub folders and so on If you work inside a folder that y
28. new section Besides the obvious advantage of having the pages organized in a logical structure the use of folders and sub folders also makes it easier to reap the benefits of the automated navigation menu builder that OpenCms provides Generally it is recommended to create a folder if you at some point think that the section on the homepage eventually will consist of more than one page even if you only have one page to begin with Choose the Offline project with the project selector if your are not already in the Offline project Click the New button Create a new folder Name benefits Edit properties of the new folder Create index file in new folder Cancel Illustration 14 Folders is a useful concept when it comes to organizing the homepage Choose Folder as resource type and click Continue gt gt You are now presented with the Create a new folder dialog The name follows the same rules as for file names though you should not use the htm1 extension on folders or any other non page resources Name the folder benefits As for files you can choose to Edit properties of the new folder leave it checked for this example Create index file in new folder should also be checked This will cause OpenCms to continue with creating an index file in the news folder once the folder is created Pages called index html or index jsp have special meaning If you type the address of a folder in the addres
29. of the image in relation to the text The most relevant options are Left and Right which controls the horizontal placement The other settings controls the vertical placement of the image Width set the width border around the image in pixels The default is no border which is equivalent to a border of 0 zero width Horizontal and Vertical spacing determines how much space in pixels that gets inserted to the left and right or above and below the picture OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 45 For our example set the alignment to left and set the horizontal spacing to 5 pixels This will result in the text flows to the right of the image as shown in Illustration 75 Editor WYSIWYG Editor Element English body w 25 F a 4H gt o o A 486 FFD ey deca san x Normal v vi BZU 22232 Ef EE Tg amp Welcome T Aliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros porta eu hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis ac posuere ut laoreet id ipsum Maecenas nec sapien Duis pretium porta risus Nam faucibus urna vel erat Donec feugiat orci in turpis Ut sed purus Nullam eros nulla semper eu iaculis nec nonummy nec odio Fusce _ System adm
30. pages then making a body with the basic structure may save you time this is kind of a template for the content itself but do not confuse it with the real template We do not need it here so leave the Copy body from field empty Click Continue gt gt to go to the next screen see Illustration 12 Here you can set a number of properties for the file such as title keywords and so on The fields you see here apply to pages other resource types have different sets of properties that are relevant to them The most used types do have both a simple and an advanced view of the properties Most of the time you will only need to use the simple version we will look at the advanced screen later on Properties contact html Property Value Used Template Keywords contact phone fax address Description Contact information Add to navigation Navigation Text Contact Insert after no change Cancel Advanced Illustration 12 Pages requires that the template property is set You can choose the template here as well for files of the page type the template property must be set Title gives you possibility to name the page without the restrictions that apply to the file name The title is shown in the resource list but just as important it will typically be shown in the web users browser window title Search engines may also choose to list the search hit for the page using the title as the heading So give it a
31. placed and then click on the Special characters button Click on the character to get it placed on the page OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 56 ee a ROO o j lt z o Close Illustration 91 When you click on the wanted char acter it is inserted on the page Close s This exits the editor and returns to the explorer or to where ever you started the editor from i This step also removes the temporary working copy of the original page If the editor has registered changes you will be prompted to acknowledge that you are about to throws away the changes made in the editor You can cancel the action in which case you will be returned to the editor l j Do you want to leave the editor Unsaved changes will be lost i Annuller Illustration 92 If there are registered changes in the contents the editor prompts you to acknowledge that you are about to throw away the changes Note there is a significant difference between the editors close button and the close button on the window itself You should never use the latter while being logged into OpenCms In particular if you close the window that way while being inside the editor the working copy file will not get removed Subsequently when you get back into OpenCms you will notice that the working copy is visible in the explorer If you are sure no one else is editing the original fi
32. resources of the CMS You can create new files and folders change their properties and open them inside an editor Here you can also change the user settings of OpenCms The Workplace is completely based on HTML and can therefore be used with your internet The Context Menue Using the context menu you can perform all kinds of operations on files and folders The context menu can be accessed by right clicking on a resource htip f lacalhosl d0d0 QpanCms Workplace of Admin localhost Mozilla Fi Illustration 5 The online help provides short explanations on various subjects Click the Help button to open the help window Illustration 5 shows an example Use the contents to the left to select between the various subjects OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 6 The Back and Next button lets you go back and forth among the help pages you have viewed You also have the possibility to search the help contents The online help is not a user manual but rather a supplement to this user manual that your are reading now 2 3 Files and folders As you saw in Illustration 3 your homepage consists of a number of files and folders reflecting the structure of the homepage In the day to day work with OpenCms you will be working with the files and folders in the virtual file system This is in many ways similar to what your are used to do on your PC Though OpenCms virtual
33. the page that is considered the contents It will not show those elements that is put on the page by the template I e you will not see the navigation nor the banner or footer This makes it easier to focus on the actual contents when the parts of the layout which is controlled by the template is not shown during the editing process From within the editor you can always request a preview showing the contents you are editing by clicking on the Preview button The following illustrations uses the Demo template if you use a different template you screen will most likely look a bit different from the examples shown here Illustration 62 shows an example of how the page editor looks Editor WYSIWYG Editor v Element na J 7 A AH ro A 68 PED e Banaaan x normal AL keru SS EH FF he Welcome Lorem ipsum dolor sit amet consectetuer adipiscing elit Morbi scelerisque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos hymenaeos Aenean pulvinar velit vel dui Nam ligula ante dignissim ut commodo ac consectetuer a tellus Aliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in Illustration 62 The page editor is a WYSIWYG editor that allows you to edit web pages without the need to be an HTML expert The top part
34. time without getting in the way of one another And even if you are the only one editing the web site some of these features can be very useful Especially the concept of projects can be helpful As an example you could have a project that you can use for small daily changes such as correcting typos At the same time you can have another project specifically for building a new section on the homepage typically adding a new section will be done over a longer period of time By using different projects you can safely do the daily updates without accidentally publishing some unfinished pages from the new section And once the new section 1s finished you can publish all pages images and what have you with just one click on a button OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 4 There 1s always one special project the Online project This project represents the published version of the homepage All the changes you make in the other projects happens offline 1 e they have no effect on the published web site That 1s until you explicitly publish the changes Publishing is the final step to be performed in the process of making changes to the homepage before that step all the changes you make to the homepage are hidden from the public view Templates the page assembly line An important part of OpenCms is that it separates the fixed elements the layout and design of the homepage from th
35. to non existing internal pages External links are links to other web sites It is recommended to use the link gallery for external links Using the external links gallery OpenCms can check the external links as well but does not do it automatically since it can be time consuming Both types of links are hooked up on the pages by selecting some text an image or maybe both and then assign as web address to it The link text will typically be marked specifically on the final page so that the user can see that there is a link Typically this is done by underlining the link text but the actual appearance is controlled by the styles defined by the template on the page The page editor will show the link with the correct style but it will make it an active link i e you cannot click on inside the editor To test the link use the preview function instead Insert an internal link Select some text in the editor so 1t is marked Click on the Link button this opens the link dialog box Illustration 79 If you have not selected some text or an image you will get an error stating the fact OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 48 In our example we would like to set a link to the benefits section from the first word in the second line Select the word in the editor and click the Link button Link URL benefits index html Ica Target Same window v Cancel Illustration
36. use for blind people using a screen reader Alignment Defines whether the content of all table cells must be left or right aligned or centered You can subsequently control the alignment per cell Border The value determines if and how thick a border is set on the table and the cells The size is given in pixels The value 0 zero means that there will not be a border Color Defines the background color for the entire table You can set the background color of the individual cells see below Padding and Spacing Padding determines how much space is places along the inside border of the cell between the cell border and the contents of the cell The spacing determines how much space is placed between the cells in the table Both values are given in pixels Edit table After creation you can enter text into a table cell by placing the text cursor in the cell You can use the arrow keys to jump between the cells You can place images and even other tables inside the cells This way you can make even very complex layouts If you right click inside a cell you will be presented with a context menu with functions to alter the layout of the table You can add and delete rows and cells just note that you should try to make sure all rows holds the same number cells as the table otherwise may not display correctly in all browsers If you need to have a rows with a different number of cells you should use the Splits cell and Merge
37. useful title OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 10 Keywords are primarily intended to serve as guidance for search engines when they index the page Separate the keywords with commas e g contact phone fax address Description is primarily intended as a help to search engines The intention is that they should show the description as a part of their search result listing They may choose a different policy but at least the search engine built into OpenCms will make use of 1t so you can use the description with the search page on your own site The next item requires a little explanation One of the clever and time saving features that OpenCms offers 1s 1ts ability to maintain the navigation menus you have on the site Maintaining large web sites without this kind of functionality 1s a nightmare You need to specify a label and a position for a given entry in the navigation menu this is where you do it There may also be instances where you do not want the page to appear in the menu in that case you just leave the Add to navigation unchecked When Add to navigation is checked the page will be included in the navigation menu and you must provide a label and a position to determine how and where it appears in the menu The label is set with the Navigation text field While the navigation text may be the same as the page title 1t often 1s a shorter text Often the space allocated to me
38. usually the front page of the homepage Click on index html in Name column in the resource list to open a new browser window showing the homepage as it currently looks OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 16 Y interlet Mi e Contact AL sme t mas e Benefits LA Ol O Easy gt Secure O Quick Work in progress Demo template Copyright 2005 CodeDroids ApS Illustration 26 OpenCms automatically constructs the navigation menu so the web user can navigate between the various pages on the site Whether or not you see the welcome text depends how you created the index page but apart from that everything else is generated by the template mechanism This includes build the navigation menu so it reflects the structure of your site Since this is done dynamically the navigation menu always reflects the structure of the homepage no more menu items that point to pages that do not exist The text on the navigation menu items are taken from the navigation text you have provided for the pages the same goes for the order in which they appear in the list You can navigate between the pages While they may look the same since they are all empty the different titles on the pages are shown in the top part of the window frame When you are done testing close the browser window and return to the browser window with the OpenCms workplace So far you have been wor
39. web browser does not change when you navigate inside frames OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Galleries Page 63 Properties acrobat reader Property Value Used Title Get the PDF reader Add to navigation _ Navigation Text Insert after Finish Cancel Advanced Illustration 104 Per default the title of the external link will be used as the link text when you insert such a link on the page in the page editor Giving it a useful title can therefor save some work later on Usually you should check the Edit properties of the new file as it is recommended to give the external link a useful title This is of course a good idea in any case but specifically when you insert the link on the page in the page editor the title will be use as the link text So to insert an external link to say Get a PDF reader here you would only have to insert the external link via the external links gallery and you will have the link and text ready to use Back Upload New C Level Up Location links A sites default Name Tite Type Size Date last modified Date released Date expired 103 benefits el amp Y acrobat reader Getthe PDF reader pointer 51 5 28 06 8 35 PM 3 3 download el Y codedroids CodeDroids web site pointer 25 5 28 06 8 38 PM a links 3 misc Illustration 105 External links are files of the type pointer As f
40. with the Change navigation dialog Enter Front page in the Navigation text field and choose at the first position from the choices in the Insert after field Click OK to finish This change will place a link at the first position in the navigation menu Change navigation index html Title Welcome to my homepage State unchanged Navigation Text Frontpage Insert at the first position after Nes Cancel Illustration 30 Both the text and the position must be defined Another way of doing the same is by using the Properties function This is easier if you have to change other properties as well Here we would like to make sure that the contact entry appears after the entry to the benefits section Select Properties from the context menu for the contact html file Properties contact html Property Value Used Template Demo template v Title Contact Keywords contact phone fax address Description Contact information Add to navigation Navigation Text Contact Insert after Benefits benefits v Ok Cancel Advanced poo 31 The navigation menu is controlled by properties on the re ource Choose Benefits benefits from the list in the Insert after field and click OK This will place it after the Benefits entry OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 19 O
41. 54 Elements This button opens an overview over the available elements Apart from the default mandatory element labeled Text in Illustration 89 these are all optional You can select which are active and perhaps more importantly you can deactivate an element When you choose an element in the element selector this element is automatically activated for you Even 1f you do not enter any text into the element Exactly what this means depends on the template in question but often template react differently depending on a element is active or not an active but empty element is in this case treated as being active For this reason it is valuable to be able to deactivate an element explicitly Element Enabled Text Teaser d Trailer d OK Illustration 89 There is always one default and mandatory ele ment which cannot be deactiv ated Properties Pops up an window similar to what you see when you chooses Properties from the context menu in the explorer Simply an alternate way to edit the properties on the file Preview y Previews the page in a new browser window This allows you to preview the changes you have made Ss without having to save them first Actually it saves the changes from the editor to the working copy as discussed in the beginning of this chapter and then displays the working copy in the news browser window Save Saves the changes you have made in the editor Until you save your ch
42. Cms will skip the next two steps and return to the explorer once the upload is finished Otherwise it will present you with the next dialog as shown in Illustration 56 You must provide a file name and a type for the file These are information used when the uploaded file is stored in the virtual file system OpenCms proposes a file name and type based on the information it has on the uploaded file You can alter the values to fit the needs In the example we uploaded a PDF file and this type of file is Binary Most uploaded files that are not images should be stored as binary files The file name is deducted from the file name that the file has on you local PC Should that name contain characters that are unsafe in relation to web browser OpenCms automatically translate the problematic characters to safe characters For this reason you may find that some characters has been replaced by x s or whatever you site is setup to use as replacement As an example would eblegrod pdf be translated into the safe version xblegrxd pdf Upload file Name poem pdf Edit properties of the new file Suggested file type O E Page O L Text O Image O m ISP E Binary External Link O XML Template X Generic XML content cancel Illustration 56 OpenCms suggest a file name and a resource type If you has chosen to unpack a ZIP archive OpenCms uses the same mechanism to find file names and resource types
43. Element English M body M LA Y GRA oo BR 486 OST deca 0 x Normal M E Bu 88 55 b Welcome Lorem ipsum dolor sit amet consectetuer adipiscing elit CodeDroids web site Aliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros porta eu hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis ac posuere ut laoreet id ipsum Maecenas nec sapien Duis pretium porta risus Nam faucibus urna vel erat Donec feugiat orci in turpis Ut sed purus Nullam eros nulla semper eu iaculis nec nonummy nec odio Fusce tincidunt nibh in mauris Morbi scelerisque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos hymenaeos Aenean pulvinar velit vel dui Nam ligula ante dignissim ut commodo ac consectetuer a tellus MT SE juil with Java PHP ang MyS01 Illustration 83 The actual appearance of the links on the page is controlled by the styles defined as a part of the tem plate used for the page External link galleries adds another advantage you only have to type the URL once This is much less error prone than if you had to type e g http www adobe dk products acrobat readstep2 html every time you needed it on some page Edit or delete link Yo
44. L standard defines that a sequence of spaces must be treated like a single space Different browser may interpret it differently but try to use the indention functions or use a table instead if you need column wise layout Image is another thing to be mindful of In particular one have to pay intention to their size in terms of how many bytes they take up and their dimensions The latter has to do with the actual layout chosen for the web site the layout may be such that images should not wider than a certain amount of pixels Styles One of the things that makes a word processor more productive is that one can define a style for say the headline and reuse this style for all headers When editing it is easier to just select a given style rather than have to e g select a font a size and a color Furthermore a predefined style can be changed and the changes will apply to all the places where the style is used If no style had been used one would have to go the document manually updating each headline and what have you A slow and OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 34 error prone process Exactly the same issues apply to a web site Even more so as you often have many pages on a web site And the amount of pages 1s likely to grow over time which eventually makes it impractical to manage if one is not using templates and styles To add to that argument it is even more likely that you want to
45. OpenCms 6 User s Guide Copyright O 2005 2008 CodeDroids ApS OpenCms 6 User s Guide Copyright 2005 2008 CodeDroids ApS This work is licensed under the Creative Commons Attribution No Derivative Works 2 5 License To view a copy of this license visit http creativecommons org licenses by nd 2 5 or send a letter to Creative Commons 543 Howard Street 5th Floor San Francisco California 94105 USA All company or product names are mentioned for identification purposes only and may be trademarks of their respective owners The information contained in this document is subject to change without notice If you find any problems in the documentation please report them to CodeDroids ApS in writing CodeDroids ApS do not warrant that this document is error free For more information please visit http www codedroids com For more information on OpenCms please visit http www opencms org Table of Contents UCLM o iii 1 a o AA cesuuusnsaesenisoastatusianesessiassasstesaatucetwouies 2 DS A O E AE A NE E A I E T TAT 4 A or o NU O en 5 A A e e E O AX 6 A A E EU A di 8 a A E a a Ge 10 A PP A 13 OM AS A OO as 17 2 8 WIOVE TENAME TOS UGC G road Inc ri ci 19 oo o gant donee ENEE E A eae 21 PAD E Me eI a E net en Lo a a ob dei eo can 24 Re 27 a ino 28 R DaT AAE PET IE A A IIO I OENE E NEE A E AE EE E 33 Sl PAU E e E E E T E de 34 dan EAEE E A E AAT N A eae aaians 35 Sig Paste Tom oiber AAA PA 37 AA E E eno
46. age for a web page you should make sure that it is optimized for web use It is outside the scope of this guide to cover that but you want to make sure that it has the right dimensions and resolution as well as being compressed such that it loads fast when the end user views it Specifically you should not that while you can alter the dimensions of an image when place it on a page only effects how it is display it does not change that dimension nor the size of the image and it therefor takes just as long to load in the end users browser Also if you resize the image in the editor it is left to the browser to scale the image which may result in a less than perfect image quality So only use the editors resize function for minor adjustments 1f at all When working with images you will be using image galleries Image galleries has a lot of advantages one of which is that they make sure if the same image is used on more than one page then the web browser will be able know that it 1s the same image and only download it once This also improves the user experience since the page loads faster since the browser wont spend time downloading the same image twice Insert an image from a gallery Chapter 4 Galleries shows you how to create an image gallery Here we will assume that you already have an existing image gallery and look at how to use this with the page editor OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS Editing Page 42
47. an one way to the contents of say a page Usually you rarely need to use siblings with the one exception when you are working on a web site that is maintained in several languages On a multi lingual homepage it 1s possible to use siblings to reflect that fact that even though a page is available in two languages the contents really is the same Siblings in OpenCms supports this point of view very well Exactly how you will be using siblings in relation to multiple languages will depend on the specific setup chosen for your site so we will not get into details here Since the sibling concept 1s not solely for dealing multiple languages but can be used for creating relations between pages across the natural hierarchy given by the folders In an elaborate hierarchy of OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 22 sections one could image a scenario where the same page 1s useful in more than one section of the homepage in that case 1t is possible to create siblings so the same contents 1s available in two or more positions in the hierarchy Since our example does not have a elaborate hierarchy of sections on the homepage it is not the best way to demonstrate the idea but the steps involved are the same as for a more appropriate homepage Open the context menu on very easy html and choose Copy You can think of a sibling as a special kind of copy since a sibling has 1ts own copy of all the properties and
48. anges they are only stored in the memory of your web browser Should the browser or the PC it is running on crash the changes are lost Luckily this is rare but if you are writing a long article you can use this function to save it while you are working on it You will remain in the editor window after the save is done but your cursor will be position at the top of the document Save and exit Wf Same function as the Save button except that it exits the editor and shows the explorer again or whatever it showed before you invoked the editor This step also removes the temporary working copy of the original page Undo The editor can undo previous actions From within the editor you can undo changes you have made since the last time the file you saved it or when you opened it If you have saved a change and want to undo that change you should use the Undo changes function from the context menu in the explorer OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing do Page 55 Redo Redo the last undone change So 1f you want to undo what you just undid then click Redo Search Opens a search panel where you can enter a search text It searches in the text currently in the editor Seg efter C Kun hele ord jem O Forskel p store OOP Ned og sma bogstaver Illustration 90 You can search in the contents you are currently editing Copy Copies the currently selected
49. any folder in OpenCms virtual file system but for the most cases you should upload them to a gallery OpenCms galleries are explained in chapter 4 Galleries for now it suffices to say that a gallery 1s just a special kind of folder And whether you upload to a gallery or somewhere else the procedure is the same e Before you upload you should go to the folder to which you want to upload the file s to Then click the Upload button OpenCms supports two different upload mechanisms which one will be used when you click the Upload button depends on your personal preference settings We explain both below If you want to upload a large amount of file perhaps an entire web site then OpenCms provides some additional administrative functions to facilitate that These are available only to the system administrator and will not be discussed further in this guide HTML upload function This function uses a method supported by all modern web browser It allows you to select one file and upload it to the OpenCms virtual file system Uploading the file consist of three steps First you must locate the appropriate file on your local PC Then you indicate the type of the file Finally to provide a file name and title under which it is to be stored in OpenCms The first 1s to select the file on your PC by using the file selector After clicking the Upload button your are presented with the Upload file dialog Upload file Name C D
50. aph but just want a line shift press Shift Return on the keyboard simultaneously This inserts a line break but does not start a new paragraph When you select a style it will effect the entire paragraph in which the text cursor is placed OB eo 28 055 e Banaaan o x BZU lt Bo Welcome i FI I wt S s T Lorem ipsum dolor sit amet consectetuer adipiscing elit T T Morbi scele risque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos hymenaeos Aenean pulvinar velit vel dui Nam ligula ante dignissim ut commodo ac consectetuer a tellus 1 TlAliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros porta eu hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis ac posuere ut laoreet id ipsum Maecenas nec sapien Duis pretium porta risus Nam faucibus urna vel erat Donec feugiat orci in turpis Ut sed purus Nullam eros nulla semper Illustration 64 Editing may be easier in some cases when the markers are shown A useful feature when working with the text is the Toggle details button It toggles between showing OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing 15 WL Go w
51. asier to do it from the gallery window You can publish changes and new image directly from here with the Publish resource button This is equivalent to do a Publish directly on the file in the explorer Similarly you can delete an image Again this resembles deleting it from the explorer So the same rules applies as described in 2 10 Delete resource p 24 when it comes to deleted previously published resources Please refer to 3 5 Images p 41 for a instructions on how to use the image gallery from within the page editor 4 2 Download galleries The basic idea with the download gallery is the same for the image gallery The difference between the two is that download galleries are intended for files that should not be embedded into the page but rather be downloaded or be shown in a separate window or application OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Galleries Ed Page 61 Typical examples would be high resolution images PDF files and ZIP files Other special types of files are supported as well such as office files such as Word documents What exactly happens on the web user PC depends on the particular setup on that PC If you link to a PDF file in the download gallery on a page then it may appear in a new browser window or it may be opened in the Acrobat Reader If you link to a Word document a it may open in Word on a Windows PC while it may not open at all on a Mac The process
52. ate paragraph You should already have the text cursor placed inside the empty paragraph so all you have to do 1s click on the Insert button in the gallery window This should place 1t as shown in Illustration 72 If for some reason your text cursor was not placed inside the empty paragraph the image will end up somewhere else on the page Not to worry you can drag the image from one place on the page to another Click on it and hold down the mouse button while moving the image aim the mouse cursor between the to paragraph markers for the empty paragraph and let go of the mouse button The inserted image 1s selected which is indicated by the small squares along the border of the image You can use the handles to resize the image but as stated in the beginning of this chapter then this should only be used for small adjustments Since we now have the image sitting in its own paragraph so it can be manipulated as usual You could click on Center to center the image on the page Editor WYSIWYG Editor Y Element English body F QA ne R 438 FARE ey BZU x Welcome _T Lorem ipsum dolor sit amet consectetuer adipiscing elit T o o o AD a i T Aliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros por
53. ation is unlikely to be up to date A reload will update the window to reflect the actual state Preferences is where you can edit your personal preferences such as how the workplace should look when you log in You can also use it to change your password The Exit button logs you out of the workplace You should log out of the workplace whenever you are not at you PC E E Note that merely closing the window will not log you off the system immediately There is a timeout period that will have to expire before the systems logs an inactive user off In that period of time someone sitting at you PC may be able to get back into the system assuming your identity So remember to log out explicitly by means of the Exit button Workplace status At the bottom of the window you can see some status information such as your user name login time and so on 2 2 Online help The online help is context sensitive This means that it will try to find the most appropriate help information based on what you are doing in the workplace Back Next Contents Search X Close OpenCms The OpenCms Explorer O Help Start o Editors The Explorer View m Explorer O Resource History o Editing the Preferences O Publishing Resources O Touching Resources m The OpenCms Explorer o Administration browser e g Internet Explorer or Mozilla Firefox o Contributions From the explorer view you have access to the
54. between the WYSIWYG editor the page editor and the source code editor which shows you the actual HTML codes About elements A page file can consist of several parts or elements There are two levels of elements The top level consist of the various languages that are setup on your system For each language you can have a number of elements that is relevant to the chosen template Besides the main text part selected by default you could have some other parts on the page E g you could have a See also element The template would then use this to put the contents of that element say at the top right part of the page Exactly how many languages you have to choose between and how many elements there are and how the elements are used depends on your setup Language selector This enables you to edit the different languages the page must be available in This requires a proper setup of the system In this case the editor will automatically choose the appropriate language You can still switch to another language by means of this selector Element selector At the very minimum there is one element per language This is typically called Text but this is controlled by the template so different templates may choose to label it differently as well as they may choose to define more elements With selector you can switch between the various elements and edit them OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page
55. capabilities Luckily with the most modern web browsers and when keeping a few things in mind when editing the pages your readers are not likely to experience any serious problems Web browsers Web users views your pages by means of a web browser There is a number of different browser on the market In the early days of the web the Netscape browser was the most used today it is the Internet Explorer browser which most people uses with the open source Firefox browser as a solid number two The important thing is that approximately 1 4 of all the web users does not use the most used browser and that by adhering to standards these users can still read your pages without problems This is especially important in relation to users which use special tools to read the page such as blind web users that uses a screen reader to help them The problem with the various browser at that the same page may look different when viewed in different browser For pages that adheres to the HTML standard the problems are minimal and the page editors do generate reasonably standardized code So once the templates are correctly constructed the daily work with writing and editing pages with the page editor is not going to present a lot problems HTML pages There are a few things that one would do when using a word processor which does not work in relation to an HTML page Using the space key and the tab key to do indention will not work as expected The HTM
56. cells functions from the context menu to achieve the goal 1 row two three 2 row two three 3 row two three If you have a table with 3 rows and 3 columns and you wants to split the cell in the 2 row and 1 column then you will end up with a table with 4 columns in one row and 3 in the other two rows When you use the split function what really happens is that the first cell in 1 and 3 row gets 1s marked to indicate that they each span two columns This way the layout actually has 4 cells in all rows and that will display correctly in all browsers i row two three 2 row 1 part 2 row 2 part two three 3 row two three OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 40 Likewise if you want to do the opposite and merge to cells To do so select the text in the two cells if there is no text you must add some a letter in both cells will do Once selected right click on the selected text and select Merge cells i row two three 2 row two three 3 row two three EN Use Table button to inspect an existing table and to change some of the values related to 1t Note some of the values are locked once the table is created Rows Width Columns E Height Eu Title PO Alignment Padding 1 Pixel in the cells Border 1 o Spacing 1 Pixel between the cells Color fF y cancel Illustration 67 After the table is created you can alter the b
57. change the look of the pages as they typically stay online for a long time and you may feel a need after a couple of years to freshen up the look of you web site Layout and styles are defined through the use of templates in OpenCms Since these are very specific to a web site you should consult the documentation for your site to see what templates are available and when to use which one 3 1 Page editor You open the page editor by selecting Edit page from the context menu on the page you want to edit Note that you cannot edit a page which another user has locked If you open the context menu on types other than the xmlpage type there may be a different editor available for it and some file types have no associated editor Note that when you open a page for editing OpenCms will automatically create a working copy of the file This file is marked with a tilde and stored along side the original file E g if the index html file is being edited then the working copy will be named index html Until you explicitly saves your changes all changes takes place in the working copy Usually you need not worry about the working copies but you may notice them if there are several people working on your web site at the same time when navigating in the explorer you may see the tilde marked files and they then indicate the some other user is working on that file When you open a page in the page editor the editor will show the part of
58. e External Link O e Sibling O Upload new file Continue gt gt Cancel Illustration 102 An external link is a type of file that include the URL address of an external web page The name of the link is the name under which it is stored in the explorer So the name must follow the usual guidelines 1 e not include special character and spaces There 1s no specific file extension associated with the external link type so you can decide not to give those names a common extension Create a new external link Name acrobat reader Link URL http www adobe dk products acrobat readstep2 html Edit properties of the new file Continue gt gt Cancel Illustration 103 The URL should include the part that is called the protocol in this example it is http The Link URL is for the web address of the external page The easiest way to enter the value is to point you web browser to the appropriate external page and the copy it from the address field in the web browser into this field This way you are sure that the address is OK This approach also ensures that the Link URL field includes the protocol part The protocol part if the http for plain web pages there are different less common protocols Note that some home page uses a problematic feature in HTML called frames Among other things frames makes it difficult to get hold of correct URL This is because the address field in the
59. e actual contents on that pages articles news and so forth You can concentrate on writing the contents and do not have to worry about getting the page header in the correct position or update the navigation menu OpenCms does that for you The pixie dust that makes this happen is the template mechanism You can think of it as an assembly line where the various parts such as header footer navigation and the content you provide for the page is put together to form the final page as presented to the viewer If you have ever tried to maintain the navigation for anything but the simplest homepage you will know how big a relief having this done for you is Once the appropriate templates for your homepage are created you simply choose one of them for a new page and then goes ahead and enter your article feature or what have you The template mechanism will then ensure that the resulting page is consistent with the rest of the pages on your homepage Besides making it easier to begin with templates also makes subsequent maintenance of the homepage much easier You can later switch the look of you homepage simply by altering the templates you do not have to touch the contents on the pages since it is separate from the layout 2 1 Workplace tool bar Illustration 2 shows an example of how the workplace looks At the top you have the workplace tool bar Below is the work area and its contents changes according to the selected view The workplace
60. e gallery and is describe in detail in Chapter 4 Galleries Here we will use an existing link gallery in our examples 5 To insert an external link you can select some text as before or you can just place the text cursor where you want the link to appear If you do not select some text then the link text will be the title of the external link which then will be inserted in the page In our example we have placed the cursor at the end of the first line Click on External links gallery to open the gallery window Useful links demo links S amp Title Link URL Pa acrobat reader Get the PDF reader http www adobe dk products acrobat readstep2 html 9 codedroids CodeDroids web site http www codedroids com Y amp Title CodeDroids web site a Target New window Link URL http www codedroids com Name codedroids Title CodeDroids web site Date last modified 5 28 06 8 38 PM Illustration 82 Before you insert an external link you can select the target and set a new title In the example we have chosen CodeDroids in the gallery window y Then click Insert this inserts the link on the page and closes the window Since we did not select some text before we opened the window the title of the external link 1s used as link text see Illustration 83 OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS Editing Page 50 Editor WYSIWYG Editor_W
61. e prompted to acknowledge that you want to undo all changes made to the file since 1t was last published Once you click OK the changes are lost OpenCms provides a related History function With this you can pick from a number of previously OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 28 published versions of the file You are not limited to just the last published but can go further back in time exactly how long back you can go 1s determined by the system setup for your particular OpenCms site Beside undoing mistakes you can use function this to make some temporary changes to a page and once the changes no longer are relevant go back to the version prior to the last published version 2 12 Upload If you have files stored on your local PC that you need on the homepage then you must use this function to upload the files to OpenCms You need to upload say images to OpenCms before you can use them on the homepage The files can be images and other type of files such as PDF s and so forth Files must be uploaded to OpenCms because web users on the Internet hopefully does not have access to your local PC s hard disk If you insert an image on a page by entering a reference to your local hard disk then the page would look fine to you but to all other web users the image would be missing on the page since they are not allowed to read from your hard disk You can upload the files to
62. efits easy html see Illustration 51 This indicates that there are no related siblings any more so 1t appears a normal file Back Upload Fe New Level Up Location benefits A sites default Name Title Type Size Date last modified Date released Dateexpired 3 amp benefits El easy html Easy again xmipage 125 5 28 06 1 00 PM index html Benefits xmipage 125 5 25 06 3 36 PM quick html Quick xmipage 125 5 28 06 10 32 AM secure html Secure xmlpage 125 5 28 06 10 31 AM Illustration 51 A sibling is automatically turned into a normal file when there are no other related siblings In the root folder the very easy html file is now gone both from the Online and Offline projects OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 27 Back Upload New C Level Up Location y A sites default Tes size _ Date last modified Date released Date expired 1 3 benefits benefits Benefits folder 5 25 06 3 31 PM contact html Contact xmlpage 125 5 28 06 12 30 PM index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM Illustration 52 Publishing a resource marked for deletion in an offline project will cause it to be delete from the On line project and the marker is removed from the offline project as well Opening a page in your browser should convince you that the entry is no longer available and the navigation m
63. eleased Date expired 9 benefits 3 benefits Benefits folder 5 25 06 3 31 PM E contact html Contact xmipage 125 5 28 06 12 30 PM index html Welcome to my homepage xmipage 125 5 28 06 12 30 PM ra A Easy xmipage 125 5 28 06 10 28 AM Lock Edit page Edit sourcecode Copy Rename Move Touch Illustration 48 Deleting resources follows different procedures depending on whether the resource is new or has been published Deleting siblings opens for further options Since the file is a sibling the Delete resource dialog changes compare Illustration 49 and Illustration 47 OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 26 Delete resource very easy html Title Easy State unchanged There are siblings pointing to this resource Preserve siblings Delete all siblings Really delete resource Illustration 49 When deleting a sibling you have the choice of delete just the selected one and keep other siblings or delete all siblings sharing the same contents You can choose to Preserve siblings in which case you only deletes the selected resource other related siblings remain unchanged If you select Delete all siblings then all related siblings gets deleted 1 e all resources sharing the contents with the selected sibling will be deleted If you are not sure which resources are related to the one selected cancel the delete procedure and then use the Show sib
64. enu 1s updated to reflect this fact 2 11 Undo changes If you are editing a page in the editor then you can choose to save the changes or not this 1s explained in the next chapter When the changes are saved you still have an opportunity to undo the changes To do that you select the Undo changes function from the context menu Note that the function is not active in the context menu if there are no changes to be undone Back E Upload Y New Cf Level Up Location A sites default ee SE Date last modified Date released 103 benefits benefits Benefits folder 5 25 06 3 31 PM contact html Contact xmipage 125 5 28 06 12 30 PM Bo index html Welcome to my homepage xmlpage 125 5 28 06 5 21 PM Unlock Date expired Publish directly Edit page Edit sourcecode Copy Rename Move Delete Touch Illustration 53 The Undo changes function is only active for published files that have been changed since they were last published The function returns the file to the state 1t was in when 1t was last published Undo changes index html Title Welcome to my homepage State changed The resource index html was last modified on 5 28 06 5 21 PM by demo Do you really want to undo all changes that were not published Ok Cancel Illustration 54 Since all changes made to the file since it was last published will be lost OpenCms prompt you to acknowledge the operation You will b
65. ere you want it Here we will create a misc there is a good chance you will find use for an gallery for miscellaneous image sooner or later We choose to place it in the root folder Click on the New button this presents you with an dialog box as shown in Illustration 93 Select Extended folder and click Continue gt gt you will now be presented with a list of the special types of folders as shown in Illustration 94 The list may differ from the one shown here depending on the setup of your system Select Image gallery and click Continue gt gt OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Galleries Page 58 Please select the new resource type O G Folder Extended folder O X Structured content Page O Text mise External Link O e Sibling O PA Upload new file Continue gt gt Cancel Illustration 93 Galleries are special types of folders Please select the new resource type BY Image gallery O 3 Download gallery O 2 External link gallery O HTML gallery O Table gallery Continue gt gt Cancel Illustration 94 Select the wanted type of gallery from the list Enter the name of the gallery into the Name field since the gallery name is a folder name the usual restrictions in the name must be taken into account 1 e no special characters or spaces Click Continue gt gt and enter the title The title 1s not restricted
66. etter inside the paragraph OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 44 Editor WYSIWYG Editor Mi Element e a AEH su A 486 DOTE Gas 3 0 x lormi BE 7 U F323 QE amp TEE Tg ey Welcome o o o Managing contents Design and layout o o Programming System administration a 5 Lorem ipsum dolor sit amet consectetuer adipiscing elit 1 TlAliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros porta eu hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis ac posuere ut laoreet id ipsum Maecenas nec sapien Duis pretium porta risus Nam faucibus urna vel erat Donec feugiat orci in turpis Ut sed purus Nullam eros nulla semper eu iaculis nec nonummy nec odio Fusce tincidunt nibh in mauris 1 T borbi scelerisque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos hymenaeos Aenean pulvinar ES A A A O A ae a Illustration 73 To have the text flow around the image it should be placed inside the paragraph containing the text Using the markers is very helpful here if you end up placing the image before the first paragraph marker 1 e outside the paragraph you will not get the desired result FE Select the
67. f the files to make them safe replacing the space that was in the original file names OpenCms uses a similar technique to provide a meaningful title Since the title 1s not restricted in the same way as to what characters are allowed the title still includes the space as the original file name did Back A Upload New Cf Level Up Location sites default Name Title Type Size Date last modified Date released Date expired 19 benefits C2 benefits Benefits folder 5 25 06 3 31 PM contact html Contact xmipage 125 5 28 06 12 30 PM amp Y hvidvin gif hvidvin image 32771 5 28 06 5 48 PM oS index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM S Y rxdvin gif r dvin image 12990 5 28 06 5 48 PM Illustration 61 OpenCms makes sure that the names of uploaded files only contains safe characters Maximum file size For non administrative users OpenCms operates with a maximum file size limit This is a safety measure If a file fails to upload you should contact the system administrator OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 32 Summary This chapter shows how you with simple concepts as files and folders can build even very complex web sites Before starting on building a web site from scratch you should spend some time on structuring the site according the requirement and how you want to present your information to your visitors
68. file system has some extra features which makes it better suited for handling home pages compared to what you know from your PC The virtual file system can store many different types of files pages images documents and so forth and folders We use the more generic term resource to cover all the different types To navigate and work with files and folders you use the Explorer view The explorer consists of three parts Left most you have the overview of the folders on your site To the right there is a top part is the explorer tool bar and below is the resources of the currently selected folder We will refer to the latter as the resource list a sites default gt benefits Back gt Upload New C Level Up Location benefits Name Title Type Date last modified Date released Date expired El amp Y contact htmt Eontact xmpre 25 a E easy html Easy xmipage 125 5 29 06 4 47 PM index html Benefits xmlpage 125 5 25 06 3 36 PM El Y quick html Quick xmlpage 125 5 29 06 4 48 PM Y secure html Secure xmlpage 125 5 29 06 4 48 PM Illustration 6 An example of how the various files and folders on your site is represented in the explorer view In the folder overview you click on the name of a folder this will show the contents of that folder in the resource list Click on the plus or minus button to the left of the folder name in order to reveal or hide any sub folders of the folder
69. gress Demo skabelon Copyright 2005 CodeDroids ApS Illustration 28 The public version of the homepage only shows the pages in the Online pro ject As you can see the project concept allows you to work in an offline project without having to worry about it effecting the public version of the web site the contents of the Online project You can actually have a number of offline projects this is especially useful if several people are making changes to the homepage When your are done with all the work that needs to be done in a particular project you can go ahead and publish all the changes made to the homepage as a part of that project This way all related changes are published at the same time and you are ensured a complete and consistent homepage You can publish resources individually by selecting Publish directly from the context menu This is useful if you just have made a change to a single file e g corrected a typo or likewise If you have made a number of changes then it is better to publish the project in one go Usually you would not publish a project before you have written the contents for the pages but we will do it anyway in this example we get to the editing in the next chapter y Choose the Offline project in the Project selector and click Publish project OpenCms will prompt you just to make sure that you really want to go ahead click OK to continue Next OpenCms will prompt you for anothe
70. he font and the size as well as colors specifically the style for that effected text is not longer controlled by the sites wide style guide On a related note If you use the standard style Headline 1 this indicates to search engines like Google that this is the headline As a consequence they may give the words in the headline a higher priority This may ultimately lead to your page being ranked higher listed before another page with the same headline text but where headline is just a paragraph with the font and font size set so it visually looks like a headline The Style selector list the following styles the list may be different in your setup but we have listed the most important ones Also the description given here is only a guideline your should have a definition for the styles and their meaning which 1s particular for your site Style Description Heading 1 Large sized headline typically bold as well OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 36 Style Description Heading 2 Sub heading smaller size typically bold Heading 3 Could be used for small heading Heading 4 Could be used for trumpet Heading 5 Could be used for byline Heading 6 Could be used for image caption Normal Body text Formatted This is typically a fixed width font making it suitable for code listings or columns of numbers Numbered list Lis
71. he template Other programs does behave a lot better in this respect one such example is the free OpenOffice Microsoft WordPad and NotePad also works better in this respect And it is actually possible to copy the contents from a Word document and paste it into either of the mentioned alternative and then select the text from that program and then paste it into the page edit This typically filters out the unwanted formatting codes There is also a build in function to do something similar Once you have pasted the contents into the page editor you can invoke the Clean up HTML coder function This will remove those code that can be identified as superfluous Unfortunately not all the unwanted codes can be identified as superfluous these will not be removed If the inserted contents still looks wrong you can try click on the Toggle details button You may then be able to remove the superfluous code manually so that only well known codes like paragraphs and line breaks are visible as in Illustration 64 The more complicated the layout you attempt to copy is the more likely it is that you will have some problems Images cannot be copied by cut and paste See more about images in later on 3 4 Tables Tables are primarily intended for content which 1s tabular in nature 1 e consist of rows and columns Tables can also be used to help out when formatting the content on the page 1 e 1f you want to place a caption below an image This is not e
72. hese examples As you can see there a plenty of room for creativity when using tables You could just as well mirrored the example so the text would flow to the right of the image Or have the caption above or to the side of the image The styles defined by the template you use may offer different means to do the same and if so these are preferred over this approach The described method will work with the various browser but tables in HTML are intended for use with tabular data e g numbers in rows and columns Using tables for layout purposes as we just did is not in strict accordance with the intention Thusly if your setup provides more suitable methods to control specific layout task such image captions then you should use that method and only use tables for layout if there is no alternative Editor WYSIWYG Editor Element English body mi E Q e co B tee 050 ed aa l j w BrU Normal v Welcome T Lorem ipsum dolor sit amet consectetuer adipiscing el it LT T laliquam malesuada Suspendisse gravida sem in ante Fusce tincidunt felis non est Nam tellus ante suscipit vel aliquet cc non tempus vel velit Sed vulputate felis in mauris Maecenas ac felis at odio congue interdum Sed odio eros porta eu Sa hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis
73. iblings in a similar way but it is not entirely correct The important difference is that there is no original or rather if you want to keep the terminology all siblings are originals There is the first file from which you can create a sibling but once the sibling is create it is just as much an original as the first file in fact you can delete the first file without loosing the contents of sibling All siblings references the same contents and as long as at least one reference to the contents exists then the contents is kept Once you delete the last reference then the contents gets deleted 2 10 Delete resource Deleting resources can be divided into two cases one where you have new resource that has not OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 25 been published and one where the resource has been published In the latter case OpenCms cannot really delete the resource until the next time it gets published You have already seen some of the aspects of deleting resources in chapter 2 8 Move rename resource p 19 Moving a resource indirectly causes the original resource to be copied and subsequently to be deleted To delete a resource directly choose Delete from the context menu for the file or folder you want to delete You will be prompted to acknowledge the deletion Press Cancel if you want to keep the resource Delete resource contact html Title Contact S
74. ill show the index page as well so you would now have two menu entries pointing to the same page This may confuse the web user which of course is not something to strive for Properties index html Property Value Used Template Demo template v Title Benefits Keywords Description Add to navigation Navigation Text Insert after Finish Cancel Advanced Illustration 17 Index pages should normally not be added to the navigation Click Finish to create the index page and return the explorer OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 13 Back ED sites default 3 benefits upload J New Q Level Up Location Date expired Date last modified Date released 5 25 06 3 31 PM 5 25 06 3 20 PM 5 25 06 2 35 PM Name Title Type Ca cd Y benefits Benefits folder SS Y contact html Contact index html Welcome to my homepage xmlpage 125 xmipage 125 Illustration 18 The left most column show an icon indicating the resource type Folders also appear in the folder overview to the left You can now see the folder in the resource list as well in the folder overview to the left of the resource list In either place you can click on the name of the folder to navigate into the folder so the resource list shows the contents of the folder Click on benefits to show its contents El sites default gt benef
75. in turpis Ut sed purus Nullam Nam faucibus urna vel erat eros nulla semper eu iaculis nec nonummy Donec feugiat orci in turpis nec odio Fusce tincidunt nibh in mauris Apache TANT Ml ANT with Java PHP and M SQL 4 Woh vole 3 Morbi scelerisque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos hymenaeos Aenean pulvinar velit vel dui Nam ligula ante dignissim ut commodo ac consectetuer a tellus Demo template Copyright 2005 CodeDroids ApS Illustration 78 Things align nicely when using the table to layout the image and caption The first column adds extra space between the image and the text 3 6 Links One thing that web pages can do that you cannot on paper is linking to other pages This feature is called a hyper link or just link Links are pointers that includes an address of the page it points to When the user click on a link the web browser will take the user to the address included in the link In OpenCms terminology there is a distinction between internal and external links They are both links and works by the same mechanism but the internal ones are under the control of OpenCms Internal links are links that points to other pages on your homepage 1 e pages which are accessible through the explorer OpenCms can check the validity of these links when it publishes a page and warn you if there are links that points
76. inistration tincidunt nibh in mauris T P heu ann a dl 2 2 Ar Hs y gt POEPEN y Mane antant a AE anninnnmss aA libras tanarnannt nan A noob man mar imrarvene Managing contents _PlxbiLorem ipsum dolor sit amet consectetuer adipiscing elit T Illustration 75 Text can flow to the left or the right of an image Note the small anchor marker next to the paragraph start marker This indicates where the image 1s anchored This is necessary since the image displays in a different position than the one where it is really inserted If you delete the anchor you will delete the image from the page It is a good idea to place the image as the first thing inside the paragraph this lowers the risk that you accidentally deletes the anchor The anchor is invisible if you have not enabled the Toggle details function so if it appears in a more or less random place in the text inside the paragraph it is easy to accidentally delete the hidden anchor and thus the image Image caption You can use tables and images in combination A good example is to use it for the image caption Note that if your web sites defines a specific style or maybe HTML snippet in the HTML gallery for this purpose then you should use that instead Eu Use Toggle details to show the makers Place the marker just before the first paragraph marker of the paragraph holding the text that should flow around the image Click on Table and create a table w
77. is the file called index html placed at the top of the hierarchy The top level is marked by the sole slash to the left of the file name This is the root of the hierarchy which is just a folder albeit 1t has a special meaning Another folder is the one called benefits This marks a sub level in the hierarchy typically this could be a specific section on the homepage Just like the root folder this can include files and other folders Inside the folder there is an index html which servers as the overview for the Benefits section of the homepage The details about the benefits are shown in the other pages in the folder easy html secure html and quick html You use the workplace explorer view to work with the files and folders in the virtual file system VFS We use the term VES to distinguish this from the file system you have on your local PC and the file system on the server where OpenCms is running The VFS in many ways acts like any other file system and thus gives you a head start as you already 1s familiar with the basic operations But the VES also includes features specifically target at serving web pages which makes it better suited for building web sites Users permissions and projects tools for cooperation OpenCms supports multiple users working on the same homepage To that end OpenCms works with a number of concepts such as users permissions and projects These enables multiple users to work on the homepage at the same
78. ith 2 rows and 2 columns no 0 border and 1 pixel for both spacing values Click OK Rows 2 Width Not specified v Columns 2 Height Not specified Vv es Title Alignment Not specified v Padding 1 Pixel in the cells Border 0 Spacing 1 Pixel between the cells Color Oy cancel Illustration 76 If the border is set to 0 zero no border is shown 3A Open the Image gallery insert an image in the second column in the first row of the table You can drag into the cell if you prefer to Now place the text cursor in the first column either row will do and press the space bar a couple of times This forces some space into the first column which will ensure some space between the image and the text flowing around it Select the table and use the small handles to resize the table so the width 1s as wide as the image dictates Place the text cursor in the cell below the image second column in the second row Choose an appropriate style from the Style selector we just use plain italicized text Then enter an appropriate caption OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS Editing Page 46 Finally select the table again and click on the Align right button Your editor should look something like the one shown in Illustration 77 Illustration 78 shows how the final page looks like when using the demo template we using for t
79. its Back 2 Upload gt New CS Level Up Location Y benefits Name Title Type size Date last modified Date released Date expired E Y Y index html Benefits xmipage 125 5 25 06 3 36 PM Illustration 19 The location field echoes the path to the currently selected folder Illustration 19 shows how the newly created index page inside the folder We will need a couple of other pages inside this folder following the example from Illustration 3 First create a new page with the name easy html and Easy as title and navigation text Position it as the last in navigation This 1s the default for newly created pages 1f you do not change Insert after setting You should now have two pages in the benefi t folder Now we will use a different way to create the last couple of files 2 6 Copy resource If you have a page which you would like to reuse or use as starting point for a new page then you can copy it Here we will make a copy of the easy html page Click on the document icon for easy html This will open the context menu Select Copy Back El sites default gt benefits Upload New C Level Up Location benefits Name title Type Size Date last modified _ Date released Date expired easy html Easy xmlpage 125 5 28 06 10 28 AM 5 25 06 3 36 PM Unlock Benefits xmlpage 125 Publish directly Edit page Edit sourcecode Rename Move
80. king in the Offline project Changes made to this project and other offline type of projects are not visible to the visitors on the public web site To see the changes made in the offline projects you must be logged into the system If you want to see how the public version of the site looks like choose the Online project from the Project selector The explorer now shows what files and folders that are available to the public version of the site The example below shows that there is only the front page itself yours may be entirely empty or have another index pages index jsp Project Online v Site sites default v View Explorer v Q Reload Preferences uelp Exit Of O Back 5 eg G Level Up Location El sites default Date last modified Date released 5 25 06 2 35 PM Name Date expired index html Welcome to my homepage xmlpage 125 Illustration 27 The Online project only holds the resources that have been published Try looking at the page in the web browser when in the Online project click on the name in the Name column You will notice that the front page no longer contains the navigation menu since there are no other pages to navigate to Switch back and forth between the Offline and Online projects to see the difference OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 17 A interilet on r ny non Work in pro
81. l The title is not restricted as to what characters you can use So you can use special national characters as well as spaces and so forth State The resource list shows further information besides the name and title of the resources Two useful columns are the lock and state columns the two columns following the first column with document icon A file that has changes compared to the same file in Online project is marked by a small flag in the third column Furthermore the type of change is indicated by the color of the text for the resource If it is a new resource then the text is shown in blue if the file has been changed since it the last time it was published then it is marked by a red color Illustration 8 shows that quick html is a new file blue whereas secure html1 has been changed since it was last published red The other files have not been changed since the last published Back Upload 3 New C Level Up Location benefits a sites default Title Type Date last modified Date released Date expired gt benefits El Y contact htmt AA AAA e easy html Easy xmipage 125 5 29 06 4 47 PM index htm Benefits xmipage 125 5 25 06 3 36 PM Y quick html Quick xmlpage 125 5 29 06 4 48 PM Y secure html Secure xmlpage 125 5 29 06 4 48 PM Illustration 8 The explorer shows the status of the pages and whether they are locked or not Entries in the resource list may also be shown
82. le that replaces the content of the file you have selected to replace Since the type is not changed during this process you should make sure to upload a file of the same type or manually change the type of 1t has been upload use the Change type function from the context menu When you use the Replace function OpenCms will always use the HTML upload function since you are just replacing one file and thus you don t need the more advanced multi file upload feature in the Applet upload function Applet upload function This function uses Java Applet technology which means that OpenCms will transfer a small program to your web browser The advantage is that the upload applet allows you to select several files for upload You do not have to pack up the files in a ZIP archive the upload applet will do that for you The first time you run an applet you are asked to acknowledge that the applet may be run in your browser This is a security feature in the Java Applet technology which requires you to permit applets that want to access your local hard disk The applet is signed so you can trust that it has not been altered since released by the signer You need to allow the applet to be run on your machine while you collect the needed files the applet is stopped once the files have been uploaded Click Upload this will start the applet in your browser Once started you will be presented to an screen similar to in Illustration 59
83. le you can delete the working copy file manually But typically it is sufficient to simply open the original page again with the editor and then choose the right close button this time OpenCms will then remove the working copy file as a part of its normal routine OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Galleries Page 57 4 Galleries The previous chapter showed how you use the galleries from within the page editor Here we will look at how you create and manage the galleries OpenCms provides five types of galleries Image galleries is used for images that will end up on the pages Typical the images are relatively small in size such that they fit the layout on the home page or they may be thumbnail images that provides a small version of a much larger image and which is linked to the large image Download galleries are intended for special types of files or large images Neither of which is intended to be a part of the pages but rather to open in a separate window or application Examples include high resolution images and PDF files Whether they gets downloaded or shown somehow on the web users PC depends on the web users setup HTML galleries provides a convenient method to speed up repetitive task or to enable complex task to be handled This is done by providing the relevant HTML code as an entry ina HTML gallery The user then uses the functionality simply by inserting the code via the gallery i
84. lings function from the context menu In our example you should leave at the default choice Preserve siblings to delete just the selected file Click OK to delete it Since very easy html has been published previously it is now marked for deletion Illustration 50 Looking in the benefits folder you see that the related sibling easy htm1 still exists had you chosen to Delete all siblings in the previous step it too would have been marked for deletion Go ahead and publish the project by clicking on the Publish project button you should still be in the Offline project This will delete very easy htm1 from the Online project and remove the marked entry in the resource list in the Offline project Back Upload e New C Level Up Location El sites default Name Title Type Size Date last modified Date released Date expired 13 benefits Ca benefits Benefits folder 5 25 06 3 31 PM contact html Contact xmipage 125 5 28 06 12 30 PM index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM del Y Y very easy htm Easy xmipsge 25 5420706 t60 PM Illustration 50 An already published resource is marked as deleted when it is being deleted but it is not actually de leted from the public web site Online project until it is published again Once the publishing has been performed you will notice that the sibling marker the small arrow no longer is shown on the document icon for ben
85. ll now rename easy html to very easy html This could have been accomplished at the same time we did the move by entering very easy html in the Move to field rather than the Illustration 34 But then we could not done the next example of course you will normally do the renaming at the same to you do the move if that is what you need to do Go ahead and choose Move rename from the context menu for easy html Enter very easy html in the Move to field and click OK OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 21 Move resource easy html Title Easy State new Move to very easy html Ml Search Cancel Illustration 37 By entering just a name the resource is renamed and stays in the same folder as it did before The resource list now looks like in Illustration 38 Here easy html 1s not shown as deleted strike through This is because it was a new resource that had not been published hence it can be deleted right away after having been copied into the new file Back yA Upload New C Level Up Location ED sites default Name Title Type Date last modified Date released Date expired 3 benefits 3 benefits Benefits folder 5 25 06 3 31 PM El Y Y contact html Contact xmipage 125 5 28 06 12 30 PM E d Y index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM El fol Y very easy html Easy xmlpage 125 5 28 06 10 28 AM
86. lowed by the anchor name see Illustration 87 It 1s strongly recommended to use the Same window target in this case otherwise the user will be confused 1f going to the top also opens a new window Link URL top Target Same window v Cancel Illustration 87 When jumping to another place on the same page the target should always be Same window Email link Another type of link is the mailto link This type of link can be used to put an email address on the page When the users clicks on a mailto link their email program is started The result is the user gets a ready to use compose window where the Mail To field preset with the email address you set on the link This is very convenient for the user as he gets to use the email program with which he 1s familiar as opposed to using specific entry forms on the web page itself Also it is very convenient for you to use mailto links All you haver to do is to type in the email address and the editor will recognize it as being a such and automatically insert the appropriate mailto link Besides this fully automated approach you can make this type of links just as you do for other types of links But rather than enter the normal type of URL you enter a special URL with the email address This way you can set the mailto link on an image or some arbitrary text rather than the email address itself though it is still a good idea to let the user see the email address directly o
87. n the page Illustration 88 shows an example where the email address is info interlet dk The value in Link URL field must start with mailto in order for the address to be recognized as a mailto link The OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 53 actual email address must follow immediately The Target field has no relevance here since clicking on a mailto link always result in a new window the email programs compose window Link URL mailto info codedroids com 103 Target Same window Cancel Illustration 88 The mailto part is what sets this apart from a normal type of link There is a catch though when it comes to email addresses There exists robots programs built to visit and read web pages electronically that collects email addresses from web pages Typically the email addresses collected this way ends up in the hands of spammers Counter measures exists some requires manual intervention by you while others work automatically If this is a concern please make sure that you know what kind of counter measures are in place on your web site before putting email addresses on the pages 3 More editor functions In the following there is a short description of some of the other editor functions you can see in Illustration 63 Note that the specific setup of your system may cause you screen to look a bit different Editor selector You can switch
88. new page and thus shows it in a new browser window you will see that the resulting web page 1s not empty even though we have not entered any text at this point in time The content shown in the web page is generated by the template assigned to the file In the next chapter you will get to edit the content but leave it as it is for now If you do not already have the index html in the root folder then repeat the steps to create it This time do not check the Add to navigation If you open either of the two new pages you will notice that the menu only shows the contact entry since you did not add the front page to the navigation 2 5 New Folder You now have a couple of pages both placed in the root folder It is called the root because it is the starting point on the homepage If nothing special is done in the setup of your site web users that enters your web address in their browser e g www codedroids com will be presented with the index html page in the root folder On your PC you organize your documents in different folders typically categorizing them so it is OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 11 easier to locate the documents when needed You do exactly the same on your homepage Illustration 3 shows an example We will create a new section on homepage describing the benefits of our product and we will do it by creating a new folder This folder will hold all the pages for the
89. ng the publishing process but if you choose to ignore them the online version of the page now includes an image which is only present in the offline version To fix the problem simply publish the image Instead of just publishing the page you could have published the project instead this would have solved the problem since the image would have been published as a part of the project If you want to check the contents of the gallery via the special gallery window you can do so by selecting Open gallery from its context menu in the explorer Back amp gt Upload New Cf Level Up Location dl sites default ere TS SES Date ast modified_ Date released Date expired O benefits benefits Benefits folder 5 25 06 3 31 PM 9 misc Misc demo pictures imagegallery 5 28 06 6 54 PM Lock ontact xmipage 125 5 28 06 12 30 PM Publish directly Welcome to my homepage xmlpage 2587 5 28 06 6 53 PM Open gallery Illustration 99 As an alternative to viewing the files in the gallery view you can show the contents galleries via the gallery window OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Galleries Page 60 Illustration 100 shows how the contents of the gallery is shown in the gallery window When you use the gallery window outside the editor the Insert function 1s disabled since there is no place to insert the images from the gallery lt Misc demo pictures demo mi
90. nto the page editor Table galleries are similar to the HTML galleries except the focus 1s on tabular data such as lists or matrices External links galleries eases the use of links to external sites First of all by providing ease of reuse The user do not have to remember the complete URL for the external page but can rather just pick it from a list of already defined external links Secondly the system works in such a way that even if an external link from the gallery has been used on many pages on your site all of them can be set to point to a different external page simply by changing the URL in the gallery All types of galleries are basically special kinds of folders which can be place anywhere in file system When using galleries from within the editor you will be presented with all the galleries of a given type that you have access to 4 1 Image galleries If you want to put images on your pages the best way to do so is to use an image gallery This way you can simply drag the wanted image from the gallery window into the page The image gallery also has performance benefits For one thing it helps ensure that if you use the same image more than once on your homepage the web users browser will only load it once Also images in galleries are handled specially by the system such that they can be served to the web user in an optimized way New image gallery Since galleries can be placed anywhere you like first go to the folder wh
91. nu texts in the page layout 1s limited and it 1s necessary to take this into consideration Normally the buttons in the navigation is build with text Combined with the capabilities of modern web browsers it is possible to create nice looking buttons directly from navigation text Some layouts do use small images instead of texts such layouts will need an alternate way to determine which images to use for which menu entry But even in this case you should provide the correct navigation text since it still serves as an help for visually impaired web users Finally you should indicate the order in which the entries in the menu should appear Here we will leave Insert after as it is as we currently do not have any other entries to relate it to You should now have a screen looking like Illustration 12 Click Finish Project Offline v Publish project Site sites default View Explorer v Reload Preferences Help Exit Of Back DA Upload New Cf Level Up Location a sites default Name Title Type Size Date last modified Date released El Y Y contact html Contact xmlpage 125 5 25 06 3 20 PM E index html Welcome to my homepage xmlpage 125 5 25 06 2 35 PM Date expired Illustration 13 The new page is now listed in the resource list Y ou are returned to the explorer and you can see the new file contact html If you click on the name of the
92. ny more If you open the context menu on a sibling there is a new item Show siblings this will list all the siblings that share contents with the selected sibling The Location field indicates that your are in a special list mode by writing siblings and then the name of select file this way you know the resource list is not just showing the contents of the current folder Back gt Upload New Gi Level Up Location siblings benefits easy html el sites default Name Title Type Size Date last modified Date released Date expired benefits E amp Y benefits easy html Easy again xmlpage 125 5 28 06 1 00 PM ES Y very easy html Easy xmlpage 125 5 28 06 1 00 PM Illustration 46 Show siblings lists all siblings sharing the contents with the file shown in the Location field The resource list also shows the full path of the siblings in the Name column rather than just the file name This is necessary since the siblings may reside in different folders Click on Back return to the normal resource listing From a technical standpoint siblings in OpenCms are different from say shortcuts on your PC but from a usage perspective they are much alike There is one major difference though Shortcuts on your PC are pointers to the original file which stores the actual content if you delete the original file your shortcuts are basically pointing to nowhere and the contents is lost In OpenCms you may think of s
93. ocuments and Settings Claus Dokumenter poem pdf C unzip file cancel Illustration 55 Usually you use this function to transfer one file at the time By making a ZIP archive you can transfer several files in one operation Name is the name with full path of the file on your local PC Unzip file if you have archived a number of files that should be stored as individual files in the OpenCms file system The archive must be a ZIP file By packing up a number of say images in one ZIP archive you can use this method to transfer them all in one operation OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 29 If Unzip file is enabled OpenCms will unpack the archive before storing it in the currently selected folder in the virtual file system In case the archive includes folders they will be unpacked as well This allows you to transfer an entire folder structure Click the Browse button to open the file selector this is provided by your operating system you should already be familiar with how it works Use it to locate the relevant file click Open to select the file and return to the Upload file dialog In the example we are uploading a PDF file not an archive so leave the Unzip file unchecked Click Continue gt gt to start uploading the file Depending on the size of the file and the network bandwidth this may take from few seconds to minutes If the Unzip file is checked then Open
94. of creating a download gallery is the same as for the image gallery You should choose the extended folder type be Download gallery though see Illustration 94 You can use Open gallery from the context menu for download galleries as well This opens the download gallery window Illustration 101 Date last modified 5 28 06 8 26 PM PDF files demo download vi 2 amp Name Title Size ef css2 pdf Cascading Style Sheets 2 specification 1573 kb 8 poem pdf digt 8 kb Y X Title Cascading Style Sheets 2 specification Q Target a Name css2 pdf Title css2 Illustration 101 The download gallery window will not attempt to show the contents of a selected file as it is not guaranteed to be displayable The download gallery window look like the image gallery window except it does not show the contents of the selected file in the lower part of the window This is because there is no guarantee that the browser can display it Instead it lists the basic information about the selected file When you use the download gallery with the page editor it inserts a link rather than an image The web user then click on that link on the web page to start the download Files in download galleries are handled specially by the system such that they can be served to the web user in an optimized way 4 3 External links galleries External links is defined as links that point to other web sites This can be the front page
95. of the screen holds a number of rows of buttons These represent the various functions available to you Some of the functions are accessible through keyboard short cuts as well LA When you a page it is important to remember that the changes you make remain confined your web mi browser on you local PC until you explicitly saves the content back to the server Use the Save or Save and exit buttons to save your changes the latter exits the editor after saving returning you to the explorer view OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 35 If you PC or web browser crashed the unsaved changes are lost This also happens if you close the window with the editor 1 e by clicking the close button in the window frame The top most row of tools are for functions that work on the entire page file this includes functions to select language and sub element Illustration 63 show an overview over all the functions Note that some of them may not be shown on you screen this depends on the exact set up of your system Editor WYSIWYG Editor M Element English M Text 55 29 8 Editor selector Language sub Ele Cleanup HTML code Preview element ments Properties CE A no la BA SEE ELLELE 9 I I TT Save Undo Search Cut Insert Table Table Link Insert Down HTML Special Help Close amp Exit cell image load gallery
96. on 41 amp 42 This signifies that both files are now siblings and there is no significance to be the first born If you delete one of them the other one will just continue to live on as a normal file even if you delete the one that you may consider to be the original Back Upload New C Level Up Location 4 sites default Meme He Type _ size__Date est modified Date released Date expired 1 3 benefits benefits Benefits folder 5 25 06 3 31 PM contact html Contact xmipage 125 5 28 06 12 30 PM index html Welcome to my homepage xmlpage 125 5 28 06 12 30 PM El e very easy html Easy xmipage 125 5 28 06 10 28 AM Illustration 41 Siblings are marked with a small arrow on the document icon OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 23 e Back Upload Fe New if Level Up Location benefits El sites default Name Title Type Date last modified Date released Date expired gt benefits El Y easy html Easy xmipage 125 5 28 06 10 28 AM E index html Benefits xmipage 125 5 25 06 3 36 PM quick html Quick xmipage 125 5 28 06 10 32 AM E secure html Secure xmlpage 125 5 28 06 10 31 AM Illustration 42 A new sibling is marked as a new file as it has yet to be published from this point of view the sibling is just like a copied file Illustration 43 shows how the navigation looks now There are two Easy entries and the
97. or other types of galleries you can open the gallery window for a gallery folder by selecting the Open gallery function from the context menu The external links gallery window includes a Preview button Clicking on that will open a new ts browser window showing the linked page Useful links demo links vi amp Name frite Lin URL 9 acrobat reader Get the PDF reader http www adobe dk products acrobat readstep2 html 9 codedroids CodeDroids web site http www codedroids com J 2 Title Get the PDF reader a Target A Link URL http www adobe dk products acrobat readstep2 html Name acrobat reader Title Get the PDF reader Date last modified 5 28 06 8 35 PM Illustration 106 Use the preview button to check that the URL is correct 3 6 Links p 47 shows how to use the external links gallery from within the page editor 4 4 HTML galleries HTML galleries are useful for storing various predefined pieces of HTML code Either for complex HTML code that is hard to make in the WYSIWYG editor or small snippets that maybe are fairly simple but still time consuming because they are used again and again OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Galleries Page 64 You create an HTML gallery the same way as an image gallery The type of the extended folder must be HTML gallery see Illustration 94 The types of documents inside the gallery are plain text files
98. or some specific page buried deep down on the other web page Especially in the latter case is it an advantage to use the external links gallery as it 1 Stores the long and complicated URL address once and let the user pick it from the gallery again later on the user do not need to memorize the long URL 2 Makes it easy to fix the situation if it happens that the referenced page is moved on the external web site It is only necessary to fix the address in the links gallery All pages using the link in question will automatically start using the new corrected URL A external links gallery holds entries of the type External Link You may think of these as a shortcut or at least a short name for a possible long URL address to an external web page External links galleries are created in the same as an image gallery except the type of the extended folder must be External links gallery Illustration 94 In the new gallery folder you then create new external links The external links are a type of resource and can be created anywhere but in order for an external link to be considered a part of a link gallery OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Galleries Page 62 1t must be inside one such gallery folder Click on New and choose External link as shown in Illustration 102 Please select the new resource type O G Folder O Extended folder x Structured content O Page Text mis
99. order and the like along with the background color To select the table you can click on the border you will notice that the mouse cursor changes when it is over the border of the table In case the table is defined without any border it can be tricky to select it with the mouse Instead you can place the text cursor in one of the cells and press Shift Tab to select it if you have more than one table you may have to press the key combination repeatedly until the table is selected When the table 1s selected this is indicated by small square handles along the edges of the table note that if the width of the table is 100 you may not be able to the handles along the sides of the table O O Oo 1 row two three Of row two three O 3 row two three O O O Illustration 68 The small square handles indicates that the table is selected You can use the handles shown in Illustration 68 to change the size of the table Note that as soon as you start dragging them the width is set in pixels on the table If it was originally set to a percentage thus relative this will be changed to an absolute size in pixels Table row You can control the appearance of the individual cells or all cells in a row To work with a row place the marker in a cell in the wanted row and then click on Table row This will open a small window where you can specify Height and Width for the row You can control how the content of the cells should be aligned
100. ou have locked then you can work as usually just as if you have locked say a file directly The only difference is that it is not locked directly and hence you cannot unlock it directly In this case you must remove the lock on the folder rather on the individual resources inside the folder 2 4 New page If you start work on a new homepage with OpenCms you may or may not have a index html file in the root folder If you have it your workplace should look something like in Illustration 9 There may also be an index sp page just ignore it for now OpenCms will choose the index html over the index sp if both are present If you do not have the index html already you can create it as an extra exercise by following the same steps as shown below Project Offline v Publish project Site sites default v View Explorer Y Reload Preferences Help 0 Exit Of Back gt Upload New Cy Location d sites default Name Date last modified Date released Date expired at index html Welcome to my homepage xmlpage 125 5 25 06 2 35 PM Illustration 9 The explorer shows that there is only one page on the web site rw Choose the Offline project with the project selector if you are not already in the offline project Next click the New button Please select the new resource type O G Folder O Extended folder x Structured content Page O Text O el External Link
101. pen the front page in your web browser click on index html in the Name column still in the Offline project to see the result of the changes Y interiet Za CR 2 272 e Frontpage Wa e Benefits VV OM to my homepaqa O Easy Work in progress gt Secure prog gt Quick e Contact Demo template Copyright 2005 CodeDroids ApS Illustration 32 All pages now reflect the changes made to the navigation OpenCms handles this automatically Compare the result in Illustration 32 to that of Illustration 26 OpenCms automatically updates the navigation on all pages on the web site Of course the changes are only done to the Offline project looking at the page in the Online project should convince you that this stays unchanged That 1s until you publish the changes 2 8 Move rename resource To move or rename a resource is basically the same thing in OpenCms E g the full path to the Easy page in the benefits folder is benefits easy html Moving it to say the root folder essentially renames it as well as the full path now is easy html But we will keep the distinction by saying we move a file if we move it to a different folder And we rename it 1s the file name is changed whether or not the resulting file is the same or a new folder And if you move it from one folder to another one while renaming it as well you do both a move and a rename Back gt Upload Fe New Level Up Location benefit
102. r confirmation in case that one or more resources belonging to the project are locked If several people are working in the same project it is crucial to be sure that all other have actually finished what they are working on You should therefore unlock the pages when you are done editing them to indicate that you have finished working on them With this in mind you can see why OpenCms prompt for a second confirmation 1f 1t finds that one or more of the resources are still locked In our example we know that 1t is safe to let OpenCms remove the locks and continue publishing so click OK to continue OpenCms now start the publishing process This 1s a very complex process which may include exporting certain resources as well as indexing other resource for the built in search engine Depending on the amount of changes and the server on which OpenCms is running this may take several seconds to finish Your browser view will be refreshed with regular intervals so you can follow the process as it progresses when it is finished the last line in the progress report will read the resources have been published Click OK to return to the explorer view By opening the homepage in the browser in the Offline and Online project you will now see that they are identical Looking in the resource list in the Online project you will see the folder and the new files you created in the Offline project Switching to the Offline project you will see that the various
103. resource types may have a different set of properties OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 15 Change the title and the navigation you can change other properties as well though it is not necessary for our example Click OK to return to the explorer Repeat this exercise by making a new copy named quick htm1 with the title and navigation text set to Quick place it at the last position in the navigation menu The result Let us take a breather and see what we have created so far Apart from the fact that you actually have not entered any content on the pages you have created you have actually created the structure for a homepage You have a front page the index html in the root folder You have another top level page contact html and you also have a new section on the homepage the benefits folder with a number of pages relevant for that section By adding more folders sub folders and pages in the same way you can build even the largest and most complex home pages But if you are working on large site it is a good idea to actually plan ahead Make diagram outlining the homepage in term of the sections and page you want Put yourself in the place of the visitors you want to attract to your homepage What is it they are looking for how do you make it easy for them to find the relevant information and so on Lets look at our example you should have 4 pages in the benefit
104. s Type Date last modified Date released Date expired Easy xmipage 125 5 28 06 10 28 AM Benefits xmipage 125 5 25 06 3 36 PM Quick xmlpage 125 5 28 06 10 32 AM Secure xmlpage 125 5 28 06 10 31 AM Edit page Edit sourcecode Copy Rename Move Delete Illustration 33 To move or rename a resource is basically the same thing in OpenCms As an example go to the benefits folder 1 the explorer choose Move rename from the context menu on the easy html Enter a single slash indicating the root folder in the Move to field and click OK OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 20 Move resource easy html Title Easy State new Move to Search Illustration 34 Enter the path for the folder to which the resource should be moved to or the new name for the resource You can use the Search button to locate the folder If you enter the name of a folder in the Move to field then the resource is moved to that folder but 1t keeps its name If you enter a name of file then the resource is moved to the folder under the new name If you do not enter any path information but just a file name then the resource is renamed Back E Upload 2 New Cf Level Up Location 1 benefits d sites default Ll Lieme n Type _ a Date leet mecified _ Dete releseed _ Date expired benefits a S easy htmt Easy index html Benefits Est 125 peer 3 36
105. s and pages that you have on your homepage There are a couple of other lesser used workplace views Administration and Workflow OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS The Workplace Page 3 Files and folders a familiar approach A homepage is basically a collection of pages which typically is organized into various sections on the homepage A page is represented by a file containing the text for the page The files are organized into folders where a folder typically represents a specific section of the homepage Front page Benefits Representation in the file system Contact e Lu index html Front page benefits Benefits Contact benefits index html Benefits Easy o gt benefits easy html Easy T benefits secure html Secure see a benefits quick html Ouse ke uick gt contact html Contact Illustration 3 A homepage is made up of a hierarchy of files and folders Illustration 3 shows an outline of homepage which in this example consist of 6 individual pages The web user can navigate between the pages by means of the links included in the navigation menus that the pages include The illustration also shows the structure as it looks in the explorer where you can see the files and folders that make up the hierarchy and structure of the homepage The front page
106. s field of your web browser it will actually display the index file inside that folder E g the address URL http www something com benefits will automatically be translated to this URL http www something com benefits index html and the browser then shows that page It is possible and sometimes desirable to have a folder that does not contain an index file But in that case this mechanism will not work so if the user types in the address of a folder without an index file he will get an error message Stating the fact Click on Continue gt gt to go to the Properties dialog see Illustration 15 Properties benefits Property Value Used Title Benefits g Add to navigation Navigation Text Benefits Insert after Contact contact html v AE Illustration 15 If you choose to add the folder to the navigation you also place an index page inside the folder OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 12 The title of a folder is shown in the resource list as for files so giving it a descriptive title is a good idea in any case But in relation to the user web browser and search engines the title of a folder has no significance This is because the web browser does not show the folder rather 1t shows the index page inside the folder so the title of the index page matters Add to navigation works as for files Since we would like to be able to na
107. s folder as shown in Illustration 24 Project Offline v Publish project Site sites default View Explorer v QReload Preferences Help exit Of Back Upload Z gt New G Level Up Location benefits a sites default Name Tile Type Sie Date last modified Date released Date expired D benefits d Y easy html Easy xmlpage 125 5 28 06 10 28 AM SS index html Benefits xmlpage 125 5 25 06 3 36 PM SS Y quick html Quick xmipage 125 5 28 06 10 32 AM SS Y secure html Secure xmlpage 125 5 28 06 10 31 AM Illustration 24 The content of the new folder in the Offline project Click on Level up to go one step up in the folder hierarchy In this case we then return to the top level the root folder indicated by the single slash in the Location field You should have a resource list looking like the one below projet Offline Y Y Publish project Site sites default v View Explorer Q Reload Y Preferences O Help exit Of index html Welcome to my homepage xmlpage 125 5 25 06 2 35 PM Back Upload Fe New C Level Up Location d sites default Name Title Type Size Date last modified Date released Date expired benefits Ga e Y benefits Benefits folder 5 25 06 3 31 PM S Y contact html Contact xmlpage 125 5 25 06 3 20 PM Illustration 25 The index page in root folder is
108. s for this function which one is used depends on your settings in the preferences File names The names you give to files and folders in the virtual file system eventually ends up as a part of the web address URL in the users web browser To avoid problems with differences between various browser and operating systems OpenCms limits the characters allowed in resource names It only allows characters that are safe across browsers and operating systems Following characters are allowed a z A z OpenCms is case sensitive dash and underscore and period Use dash or underscore instead of spaces When it comes to the names on files and folders OpenCms treats uppercase and lowercase as distinct cases e g Frontpage html and frontpage html are different names Despite of this we recommend that you always use lowercase characters for certain resources OpenCms has to rely on the file naming conventions dictated by the server operating system and this may or may not be case sensitive The name you give a file or a folder is mostly read by programs such as your web browser and perhaps search engines In any case try to give a meaningful short name mostly for your own sake as it makes it easier to remember what the file is all about But more important is the title that you can assign to a file This title is more relevant as it is shown in the title of the browser window and is often used by search engines as wel
109. sc 5 D Name Title Size di 4lag_en gif 4lag_en 3 kb di books jpg Books on Programming 8 kb de fjerpen jpg fjerpen 9 kb hus jpg hus 21 kb Y Y x Title Books on Programming a SIT ee NL PHP and M 5 a Web Des eat e Illustration 100 The Insert function is disabled because the image gallery is opened outside the editor apart from that it works like when opened from within the editor You can adjust the size of the split screen by dragging the divider between the upper and the lower part You can add new images to the gallery with Upload new file function The upload function works the same way as if you upload a file in the explorer see 2 12 Upload p 28 If you have a lot of images you find the search function useful Enter a search word and click on the Search button The list of images is now filtered so it shows those images that has the search word in the name or the title To get back to the complete list of image simply clear the search field and click on the Search button This will list the images in the gallery To work with the individual images select one of them from the list You can change the title of the image by typing in the Title field and then clicking on Change value to This will save the change to the file this is equivalent to set the title property on the file in the explorer If you have a number of images in a gallery that need to have the title changed it is e
110. t of items numbered with numbers or letters ordered list Bullet list List of items marked by various bullets unordered list Defined word Word to be defined typically shown in bold Definition The description explanation for the word typically shown with the normal style but indented so it stands to the right of the defined word Note that if you are using a non English version of Windows the styles may be labeled differently in accordance with your language setting But it should be fairly obvious which is which anyway The demo template we use in the examples defines the various styles E g the Heading 1 1s large bold and blue Open the index htm1 page in the root folder by selecting the page editor from the context menu You will then be presented with at blank page Choose Heading 1 from the Style selector Place the text marker in the text area and enter the text for the headline 1 e Welcome You should see that the headline appears in a large bold blue style Are you using a different template the look 1s probably different When you press the Return key a new paragraph will be started and the text you enter uses the Normal style as it is defined in the template Note that pressing Return starts a new paragraph it is not just a line shift Typically styles are such that there is automatically inserted some space between paragraphs to make it easy to read the text If you do not want to start a new paragr
111. ta eu hendrerit aliquet tincidunt in pede Phasellus ligula urna lobortis ac posuere ut laoreet id ipsum Maecenas nec sapien Duis pretium porta risus Nam faucibus urna vel erat Donec feugiat orci in turpis Ut sed purus Nullam eros nulla semper eu iaculis nec nonummy nec odio Fusce tincidunt nibh in mauris f Morbi scelerisque dolor vitae mauris Morbi hendrerit Class aptent taciti sociosqu ad litora torquent per conubia nostra per inceptos hymenaeos Aenean pulvinar ld N ligula ante disnissim ut commodo ac consectetuer a tellus Illustration 72 The selected image is marked by small handles Image inside text flow Another way to place images 1s to place them such that the text flows either to the left or to the right of the image The procedure is much like before only now we place the image inside a paragraph that contains some text M We will start by deleting the image we just put on the page Click on one the paragraph markers for the paragraph holding the image You will notice that image is highlighted instead of being shown as selected by means of the small handles This is because the more than just the image is selected as the paragraph is selected as well Click on the Cut button to delete entire paragraph including the image Use the image gallery to select a new image This time drag the selected image to the first paragraph such that it is placed between the first paragraph marker and the first l
112. tate unchanged Really delete resource Ok Cancel Illustration 47 To be on the safe side OpenCms always prompt you to ac knowledge the operation before deleting a resource If you click OK the resource is either deleted right away or it is marked for deletion If the resource is new it will be deleted right away and it will disappear from the resource listing If the resource has been published and thus is present in the Online project the resource will be marked for deletion This means that it is considered to be deleted in the offline project and no longer is included in the navigation menu if you test the homepage in the offline project However it is still present in the Online project and will stay there until the resource is published which in this case means delete it from the Online project As previous shown in Illustration 35 this is marked by the explorer by striking through the resource name in the list So until you publish the resource you do have a handle in the offline project and you can select it and you can undelete it if you regret the delete operation In relation to siblings there is an extra twist lets try with an example First make sure that everything in the example is published Then select Delete from the context menu for the very easy html file Back gt Upload New Cf Level Up Location A sites default Name Title Type Size Date last modified Date r
113. te sites default w View Explorer v Q Reload Preferences Help 0 exit Of Q Back A Upload gt New C Level Up Location benefits El sites default Name Title Type Date last modified Date released Date expired gt benefits easy html Easy xmlpage 125 5 28 06 10 28 AM index html Benefits xmlpage 125 5 25 06 3 36 PM secure html Easy xmipage 125 5 28 06 10 28 AM Unlock Publish directly Edit controlcode History Illustration 22 You can edit the properties of the files and folders after you have created them Once you click OK you are returned to the explorer As you can see from the illustration the copy has the same title as the one we copied from When you copy a resource the properties on that resource are copied as well Thus the title and navigation text on copy is the same as on the original so we will have to change them Click on the document icon for secure html and choose Properties from the context menu This opens the Properties dialog Here you can alter all the properties for the selected resource Properties secure html Property Value Used Template Demo template v Title Secure Keywords Description Add to navigation Navigation Text Secure Insert after current position secure html v Ok Cancel Advanced Illustration 23 This shows the properties for a page Other
114. text and images onto the pasteboard It can be helpful to use the Toggle details function when copying from a complicated layout This way it easier to make sure that you get the complete paragraph or whatever selected before you copy Cut Copies the selected text and images onto the pasteboard and then removes it from the page You can either paste it back in or use the Undo function if you want to undo the cut Insert Pastes the current contents from the pasteboard into the page The contents of the pasteboard is inserted where the text cursor is placed Download gallery The Download gallery is a gallery similar to the image gallery It is used for the types of files which cannot or should not be embedded in the page E g a PDF file When you use the gallery it will insert the appropriate link on the page so that the web users can click on the link in order to download the document HTML gallery This gallery can be used to hold various useful snippets of HTML When using the gallery it will simply insert the prepared HTML into the page This is both useful for complicated HTML constructions or simple snippets that need to be reused over and over where the few clicks needed to insert it from the gallery make it worth the while Special characters If you need some of the special characters supported by the HTML standard you can use this function to get to them Place the text cursor where you want the character to be
115. that target OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 51 will show in the named window Only one new window is opened unless the user closes it in between then a new one will be opened the next time he click on a link with the named window as a target This is useful for situations where you expect the user to go through several links on the page and do not want to fill the users screen with new windows An example could be links for a list high res images where you name a window something like imageviewer The user then only have two windows open the one with the page and the one showing the images as he click on the links on the page Delete a link Independent on how the link is set on the page this method will remove it again To remove the link from the text you must select the link text in the editor and click on the Link button Clear the Link URL field so it is empty and then click OK The link markup is now removed from the page and the text will appear as normal text If you want to remove both the link and the text in the link then you can simply delete it after selecting it This will remove the link text as well as the link Link to a specific part of a page Hypertext links has a feature that enables then not only to address a given page but also to address a certain place in the page This can be an advantage if you have a very long page with some logical sections you can address
116. tool bar is always visible unless you are inside an editor It holds a number of functions common to all the different workplace views Project Offline v Publish project Site sites default View Explorer v Q Reload Preferences Help 0 exit Illustration 4 The workplace tool bar is visible in all views only exception is when you open an editor OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 5 The Project selector shows the current project You can use 1t to switch between the available projects g Y Publish project is used to publish an entire project 1 e to publish all changes made as a part of the SF project The Site selector allows you to switch between different web sites managed by OpenCms The selector is automatically hidden in case there is only one web site The View selector shows the name of the current view A typical OpenCms installation has three views Explorer Administration and Workflow For the day to day activities you will be using the explorer most of the time so we will concentrate on that in this manual G The Reload button is useful to update the display of the workplace This can be useful if you want to see changes in the file system made by other users In case of network problems or you have been logged in for a very long period of time without actually working with the workplace the currently displayed inform
117. tton Enter the following http www codedroids com as shown in Illustration 81 Because of the URL points to a different web site it is considered an external link Note that the Target is set to New window which means the browser will open the page in a new window Itis often a good idea to open external links into a new window This way when the user is done with the external page and closes the new window he will be back with the page on your web site since this window is still open OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS Editing Page 49 Link URL http www codedroids com Ca Target New window v Cancel Illustration 81 The URL decides whether a link is con sidered to be internal or external This method works but the preferred method is to use the external links gallery for these kind of links The above method has the problem that if you have entered this particular link on a number of your pages and then the URL of the page changes Then you would have to go through all the pages to change the link Had you added the URL to a link gallery and then used the gallery to place the links on the pages then you would only have to change the URL in the link gallery and suddenly all the links in the pages would point to the new URL If you use an external link on many pages this feature can save you a lot of work The external link gallery works much like the imag
118. tton not to be confused with the Insert image button which we will come to later OpenCms now opens the Image gallery window Ifnothing seem to happen it may be because the window is placed behind the main window this may happen with certain browsers if you do not close the gallery window after you have used it Misc demo pictures demo misc g Name di 4lag_en aif 4lag_en 3 kb books jpg Books on Programming 8 kb de fjerpen jpg Quill 9 kb ij hus jpg hus 21 kb Y Y M Title Quil amp gt iS Illustration 71 The image galleries makes it easy to find and use available images The gallery selector at the top of the gallery window allows you to switch between the various galleries you have access to Here we have chosen the gallery we created as the misc gallery folder The list shows the images in the gallery by listing the titles and filenames Click on the wanted image in the list to show it in the lower part of the gallery window y There are two ways to insert the selected image on the page If you use the Insert button then the image is placed where the text cursor is placed in text After image has been inserted the gallery window is automatically closed It is also possible to drag the selected image from the gallery window to the position on the page OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 43 where 1t should appear Image in separ
119. u can use Link button to edit or delete links You have the usual options see Illustration 84 If you edit a link put on the page via the external link gallery you will notice that the URL does not show external web address If you need to edit this address you should do 1t in the link gallery not on the page Other types of links can be edited her For all types you can set the target here Link URL links codedroids C2 Target New window v Illustration 84 External links entered through the link gallery does not show the external address to edit the external address edit in the external link gal lery instead Generally it is useful to set the target to a new window on external links In most cases the New window target should be used This will always open a new window on the users computer when he click the link Here is an explanation of the different target options e Same window the new page is shown in the same window as the link is e New window the linked page opens a new window typically in front of the window that holds the link When the user closes the new window he will be back in the original window showing your site e Top window or rather the out most window This is an option that is useful if you work with the frames an HTML technology that is best not used on regular web pages e Named window This allows you to enter a name e g mywindow and all links with
120. u get an error message when you click Login then there can be several reasons One thing you should check is that the caps lock is off on your keyboard OpenCms uses case sensitive user name and password so you must enter them as given If this does not help then contact the system administrator rather than keeping trying as a security measure OpenCms will temporarily block for a user login 1f numerous attempts 1s made to login as that user OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS The Workplace Page 2 2 The Workplace OpenCms is a very advanced system boasting numerous useful features It is not necessary to know all of them in order to use OpenCms for the daily routines you can explore the more advanced features of OpenCms as the need arises In this chapter you will learn to create new files delete old ones and so forth In this manual we assume that you start out with an empty homepage If you are working on a live homepage already populated with a lot pages you should of course be careful which changes you make Before starting on the editing process we will present you to some of the basic concepts The Homepage and the Workplace On one hand you have the homepage as people will see 1t when they direct their web browser to 1t This will look like any other homepage apart from the look and the contents only you should be able to avoid typical mistakes that you run into on manually maintained homepage 1 e
121. ul when using colors For reason already mentioned cannot be overruled by the global styles and secondly some color combinations can cause trouble for people with certain disabilities Alignment You can left align right align and center text and other elements with the Align left Align right and Center buttons The effect takes place on the paragraph or element in relation to its outer bounds This is typically the page but if you inside a table it would in relation to the table cell Indention As mention earlier you cannot use spaces nor the tab key to make indention Instead use these to functions Indent and Unindent insert and removes space to the left of the selection Lists The buttons Bullet list and Enumeration has the same function as Bullet list and Numbered list in the Style selector Both are used to make lists unordered with bullets or ordered with numbers and letters 3 3 Paste from other programs You can cut from other programs such as you word processor and paste 1t into the page editor OC 6 0 UG EN rev 233 Copyright O 2005 2008 CodeDroids ApS Editing D Page 38 Unfortunately not all programs are well suited for this Some programs incl Microsoft Word does not only copy the text but they include a lot for formatting codes as well This 1s likely to cause problems as the final page will not look the other pages on the site This 1s because the extra formatting codes overrides the global styles set in t
122. vigate to the pages inside the folder section via the navigation menu we need the folder to appear in the navigation Click Add to navigation and enter Benefits in the Navigation Text field and click Finish OpenCms now creates the folder and automatically continues to the Create new page dialog This happens because you checked Create index file in new folder Since OpenCms knows that this page is going to be the index page it as has already set the name to index html as 1n Illustration 16 So you just have to select the appropriate template and click Continue gt gt Create new page Name index html Template Demo template Y Copy body from Default body is Edit properties of the new file Continue gt gt Cancel Illustration 16 Index pages in folders should always be named index html The properties should be set as for the other pages Though Add to navigation must remain unchecked You typically do not want the index page inside a folder to appear in the navigation menu as it is the folder itself that appears in the navigation menu Ultimately it is the layout of your pages that decide which approach 1s the better with the template we use for our examples the index page should not be added to the navigation If you add the index page to the navigation you would get an entry for the folder and one for the index page inside the folder As explained above clicking on the folder entry w
123. xactly what tables were intended for when HTML originally was invented So 1f you have other means maybe some specific examples in the HTML gallery provided in you specific setup then use them instead of tables Create table You create a table with the Table button It will pop up a new window Illustration 66 where you can define the table When you click on OK the table will be inserted at the text cursor in the text Rows 3 Width of the window Y fioo Columns 3 Height Not specified v en Title Alignment Not specified v Padding p Pixel in the cells Border 1 Spacing 1 Pixel between the cells Color y Ok Cancel Illustration 66 You specify among other things the number of rows and columns Rows and Columns This defines the initial number of rows and columns for the table The number of columns times the number of rows defines how many cells the table will have You can later add and delete rows and columns Width and Height Either can be either Not specified which usually translates to 100 but could be set differently OC 6 0 UG EN rev 233 Copyright 2005 2008 CodeDroids ApS Editing Page 39 by the styles in the template 3 of the window or rather of the surrounding element which may be only a sub section of the window Pixel which defines a fixed width Title The title is set in the HTML codes It will not be directly visible but may be of
124. y show the same contents both empty for the moment But they will be in two different places in the hierarchy A interlet ES AE enefits A y O Easy A Work in progress gt Quick e Easy e Contact Demo template Copyright 2005 CodeDroids ApS Illustration 43 The navigation now has entries leading to two pages with the same contents The example would allow you to place the same article in two different places on your homepage If this is a good idea of course depends on your usage If you just need to make a certain page buried deep down in the folder hierarchy more predominantly present by having a link in the top level menu then OpenCms has other means to do that As mentioned earlier another more useful example would be a homepage with multiple language you would then have a top level folder per language and then create siblings for the pages in each of the language folders The important aspect of siblings are that while the content is shared among siblings their properties are not So you can give each sibling its own title navigation text and so forth So the title on the English front page would be Welcome on the German it would be Willkommen and the danish would be Velkommen Here we will change the title and navigation text to prove the point Choose Properties from the context menu on the benefits easy html file Change the Title and Navigation text to Easy again Click OK

OpenCms 6 User's Guide

Contents

Download Pdf Manuals

Related Search

Related Contents