Monday, October 31, 2011

Drop Caps --Add some flair to your web pages

The web page below is located here

Friday, October 28, 2011

Pull Quotes --Try This!


Screen shot 2011 10 28 at 11 30 19 PM

 

Want to know how?

Go to this web page Read the source, load it into your web editor... and have fun!

Thursday, October 27, 2011

Border TRouBLe, a CSS shorthand tip!

TRouBLe is a mnemonic, a learning aid... for CSS values for border, padding and margins

Instead of writing:

  • border-top-width: 2px;
  • border-right-width: 3px;
  • border-bottom-width:4px;
  • border-left-width:3px;

 

 

 

 

You can just write border-width: 2px 4px 6px 8px;

The order is Top, Right, Bottom, Left easily remembered with the word TRouBLe!

Also if you don't want the right side to have a  value at all, instead of writing 0px, don't add the unit, just write 0

For example:

border-width: 2px 0 6px 8px;

 

Week 4 -Outline and Resources

Week 4 Outline

 

CLASS #4 Notes:
“Don't make it hard for your clients
to contact you" --anon

 

Building a banner, positioning content, menu layout and contact forms.

Subjects
  1. Banner -Inserting backgrounds, images.
  2. TRouBLe --Position Rules
  3. Menus/navigation
  4. Layout
  5. Contact Forms! (Next week)

Objective

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

This week

  • Banner -Inserting backgrounds, images.
  • Menus/navigation
  • Layout TRouBLe --Using the Position Rules

How! Web Page Creation Preparation for Week 4

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

The Banner Tutorial -images & backgrounds and html5
The Banner Tutorials

Generating Menus
The Menu Tutorials
The List-o-matic menu generator
List-o-matic

Layout
Using the Position Rules
Try some simple layouts

Homework

  1. Generate a menu, and insert on your web page
  2. Finish the layout of your "home" (index.html) web page
  3. Duplicate your index.html web page 3 times... and re-name them Contact.html, About.html, Product.html
  4. Read all about Contact e-mails and Contact Forms!
    The Contact Form Tutorial

Navigation Here

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

Monday, October 24, 2011

WYSIWYG --Visual Web Editors

Is there a way to edit a web page directly without using an html text editor? Is there a way to design a web page visually?

The answer is, YES! Sometimes a visual editor is real handy to have  around!

If you have purchased the Coffee Cup HTML Editor, you'll discover that it comes with a visual editor. You might not notice it as it might be "turned off!"  I found this "Faq" on the Coffee Cup web site.

Visual Editor Tab not displaying at all.

Solution: With the update to the latest version of the HTML Editor, the Visual Editor has been turned off by default. We did this to provide the best possible user experience. But don't fret — this is an easy issue to fix. To re-enable the Visual Editor, launch the Editor and go to the Tools > Preferences > General tab. Once there, uncheck the Hide Visual tab option...

Prefs visual

 

When you click on the Visual Editor Tab you can edit directly on the web page.

Insert HTML elements just like using a word processor...

Visual ed cp

Give it a try!

Coffee Cup has another Wed Editor that could be better described as a web designer.  It's called Visual Site Designer.

If you are visually oriented this might be a great editor for you.  You can download a free trial from Coffee Cup's web site

3207-coffeecup-visual-site-designer1.jpg

 

