Unoffical empeg BBS

Quick Links: Empeg FAQ | RioCar.Org | Hijack | BigDisk Builder | jEmplode | emphatic
Repairs: Repairs

Topic Options
#295297 - 14/03/2007 17:04 Need help building a website
visuvius
addict

Registered: 18/02/2002
Posts: 658
I need some help building a website for our company. I've only dabbled in website design before when I used to work for the Boys and Girls Club. I remember it being very easy. It was some sort of template system and there wasn't very much HTML involved. I'm looking for something similiar.

I havn't looked into this stuff in quite a while and I imagine a crapload of stuff is out there to make building a webpage easy. What I want is very simple. Just a site that shows who we are and explains what we do. Mission statement and all that nonsense. I can deal with simple HTML but not much more. It should be easy to update and edit.

Can someone please recommend a product or something that will get me what I want? I don't think I'm searching for the right thing on Google.

Here is an example of what I am looking to build.

Top
#295298 - 14/03/2007 17:06 Re: Need help building a website [Re: visuvius]
robricc
carpal tunnel

Registered: 30/10/2000
Posts: 4931
Loc: New Jersey, USA
Nvu is pretty nice as a WYSIWYG editor. It also has the advantage of being free. Doesn't hurt much to give that a shot...
_________________________
-Rob Riccardelli
80GB 16MB MK2 090000736

Top
#295299 - 14/03/2007 17:10 Re: Need help building a website [Re: visuvius]
cushman
veteran

Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
You should also check out Open Source Web Design, free templates you can download and use for a starting point.
_________________________
Mark Cushman

Top
#295300 - 14/03/2007 17:26 Re: Need help building a website [Re: cushman]
JBjorgen
carpal tunnel

Registered: 19/01/2002
Posts: 3584
Loc: Columbus, OH
Also check out Joomla and other Open Source CMS's.

EDIT: Looking at your example, a full CMS is probably overkill. Those links might come in handy for someone in the future, though, so I'll leave them.
_________________________
~ John

Top
#295301 - 14/03/2007 17:56 Re: Need help building a website [Re: JBjorgen]
hybrid8
carpal tunnel

Registered: 12/11/2001
Posts: 7738
Loc: Toronto, CANADA
"Simple" and "Joomla" don't belong in the same sentence. Does that thing have any documentation yet? And XHTML strict?

I'd also recommend a template for use on a couple of pages. If it's to be touched by multiple people and is everr gong to contain regular "dated" update entries you may consider some type of Blog software like Wordpress along with a suitable template.
_________________________
Bruno
Twisted Melon : Fine Mac OS Software

Top
#295302 - 14/03/2007 21:30 Re: Need help building a website [Re: cushman]
visuvius
addict

Registered: 18/02/2002
Posts: 658
Thanks for the links guys. I'm playing with Nvu and it looks like something I can work with.

I found some pretty cool templates at the site Mark linked to. Now, my question is, once I download these templates, how exactly do I upload them into something like Nvu so that I have a starting off point? When you download the template, it basically just gives you the images the site uses and a CSS file. Is it assuming that I already know how to build the page and will know what to do with the files? I'm thinking this is the case.

If so, the templates are a good source for ideas but I'm still going to have trouble implementing those ideas.

Thanks!

ACTUALLY I think I got it. You just open the index.html file in Nvu and have at it.

Thanks again for the links.


Edited by visuvius (14/03/2007 21:34)

Top
#295303 - 15/03/2007 10:41 Re: Need help building a website [Re: hybrid8]
tahir
pooh-bah

Registered: 27/02/2004
Posts: 1913
Loc: London
Quote:
"Simple" and "Joomla" don't belong in the same sentence.


It's Ok once you get used to it...

Top
#295304 - 15/03/2007 11:47 Re: Need help building a website [Re: hybrid8]
Dignan
carpal tunnel

Registered: 08/03/2000
Posts: 12338
Loc: Sterling, VA
Quote:
"Simple" and "Joomla" don't belong in the same sentence.

Agreed. I recently abandoned Joomla for Wordpress. I love WordPress, but that's more of a blogging software than a typical website or a CMS.

