Web Candy Design Inc. 1 JCE Editor Manual

Transcription

1 Web Candy Design Inc. 1 JCE Editor Manual

2 Table of Contents What is JCE? 3 What is an Article? 3 Sections & Categories Explained 3 Why use Sections & Categories 3 Sections and Categories vs. Menu Organization 4 Buttons Overview 5 Accessing the Editor 8 Uploading a File 9 Inserting a File Link onto a Page 11 Creating a Link Link to a Page Within The Site 12 An External Web Site Link 12 Link to an Existing File 12 Link to an Address 14 Jump to a Specific Spot Within a Page 14 Editing and Removal of a Link 16 Inserting and Editing an Image 17 Uploading an Image 18 Using the Light Box Feature The Read More Button 21 Using Tables 22 Tips & Tricks Line Spacing 24 Copying & Pasting from MS Word 24 Pasting as Plain Text 24 Web Candy Design Inc. 2 JCE Editor Manual

3 What is JCE? JCE makes creating and editing content easy. JCE is a WYSIWYG HTML editor. JCE add a set of tools to your environment that give you the power to create the kind of content you want, without limitations, and without needing to know or learn HTML, XHTML, CSS... Office-like functions and familiar buttons make formatting simple Upload, rename, delete, cut/copy/paste images and insert them into your articles using an intuitive and familiar interface Create Links to other Sections, Categories, Articles, Weblinks and Contacts¹ in your site using a unique and practical Link Browser Take control of your code with syntax highlighting in the Advanced Code editor and advanced style and element attribute editing Integrated Spellchecking using Google Spellchecker (or PSpell and ASpell) What is an Article? Let's start with some definitions. An Article is some written information that you want to display on your site. It normally contains some text and can contain pictures and other types of content. For many sites, articles form the majority of the information presented in the website. It is important to understand that the content of the site (for example, Articles) is totally separate from the formatting of the site -- the way it looks on the page. So it is best to think of articles as pure content, independent of the way it might be presented. For example, the same Article might be shown with different fonts, colors, headings, and background, and might be shown in different locations on the page. Sections and Categories Explained Sections and categories provide an optional method for organizing your articles. Here's how it works. A Section contains one or more categories, and each Category can have articles assigned to it. One Article can only be in one Category and Section. For example, you might have a Section called "Pets", and categories called "Dogs" and "Cats". Articles about dogs would be assigned to the "Dogs" Category, ones about cats the "Cats" Category. So an Article about dogs would be in the "Pets" Section and the "Dogs" Category. You could not have one Article that is in both the "Cats" and "Dogs" categories. To work around this, you could either (1) create a new Category called "Cats and Dogs" or (2) create a second Article to put in the second Category. Why Use Sections and Categories? There are two main reasons you might want to organize your Articles in sections and categories: List and Blog Layouts First, there are built-in Menu Item Types that take advantage of this organization. These are the Section Blog, Section List, Category Blog, and Category List. These Menu Item Types (also called "layouts") make it very easy to show articles that belong to sections or categories. As new articles are created and assigned to sections and categories, they will automatically be placed on these pages according to the parameters you set for each page. For example, say you have a Section Blog layout for the "Pets" section, and say you have it set to order articles starting with the most recent one first. When you add a new Article to the "Pets" Web Candy Design Inc. 3 JCE Editor Manual

4 Section, it will automatically show on the "Pets" blog page as the first Article. You don't have to do anything other than add the Article and assign it to the "Pets" Section. Organizing Articles in Article Manager If you will have a large number of articles on your site, a second reason to use sections and categories is to simply group the articles so you can find them. For example, in the Article Manager, you can filter articles based on Section or Category. So if you have 200 articles in your site, you can more easily find an Article if you know it's Section or Category. Sections and Categories vs. Menu Organization It is important to understand that, just because the system uses a 3-tier organization level for articles (Section Category Article), this has nothing to do with the structure of the menus on your site. For example, your site could have one menu level or six menu levels. Web Candy Design Inc. 4 JCE Editor Manual

5 Buttons Overview Name / Description Icon Advanced Code Editor Code Editor (HTML, PHP, CSS, JavaScript) with syntax highlighting, Advanced Link Advanced Link editor. Includes content link selection. Anchor Creates anchor links Bold Makes selected text bold. Shortcut Key - CTRL+B Bullet List Character Map Clipboard Actions Code Cleanup Directionality Emotions File Manager Font Back-color Font Four-color Font Select Font Size Select Format Select Full screen Help Horizontal Rule HTML Basic HTML editor Image Manager Extended Advanced image insert with file browser, image thumb nailing, resizing, rotating, image popups and tooltips. Web Candy Design Inc. 5 JCE Editor Manual

6 Indent Italic Italicizes selected text Shortcut Key: CTRL+I Justify Center Justify Full Justify Left Justify Right Layers Link Basic Link insert Media Manager New Document Clears the editor contents to create a new document Non-Breaking Numbered List Creates a numbered (ordered) list Outdent Paste Paste from Word - Cleans HTML of Word specific before pasting. Paste as Text - Removes all formatting before pasting. Select All - Selects all editor contents. Preview Print Read More Redo Remove Format Search Replace Spell Checker Strikethrough Style Select Select list of template CSS styles. Applied to selected block element or span. Web Candy Design Inc. 6 JCE Editor Manual

