Web Design - Montrose Adult School, Fall 09: 2009

Monday, November 2, 2009

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

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)

<!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>

Monday, October 26, 2009

Project file we worked on in class

Monday, October 5, 2009

Handout & slides from 4th class

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

Tuesday, September 29, 2009

File worked on in class

<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

Saturday, September 26, 2009

Embedded style sheet 2

Embedded style sheet 1

<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

<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>

Friday, September 25, 2009

Materials from 3rd class

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).

Tuesday, September 22, 2009

Testing file

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

Copy and paste for class

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.

Tuesday, September 15, 2009

Unicode HTML entities

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!
➨ ✄ ✈

Saturday, September 12, 2009

First class

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.

Monday, September 7, 2009

Welcome to HTML/CSS

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.

Web Design - Montrose Adult School, Fall 09