Drupal Website FCKeditor Tutorials - Adding Blog Posts, Images & Web Pages with the FCKeditor module

Creating and Editing Content and Blog Posts with the Drupal FCKeditor

   "FINDING ALL YOUR CONTENT"

All content, pages, blog posts, articles etc... are listed on the Content page and links to edit these pages are there as well:
http://www.Your-Infinitee-Website.com/admin/content/node (Replace "http://www.Your-Infinitee-Website.com" with your website's URL address)

   "CREATING NEW PAGES, BLOG POST & MENU LINKS"

1. Go to one of the Add content type pages that best fits the type of addition you want to add. Usually Blog or Page.

http://www.Your-Infinitee-Website.com/node/add/blog

http://www.Your-Infinitee-Website.com/node/add/page

2. Add a Title (make it descriptive and use keywords that might be used by someone searching for this page) e.g.:
About Us, FAQ or Frequently Asked Questions about what we do. The title should be at least 60 letters including spaces and punctuation and utilize as many keywords that pertain to the page as you can.

2a. To add a new page to a menu, click the "Menu settings" link and give the link a title. For a "Parent item" (top level menu link) select Primary links and hit Save. Once you have created a Primary link you can add Sub menu links to it.

Note: You must create the pages to be able to add them to a menu as links.

2b. Once you have created a primary link and you want to add a sub menu links to it you need to got to: http://www.Your-Infinitee-Website.com/admin/build/menu and click the "Expanded" check box to enable sub links capability.

Re-ordering links and enabling sub menu links.

2c. To add a sub menu link to a Primary link, go to: http://www.Your-Infinitee-Website.com/node/add/page Add a Title. Also, you can change the position of the link in the menu drop down list by clicking, holding and dragging the handle icon to re-order the position of menu links then click "Save configuration".

2d. to add a sub menu to a sub menu, repeat the previous steps except, select the sub menu item to add another menu to. remember to check "Expanded" and "Save configuration" on the http://www.Your-Infinitee-Website.com/admin/build/menu page so the sub menus will work.

Creating a Primary Link	Adding a Sub Menu Link to a Primary	Adding a Sub Menu to a Sub Menu

3. Using the Text Editor - Add your textual content and or an image. Type in your text or copy (Ctrl + C) and paste (Ctrl + V) text from another text program like Notepad (Start> All Programs> Accessories> Notepad) Do not use MS Word or Wordpad. If your text was created in Word or Wordpad, copy (Ctrl + C) and paste (Ctrl + V) the text from word to Notepad to remove formatting and then copy and paste it into the FCKeditor text area. (do not to USE ALL CAPS, this is considered YELLING, except maybe to emphasize title headers) and use a spell checker!!

3a. To add an image, click on the small "Image Icon" (Yellow with mountains and the Sun) (more on adding images below).