If you have a Mac (or a PC) you can try the Open Source program Kompozer (It's Free)

Click the link below to start the Download and give it a try.! Load a web page and start adding your content directly on the web page!

 

Kompozer

 

There is other software, noteablely Adobe's  Dreamweaver, but this class is not about web editors, it's about  creating a web site!

Web Editors are our tools of the trade!

Got a question,? 'Holler!

 

 

Thursday, October 20, 2011

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

 


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

Sunday, October 16, 2011

Week 2: Check List and Homework

Howdy

Where we are at, a check list:

Week 1

  1. Your web editing environment should be setup. 
    1. For this class the Master Web Site Folder should be on your Thumb Drive
  2. Downloaded and installed your web editor of choice
    1. It is important that your web editor, when it opens can access the files in your Web Site Master Folder.
    2. Otherwise your web site just won't work!
    3. Your web editor knows how  to link to your Web Site Server (if you don't have one yet, that's okay)
  3. Downloaded and installed at least 3 web browsers

You can access all the information you need to achieve above from the web page for Week 1: Getting Started

The result is that when you come to class you can startup Coffee Cup or Dreamweaver, or the editor of choice on your laptop and be ready to work.

 

Week 2

You should now be able to:

  1. Load a web page located in your Master Folder to edit in your html editor.
  2. Insert between <body> and </body>  using your web page html editor your content as text  and image(s)
  3. You should be able to format the inserted material as html elements. Especially:
    1. Headings
    2. paragraphs
    3. lists
  4. You can access all the information you need from the web page Week 2: Content and xhtml

Other Homework

On the CLASS CD is a .pdf file called textbook-short version.pdf read up to Splitting Up the Page on page 42.

If you have the book, Build Your Own Web Site The Right Way by Ian Lloyd,  read up to page 59

You can download the first 4 chapters of the book from Sitepoint.com for free. It's a really good book.

I'd also like you to just read about "links" on the class web site Links: It's what makes the Internet Work!

 

Next: Is there an "other" way to edit make web pages?

 

 

 

 

 

 

 

 

 

Wednesday, October 12, 2011

Create a Web site - Weeks 2 outline

Week 2 Outline

CLASS #2 Notes:
“If you really want to know if your
Web site works, ask your next
door neighbor to try using it, while
you watch.
(You bring the beer.)”
http://www.sensible.com/

 

Content and xhtml

Subjects
  1. Adding Content to a basic Web Page
  2. xhtml - some rules
  3. (x)html elements - defined
  4. Formatting your content
  5. The <img /> element
    • Image editing
    • Inserting a graphic on a web page

     

Objective

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

This week

  • --Adding Content and formatting content with xhtml
  • Working with images

How! Web Page Creation Preparation for Week 2

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

The xhtml rules
http://uofgts.com/BasicWD/xhtml.html

Oh no, more rules! Things you need to know!
TYNTK

A VERY basic xhtml web page
The Basic Web Page

SumoPaint SumoPaint

Homework:

An xhtml tutorial
The Building Blocks of a Web Page

Format your content
Using the Web Editor of your Choice
Either start with a Basic Blank Page
BasicCSSpage.html, Basic-xHTML-page.html

Or Choose one of these layouts.

html5-3col.html, html5-2colindex.html,

Basic-layout.html

Play with Sumo Paint

SumoPaint
add an image or graphic or logo to your content!

An image tutorial
Inserting Images

Navigation Here

Some vocabulary

.php

- Personal Home Page is actually a server side scripting language
An xhtml element
is made up of an opening tag like <h1> and a closing tag </h1>.
Depreciation
- deprecation is applied to software features that are superseded and should be avoided. Deprecation may indicate that the feature will be removed in the future. Features are deprecated—rather than being removed.
http
- hyper text transfer protocol.
ftp
- file transfer protocol
XHTML
– The Extensible Hypertext Markup Language.
a markup language that has the same depth of expression as HTML but also conforms to XML syntax.
The intersection of HTML and XML a reformulation of HTML in XML.

 

Sunday, October 09, 2011

Create A Web Site. What you need to do first review.

Howdy

Rule #1 Test early, test often.


I hope you all enjoyed the first Create A Web Site Class and you are looking forward to next weeks class as we are going to make a web page!

Yes, I know, in the mean time... there is a lot of busy work... it'll get better, I promise!

Setup
The first thing you need to do is finish setting up your "work" environment. 

1. You need to install on your computer several web browsers, so you can follow Rule #1
"Test early, test often"

Setting up our work environment on your computer.
Install at least 3 browsers, Internet Explorer, Firefox and Chrome (You might also consider Safari and Opera)
If you have a Mac--- there is NO Internet Explorer for a Mac!

So, how do you test your web pages for IE? 
For now you can use Adobe's Browser labs... (you don't need to own any Adobe Software!)

After April 12, 2012 Adobe Browser Labs  will be a subscription service.

https://browserlab.adobe.com/en-us/index.html

2. Install your editor

Install CoffeeCups Free HTML Editor, you can download it from CoffeeCup's Website

Or install the web Editor of your choice.

I ENCOURAGE you to experiment and try different web editors, so if you have a preferred Web Editor, by all means use it!

You might find this article interesting, I wrote it a while back

http://stasiuk.blogspot.com/2008/10/web-page-editing-nirvana.html


Step 2:
Setting up your Master "Local" website

From the Class CD Copy the YourWeb-Site Folder to a Flash Drive (USB Stick Drive) so you can work on your site at school or at home or at work!


