WEB DESIGN FOR FMS  FMS Web site Training using Content Management System (CMS) Ahsan Uddin Shan School of Film & Media St...
Objectives <ul><li>Dosto, you will learn how to put Fireworks to work </li></ul><ul><li>Optimization using Fireworks </li>...
<ul><ul><li>Click on the ZIP icon to download the supporting files. Create a new directory on your hard drive and label th...
Understanding Fireworks <ul><li>Fireworks is a graphics program for the Web </li></ul><ul><li>What can you do in Fireworks...
Where is my Fireworks (its not Firefox lah!!) <ul><li>Click Click your hard disk (I rename my hard disk to shan) </li></ul...
Adobe Creative Suite  <ul><li>http://www.adobe.com/products/ </li></ul>
Getting to know the Fireworks workspace: Creating a new document <ul><li>Open Fireworks </li></ul>
Creating a new document
Fireworks Window Canvas Tools Menu bar Panels Properties
Fireworks Tabs <ul><li>The document window has four tabs </li></ul><ul><ul><li>Original </li></ul></ul><ul><ul><li>Preview...
Property inspector <ul><li>The Property inspector is a panel that displays current selection properties, current tool opti...
Tools <ul><li>The Tools panel is used to for variety of job </li></ul><ul><li>It is organized into six categories: Select,...
Practice Tools: Selection Tools/Objects  <ul><li>Using the selection and transformation tools, you can move, copy, delete,...
Practice Tools: Selection Tools/Objects  <ul><li>You can organize the objects by stacking, grouping, and aligning them. Us...
Practice Tools: Selecting pixels  <ul><li>You can edit pixels over an entire canvas or choose one of the selection tools t...
Practice Tools: Selecting pixels  <ul><li>The Lasso tool selects a freeform area of pixels in an image. </li></ul><ul><li>...
Working with Text <ul><li>Text can be created and modified in Fireworks </li></ul><ul><li>Text properties include font, si...
Working with Text <ul><li>Many text features typically reserved for sophisticated desktop publishing applications. </li></...
Attaching Text to a Path <ul><li>Text can be attached to a path to create an interesting design </li></ul><ul><ul><li>Crea...
Basic Optimization <ul><li>Optimization is the process of preparing graphics for the web.  </li></ul><ul><li>A 10MB image ...
Optimizing Images in Fireworks  <ul><li>Why </li></ul><ul><ul><li>to reduce the amount of time </li></ul></ul><ul><ul><li>...
Web formats <ul><li>JPEG (Joint Photographic Expert Group) </li></ul><ul><li>Use JPEG format for photographic images, grad...
<ul><li>Exporting web graphics is a two-step process: 1) optimizing, and  2) exporting.  </li></ul>Basic Optimization
<ul><li>GIF (Graphic Interchange Format) </li></ul><ul><li>GIF supports 256 indexed colors </li></ul><ul><li>logos, banner...
Using Optimization Panel in Fireworks  <ul><li>Choose File > Open, to open “optimize.jpg” file located inside  tutorial_so...
<ul><li>Click to continue in each panel. </li></ul>Using Optimization Panel in Fireworks
<ul><li>Adjust the attributes for graphics under Options and File.  </li></ul><ul><li>Click Export button after filling in...
Web Content Management (WCMS) <ul><li>Why CMS? </li></ul><ul><ul><li>Separating content from website design </li></ul></ul...
Identifying web design elements
Core Team
WCMS KEY CONCEPTS <ul><li>Roles </li></ul><ul><li>Page Approval levels (Workflows) </li></ul><ul><li>Checkin/Checkout  & P...
KEY CONCEPTS : Roles *  For course pages , CorpComm  will have to endorse the changes before depart mgr can approves it. R...
KEY CONCEPTS : PAGE CheckIN & CheckOUT CHECKOUT  : When you edit a page, you automatically checkout the page so that your ...
Editing Staff Directory <ul><li>To login to CMS authoring website, open browser and enter URL  </li></ul><ul><li>http://np...
<ul><li>Enter the user name and password to edit website content  </li></ul><ul><li>Navigate to the Staff Directory from  ...
<ul><li>Click on the “ Site Actions ” button and select “ Create Page ” link. Plz note, click Edit page to edit existing p...
Editing Staff Directory
<ul><li>Type your name/id in the URL field </li></ul><ul><li>Select (NP Page) Content Layout 1, and click Create button </...
<ul><li>Enter the page title (your name) </li></ul><ul><li>Insert 1 X 3 table </li></ul><ul><li>enter relevant attributes ...
Editing Staff Directory
Editing Staff Directory
<ul><li>in the first column, insert your photo </li></ul><ul><li>second column your qualification and job title </li></ul>...
<ul><li>Place the cursor at the place where you want to insert the image </li></ul><ul><li>Click on “ Image Manager ” butt...
<ul><li>Select the image you want to insert. A preview of the image appears in the right-hand side of the dialog. </li></u...
<ul><li>Select image, right-click “ Set Image Properties ”.  </li></ul>Editing Staff Directory:  Edit image properties You...
<ul><li>Example 1: To turn off the blue border line around the image, set border width to zero. </li></ul><ul><li>Example ...
<ul><li>On the “Page Editing” toolbar, click on “Check In to Share Draft” button to save the page. </li></ul><ul><li>Note:...
<ul><li>To preview the page,  select “ Tools ” and click on “ Preview in New Window ”. </li></ul><ul><li>If you are satisf...
<ul><li>Upon submission, the status of the page will be shown “ Waiting for approval ”. An email will be sent to notify th...
<ul><li>web design applications </li></ul><ul><li>CMS guide, NP </li></ul><ul><li>projectseven.com </li></ul><ul><li>dzine...
Upcoming SlideShare
Loading in...5
×

