Forum Home
Press F1
 
Thread ID: 39744 2003-11-16 02:08:00 Best (free) web page builer to use??? porpora (3036) Press F1
Post ID Timestamp Content User
192358 2003-11-16 02:08:00 Hi ...

what is a good web page builder to use for someone (like me) who is not a computer programmer. I gather WYSIWYG is the way to go, but which program??
All I want to do is have a go at designing something, with a view to in the future maybe something like sharing family news and pictures with friends and family.

Thanks all

Julia 		porpora (3036)
192359 2003-11-16 02:20:00 Arachnophilia (www.arachnoid.com) is reportedly very good and easy to use - am unsure of the interface. It is also free.

[www.macromedia.com]Dreamweaver[ is unarguably the best WYSIWYG out there, however it is expensive (unless acquired by other means). 		whiskeytangofoxtrot (438)
192360 2003-11-16 02:22:00 Ummm url tag messed up...

Dreamweaver (www.macromedia.com) 		whiskeytangofoxtrot (438)
192361 2003-11-16 02:36:00 everyone's going to recommend their favourite application, it's a very open question...

ones you pay for:
*frontpage if youre more comfortable with a default microsoft interface, it used to produce quite messy code but the latest version is far improved in this area
*dreamweaver if you want a more standards compliant editor.. its macromedia UI adds a learning curve, but once you've got it figured out it's very powerful

but you dont want one that you have to pay for do you?

The best free WYSIWYG editor I've used is Composer, which comes packaged with Mozilla:
http://www.mozilla.org/ 		whetu (237)
192362 2003-11-16 02:41:00 Notepad.... :D
Or rather something a little more advanced like gedit that'll show you the tags in diff. colors.

Word/OpenOffice will do WYSIWYG.
There are better ones out there too, but for a price.
Remember that with WYSIWYG editors, you'll always have a lot of excess code... sometimes too much.
it may pay to have a look into basic HTML, you'd be surprised how far you can go with it!


Chill. 		Chilling_Silently (228)
192363 2003-11-16 03:33:00 >>Remember that with WYSIWYG editors, you'll always have a lot of excess code... sometimes too much.

you're going to get a lump of extra useless code if you use word, a few extra lines with frontpage, and nothing unecessary with dreamweaver and composer... let's compare:

A simple example with the words "Hello World" centered, verdana font and upsized a bit. Underneath that an image randomly selected from my pictures folder...

joe.handcoder would be producing code like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>hello world!</title>
</head>
<body>

<p align="center">

Hello World
</p>

<p align="center">
images/whatever.jpg
</p>
</body>
</html>

okay, that's what we'll use as a control.

the same from wordXP:

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="www.w3.org

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 10">
<meta name=Originator content="Microsoft Word 10">
<link rel=File-List href="Hello%20world_files/filelist.xml">
<link rel=Edit-Time-Data href="Hello%20world_files/editdata.mso">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>Hello world</title>
<!--[if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>my name was here</o:Author>
<o:LastAuthor>haha none of your business</o:LastAuthor>
<o:Revision>1</o:Revision>
<o:TotalTime>1</o:TotalTime>
<o:Created>2003-11-16T03:02:00Z</o:Created>
<o:LastSaved>2003-11-16T03:03:00Z</o:LastSaved>
<o:Pages>1</o:Pages>
<o:Words>2</o:Words>
<o:Characters>13</o:Characters>
<o:Company>g33kflat</o:Company>
<o:Lines>1</o:Lines>
<o:Paragraphs>1</o:Paragraphs>
<o:CharactersWithSpaces>14</o:CharactersWithSpaces>
<o:Version>10.2625</o:Version>
</o:DocumentProperties>
</xml> <![endif]--> <!--[if gte mso 9]><xml>
<w:WordDocument>
<w:SpellingState>Clean</w:SpellingState>
<w:GrammarState>Clean</w:GrammarState>
<w:Compatibility>
<w:BreakWrappedTables/>
<w:SnapToGridInCell/>
<w:WrapTextWithPunct/>
<w:UseAsianBreakRules/>
</w:Compatibility>
<w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
</w:WordDocument>
</xml> <![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;
mso-font-charset:0;
mso-generic-font-family:swiss;
mso-font-pitch:variable;
mso-font-signature:536871559 0 0 0 415 0;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
@page Section1
{size:612.0pt 792.0pt;
margin:72.0pt 90.0pt 72.0pt 90.0pt;
mso-header-margin:35.4pt;
mso-footer-margin:35.4pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin:0cm;
mso-para-margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:10.0pt;
font-family:"Times New Roman";}
</style>
<![endif]-->
</head>

<body lang=EN-US style='tab-interval:36.0pt'>

<div class=Section1>

<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:24.0pt;font-family:Verdana'>Hello world<o:p></o:p></span></p>

<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:24.0pt;font-family:Verdana'><o:p> </o:p></span></p>

<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:24.0pt;font-family:Verdana'><!--[if gte vml 1]><v:shapetype
id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" style='width:384pt;
height:4in'>
<v:imagedata src="Hello%20world_files/image001.jpg" o:title="1050911791uDOdzrdWem_1_1_l"/>
</v:shape> <![endif]--> [if !vml]Hello%20world_files/image002.jpg[endif]<o:p></o:p></span></p>

</div>
</body>

</html>


look at all that useless crap, and it goes by that horrid "pagename_files" structure. I have not tried this with word2003 but I assume it'll be similarly bad... I've found word97 produces html that is easily workable with though...

from FrontpageXP:

<html>

<head>
<meta http-equiv="Content-Language" content="en-nz">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Hello World</title>
</head>

<body>

<p align="center"> <font face="Verdana" size="6">Hello World</font></p>
<p align="center">
../../My%20Documents/My%20Pictures/1050911791uDOdzrdWem_1_1_l.jpg</p>

</body>

</html>


Much nicer.. remember that this is frontpageXP used for this example, frontpage 2003 is far more dreamweaver-esque and produces much cleaner code with less MS proprietry crap.

Dreamweaver MX:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div align="center">


<font size="6" face="Verdana, Arial, Helvetica, sans-serif">Hello World</font></p>


<font size="6" face="Verdana, Arial, Helvetica, sans-serif">images/1050911791uDOdzrdWem_1_1_l.jpg</font></p>
</div>
</body>
</html>


A bit messier in its layout (readability is a concern for handcoders like myself) but it's using the more modern <div> and hasnt added anything that isnt needed. One issue I've found with dreamweaver mx is when you insert an image it will put in a line such as: img src="file://c: |documents and settings/etc which of course wont work.. it puts in a pipe instead of a slash

and finally Composer:

<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<title></title>
</head>
<body>
<div style="text-align: center;"><big><big><span
style="font-family: verdana;">Hello World



images/1050911791uDOdzrdWem_1_1_l.jpg

</span></big></big> </div>
</body>
</html>


composer correctly forms an absolute image address, and like dreamweaver uses the <div> tags. My main gripe with composer is that it annoyingly truncates code (say after me: truncated code BAD), I like to have my code spaced out a bit and well documented, it's just good habit. Besides that, composer does nest code beautifully...

At the end of the day you want to keep your code, or code produced by your editor, as standards compliant as possible, and to really police that you need an understanding of html and should be using a validator. I've found that dreamweaver and composer consistently produce standards compliant code... what they throw out might be a bit more difficult to read compared to something handcoded from scratch, but that's really nothing a bit of time in notepad or xemacs etc wont fix

So really, long story short, here's a serious and unbiased vote for Composer. 		whetu (237)
192364 2003-11-16 03:53:00 > Notepad.... :D
> Or rather something a little more advanced like gedit
> that'll show you the tags in diff. colors.
>
> Word/OpenOffice will do WYSIWYG.
> There are better ones out there too, but for a
> price.
> Remember that with WYSIWYG editors, you'll always
> have a lot of excess code... sometimes too much.
> it may pay to have a look into basic HTML, you'd be
> surprised how far you can go with it!
>
>
> Chill. 		porpora (3036)
192365 2003-11-16 04:01:00 see what i mean about not being a programmer. Have trouble quoting a post.

:_|
Julia 		porpora (3036)
192366 2003-11-16 04:03:00 > it may pay to have a look into basic HTML, you'd be
> surprised how far you can go with it!
>

Any ideas where there is a good tutorial?

J 		porpora (3036)
192367 2003-11-16 04:09:00 thanks whetu (and Chill). Point well taken about all the excess code.

Am downloading Mozilla now to have a look at.
Probably tomorrow with download speeds reaching an incredible 34.6!!! Kbps X-( X-(

Julia 		porpora (3036)
1 2