Liferay 5.

2 - Web Content Management Basics
Use Firefox 3 for best results. Do not use older Firefox versions or Internet Explorer 6 as the Liferay system will not work correctly. NOTE: There is no spell checker on the Web site. The Google Toolbar addin for Firefox or Internet Explorer provides a spell checker that you can use while creating your content in the Web portal system. For installation instructions and online help go to http://toolbar.google.com/.

Log into Your Web site
1) Open browser and go to: ______________________________________ 2) Log in with your account setup by ALEC EdMedia. You will log in with either your My.UNL account or your Liferay account. 3) Once logged into Liferay you will see the generic “Signed In” page or your Personal Page. To go to your site‟s homepage… a) Hover the mouse-pointer arrow over the Main Menu bar on the upper right side of your screen to open the drop-down menu. b) Hover the mouse-pointer arrow over the My Sites option to open the pop-out submenu. c) Hover the mouse-pointer arrow over the site name and then click on Public Pages option to go to the editing mode of your Web site (see sample below).

Be sure to preview your Web pages in both Internet Explorer and Firefox browsers. Each can have unique display problems if there is “bad coding” in your content or if an image, table, or other item is too long. The edit view is 99% correct, but it is always best to preview your page in the “public view.” Before the Liferay version of your site goes live, the public view Web address is http://liferaydemo.unl.edu/web/xyz /home (replace xyz with the name of your site) HINT: Use the Firefox browser to edit your site and view the public version in the Internet Explorer browser. When finished editing your Web site, go to the Main Menu and click on Sign Out.

ALEC Educational Media

September 2010

Page 1

Each new sub-level (folder) of page will be shown with a dash. The name may contain a dash to make it look like two words. A Child page is below a parent page. 1) Hover the mouse-pointer arrow over the Main Menu bar. hover over the Page Management option to open the pop-out menu. select the layout style of the page. ONLY select the “4 Columns” if the site is NOT using a “Shared Column. a) Create Parent page or Child page – New Parent page is at the same level as the Home page. such as. And so on.Add a New Page with the Add/Modify Page applet The custom Add/Modify Page applet created by EdMedia is the easiest way to add pages. b) FileName – Use a unique name for each page as this is part of the Web address. c) Page Title – Enter a descriptive title that is used by Web page visitors and search engines. and put empty content holder places on the page while using one dialog box.HINT: You may create a child page under a child page. e) Content Area Layout Type – Select one of 8 layout options. One dash = child page. No dash = top level (Parent). bottled-water. In the drop-down menu. MUST be one word (no spaces) and contain only letters and numbers. 2) Click on the Add / Modify Page option to open the dialog box. It shows in the browser title (blue) bar and is the first item used for ranking by search engines.” ALEC Educational Media September 2010 Page 2 . 3) Complete the 7 required fields. Five options are available with the UNL template. Select the Parent page for a new Child page. NOTE: The UNL template is based on a 4-column layout. This applet allows you to create a page. d) Page Type – Optional – this will most often use the same (default) type as the Home page. Two dashes = 2nd level child page. like folders on your computer.

Write an effective meta description. g) Navigation Title Display Status . The Meta Keywords option is rarely used by search engines. It may help with “click-through” rate. but most likely will not help page ranking. You will use this title to find this page during the editing process. 3) If you don‟t see the title of the page you want to edit. 5) Click on the Add New button to add this page. 1) Hovering the mouse-pointer arrow over the Main Menu bar to open the drop-down menu. this title will also show in the gray menu bar or in a menu in the left shared column. It is ignored by Google. unique for each page. If Display is turned on.f) Navigation Title . 2) Click on the Sitemap menu option to open the window displaying all page Navigation Titles. go to this page by.. start typing it into the Search box. 4) Click on the Title of the page you want to edit and the link will take you to that page.Enter succinct title that will show at the end of the UNL Navigation Breadcrumb bar.The default setting is Hide which means the Navigation Title will NOT be visible in a menu. 6) You will receive a confirmation message at the top of the dialog box. 2-4 words max).. This title may contain multiple words. Select “Display” to make the Navigation Title visible in the top Navigation menu or a left navigation menu (menu items need to be short. If the Navigation Title is not visible in a menu (display status = Hide). ALEC Educational Media September 2010 Page 3 . Click on the red X to close the box.The Meta Description option is often used by search engines as the description shown for your site on the results page. 4) Meta Tags .OPTIONAL .

