Log in

View Full Version : Noob getting owned by FrontPage!


osayi
07-31-2009, 02:11 AM
Okay guys I can't stress how much of a noob I am so please be gentle. You can tell from my (lack of) styling.

I use a Mac but can't find any free HTML editors so I'm stuck with flipping over to my Windows side to use FrontPage. If you can direct me to a FrontPage alternative for Mac, that'll be an added bonus.

Here's the HTML code I'm battling with:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Yada yada</title>
</head>

<body bgcolor="#F5F5F5" topmargin="0">

<div id="header" align="center">
<table width="600" height="50" cellspacing="0" cellpadding="5" border="0">
<tr>
<td width="45" height="50" align="left" valign="bottom" bgcolor="#008000">
&nbsp;</td>
<td width="377" height="50" align="left" valign="bottom" bgcolor="#0000FF">
&nbsp;</td>
<td width="178" height="50" align="right" valign="bottom" bgcolor="#800000">
<font face="Arial" style="font-size: 8pt" color="#F5F5F5"><b>
<a href="index.html" style="text-decoration: none">
<font color="#F5F5F5">
HOME</font></a>
<font color="#F5F5F5">
| SERVICES |
<a href="contact_us.html" style="text-decoration: none">
<font color="#F5F5F5">
CONTACT US</font></a></b></td>
</tr>
</table>
</div>
<div id="spacer-small" align="center">
<table width="600" height="10" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><font face="Arial" style="font-size: 1pt" color="#464646">
&nbsp;</font></td>
</tr>
</table>
</div>
<div id="banner" align="center">
<table width="600" height="200" cellspacing="0" cellpadding="10" border="0" bgcolor="#000000">
<tr>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="spacer-big" align="center">
<table width="600" height="20" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><font face="Arial" style="font-size: 1pt" color="#464646">
&nbsp;</font></td>
</tr>
</table>
</div>
<div id="title" align="center">
<table width="600" height="40" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="left" valign="top"><font face="Arial" style="font-size: 20pt" color="#800000">
Yada</font></td>
</tr>
</table>
</div>
<div id="content" align="center">
<table width="600" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="350" align="left" valign="top">
<p style="line-height: 100%">
<font face="Verdana" style="font-size: 8pt" color="#464646">
Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada yada.</font>
<p style="line-height: 100%">
<font face="Verdana" style="font-size: 8pt" color="#464646">
Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada.</font>
<p style="line-height: 100%">
<font face="Verdana" style="font-size: 8pt" color="#464646">
Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada.</font>
<p style="line-height: 100%">
<font face="Verdana" style="font-size: 8pt" color="#464646">
Yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada yada
yada yada yada yada.</font>
<p style="line-height: 100%">
<font face="Verdana" style="font-size: 8pt" color="#464646"><b>
<a href="contact_us.html" style="text-decoration: none">
<font color="#464646">
Yada yada yada yada yada.</font></a></b></font></td>
<td width="20" align="left">
<font face="Arial" style="font-size: 1pt" color="#464646">&nbsp;</font></td>
<td width="230" align="left" valign="top">
<font face="Arial" style="font-size: 20pt" color="#800000">
Yada yada yada yada yada yada yada yada yada yada.</font><p>
<font face="Arial" style="font-size: 20pt" color="#800000">
Yada yada yada yada yada yada yada yada yada yada yada yada yada yada.</font></td>
</tr>
</table>
</div>
<div id="spacer-big" align="center">
<table width="600" height="20" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><font face="Arial" style="font-size: 1pt" color="#464646">
&nbsp;</font></td>
</tr>
</table>
</div>
<div id="copyright" align="center">
<table width="600" height="50" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center"><font face="Verdana" style="font-size: 7pt" color="#C0C0C0">
© 2009 Yada yada. All rights reserved.</font></td>
</tr>
</table>
</div>
<div id="footer" align="center">
<table width="600" height="10" cellspacing="0" cellpadding="0" border="0" bgcolor="#800000">
<tr>
<td><font face="Arial" style="font-size: 1pt" color="#464646">
&nbsp;</font></td>
</tr>
</table>
</div>

</body>

</html>

Messy, I know. Here are the three issues I'm having:

1) In the green cell, I'd like to place a logo there that measures 35 x 30 (w x h). When I do so, the cell moves and I don't know why. The table that houses this cell has cellpadding set to 5 so I accommodate this by making the cell width 10px (5 on either side of the logo) but it doesn't help.

2) In the blue cell, I'd like to place two relatively long words (firstlongword and secondlongword, say) but without affecting the size of the maroon cell. In Cell Properties, I left the 'No wrap' option unchecked but that doesn't help.

3) In the maroon cell, I'd like to add a simple CSS drop down menu for SERVICES. I found one at http://pixelspread.com/blog/289/css-drop-down-menu (demo: http://pixelspread.com/demo/cssdropdown.html) but I'm having difficulty making it work for me.

I've tried to keep the site as simple as I can but I can't get around these three things. Any assistance is greatly appreciated.
traq
07-31-2009, 02:34 AM
I would strongly recommend NOT using FrontPage (or any html editor, FTM, but especially not FrontPage).

Learning how to write html yourself is:

1) not difficult.
2) less problematic.
3) the first step to learning more advanced (and cool) stuff.

Speaking from personal experience, using FP is frustrating and limiting. Especially if you're a MAC user, designing sites using FP will be difficult because its features force you to use a Windows server with special "Server Extensions" installed. FP does not write clean or compliant code, and changes code you write yourself, preventing you from implementing custom code easily and from learning how to do things on your own.

I know Mac people who like Dreamweaver, but I'd recommend learning how to write and using something like Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm).

To your specific questions:

1) It's better not to use tables at all for page layout. It's not what they're designed for, and they are very unflexible. To make your logo fit, you need to use css (or FP options, I don't know how well that would work) to change the cell padding to 0. Your images may have padding and a margin as well, by default, and those would move the table cells also.

2) No matter how you write the code, your words will change size depending on browsers and user choices (IE vs. FF, screen resolution, zoom, font-size, etc). The only was to make your text one size and *stay* that way is to make it an image.

3) The menu you linked to doesn't seem to be in the page you posted. When you tried it out, were you checking it in FP or IE? The menu uses css properties that older versions of IE doesn't support correctly (I don't know about IE8, but I looked at the demo in IE7 and it doesn't work). As I mentioned above, FP may also be re-writing the code you enter before it publishes, and there's no way around that but to not use FP.
osayi
08-04-2009, 11:08 PM
Thanks. You'd happy to know I'm hand-coding now with TextEdit and I redesigned it and kept things simple.

I know there's one for everyday of the year on Google, but do you know any great tutorial(s) that you could point me to? I've started out with the one I found on the W3C Website http://www.w3.org/MarkUp/Guide/Overview.html but I'd prefer a more robust one.

Looking forward to more advanced and cool stuff.

Thanks again.
traq
08-05-2009, 03:06 AM
W3Schools (http://www.w3schools.com/default.asp) is where I started at, but what really helped me learn was trying to use the scripts and css layouts here at DD. (Don't neglect css - it's not as difficult as it seems, and if you ignore css while learning html, you'll end up with some messy code and bad habits.) And of course, the all-time best teacher is experience, so writewritewrite. Make a "messing around" website on your computer (and don't delete it - keep everything as reference!).
osayi
08-05-2009, 05:52 AM
Funny you should mention a 'messing around' Website; I just started one yesterday.

DD, scripts + CSS, writewritewrite. Point(s) taken.

Thanks again.