The Campaign Builder's Guild

The Archives => Meta (Archived) => Topic started by: Matt Larkin (author) on September 30, 2006, 02:50:21 PM

Title: Site design
Post by: Matt Larkin (author) on September 30, 2006, 02:50:21 PM
I have a question for those of you that have presented your worlds as websites:

Do you use any designer program to do all that?

Previously, I had done all the coding by hand in notepad, but the prospect of copying an entire world that way is...tedious.

I tried the trial version of Dreamweaver, but it is very expensive (at $399).

Frontpage is cheaper at $199, but since only a limited trial is allowed, I am uncertain if it is worthwhile.

Is there a favorite program for coding large, complex sites?  I'm curious about the community opinion before making a purchase.
Title: Site design
Post by: Wensleydale on September 30, 2006, 02:51:12 PM
I have dreamweaver... we got it free. *confused*
Title: Site design
Post by: Matt Larkin (author) on September 30, 2006, 02:55:45 PM
Quote from: GolemI have dreamweaver... we got it free. *confused*
Oh?  The adobe site that had the trial version listed the purchase price as $399.  Do you mean you downloaded an illegal copy?  Or that you got it through a college or something?  Certainly, for free, it would be very nice; the trial version was at least nicer than doing it the way I had been up until this point (notepad and lots of typing).
Title: Site design
Post by: brainface on September 30, 2006, 03:15:23 PM
Quote from: http://shadowfell.orgshadowfell.org[/url], and realize that the menu was typed once, everything else is as close to plaintext as possible.)

Using includes can also save typing (or really, cut & pasting.) here's a tutorial (http://www.alistapart.com/articles/phpcms/) for how to do it in php. You can do the same thing in asp & a couple other languages as well, but the syntax is different of course. Which one you can use depends entirely on your web host.

As far as things that MUST be long tables (class tables, for instance) I'd get a free, crappy wysiwyg web editor (like NVU (http://www.nvu.com/download.php)), build the table in it, and copy it over to notepad. You could also use the class tags here, but finding the output in the source is irritating.
Title: Site design
Post by: Lmns Crn on September 30, 2006, 03:27:22 PM
For my website (currently not in use, hopefully to be revived after a more thorough revision of my setting), I coded everything by hand in Wordpad. The actual amount of tedious code involved was really not so bad, as I set up a template and did a lot of copy/paste substitution.

I had a free copy of Dreamweaver as part of the software package loaned to all students at my old college. But I found the interface finicky and the code awkward, so I continued just putting it in by hand.
Title: Site design
Post by: Ishmayl-Retired on September 30, 2006, 03:42:22 PM
I agree with LC... the website I currently have is nicely set up (mostly by brainface) so that I can just insert any new and relevant information like it's a template.  You'll need to at least make one page to use as the template, but it's really not so bad if you do a little research.
Title: Site design
Post by: Wensleydale on September 30, 2006, 03:53:37 PM
Quote from: Phoenix Knight
Quote from: GolemI have dreamweaver... we got it free. *confused*
Oh?  The adobe site that had the trial version listed the purchase price as $399.  Do you mean you downloaded an illegal copy?  Or that you got it through a college or something?  Certainly, for free, it would be very nice; the trial version was at least nicer than doing it the way I had been up until this point (notepad and lots of typing).

*thinks*

I didn't download an illegal copy... I think. *shifty eyes*

I'll ask my parent, who I inherited it from.
Title: Site design
Post by: Matt Larkin (author) on September 30, 2006, 04:18:36 PM
As always, the community is very helpful.

Ishy, Shadowfell was one of the sites I had in mind when asking the question, because it is so nicely done.

Brainface, thanks for the php information.  I never really new what that was in people's code before.  I'm hardly an expert web designer, having just taught myself the very basics using HTML/CSS for Dummies books.

Much of my setting/mechanics was in Word document format, and I found it easier to copy entire pages into the design area for Dreamweaver than copy and then go back and add formating markup (paragraph and heading tags, tables, and such, which Dreamweaver and presumably most designers did automatically).  Admittedly, laziness, but then that's the source of almost all mechanical advancements, right?