3b. To make an image or a piece of text into a link, select the text or image and then click on the "Link Icon" (Earth with chain links) then input the link e.g.: www.Your-Favorite-Website.com/my-favorite-link.html
(notice that the http:// is already in place so, do not add a full link address e.g.:
http://www.Your-Favorite-Website.com/my-favorite-link.html just Your-Favorite-Website.com/my-favorite-link.html)

3c. If you have a blog post that is very long and want to shorten it's length view on the front page you can click at the point in which you want to create a teaser and then click the "Teaser" button. This will cut off the rest of the post and leave a "Read more" link to the rest of your post.

4. Important!!!... Click on "Input format" and select the radio button for Full HTML! (ignore and skip to step 5 if it is already set to Full HTML) If your output sometimes does not look right it's usually because you skipped this important step! If so, simply click on the "Edit" tab and Click on "Input format" and select the radio button for Full HTML.

5. Click on "Meta tags" And again, copy and paste the same title as in the previous steps into the text field. (This is food for the search engines. Without it the page will not be added to Google and the other major search engines) e.g.: About Us, FAQ or Frequently Asked Questions about what we do.

6. Paste the title text into the "Keywords" field and then comma separate the keywords (delete any non usable keywords e.g.: the, at, and etc.) e.g.:
FAQ, Frequently, Asked, Questions, about, us,

7. You can leave the "URL path settings" alone and it will automatically create one for you or uncheck "Automatic alias" and give the page a logical address of your choice e.g.: (use hyphens to separate words) faq-frequently-asked-questions

8. "Publishing options" Always leave "Published" checked and optionally, if you would like the new post to be published to the front page then select that one as well. To force a post always be on the top, check "Sticky at top of lists".

9. Hit submit and review your page. If you need to revise anything just hit "Edit" and make whatever changes you like again and again until it is perfect. Have fun!!! make some appropriate text bold, add some color and images... think like an advertising executive!

Note: After the pages have been created and you are finished editing them, you can go to:
http://www.Your-Infinitee-Website.com/admin/build/menu and change the position of the link in the menu drop down list by clicking, holding and dragging the handle icon to re-order the position of menu links then click "Save configuration".

   "HOW TO ADD & POSITION IMAGES IN POSTS"

While you are adding new content or editing, pages, blog posts, articles etc., you can add an image by clicking on the image icon.

1. Once the "Image Properties" editor has loaded you can either add the URL address of an image if you know it or hit "Browse Server" to select an image that is already available on your site or click on the upload link on the upper left to upload an image from your computer.
Tip: When adding images it is important to add a description of the image in the "Alternative Text" field. This is helpful to the visually impaired and it serves as definitions for the search engines as well.

You can also force the image to the left or right of the page with "Align" left or right. Once you hit OK and have added your image you can click and drag it to any place in the editor. Usually if you add an image to a blog post with some text, you will need to add a "Teaser" break at the end point in which you would like the text and image displayed on the front page. Without the "Teaser" break your post will only display the image without text or the text without the image.

   "ADDING HTML CODED CONTENT"

Click “Switch to plane text editor” to add HTML coded content, then click again to bring up the FCKeditor and you can edit text format, make text bold, add images, etc. (Only use this option lf you know your HTML code is good! There are filters that will fix most broken HTML and adding Java Script is not allowed)

  "ADDING META TAG INFORMATION"

For most of our sites we create default meta tags that will automatically be filled into the meta tag fields whenever a new page or blog post is created. It is highly recommended that you take the time and carefully adjust these fields to reflect the content of the new page or post you are creating using these guidelines. Following these steps will better the chances of the new content to be added to the major search engines.

1. Click the "Meta Tags" link and for "Title" or "Abstract" type in or copy and past in the same information you used for your page title (in the first field up top). (Should be no more than 60 char actors)

2. For "Description", type in or copy and past in the same information you used for your page title and then elaborate on it a little (Should be no more than 150 char actors)

3. For "Keywords", type in or copy and past in the same information you used for your page title to the beginning of the list comma separated. e.g.: Drupal, Tutorials, Web Design Tutorials, Drupal Tutorials, Adding, Blog Post, web Pages, FCKeditor, FCKeditor tutorial. If they don't all fit you sill need to eliminate enough of the keywords from the end of the list to fit the new ones in the front.

Note: For a more in depth understanding of how to create Meta Tags for search engine optimization, read the "Perfect Meta Tags" tutorial.

   "Specifying the Unique Resource Locator (URL) Page Address"

Most of the site we build will have the "URL path settings" set to automatically create the address for you (this is set in a way that is best for search engine optimization) but, if you would like to specify particular address of your own,

1. Uncheck "Automatic alias"

2. Type in an alternative URL using keywords that reflect the pages content.

Note: Changing content and adding new pages and blog posts is fine but, it is not a good idea to change the link address' of old content. The URLs that have been on the site for a while have been picked up and registered with the search engines. If you change an address, it will take some time for the search engines to change the listings and people that try to follow the old links will get 404 page not found errors.

Download this Tutorial >

Call me anytime if you have any questions and have fun!!! 302.934.6994 | Email

Ralph Manis

How to Web design & Drupal CMS tutorials

How to Create a Flash CS4 Fading Banner Slideshow

This Adobe Flash CS4 tutorial will teach you how to create a fade in and fade out banner slideshow for your websites. You will need to create seven images that will make up the slideshow images and import them into the Flash CS4 Library then add to the Flash animation document stage. You will then convert the images to symbols and create Motion Tweens for your individual image layers and adjust the Color Effect Alfa type at various point in the Timeline to create an image fade in and out effect.

Go to Fading Banner SLideshow Tutorial >

How to Create perfect Meta Tags for your web pages

What you need to know about writing Meta Tags - The trick is in proper preparation, research and wording of your meta tags. Meta tags are behind the scenes (placed within the HTML code between the <head></head> tags) scripted instructions that suggest to the search engines how to list your pages and what the page's general contents is within that particular page. There are also meta tags to state copyright, date of creation, dates that the content becomes valid and ends. (like special event announcements)

Go to perfect Meta Tags Tutorial >

Drupal Website Tutorials - Adding Blog Post & Pages with the Drupal FCK Editor

Drupal Website Tutorials - This tutorial was created for our clients and anyone with a Drupal website using the FCK Editor and the Meta Tag and Nodeword modules. It includes step by step detailed instructions on how to create a blog post and add pages to your Drupal CMS website correctly and easily. It also, has detailed instructions on using the Meta Tags input fields to better your search engine optimization capabilities with the search engines.

The FCK Editor is a customizable text editor module for Drupal that also, has a quick "Switch to plain text editor" for adding HTML or plain text to your Drupal websites content as web pages, blog posts, articles and stories. Here at Infinitee we use every tool in the book to make your website as easy to use and edit yourself as humanly possible. The FCK Editor is just one of them.

Go to Tutorial Drupal FCK Editor Tutorial >

Create a Flash CS4 Fading Banner Slideshow with linked images Tutorial

This Adobe Flash CS4 tutorial will teach you how to create a fade in and fade out banner slideshow for your websites. You will need to create seven images that will make up the slideshow images and import them into the Flash CS4 Library then add to the Flash animation document stage. You will then convert the images to symbols, add links to the symbols from the ActionScript Panel, create Motion Tweens for your individual image layers and adjust the Color Effect Alfa type at various point in the Timeline to create an image fade in and out effect.

   Open Adobe Flash and a a new file.

Open Flash then click on File > New or (Ctrl+N). In the New Document window, select Flash File (Action Script 3.0) and click on OK or (Enter). Go to Modify> Document (Ctrl+J) and adjust the Dimensions to the size of the Flash slideshow banner to the dimensions you desire. For this tutorial our dimensions are 928px (width) by 300px (height). You should make your images to match the diminutions of the Flash document.

   Importing your slideshow images.

Click File> Import> Import to Library. In the Import To Library file browser window, go to your image folder and double click your first image. Repeat these steps for all the rest of your images.

   Open the Library and add your first image to the Stage then Convert to a Symbol.

Window> Library (Ctrl+L). Drag your first image from the Library in to the Stage and click on the image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3). In the Properties panel, under "Position and Size"set both the "x" and "y" positions to 0.0. Click on the image in the Stage to activate it and then Modify> Convert To Symbol or hit (F8) In the "Convert to Symbol" dialog window, re-name your Symbol and select the Type... Name: slide-1 and Type: Movie Clip then click on OK or (Enter).

 Converting images/symbols into click able links