Fms Web Cms Training

1,697

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
1,697
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
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. <ul><ul><li>Click on the ZIP icon to download the supporting files. Create a new directory on your hard drive and label the folder Optimization. Unzip the supporting files into your new folder. Create a folder inside the new directory and label it Assets. </li></ul></ul>
  4. 4. 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>
  5. 5. 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>
  6. 6. Adobe Creative Suite <ul><li>http://www.adobe.com/products/ </li></ul>
  7. 7. Getting to know the Fireworks workspace: Creating a new document <ul><li>Open Fireworks </li></ul>
  8. 8. Creating a new document
  9. 9. Fireworks Window Canvas Tools Menu bar Panels Properties
  10. 10. 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>
  11. 11. Property inspector <ul><li>The Property inspector is a panel that displays current selection properties, current tool options, or document properties. </li></ul>
  12. 12. 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>
  13. 13. 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>
  14. 14. 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>
  15. 15. 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>
  16. 16. 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>
  17. 17. 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>
  18. 18. 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>
  19. 19. 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>
  20. 20. 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>
  21. 21. 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>
  22. 22. Web formats <ul><li>JPEG (Joint Photographic Expert Group) </li></ul><ul><li>Use JPEG format for photographic images, gradients, visuals </li></ul>
  23. 23. <ul><li>Exporting web graphics is a two-step process: 1) optimizing, and 2) exporting. </li></ul>Basic Optimization
  24. 24. <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
  25. 25. 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>
  26. 26. <ul><li>Click to continue in each panel. </li></ul>Using Optimization Panel in Fireworks
  27. 27. <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
  28. 28. 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>
  29. 29. Identifying web design elements
  30. 30. Core Team
  31. 31. 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>
  32. 32. 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
  33. 33. 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
  34. 34. Editing Staff Directory <ul><li>To login to CMS authoring website, open browser and enter URL </li></ul><ul><li>http://npcms.np.edu.sg/fms , </li></ul>
  35. 35. <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
  36. 36. <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
  37. 37. Editing Staff Directory
  38. 38. <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
  39. 39. <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
  40. 40. Editing Staff Directory
  41. 41. Editing Staff Directory
  42. 42. <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
  43. 43. <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
  44. 44. <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
  45. 45. <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.
  46. 46. <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
  47. 47. <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
  48. 48. <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
  49. 49. <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
  50. 50. <ul><li>web design applications </li></ul><ul><li>CMS guide, NP </li></ul><ul><li>projectseven.com </li></ul><ul><li>dziner.org, shan </li></ul>References
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×