Electronic Music 411 - Creating a Web Site - Gah, Bläh & Aaargh! (Help!)

EM411.com
Electronic Music Production, MP3's, Live Shows, Blogs and Community

Share your music and get feedback.

Matti's emID

Stockholm, Sweden

Message me

View my emID

Creating a Web Site - Gah, Bläh & Aaargh! (Help!)

StoreTags: matti, help, web site, build

Author: Matti on September 18 2006

Viewed 2916 times. 4 people liked this blog. You can rate it below if you haven't already.

People who enjoyed reading this: ignatius, Spark, mixedtape, AdinaMarie

--> Building my first new web site in years, I'm stuck.
I had forgotten most of the very little I knew.
After doing some research, I realised
a) frames are out and
b) I better learn CSS

so I did, somewhat. I designed it with a "frames mentality" still in place - i.e. I have an old-school front page. Header, footer, left-side menu bar, right-side content box.

Only to realise I can't find a way to link that content box to the menu choices, without resorting to the old "page1/2/3/4.html" structure. Am I making sense so far?

Now, to the actual question:
Can I do "frames" style presentation some other, light-weight and easy way? I don't know much about how php/cms works, but it seems like overkill for this kind of site. I'm thinking there must be some javascript I could use. But I have qualms about compatibility and accessibility.

Maybe I'll relent and do it the Trash80 way : link
It's rather cool, in a "fuck you, I don't need design" kind of way.

Do you have any suggestions?

Digg it | Delicious

Read Matti's other blogs.Matti's Recent Blogs

Happy Birthday RDJ (Tags: drugs, RDJ, birthday)

Where is the new dance? (Tags: matti, dance, drunk, new)

Creating a Web Site - Gah, Bläh & Aaargh! (Help!) (Tags: matti, help, web site, build)

Oh, the irony (Tags: gear, matti, information ove)

Home rapping is killing music (Tags: whatwouldjesusd, kill, rap)

Comments

1 | 2

09/18/06 + celibacyclub

trash 80's site used to be so different.

its was like a really sweet vst gui.

Recent blogs: em411 vimeo group, cc's monome, quixit in irc soon

09/18/06 + Unknownforce

yeah i don't think its 1994 stylee through choice
his site got haxx0red, he had such a cool looking site as well

Recent blogs: Cable complaint, Ever bumped into an old friend from school?, Stfu photos - finally!

09/18/06 + Unknownforce

i'm sure there will be some good sites where you can learn css, though it was mixedtape who taught me css layouts
its good/better when you know how
i know you can simulate frames with ajax link

Recent blogs: Cable complaint, Ever bumped into an old friend from school?, Stfu photos - finally!

09/18/06 + p

my suggestion. you could mimic frames using iframe.

link

Recent blogs: getting it together update, Duane Pitre?! WTF???!!, Creative Commons for a good book

09/18/06 + jdg

P HAS INTERNET

Recent blogs: speedy j steals the mixit, cmj loves fredo, What is your favorite track that you've made?

09/18/06 + Zanf

T80 site says: "Due to security holes in out of date code, Trash80.net will be presented 1994 Style. =D"

if you want to do a web 2.0/standards compliant site then you will have to learn css and have no frames or nested tables [they mess with inherited css values].

You could hack a wordpress cms [or a few others like link ] as someone did for frnortnr link

Recent blogs: Facial Visualiser, KazooKeylele!, When the poor can't eat....

edited: Sep 18 2006 + jcd

trash80 is the shizz. My current site looks kind of like his, but not in a 'fuck you I don't need good design' way (because I do need it [also his music is approximately 68 times better than mine]), but because I don't know enough to get fancy with CSS / Ruby /PHP yet.

I keep hearing that iframes are vastly superior to regular frames, but I never had a problem with regular frames, and I don't really see any difference between them and iframes.

Ah well, better listen to the experts.

Recent blogs: I'm on Magnatune! Kind of., An Orgy of Commerce, My website is better

edited: Sep 18 2006 + Spark

Trash-80's design IS a good design.

There are many ways of making a website easier, and less code and laborious "page making", but all of them require learning something new and subjectively complex.

Learning CSS is pretty simple.. it's just a list of properties, and then you can define "classes" of those properties and apply then to blocks of html code. Getting the abstract concept of it will free you up from learning all of it (as most of it is JUST properties of stuff like size of text and color of scrollbar).

A CSS/PHP combo would allow you to do something like create a template "page" and then render in different text files/images based on a few simple variables.

From personal experience.. if you have a design idea in mind, through the course of learning both to a beginner level, you could build something as complex as you've described. The knowledge gained would give you the ability to do some neat web stuff with little effort.

