Download to read offline
Wcm4
- 1. Working with WCM and iParts
- 2. Introduction • Web Designerwith iFINITY • Background – web and graphics design and CMS implementation • I take Photoshop designs and customise for WCM
- 3. Objectives 1. Create a new website 2. How and where to customise a theme 3. Themes 4. Logo, banner and icons 5. Colour and CSS 6. Content – content layout and zone properties
- 4.
- 5.
- 6. Objectives 1. Create a new website 2. How and where to customise a theme 3. Themes 4. Logo, banner and icons 5. Colour and CSS 6. Content – content layout and zone properties
- 7. Getting started To createa website it is easiest to copy an existing sample site, such as Member, and change it to meet your needs
- 8. Getting started To createa website it is easiest to copy an existing sample site, such as Member, and change it to meet your needs
- 9.
- 10.
- 11. Create a newwebsite
- 12. Create a newwebsite
- 13. Create a newwebsite
- 14. Objectives 1. Create a new website 2. How and where to customise a theme 3. Themes 4. Logo, banner and icons 5. Colour and CSS 6. Content – content layout and zone properties
- 15. Next steps Customise • Lookand feel • Navigation areas • Content
- 16.
- 17.
- 18. Look and Feel Youcan change the look and feel of sites by selecting different combinations of a master page and its matching themes
- 19.
- 20.
- 21. Objectives 1. Create a new website 2. How and where to customise a theme 3. Themes 4. Logo, banner and icons 5. Colour and CSS 6. Content – content layout and zone properties
- 22. Cities MasterPage/Template to usefor the site's layout • Forest Theme (colors, fonts, etc.) • Aspen • Austin
- 23.
- 24.
- 25. Choosing a theme TheiMIS themes give you a head start on developing your web site Decide which theme is closest to the final look and layout that you want
- 26.
- 27. Objectives 1. Create a new website 2. How and where to customise a theme 3. Themes 4. Logo, banner and icons 5. Colour and CSS 6. Content – content layout and zone properties
- 28. Photoshop design • Slicethe design • Save images as JPG for photos and complex images • Save images as PNG for icons, buttons and background colors • Optimise images
- 29.
- 30. Start by changingtheme headers Highly visible header elements • Logo • Social networking links • Welcome banner • Favicon • Copyright statement
- 31. Logo • To addyour 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.
- 32. Logo • To addyour own logo, edit this content record, remove the contents, and replace with your own logo • You can change the logo in the CSS.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. 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.
- 42.
- 43.
- 44.
- 45. Welcome banner • Youchange 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
- 46.
- 47.
- 48.
- 49.
- 50. Favicon • The faviconis 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
- 51.
- 52.
- 53.
- 54. Copyright Statement From NetTemplatesMasterPages,edit your website’s master page. Scroll to near the bottom of the page to find the copyright statement, and update it for your organization.
- 55.
- 56.
- 57. Objectives 1. Create a new website 2. Themes 3. Customising a theme 4. Logo, banner and icons 5. Colour and CSS 6. Content – content layout and zone properties
- 58. Changing theme colours Thenext step is to change the colours. You make these changes both in CSS and in images • Sprite colours • CSS colours
- 59. Sprite colours • Asprite is a single image that combines several frequently used images into one image or file. • Few http requests • Page loads faster
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. CSS colours • Changepresentation properties for border, background and color • Adjust positioning • Navigation look and feel
- 70. CSS colours • Changefont to Arial • Change links to colour blue • Change background to white Further • Change navigation style • Move banner up
- 71. CSS colours #MainHtml { background-color: white; }
- 72. CSS colours #MainHtml { background-color: white; } body { font-size: 12px; }
- 73. CSS colours #MainHtml { background-color: white; } body { font-size: 12px; } a { color: navy; }
- 74. CSS colours #MainHtml { background-color: white; } body { font-size: 12px; } a { color: #217AA4; }
- 75. CSS colours #MainHtml { background-color: white; } body { font-size: 12px; } a { color: #217AA4; } .TitleBarCaption, .PanelTitle { font-family: "Times New Roman"; color: #217AA4; }
- 76.
- 77.
- 78.
- 79. Objectives 1. Create a new website 2. Themes 3. Customising a theme 4. Logo, banner and icons 5. Color and CSS 6. Content – content layout and zone properties
- 80. Changing theme homepages 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).
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96. More complex changes • Design your own theme • Hand built pages • Skins (navigation) • Special effects - animate / Fade
- 97. 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)
- 98. Further reading Docs.imis.com • http://docs.imis.com/15.2/#!ipartsites.htm Sourcesfor HTML and CSS • w3schools.com Slides • Slideshare.net