and links) into the editor content box. NOTE: Once an article is “approved” the Save and Approve button disappears. an Edit Web Content button will be added at the bottom of the Web Content holder (below the text). 3) ADD your content (text. Click on the Save button to save changes for public view.” Content is entered in a Content holder.Add Content to the Page All user-created content (text. Your content will replace the “Select existing…” text line. 4) All other fields are optional and seldom changed. In the Web Content (Journal) Library. One page may contain multiple articles. Click on the Edit Web Content button to return to the editor. you may use this title to search for the article to use this content on another page or to delete the article at a future date. 5) APPROVE content by clicking on the Save and Approve button. images. ALEC Educational Media September 2010 Page 4 to open the Web Content dialog box and editor. Update the article After the first save. Clicking on Save or Save and Continue makes the new content viewable by the public. . Use the Save button to save the article without making it viewable by the public. 1) Click on the Add Web Content button 2) Enter a unique Navigation Title for this article (NOT seen by public viewers). links to downloadable documents. images) exists in “Web Content Articles. NOTE: Use Save and Continue button to save content on server and continue to edit the article. links to other Web pages.

there are two items to always remember. it is highly recommended that you use Dreamweaver. or other source. To stop spell checking. NOTE: There is no spell checker in the editor. The Google Toolbar add-in for Firefox or Internet Explorer provides a spell checker that you can use in this editor. Whether you paste text from Microsoft Word. If you do not save your work and you lose connection to the server. click on the Spell Check button in the Google toolbar. You will use the features in this editor to format your text. To spell check your text. etc. Copying from Dreamweaver: It will work best to copy from Dreamweaver‟s Code view (all codes inside the <body> tags. click on the “stop” button. Always use the buttons and menus inside the application. If you need to put your content inside a complex Table. Lotus Notes email.com/. You can use the Table feature in this editor for creating basic tables. another Web page. header.creates a new paragraph with a blank line between paragraphs Shift+Enter .there is no Tab function. Click on the word and then select the correct option from the pop-up menu. WordPerfect.moves cursor to new line of entry. It is recommended that you complete all formatting changes (bulleted list. The editor content box background will change to blue and misspelled words will be highlighted in red (see image at right). For installation instructions and online help go to http://toolbar.) before adding links. Also. no blank line Space bar . All content on a Web page can be seen by anyone finding this site. Keyboard hints    Enter key . always use the Paste as Plain Text option or you will have problems with the display of your content. use the space bar to indent a line of text REMINDER: You are editing a LIVE Web site. Type your text directly into the editor text box or you can copy-and-paste text from another program. NOT the Web browser buttons or menu items (ex: Back button). ALEC Educational Media September 2010 Page 5 . not including the <body> tags) into this editor‟s Source view.Add text content You are working inside a Web application.google. Save your work often. if you are logged in and do NOT click on a Liferay button or menu item within 30 minutes. your account will be automatically logged out and unsaved content will be lost. your content is lost and you will have to re-enter everything.

Instructions and hints for effectively using the various UNL styles are presented in a separate instruction sheet “Using the UNL WDN Text Styles”. Bullet List. Verdana is the default font of the UNL style sheet. Heading 2 is next in size and so on. The Style feature offers custom styles from the UNL '09 Style Sheet.Text Format options Many of the features (buttons) are the same as in your word processor. All search engines place higher value on text marked as a heading. foreign language characters. Very rarely should you use the Font or Size feature. Use the Insert Special Character button to add copyright symbol. etc. The screen capture image at right shows the black color selected. Use the Horizontal Line feature to add a simple line between different pieces of content. This guide will only explain those features unique to creating a Web page. The box will close and the character is inserted at the cursor position. Heading 1 is the largest heading and should be the first one used on the page. Do NOT use the Size option in place of the Format – Heading option. You can use this in headings on pages meant for youth or for a more informal feel. The default UNL template style settings create a coordinated look. Use the Format feature to properly code headings and subheadings. Use the Blockquote feature to create double-indented paragraph(s). ALEC Educational Media September 2010 Page 6 . Since the UNL default style uses a dark gray text color. Use other colors VERY SPARINGLY as most will not work well with the UNL color styles. The only other font recommended for very limited use is Comic Sans MS. Center Justify. you can use the Text Color feature to use black or a darker grey color to highlight selected text. This helps the reader scan your page and helps with search engine optimization. and other non-keyboard characters. Indent. Use it sparingly. click on the desired character. Bold. special bullet characters. for example. This is a font created for on-screen reading. In the dialog box.

the “Protocol” setting will now show <other> and the URL will show a file name with structure of /web/yoursitename/pagefilename. then the dialog box will show the site structure of folders and files. b) Click on your Web site name in the right pane. Include key search terms in your link text and focus on making your site easy to navigate for both users and search engines. 2) Click the Insert/Edit Link button to open the Link dialog box. ALEC Educational Media September 2010 Page 7 . Phrases such as „click here. 4) Go to the subfolder that contains the page to link to. 4) Click on the OK button to return to the editor content box. a) HINT: To avoid a spelling error. Link text to a new page within your site 1) Select the text the reader will click on (see image above).org/techniques/hypertext/. http://www. Accessibility: “Links should make sense out of context.. 6) In the Link dialog box.‟ „click for details.” (Read Search Engine Watch “SEO Site Structure 101.” (Read WebAIM “Introduction to Links and Hypertext” article for more information.Link text to a Web page on another Web site Link text is important for accessibility issues and search engine optimization.com/3632212.‟ and so on are almost completely meaningless when read out of context.) 1) Select the text the reader will click on. 2) Click the Insert/Edit Link button (see image at right) to open the Link dialog box.‟ „more.webaim. When you paste in a complete Web address. Click on the paper document icon NOT the folder icon.. open the page you want to link to in a separate browser window and copy the Web address. 3) Enter the URL (Web address) in the URL text box. Part 2” article for more information. http://searchenginewatch. Click on the OK button to return to the editor content box.. 3) Click on the Browse Server button (see image above) to open the Resources dialog box.) Search Engine Optimization: “One of the most important aspects of SEO-friendly site design is the structure of your navigation and internal links. a) In the Resource Type menu (upper left) select Page. the http:// portion of the address is automatically eliminated because http:// is already displayed in the Protocol box. 5) Click on the page name to create the link to the page. HINT: Test all links with the Preview feature.

