BlueGriffonPics

= WYSIWYG Editing in BlueGriffon =

** Background - what is HTML? **

A **web-page** is similar to a word-processing document. It contains **text** and **pictures**. The text can use various **fonts** and **formats.** Pictures can be **resized** and **moved around**. The entire document has **basic settings** that control how text and pictures appear.

Unlike word-processing documents, web-pages are based on a standard **description language** called **HTML** (Hyper-Text Markup Language). HTML was invented (actually defined) around 1990. The purpose was to provide a **standard language** for documents that would move around the Internet and should appear the same on various computers. HTML includes special TAGS (codes) that describe images, sizes, fonts, colors, etc. We will learn some details of HTML later, but it basically looks like this:

code This is a very simple example of HTML code. code

In the beginning, HTML was written with a **text-editor**. That made sense 20 years ago, but modern developers want to work faster and produce nicer results. So now we have WYSIWYG editors (What You See Is What You Get), for example BlueGriffon. Using BlueGriffon is pretty similar to using a word-processor. But keep in mind, you are still producing a web-page and this has some peculiar limitations. It is similar to word-processing, but not identical.

BlueGriffon is an **Open-Source** application. That means that many programmers have created this on a **voluntary** basis. You may download and use the program for free, without any registration requirements. [|You can download BlueGriffon here.]


 * Assignment **

We will be using **Ubuntu Linux**, **BlueGriffon** and the **Firefox Browser** in class most of the time. You should do the following today: >
 * learn to boot Linux successfully
 * check that you can use Firefox successfully to browse web-sites
 * use Firefox to download 3 images from Google images
 * create a folder and save your downloaded images on the hard-disk
 * use BlueGriffon to create a web-page
 * save your web-page in the same folder with your pictures
 * insert your 3 images in the web-page, making them overlap like this:


 * Make Draggable Images = [Position:Absolute] **
 * Making the images overlap is not simple. After inserting the image, open **[Panels][Style Properties].**

Click on your picture. Then open the [Position and Layout] section in the Style Properties tool. Find [Position], and click on [Absolute].

You will need to choose an ID for your picture - you can use "Pic1", "Pic2", "Pic3" for various pictures.

Now when you click on your picture again, there will be a **handle** in the top-left corner, with crossing arrows. You can use this to drag the picture around. If you have several pictures, each time you click on a picture it will automatically "move to the front" - careful, this might only be temporary. || media type="file" key="BlueGriffonDraggable.swf" width="540px" height="440px" ||


 * Why Not Use a Word-Processor? **

HTML is a **standard** language. That means it works reliably on all computers (well, almost all). By creating an HTML page, you are making something that is **PORTABLE** and works on any computer. Portability is becoming more and more important, with the advent of new devices like Smart Phones and tablet PCs. Almost all the web-sites that you visit are HTML pages, although some are made with other cool tools like Flash. HTML is simpler and more standard than Flash. HTML loads and displays faster than Flash.

More importantly, we can make our web-pages **interactive**. We can create pages that **do something** when you click on a picture. This is actually possible in a word-processor, but it's difficult. So zou probably have not encountered very many "live" (interactive) word-processing documents.

**How About Using a Better Web-page Editor?**

The most popular web-page editor is DreamWeaver. There are also many others. The good ones cost money - DreamWeaver costs a lot of money. That shouldn't stop us. But the really bad news about DreamWeaver is that it is a large, messy, complex and confusing application. It is not simple. Students will probably learn more, accomplish things more quickly and experience more success with a basic WYSIWYG editor like BlueGriffon.

**What's next?**

Our goal is to make **interactive pages**. That means that something "happens" when you click on a picture - or, even better, something happens **//AUTOMATICALLY//**.