Wcm4

353 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
353
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wcm4

  1. 1. Working with WCM and iParts
  2. 2. Introduction• Web Designer with iFINITY• Background – web and graphics design and CMS implementation• I take Photoshop designs and customise for WCM
  3. 3. Objectives1. 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
  4. 4. The basic framework
  5. 5. The finished site
  6. 6. Objectives1. 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
  7. 7. Getting startedTo create a website it is easiest to copy anexisting sample site, such as Member, and change it to meet your needs
  8. 8. Getting startedTo create a website it is easiest to copy anexisting sample site, such as Member, and change it to meet your needs
  9. 9. Content Management
  10. 10. Sites
  11. 11. Create a new website
  12. 12. Create a new website
  13. 13. Create a new website
  14. 14. Objectives1. 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
  15. 15. Next stepsCustomise• Look and feel• Navigation areas• Content
  16. 16. Look and Feel
  17. 17. Look and Feel
  18. 18. Look and FeelYou can change the look and feel of sites byselecting different combinations of a masterpage and its matching themes
  19. 19. Navigation
  20. 20. Content
  21. 21. Objectives1. 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
  22. 22. CitiesMasterPage/Template to use for the siteslayout• ForestTheme (colors, fonts, etc.)• Aspen• Austin
  23. 23. Planets
  24. 24. Forest
  25. 25. Choosing a themeThe iMIS themes give you a head start ondeveloping your web siteDecide which theme is closest to the final lookand layout that you want
  26. 26. Forest
  27. 27. Objectives1. 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
  28. 28. 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
  29. 29. Photoshop design
  30. 30. Start by changing theme headersHighly visible header elements• Logo• Social networking links• Welcome banner• Favicon• Copyright statement
  31. 31. 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.
  32. 32. 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.
  33. 33. Logo
  34. 34. Logo
  35. 35. Logo
  36. 36. Logo
  37. 37. Logo
  38. 38. Logo
  39. 39. Logo
  40. 40. Logo
  41. 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. 42. Social networking images
  43. 43. Social networking images
  44. 44. Social networking images
  45. 45. 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
  46. 46. Welcome banner
  47. 47. Welcome banner
  48. 48. Welcome banner
  49. 49. Welcome banner
  50. 50. 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
  51. 51. Favicon
  52. 52. Create the favicon
  53. 53. Create the favicon
  54. 54. Copyright StatementFrom NetTemplatesMasterPages, edit yourwebsite’s master page. Scroll to near the bottomof the page to find the copyright statement, andupdate it for your organization.
  55. 55. Copyright Statement
  56. 56. Copyright Statement
  57. 57. Objectives1. Create a new website2. Themes3. Customising a theme4. Logo, banner and icons5. Colour and CSS6. Content – content layout and zone properties
  58. 58. Changing theme coloursThe next step is to change the colours.You make these changes both in CSS and inimages• Sprite colours• CSS colours
  59. 59. 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
  60. 60. Sprite colours
  61. 61. Sprite colours
  62. 62. Sprite colours
  63. 63. Sprite colours
  64. 64. Sprite colours
  65. 65. Sprite colours
  66. 66. Sprite colours
  67. 67. Sprite colours
  68. 68. Sprite colours
  69. 69. CSS colours• Change presentation properties for border, background and color• Adjust positioning• Navigation look and feel
  70. 70. CSS colours• Change font to Arial• Change links to colour blue• Change background to whiteFurther• Change navigation style• Move banner up
  71. 71. CSS colours#MainHtml { background-color: white;}
  72. 72. CSS colours#MainHtml { background-color: white;}body { font-size: 12px;}
  73. 73. CSS colours#MainHtml { background-color: white;}body { font-size: 12px;}a { color: navy;}
  74. 74. CSS colours#MainHtml { background-color: white;}body { font-size: 12px;}a { color: #217AA4;}
  75. 75. CSS colours#MainHtml { background-color: white;}body { font-size: 12px;}a { color: #217AA4;}.TitleBarCaption, .PanelTitle { font-family: "Times New Roman"; color: #217AA4;}
  76. 76. CSS colours
  77. 77. CSS colours
  78. 78. CSS navigation
  79. 79. Objectives1. Create a new website2. Themes3. Customising a theme4. Logo, banner and icons5. Color and CSS6. Content – content layout and zone properties
  80. 80. Changing theme home pagesThe 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. 81. The Content
  82. 82. The Content
  83. 83. The Content
  84. 84. The Content
  85. 85. Remove unwanted content
  86. 86. Remove unwanted content
  87. 87. Remove unwanted content
  88. 88. Remove unwanted content
  89. 89. Change the layout
  90. 90. Change the layout
  91. 91. Change the layout
  92. 92. Change the layout
  93. 93. Change the layout
  94. 94. Add new content
  95. 95. Live
  96. 96. More complex changes• Design your own theme• Hand built pages• Skins (navigation)• Special effects - animate / Fade
  97. 97. ToolsCode• Text editor• Code inspection (Firebug or Chrome)Graphics / color• Photoshop Elements (GIMP free)• Color picker (www.colorzilla.com)• Favicon (www.favicon.co.uk)
  98. 98. Further readingDocs.imis.com• http://docs.imis.com/15.2/#!ipartsites.htmSources for HTML and CSS• w3schools.comSlides• Slideshare.net

×