7 Styles Edit an elements styles Subscript Superscript Tables Template Manager Underline Undo Unlink Visual Aid Visual Characters XHTML Xtras Web Candy Design Inc. 7 JCE Editor Manual

8 Accessing the Editor To access the editor click the log in link this is normally placed at the bottom of any page. You will be taken to the log in screen, enter your user name and password as provided to you by the web administrator. Log In Button Once you have logged in you will notice that there are edit icons located on the top right of each page. Click on the edit icon located on the page of the site that you want to edit and it will take you to the editor. Web Candy Design Inc. 8 JCE Editor Manual

9 Uploading a File You can add a file to your website directory by following the steps outlined below: 1. Clicking on the File Manager Button which will open up the file manager screen. Upload Button 2. Click the Upload button. The Upload button opens the upload screen, click Add and locate the file you want to upload. Once you have found the file you want to upload and double click the file. You will see the file in the queue, click Upload and when you see a green check mark by the file name in the queue you can click on the X or Cancel button to get back to the file manager screen where you will see your new file added to the directory. Web Candy Design Inc. 9 JCE Editor Manual

10 Address to your new file Your New File Web Candy Design Inc. 10 JCE Editor Manual

11 Inserting a File Link onto a Page If you want to insert a file that you have uploaded onto a page open the file manager and select the file you want to insert. You have the option of showing the file type icon, date the file was created, and the file size. This is done by checking the appropriate check boxes in the File Manager window. A file inserted with all 3 options checked above looks as follows: Web Candy Design Inc. 11 JCE Editor Manual

12 Creating a link 1. Select the content or picture that you want to use as the link. 2. Click the Advanced Link button in the editor. 3. Select the destination that you want the link to navigate to by doing any of the following: a. Link to a Page Within The Site: Navigate any of the listed folders and find the section, category, or article that you want the link to navigate to within the site. Click Insert and your link is done. Type desired website address here Browse Button Articles, sections, categories, and contact pages within site b. An External Web Site Link: Type in a web address that you want the link to point to in the URL field and click Insert. Your link is done. c. Link to an Existing File: you click the Browse button located to the right of the URL field. This takes you to the files located in your web site. Click on the file you want to link to, you will see the URL Field and then click the Insert button. You will then be taken back to the advanced link screen. Click Update and your link is done. Web Candy Design Inc. 12 JCE Editor Manual

13 Upload Button Web Candy Design Inc. 13 JCE Editor Manual

14 d. Link to an Address: In the Advanced Link screen click on the icon. It will open up a separate screen where you can enter in the address and the subject text. Click OK in the screen and then Update in the Advanced Links screen and the link has been completed. e mail icon e. Jump to a Specific Spot Within a Page: In order to create a jump to a specific section in a page an Anchor must first be created. Web Candy Design Inc. 14 JCE Editor Manual

15 i. Create an Anchor: To create an Anchor place your curser on the text that you would like to link to and click the Anchor button on the menu bar. A screen will open up where you can name the anchor. You anchor name Your Anchor Name Here can be anything you want it to be. Once you have typed in the Anchor name click Update and your anchor has been created. Web Candy Design Inc. 15 JCE Editor Manual

16 Once you have created your anchor click the spot on the page that you want to jump to and click the Advanced Link Button and in the Attributes section of the screen you can look at a drop down list that will show the Anchors that you created. Select the Anchor you want to jump to and click insert. Your anchor is complete. Drop down list of anchors created f. Editing and Removal of a Link: If you want to remove any of the links that you have created select the link and then click on the Unlink button to edit the link, ie change anchor, or change the file that it points to, select the existing link and then click on the Advanced Link button. You can perform and save your changes here Web Candy Design Inc. 16 JCE Editor Manual

17 Inserting and Editing an Image Properties Directory Upload Button Image Details To insert an image click on the Image Manager button in the editor. The Image manager window will open up and will allow you to either select an image already in the directory, or upload a new image. If the image you want to insert is already in the directory select the image. You will be able to see the image details in the Details box on the screen. Once the Image is selected you will be able to see the image details in the Details box on the screen. The Properties section of the screen shows you variables of the image that can be adjusted to the users preference. The dimensions of the image can be adjusted by changing the numbers in the Dimensions fields. You can also select where the picture will appear on the page by selecting the image Alignment from the drop down menu in the Alignment field drop down. The proximity of the page text to the image can be adjusted by adjusting the Margins. A border can be added and modified by changing settings in the Border field. Once you have set the image properties to those of which you want click the Insert button and your picture will be inserted into the page. Web Candy Design Inc. 17 JCE Editor Manual