1. Convert an image to a symbol click F8 if you have not already.
2. Click the image/symbol to activate it.
3. Open the ActionScript Panel (Arrow upper right in Properties Panel) or click F9.
4. Click the actions Global Functions to open menus.
5. Click on Browser/Network.
6. Double click getURL.
7 Fill in the URL field to the right between the parenthesis. e.g.: getURL(http://www.infiniteewebdesign.com);

  Create a new layer in the timeline and drag the next image on to the Stage and set position then Convert to a Symbol.

Open the Timeline, Window> Timeline (Ctrl+Alt+T) In Layer 1, click on the "Diamond" under the "Eye" to hide the layer. then click on the "New Layer" icon in the lower left hand corner.

Then open the Library, Window> Library (Ctrl+L) and drag your next image (image 2) from the Library in to the Stage and click on the image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3). In the Properties panel, under "Position and Size"set both the "x" and "y" positions to 0.0 and hit enter on your keyboard. Click on the image in the Stage to activate it and then Modify> Convert To Symbol or hit (F8) In the "Convert to Symbol" dialog window, re-name your Symbol and select the Type... Name: slide-2 and Type: Movie Clip then click on OK or (Enter). Repeat these steps for all the rest of your images re-naming images slide-3, slide-4, slide-5 and so on.

  Creating Keyframes and adding Tween to the individual layers in the Timeline.

