BTT10+-+Webpage+Design

There are millions of web pages on the internet and the number grows by the minute. Since we see so many web pages while on the Internet, it might be interesting to make our own. As you can see, mine aren't too complicated!

Some points to remember:

1. Your web page may look different on Internet Explorer than it does in Firefox or another browser. 2. Keep your links active if you want the page to be useful. 3. Too many graphics take longer to load; specify a size for the graphic to speed up loading. 4. Save all your files and graphics in the __same folder__ or you'll have to specify the whole path to other web pages in your creation.

HTML stands for HyperText Markup Language. It is the programming language used to create web pages. All content on a web page occurs between tags, e.g. This is a paragraph will show that text in a paragraph. Some experts will recommend the use of a simple text editor like Notepad. You could also use a program like [|NVU] which is a so-called WYSIWYG html editor. Regardless, browsers read the tags and render the pages you view.

Alternatively you could create a web presence of your own by using the services of a site. There are free and robust sites that can be created. Have a read at this site:

[]

= Activity #1: Tutorials - HTML - The Language of Webpages = Follow the instructions in the following tutorial. [|HTML Tutorial 1] or Better yet sign up for [|Code Academy] and go through the HTML tutorials

These tutorials, depending on which html editor you have, detail their use. After you have completed the above tutorial, create an html document highlighting the main features for the three html editors below that set them apart from using notepad:

[|Dreamweaver] [|Dreamweaver MX for Beginners][|Frontpage]

Type the name of your website into the following form. Do this only once please: BTT Form = Activity #2: Portfolio Web Page =

It's your turn to create a web page. Your theme will be a portfolio based on your best work this year in each of our units (Digital Literacy, Communication, Word-processing, Presentations, etc.).

Your web page will include at the very least:

1. A heading indicating it's your page and portfolio. 2. A table. 3. A graphic (or more, relating to your interests). Hint: Include the source for your image. If the URL is too large to insert you can use the following link to shorten it. [|tinyurl.com]

media type="custom" key="11414984" 4. A Mailto link. 5. A couple of links to interesting sites. 6. An additional html or other element (scrolling marquee, guest form, etc. - your choice).

Go to Wikispaces and sign up for an educational website.


 * 1) Name it something you will remember (i.e. lastname.wikipsaces.com)
 * 2) Choose a design from the templates available.
 * 3) Center a unique title using the various colours, sizes and fonts.
 * 4) Choose a logo by using Google images (be sure the image is open source).
 * 5) In a separate page named calendar, Insert a calendar from Google for dates and events in your company.
 * 6) Insert a video into your main web page that interests you.
 * 7) You're almost ready to do your project. - More pages to come with details in project below.

Other hints:

It's important to understand you are not using a word-processor. The changes you make will appear online for everyone to see right away. Be careful not to put offensive material up.

Need some tools to make your pages fancy?

[|FlamingText.com] has some free html elements you can create and add to your web pages.

For great free graphics and backgrounds try [|Grsites.com] and [|Cool Archive].

Free banners can be found at [|rewritables.net]. Just add text in Paint and save. OR make your own using Fireworks and [|this tutorial].

__Evaluation__: Your initial web "site" for this activity will be graded by 10 marks for Application and 10 marks for Communication. Use a spell check.

Have fun and be creative. Good luck.

= Project: Design Your Own Web Page =

Fortunately for us, the latest software has made web design simple. There are still a number of things that are important to keep in mind when creating web pages:


 * Planning - it's always a good idea to know //what// you want to do before you set about actually doing it
 * Be easy to find - your web address should be logical and easy to remember
 * Navigation - your site should be well-organised and make it easy for visitors to find what they're looking for
 * Be easy to read - make good choices when it comes to background and font colours
 * Don't overdo it with graphics or text
 * Fill a niche - many sites out there just include information readily available elsewhere or are lists of external links, ie. they offer nothing valuable. Be creative and offer something unique! Information, software, advice or humour, and people are much more likely to visit your site
 * Be interactive - Web 2.0 has made it possible for users to contribute to the pages they visit. Having some kind of user input engages visitors and makes your site memorable

With these principles in mind, your task is to create your own personal website. You will continue from Activity 2 as your general home page, from which you will link to 3 different themes:


 * **BTT portfolio** - this page will document your best work from each of the units we have completed this semester. Write a few sentences describing each unit, including comments on what you learned and what you enjoyed the most about each one. For each unit, include a screen shot capturing your best work, as well as a link to that file

You are free to use whatever software you wish to create your webpage, however I advise you to take advantage of the free online templates that can be used to create a webpage, or simply stick with Wikispaces templates. The following site has a great collection of different templates:

[]

The following sites are also worthwhile reading before you get started. The first one in particular is a little long, but gives some excellent tips on design for your page.
 * [|www.aksi.net/website-design-tutorial.htm]
 * [|www.ratz.com/features.html]
 * [|plainbeta.com/2008/01/12/what-makes-a-web-sites-design-look-good-7-ideas-for-you-to-think-about/]