Welcome to Edusites
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.
Tutorial
Existing:
Basic Principles
Using all caps is considered not the best practice. For titles capitalize the first letters only and in articles use colors, sub headings, or bold to accent.
Use sub headings for headings only.
Upload mp3 to folder mp3.
Upload files to folder files.
Upload images to folder images.
Using the formatting buttons:
Most are basic html, such as:
Bold Adds html tags before and after a word or phrase.
Example:
<b>word here</b>
To do this, and other formatting, click at the end of the word or phrase and while holding down the mouse button, drag it over the word(s) wanted. It should stay highlighted (blue)
Then release the mouse and click on the formatting button wanted.
You will see it add the tags before and after.
In xhtml almost all tags have to have a closing tag.
Line breaks are added automatically, and to start a paragraph simply hit enter twice to create one space between the lines. The CMS will add paragraph tags automatically.
Sub headings
This adds a heading (h2).
<h2>Subheading Here</h2>
Produces:
Sub Heading
This has css in the site stylesheet to appear differently than the above, but this gives the idea.
Another way is to select ‘Use Guided’ above the formatting buttons. When this is enabled a window will pop-up when you select a button to format text. Simply add text you want formatted and click on ok, and it will add them both for you. Click where it is wanted in the field first.
Nesting tags
One can combine tags. For example, Bold red.
<b><span class=“red”>bold red text</span></b>
Please note the order above.
The Buttons
ul = an unordered bulleted list. ul frames each list item (li).
Example:
<ul>
<li>List item one</li>
<li>List item one</li>
</ul>
Produces:
- List item one
- List item 2
Note the open and /close tags.
ol = Ordered list, used in place of ul it makes a numbered list.
- List item 1
- List item 2
BQuote = Blockquote
Indents and puts a border around quoted text to indicate a quote.
Upload Images
Upload link is below the save buttons.
A new window will pop-up.
See Tutorial
For lightbox image pop-up:
Use button Lightbox to put rel=“lightbox” after the <img tag.
Click after the <a and click on button.
<img rel=“lightbox” src=“rest of image code.
***********************************************************
Add?
Using the buttons
All tags are small letters.
All tags have to be closed.
Click before word(s), drag mouse over text to highlight.
click on button wanted to format.
Floating Images left, right or centering
Note: left, right, and center go inside image tag, no highlight required.
Example, set cursor at end of g, click Left:
<img class=“left src=
Tutorial:
floating images
<b>bold text</b>
bold text
Lists
<ul>
<li>bold text</li>
<li>bold text</li>
</ul>
Makes:
- bold text
- bold text
Click on ul.
separate them, click in between and hit enter twice.
enter li list item between.
Highlight and click on li for each item.
Numbered Lists
<ol>
<li>First Client Website</li>
<li>Second Client Website</li>
<li>Third Client Website</li>
</ol>
Makes:
- First Client Website
- Second Client Website
- Third Client Website
Upload image
Uploading-resizing images
Click on the green arrow just below “Quick Save.” This will open up the window to choose your photo. (Or file).
Browse to the photo you want to upload and select it. Leave destination as is.
Upload the image or file. The next window will ask about resizing.
“You may optionally resize your image or create an image thumbnail.
If you do not wish to resize or create a thumb skip to the options below”
Select resize if photo is larger than 580px wide, or if you want it smaller.
Enter the width desired in the top box, clicking anywhere in the upload form will automatically set the height.
Options here are to create a separate copy or resize original.
In most cases, resize original and click Resize Image.
The next screen has options, select embed in entry.
For location select the area-field you want the image placed in. Body or Extended fields.
Place image and close window
Getting Started with ExpressionEngine
Basics of the template structure and css.
There is a place for a description in the header. While this does nothing for seo for higher rankings, it will improve click throughs. This shows below title in search results. Reference: Google - Improve snippets with a meta description makeover
The templates have been installed. It must be noted, these are like a foundation. And are offered as a sugestion only. I will be doing little more until approved.
A fellow member of the Web Standards Group originally came out with these several years ago. They are solid in all browsers and all operating systems including Linux. The basic structure is solid and easily added to where needed. I see that many look at them and going by appearances alone reject them. There is no design that cannot be added into these, nor any foundation seen as solid. Changing from 3 cols to two to one is simple and easy, requiring three changes in the css. This includes changes in the same template. It will be noted they are hack free.
Do not go by appearance. Design is a journey, not a destination. This is like rejecting the foundation of a house because you don’t like the color.
These are much like csszengarden. There all the designs have to use the template without touching it, and all changes can only be made in the css.
Same with these, in the context that aside from adding in menus and what is needed (example-a top menu bar), the different sites can use the same template structure and only have small css stylesheets added on. Hopefullt there will be no need for more than one additional css file per site in a template.
CSS:
A good reference to avoid overuse of classes and div’s:
MaxDesign - Descendant selectors. As a member of the Movable Type Professional Network for many years, they still add class names to every single element. That is not a good practice.
Javascript:
The principle which the more enlightened developers are following is Progressive Enhancement:
Based on Unobtrusive JavaScript and other proper practices
Progressive Enhancement consists of the following core principles:
- basic content should be accessible to all browsers
- basic functionality should be accessible to all browsers
- sparse, semantic markup contains all content
- enhanced layout is provided by externally linked CSS
- enhanced behavior is provided by unobtrusive, externally linked JavaScript
- end user browser preferences are respected
Hopefully the use of inline javascript can be avoided, and the use of javascript libraries such as jquery used.
A good example would be:
document.getElementsByTagName(’div’)[2].getElementsByTagName(’p’)[0];
returns the first paragraph inside the third div in the document.
There is a template group called includes. They are in the process of being added to and under development. The sensible use of includes is good.
Called embeds in EE.
Often it is a tradeoff between convenience in making sitewide changes in one place. and code bloat.
One cannot use EE vasriables (ie:template_group_name) in includes without feeding the conditional to the embeded template. More on this later.
Technical Support:
All tech support is handled through our Community forums. Our staff and the community respond to issues in a timely manner. Please review the Getting Help section of the User Guide before posting in the forums.
Learning resources:
Getting Started Guide
Quick Start Tutorial
Video Tutorials
Additional Support Resources:
ExpressionEngine User Guide
At the top of the control panel is the link to the user guide. It has a search function that works extremely well. Wanting to know more on embeds, or a tag one simply searches for that.