Logining In to Joomla www.secstudents.org/administrator
Username: Student556
Password: Red556
The outcome of todays's lesson is to be familiar with the JCE Content Editor, to have created a Featured Article including formatted text, an image and text and image based external links. The stretch learning is to use the Pixlr Editor to create and insert a hoverover version of the image and to create a menu item linking directly to the article.
Joomla Menu Layout - Main Menu>Articles>Add New Article
The Editor comes in 8 sections:
- The File buttons, Save, Save & Close, Save & New etc.
- The Title and Alias boxes.
- The Editor Tabs - Content, Images, Options etc.
- The Editor control - On/Off, Editor, Code & Preview
- The Editor Tools Buttons
- The Content Area
- The Control Settings - Status, Category, Featured etc.
- The Insert Buttons
The core Editor Tools contain lots of recognisable buttons such as the inline formatting Bold, Italic and Underline. The most important buttons and the most useful button
Block Formatting
This pulldown menu is very similar to formatting paragraphs in Microsoft Word but this formats HTML. Correctly formatting HTML is critical for Search Engine Optimisation (SEO). The default format is <p> Paragraph but <h4>, <h5> and <h6> are critical for telling search engines, specifically Google with its dominant 87% UK marketshare what is important in any content. Use Chrome Developer Tools (Keyboard shortcut F12) to view formatting. On this website formatting is <h1> Page Header, <h2> Title, <h6> 1st Paragraph, <p> All other paragraphs, <h4> Heading and <h5> Sub Heading.
Show Formatting
This is the most useful tools in the JCE Content Editor, it simply toggles on a display of the blocks and shows the formatting in gray uppercase characters in the content area. I always work with it toggled on and strongly suggest that you do the same.
Remove Formatting
Cutting (Keyboard Shortcut Ctrl+X) or copying (Ctrl+C) and pasting (Ctrl+V) will frequently carry formatted content into the Content Area. All pasted content from any source has a risk of containing formatting that will be different from the default formatting for the website so that Times New Roman for example will appear instead of the selected Google Font.
Best practice is to use a word processing package such as Microsoft Word and then to select all (Ctrl+A) and press Clear Formatting (Ctrl+Spacebar) but Remove Formatting has the same function. By selecting the text, image, table or block of content using Remove Formatting removes inline formatting and then in turn block formatting.
Insert/Edit Image
This tool opens your Image Manager so that with no image selected images can be uploaded and inserted into the content or, when an inserted image is selected, it can be adjusted according to need. The Image Manager is a critical tool for illustrating text content and for Search Engine Optimisation (SEO). Each image has an Alternate Text which is the name that Google is looking for when it crawls and indexes websites for content to present search results to its customers. The Google algorithm, currently Penguin 7, calculates, reasons and processes a website owner's specialist expertise, concern for site users and technical competence. All three measures are easily demonstrated by the simple good practice providing Alternate Texts for every single image.
Text has the capacity to wrap around images by setting the Alignment to left or right and the margin, by default 0 pixels (px) wide, set so that the text and image are not flush. A minus width is possible too for aesthetic purposes. Rollover is also a very simple process of inserting an additional alternative image withe the same size and dimensions. A border, again measured in pixels is a very easy way of improving the attractiveness and making the image more eye-catching. For a good article on see How to Use Images Effectively in Websites by Jarrod Wright on the Design Instruct website.
Insert/Edit Link
The original purpose of the internet was to link to content on remote computer servers. Creating links is very straight forward and is also critical for search engine optimisation. Linking to other websites' expert content provides a signpost for visitors and shows knowledge of other high quality websites. The two types of links, ones to destinations on your own website called internal, should open in the same browser tab whereas ones that link to destinations on other websites, called external link, need to open in a new browser tab so that your website is not closed in favour of the external website.
https://www.youtube.com/watch?v=lL869Dh3mkI