Webmonkey (http://www.webmonkey.com ) has exceptional resources for learning both, and give clear, usable descriptions of the concepts.

I can help you create a flow chart, or basic idea if you need some help with that.. because a basic web app is still a web app, and there are some organizational rules that can be a little hard to understand at first.

But read the webmonkey stuff first.

Recent blogs: Sons Grave + Web Overhaul., Blow On It, Fun

edited: Sep 19 2006 + mrpanda

CSS, Div layers, and Server-side includes are your best friend for dynamic content.

I like to define my own sections in the style reference and then reuse them. If you make a parent css page and then reference it in all your child pages, you can make changes across the board, but only edit one file.

So say you want a specific box to contain a menu item or something, in the style portion of the code you could add a section like this:

#menu_item
{
border: 1px solid #000000;
color: #ff0000;
font-size: large;
width: 100px;
height: 25px;
position: relative;
}

And so on and so forth defining whatever variables you need.

Then in the body where you want that style to encapsulate a piece of text like you would have used for a cell on a table, you can have something like

<div id="menu_item">
link number one
</div>
<div id="menu_item">
link number two
</div>

And so on. You can then make as many different user defined chunks as you want and it certainly makes things a lot easier to take care of on the back end (even though naming two divs the same is technically illegal in html, most browsers will interpret it just fine). You can even reference absolute locations in css, so you could place boxes very precisly although that admittedly makes things much more complicated, but it's still easier than working with massive and elaborate tables.

Then for portions of code you use on multiple pages like your navigation menu, simply put it in a seperate page and then reference it with server side includes on each one. You would still have seperate pages, but say you want to add a new link to the menu, or change one. You would then only have to edit the one menu page rather than your 7 or 8 content pages.

I second webmonkey link and also link and link - it's for kids, but that means the explainations will be a little less technical and little more concise. Then when you have a better understanding of how the object functions, go to a w3c reference and look at it again.

Recent blogs: Broken PC leads to interesting things, Down In June, Doing the band thing

09/19/06 + Matti

I'm overwhelmed with all your feedback! But also a little worried - you all seem so knowledgeable about this, do you really find time to make music?

Thanks!

While I've googled plenty of css tutorials and learned from those, they seem to cover mostly the design/appearance aspects and little of the design/functionality aspects. Or maybe it's because I don't understand the basic concepts, I don't see the advice for what it is.

Anyway, I will use this info and delve further!

Recent blogs: Happy Birthday RDJ, Where is the new dance?, Creating a Web Site - Gah, Bläh & Aaargh! (Help!)

09/19/06 + F7Sharp11

Photoshop is the way to go man, as it will generate all the scripts, CSS, Div layers, and other codes that become the web pages that we see. While you can create very nice looking pages, and specify different output formats ie: html, css, ........, you will also be able to become familiar with all the coding.

I prefer this kind of learning method, that is the "dive in" approach. Just my take though.

Recent blogs: Overworked.........have a few of those myself., Chordal Nectar Dripping and Somewhat Sticky

09/19/06 + fakeBlooper

photoshop is def the easiest way to get a stew goin' just be smart about where you slice and swap out blank slices with a css defined color to save on download time.

Recent blogs: ableton microtonal oscillator utility, awesome, mobo alert sequencer

09/19/06 + jcd

That's good stuff, mrpanda. Thanks for the examples and links.

Recent blogs: I'm on Magnatune! Kind of., An Orgy of Commerce, My website is better

09/20/06 + mrpanda

jcd said: "That's good stuff, mrpanda. Thanks for the examples and links."

No problem. Glad I could help some.

Recent blogs: Broken PC leads to interesting things, Down In June, Doing the band thing

edited: Sep 21 2006 + cbit

<div id="menu_item">
link number one
</div>
<div id="menu_item">
link number two
</div>

Mr panda is on the right track. The example can be improved though by using semantically appropriate tags that already exist, and styling those instead of adding unnecessary divs (google 'div soup' for a fuller discussion of this).

Semantic elements convey info about the type of the stuff they contain. divs and spans are non-semantic elements, theyre useful as a way of provide extra css 'hooks' (vis class and id attributes) for styling certain things differently. the fact that some text is contained inside a div doesnt say anything about what that text 'means'.. compare that to a li (list item) element, you know that whatever is inside that is an element that is part of a list of things.

In general your code will be cleaner, and easier to follow/maintain if you avoid using divs and spans if there are appropriate elements with a semantic meaning that you could use instead. For instance, we can add an id to a ul element to provide all the 'hooks' we need to effectively turn a unordered list into a navigation bar (a ul is an appropriate element to use because a navigation bar is fundamentally a list of links).


<ul id="nav_bar">
<li><a href="/musiclist.html">A bunch of musics</a></li>
<li><a href="/info.html">A bunch of infos</a></li>
<li><a href="/linkslist.html">A bunch of links</a></li>
</ul>

---
<style type="text/css">
/* heres a couple of css rules that would display the above nav bar as a row of links, like the em411 nav */
#nav_bar{
list-style:none; /* get rid of the default 'dots' next to list items */
}

#nav_bar li{
display:block; /* google the difference between 'inline' and 'block' display modes, using block here so i can define a width and height */
float:left; /* display the element as far to the left as possible, but to the right of any previous flot:left elements */
width:120px;
height:30px;
background-color:#ff0;
margin-left:5px;
}
</style>

disclaimer: yes the yellow nav bar looks like ass :D with a bit more care you can make stuff that doesnt look like ass.

---

link heres a thorough exploration of some techniques for styling lists.

link general css primer.

---

frames/iframe: my take is, don't do it. You make things 100* harder for yourself, google and your visitors (as soon as they want to do anything 'advanced' on your site, like bookmarking a page or printing).

Recent blogs: Mormo records on Bandcamp, STEIM is safe, Song for Two Mega Sites

1 | 2

You must be a member to reply or post. signup or login