Visual Editors (WYSIWYG)
WYSIWYG editors are HTML editors that attempt to display the web page as it will show on the browser.
The term stands for What You See Is What You Get.
They are visual editors, and you don’t manipulate the code directly. They allow you to create html markup the same way you would write with Microsoft word. The best way to get started with authoring html is to use a visual editor. Most of the time these visual editors are easy to use, but all editors have their shortcomings and do not always create the most efficient code, done 100% correctly. No worries. Most visual editors do a wonderful job with this so you should use them with confidence.
You have a choice with editor software. You can purchase an application (Dreamweaver from Adobe) or find a free one.
Here is a list of a few free Visual editors out there for you to use:
- Online HTML editor
- Dreamweaver Free 30 Day Trial (Both Platforms)
- Google Web Design Tool (Beta, Cross-platform)
- Komposer (Open Source, Cross-Platform)
We have set up an external server for you to use (edtecher.org) for this particular assignment. You will be setting up your own when you build your sites from scratch using the content manager later in this course. We will reference this site in the instructions and notes that follow. If you choose one of the free site builders, you will need ‘translate’ our instructions as needed to comply with the rules put out by these companies.
With that in mind, let’s go ahead and delve into this wonderful world of Web creation…
Setting Up Your Filing System
Technically speaking, you can simply use one folder for all your files. Many web designers do not like to do this. They prefer to have sub-folders set up for images and audio files, style sheets, external scripts, libraries. Whatever you do be consistent. The main folder is referred to as the root. If you use the sub-folder for media (i.e., images, audio etc) then you must specify that folder in the link that is asked for when you insert the image onto the page.
So if you were going to write the html markup for an image tag in your index.html file it would look like this:
<img src="media/myImage.jgp">
This is called relative linking. All of these folders need to stay together in the same configuration they are set up on your computer, or they will not work. If you’ve used relative linking the project will be self contained. When you upload the images using FTP, you need to keep the folders in the same location relative to the root. The root
We now have enough information to do a simple project. Using any one of the visual editors, create a Newsletter for a hypothetical class or a Site page that introduces a product or company (if you are not in K-12 environment). The site should contain three or four images, links to at least three other sub pages that you create, and a link to at least one external site (relevant to the class you are teaching), and a couple other nifty things for them to keep them informed.
One word of caution here… IF YOU ARE CREATING A NEWSLETTER FOR A K-12 CLASSROOM, DO NOT POST GRADES FOR YOUR STUDENTS ON ANY PUBLIC SITE. There are very strict confidentiality laws prohibiting this (called FERPA).
Similarly, if you are creating a site for a business or training function, you need to be aware of any guardianship requirements for confidential information.
Planning a website
Before you start throwing around markup with out any idea what you are doing, it is good to have a plan. For this project, a simple sitemap is a great start. I am going to make a newsletter site that has an index page and 4 assignments. Using simple bullet points, I will make an outline to describe my sitemap
- Home Page – (index.html)
- Spelling Assignment (assign1_spelling.html)
- Writing Assignment (assign2_writing.html)
- Reading Assignment (assign3_reading.html)
- Drawing Assignment (assign4_drawing.html)
You might go even further and write out all of the content that will be on each page. Planning something out will only make it easier when you go to execute. You do not have to turn any of this in. It’s to help you succeed.
Another tool web designers use is the wireframe (the image on the right). Its a basic sketch to describe what you are making visually. It can be used with a client to describe what you are making for them. But it also can be used to just visually work out what you are going for. 
File Management
- Create a folder on your computer called [lastname]_newsletter. So for me, I’d create a folder named lenz_newsletter. Inside that folder place all your pages, including your main page that needs to be named index.html
- Create in the main folder a sub-folder called media. Place in that sub-folder all your images, videos, audio files etc. You will need to put your media in the media folder prior to embedding it on your webpage
- Find the folder on edtecher.org site as outlined in the upload instructions below.
- Upload your Newsletter folder onto the edtecher.org site using Filezilla FTP software, as shown by these instructions.
- Post the complete url for your newsletter on to Canvas and confirm this all has been done by way of answering the confirmation survey questions (like you did before for your HTML assignment).