The problem I saw with Joomla is that it's designed for an extremely large community/website. If you're only designing for a small audience (I only update my website for my friends and family), then you end up spending days disabling all the features you don't need that clutter up the space. Even then the menu structure is very confusing.

I've looked at NVU before. I liked it, and I like that it will color code PHP (if I remember correctly). I've been using the standalone application available here. I don't use it much anymore, but it's useful from time to time.
_________________________
Matt

Top
#295305 - 15/03/2007 23:28 Re: Need help building a website [Re: visuvius]
jimhogan
carpal tunnel

Registered: 06/10/1999
Posts: 2591
Loc: Seattle, WA, U.S.A.
Quote:

Here is an example of what I am looking to build.

Can I assume that you will forego the crappy flash menus but that the general layout is what you are after?

Given that example, it seems like a CMS would only make sense if you had ambitions to make it much bigger and have multiple people updating pages (or other things with lots of dynamicyness -- blogs, say).

Templates would seem like a place to start. Also, and not mutually exclusive, if your Web host supports something like PHP, it would not take too much to build a header+sidebar menu+footer shell that just includes the appropriate page content over on the right.
_________________________
Jim


'Tis the exceptional fellow who lies awake at night thinking of his successes.

Top
#295306 - 19/03/2007 22:00 Re: Need help building a website [Re: visuvius]
visuvius
addict

Registered: 18/02/2002
Posts: 658
So thanks to some of the links provided here, I created a new website for our company. Nvu is a great program and that website with all the templates was helpful as well. I picked what I thought was the cleanest and most "business looking" template and started there.

Here is what I've got so far

I'm figuring a lot of this stuff out as I go and the whole thing has been a great learning experience. However, there are a couple of things I'm trying to do that I just can't seem to figure out. I'm hoping you guys can give me some pointers.

I think mainly, my issues have to do with the CSS file (which I am slowly learning about). Here are the current items on my to do list that I'm having trouble with:

1) I'm trying to move the big green box to the right a little bit. I want to do this so that the links to the left of the box can be longer. Right now, if the name of the link gets too long, it overlaps onto the next line and looks pretty crappy.

2) My second problem has to do with the light grey area in the center (the area with the links and green box). I'm having a problem with this page. Under Services, I've included 3 different subsections each of which have links. Each time I add a link, it obviously moves everything down. The problem is, there is a link after "CONTACT US", but I can't get it to show because the light grey area is too small.

3) This is a general question. I realize that each page is supposed to reference style.css. However, what if a certain page has slightly different needs than another. For example, what if, for one of my pages, I dont want it to use that big green box, but instead, a picture or a flash animation or something? That top area all seems a part of the CSS file. So do I have to have a different CSS file for that one page?

4) My last question (for now) is about the style.css file itself and editing it. Nvu has this thing called CSS Editor under Tools. I guess its the GUI way to edit the CSS file. Before I posted here, I played with the CSS file in the editor and found the paramters or rules I had to change to fix 1 and 2 above. For example, the first issue was fixed by finding the rules for the green box and additing a margin. The second issue was a similiar fix. The big grey area has different parameters and I changed one of them to give the grey area a Padding of 15pt. When I preview, I see that those changes get me the look I want. However, when I publish, my changes aren't showing up.

It doesn't actually save the changes I'm making to the CSS file. Nvu's CSS editor seems to be referencing the correct CSS file. Under Sheets and Rules, it references http://www.calschools.com/style.css. Shouldn't it be saving the changes I make?

The problem is, the rules are easy to change in Nvu editor, but I have no idea what I'm doing with the actual CSS file. I've opened it up in wordpad and I have a vague idea of what is going on but I can't figure out how to make the changes that I made in Nvu through the editor.

In general, I'd like to know if what I'm trying to do is too complicated. Should I try to find a different template? I'm pretty happy with what I've got so far and really these issues I'm having are pretty minor. I'm more interested in figuring out the answer to #4 above because I'm slowly figuring out how to work with the CSS file in Nvu, but I just can't seem to get the changes to stick.

I've attached a screenshot of the CSS Editor in Nvu. I've also attached the actual CSS file. Any help would be greatly appreciated.


Attachments
296206-CSSEditor.JPG (76 downloads)



Edited by visuvius (19/03/2007 22:07)

