Fms Web Cms Training


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Fms Web Cms Training

  1. 1. WEB DESIGN FOR FMS FMS Web site Training using Content Management System (CMS) Ahsan Uddin Shan School of Film & Media Studies
  2. 2. Objectives <ul><li>Dosto, you will learn how to put Fireworks to work </li></ul><ul><li>Optimization using Fireworks </li></ul><ul><li>Introduction to CMS </li></ul><ul><li>Demonstration and Hands-on CMS </li></ul><ul><li>Creating, updating and editing Staff Directory </li></ul><ul><li>Bonding  </li></ul>
  3. 3. Understanding Fireworks <ul><li>Fireworks is a graphics program for the Web </li></ul><ul><li>What can you do in Fireworks? </li></ul><ul><li>Fireworks files are called documents </li></ul><ul><li>Fireworks files are saved as PNG files </li></ul><ul><ul><li>Portable Network Graphics </li></ul></ul><ul><ul><li>have .png extension </li></ul></ul>
  4. 4. Where is my Fireworks (its not Firefox lah!!) <ul><li>Click Click your hard disk (I rename my hard disk to shan) </li></ul><ul><li>Switch to applications </li></ul><ul><li>Click Click Adobe Fireworks CS3 </li></ul>
  5. 5. Adobe Creative Suite <ul><li> </li></ul>
  6. 6. Getting to know the Fireworks workspace: Creating a new document <ul><li>Open Fireworks </li></ul>
  7. 7. Creating a new document
  8. 8. Fireworks Window Canvas Tools Menu bar Panels Properties
  9. 9. Fireworks Tabs <ul><li>The document window has four tabs </li></ul><ul><ul><li>Original </li></ul></ul><ul><ul><li>Preview </li></ul></ul><ul><ul><li>2-Up </li></ul></ul><ul><ul><li>4-Up </li></ul></ul><ul><li>2-Up and 4-Up are used to evaluate different optimization settings side by side </li></ul>
  10. 10. Property inspector <ul><li>The Property inspector is a panel that displays current selection properties, current tool options, or document properties. </li></ul>
  11. 11. Tools <ul><li>The Tools panel is used to for variety of job </li></ul><ul><li>It is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View. </li></ul>
  12. 12. Practice Tools: Selection Tools/Objects <ul><li>Using the selection and transformation tools, you can move, copy, delete, rotate, scale, or skew objects. In documents that have multiple objects </li></ul>
  13. 13. Practice Tools: Selection Tools/Objects <ul><li>You can organize the objects by stacking, grouping, and aligning them. Using Marquee tools </li></ul><ul><li>You can click an object in the Layers panel to it select when the panel is open and layers are expanded. </li></ul>
  14. 14. Practice Tools: Selecting pixels <ul><li>You can edit pixels over an entire canvas or choose one of the selection tools to constrain your editing to a particular area of an image: </li></ul><ul><li>The Marquee tool selects a rectangular area of pixels in an image. </li></ul><ul><li>The Oval Marquee tool selects an elliptical area of pixels in an image. </li></ul>
  15. 15. Practice Tools: Selecting pixels <ul><li>The Lasso tool selects a freeform area of pixels in an image. </li></ul><ul><li>The Polygon Lasso tool selects a straight-edged freeform area of pixels in an image. </li></ul><ul><li>The Magic Wand tool selects an area of similarly colored pixels in an image. </li></ul>
  16. 16. Working with Text <ul><li>Text can be created and modified in Fireworks </li></ul><ul><li>Text properties include font, size, color,style, kerning, leading, alignment, text flow, offset, and anti-aliasing </li></ul>
  17. 17. Working with Text <ul><li>Many text features typically reserved for sophisticated desktop publishing applications. </li></ul><ul><li>Font, Sizes and adjust kerning, spacing, color, leading, and more. </li></ul><ul><li>Apply Live Effects such as drop shadows and bevels--means you can easily make changes to text. </li></ul>
  18. 18. Attaching Text to a Path <ul><li>Text can be attached to a path to create an interesting design </li></ul><ul><ul><li>Create a text line or block </li></ul></ul><ul><ul><li>Create a path using vector Path tool </li></ul></ul><ul><ul><li>Use Attach to Path command on Text menu </li></ul></ul>
  19. 19. Basic Optimization <ul><li>Optimization is the process of preparing graphics for the web. </li></ul><ul><li>A 10MB image file can be optimized to 30 KB- an ideal size for web. </li></ul><ul><li>Optimized graphics load faster and consistent across the browser. With Fireworks, it is much easier to optimize graphics </li></ul>
  20. 20. Optimizing Images in Fireworks <ul><li>Why </li></ul><ul><ul><li>to reduce the amount of time </li></ul></ul><ul><ul><li>right mix of color, compression, and quality </li></ul></ul><ul><ul><li>Choosing the best file format for a graphic. </li></ul></ul><ul><ul><li>the heavier the page and the objects on the page, the longer it will take to be downloaded </li></ul></ul>
  21. 21. Web formats <ul><li>JPEG (Joint Photographic Expert Group) </li></ul><ul><li>Use JPEG format for photographic images, gradients, visuals </li></ul>
  22. 22. <ul><li>Exporting web graphics is a two-step process: 1) optimizing, and 2) exporting. </li></ul>Basic Optimization
  23. 23. <ul><li>GIF (Graphic Interchange Format) </li></ul><ul><li>GIF supports 256 indexed colors </li></ul><ul><li>logos, banner, layout, etc. </li></ul>Web formats
  24. 24. Using Optimization Panel in Fireworks <ul><li>Choose File > Open, to open “optimize.jpg” file located inside tutorial_source_files folder </li></ul><ul><li>Choose File >Export wizard </li></ul>
  25. 25. <ul><li>Click to continue in each panel. </li></ul>Using Optimization Panel in Fireworks
  26. 26. <ul><li>Adjust the attributes for graphics under Options and File. </li></ul><ul><li>Click Export button after filling in appropriate values </li></ul>Using Optimization Panel in Fireworks
  27. 27. Web Content Management (WCMS) <ul><li>Why CMS? </li></ul><ul><ul><li>Separating content from website design </li></ul></ul><ul><ul><li>Consistency in layout of the site </li></ul></ul><ul><ul><li>Content author does not need to know to any programming. (WYSISWYG) </li></ul></ul><ul><li>Software used: Microsoft Office SharePoint Server 2007 (MOSS) </li></ul>
  28. 28. Identifying web design elements
  29. 29. Core Team
  30. 30. WCMS KEY CONCEPTS <ul><li>Roles </li></ul><ul><li>Page Approval levels (Workflows) </li></ul><ul><li>Checkin/Checkout & Page versioning </li></ul><ul><li>Page Status/Editing toolbar </li></ul>
  31. 31. KEY CONCEPTS : Roles * For course pages , CorpComm will have to endorse the changes before depart mgr can approves it. Role Add/Edit Content Approve Content Remarks Content Contributor/Editor X Tied to a particular container or containers Content Manager/Approver (Closely link to CorpComm) X X Tied to a particular container or containers Dept Site Web Master (Closely link to CC & IMC) X Manage side navi menu; Manage CC & CM group members Great for creating new content pages . Advisor
  32. 32. KEY CONCEPTS : PAGE CheckIN & CheckOUT CHECKOUT : When you edit a page, you automatically checkout the page so that your fellow Content Contributors cannot edit the same page. CHECKIN : When you checkin the page, your fellow Content Contributors can continue to edit the same page. Pls remember to check in (i.e save & others can edit) or discard or Submit for approval
  33. 33. Editing Staff Directory <ul><li>To login to CMS authoring website, open browser and enter URL </li></ul><ul><li> , </li></ul>
  34. 34. <ul><li>Enter the user name and password to edit website content  </li></ul><ul><li>Navigate to the Staff Directory from About FMS link </li></ul>Editing Staff Directory
  35. 35. <ul><li>Click on the “ Site Actions ” button and select “ Create Page ” link. Plz note, click Edit page to edit existing page </li></ul>Editing Staff Directory
  36. 36. Editing Staff Directory
  37. 37. <ul><li>Type your name/id in the URL field </li></ul><ul><li>Select (NP Page) Content Layout 1, and click Create button </li></ul>Editing Staff Directory
  38. 38. <ul><li>Enter the page title (your name) </li></ul><ul><li>Insert 1 X 3 table </li></ul><ul><li>enter relevant attributes </li></ul>Editing Staff Directory
  39. 39. Editing Staff Directory
  40. 40. Editing Staff Directory
  41. 41. <ul><li>in the first column, insert your photo </li></ul><ul><li>second column your qualification and job title </li></ul><ul><li>third column is reserved for your profile </li></ul>Editing Staff Directory
  42. 42. <ul><li>Place the cursor at the place where you want to insert the image </li></ul><ul><li>Click on “ Image Manager ” button. A dialog box appears. </li></ul><ul><li>Double-click on “ PublishingImages ” to navigate to the image folder. </li></ul>Editing Staff Directory: Insert image
  43. 43. <ul><li>Select the image you want to insert. A preview of the image appears in the right-hand side of the dialog. </li></ul><ul><li>Click “ Insert ”. </li></ul>Editing Staff Directory: Insert image
  44. 44. <ul><li>Select image, right-click “ Set Image Properties ”. </li></ul>Editing Staff Directory: Edit image properties You can change the image properties, such as border width and colour, alignment, spacing, size, create thumbnail etc.
  45. 45. <ul><li>Example 1: To turn off the blue border line around the image, set border width to zero. </li></ul><ul><li>Example 2: To wrap the text around the left-justified image, select “Image Alignment” and choose the left-justified button. </li></ul><ul><li>Example 3: To have 10 pixels clearances between image and text, set “Horizontal Spacing” and “Vertical Spacing” to 10. </li></ul><ul><li>Click “OK” to apply the changes. </li></ul>Editing Staff Directory: Edit image properties
  46. 46. <ul><li>On the “Page Editing” toolbar, click on “Check In to Share Draft” button to save the page. </li></ul><ul><li>Note: Remember to “Check In to Share Draft” after finished editing, if not other users will not be able to edit the page. </li></ul><ul><li>Note: If you want to quit the page without saving, select “Page” and click on “Discard Check Out”. </li></ul>Editing Staff Directory
  47. 47. <ul><li>To preview the page, select “ Tools ” and click on “ Preview in New Window ”. </li></ul><ul><li>If you are satisfied with the changes, click on “ Submit for Approval ” button. </li></ul>Editing Staff Directory
  48. 48. <ul><li>Upon submission, the status of the page will be shown “ Waiting for approval ”. An email will be sent to notify the content managers. </li></ul>Editing Staff Directory
  49. 49. <ul><li>web design applications </li></ul><ul><li>CMS guide, NP </li></ul><ul><li> </li></ul><ul><li>, shan </li></ul>References