you may want to provide links within the page so that the reader can easily move from the table of contents to a specific article and then move quickly back to the top of the page. You will use the Anchor feature to create these links. Optional. PDF is not a replacement for a regular Web (HTML) page. 3) Click on Document Library to open the dialog box. Click on the Insert/Edit Link button to open the Link dialog box. just like on your local computer (see sample at right). 6) Click on the OK button to return to the editor content box. You may also want to provide the Message Subject for email messages coming from your website. Also. ALEC Educational Media September 2010 Page 8 . Create an email link 1) 2) 3) 4) 5) Select the text (email address) the reader will click on to open the email program. When sharing PowerPoint slide shows or Word documents with others who have no need to edit a file use the PDF version.com/reader/ ] 1) Hover the mouse-pointer arrow over the Main Menu bar to open the dropdown menu. Downloadable files can be NO LARGER THAN 3MB. Excel files (xls) can be used when providing an “executable application” for public download. Link to a downloadable document file You first must upload the document file to the Web server and then link to it from text on the page. You can organize your document files in any number of folders and subfolders.) are put in the Document Library. Please see the instruction sheet “Creating links within the Web page” for more details.adobe.Link to a location within the Web page When you have a long page of content. XLS. like a newsletter issue. etc. All downloadable files (PDF. 24 pages). Change the Link Type to E-Mail. be sure to tell the reader it is a PDF file and give the file size (example: PDF 556 KB. [ link to http://get. provide a link on the page for users to go to the Adobe site to download the free Adobe Reader. PDF is the Web standard file format for sharing print-oriented documents. When you link to the PDF file. Advantages are that PDF files are smaller than the native file and there is no problem with people using different versions of MS Office programs. 2) Move the mouse-pointer arrow over the Libraries option to open the pop-out submenu. Enter the E-Mail Address.

6) Click on the file name of the document to link to it and return to the Link dialog box.. 1) Click on the Folder title (see sample above) to open the folder. 5) Click on the folder name to return to the Folder view OR click on the Return to the Full Page link in the upper right corner of the dialog box to return to the Web page. To add a file within a folder. NOTE: The breadcrumb trail links in the upper left portion of the dialog box can be used to navigate from one folder to another in the Document Library. 4) Click on the site name in the right pane to go to the documents folder(s). 3) Click on the Select File(s) link to open the File Upload dialog box. HINT: You may select more files from another location by clicking on the Select File(s) link again. 4) Click on Upload Files to place the document file(s) on the Liferay server. you will see the message “All uploads complete.. To add a folder. The file names will now display in the Add File Entry dialog box.Files must be put into a folder. Do NOT change this address. 1) Click on the Add Folder button to change to the Add Folder view. click on the folder title to open that folder and follow the same steps as above. 4) Ignore the Permissions setting. 2) Click on the Add Document button to change to the Add File Entry view. ALEC Educational Media September 2010 Page 9 . Select the document file(s) on your local computer and click on the Open button.Add a brief Description of contents. 7) Click on the OK button to return to the editor content box. You will see the unique URL for this file on the Liferay server. Document is the default Resource Type. 3) Click on the Browse Server button (see image page 7) to open the Resources dialog box. 5) Open the subfolder containing the document. 2) Click on the Insert/Edit Link button to open the Link dialog box.” All document files are now on the Liferay server and ready to be linked to.. To Add Subfolder.. This description will display under the folder name in the main Document Library view. To link to a downloadable document file… 1) Select the text the reader will click on to open the file. NOTE: The folder title is NOT visible to the public. 3) OPTIONAL . The new folder is now visible in the main dialog box view. 5) Click on the Save button. After the upload is finished. 2) Enter the Navigation Title for this folder.