18 Uploading an Image If the image you want is not already in the directory then you must upload the image. To upload an image click on the Upload Button, which will open the upload window. The upload window allows you to set some of the images properties as you upload the image. It is recommended that you Resize the images to keep file sizes down and site load times at a minimum. This is done by clicking the Resize checkbox and choosing your desired size. Light Boxes which allow you to insert a small image onto your page which can be clicked on to show a the larger image can be done using the Image Manager. If you foresee yourself wanting to use this feature it is recommended that you create a Thumbnail image of the image you want to upload for use with the Light Box feature. This is done simply by clicking the Thumbnail checkbox and setting your desired size. More on the Light Box feature is included below. To best take advantage of this feature it is suggested that you make Thumbnails of all photos you upload. The Thumbnails created get stored in in a Thumbnail folder which is automatically created when you choose the Thumbnail option the first time. All subsequent Thumbnails get placed in this folder. You can also choose to Rotate your picture from the Upload window if you want to play with the look of the page. Once you have chosen the image settings of your preference you click the Add button which will allow you to brows for images on your computer, cd, sd card, memory stick, ect. Select the image that you want to upload and it will show in the Queue. If you want to upload more than 1 image multiple images can be added to the Queue. Once all of your images have been added to the Queue, click the upload button. The Red X will turn into a Green Circle with a check mark in it. This will show beside each file that has been successfully uploaded. Web Candy Design Inc. 18 JCE Editor Manual

19 To exit the Upload window click Cancel of the X in the top right corner of the window. This will take you back to the Image Manager window where you can follow the steps outlined in the Inserting and Editing an Image section above. Using the Light Box Feature The light box feature allows you to place a Thumbnail image on the page and have it open into a larger version of that image via the Light Box. This feature is handy when you are limited by space due to text and other graphics, but you still want people to be able to view larger more detailed versions of your images. Thumb Nail image on Large image shows and blacks out the site once the thumb nail image is clicked on To Create a light box image insert an image, preferably a Thumbnail of a larger image, by following the steps outlined in the Inserting and Editing an Image section. Prior to clicking the Insert button Open the Popup Tab and click on the Enable checkbox. Web Candy Design Inc. 19 JCE Editor Manual

20 Once the Enable checkbox is selected in the Popup tab locate the larger image associated with the Thumbnail and select it. You will be prompted to use associated Thumbnail, click Yes. You will notice the details of the larger image in the Details section, but you will also notice that the URL field and Caption field are filled in on the Enabled Popup tab. Click Insert and your have created a Light Box image. Web Candy Design Inc. 20 JCE Editor Manual

21 The Read More Button The read more button allows the user to only show a portion of the text on a page when showing the article in a blog. This feature can come in handy when a page contains lots of text which would push other articles in the blog so far down the page that nobody would see them. The read more allows you to show the introduction, first few paragraphs, whatever you feel will grab the attention of the user and provide them with a read more link to view should they choose to read the content in its entirety. This is what will show on the web page Page Break Web Candy Design Inc. 21 JCE Editor Manual

22 Using Tables Tables can be a useful tool when formatting information in an article. They help you align content both vertically and horizontally. To insert a table click the Insert table button located in the editor. An Insert/Edit Table window will open up. Select the number of rows and columns that you want the table to have. You can also adjust the following table properties in the General tab. Cell padding Padding places space between the outer edge of the cell in a table and the outer border of the table Cell Spacing Cell Spacing controls the distance that the cells in the table are apart from each other. Alignment Controls the position of the table on the page. Dimensions Controls the table size Border You can add borders to your table by putting a 1 in the border field. The larger number you put in the field the thicker the border will be. Web Candy Design Inc. 22 JCE Editor Manual

23 You can adjust the following properties in the Advanced tab. Border Color You can pick the color you want your border to be by clicking on the color pallet located next to the Border Color field. Background Color You can pick the color you want your background to be by clicking on the color pallet located next to the Background Color field. Web Candy Design Inc. 23 JCE Editor Manual

24 Editor Tips & Tricks Line Spacing Within the editor the spacing between paragraphs can vary depending on the templates style as well as how the text is wrapped in HTML tags. For example, by default most text within paragraph tags has padding before and after a paragraph. So, what does this mean? When you press the enter key a new paragraph gets started with the padding automatically set between paragraphs. To avoid this you can press and hold the Shift key when you press enter and instead of creating a new paragraph, you create a line break without the padding resulting in a single line break. Another option is to change the wrapping tags around the text to a DIV tag instead of a paragraph tag. To do this highlight the text you want to modify and select the DIV format style from the dropdown as shown in the graphic below. Copying & Pasting from MS Word (any MS Office Document) Microsoft Word contains extra formatting and styles that most Internet browsers do not like. These resulting extra styles often break the visual appearance and functionality of your web site. To avoid these extra styles that Word or any office document contains, use the Paste from Word icon in the editor. This feature will try and remove all possible Word formatting and styles without removing the underlying text formats. Pasting as Plain Text Alternatively, you can paste your text as Plain Text. This feature is very useful when you are having troubles with the Paste from Word icon not removing all the extra formatting. The downside of using this method is that you will need to and format your text manually. The upside of this method is that the resulting HTML (web code) will be clean of errors and possible style issues. Web Candy Design Inc. 24 JCE Editor Manual