wcm4
DESCRIPTION
TRANSCRIPT
Working with WCM and iParts
Introduction
• Web Designer with iFINITY• Background – web and graphics design and
CMS implementation• I take Photoshop designs and customise for
WCM
Objectives
1. Create a new website2. How and where to customise a theme3. Themes4. Logo, banner and icons5. Colour and CSS6. Content – content layout and zone properties
The basic framework
The finished site
Objectives
1. Create a new website2. How and where to customise a theme3. Themes4. Logo, banner and icons5. Colour and CSS6. Content – content layout and zone properties
Getting started
To create a website it is easiest to copy anexisting sample site, such as Member, and
change it to meet your needs
Getting started
To create a website it is easiest to copy anexisting sample site, such as Member, and
change it to meet your needs
Content Management
Sites
Create a new website
Create a new website
Create a new website
Objectives
1. Create a new website2. How and where to customise a theme3. Themes4. Logo, banner and icons5. Colour and CSS6. Content – content layout and zone properties
Next steps
Customise
• Look and feel• Navigation areas• Content
Look and Feel
Look and Feel
Look and Feel
You can change the look and feel of sites byselecting different combinations of a masterpage and its matching themes
Navigation
Content
Objectives
1. Create a new website2. How and where to customise a theme3. Themes4. Logo, banner and icons5. Colour and CSS6. Content – content layout and zone properties
Cities
MasterPage/Template to use for the site'slayout• Forest
Theme (colors, fonts, etc.)• Aspen• Austin
Planets
Forest
Choosing a theme
The iMIS themes give you a head start ondeveloping your web site
Decide which theme is closest to the final lookand layout that you want
Forest
Objectives
1. Create a new website2. How and where to customise a theme3. Themes4. Logo, banner and icons5. Colour and CSS6. Content – content layout and zone properties
Photoshop design
• Slice the design• Save images as JPG for photos and complex
images• Save images as PNG for icons, buttons and
background colors• Optimise images
Photoshop design
Start by changing theme headersHighly visible header elements
• Logo• Social networking links• Welcome banner• Favicon• Copyright statement
Logo• To add your own logo, edit this content record,
remove the contents in the HTML iPart, and replace with your own logo
• You can change the logo in the CSS.
Logo• To add your own logo, edit this content record,
remove the contents, and replace with your own logo
• You can change the logo in the CSS.
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Social networking images
• The social networking icons in the top (auxiliary) navigation are also defined in a content record
• To change, edit the content record and change the links on the icons.
Social networking images
Social networking images
Social networking images
Welcome banner
• You change the home page banner by editing the reference in the CSS.
• And change the background image to your banner
• Or you can simply swap the existing background image for the new image
Welcome banner
Welcome banner
Welcome banner
Welcome banner
Favicon
• The favicon is the little icon that displays next to the website in your bookmarks
• create an icon sized either 32x32 or 64x64 pixels and name it Favicon.ico
• Then overwrite the original file
Favicon
Create the favicon
Create the favicon
Copyright Statement
From Net\Templates\MasterPages, edit yourwebsite’s master page. Scroll to near the bottomof the page to find the copyright statement, andupdate it for your organization.
Copyright Statement
Copyright Statement
Objectives
1. Create a new website2. Themes3. Customising a theme4. Logo, banner and icons5. Colour and CSS6. Content – content layout and zone properties
Changing theme colours
The next step is to change the colours.
You make these changes both in CSS and inimages
• Sprite colours• CSS colours
Sprite colours
• A sprite is a single image that combines several frequently used images into one image or file.
• Few http requests• Page loads faster
Sprite colours
Sprite colours
Sprite colours
Sprite colours
Sprite colours
Sprite colours
Sprite colours
Sprite colours
Sprite colours
CSS colours
• Change presentation properties for border, background and color
• Adjust positioning• Navigation look and feel
CSS colours
• Change font to Arial• Change links to colour blue• Change background to white
Further• Change navigation style• Move banner up
CSS colours
#MainHtml {background-color: white;
}
CSS colours
#MainHtml {background-color: white;
}body {font-size: 12px;
}
CSS colours
#MainHtml {background-color: white;
}body {font-size: 12px;
}a {color: navy;
}
CSS colours
#MainHtml {background-color: white;
}body {font-size: 12px;
}a {color: #217AA4;
}
CSS colours#MainHtml {
background-color: white;}body {
font-size: 12px;}a {
color: #217AA4;}.TitleBarCaption, .PanelTitle {
font-family: "Times New Roman";color: #217AA4;
}
CSS colours
CSS colours
CSS navigation
Objectives
1. Create a new website2. Themes3. Customising a theme4. Logo, banner and icons5. Color and CSS6. Content – content layout and zone properties
Changing theme home pages
The Member site uses a pair of home pages • One that appears to guests (unauthenticated
view) and • Another that appears to those who have signed
in (authenticated view). • You can change one or both of them, or drop
one entirely (have one home page appear to all).
The Content
The Content
The Content
The Content
Remove unwanted content
Remove unwanted content
Remove unwanted content
Remove unwanted content
Change the layout
Change the layout
Change the layout
Change the layout
Change the layout
Add new content
Live
More complex changes
• Design your own theme• Hand built pages• Skins (navigation)• Special effects - animate / Fade
Tools
Code• Text editor • Code inspection (Firebug or Chrome)Graphics / color• Photoshop Elements (GIMP free)• Color picker (www.colorzilla.com)• Favicon (www.favicon.co.uk)
Further reading
Docs.imis.com• http://docs.imis.com/15.2/#!ipartsites.htmSources for HTML and CSS• w3schools.comSlides• Slideshare.net