Top
#295307 - 19/03/2007 23:27 Re: Need help building a website [Re: visuvius]
Dignan
carpal tunnel

Registered: 08/03/2000
Posts: 12338
Loc: Sterling, VA
Sorry, I don't have enough time to address your post properly, but I wanted to offer a link to a great site if you want to learn the fundamentals of HTML or CSS. Check out W3Schools. I don't know how other people here feel about the site, but I found it helpful in understanding the basics.
_________________________
Matt

Top
#295308 - 19/03/2007 23:44 Re: Need help building a website [Re: Dignan]
visuvius
addict

Registered: 18/02/2002
Posts: 658
Hey thansk, thats a pretty cool site; definitely going to come in handy in the long run. Its got some CSS examples that might help.

The thing is, I think I know 90% of what I need to make the site do what I want. I'm trying to figure out the other 10% asap, which I'm pretty sure isn't that complex.

Top
#295309 - 20/03/2007 06:31 Re: Need help building a website [Re: visuvius]
Cybjorg
addict

Registered: 23/12/2002
Posts: 652
Loc: Winston Salem, NC
Had I designed the template, I would have done a few things different. But any shortcomings with the way the template was coded is not your fault.

There are a few things that you can clean up, however. I'll try to make as few changes as possible to the template, but rather to the style sheet. Let's work from the top down.

1. First and foremost, there should never be more than one 'h1' tag per page. You can use as many of the other 'h' tags ('h2' through 'h6') on each page as you like, but not 'h1'. So in other words, 'California Financial Services' should be the only thing between your 'h1' tags.

2. Remove the 'big' tags from your code. Proper styling of the 'h' tags should do the trick.

3. Rather than having the tagline ("Building a better tomorrow, today") designated as an 'h2', I would recommend placing it in a paragraph tag and giving it a class to define it like so:

Code:

<p class="tagline">Building a better tomorrow, today</p>



4. Styling should never be done within the HTML code; keep it all in the CSS file. Remove the style code for the image icons at the top of the page and replace them with a single line of code in the CSS.

Code:

#icons img { border-style: none; border-width: 0; }



5. Remove the 'br' tags from within the slogan area. Also, there is no such thing as an 'st' tag, so get rid of it, as well.

6. This template suffers from div-itis (too many div tags). Nevertheless, if you want the top gray area ('#prec') to expand when you add additional navigational points, you need to remove the height rule.

Code:

#prec { /*height: 220px;*/ margin:0 0 15px; padding: 0 0 20px; background: #f6f6f6; border-bottom: 1px solid #dcdcdc;
overflow: hidden; }



(Note that the height rule is commented out; it can be deleted. I also added some bottom padding to the div so that it will maintain its style no matter how much height is gained.)

7. I adjusted the navigation styles, adding a bit of padding on the right-hand side and making the clickable link area to the be the entire width of the invisible box (instead of just on the link words themselves). I also used CSS to make the navigation links uppercase, rather than having to type everything in all caps in the HTML.

Code:

#wrap #menu a { font: 0.9em/2.2em Arial, sans-serif; background-image: url(images/lm-li.gif);
background-repeat: no-repeat; background-attachment: scroll; background-position: left 50%; padding-left: 25px;
text-decoration: none; text-transform: uppercase; height: 2.2em; padding-bottom: 3px; display: block;50%; }

#wrap #menu li { line-height: 26px; background-image: url(images/li-line.gif); background-repeat: no-repeat;
background-attachment: scroll; background-position: left bottom; margin-right: 15px; list-style: none; }



8. I added styling for an 'acronym' tag, since you continually refer to 'CFS' throughout the site. It's courteous to wrap any acronyms in an acronym tag, like so:

Code:

<p><acronym title="California Financial Services">CFS</acronym> staff includes industry specialists...</p>



