Web Design - Montrose Adult School, Fall 09

How to create a symmetrical or specified-width table in KompoZer

2009-11-02T18:18:00.000-08:00

Inserting tables in KompoZer is as simple as clicking the table icon in the toolbar. However, getting a symmetrical table proved to be a little more complicated. I promised in class that there must be a way to do it and that I would find out; mission accomplished!

The trick is to create your table first, then click inside the top left cell. Right-click and choose Table Cells Properties.

If you want a symmetrical table, click the box next to Width, type the desired width (50 if you have 2 columns, 33 for 3, 25 for 4, etc.) and click the drop-down to choose "%of table." Click Apply. Then click the "Next" button under Cell at the top and do the same thing for the next cell until everything in the top row has been covered. That's it!

For a fixed-width table, do the same thing but type in the pixel width for each top cell and leave the default at "pixels".

Second project file (last class)

2009-11-02T18:16:00.000-08:00

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Sample Website</title>

<meta name="description" content="Demonstration website">
<meta name="keywords" content="sample,HTML,CSS,">
<meta name="author" content="MAS HTML class">
<style type="text/css">
html,body{margin:0;padding:0}
body{font: arial,sans-serif}
p{margin:0 10px 10px}
a{display:block;color: #006;padding:10px}
div#header{position:relative}
div#header h2{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{background:#B9CAFF}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}
div#container{width:700px;margin:0 auto}
div#navigation{float:left;width:350px;height:100px;}
div#extra{float:right;width:350px;height:100px;}
div#footer{clear:both;width:100%}
</style>
</head>

<body>
<div id="container">
<div id="header">
<h2>Welcome to our sample website</h2>
</div>
<div id="content">
<p class="border">We will demonstrate a number of HTML
coding techniques,
including images, links, and styled layout.</p>
<p>Thanks for visiting!</p>
</div>
<div id="navigation">Navigation links go here</div>
<div id="extra"><a href="mailto:hce@epix.net">Email us.</a>
<a href="mailto:hce@epix.net"><img alt="" src="mail.png" height="48" width="48"></a></div>
<div id="footer">Copyright 2009</div>
</div>

</body></html>

Project file we worked on in class

2009-10-26T18:06:00.000-07:00

Handout & slides from 4th class

2009-10-05T19:00:00.000-07:00

Both up at Scribd: the presentation and the handout on CSS box model.

File worked on in class

2009-09-29T17:40:00.001-07:00

<html>
<head>
<title>Embedded Style Sheet 2</title>
<style type="text/css">

</style>
</head>
<body>
<div style="text-align:center;width:80%;">
<div style="width:1px; background-color:silver; padding:20px;float:left;">
<p class="this-style">Here <span class="span-green">three types</span> of paragraph style are identifed in the head.
</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="that-style">This is another style.</p>
</div>
<div style="width:100px;border-width:4px; border-color:green; border-style:solid; padding:20px;float:left;margin:20px;">
<p class="this-style">Many paragraphs can be styled the same <span class="span-green">without having to repeat the code</span>.</p></div>
<p class="other-style">You can create as many styles as you want. <a href="http://www.google.com">google</a>
</p>

</div>
</body>
</html>

Span test

2009-09-29T16:33:00.003-07:00

Embedded style sheet 2

2009-09-26T12:17:00.001-07:00

Embedded style sheet 1

2009-09-26T12:09:00.000-07:00

<html>
<head>
<title>Embedded Style Sheet</title>
<style type="text/css">

</style>
</head>
<body>
<p>The body and all paragraphs are controlled by a style sheet in the head section of the page.</p>
<p>
All paragraphs will have the same style...</p>
<p style="text-align:left;color:black;font-weight:normal">
...unless it's overridden, in this case by an inline style.</p>
</body>
</html>

Inline style demo

2009-09-26T12:00:00.000-07:00

<html>
<head>
<title>Inline Style</title>
</head>
<body>
<p>This is a default paragraph.</p>
<p style="text-align:center;color:green;font-family:cursive;">
This paragraph is styled by a command in the tag.</p>
<p>The next paragraph reverts to default.</p>
</body>
</html>

Materials from 3rd class

2009-09-25T04:50:00.001-07:00

The handout was this trifold from DeepX, a company that's since gone out of business. I will put up a simpler CSS cheat sheet once I write it! The presentation is here (you can view and/or print from Scribd).

Testing file

2009-09-22T17:35:00.000-07:00

Here is Walt's sample HTML file for his future reference:

<html>

<head>
<title>Montrose Firewood, Inc.</title>
</head/>

<style type="text/css">

</style>

<body>

<p class="thiskind"
here is my centered para
</p>

<p class="thatkind"
here is my left-aligned para
</p>

<h1>Locust Wood Special!</h1>
<hr>

<ul>
<li>16 inch!</li>
<li>Split clean!</li>
<li>Seasoned!</li>
</ul>

<h> &#128 50 per face cord <h>
<hr>
<p><i><b>Good Night!</i></p></b>

<a href="mailto:wkostyk@gmail.com">Email Walt</a>

<br>
<br>

<a href="http://theorem.ca/~mvcorks/cgi-bin/unicode.pl.cgi?start=0530&end=058F">Visit my website</a>
<br>

<img src="sunset.jpg" height = "250" width="350"

<br>
<br>

<table border=2>
<tr>
<td>233</td>
<td>456</td>
</tr>
</table>

<p style="font-weight:bold;color:red; text-align:right; background-color:aqua">
Test Paragraph #1
</p>

</body>

<html/>

Embedded style

2009-09-22T16:57:00.001-07:00

Copy and paste for class

2009-09-22T02:40:00.000-07:00

Sample code with a link:

<html>
<head>
<title>Test Web Page</title>
</head>
<body>
<p>Here's a <b>paragraph</b> with a <a href="http://www.cuteoverload.com">link</a>.</p>
<img src="image.jpg" height="50" width="50">
</body>
</html>

I'm using a "convert special characters" page.

Unicode HTML entities

2009-09-15T04:10:00.000-07:00

The chart I'm going to hand out in class tonight only covers the basic HTML entities. With Unicode you can do thousands more. Check out these tables!
➨ ✄ ✈

First class

2009-09-12T10:12:00.000-07:00

The first class was lots of fun--thanks, everyone!

As promised, here are the documents from class: the presentation, document structure handout, and tag handout. You can find them all together in the Scribd group I set up for the class. If anybody needs them in PDF format, just send me an email.

Welcome to HTML/CSS

2009-09-07T11:47:00.000-07:00

I'll be posting lectures and helpful links here. Welcome aboard! Past posts are from the 4-week Intermediate Web Design class I taught in Spring 2008. We will be covering most of the same material, but in more depth.

Third class

2008-04-20T08:49:00.000-07:00

We spent pretty much the whole class in a hands-on exercise setting up an XHTML page and a style sheet, using Notetab to view the two documents and Internet Explorer to preview. We covered Control-S to save as you go along, Refresh to preview your pages, and the test/preview/test cycle. I provided lots of real-life examples of things going wrong, which is exactly how things go with web development. When you get an unexpected result, add or change something to narrow down what the problem is.

At the end we briefly looked at web site statistics and their uses: seeing how your users are finding your site, what browsers and operating systems they are using, which pages they visit, how long they stay, etc. It's addictive!

There was one handout, a different overview of XHTML tags, which can be found here.

Second class: lecture presentation and handouts

2008-04-09T04:59:00.001-07:00

Scribd links to the PowerPoint lecture, and the XHTML/box model handout. The CSS trifold is from RefCards.com, a very useful site.

Useful links for the second class

2008-04-07T18:34:00.000-07:00

Try CSS quickly & easily with W3 Schools' TryIt (click an example on the page)

Good CSS resources: SitePoint, W3 Schools

Impressive demonstration of the power and beauty of CSS: csszengarden.com

Font sizes in CSS reference

Choosing colors: ColorSchemer, ColorSpot, W3School's background tester

Free XTHML templates: Open Source Web Design, Nuvio, Styleshout

Valid Document Type Declarations from THE site: http://www.w3.org/

Useful programs

2008-04-05T08:17:00.000-07:00

FTP clients:

SmartFTP (recommended)
FileZilla

HTML editor:

KompoZer

Text editors:

First class

2008-04-04T16:45:00.000-07:00

The PowerPoint from the first class is here, and the Brief XHTML handout can be found here (or in PDF format).

Welcome to Intermediate Web Design

2008-03-31T19:27:00.000-07:00

I'll be posting lectures and helpful links here. Welcome aboard!