a) Alternative Text: Enter a succinct description of the image in the field. You will see the unique URL for this file on the Liferay server. 1) Hover the mouse-pointer arrow over the Main Menu bar to open the drop-down menu. You can organize your image files in any number of folders and subfolders.Stylesheet Classes: Enter the word frame in this text box to add the UNL gray border around the image. b) Align: Select Left to place image on left side of text wrapped around the image. 3) Click on the Web site name in the right pane to go to the images folder(s). To insert an image… 1) Click in the content area where you want the image to reside. 7) Click on the OK button to add the image to the article and return to the editor content box. png) are put in the Image Library. c) Optional . gif. Images can be NO LARGER THAN 300KB. ALEC Educational Media September 2010 Page 10 .Insert an image You first must upload the image file to the Web server and then place it on the page.edu/documentation) for step-by-step instruction sheets that you can download. Select Right to place image on the right side of the text. All image files (jpg. NOTE: The Left and Right options also include the proper spacing code to provide white space between the image and text. 5) Click on the file name of the image you want to insert. The Image Properties dialog box will return. Uploading image files into the Image Library works the same as uploading files into the Document library.Advanced tab . Images MUST be properly sized (resized/cropped/adjusted in an image editing application) before being uploaded onto the Liferay server and used on a Web page. 4) Open folder or subfolder containing the image file. Use the default setting of None for an image that is above text. 2) Click on the Browse Server button to open the Image Resource dialog box (see sample of resource dialog box on page 7). just like in the Document Library (see page 8 for sample image). Please see page 9 for the instructions “To add a folder” and “To add a file within a folder”.unl. This is a required field and MUST be completed to be compliant with UNL standards and 508 Compliance regulations for visually impaired readers. Please see the Liferay Documentation page (http://liferay. 6) Change 3 property settings for correct display of your image. Multimedia files must be uploaded to a separate media server. Please see the “Multimedia Options” guide for instructions on linking to YouTube videos. then click on the Insert/Edit Image button to open the Image Properties dialog box (see sample image in Step 6). 3) Click on Image Library to open the Image Gallery dialog box. Do NOT change this address. ALEC EdMedia supports two image editing applications: Adobe Photoshop & IrfanView. 2) Move the mouse-pointer arrow over the Libraries option to open the pop-out submenu.

2) Click on Add Page Content (Application List) to open the Add Application dialog box. you must first add the content holder. b) Drag the outlined box to the location you want it in. the grayed-out empty holder is being moved below the existing article. a) Move the mouse-pointer arrow over the Web Content (Journal) Content title until it turns into 4headed arrow. ALEC Educational Media September 2010 Page 11 . This only removes the content from the reader‟s view. 7) You can move any Web Content holder to another location on the page. 5) Click on red X to close Add Application dialog box. the new Web Content (Journal) article holder will be placed at the top of the page. 6) By default. Empty holders do NOT create blank space on the page.Add Web Content (Journal) article holder to a page When you need to add separate content and do not have an empty content holder. You will see the contents of other articles shift. The content still exists within the Liferay content management system in your website‟s searchable Web Content (Journal) article Library. Remove Content from a Page with the Close option To remove a specific piece of content from a page click on the Close menu option located just above the article. 4) Click on the Add link for Web Content (Journal) to add an article holder to the page. In the sample image below. Click and hold the left mouse button. 3) Click on Authoring. 1) Hover the mouse-pointer arrow over the Main Menu bar to open the drop-down menu. Release the mouse button to place the empty holder in the new location. HINT: You may add more than one at a time.

