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