Website For Youuuuuuuuuu

ez guys...

a kid just asked about webdesign stuff in the getting started section, and I figured I would post this info in this section as it is the closest to that section...

These templetes are in HTML, XHTML, and CSS

With a little design knowledge you can get your own business site up and running for really cheap... I'm talking less then 10 bucks a month....

Site templates

you can get site design templates from here...
http://www.oswd.org/

very generic but you have design skills you can get a lot done with it...


as far as your scripts go to
www.sourceforge.net

or
www.hotscripts.com

there are a bunch of free flash mp3 players and pay pal scripts...

in google type free flash player... for the players.
here is one flash player that I have used...
http://www.premiumbeat.com/flash_res..._music_player/

ez to use a little XML and its up and going


PHP isn't the hardest thing on the planet to learn..

and in source forge type paypal + php + store


[edit]
Oh I forgot your going to need a development enviroment...

Why pay for that either...

Development enviroments...
WAMP
http://www.wampserver.com/en/

IDE
PHP Designer Personal...
http://www.download.com/PHP-Designer-2007-Personal/3000-7957_4-10575026.html

Image manipulation...
GIMP
http://www.gimp.org/

Vector Graphics..
INKSCAPE
http://www.inkscape.org/

3d manipulation...if you really want to go for it...
Blender..
http://www.blender.org/

notice that .org comes up a lot :)


and if you guys think that any of this stuff isn't as powerful as stuff you would buy here is a video done completely in blender... has a dope message to if you can understand what it is...

http://orange.blender.org/download

I'm sure there is Mac stuff just like this... I just don't own a mac yet... so if anybody wants to fill in that stuff cool..
[/edit]
ez,
k
 
Last edited:
Nice how to get started guide bro. :cheers:
You can also use xampp.
I'm running PHP designer 2008. .
HTML Kit is also a good editor

It helps a lot especially when your working with a lot of function and classes. Of course you don't you have to use the editor I've mention. You could always code in a notepad or just a basic text editor. I stated out with text editor and then went to Dreamweaver. Dreamweaver was an overkill for the work I was doing for my company. I do mostly the back end for my job, I don't do much designing, so PHP Designer 2008 works for me.:D
 
Last edited:
How to build your own music website:
(the Basics from concept to completion)

So this is a little how to that I'm doing for the people on FP. I have other stuff to work on normally, but I'm just putting this together in
my spare time between doing MY work, and practice and stuff.

Anyway, What is this?

This little guide will(hopefully) show you with video documentation(eventually) how to build develop, edit, program, tweak, and launch a personal website devoted strickly to music.

First, I'm just a regular dude over here. I've put together these
skills NOT by going to school. With that said, there maybe things I
leave out, because I want YOU to do HOMEWORK on it, and learn so thatyou may not learn VERY bad habits from ME. Again, I teach myself everything. Don't be afraid to cross check terms, in Google, or
wikipedia, or any other source that I list along the way, or don't...(books are great).


Concept to Completion?

It is term used mostly in production circles. That mean you take an Idea,and you fully develop it until it is a FINISHED PRODUCT. That's it.Don't think of it more then what you are really trying to accomplish.

The first thing we need to do is find out what we are building. This
can be done by going to your favorite artist, or music groups website.
Now a lot of times people will go to different sites and see all this
flash, and after effects movies and think a lot of the stuff is beyond
there normal capabilities. That is not the case. I will(hopefully) do
other tutorials on this NEW trend of Freeware/Open Source services.
Where the power is almost fully in your hands.... if your willing to LEARN,and WORK.

First Concept.

Look at the site's of your favorite artist or record label:

Take notes on the sections...(how many does it have?)

What is each section? (record a slot for each one on a note pad)

Is there a noticeable theme (light, dark, colours, ect)

What site Functions are there?(pay pal store, calender, marquee, Music,players, videos, galleries, Flash, ect.)

How long does it take to load the site? (is it quick or long?)

Ultimately what do you want your site to look like?


Lets start by going to www.dre2001.com

As posted on wikipedia as dre's "official" page albeit it does have an old sounding domain.


Lets fill out those sections real quick...

Homepage: first we are met with a quick loading flash movie...
some images appear with motion, and a menu appears on the left hand side.

It's very stylish and simple.The color scheme for the first page is blue black and white, with a dominate blue background.a logo for dre is present as well as a rather contemplative picture of dre. Obviously to engage the website visitor into he's "deep" web world.


Menu:
The sections include, News, Tour Dates, Video, Music, Words, Records, Fan Forums, Email.

That is the first page.

Move on and check out the other sections of the site. noting in each one as I have done what it contains. I'll fill it in real quick to get the idea.

