WCMS Responsive Design Template Upgrade Training
|
|
- Poppy Barbara Mason
- 5 years ago
- Views:
Transcription
1 WCMS Responsive Design Template Upgrade Training The purpose of this training session is to provide training to site owners, who are upgrading their WCMS content to the new Responsive Design (RD) template. In this workshop, you will create, edit, and publish Responsive Design content items for a new site. The following exercises will walk you through the process of upgrading content to the 3.0 template, and selecting options to make content responsive. Upon completion of this workshop, you will have a better understanding of managing the new template options. Agenda 1. New SSI Naming 2. Managing the new Responsive Design SSIs o localrdcontact o localrdsearch o localrdsitesettings o localrdbodybottom o localrdbodytop 3. Un-supported content types and templates o Flash o Feature Flash o Flash Video 4. Preview content using Viewports (4,3,2,1) 5. Creating new RD Content Types and Templates o RD Image - Upload 4 images o YouTube and Audio Players o Nav Buttons 6. New RD Templates for Existing Content Types o Image Photo Box o Icon Link Snippets o New Module Templates & Name Changes 7. Page Row Templates o Ad Hoc o Other template changes 8. Display breadcrumbs on Homepage o Set options: showbreadcrumbs 9. Adding content to feature area on homepages 10. Adding Icons to pages 11. Large Images on Small Viewports 12. Large Table Viewer 13. Show/Hide Content in different Viewports (4,3,2,1): o Modules o Nav Buttons o Gadgets: Carousel, Flexslider, Social Media, Tab/Accordion 14. Setting grid columns for RD elements o Modules o Nav Buttons o Gadgets: Carousel, Flexslider, Social Media, Tab/Accordion 15. Flex Slider Changes 16. Image as Link 17. Top of Page Link 1
2 Lab 1. New SSI Naming All SSIs have been renamed for the responsive design template. The names are similar to the old names, but include globalrd or localrd, at the beginning of the name. Lab 2. Managing the new Responsive Design SSIs localrdsitesettings localrdcontact localrdsearch localrdbodybottom localrdbodytop Site Settings Changing your site s color theme is much easier in the RD template. You also control the template version for your site, and enable 508 controls for local search using this SSI. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Site Settings] 2. Enter localrdsitesettings in the System Title field. 3. On the Common tab, select the desired options for: Theme, Template Version, Enable Local Search. 4. On the Developer tab, select additional options as shown in screenshot below: OPTION Include CDC in Breadcrumb Catch Javascript Errors Hide To Top Icon (ms) Enable External Links Enable File Icons Simulate Mobile 5. Click Insert, then Close. DESCRIPTION Does "CDC" appear as the first item in the bread crumb bar? Should we capture all JS errors Should the current page appear in the bread crumb bar? How long to wait before hiding the To Top button in 1 column in milliseconds Globally disable external link icons Globally disable file icons 6. Preview a content page in [YOUR training site] folder to verify the theme is picked up and the 3.0 templates are used. 2
3 *** Note: Site settings are cached for approximately 5 minutes so you may not see changes to this SSI immediately on preview or publish, if you ve recently previewed or published the same page (within 5 minutes). localrdcontact The localrdcontact SSI allows you to customize local contact information in the global footer. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Contact Us Local] 2. Enter localrdcontact in the System Title field. 3. Input desired contact information in each field you wish to customize. 4. Click Insert, and then Close. Search The localrdsearch SSI allows you to display local search options on your site. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Search] 2. Enter localrdsearch in the System Title field. 3. Input values in the following fields: 1. Local Search Label (label that users will see displayed on your site, i.e. Topic Only) and 2. Local Search Value mmwr (contact dnemsupport@cdc.gov to request local search be set up for your site and to get your key to identify your site; mmwr is just an example for training and should not be used on your site, unless you manage the mmwr site). 4. Click Insert, and then Close
4 5. Preview a content page in the [YOUR training site] folder to verify that you see the local search checkbox and label beside the search form localrdbodybottom All customized javascript that was previously added to the localadditionalheadincludes SSI will need to be moved to the localrdbodybottom SSI because all template package javascript is now in the bottom of the body of the page. This new SSI is just after the template package javascript on the page. 1. Right-click on [YOUR training site / ~inc~] folder and select New Item > Developer Toolbox > Server Side Include [Raw HTML] 2. Enter localrdbodybottom in the System Title field. 3. Click Insert. 4. Click Edit All. The Related Content window opens. 5. Select Upper SSI Slot and browse to the.js content item //Sites/CDC/migration/training/rwd/alertme.js. 6. Click Close on all open windows. 7. Preview a content page in the [YOUR training site] folder to verify the js is picked up (you should see a js alert). localrdbodytop Any third-party javascript or other content that needs to be the first item, within the body tag, can be added using the localrdbodytop SSI. 1. In your site s top level ~inc~ folder create a new Server Side Include [Raw HTML] content item. 2. Enter localrdbodytop in the System Title field. 3. Input code in the SSI Code field. You can also use the Upper SSI Slot to add a javascript content item similar to how this was done for the localrdbodybottom SSI. 4. Click Insert, and then Close. 4
5 Lab 3. Un-supported Content Types and Templates o Flash o Feature Flash o Flash Video Lab 4. Preview Content Using Viewports (4,3,2,1) With the recent Percussion upgrades, for Responsive Design, you can preview your pages using the different Viewports (column views): (4 desktop), (3 large tablet), (2 small tablet), and (1 mobile device). Steps 1. Right-click on a homepage or content page content item and select Preview-> Viewport (4,3,2,1). The browser window will automatically resize for the selected Viewport. Lab 5. Creating new RD Content Types o RD Image o YouTube and Audio Players o Nav Buttons Responsive Design Image The Responsive Image content type is used for the large feature image. It allows for 4 different images to be uploaded: one for each viewport size. The 4 size is required; all others are optional. Any missing images will defer to the next largest available image. For example, if you upload 4 and 2 viewport images, the 3 viewport will use the 4 viewport image, and the 1 viewport will use the 2 viewport image. Images for training can be found at: \\apd-v-oadcwcm1\share\bwk8\rwd_training\responsive_images or downloaded from (resize browser to get all 4 images, right click, and save image) Steps Adding images 1. Browse to [YOUR training site ->images] folder. 2. Right-click on the folder and select New Item > Responsive Image. 3. A new window opens for you to upload 4 images and enter data within several fields. 4. Input data in the required blank fields (all fields with an asterisk*) and any optional fields. 5. Click the Browse button next to the mandatory Image field. 6. Browse your computer and select an image you saved to your computer. Click Open to select the image. 7. Click Insert (or Update) to add your image to the CMS. The image height and width will automatically be added upon upload, as will the image file name and mime type. 5
6 8. Repeat steps 5 7, for each image. 9. Once complete right click on the responsive image content item you just created and select Preview Viewport [4 or 3 or 2 or 1] > Snp Responsive Image (3.0). Try each of the 4 viewports to see the different images (The sample images 4 and 3 are identical, but 2 and 1 are different colors/text) YouTube The new video content type allows you to easily add video content to your pages. To do this, you will need the video ID/key from YouTube. For this exercise you can use n8g24t6cmi8 Steps 1. Right-click on [YOUR training site] folder and select New Item > Multimedia > You Tube Video (The Content Properties window opens). 2. On the Common tab, enter data in required fields: System Title, Video ID. 3. Click Insert, and then Close. 4. Right click on your new You Tube Video content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp YouTube Video iframe (3.0) to preview the video. Audio Player A new responsive audio content type is now available. The old audio content type will be deprecated. The responsive audio content type eliminates the need to upload audio files. Instead, a fullpath url is necessary for linking to an audio file. Steps 1. Right-click on [YOUR training site] folder and select New Item > Multimedia > Responsive Audio (The Content Properties window opens). 2. On the Common tab, enter data in required field: System Title. 3. Click Insert, but don t close window. 4. Click Add new item (A new window opens). 5. Enter Link Name (Mime Type of audio link. Ex: mp3, ogg, wma etc.) and Link (Full path of Audio link). For this exercise you can use the following data: 6
7 Link Name (mime type) mp3 ogg wma Path Click Return to Parent (top left), and then Update and Close. 7. Right click on your new Responsive Audio content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Responsive Audio (3.0) to preview the audio player. Navigation Buttons A new nav button content type is available, for easily creating navigation buttons. Steps 1. Right-click on [YOUR training site] folder and select New Item > Navigation Buttons (The Content Properties window opens). 2. On the Common tab, enter data in required field: System Title. 3. On the Developer tab select 8 for the field: Grid Columns. This controls the width of each column of nav buttons. Also select 2 for the field: Columns. This is used by the multi-column navigation button snippet templates to display 2 or 3 columns. 4. Click Insert, but don t close window. 5. Click Edit All (The Related Content window opens). 6. Add content to the Navigation Button Links slots. Items added to this slot will have their title, description, related image, and related icon used in the display of the navigation button. For this exercise please add the four CDC Non-Migrated Link content items found at //Sites/CDC/migration/training/rwd (Nav Button Item 1,2,3, and 4) using the Snp Navigation Button Link Icon (3.0) template. 7. Click Update to save your changes. 8. Right click on the newly created Navigation Button content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Nav Button Standard (3.0) to preview with a single column. 9. Right click on the newly created Navigation Button content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Nav Button Standard Multi Col (3.0) to preview with 2 columns. 7
8 10. You can override the title, description, related icon, or related image of an item added to the Navigation Button Links slot by adding entries to the List Item Overrides field. Click Add New Item below the List Item Overrides field table. Set the Item Number field to be 1 to override the first navigation button, enter some new text for the Title Override field and click Insert to add the override row. Click Return to Parent (top left) to return to the Navigation Button edit form. 11. Right click on the newly created Navigation Button content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Nav Button Standard Multi Col (3.0) to preview and you should see your overridden title for the first item. 12. You can override any related images of items you added to the Navigation Button Links slot by adding images to the Image Overrides slot. You can do this on your own. 13. Click Close on all open windows. Lab 6. New RD Templates for Existing Content Types Several new templates are available, to provide more options for content display: o Image Photo Box o Icon Link Snippets o New Module Templates & Name Changes Lab 7. Page Row Templates o Ad Hoc o Other template changes With the new css using a 24 column grid, the page row templates are no longer using percentages for column widths. The percentages that each template indicates are just approximations. A new Ad Hoc page row template has been added that allows you to specify the exact size for each column in the page row content item. 1. Browse to and copy the page row content item: //Sites/CDC/migration/training/rwd/Training Page Row and paste as a new copy somewhere in your site. 2. Right click on your new copy of the page row and select Edit. 3. On the Developer tab set the value of each (1-4) Column [X] Grid Columns fields to 4. Click Update to save your changes. 4. Right click on the page row and select Preview Viewport 4 > Row Ad-Hoc (3.0) to preview and you should see 4 columns of modules. You can edit the page row grid columns fields to adjust each column width. For pages with nav the total should be 19, for pages without nav the total should be 24. Lab 8. Display Breadcrumbs on Homepage The RD template gives you the option to display breadcrumbs on a homepage. 1. Edit a Homepage content item. The Content Properties window opens. 2. On the Additional tab, check the Yes checkbox, to Show Breadcrumb. 3. Click Update, and then Close. 8
9 Lab 9. Adding Content to Feature Area on Homepage A variety of content: module (WYSIWYG), flex slider, image, or responsive image can be added to the new homepage feature slot, which allows content to display in the homepage feature area. 1. Edit an existing home page content item. 2. Click Edit All (The Related Content window opens). 3. Browse to and add the responsive image content item from lab 5 to the Homepage Feature slot. 4. Click Close on all open windows. 5. Right click on the homepage content item and select Preview Viewport 4 > Page > Page Home Page No Left Nav and you should see a preview of your page with the feature banner. Lab 10. Adding Icons to Pages In the new RD template, icons can be associated with a content, homepage, or link content item. When linking to a page, an icon can be chosen, by selecting one of the icon snippet templates. Icons can also be added to the body field, from the Ephox menu. To associate an icon to a content or homepage: 1. Edit an existing content or home page content item. 2. On the Additional tab, select an icon from the Related Icon drop-down. 3. Click Update to save your changes and Close. 4. Right click on the item you just edited and select Preview Viewport 4 > Snippet > Snp Title Link Icon (3.0) to preview. To use an icon when linking to a page: 1. Edit an existing content or home page content item. 2. In the Body field, place the cursor in desired location, to insert link. 3. Click the Insert Rhythmyx Template button (The Content Browser window opens). 4. Browse to and select a content or homepage (The Select Template window opens). 5. Select the desired icon snippet template. 9
10 To add an icon to a page within Ephox: 1. Edit an existing content or home page content item. 2. In the Body field, place the cursor in desired location, to add icon. 3. From the Ephox Insert menu, select Insert Icon. Lab 11. Large Images on Small Viewports The Large Image Viewer option can be enabled, for large images on small viewports, to prevent users from excessive scrolling. The option will iconify the large image, allowing the user to click for a larger view. 1. Create or Edit an existing image content item. 2. On the Additional tab, check the Large Image Viewer Enable checkbox. Lab 12. Large Table Viewer A similar concept as the large image viewer, the large table viewer can be enabled to iconify large tables. Enabling this option prevents users from excessive scrolling, when viewing large tables. See large table viewer on this example page: 1. Edit an existing content or home page, where the table is located 2. In Code view, add the opt-in class to the table tag: <table class= opt-in Adding the above class will iconify the table when viewed on smaller viewports, as show in screenshot below: 10
11 Additional classes: table table-bordered can be added to get a bordered table, as shown on the example page. Lab 13. Show/Hide Content in Different Viewports (4,3,2,1) The RD 3.0 template allows you to show/hide content within different viewports. For example, you may opt to hide a specific module, for a mobile browser, but show for the desktop. 1. Edit an existing module or gadget content item. 2. On the Developer tab, check each Viewport (4,3,2,1) to show/hide content. ***Note: The first module in the page row you copied is set up to be hidden in the 1 Viewport. Preview the page row in the Viewport 1 and you should not see the first module. Lab 14. Setting Grid Columns for RD Elements The 3.0 Template release uses a new template grid to support the various Page Types. This new template grid is based on Twitter Bootstrap, which is widely used across public-facing sites. Twitter Bootstrap is a free collection of tools for creating websites and web applications. 1. Browse to and copy the Module content item //Sites/CDC/migration/training/rwd/Grid Columns Test Module and paste as a new copy somewhere in your site. 2. On the Developer tab, select the desired grid column number. 3. NOTE: The number you select will determine how the content displays on the page. Click Update to save your changes. 4. Right click on your copy of the module and select Preview Viewport 4 > [Any Snippet Template] to preview the module with your desired width. You can go back to the editor form and change the width, and then refresh the preview to see new widths. **Note: You only need to set this for modules that you are adding directly to the Ephox body field. If you use the page grid to build your pages the page row templates will define the spans so this field can be ignored. Lab 15. Flex Slider Changes The 3.0 Template no longer use an external XML file to drive the content in the flex slider. Similar to how the carousel works now, a slot is used to add images to the flex slider. The image metadata will be used for the title and caption, but both of those can be overridden in the flex slider content item. 11
12 1. Right-click on [YOUR training site] folder and select New Item > Gadgets > Flex Slider (The Content Properties window opens). 2. Enter a system title and title 3. Click Insert, but don t close window. 4. Click Edit All (The Related Content window opens). 5. Add images to the Slider / Player Image Slot. You can find images for this at //Sites/CDC/migration/training/rwd/images (flex slider image 01-04). 6. Close all pop-up windows. 7. Right click on the newly created Flex Slider content item and select Preview Viewport [4 or 3 or 2 or 1] > Snp Flex Slider to preview. Lab 16. Image as Link In the 3.0 templates there is now a slot for images called Image Links which will wrap the img element with a link to the item in the slot. Lab 17. Top of Page Link You can now add a top of page link using a menu item in ephox if you are using the 3.0 page templates. To do this edit the page, and in the ephox editor select the Insert menu, then Insert Top of Page Link. 12
Create the Left Navigation SSI Quick Guide
Create the Left Navigation SSI Quick Guide The WCMS system gives you the flexibility to assemble lists of existing content items manually to create the Left Navigation. The Server Side Include [WYSIWYG]
More informationJSN EasySlider Configuration Manual
JSN EasySlider Configuration Manual Introduction Product Overview JSN EasySlider JSN EasySlider is the cutting-edge way to present content on website: Informative - Impressive - Interactive. It helps you
More informationJoomla! extension JSN EasySlider User Manual
Joomla! extension JSN EasySlider User Manual (for JSN EasySlider 2.0.x) www.facebook.com/joomlashine www.twitter.com/joomlashine www.youtube.com/joomlashine This documentation is release under Creative
More informationJSN Sun Framework User's Guide
JSN Sun Framework User's Guide Getting Started Layout Overview & Key concepts To start with layout configuration, Go to Extension Template JSN_template_default The first tab you see will be the Layout
More informationIntroduction. The topics included in this guide are:
Introduction Caorda Content is a powerful content management tool that allows you to update your web site through a standard Internet web browser. The purpose of this guide is to introduce you to Caorda
More informationNETZONE CMS User Guide Copyright Tomahawk
NETZONE CMS User Guide Copyright 2015. Tomahawk 1 Phone: + 64 9 522 2333 Email: getintouch@tomahawk.co.nz Tomahawk 2015 www.tomahawk.co.nz 2 NETZONE CMS USER GUIDE WHAT YOU LL FIND INSIDE LOGGING IN 4
More informationGetting Started Quick Start Guide
Getting Started Quick Start Guide This guide provides tips for users new to using the Learning Environment. It discusses how to navigate the main areas and how to change your personal preferences and settings.
More informationUTAS CMS. Easy Edit Suite Workshop V3 UNIVERSITY OF TASMANIA. Web Services Service Delivery & Support
Web Services Service Delivery & Support UNIVERSITY OF TASMANIA UTAS CMS Easy Edit Suite Workshop V3 Web Service, Service Delivery & Support UWCMS Easy Edit Suite Workshop: v3 Contents What is Easy Edit
More informationGENERAL TEMPLATE AREAS
1 GENERAL TEMPLATE AREAS SIU Headers SIU Headers are created and edited through the main administration of the CMS. Users do not have access edit SIU headers. Logo and Identifier Logo or the College Identifier
More informationCascade V8.4 Website Content Management for the Site Manager UMSL
Cascade V8.4 Website Content Management for the Site Manager UMSL Contents Purpose & How to Use This Guide... 5 Getting Started and Logging In... 5 Login... 5 Dashboard... 5 Notifications... 5 Setting
More informationNVU Web Authoring System
NVU Web Authoring System http://www.nvu.com/index.php Table of Contents Using Nvu as Your Web Page Authoring System: Getting Started Opening a page, saving, and previewing your work...3 Formatting the
More informationFlexslider v1.x Installation and User Manual
2017/11/08 09:14 1/15 Flexslider v1.x Installation and User Manual Flexslider v1.x Installation and User Manual Latest version: 1.10.0 Compatibility: Magento 1.7.x, 1.8.x, 1.9.x Disclaimer This is the
More informationWolf. Responsive Website Designer. Mac Edition User Guide
Wolf Responsive Website Designer Mac Edition User Guide Version 2.10.3 Table of Contents What is Wolf Website Designer? Editor overview Save and open website Create responsive layout How to create responsive
More informationWeb Page Basics. FRSD Elementary Technology Workshop. February Presented by Lisa Stewart, Tammy Gianvito, and Diane Kaufmann
Web Page Basics FRSD Elementary Technology Workshop February 2014 Presented by Lisa Stewart, Tammy Gianvito, and Diane Kaufmann Please save this booklet for future reference. 2 P a g e Notes and Questions
More informationWebsites. Version 1.7
Websites Version 1.7 Last edited 15 Contents MyNetball Information...3 Websites...4 Web packages...4 Setting up the layout...5 Uploading files and images...6 Using Dropbox to Increase your Website Data...7
More informationSacred Heart Nativity
August 2016 Sacred Heart Nativity http://www.shnativity.org Credentials Wordpress Admin Login URL: http://www.shnativity.org/wp-login.php login = sarriola@shnativity.org pw = sent via system email Login
More informationContent Elements. Contents. Row
Content Elements Created by Raitis S, last modified on Feb 09, 2016 This is a list of 40+ available content elements that can be placed on the working canvas or inside of the columns. Think of them as
More informationCreating Content in a Course Area
Creating Content in a Course Area After creating a course area, such as a Content Area, Learning Module, Lesson Plan, or folder, you create content in it by pointing to its Action Bar to reveal menus for
More informationIntegrating Facebook. Contents
Integrating Facebook Grow your audience by making it easy for your readers to like, share or send pages from YourWebShop to their friends on Facebook. Contents Like Button 2 Share Button.. 6 Send Button.
More informationHow to deploy for multiple screens
How to deploy for multiple screens Ethan Marcotte, a developer in Boston, coined the phrase responsive design to describe a website that adapts to the size of the viewer s screen. A demonstration site
More informationHow to use WordPress to create a website STEP-BY-STEP INSTRUCTIONS
How to use WordPress to create a website STEP-BY-STEP INSTRUCTIONS STEP 1:Preparing your WordPress site Go to the Dashboard for your new site Select Appearance > Themes. Make sure you have Activated the
More informationCentricity 2.0 Section Editor Help Card
Centricity 2.0 Section Editor Help Card Accessing Section Workspace In order to edit your section, you must first be assigned Section Editor privileges. This is done by the Director of your Site, Subsite,
More informationEktron Advanced. Learning Objectives. Getting Started
Ektron Advanced 1 Learning Objectives This workshop introduces you beyond the basics of Ektron, the USF web content management system that is being used to modify department web pages. This workshop focuses
More informationFaculty Web Site with WCM
Faculty Web Site with WCM WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 FACULTY WEB SITE WITH WCM... 2 Introduction 2 Getting Started 3 Understanding the Template 4 The WCM Layout
More informationThe Photo Gallery. Adding a Photo Gallery Page. Adding a Photo Gallery App
Adding a Photo Gallery Page The Photo Gallery Above the Summary tab, in the list of Current Pages, click on the New Page button. Choose Photo Gallery from the Available Page Types. Give the page a name.
More informationResponsive Web Design (RWD)
Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed
More informationCheckbox 5 - Style Guide
Checkbox 5 - Style Guide Survey Styles are style templates that can be applied to surveys and reports. This guide will show you how to create a new Survey Style and apply it (and other appearance configurations)
More informationThis Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Just so you know: Things You Can t Do with Word... 1 Get Organized... 1 Create the
More informationCreating a Website with Wordpress
Creating a Website with Wordpress Wordpress Fundamentals Version 1.6 Fayette County Public Schools June 28, 2013 Sow-Foong Hedman Technology Web Team Contents What is Wordpress?... 4 Overview... 4 Key
More informationJSN PageBuilder 3 Configuration Manual Introduction
JSN PageBuilder 3 Configuration Manual Introduction About JSN PageBuilder 3 JSN PageBuilder 3 is the latest innovation of Joomla! PageBuilder with great improvements in the interface, features, and user
More informationWPI Project Center WordPress Manual For Editors
WPI Project Center WordPress Manual For Editors April 17, 2015 Table of Contents Who should use this manual... 3 Signing into WordPress... 3 The WordPress Dashboard and Left-Hand Navigation Menu... 4 Adding
More informationCreating Buttons and Pop-up Menus
Using Fireworks CHAPTER 12 Creating Buttons and Pop-up Menus 12 In Macromedia Fireworks 8 you can create a variety of JavaScript buttons and CSS or JavaScript pop-up menus, even if you know nothing about
More informationTable Basics. The structure of an table
TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that
More informationExperience SAP HANA Cloud Portal. Use SAP HANA Cloud Portal to Create Engaging Websites in 5 Simple Steps
Experience SAP HANA Cloud Portal Use SAP HANA Cloud Portal to Create Engaging Websites in 5 Simple Steps TABLE OF CONTENTS TUTORIAL AGENDA... 3 PREREQUISITES... 3 EXERCISE 1: CREATE AND CONFIGURE A NEW
More informationE-Business Systems 1 INTE2047 Lab Exercises. Lab 5 Valid HTML, Home Page & Editor Tables
Lab 5 Valid HTML, Home Page & Editor Tables Navigation Topics Covered Server Side Includes (SSI) PHP Scripts menu.php.htaccess assessment.html labtasks.html Software Used: HTML Editor Background Reading:
More informationGeneral Training Curriculum
General Training Curriculum Table of Contents 1.0 Getting Started 1.1 What is MODX? 1.2 Browser Support 1.3 How Do I Log In? 2.0 MODX Dashboard 2.1 What is a Dashboard? 2.2 Global Top Menu Bar 2.2.0 MODX
More informationAdobe Experience Manager (AEM) Author Training
Adobe Experience Manager (AEM) Author Training McGladrey.com 11/6/2014 Foster, Ken Table of Contents AEM Training Agenda... 3 Overview... 4 Author and Publish Instances for AEM... 4 QA and Production Websites...
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationRoxen Content Provider
Roxen Content Provider Generation 3 Templates Purpose This workbook is designed to provide a training and reference tool for placing University of Alaska information on the World Wide Web (WWW) using the
More informationOU EDUCATE TRAINING MANUAL
OU EDUCATE TRAINING MANUAL OmniUpdate Web Content Management System El Camino College Staff Development 310-660-3868 Course Topics: Section 1: OU Educate Overview and Login Section 2: The OmniUpdate Interface
More informationDreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets
Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually
More informationDrupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme
Introduction Drupal Cloud Getting Started Guide Creating a Lab site with the MIT DLC Theme In this Getting Started Guide, you can follow along as a website is built using the MIT DLC Theme. Whether you
More informationInsert/Edit Image. Overview
Overview The tool is available on the default toolbar for the WYSIWYG Editor. The Images Gadget may also be used to drop an image on a page and will automatically spawn the Insert/Edit Image modal. Classic
More informationLEVEL 1 Site Administrator Grants permissions and manages access, manages main homepage.
USING JOOMLA LEVEL 2 (TRAINING) OVERVIEW This document is designed to provide guidance and training for incorporating your department s content into to the Joomla Content Management System (CMS). Each
More informationBindTuning Installations Instructions, Setup Guide. Invent Setup Guide
BindTuning Installations Instructions, Setup Guide Invent Setup Guide This documentation was developed by, and is property of Bind Lda, Portugal. As with any software product that constantly evolves, our
More informationPROFILE DESIGN TUTORIAL KIT
PROFILE DESIGN TUTORIAL KIT NEW PROFILE With the help of feedback from our users and designers worldwide, we ve given our profiles a new look and feel. The new profile is designed to enhance yet simplify
More informationIEEE Wordpress Theme Documentation
IEEE Wordpress Theme Documentation Version 1.0.2 2014-05- 16 Table of Contents TABLE OF CONTENTS 2 INITIAL SETUP 3 FRONT PAGE 3 POSTS PAGE 4 CONTACT 5 SITE MAP 6 MENU 7 HOME PAGE 8 PAGE TEMPLATES 10 LEFT
More informationLearning Adobe DreamWeaver CC. Module 1 Contents. Chapter 1: Introduction to DreamWeaver CC
Module 1 Contents Chapter 1: Introduction to DreamWeaver CC Design Considerations...1-1 Types of Graphics...1-2 Backgrounds and Text...1-2 Planning the Navigation...1-2 The DreamWeaver Screen...1-3 Workspaces...
More informationContact at Once Widget..5. Contact Us Widget...5 Contact Info Widget. 6 Dealership Contacts Widget. 6
Table of Contents Flexible Design Overview. 3 Selecting the Flex Design. 3 Widget Overview. 4 Configuring Widgets..5 Contact at Once Widget..5 Contact Us Widget...5 Contact Info Widget. 6 Dealership Contacts
More informationWordPress Manual For Massachusetts Academy of Math and Science
WordPress Manual For Massachusetts Academy of Math and Science September 19, 2017 Table of Contents Who should use this manual... 4 Signing into WordPress... 4 The WordPress Dashboard and Left-Hand Navigation
More informationRC Justified Gallery User guide for version 3.2.X. Last modified: 06/09/2016
RC Justified Gallery User guide for version 3.2.X. Last modified: 06/09/2016 This document may not be reproduced or redistributed without the permission of the copyright holder. It may not be posted on
More informationA Guide to Using WordPress + RAVEN5. v 1.4 Updated May 25, 2018
+ v 1.4 Updated May 25, 2018 Table of Contents 1. Introduction...................................................................................3 2. Logging In.....................................................................................4
More informationWorking with Confluence Pages
Working with Confluence Pages Contents Creating Content... 3 Creating a Page... 3 The Add Page Link... 3 Clicking on an Undefined Link... 4 Putting Content on the Page... 4 Wiki Markup... 4 Rich Text Editor...
More informationFlexslider v2.x Installation and User Manual
2018/05/16 02:56 1/18 Latest version: 2.2.6 Compatibility: Magento 2.1.x, 2.2.x Disclaimer This is the installation and user manual for the Magento Flexslider v1.x extension created by Solide Webservices.
More informationVEGA Version /27/2017
Version 2.2.1 01/27/2017 Vega Pro Check out the pro version at https://www.lyrathemes.com/vega-pro INSTALLING WORDPRESS INSTALLING THE THEME Using the Administration Panel Using cpanel Manually Using FTP
More informationWebsite Management with the CMS
Website Management with the CMS In Class Step-by-Step Guidebook Updated 12/22/2010 Quick Reference Links CMS Login http://staging.montgomerycollege.edu/cmslogin.aspx Sample Department Site URLs (staging
More informationThis Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step.
This Tutorial is for Word 2007 but 2003 instructions are included in [brackets] after of each step. Table of Contents Get Organized... 1 Create the Home Page... 1 Save the Home Page as a Word Document...
More informationLearn how to login to Sitefinity and what possible errors you can get if you do not have proper permissions.
USER GUIDE This guide is intended for users of all levels of expertise. The guide describes in detail Sitefinity user interface - from logging to completing a project. Use it to learn how to create pages
More informationBeginner Workshop Activity Guide 2012 User Conference
Beginner Workshop Activity Guide 2012 User Conference TUESDAY, MARCH 6 2:00PM 5:00 PM Beginner Training Workshop Attendees will learn the end user functions of OU Campus TM. They will learn how to log
More informationMaking a wiki is as easy as making a peanut butter sandwich!
Social Media Workshop: On Safari with Digital Natives LARC, 2009 PBworks Wiki Making a wiki is as easy as making a peanut butter sandwich! http://demo395.pbworks.com This is the URL for the wiki we will
More informationCreateASite Beginner s Guide
Contents Getting Started... 3 Access the CreateASite Control Panel... 3 Select a Category/Subcategory... 4 Select a Template... 6 Change the Site Template... 10 Change Colours... 12 Change Fonts... 13
More informationby D2L CONTENT DISCUSSIONS STUDENT CHANGES August, 2015 New Name, Same System!
by D2L August, 2015 = New Name, Same System! CONTENT Update Description Visual Reference Add video and audio directly to the Content module. Drag-n-drop content now lets you choose where to store the background
More informationCQ Campaigns Top-10 components
CQ Campaigns Top-10 components Femke van Dongen, Bram van Bergen, Angela Heemskerk, Enes Kirimi Digital Services CQ 5.6 December 5 th 2016 Top-10 components Link to: Component Library Component code abbreviations
More informationHow to set up a local root folder and site structure
Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where
More informationMonarch Services Website Quick Guide
January 2016 Monarch Services Website Quick Guide www.monarchscc.org Credentials Wordpress Login URL: http://www.monarchscc.org/wp-login Login name :Nancya Password: wcs9na! Hosting Login at dreamhost.com
More informationRocket Theme. User Guide
Rocket Theme User Guide This user guide explains all main features and tricks of multifunctional Rocket WordPress Theme. This information will make your work with the theme even easier and more effective.
More informationCustom Contact Forms Magento 2 Extension
Custom Contact Forms Magento 2 Extension User Manual This is the user manual of Magento 2 Custom Contact Forms v100.0.0 and was last updated on 29-06-2017. To see what this extension can do, go to the
More informationCreating Effective School and PTA Websites. Sam Farnsworth Utah PTA Technology Specialist
Creating Effective School and PTA Websites Sam Farnsworth Utah PTA Technology Specialist sam@utahpta.org Creating Effective School and PTA Websites Prerequisites: (as listed in class description) HTML
More informationFile: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013
File: SiteExecutive 2013 Core Modules User Guide.docx Printed September 30, 2013 Page i Contact: Systems Alliance, Inc. Executive Plaza III 11350 McCormick Road, Suite 1203 Hunt Valley, Maryland 21031
More informationeportfolio GENERAL USER
eportfolio GENERAL USER Startup Guide [2016-17] Table of Contents Page 2: Introduction Logging in to your Digication account Page 3: Page 4: Steps to create an eportfolio from course template Steps to
More informationUser Guide. Chapter 6. Teacher Pages
User Guide Chapter 6 s Table of Contents Introduction... 5 Tips for s... 6 Pitfalls... 7 Key Information... 8 I. How to add a... 8 II. How to Edit... 10 SharpSchool s WYSIWYG Editor... 11 Publish a...
More informationSCHULICH MEDICINE & DENTISTRY Website Updates August 30, Administrative Web Editor Guide v6
SCHULICH MEDICINE & DENTISTRY Website Updates August 30, 2012 Administrative Web Editor Guide v6 Table of Contents Chapter 1 Web Anatomy... 1 1.1 What You Need To Know First... 1 1.2 Anatomy of a Home
More informationDOCUMENTATION. Lotos WordPress Theme
DOCUMENTATION Lotos WordPress Theme Lotos Simple & Elegant Blog Theme Lotos is a versatile and powerful multipurpose WordPress blog theme perfect for any personal blog. Lotos makes customizing your blog
More informationACADEMIC TECHNOLOGY SUPPORT Advanced OU Campus: 2014 Template Asset Image Gallery using Photoshop
ACADEMIC TECHNOLOGY SUPPORT Advanced OU Campus: 2014 Template Asset Image Gallery using Photoshop ats@etsu.edu 439-8611 ATS Website Table of Contents: Select a Gallery Type... 1 Select and Resize Images...
More informationSite Owners: Cascade Basics. May 2017
Site Owners: Cascade Basics May 2017 Page 2 Logging In & Your Site Logging In Open a browser and enter the following URL (or click this link): http://mordac.itcs.northwestern.edu/ OR http://www.northwestern.edu/cms/
More informationLogin: Quick Guide for Qualtrics May 2018 Training:
Qualtrics Basics Creating a New Qualtrics Account Note: Anyone with a Purdue career account can create a Qualtrics account. 1. In a Web browser, navigate to purdue.qualtrics.com. 2. Enter your Purdue Career
More informationThe Gardens Trust WordPress Manual. thegardenstrust.org. Page: 1
The Gardens Trust WordPress Manual thegardenstrust.org Page: 1 Login Before you can make any changes to the site, you will need to log in. The login of the site is found at the following URL - http://thegardenstrust.org/wp-admin.
More informationUsing Sitecore 5.3.1
Using Sitecore 5.3.1 An End-User s Guide to Using and Administrating Sitecore Author: Sitecore Corporation Date: December 12, 2007 Release: Rev. 1.0 Language: English Sitecore is a registered trademark.
More informationMadCap Software. Movies Guide. Flare 2017 r2
MadCap Software Movies Guide Flare 2017 r2 Copyright 2017 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document
More informationOU Mashup V2. Display Page
OU Mashup V2 OU Mashup v2 is the new iteration of OU Mashup. All instances of OU Mashup implemented in 2018 and onwards are v2. Its main advantages include: The ability to add multiple accounts per social
More information08/10/2018. Istanbul Now Platform User Interface
08/10/2018 Contents Contents...5 UI16... 9 Comparison of UI16 and UI15 styles... 11 Activate UI16... 15 Switch between UI16 and UI15...15 UI16 application navigator... 16 System settings for the user
More informationTo upgrade to ifeature Pro visit:
1 ifeature Free Documentation for ifeature v1.0.7 (last updated 4/26/2011) TABLE OF CONTENTS: Topic Page(s) Installing ifeature 2 Templates and Widgets 3 imenu 4 ifeature Settings 5 General Settings 6
More informationCreators Basic Guide to Using UICapture (Mac)
Creators Basic Guide to Using UICapture (Mac) Download the software from http://helpdesk.its.uiowa.edu/software/signin.htm After downloading the software and setting up an account with your local IT support,
More informationUpload. OU Campus v10. OmniUpdate, Inc Flynn Road, Suite 100 Camarillo, CA 93012
Upload v10 OmniUpdate, Inc. 1320 Flynn Road, Suite 100 Camarillo, CA 93012 OmniUpdate, Inc. 1320 Flynn Road, Suite 100 Camarillo, CA 93012 800.362.2605 805.484.9428 (fax) www.omniupdate.com Copyright 2014
More informationHow to Create a Google Sites Website
How to Create a Google Sites Website * Google Sites must be built and maintained in either Google Chrome or Firefox. Google Sites is not supported by Internet Explorer. Let s get started! Go to google.com
More informationUser s Manual. Beacon Technologies, Inc. 164-B Thatcher Rd. Greensboro, NC beacontechnologies.com
Beacon Technologies, Inc. 164-B Thatcher Rd. Greensboro, NC 27409 User s Manual beacontechnologies.com Grossmont-Cuyamaca Community College District Version 1.4 January 26, 2015 Table of Contents 1. THE
More informationEnterprise Portal Train the Trainer User Manual WEB PARTS
Enterprise Portal Train the Trainer User Manual WEB PARTS Version 1.2.1 Date: January 31, 2012 Table of Contents Table of Contents... 2 1 I Need To... 3 2 Media Web Part... 10 3 Content Editor... 15 4
More informationEnd User Guide Faculty Folders
End User Guide Faculty Folders Hannon Hill Corporation for California State Polytechnic University, Pomona Hannon Hill Corporation 3423 Piedmont Road, Suite 520 Atlanta, GA 30305 www.hannonhill.com 678.904.6900
More informationWeb Community Manager 2.18 Release Notes
New or Changed Functionality or User Experience Update to Google Custom Search In order to support updates from Google regarding Site Search, clients who have not previously entered a Google Account ID
More informationUSER GUIDE AND THEME SETUP
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free ask any questions on the online Support Forum, located at: http://themewich.com/forum.
More information[PACKT] HTML5, CSS3, and jquery. Dreamweaver CS5.5 Mobile. and Web Development with
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jquery Harness the cutting edge features of Dreamweaver for mobile and web development David Karl ins [PACKT] PUBLISHING BIRMINGHAM -
More informationDreamweaver Basics Outline
Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working
More informationKinetika. Help Guide
Kinetika Help Guide 1 Hope you enjoy Kinetika theme! 3 Table of Contents Important Links 6 Theme Options - Setting Up Logo 26 Cover Photos 44 Applying Revolution Slider Slides 71 Important Notes 7 Logo
More informationJSN Dona 2 Portfolio Configuration Manual
JSN Dona 2 Portfolio Configuration Manual Getting Started The Sun Framework is automatically installed when you install JSN Shine or any JSN Template Gen.2 templates. In case manual installation is needed,
More informationCWU Content Management System (CMS) User Guide
CWU Content Management System (CMS) User Guide Last Revision: January, 2018 Version: 1.8 CWU Content management System (CMS) User Guide 2 Table of Contents NOTE: Copyright Guidelines... 4 What is a content
More informationThis type of content can be added to any content area (such as Subject Materials) or a Learning Module.
1 Overview A variety of content can be added to your subject site including: Item: Create and style your own text or HTML content File: Add a document (e.g. Word, PDF, ZIP) for students to download Audio:
More informationResponsive Designer (RED) QuickStart Guide
Responsive Email Designer (RED) QuickStart Guide Net Atlantic s Responsive Email Designer makes it easy to create responsive HTML emails that display perfectly, no matter which device they re viewed on.
More informationAGENT123. Full Q&A and Tutorials Table of Contents. Website IDX Agent Gallery Step-by-Step Tutorials
AGENT123 Full Q&A and Tutorials Table of Contents Website IDX Agent Gallery Step-by-Step Tutorials WEBSITE General 1. How do I log into my website? 2. How do I change the Meta Tags on my website? 3. How
More informationCOMSC-031 Web Site Development- Part 2. Part-Time Instructor: Joenil Mistal
COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal Chapter 9 9 Creating Pages with Frames You can divide the display area of a Web browser into multiple panes by creating frames.
More informationReggieNet: Content Organization Workshop. Facilitators: Mayuko Nakamura (mnakamu), Charles Bristow (cebrist) & Linda Summers (lsummer)
ReggieNet: Content Organization Workshop Facilitators: Mayuko Nakamura (mnakamu), Charles Bristow (cebrist) & Linda Summers (lsummer) Content Organization Overview There are many ways to organize content
More information