Basic_Webpages

Page needs some revising to become completely standalone =Basic Web Design =

Overview:
= = In this lab you will begin by creating basic web pages that contains both formatted text and images. In the "Advanced Web Design" lab, you will enhance your pages by adding media. Keep in mind that the more you play and experiment with your web pages the better you'll become at learning how to do this. Take a brief overview of Google Sites and Weebly by watching the videos in step one of each section and also visiting the site to look at a few examples. Then choose one you would like to use for your web site. (You can always try the other out fairly quickly to see which you like better by copy and pasting content from the first site you create.)

Objectives:

 * 1) Be able to compare and contrast different web development applications in order to understand which tools might be most appropriate in particular contexts, for particular tasks, and for particular types of users
 * 2) Create basic web pages that contain formatted text and images
 * 3) Demonstrate control over placement and format of basic content elements
 * 4) Integrate different web development technologies into a coherent project

Google Sites allows you to quickly create web //sites// and their component web //pages//. In each page you have "elements" such as headers, columns and a main content area that can be edited in WYSIWYG style. WYSIWYG, or "**W**hat **Y**ou **S**ee **I**s **W**hat **Y**ou **G**et", is a style of content creation that hides the HTML (or other) code so you can edit your content in a more user-friendly style. Google Sites has a minimalist design, so your site will look relatively plain at first but as you play with it, you can add more images and other media to liven it up. A key benefit of Google sites is that it allows you easily to tie into other Google features like Docs, Spreadsheets, Presentations, Blogger, etc. It also allows for adding multiple editors to make a collaborative site, much like a wiki (which is the underlying structure actually of Google Sites). Be sure to complete your Google page before moving on to Weebly.
 * 1) Watch these three short videos to get an idea of what Sites can do.
 * 2) Video Tour
 * 3) Video Tutorial
 * 4) Interactive Tutorial
 * 5) //If you choose to use Sites//, enter Sites and set up your home page. Remember: if you get stuck at any point then visit the Sites help center.
 * 6) Experiment with the editing interface and change or add a block of text.
 * 7) Insert an image, either from your computer or from a location on the web.
 * 8) Alter the layout so it displays more than one column.
 * 9) Try changing the design by clicking "Site Settings" link in the top right of the page, and clicking on the "Appearance" tab.
 * 10) Finally, publish your page and see what it looks like.

Next take a look at Weebly


Weebly is a web site & page editor similar to Google Sites, however it comes with more visual elements built in. Its templates allow you to start off with a nice looking site quickly. To get started:
 * 1) Watch this short overview of Weebly
 * 2) Go to Weebly and register for an account. You will need to enter a unique username, as well as a password and your email address.
 * 3) Create a new site by clicking the "Create a Site" button.
 * 4) To get started, simply follow the on-screen pop-up help.
 * 5) After following the on-screen help, experiment with adding various content types listed across the top of the screen.
 * 6) Try changing the properties of a block of text.
 * 7) Add an image and experiment with resizing and positioning it.
 * 8) Alter the "Design" of your site and find one that looks good to you.
 * 9) Try adding a two-column element to your page.
 * 10) Finally, publish your site and view it on the web.

Note that both of these web site creators, like many free sites, are in constant development which means that stability is somewhat shakey. This is something to get used to! Web technologies are advancing so rapidly and these websites are adding features so frequently that they are in an almost perpetual state of flux. Take a minute to consider the differences so far between Sites and Weebly.
 * What do you see as the strengths of each program so far?
 * How do they differ in the way you add and edit content?
 * Do you have a preference for one over the other? Why?

Key Web Skills:
As we have seen, some of the important skills required for creating basic web pages include:
 * Creating and saving pages
 * Creating headings
 * Creating paragraph text
 * Adding and positioning images
 * Linking to internal and external web pages
 * Publishing your pages, or making them "live"