NOTE:This is so not so you can copy his site, but rather understand what a "completed site" will most likely have in it. Things don't have to function the same for a decent web presence.


News section: appears with another image of dre, colour scheme changes from a dominant blue to red, and keep the black and white as menu. more motion very quick loading.


Tour Dates section: contains nothing most likely because he ain't touring, but there is still a weird menu music, and weed bud viewer¿


Videos section: contains another flash movie, with the blue and white theme again, and links to videos in real player format.


Music section: contains another flash movie with the blue and white theme again, and links to dre's music, and a little music plays on each section as an intro.


Words/bio section: contains another flash movie with the same blue and white theme, dre music, and a little bio in the lower bottom of the screen.


Forum: same layout as tour dates with a forum wrapper in it.

Email: Main theme layout with a contact forum and registration for newsletter.


That is a complete website.

His web presence gives everything he wants known quickly, in a stylish fashion with a consistent theme.

Go through the site a couple times to see what I'm talking about.


Now lets get all the pieces we need for YOUR website.

youuuuuu need a home page and theme that is consistent throughout.

youuuuuu need music to play, or other functions, stores, ect...

youuuuuu need an email contact.

youuuuuu need a bio

youuuuuu need content(videos, music, pics ect..)


That's about it for the concept part. Make your own concept for how you want to be presented to the world. Is it the man from outer space, a thug on the run, a wise poet, ect.. just make sure you keep that in mind as you build the site.



So you should now have the concept for your web presence.

Lets start to gather materials. the links I list are for this example, you need to seach for what you want things to look like and need. This is quick and to the point. You can customize things so they look WAY more professional but for time sake this is what I've done to show you how to get on with it all...


First Know the Language. I've already been using terms that you have knowledge of. Flash, video, real player, home page, web prescence ect.. these are all terms in Web Dev. but the nitty gritty of it all comes down to Programing languages... these are all componets of building a web site to be served from a web server.

Language

HTML

XHTML

XML

CSS

JavaScript

PHP

CGI

MySql<~~~database


go to: http://www.w3.org/ to find out more.


I'm not going to teach you each language.. it would take WAY to long, your going to have to show some initiative on that front, I will show you how each piece comes together to work. Google anyone¿

Next is Content

Those are pics, videos, music, and anything else you want to be displayed by the browser. (harder then it sounds)

you can use any of the sources I mentioned in my first post about video/image manipulation for graphics.


Again, this stuff it voluminous. so you gotta be willing to DO YOUR HOMEWORK. a good site for learning the art side of life is: www.pixel2life.com


Ok so you now have some ground rules, and stuff to look up for the next year right lol... well I'll save you a lot of time, and show you how to get this stuff done quick.


first lets handle that programming section.

for this example I'm going to make a simple HTML/XHTML site that contains a css design and some PHP functions for a store, a couple flash players for music, and to the point email form.

What we need to work with?

a couple things and IDE and a Development environment, some Image manipulation and graphics processing.

IDE
I'm using PHP Designer Personal for this to keep the Open source theme with this stuff, but there are many good IDEs... zend, adobe, blah blah blah...

for a development environment there is Wamp for windows

that is Windows Apache MySql PHP

This is your test server before final launch.

I'll make separate tutorials if requested about each. there are numorus on the web on how to set them up, and be up and running to test your php code and MySql databases..


So you have all this stuff I just told you to get installed, you have a wamp server, php Designer personal, and Gimp installed and open... now what?


you start finding pieces...


you don't have to start with a pre built layout, but hell they are free right..

so go to http://www.oswd.org/

and don't pay too much attention to the latin it's just there to **** with you :)

if you want ideas on what you can do with css go to: http://www.csszengarden.com/

browse around and pick a layout you like, this cuts down on about half of the process right here.

There are thousands of layouts here so download a bunch, you can go by colour, or rows, or anything really. there are some listed under music... although I wouldn't use those. I choose dark theme for this one, just because it's quick and to the point, and matched the "vibe" I want people to see from this artist. different colour schemes do different things like an online educational toy store would not be done in dark colours, as a hardcore hip hop act(depending on theme) would not be done in pink.


http://www.oswd.org/design/preview/id/3360

Baring that you have been able to install everything, you should have:

1. A wamp server that is running in the background fully password protected

2. PHP Designer personal, other IDE, or notepad if you want to hardcore it... I mean command line looks cool, but the tools help speed things up...