1. Make sure that all the layers are hidden except Layer 1 by clicking on the "Diamond" under the "Eye" column for each of the other Layers so the red "X" is displayed indicating that the layers are hidden and inactive.

2. Click on Layer 1 to activate it. . Click on Frame 140 and then for Windows, right click on Frame 140 and select "Insert Keyframe"
For Mac, click Insert> Timeline> Keyframe. Click on Layer 1 to activate it and then for Windows, right click between Frame 1 and 140 in the Layer 1 row of the Timeline and select, Create Motion Tween. For Mac, Insert> Motion Tween.

   Adding a Fade In and Fade Out effect by adjusting the Color Alpha.

1. Click on Frame 139 and then click on image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 50% or type in 50 and hit enter on your keyboard. The image will fade to 50% white.

2. Click on Frame 140 and then click on image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 0% or type in 0 and hit enter on your keyboard. The image will fade to white.

3. Click on Frame 135 and then click on image to activate it. Open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 99% or type in 99 and hit enter on your keyboard. The image will fade to 99% white.

Selecting "Color Effect" Alfa		Adjusting Alfa

   Repeat Adding Keyframe and Color Alpha to the other Layers by adding 140 Keyframes exponentially to each of the proceeding Layers.

1. Make sure that all the layers are hidden except Layer 2 by clicking on the "Diamond" under the "Eye" column for each of the other Layers so the red "X" is displayed indicating that the layers are hidden and inactive.

2. Click on Layer 2 to activate it. . Click on Frame 280 and then for Windows, left click on Frame 280 and click "Insert Keyframe"
For Mac, click Insert> Timeline> Keyframe. Click on Layer 2 to activate it. . Click on Frame 140 and then for Windows, left click on Frame 140 and click "Insert Keyframe"
For Mac, click Insert> Timeline> Keyframe. Click on Layer 2 to activate it and then for Windows, right click between Frame 1 and 280 in the Layer 2 row of the Timeline and select, Create Motion Tween. For Mac, Insert> Motion Tween.

3. In the Layer 2 row of the Timeline click on Frame 140, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 100% or type in 100. The image will be fully visible.

4. In the Layer 2 row of the Timeline click on Frame 280, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 0% or type in 0. The image will fade to white.

5. In the Layer 2 row of the Timeline click on Frame 279, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 50% or type in 50. The image will fade to 50% white.

6. In the Layer 2 row of the Timeline click on Frame 275, click on image to activate it and open the Properties panel, Window> Properties or (Ctrl+F3) and in "Color Effect" open "Style and select "Alfa" Move the Alfa slider to 98 or 99% or type in 98 or 99. The image will fade slightly to 99% white.

   Hit Ctrl+Enter to view your animation.

   Repeat these steps with the remaining images and Layers.

  For Layer 3, "Insert Keyframes" at 210 and 420.

• Set Frame 210's Alfa to 100%
• Set Frame 420's Alfa to 0%
• Set Frame 439's Alfa to 50%
• Set Frame 435's Alfa to 99%

  For Layer 4, "Insert Keyframes" at 280 and 560.

• Set Frame 280's Alfa to 100%
• Set Frame 560's Alfa to 0%
• Set Frame 559's Alfa to 50%
• Set Frame 555's Alfa to 99%

  For Layer 5, "Insert Keyframes" at 350 and 700.

• Set Frame 350's Alfa to 100%
• Set Frame 700's Alfa to 0%
• Set Frame 699's Alfa to 50%
• Set Frame 695's Alfa to 99%

  For Layer 6, "Insert Keyframes" at 420 and 840.

• Set Frame 420's Alfa to 100%
• Set Frame 840's Alfa to 0%
• Set Frame 839's Alfa to 50%
• Set Frame 835's Alfa to 99%

  For Layer 7, "Insert Keyframes" at 490 and 980.

• Set Frame 490's Alfa to 100%
• Set Frame 980s Alfa to 0%
• Set Frame 979's Alfa to 50%
• Set Frame 975's Alfa to 99%

   Hit Ctrl+Enter to view your animation.

  Download complete source files...

Includes seven images and Flash file in .Zip format @ 2.48 MB