Week 4 - Review and Homework

Building a banner, positioning content, and menus 

Layout Review

Using the Position Rules
Making layouts

The Banner Tutorial -images & backgrounds

This tutorial uses Xhtml strict a good exercise would be for you to convert it to html5
The Banner Tutorials

For WYSIWYG users -- use an existing wireframe? Start here...

Homework

1. Finish building the layout/wire frame of your "home" (index.html) web page
2. Use this layout generator---  CSS Layout Generator it can make equal height columns regardless of content… This is an example…URL is http://uofgts.com/BasicWD/layout/index.html

1. Add YOUR content for the JUST the header (banner)
2. Make Your Own Menus use the The Menu Tutorials (There are cut and paste examples)
3. Or use The List-o-matic menu generator List-o-matic
4. Don't like List-o-matic Try this generator try Pure CSS Generator
5. Make menus for Home, Contact, About and Products
6. Insert the menus on your web page
7. Now duplicate your index.html page 4 times, rename 3 of them: about.html, contact.html and products.html
8. Congratulations, you now have the beginnings of a web site!

You can use Wizards and Widgets to embellish your web site!
Web Tools, Wizards and Widgets

 

On-Line and desktop References for html and CSS

CSS at Sitepoint.com

HTML at Sitepoint.com

Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the Sitepoint on-line references for CSS and HTML. Check out Code Burner!

Graphically Challenged?

The Cool Text web site will help you design a logo. The Cool Text Wizard

 

Gota question? 'Holler

Welcome to How To Build a Website!

Our Objective

• To build a web site consisting of at least 3 web pages.
• Acquire a domain name
• Sign up with a HOST

How?

Discussion
Domain Names and registration
Signing up with a host

Domains and Hosts

What's the most important "THING" on a web page? What are the main parts of a web page?

Can you List them?

Write THEN CHECK OUT THIS LIST...

How do you put a web page together?

1. The Content First
• Create it with a text editor
• Later we will mark it up with xhtml/html5 in your web editor
2. The Layout
• Will be Created with CSS3 in your web editor
3. The Style
• Will be Created with CSS3 in your web editor

Web Page Creation: The Preparation

You'll need 2 folders on YOUR flash drive and/or Home computer

1. Make a "Master" website folder
   1. Name it with "Your name" something like "Garry-MasterWebsite"
   1. This folder only contains the files that makes your website work.
   2. And Make A "Webstuff" folder.
   1. This folder will contain the parts you collect to make your website...
      1. Things like, IDEAS, Text files, widgets, lists of links, graphics, pictures, videos... etc...

   Web browsers

   Here's a list that links you to web browser publishing sites Download all the browsers! Install them!

   The Web Editors

   If you already have a Web Editor, by all means, use it! The following is a link to a web page that discusses the various kinds of web editors and give you some choices. The goal here is to find a web editor that you like, and that will help you build your web site. The Web Editors

   Homework:  Write the most important part of your web pages

   The Content
   Always write the content first as plain text with no formatting.

   You'll find some ideas at this web page that will help you "layout" your web page. Lesson 1: Penciling it out!

    

   Most of all have fun! Get stuck, send an e-mail…

   Navigation Links

   • Week 1 (That's this page on my web site at the bottom of the page you'll see an RSS News feed that displays links to the last 5 articles on the class website blog)
   • Home   (Class Portal page)
   • Lesson 1 (Interesting stuff)
   • Domains and Hosts Resources 
   • Contact

   Vocabulary 

   URL

   ---Uniform Resource Locator

   HTML & CSS

   --- HTML, Hyper Text Markup Language, creates the content of a web page.

   --- CSS, Cascading Style Sheets, Creates the Styling for a web page.

   Provider

   --- Physically links your computer to the Internet.

   Host

   --- Provides the Computers (servers) to store and host your web site on the internet.

   Domain Name (Server) (DNS)

   --- makes a recognizable name for the actual numerical Internet address.

   Got a question? 'Holler!

Week 3 Review -The Box Model and Basic CSS

Week 3 Outline

CLASS #3 Notes:
“People don't read web pages,
they scan them!" --anon

 

The Box Model. Div's and CSS

Subjects

1. The Box Model
2. Div's
3. CSS, some simple rules
4. How to Make a Banner/Header

---

 

Objective

To build a web site consisting of at least 3 web pages.

This week

• How to use the <div></div> element. The Box Model
• Styling with CSS

---

How! Web Page Creation Preparation for Week 3

Resources for this week -- go to these URL's

The Box Model
http://uofgts.com/BasicWD/BoxModel.html

Basic CSS Rules
http://uofgts.com/BasicWD/CSSRules.html

---

Homework

Work through the Banner Tutorials

---

Navigation Here

• Week 3
• Home
• The Box Model
• Basic CSS Rules
• The Banner, Parts 1 - 7

 

---

On-Line and desktop References for html and CSS

CSS at Sitepoint.com

HTML at Sitepoint.com

Sitepoint also offers a "plug-in called Code Burner, it's a quick interface that resides on your desktop or in your FireFox Browser. It is linked to the sitepoint on-line references for CSS and HTML. Check out Code Burner!

---

Graphically Challenged?

The Cool Text web site will help you design a logo. The Cool Text Wizard

Create A Web Site - Week 2

Howdy

One component of making a web page is obtaining/making/inserting photos and "graphics" .
(did I tell you that there is a lot of busy work involved in making a web page?)
To make graphics and edit your photos for the web you need software specifically designed for that purpose, like Photoshop.
SumoPaint a free "on-line" Paint program that runs in your browser, and is one of the best available...
If you need help with Sumo Paint you can find many amazing Video Tutorials

If you don't have any artistic skills, you can hire a graphic artist, but you might be able to find the components you need on-line. Instead of doing a "plain" keyword search, use "image" mode instead...
his link takes you to a google "image" search for gradient backgrounds. Some "free" art web sites offer graphics that are "free" to use after you pay for the "right" to use them... and sometimes that is a good solution! You can find backgrounds, buttons and all kinds of Clip Art on the web...
Best advise? Support your local artist.

Tip: HTML On-Line References (your best friend)
To learn more about the image <img> HTML tag/element check out Sitepoint.com's on-line reference book "HTML Elements"

Links - Hyper Reference Links are what make the internet work.
This class web page defines "Links" and demonstrates how they work.

TIP
Read the page... and Remember!!! if you want to see how the "markup" for that or any web page works you can always look at the web pages source!!!
In Internet Explorer the menu is
View > Source
In Fire Fox it's
View > Page Source
In Chrome it's
View > Developer > View Source

I have placed comments in the markup to help you find what you are looking for.
You can cut a paste the source code and use it on your web page!!!!

For more info on how the "box" model works read this...

Your Home work
Make or find the graphics/photos you want for your web page (an on going project).

Work through the rest of Chapter 2 and At least Read ALL of Chapter 3
There is a lot going on in Chapter 3, but I will cover the key parts in the next class...
Try and work out the examples, if you get stuck, thatsl be a good place to stop... and post your question here!

Most of all, have fun!