3. Gimp, Photoshop, or whatever other image manipulation you desire to put in
(i'm not going deep into that... see the forum link I posted for LOADS of design info)

So download your favorite layout...

move it to the www folder in the wamp directory on your drive.

rename it something along the lines of what you want the site to be named

make a copy and name it the same sitename+2(very important it's always hard to go backwards, making multiple copies and saves of iterations is very crucial to the development environment and process)

Start up your IDE and browser of choice(I use firefox)

go to local host, and open the index file of the number 2 directory in the browser.

and open the number 2 directory of the index file in IDE

NOTE: I went through a lot right there...this isn't going to come quick take your time and look for tutorials on each of those steps. there out there...


Now you should be viewing the website on your computer from both sides.

the IDE shows you the Guts... the Browser shows you the results....

lets start by quickly making the rest of the sections for the site, you only have the one page here.


so go into that www directory where you have the index file or you can do this from the IDE and make a couple copies of that index page, renaming each so that they are the sections of the site.

1 for news
1 for music/video
1 for bio
1 for downloads/video/gallery ect..
1 for contact

My layout has five slots on the menu, you can design however many you want but I'm only going to spend a couple hours on this right now lol...


Go to your IDE and open each of these pages.

Go back to the Index page in the IDE.

Make sure your in edit mode, and start to notice the tags that comprise this document.

You should have an <html> tag, a <head> tag, a <title> tag and so on.

all going down to the bottom, most likely not very long at all really..

First lets get the different pages working right.

Change the <title> tag to the name of your site. Mine is Blah Blah music

I'm not going to go into SEO in this stuff or meta tags that's up to you.

Look for the <H1> tag and change that to your sites name as well.

SAVE...Save constantly Please I can't stress that enough almost after each step really...

look for your menu. now in mine it is directly linked to the CSS Style Sheet so I will open that and explain a little of style sheet, but you really need to look that stuff up.

A sytle sheet controls the layout of a given page by a defined set of calls. Those calls are directly linked to page layout item. All you need to know is most content and function are called by HTML and PHP, Most Style and Color is easily controlled for the whole site or that page by the CSS.

At the top of your index pages and subsequent pages there an initial call.

this is mine: <link href="images/styles.css" rel="stylesheet" type="text/css" />

This functions like an include... lets not get ahead of ourselves tho :)

Navigate to the file and open that in your IDE as well

The <div> for my layout menu is under the Header Call in CSS

So I look for that in the CSS Document.

Now you can see what is controlling what

I'm going start speeding now because it's getting late and I've spent about 3 hours on this at this point.. Way over time schedule :(


Change the links in the menu to the different pages so it looks something like this now

<li><a href="Contact.html">CONTACT</a></li>
<li><a href="Music.html">MUSIC/STORE</a></li>
<li><a href="Bio.html">BIO</a></li>
<li><a href="News.html">NEWS</a></li>
<li><a href="Index.html">HOME</a></li>

Copy that to each other pages menu.

save

Refresh the page in your browser, and click each link in the menu.

They all should work and link back to the home page.

with the same typography spacing and everything for the header and menus.

I'll say at this time, watch what you do, if you make a mistake in one section it's everywhere.

If you missing something people will notice.

Conformity is key you want to present a complete work.

Moving on lets change the <div> for footer on each page to be what you need, and just like with the header.


Ok now the tops and bottoms of all pages have the same info... sweet...

next filling in copywriting.. your on your own on that one... I hope you can Spell :)

Make up some stuff your bio the news you want shown and fill those into each section for each page. These are taken care of by the <p> tags, <h1> tags and so on..

There are a lot of clever XML tricks you can do as well as with streaming content but we don't need to get into all that... this is just so you understand how to get to the end and have something to look at and develop...

So you now have to change each page to what they should have as far as information in TEXT format, the Bio Section, the News, and Home are normally changed at this time.. just to get a general layout going.


In the next week or so I will go through the next section, that will be adding your own images, installing web players,Contact forum and hopefully the store...


Once you've done those you will have something to further tweak and develop.


Enjoy..

ez,
k
 
if anybody is actually using this let me know... if not then I'm not going to finish it... it just takes a lot of time to write this stuff, and nobody has said anything
 
naww man, im actally using it, I just haven't had the time to mess wit it

im using a domain from Godaddy.com and I don't like the templates and tings that they give u so I wanna try some of this stff out

plus my girlfriend makes a lot of money making myspace layouts and shes alwas tellin me that shesworkin on "style sheets" so I wanna read up on em some more
 
Thats cool your posting the stuff, I do my own freelance design work with PHP/MySQL and a good friend of mine XAJAX (Google it)... I also like freecsstemplates.org, they got some pro CSS templates.
 
Yeah I also work in the web development field. I plan to get a portfolio up and launched soon so if any artists need a website im willing to work a deal out with them for money or hardware they could send my way....
 
Back
Top