Also maker an "empty" Website-Parts" folder on your flash drive.
(After you are done with class you can copy the folders  to where ever you want on your computer.

Step 3:
Sit down and write out what you think you want on YOUR home Web Page --The Content.
You can use pencil and paper, Word, or the Web Editor of you choice like coffee cup.

Don't worry about Xhtml or CSS, we'll do the formatting in class.

Save your "content" information and bring it to class...

remember, its the most important information on YOUR web page... the content!

We'll make our first web page in class Wednesday!

Resources

Read the online Lesson 1 for help in figuring out your content.


I highly recommend the following book
Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition by Ian Lloyd Edition: ISBN: 978-0-9804552-7-4 Published: December 2008

(It's now in it's 3rd edition.)

If you have the book, Read Chapter 1 and Chapter 2 through to the end of page 47ish

If you don't have the book, On the Class CD disk in the folder "Articles" read The BeginnersGuide.pdf, it is a terrific synopsis of the above Ian Lloyd's book, of all things written by Ian Lloyd!

You can also down load the sample pdf for the book at  sitepoint.com. The Sample download has at least the complete chapters 1 and 2!

Have fun!
If you have any questions 'holler
but, I think a post (comment) here works much better

Got a question, Post a comment or send me an e-mail

Friday, October 07, 2011

Coffee Cup Video Tutorials no longer exist!

Thanks to Garland Holt for informing me that the Coffee Cup Setup video no longer exists!

Darn!

I contacted the folks at Coffee Cup and here's the response

 

Hi Garry

Our traffic to the videos was so low we decided it just was not worth the effort to continue. It just became more work then it was worth.
On a plus side, we have a great many tutorials on our website at
http://www.coffeecup.com/help that will answer anything and everything about our software. 

~_~_~_~_~_~_~_~_~_~_~_~_~_~_~_~
Scott A. Swedorski - VP of Product Development
CoffeeCup Software Inc.
Phone: 678.495.3480Hi Garry

 

 

Garland stated in his e-mail that there are lots of Coffee Cup users that have made videos on how to use the software. Here's the link

Garland sent http://youtu.be/A8qCy3o7hso it's by instructor Teresa Pelkie at Palomar College. There are other videos too!

Perhaps you can view the videos and let us know which ones you like the most.

This link will take you to the step-by-step instructions for setting up your Master website

http://www.coffeecup.com/help/articles/working-with-website-projects/#creating

 

at this link you can explore all the tutorials that Coffee Cup has posted

http://www.coffeecup.com/help/articles/


Got a question, comment or send that e-mail!


 

 

 

Thursday, October 06, 2011

Setting up your Mac

Howdy

The Mac folks want you to place your  master "website"  in a folder called Sites. It's a shared folder located in your home folder

Yourmacusername > Sites

If you have an index file in the Sites folder you'll see it In your browser if you type

http://127.0.0.1/~yourmacusername/index.html

(127.0.0.1 is the same as the phrase "localhost") so you can also type

http://localhost/~yourmacusername/index.html

You'll see your index.html page in the browser

This works as the Mac comes with server software built-in, it's called Apache.

If you need to run PHP and a SQL database, there is a different configuration... For now the above works! But, if you need help setting up PHP and SQL let me know...

On my Mac I use a program called Coda

I like Coda, as it can display the markup, the css and a preview, all at the same time.

It looks like this, Files on the left, the html next, a preview and a CSS editor on the right.

Coda

It would look much better, and less cluttered on a larger monitor... (one day I'll get the 27 inch iMac)

Here's a link on  to how to setup Coda. It's from their developer user page...

You can try it out for free for a 30 day period. Panic, the publisher/authors are local, they live in Portland.

Here's the link

http://www.panic.com/coda/developer/

 

If you have any questions, send that e-mail!

 

 

Setting up Dreamweaver for Macs and PC's

It's really important to setup Dreamweaver BEFORE you begin any project.

Here's a link to my "Dreamweaver" website for setting up Adobe's Dreamweaver

 

First.
Click on the "File Management" tab, it's a link to a really good Adobe tutorial movie...

(You'll need the ftp address from your host, and your log-in password for your website.)

Second.
Click on the "Set Up" tab. Each menu listed in the tab will popup specific instructions for the listed menus. The popups are:

Preferences > General

AP Elements

File Types Editor

New Document

Preview In Browser

Status Bar

Got a question? Send that e-mail! or leave a comment!

 

 

 

 

Setting up Coffee Cup's FREE html Editor

Howdy
This video from the CoffeeCup Website takes you through the steps to set up Your website project(s), For our Class the Your "Master-website" Folder on your computer.
After you have copied the "YourWeb-site" Folder to your USB drive, and renamed it.  Watch the video and follow the steps.


When you are done with the video the Editor's MY Website Tab, Local Disk, should look like this...

except I added some html5 layouts... "html5-3col.html" and "html5-2colindex.html"





Have fun playing with the free HTML Editor, and working on formatting the content.for your website.

Questions?  Send an e-mail