WEB DESIGN FOR FMS FMS Web site Training using Content Management System (CMS) Ahsan Uddin Shan School of Film & Media Studies

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 

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 

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.

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.

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

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

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

Click Click your hard disk (I rename my hard disk to shan)

Switch to applications

Click Click Adobe Fireworks CS3

Adobe Creative Suite http://www.adobe.com/products/

http://www.adobe.com/products/

Getting to know the Fireworks workspace: Creating a new document Open Fireworks

Open Fireworks

Creating a new document

Fireworks Window Canvas Tools Menu bar Panels Properties

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

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

Property inspector The Property inspector is a panel that displays current selection properties, current tool options, or document properties.

The Property inspector is a panel that displays current selection properties, current tool options, or document properties.

Tools The Tools panel is used to for variety of job It is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View.

The Tools panel is used to for variety of job

It is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View.

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

Using the selection and transformation tools, you can move, copy, delete, rotate, scale, or skew objects. In documents that have multiple objects

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.

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.

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.

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.

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.

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.

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

Text can be created and modified in Fireworks

Text properties include font, size, color,style, kerning, leading, alignment, text flow, offset, and anti-aliasing

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.

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.

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

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

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

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

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

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

Web formats JPEG (Joint Photographic Expert Group) Use JPEG format for photographic images, gradients, visuals

JPEG (Joint Photographic Expert Group)

Use JPEG format for photographic images, gradients, visuals

Exporting web graphics is a two-step process: 1) optimizing, and 2) exporting. Basic Optimization

Exporting web graphics is a two-step process: 1) optimizing, and 2) exporting.

GIF (Graphic Interchange Format) GIF supports 256 indexed colors logos, banner, layout, etc. Web formats

GIF (Graphic Interchange Format)

GIF supports 256 indexed colors

logos, banner, layout, etc.

Using Optimization Panel in Fireworks Choose File > Open, to open “optimize.jpg” file located inside tutorial_source_files folder Choose File >Export wizard

Choose File > Open, to open “optimize.jpg” file located inside tutorial_source_files folder

Choose File >Export wizard

Click to continue in each panel. Using Optimization Panel in Fireworks

Click to continue in each panel.

Adjust the attributes for graphics under Options and File. Click Export button after filling in appropriate values Using Optimization Panel in Fireworks

Adjust the attributes for graphics under Options and File.

Click Export button after filling in appropriate values

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)

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)

Identifying web design elements

Core Team

WCMS KEY CONCEPTS Roles Page Approval levels (Workflows) Checkin/Checkout & Page versioning Page Status/Editing toolbar

Roles

Page Approval levels (Workflows)

Checkin/Checkout & Page versioning

Page Status/Editing toolbar

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

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

Editing Staff Directory To login to CMS authoring website, open browser and enter URL http://npcms.np.edu.sg/fms ,

To login to CMS authoring website, open browser and enter URL

http://npcms.np.edu.sg/fms ,

Enter the user name and password to edit website content Navigate to the Staff Directory from About FMS link Editing Staff Directory

Enter the user name and password to edit website content

Navigate to the Staff Directory from About FMS link

Click on the “ Site Actions ” button and select “ Create Page ” link. Plz note, click Edit page to edit existing page Editing Staff Directory

Click on the “ Site Actions ” button and select “ Create Page ” link. Plz note, click Edit page to edit existing page

Editing Staff Directory

Type your name/id in the URL field Select (NP Page) Content Layout 1, and click Create button Editing Staff Directory

Type your name/id in the URL field

Select (NP Page) Content Layout 1, and click Create button

Enter the page title (your name) Insert 1 X 3 table enter relevant attributes Editing Staff Directory

Enter the page title (your name)

Insert 1 X 3 table

enter relevant attributes

Editing Staff Directory

Editing Staff Directory

in the first column, insert your photo second column your qualification and job title third column is reserved for your profile Editing Staff Directory

in the first column, insert your photo

second column your qualification and job title

third column is reserved for your profile

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

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.

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

Select the image you want to insert. A preview of the image appears in the right-hand side of the dialog.

Click “ Insert ”.

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.

Select image, right-click “ Set Image Properties ”.

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

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.

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

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”.

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

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.

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

Upon submission, the status of the page will be shown “ Waiting for approval ”. An email will be sent to notify the content managers.

web design applications CMS guide, NP projectseven.com dziner.org, shan References

web design applications

CMS guide, NP

projectseven.com

dziner.org, shan