I think the php stuff may make things a lot easier.  I had used some tables for the parts in Word (mainly for asethics).  I also found a number of things easier when working in design view than code view (like just typing large amounts of content, in which lots of code can be distracting.  Making links was also nice when I could click, rather than type long ones.

I'm only a little familiar with DIVs, so I'm reading more about them in the book since you said they would be helpful.

I'll look into the program you mention.  Any free editor is a nice deal ;)

@LC
I found DW fairly intuitive, but perhaps the trial version was newer and easier.  I liked that I could split view between code (for complex stuff) and design (for most stuff).  I sometimes wish it was easier to do that when trying to format an MS Word document...

My thanks, everyone.
Title: Site design
Post by: Matt Larkin (author) on September 30, 2006, 04:20:52 PM
Oh, Ishy, by the way, did you make the banner graphic yourself?  It's wonderful.  I definitely need to find something like that.
Title: Site design
Post by: Lmns Crn on September 30, 2006, 04:31:40 PM
Quote@LC
I found DW fairly intuitive, but perhaps the trial version was newer and easier. I liked that I could split view between code (for complex stuff) and design (for most stuff). I sometimes wish it was easier to do that when trying to format an MS Word document...
True. And to be fair, the version of Dreamweaver I used dates back several years, to the start of my undergrad days. Maybe it's come a long way since then.

What I usually do is set up my screen so that half is covered by a cleverly-resized Wordpad window containing my .html file, and the other half is covered by a cleverly-resized web browser window, reading the file off my hard drive. I can see changes quickly with a quick Alt-S, Alt-Tab (to the browser) and F5.
Title: Site design
Post by: Ishmayl-Retired on September 30, 2006, 04:51:48 PM
Yeah, I made that Phoenix... let me know if you have something in mind, I'll see what I can come up with.
Title: Site design
Post by: Elven Doritos on September 30, 2006, 08:28:04 PM
Freewebs has a kickass editing software called WebsEdit.

I would give you more information if my ears would stop playing Jamaican beats.
Title: Site design
Post by: Poseptune on September 30, 2006, 08:41:46 PM
Quote from: Elven DoritosI would give you more information if my ears would stop playing Jamaican beats.


You don't want them to stop. Take them on the road, and make money off them. Talk shows, morning shows, etc...


On topic: Notepad. :)
Title: Site design
Post by: Matt Larkin (author) on October 01, 2006, 11:45:02 AM
That's very generous Ishy.  I'll PM you when I've thought about what I want a little more.

Thanks ElDo, I'll checkout Freewebs.
Title: Site design
Post by: Matt Larkin (author) on December 10, 2006, 04:07:31 PM
Now that I have a bit more time, I've gotten back to working on a site.  I've decided to try the PHP design recommended by Brainface.  I'm trying to use the Hosting section here, but I've run into some difficulties.  After working at this all weekend, I turn to the community.  If anyone can help with this, I'd be very grateful.

I am trying to set up the typical menu on the left, content on the right design.  Taking brainface's advice, I've been referencing Shadowfell and reading the tutorial, but since I cannot see all of the original PHP design, there are still some things that I have had trouble with.

My main file (index.php) looks like this:
[spoiler=index]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-

html40/loose.dtd">
<html>
<head>
   <title>Kishar</title>
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>




<div id="menu">
      <a href="index.php?page=home">Home</a>
      <a href="index.php?page=trial">Trial</a>
   <h3>The World</h3>
      
   
</div>

<div id="content">
<?php @ require ("$page.html"); ?>

</div>


</body>
</html>[/spoiler]

While the menu appears properly, and both divisions, the links do not work - they do not load anything into the "content" DIV.

Both "trial" and "home" are normal html files and have only "test X" (where X is 1 or 2), since I'm just trying get the settup to work before doing content.

In case it somehow matters, I copied the CSS definitions for the divisions, but added temporary borders so I could see where they were (to be removed once things work).

[spoiler=CSS]
#menu   {
   float:left;
   display:list-item;
   list-style-type:none;
   text-align:left;
   margin-top:1em;
   width:210px;
   /*margin-right:3px;
   padding-right:2px;*/
   margin:0; padding:0;
border: solid blue;
}


#content {
   width:484px;
   padding:3px;
   float:right;
   font-size:1em;
   line-height:1.1em;
border: solid green;
   }
[/spoiler]

If anyone knows what the issue is, please let me know.

Also, to have a particular page ("home") load from the get-good, do I have type it both into the main index.php file and a seperate file so it could be linked to later?
Title: Site design
Post by: Matt Larkin (author) on December 10, 2006, 09:41:41 PM
I cleaned up the code a little, and removed the "@" from the php code so I could see the error:

Quote from: '.:/usr/local/php5/lib/php') in /home/.tallyho/shadowfell/thecbg.org/settings/137/index.php on line 18[/quote<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<?php /* Created on: 12/10/2006 */ ?>
<html>   
<head>
   <title>Kishar</title>     
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>   



<div class="content">
   <?php require_once ("$page.html"); ?>
</div>

<div class="menu">     
    <a href="index.php?page=home">Home</a>
    <a href="index.php?page=trial">Trial</a>
</div>


</body>
</html>[/spoiler]
Mainly I just changed the DIV id's to DIV classes, and of course the CSS.
Title: Site design
Post by: limetom on December 10, 2006, 09:58:25 PM
Well... from what I can tell we're running a *nix server, and the server cannot find "index.php?page=home" in the directory location "/home/.tallyho/shadowfell/thecbg.org/settings/137/index.php".

The error, I think, says that it cannot find ".html" in the link.  Try adding it on to the end of "page=home" and "page=trial" in the links (thus "page=home.html" and "page=trial.html") and see what happens.  No clue if it will work, but that's what I'd do...
Title: Site design
Post by: brainface on December 10, 2006, 11:23:27 PM
<?php @ require ("$page.html"); ?>
$page is a variable, and undefined. so it loads
$page + ".html", which is just ".html"

try adding

if (!page) {
$page = 'home';
}

somewhere ABOVE <?php @ require ("$page.html"); ?>

shadowfell is the name of our account. ignore that.

Title: Site design
Post by: Matt Larkin (author) on December 11, 2006, 04:04:38 PM
Thank you both, unfortunately, I still have not been able to get things working.

The if coding does not seem to work.  Is the intent to make say "if not page (if page is not defined) then set it to 'home'"?

Is this the implementation you used for the Shadowfell site, or am I missing further code?  Do you still have access to the original code before PHP is applied so I could see if I've lost something small?

If I assign the variable non-conditionally, e.g.

$page = 'home';

then I don't get an error message, but the menu does not allow me to switch between content.

I've spent the afternoon filtering through the PHP Manual and Codewalkers trying to figure out what is going wrong, but I have to admit this is over my head, a bit.

Oh, and I switched the order of the content/menu DIVs to more closely resemble the Shadowfell page:

[spoiler=index.php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<?php /* Created on: 12/10/2006 */ ?>
<html>   
<head>
   <title>Kishar</title>     
   <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
   


<div class="menu">     
    <a href="index.php?page=home">Home</a>
    <a href="index.php?page=trial">Trial</a>
</div>


<div class="content">
<?php if (!page) {
$page = 'home';
}
require_once ("$page.html"); ?>
</div>



</body>
</html>
[/spoiler]

Oh, I did at first try the "if" clause as a seperate <?php ?> statement, but that didn't work, which is when I tried moving it into the same one.  I assume that makes no difference.
Title: Site design
Post by: brainface on December 11, 2006, 05:54:09 PM
QuoteOh, I did at first try the "if" clause as a seperate <?php ?> statement, but that didn't work, which is when I tried moving it into the same one. I assume that makes no difference.
it doesn't.
i'll look at your code in a bit. I can probably pull yours off the server. i'll also try to get you a copy of shadowfell (probably cleaned of brandon's actual content.)
Title: Site design
Post by: Matt Larkin (author) on December 11, 2006, 05:57:43 PM
Thanks, I very much appreciate it, brainface.
Title: Site design
Post by: brainface on December 11, 2006, 08:54:18 PM
This is pretty barebones, but hey, it's got the php code.

Also, here's your index.php, fixed.

!page should have been !$page (that's possibly my fault.)

Also, you need the code $page = $_GET['page'];, or $page is always null. (this isn't necessary in older php versions, or different servers, etc. it's a security thing.) It's in the fixed index file, you can see it.
File: 1165888326_4_FT16209_shadowclean.zip (//../../e107_files/public/1165888326_4_FT16209_shadowclean.zip)
File: 1165888326_4_FT16209_index.php.zip (//../../e107_files/public/1165888326_4_FT16209_index.php.zip)
Title: Site design
Post by: Matt Larkin (author) on December 12, 2006, 11:49:09 AM
Thanks very much, brainface.  I really appreciate all the help.
Title: Site design
Post by: Matt Larkin (author) on December 24, 2006, 01:04:16 PM
Brainface (or anyone that can answer), is it possible to link to a specific location on another page when I'm using php to call the page?

The normal method:

page url#id name

doesn't seem to work (which I guess makes sense, given that its subing the entry).

I see you to specific location links on Shadowfell within the same page, but what I'm looking to do is have a glossary page, which I can link to specific terms in from other content pages.
Title: Site design
Post by: brainface on December 24, 2006, 01:37:59 PM
like this:
http://www.shadowfell.org/jaggerfell/index.php?page=classes#knightErrant
variables first, #location second.
Title: Site design
Post by: Matt Larkin (author) on December 24, 2006, 01:53:13 PM
Thanks.  I don't know why that didn't work the first time, since that's what I tried.  I must have mistyped something, 'cause it worked this time.
Title: Site design
Post by: brainface on December 24, 2006, 02:43:06 PM
yeah, that happens ;)
Title: Site design
Post by: Lmns Crn on January 07, 2007, 03:40:28 PM
I've been working through some CSS tutorials, and while I think I understand the basics, I can't seem to find a way to use this with actual content.

What I'd like to be able to do is, for example, have an identical navigation bar on each page, with links to various parts of the site, but not have to code the nav bar seperately on each page. Essentially, I'd like to have a nav bar I could change once if I add a new section to the site, rather than changing it some 75 times.
Title: Site design
Post by: Matt Larkin (author) on January 07, 2007, 03:48:48 PM
You need some kind of server side include to do that.  Most of this thread was about my trying to use php to do so (after brainface explained that was how to do so).  It's what I use for my Kishar site.

Our hosting section supports php, but many web servers don't.  If you plan to host here, it works great.  Otherwise, check first.  Most of what you need, you can find in this thread.  But I'll show you my code for it.

In my main file (index.php)


<div id="menu">  
<a href="index.php?page=home">Home</a>
<a href="index.php?page=FAQ">FAQ</a>
<a href="index.php?page=glossary">Glossary</a>
<a href="index.php?page=map">Map</a>
<a href="index.php?page=cosmology/cosmology">Cosmology</a>
<div class="submenu">
<a href="index.php?page=cosmology/cosmogony">Cosmogony</a>
<a href="index.php?page=cosmology/animas">Animas</a>
<a href="index.php?page=cosmology/outer">Outer Realm</a>
</div>
<a href="index.php?page=overview">The World</a>
<a href="index.php?page=cast">Cast</a>
<a href="index.php?page=fiction">Fiction</a>
</div>

<div id="content-wrapper">
<div id="content">
<?php
$page $_GET['page'];
 if (!$page) {$page 'home'; }
require_once ("$page.html"); ?>

</div>
<div id="copyright">
Copyright 2005-2007 Matt A. Larkin
</div>
</div>


[spoiler=relevant CSS]

#menu
  {  
  margin-top: 1em;
  width: 125px;  
  background-color: #546454;  
  padding-bottom: 5em;
  float: left;
  }

#content a,
#menu a
  {  
  color: #003300;
  }
 
#content a:hover
  {
  color: #007700;
  }
 
#menu a,
#menu .submenu a
  {
  display:block;
  background-color: #D3D3D3;
  font-weight: bold;
  font-size: 0.9em;
  margin: 1px;
  font-variant: small-caps;
  text-decoration: none;
  padding: 1px;
  padding-left: 5px;
  border-right: solid 5px #005000;
  }

#menu a:hover
  {
  background-color:#78A378;
  }

#menu .submenu a
  {  
  background-color: #eeeeee;
  padding-left: 1.5em;
  font-size: .75em;
  border-right: solid 5px #333333;
  }
 
#menu .submenu a:hover
  {
  background-color: #ffffff;
  }

[/spoiler]

The site (http://www.alistapart.com/articles/phpcms/) brainface links to earlier explains the basics, but left out a small bit of code (which brainface fixed for me (see a few posts up).

The "code" tag I used here seems to have inserted bunches of ";" in my index.php code after each "<".  Those obviously shouldn't be there.
Title: Site design
Post by: Lmns Crn on January 07, 2007, 03:53:25 PM
Oh... goodness. I guess I'm learning PHP in addition to CSS, then! I do plan on hosting it here, so that shouldn't be a problem. At any rate, it looks like I have some reading to do. Thanks for the nudge in the right direction!

Edit: So in function, PHP is to content what CSS is to styles? Allowing you to predefine chunks of it that you can later call forth at will?

Edit again: Okay, I am beginning to understand the premise. This is radically cool.
Title: Site design
Post by: Lmns Crn on January 08, 2007, 09:57:33 PM
Okay, here's a challenging question.

I've gotten the hang of using php with links to create a changing content pane within index.php, but how do I do this if I want a single link to affect two changing content panes?

I have this code within index.php:
<div id=content>
<?php 
$page 
$_GET['page'];
if (!
$page) {$page 'intro'; }
require_once (
"$page.html"); ?>

</div>

<div id=menu>
<?php 
$page 
$_GET['menu'];
if (!
$menu) {$menu 'mbase'; }
require_once (
"$menu.html"); ?>

</div>
I've been trying with links to "index.php?page=abc&menu=xyz", but it doesn't work the way it seems like it should.

Is my code wrong, or are my links wrong, or is it both?
Title: Site design
Post by: brainface on January 08, 2007, 10:09:58 PM
on line 11, you're setting the variable $page to $_GET['menu'], then you're asking what $menu says on like 12. this does not work. if you make line 11 say: $menu=$_GET['menu'] then it should work.
Title: Site design
Post by: Lmns Crn on January 08, 2007, 10:24:21 PM
Ah, it works so well, and it is glorious! Bless you, Brainface, and curse my careless copy/paste errors!
Title: Site design
Post by: Ishmayl-Retired on January 09, 2007, 01:11:04 PM
Any screen shots of the site yet?  I'm working on mine too, it's pretty exciting.
Title: Site design
Post by: Matt Larkin (author) on January 09, 2007, 01:14:54 PM
Quote from: IshmaylAny screen shots of the site yet?  I'm working on mine too, it's pretty exciting.
Can't wait to see them both.
Title: Site design
Post by: Lmns Crn on January 09, 2007, 02:44:27 PM
Quote from: IshmaylAny screen shots of the site yet?  I'm working on mine too, it's pretty exciting.
You can view the site in progress (http://www.thecbg.org/settings/13/jade/), since it's already in the Hosting section. Issues of php as a server-side language (and the Firefox copy/paste problems in phpEdit) make it easier for me to just build it online, rather than build it offline and upload it later.

There is very little actual content at the moment. So far, I have been working on getting the site organized, wrangling CSS into shape, trying to make navigation intuitive, putting in pages, and making sure all the links go where I want them to. But you can still go look around and tell me my menus are ugly. :)

Edit: Ha ha, at first, I linked you guys to a 404. x.
Title: Site design
Post by: Matt Larkin (author) on January 09, 2007, 02:49:41 PM
Quote from: Luminous CrayonYou can view the site in progress (http://www.thecbg.org/settings/13/jade/), since it's already in the Hosting section. Issues of php as a server-side language (and the Firefox copy/paste problems in phpEdit) make it easier for me to just build it online, rather than build it offline and upload it later.

There is very little actual content at the moment. So far, I have been working on getting the site organized, wrangling CSS into shape, trying to make navigation intuitive, putting in pages, and making sure all the links go where I want them to. But you can still go look around and tell me my menus are ugly. :)

Edit: Ha ha, at first, I linked you guys to a 404. x.
I actually started to use AceHTML as an edittor.  Very bare bones, but it keeps me organized and its coloring makes it easier to spot errors in code.  And free.

I use IE to copy and paste text into our hosting section (sadly that's about the only thing I use it for over FireFox).  If you look at the content of a file in the hosting section, it deletes all spaces, which would make editting much harder later.
Title: Site design
Post by: Lmns Crn on January 09, 2007, 02:57:58 PM
I've been doing the "edit web pages locally, upload later" routine for years, but this is the first site I've made that has used php, and that's thrown a wrench into the works. I can edit php in a text editor, but since it's a server-side language, I can't just open up a locally stored .php file in a web browser.
Title: Site design
Post by: Matt Larkin (author) on January 09, 2007, 03:04:08 PM
Yeah, but once you get the php code working, your other pages don't need to use php.  Of course it means you have to upload something to view it properly, but for working on content, you generally don't need to see it to know how it will look.

I typically write several, upload them to check how they look, and so forth.  But still work offline.  Plus, that gives me off-line copies of everything.
Title: Site design
Post by: Lmns Crn on January 09, 2007, 03:15:24 PM
Very true. I guess that will become a much more viable method of working on things once I get the php and css issues nailed down, and I can be confident in the site's general appearance and workings.

But I definitely need to get offline copies of my files, in case of catastrophe. I knew I was forgetting something.
Title: Site design
Post by: Ishmayl-Retired on January 09, 2007, 04:55:13 PM
I like it, LC... when I asked earlier, I was secretly thinking "I hope he uses a green theme".  Any ideas for a title image yet?
Title: Site design
Post by: Lmns Crn on January 09, 2007, 06:21:54 PM
Quote from: IshmaylAny ideas for a title image yet?
Not yet. I've decided that most of the images on the site are going to be two-color, in the almost-white (#ddffcc) and almost-black (#113300) shades of green that you can see already in the layout. (That should make it easy to scan things from the sketchbook as line art, and digitally manipulate them for color fairly easily.) Beyond that, I have no idea.
Title: Site design
Post by: Ishmayl-Retired on January 14, 2007, 09:45:28 PM
Okay, here's the general gist of my new site:

http://www.shadowfell.org/newSiteDesign/

I'm sorry for all those linkless links to the far right, I just put them there to get an idea of what the site would look like with links.  Also, so far, I'm unable to make the site look good in IE.  I would apologize for that, but if you're using IE, I have very little sympathy for you ;)  There's a lot of work to be done, but I finally at least have the general layout and color scheme done.
Title: Site design
Post by: Matt Larkin (author) on January 14, 2007, 10:21:48 PM
Nice start; I like the brown bar coloring.  I was found of your prior banner graphic.  Do you plan to use that when you are done?

Technically, the expression is to make "ends meet."

I also noticed my site doesn't quite look as good in IE.
Title: Site design
Post by: limetom on January 14, 2007, 11:04:37 PM
Well, me and my big mouth got me appointed as webmaster of the University of Hawaii's Anime Club.

This (http://www2.hawaii.edu/~ams/) is what the last webmaster left me with... no offense to them, but I think I've got some work to do.  At very least, the background is gone... it hurts my eyes.  At most, the site will be completely overhauled.  Wish me luck.

Additionally, if there's anything anyone thinks I should know about KompoZer, please let me know.
Title: Site design
Post by: Ishmayl-Retired on January 15, 2007, 07:20:39 AM
Thanks for the "ends' meet" ;)  That typo has already been pointed out to me, I just forgot to change it.  I'll probably be sticking with the current banner, since it fits the shape of the site better.
Title: Site design
Post by: Ishmayl-Retired on January 15, 2007, 10:36:22 PM
A request for advice from some of you who have been doing more of this than I.  How can I make the background color (the brown) behind the main content section, and behind the navigation bar always stretch all the way to the bottom?  I've tested out about 20 different things, and nothing seems to work.  LC, how did you get the green in your menu bar to stretch all the way down?
Title: Site design
Post by: Lmns Crn on January 15, 2007, 10:53:10 PM
Quote from: IshmaylA request for advice from some of you who have been doing more of this than I.  How can I make the background color (the brown) behind the main content section, and behind the navigation bar always stretch all the way to the bottom?  I've tested out about 20 different things, and nothing seems to work.  LC, how did you get the green in your menu bar to stretch all the way down?
I don't actually know. (I assume you mean the dark green on the right-hand side? If you load any of my pages with a lot of content, such as anything in the "people" section, you'll see that the dark green bar doesn't stretch all the way down. Fixing that is on my list of things to do, as well.)

In general, Ishy, I like your layout-- particularly the background images in the "Updates" and "Welcome to Shadowfell" panels you have. (And while we're at it, your heiroglyphic band right under the main title banner, too!) What I do not understand is what all the different panels are for. You seem to have two panels designed to hold large amounts of text. When I view content on the site, which panel will it appear in, and what will the other panel be doing?

(The only working link I could find at the moment is "Shadow Who?" It seems you are using the brown panel to deliver author's notes and other asides, while the black panel will hold more direct content about the world? I'm concerned that it might be a little awkward to read that way. It might be more intuitive to designate a {div} tag style to set your asides apart?)

I've been told, and I believe it holds up, that dark text on a light background is more easily readable and less eye-fatiguing than the reverse, on small screens like computer monitors. (On overhead projections, light text on dark backgrounds is preferable.) Might be something potentially useful to keep in mind, though the intended tone of your setting and site should also be a concern as well, of course.

Honestly, the biggest thing that stands out in your design is the brown color you're using as a menu/content background. I don't know why, but it seems to really jump out at me in a sort of strong and negative way, especially in contrast to the subtle watermark pictures in darker colors you're using for backgrounds elsewhere. If you're not going to use similar picture backgrounds in the brown panels, might you consider a different, more muted color than that gravylicious tan?
Title: Site design
Post by: Matt Larkin (author) on January 16, 2007, 09:56:58 AM
In theory you can repeat the bar if it is background for the DIV as such (in the CSS)


{background-image: URL;
background-repeat: repeat-y;
}


As in repeat on the y-axis.  But I've never tried this.

Also, as Luminous said, I stopped using a black background because the guy helping me design the basic layout said it was considered unprofessional.  You might consider something a little lighter.

I'll wait to see it implemented before I comment on the unusual breakdown of text boxes, but I can see that being a little odd like he said.  On the other hand, without seeing text in there, it's hard to say for sure.

Edit:

A cleaned up version of the text:


{
background: url("i/bar-1.gif") repeat-y fixed top left;
}


Either in body to be the whole page, or in a DIV to apply it to that DIV.
Title: Site design
Post by: Lmns Crn on January 16, 2007, 12:37:14 PM
Quote from: Phoenix KnightAlso, as Luminous said, I stopped using a black background because the guy helping me design the basic layout said it was considered unprofessional.  You might consider something a little lighter.
I'd like to run this by you, because I've been doing this for years and can't remember where I heard it, or why it was important.

Do you avoid #000000 and #ffffff? I remember reading once that using pure black or pure white in a webpage is bad mojo, and that near-black and near-white shades of other colors are greatly preferred. Did I make that up, or is there weight behind it?
Title: Site design
Post by: Matt Larkin (author) on January 16, 2007, 12:41:21 PM
I've never heard that, but it's my friend that's the professional designer.  I've only dabbled with it.

I use #ffffff for the background of the content area, but there is a gradient above it, making it appear like the background fades from grey to white.

I use black text, but in many areas he choose a color scheme based on the banner Ishy designed for me.  So you see some dark-green colors.

For example, the background color behind the menu is not black, it's #546454
Title: Site design
Post by: Ishmayl-Retired on January 16, 2007, 05:29:09 PM
That's not the first time I've heard the same info about dark backgrounds and light text.  I may be doing a re-working, because while I don't necessarily agree, I can see where other people are coming from.

In answer to your questions about the various boxes, my original plan was to use the dark (black) top box to be an introduction for each section; something like a blurb.  Then, the lower section (where the brown starts), would be all the major content.  Also, the smaller box to the left (where I have Updates listed on the main page) would be used for Updates (but only on the main page), and on all other pages, would be for in-page links.  For instance, the navigation bar to the right would say "Races" (or whatever), and when you actually go to the "races" page, that box to the left would list all the races.
Title: Site design
Post by: Ishmayl-Retired on February 03, 2007, 12:33:36 PM
Okay, I've done a bit of a revamp (a bit?) for my new site.  It's still far from complete, but I wanted you guys (those of you who care about this sort of thing) to see how it's progressing, and maybe offer criticisms, advice, etc.  As a request, I'm trying to figure out a good way to incorporate sub-menus on my site.  For instance, on the "Races" page, I will want to be able to go to different races pretty easily.  I'm thinking of in-page links, but where should I put those links?

Cheers!

New Shadowfell Page (WIP) (http://www.shadowfell.org/new/index.php)

By the way, the page does not look very good in IE, so if that's the only browser you use, you won't really be able to tell what the site looks like.  And I most likely won't be working the css to look nice in multiple browsers; I've given up trying to make things work properly in IE.
Title: Site design
Post by: Matt Larkin (author) on February 03, 2007, 12:43:54 PM
Visually, it is beautiful.  I really like both the color scheme and the background graphic.  Where to place sublinks is something I've struggled with, too.  Lately, I've been trying to figure out how to make collapsible menus, but I'm not sure it would work as well in your particular layout.

Making stuff work right in IE is tough.  But as a page brainface just pointed me to offhandly mentioned, 102% of internet users use it ;) so I have to at least try.
Title: Site design
Post by: Ishmayl-Retired on February 03, 2007, 08:17:53 PM
You're absolutely right about IE, but like I said above, I've just lost interest in putting a ton of effort into making something look good on a crappy browser; to me, it's like trying to paint a masterpiece on the side of a cardboard box.  All the ridges are going to get in the way, it's probably the wrong shape, it's been rained on so it's soggy, and most likely, there's a bunch of markings and paintings on it from previous efforts to make it look nicer than it can be.  Once I'm done completely, I'll probably put a little bit of effort into IE, but it'll only be enough to make the site look "passable."
Title: Site design
Post by: Matt Larkin (author) on February 07, 2007, 03:22:58 PM
Ishy, my site is now using the layered menu system if you want to check it out.  It's not perfect, but I'm relatively pleased.

Again, credit to brainface for pointing my in the right direction.
Title: Site design
Post by: Lmns Crn on April 19, 2007, 12:07:10 AM
I did a little work with CSS and graphics today, while I should have been spending time on my paper!

The LINK. (http://www.thecbg.org/settings/13/jade/index.php)

Things that have changed:
1. The whole shebang is now centered. (Finally figured out how to do that! :yumm: )
2. Fixed an issue with the size of color bars. (Now the dark green bar under the menu always stretches to the bottom of the page, even when there is a lot of text.)
3. Fixed a weird problem with a lot of DIV placement errors when you click "Places" in the menu. (Still don't know what caused it, or how I fixed it.)
4. Added a horizontal graphic "rune bar" between the title and content/menu sections of the page.

Things I still need to do:
1. Fix the "rune bar" so it's less ugly, and less full of gaps.
2. Replace placeholder title banner and "dis-fal runes" graphics with permanent, nice-looking ones, and add more graphics to the lower right hand circulation.
3. Add placeholder pages for blank sections in the second half of the menu ("progress" through "codex").
4. Add content to existing pages, etc.

That's it for now, though. I'm really happy with the progress made on layout today.
Title: Site design
Post by: SDragon on April 19, 2007, 01:01:09 AM
OK, I'm working on the Xiluh site, but only knowing HTML (and not too impressively well, to boot), I think I'm going to need some basic CSS lessons and/or tutorials... This is all being done in notepad >.<

As LC mentioned earlier, CSS lets you "predefine chunks of [style] that you can later call forth at will"? Does this mean you only need to make the background and such once, and it applies to every page? If so, how does the code manage to do that between pages? Like I said, this is something I'll need some tutorials and/or lessons for...
Title: Site design
Post by: brainface on April 19, 2007, 01:09:58 AM
In the css file, you attach styles to tags, classes, or ids. (or some combination thereof)
The stylesheet:

p { color:red;}
.classOfNote {color:blue;}
#idOfIntro {color:green;}


Ignore the '\n's. they're to make the code tag not act stupid

This will be red, as will all paragraphs

\n

This will be blue

\n
As will this
\n

This will be green. id is a "stronger" selector than tags




You associate a stylesheet with an html page somewhere in the header.



You can also include css styles in each html page, but that defeats some of the purpose.


Tutorials! http://htmldog.com/guides/
Html tag reference! http://htmldog.com/reference/htmltags/
css rule reference! http://htmldog.com/reference/cssproperties/
Title: Site design
Post by: Lmns Crn on April 19, 2007, 09:29:09 AM
Quote from: http://www.yourhtmlsource.com/stylesheets/introduction.htmlsome[/url] CSS (http://www.w3schools.com/css/css_examples.asp) resources (http://home.tampabay.rr.com/bmerkey/cheatsheet.htm), which were quite helpful.
Quote from: quote[/b)I never forget a face, but in your case, I'll be glad to make an exception!(/div) (div class=qattrib) -Groucho Marx(/div)
.quote {width: 510px; margin-left: 50px; margin-right: 50px; padding-left: 10px; font-size: 110%; font-style: italic; color: #225500; }
.qattrib {width: 510px; margin-top: 5px; margin-left: 50px; margin-right: 50px; padding-right: 10px; text-align: right; background: #88bb88;}
If so, how does the code manage to do that between pages? [/quote]Like I said, this is something I'll need some tutorials and/or lessons for...[/quote]The three tutorials I linked above are things I found just by typing "CSS tutorial" into Google. The internet is swarming with them, if you need to find additional ones.

I'm going to browse Brainface's HTML Dog site when I get a spare moment, to see if I can glean any useful information from it. I managed to make a workable .css file, but I did it basically by copying and altering tutorials and examples, without much true, deep comprehension.
Title: Site design
Post by: Matt Larkin (author) on April 19, 2007, 09:53:31 AM
LC, the rune banner currently seems to spill over (wrap around) onto the title, at least in FireFox.
Title: Site design
Post by: Lmns Crn on April 19, 2007, 09:57:47 AM
Quote from: Phoenix KnightLC, the rune banner currently seems to spill over (wrap around) onto the title, at least in FireFox.
Yeah, that happens if the browser window is less than 1200px wide. I'm pretty sure there's a way to get the two "fading" sections on the ends to stick off the edge of the page rather than wrap onto it, I just haven't figured it out yet.

I'm using Firefox, but with a rather large resolution. I'm pretty sure the site looks like absolute garbage on IE, etc. I'll deal with that soon, I guess.
Title: Site design
Post by: Ishmayl-Retired on April 19, 2007, 10:09:57 AM
2 Resources I've found extremely useful for some of the stuff I do:

Little Boxes (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html) (Yeah, that's what the site is called.

The Edge (http://meyerweb.com/eric/css/edge/) Very nice site with some good tips.
Title: Site design
Post by: SDragon on April 19, 2007, 10:13:59 AM
Ah, so it works through a link... That's actually quite clever, I think I'll like using CSS.
Title: Site design
Post by: Lmns Crn on April 19, 2007, 01:22:38 PM
For a bare-bones template I started this morning, THIS (http://www.thecbg.org/settings/13/lomr/) is pretty slick.

Edit: I'm trying out some more freeform ways of setting up a navigation menu. Click on some stuff and try it out. Also, try resizing the screen to see where things go.
Title: Site design
Post by: Ishmayl-Retired on April 19, 2007, 01:31:06 PM
Oooh, pretty colors, but painful on my sensitive eyeballs :(

What kinds of plans do you have for your logo/banner for Jade Stage?
Title: Site design
Post by: Lmns Crn on April 19, 2007, 01:39:49 PM
Quote from: IshmaylOooh, pretty colors, but painful on my sensitive eyeballs :(
What kinds of plans do you have for your logo/banner for Jade Stage?[/quote]I don't really know yet. I'm not such a whiz at graphics, so I'm still trying to get a few things figured out. I might lighten up the background so that it matches the slightly paler green at the very left and right of the page, and set the logo and "rune strip" not to scroll with the rest of the page. (The content and menu would scroll up "under" the header.) On the other hand, that might look really dumb!

I think I want to lose the handwritten style for the banner, and somehow tie it into the more angular look of the runes. But then, I'm not really happy with the way the runes look at the moment either, so working too much on the logo seems a little premature.