[thelist] can someone build a 100-page website with only HTML/CSS skill?

Zhang Weiwu zhangweiwu at realss.com
Tue Nov 11 10:29:20 CST 2008


Hassan Schroeder wrote:
> On Tue, Nov 11, 2008 at 7:22 AM, Zhang Weiwu <zhangweiwu at realss.com> wrote:
>
>   
>> It's difficult to highlight the current level in the navigation bar with
>> static design.
>>     
>
> It's difficult to do *lots* of subtle but useful things with static design,
> and that really doesn't relate to the site size.
>
> But as you point out, manual site design techniques definitely run
> into issues with scaling.
>
>   
It seems having a properly working navigation bar did hit the limit with
only HTML/CSS skill. However I am thinking with proper navigation
generating tools one can still get the navigation bar generated in a
scripting language (e.g. php) without having to write that generating
script, instead configure the navigation bar generation script through a
configuration file. Would be much easier to manage than taking a
scripting language learning curve.

I just think such scripts (server-side navigation bar generation
according to a configuration file) should be already available but a
short google didn't find an answer. I sketched a tiny program (8 lines
in awk) to showcase my idea.

The configuration file:

$ cat map 
news_and_events News and Events
major_initiatives Major Initiatives
about_us About Us
	what_do_we_do What do we do
	publications Publications
		books Books
		journals Journals
	books Books

The script:

$ cat topnav.awk
BEGIN { print "<ul class=\"primary navbar\">"; }
END { print "</ul>";}
/^[^\t]/ { uri = $1; txt = substr($0, index($0, " ")); current = "unsure"; }
current_name == $1 {current = "yes"}
/^[^\t]/ { 
        print "<li " (current == "yes" ? "class=\"selected\"" : "") ">";
        print "<a href=\"" uri "\">" txt "</a></li>";
}

Result:

$ awk -f topnav.awk current_name=about_us
<ul class="primary navbar">
<li >
<a href="news_and_events"> News and Events</a></li>
<li >
<a href="major_initiatives"> Major Initiatives</a></li>
<li class="selected">
<a href="about_us"> About Us</a></li>
</ul>

this 8-line script is very limited and only produce the top level
navigation, but, eh, you get the idea. There must be someone did this
already in much better way, only need to find it out instead of
re-inventing the wheel. A designer could have several such prepared
script around in her 'toolbox' I guess.




More information about the thelist mailing list