ALEC Educational Media September 2010 Page 12 . In the drop-down menu. 2) Click on the “Modify Page” Content Layout option to open the Layout dialog box. hover over the Page Management option to open the pop-out menu. 4) Click on the Go button to go to Edit form for that page (see image on page 13). ONLY select the “4 Columns” if the site is NOT using a “Shared Column. NOTE: The UNL template is based on a 4-column layout. Update the text. 3) At the bottom of the dialog box under Select Existing Sub-Page to Edit Settings. hover over the Page Management option to open the pop-out menu. 2) Click on the Add / Modify Page option to open the dialog box.” 4) Click on the Save button to return to the page. 5) The Page Title text box will show the current title text. In the drop-down menu. 7) Close the dialog box by clicking on the red X in the upper right corner. You will most likely need to move the content pieces into the correct locations. See instructions on page 11. Change the Page Title using the Add/Modify Page feature The Page Title (appears in the browser‟s program title bar) is the first piece of content used by search engines to determine ranking. 1) Hover the mouse-pointer arrow over the Main Menu bar. 6) Click on the Save button. 1) Hover the mouse-pointer arrow over the Main Menu bar. You need to make it very descriptive and unique for each page.Modify the Layout on the Page You can change the arrangement of the content in columns on the page with the Modify Page Layout feature. click on the Select drop-down arrow and select the Title of the page you want to edit (see image at right). 3) Click on the radio button of the name of the layout you want to use. You will receive a confirmation message in the dialog box.

when you delete a page. 5) You will receive a confirmation message in the dialog box and can now close the dialog box by clicking on the red X in the upper right corner. the page filename is still in the system so you cannot use that filename again. 3) Confirm that this is the page you want to delete and click on the Delete button (see image at right). WARNING: Deleting a page that has child pages under it will also delete all child pages under this page! Content will not be lost as all Web Content (Journal) articles are still accessible in the Web Content (Journal) articles Library. Also. When you want to delete a page. ALEC Educational Media September 2010 Page 13 . you must first delete the link to that page. 1) At the bottom of the Add / Modify Page dialog box. 4) You will receive a warning message.Delete a Page using the Add/Modify Page feature REMEMBER: You are editing a LIVE Web site. click OK to complete deleting the page (and its child pages). 2) Click on the Go button to go to Edit form. This will prevent the reader from clicking on a “dead link” that returns an error message. click on the Select drop-down arrow and select the Title of the page you want to delete (see image page 12).

Sign up to vote on this title
UsefulNot useful