I made a few other changes to the page and the CSS, as well, which is why I am attaching them for your reference. I'm sure I didn't catch everything but this should get you headed in the right direction. My code should be a bit tighter, size-wise, and should now validate (the old code didn't).

In answer to your third question, you can assign the body tag on each page a specific #id, like so...

Code:

<body id="home">
or
<body id="services">



You can then reference specific parts of those pages like so:

Code:

body#services #prec { css rules go here }



So in layman's terms, you're basically creating a rule specifically for the #prec div on the #services page.


Edit : Sidescrolling is bad, mmk?
(I edited your code segments by adding linebreaks to the some of the lines. This 'wrapped' the long text to the next line, which allowed the bbs formatting to be preserved and eliminate side-scrolling on most sane resolutions. Your code should still be 100% functional if copy pasted.)
--_l0ser


Attachments
296231-cfs.zip (35 downloads)



Edited by l0ser (21/03/2007 03:57)

Top
#295310 - 28/03/2007 18:52 Re: Need help building a website - SWF question [Re: visuvius]
visuvius
addict

Registered: 18/02/2002
Posts: 658
Okay so things have been coming along quite nicely. Cyborgs edits really cleaned up my stylesheet and most issues have been resolved.

Heres what I've got

One of the final thigns i'm trying do is to replace the GIF next to the links with a Flash SWF. I want to replace mainimg.gif with the SWF here.

The problem is, the graphic in that section of the page is controlled by the CSS:
___________________________________________________________________
/* Second part */

#prec { /*height: 220px;*/ margin:0 0 15px; padding: 0 0 20px; background: #f6f6f6; border-bottom: 1px solid #dcdcdc; overflow: hidden;}

#wrap { margin: 0 auto; width: 800px; }

#wrap #pic { float: right; background: url(images/mainimg.gif) no-repeat; height: 199px; width: 589px; overflow: hidden}
___________________________________________________________________


This is the code for the SWF:

<object
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
height="480" width="600"><param name="movie"
value="images/cfsbanner.swf" /><param name="quality"
value="high" /> &nbsp;
<embed src="images/cfsbanner.swf" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" height="199"
width="589"></object>

Can anyone give me a suggestion as to how I can get my SWF to show up where I want it?


Edited by visuvius (28/03/2007 18:53)

Top
#295311 - 28/03/2007 21:23 Re: Need help building a website - SWF question [Re: visuvius]
JBjorgen
carpal tunnel

Registered: 19/01/2002
Posts: 3584
Loc: Columbus, OH
Cybjorg should be able to get you a fix, but he's +7 hrs. I'll drop him an email so he checks it in the AM.
_________________________
~ John

Top
#295312 - 28/03/2007 21:55 Re: Need help building a website - SWF question [Re: visuvius]
cushman
veteran

Registered: 21/01/2002
Posts: 1380
Loc: Erie, CO
First, read this article at ALA to get a good method for embedding Flash. Then, you should be able to plug that code right after your pic div.

It might take some tweaking with sizes and positions (floating left or right) but trial and error should work for ya.

BTW, your software is munging the code a bit, there are quite a few sections that look like this:


Code:
<big></big>


Code:
<span style="font-size: 10pt; font-family: Arial;"></span>



that are not needed. Inline styles (with the style attribute) should be avoided, too.
_________________________
Mark Cushman

Top
#295313 - 28/03/2007 22:04 Re: Need help building a website - SWF question [Re: cushman]
visuvius
addict

Registered: 18/02/2002
Posts: 658
Thanks for the replys guys. I'm going to take a look at that article later tonight. As far as the erroneous code, I think I've mucked it up a bit after Cyborgs edits. I'm using NVU so I think there is code in there that I'm not really noticing.

Top
#295314 - 29/03/2007 03:50 Re: Need help building a website - SWF question [Re: visuvius]
Cybjorg
addict

Registered: 23/12/2002
Posts: 652
Loc: Winston Salem, NC
Simply insert the Flash object (in bold) into your "pic" div, like so (I didn't put in in code tags so that the formatting could be preserved):

<div id="pic">
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="199" width="589">
<param name="movie" value="/images/cfsbanner.swf" />
<param name="quality" value="high" />
<embed src="/images/cfsbanner.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" height="199" width="589"></embed>
</object>

</div>

You'll have to change the height and width to match what I have in yellow or else it won't display correctly in IE.

Also note that I removed the "slogan" div since it contains no information. You can do the same for the two h2 tags earlier in the code, as well.


Edited by Cybjorg (29/03/2007 03:52)

Top
#295315 - 29/03/2007 22:08 Re: Need help building a website - SWF question [Re: Cybjorg]
visuvius
addict

Registered: 18/02/2002
Posts: 658
Damnit I had this all typed up and then the BBS at my post!

So thanks for the tips guys. I'm super close but I can't seem to get it to look just right. This is the page I'm testing with. Here is the code I'm using for the SWF:


<div id="pic">
<object
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
align="right" height="199" hspace="400"
vspace="122" width="589"><param name="movie"
value="/images/cfsbanner.swf" /><param name="quality"
value="high" />
<embed src="/images/cfsbanner.swf" quality="high"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
type="application/x-shockwave-flash" height="199"
width="589"></object>
</div>



I think I've got it placed correctly, vertically. I'm having a hard time getting the horizontal placement down. I'm using vspace and hspace. The problem is, hspace creates space on both sides of the SWF which basically centers it. I can't seem to get it to appear where the old gif was.

I think my problem has to do with the links in red to the left of the graphic. As soon as I place the SWF, those links get pushed waaaaay to the left. I'm using align="right" in the code for the SWF because otherwise, the top section stays the same and the SWF gets pushed to the bottom of the page, in the content area.


Here are the rules in the CSS for the link items to the left of the graphic:
__________________________________________________________________________
#wrap #menu { padding: 0; margin:0; background: inherit; }

#wrap #menu a { font: 0.9em/2.2em Arial, sans-serif; background-image: url(images/lm-li.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left 50%; padding-left: 25px; text-decoration: none; text-transform: uppercase; height: 2.2em; padding-bottom: 3px; display: block;50%; }

#wrap #menu ul { padding: 10px 0 }

#wrap #menu li { line-height: 26px; background-image: url(images/li-line.gif); background-repeat: no-repeat; background-attachment: scroll; background-position: left bottom; margin-right: 15px; list-style: none }
___________________________________________________________________________


I'm going to play with the rules for the link items some more but in the meantime does anyone have any quick suggestions as to what my problem might be? Its supposed to look like this except the gif should be the SWF.

Thanks!

Top
#295316 - 30/03/2007 17:01 Re: Need help building a website - SWF question [Re: visuvius]
Cybjorg
addict

Registered: 23/12/2002
Posts: 652
Loc: Winston Salem, NC
When I tested it on my system, I didn't touch the CSS. I simply inserted the code as I illustrated above and everything worked fine in both FF and IE. There shouldn't be a need for vspace, hspace or right alignment.

I noticed that you accidentally left out your closing "embed" tag in your flash object. That may be giving you a bit of trouble.


Edited by Cybjorg (30/03/2007 17:03)

Top
#295317 - 30/03/2007 22:08 Re: Need help building a website - SWF question [Re: Cybjorg]
visuvius
addict

Registered: 18/02/2002
Posts: 658
Yeah I'd just like to give a big fat thank you to everyone that helped me out with this thing. It came out great and I didn't have to spend a penny. But I couldn't have figured a few of my issues out without the help I got here.

Its amazing the crap you can do now with free programs, google and a friendly bbs. Pretty sweet.

Top
#295318 - 30/03/2007 22:22 Re: Need help building a website - SWF question [Re: visuvius]
gbeer
carpal tunnel

Registered: 17/12/2000
Posts: 2665
Loc: Manteca, California
It looks good.Though the initial effect where the first image rolls down into a white space (not the same as the general background) seems odd compared to the subsequent fades.
_________________________
Glenn

Top
#295319 - 31/03/2007 12:30 Re: Need help building a website - SWF question [Re: visuvius]
JBjorgen
carpal tunnel

Registered: 19/01/2002
Posts: 3584
Loc: Columbus, OH
Just to let you know:

The links to R. Mark Epstein and Daniel Santo don't work on the Staff page.
_________________________
~ John

Top
#295320 - 31/03/2007 17:33 Re: Need help building a website - SWF question [Re: gbeer]
visuvius
addict

Registered: 18/02/2002
Posts: 658
Thanks for the tips guys. Gotta fix those.

I totally agree about the initial effect on the flash animation. I'm using this program called Flash Maker Pro and for the life of me I can't figure out how to make it NOT do that. Not a deal breaker for me though

Top