Basic site stuff...

Discussion in 'Web Design & Programming' started by Exfoliate, Apr 17, 2005.

  1. Exfoliate

    Exfoliate Geek Trainee

    Likes Received:
    166
    Trophy Points:
    0
    I eventually want to create my own site (like around this summer or sooner?) but I'm a total n00b when it comes to anything even slightly programing oriented. For starters what is PHP and CSS? I know I need 'em (or at least PHP right) to get my site off the ground but are they programs or a language or what (see, I don't have a clue). What else would I need to create my site, I've got PhotoShop CS which is probably enough but for what it's worth I have DreamWeaver MX w/ flash and all that if I need it too. I've got plenty of ideas and good links for tuts on layouts and interface but I could use some input on these remedial ideas. Thanks!
     
  2. Waffle

    Waffle Alpha Geek

    Likes Received:
    38
    Trophy Points:
    0
    CSS: Cascading Style Sheets

    This is basically a file that you place in the main directory, and every single page has a special link in that page's header. (I can look this up for you if you need it)

    I'll post code from Shattered Realms CSS sheet, and then explain it.



    And yes for all you smart asses I know I put PHP in the code box :p

    ------------------

    PHP:
    <style type="text/css">

    body {
        
    background-color#A3A2A2;
    }
    .
    style5 {font-familyArialHelveticasans-seriffont-size14px; }

    .
    over background-color#8D8D8D; }
    .out { }

     
    a:link {
    color #000000;
    text-decoration none;
    }

    a:visited {
    color #000000;
    text-decoration none;
    }

    a:active {
    color #000000;
    text-decoration none;
    }

    a:hover {
    color :#FFFFFF;
    text-decoration none;
    }
    </
    style>
    -----------------
    Ok every "sheet" starts off with <style type=">

    This tells the browser if its text related, or javascript related etc.

    The most common is <style type=text/css>

    In other words, all of the following code will effect the text and tables of the site.

    PHP:
    body {
        
    background-color#A3A2A2;
    }
    The first bit of the code tells the browser and all the pages linked to the sheet that the background colour is #A3A2A2, which is the light grey.

    Simple enough.

    Now if you were to change that number on the CSS to say, #666666, which is a very dark grey, and save it, every single page would automatically have this dark grey background.

    Next part

    PHP:
    .style5 {font-familyArialHelveticasans-seriffont-size14px; }
    This is basically saying that any text assigned the ".style5" will be Arial, Helvetica..... with a font size of 14px.

    So then all you do is select the text on the pages and assign ".style5" for this parargraph, then for example ".style7" which is impact font and very large, to this part.

    It saves a lot of time editing a lot of text as you haven't got to manually assign a size, font, colour each time you want to change it.

    And of course you can always update the code in the CSS to make site wide changes in seconds.

    The next part,

    PHP:
    <!--
    .
    over background-color#8D8D8D; }
    .out { }
    -->

     
    a:link {
    color #000000;
    text-decoration none;
    }

    a:visited {
    color #000000;
    text-decoration none;
    }

    a:active {
    color #000000;
    text-decoration none;
    }

    a:hover {
    color :#FFFFFF;
    text-decoration none;
    }
    is slightly more advanced. The first piece with the "
    PHP:
    <!--
    .
    over background-color#8D8D8D; }
    .out { }
    -->
    is basically saying that any cell in the tables on any of the page wil l have that colour *8D8D8D as a background when the mouse goes ".over" the cell. Like on our site.

    And the ".out" is the colour it changes to when the mouse leaves the area.
    Again changing this colour will make system wide changes.

    The last bit, with "link, visited, over, down" is a type of hyper link formatting.

    In other words, any "Link" will have the colour, size, font and "decoration" you choose. (decoration being underlined, bold etc).

    Hover is the style of link that occurs when the mouse hovers over the link.
    For example it might go bold or change colour (black to white in our site).

    Down is when the mouse is clicked, Its not a very popular attribute though.

    And Visited is the style the link remains after it has been clicked.


    And don't forget to end the sheet with </style>

    and it goes inbetween the <head></head> tags.

    Hope this helps, Sniper can help you with PHP.
     
  3. Addis

    Addis The King

    Likes Received:
    91
    Trophy Points:
    48
    Yea CSS is a much better way of formatting pages.

    PHP is basically code which the web server executed and then puts the output of the code into the html doc.
    Code:
    <?php echo '<p>Hello World</p>'; ?>
    would output hello world. But the thing is because the code is parsed already on the server, no-one can take your code since all they would see in the source code is the <p>hello world</p> bit.

    Code:
    <?php 
    $name = 'Your name';
    echo "$name";
    ?>
    
    and in the source code only 'Your name' is outputed, thus its a very powerful way to make dynamic data driven websites that keep your code nice and private. Sniper wil know more on this
     
  4. Big B

    Big B HWF Godfather

    Likes Received:
    145
    Trophy Points:
    63
    It's older, but you also might want to familiarize yourself with HTML as it might be helpful too. It's probably the easiest thing to start out with as I've been told PHP sorta expands on it (at least that's what a college prof told me---I never got around to taking his PHP class).
     
  5. Addis

    Addis The King

    Likes Received:
    91
    Trophy Points:
    48
    Yep not point in learning CSS/PHP unless you have a firm grip with standard HTML.
     
  6. Fred

    Fred Moderator

    Likes Received:
    11
    Trophy Points:
    18
    Hey Waffle, you might want to post a guide like the one you just did on your site. It could be helpful to a lot of people.
     
  7. Waffle

    Waffle Alpha Geek

    Likes Received:
    38
    Trophy Points:
    0
    yeah good idea fred, took ages lol :p

    whats more worrying is i actually understand what im talking about, which is a first for me and coding, thats for sure! :D
     
  8. Addis

    Addis The King

    Likes Received:
    91
    Trophy Points:
    48
    Web design just doesn't seem to come easily to me. Or maybe I'm just too lazy to practice and read tuts.
     
  9. Exfoliate

    Exfoliate Geek Trainee

    Likes Received:
    166
    Trophy Points:
    0
    Wow, very nice guys, appreciate alot. I'd better get a HTML book or web tut or something and once I'm competant in that I'll look for PHP/CSS stuff. Thanks!
     
  10. Waffle

    Waffle Alpha Geek

    Likes Received:
    38
    Trophy Points:
    0
    html is easy with editors like dreamweaver/frontpage, but i know people that can do a whole site using notepad and a folder of images, its amazing.
     
  11. Sniper

    Sniper Administrator Staff Member

    Likes Received:
    59
    Trophy Points:
    63
    I advantage of using notepad is that you get a very clean code for the site, while editors tend to have messy code, like Front Page but Dreamweaver is good.

    My advice would be to get someone to help out or partner with someone, often you will find its much easier to solve problems and learn stuff from each other. Also you'd find that time just disappears when doing HTML/Design.

    If you want to create a personal site then its fine to work your self else if you want something more you will need people to help out. For example you could (I know you already do) work with Waffle to make the site more popular and keep on improving it?

    I started zone 365 with Big B, without him there would have been no site...(maybe Big B still has his old site?)

    Learn PHP/MySQL and HTML/CSS it will make life much easier when updating the site.
     
  12. Exfoliate

    Exfoliate Geek Trainee

    Likes Received:
    166
    Trophy Points:
    0
    Thanks dude, I'm going to Borders on Thurs, maybe I'll get my mom to buy me a book on HTML, PHP, CSS or "MySQL", never heard of that one. How long would you say it would take for me to figure out how to code a very basic site? With a few good books, you chaps, and a few more days of spring break for me (after thurs.) (Yay!) I'll probably get somewhere.
     
  13. Waffle

    Waffle Alpha Geek

    Likes Received:
    38
    Trophy Points:
    0
    well lets just say (and i dont mean to sound like procal x :p)

    but the day i got a book called "From photoshop to dreamweaver", was the same day version 1 of shattered realms was created, coded and uploaded.
     
  14. Exfoliate

    Exfoliate Geek Trainee

    Likes Received:
    166
    Trophy Points:
    0
    Are those the only programs I really need?! I've got to get that book! Of course it will take more like a week and I'd need some HTML guidence and what not but that's awesome.
     
  15. Waffle

    Waffle Alpha Geek

    Likes Received:
    38
    Trophy Points:
    0
    if you want my advise :), i'd do as sniper said and practice coding by making pages/tuts/shout boxes/css sheets etc etc for shattered realms, and then when thats finished we can help you make another one. otherwise we could end up with several average sites instead of one or two awesome sites! :D
     
  16. syngod

    syngod Moderator

    Likes Received:
    15
    Trophy Points:
    18
    A good site to hit for beginners would be W3Schools, it gives a basic overview of HTML, XHTML, CSS, ASP, PHP CF, SQL, WAP and anything else you can imagine.

    Dreamweaver should get you through building a site fairly easily, I prefer to hand code but for a quick graphic update or site change I've logged into Dreamweaver a few times.

    Flash, while installed on the majority of pc's isn't installed on all so it depends who your audience is when deciding to use it.
     
  17. Exfoliate

    Exfoliate Geek Trainee

    Likes Received:
    166
    Trophy Points:
    0
    Awesome dude, thanks! I'll definately look into that tomorrow, could save me a book or too, though I still want to look on amazon for Waffles From PhotoShop to Dreamweaver.
     
  18. Waffle

    Waffle Alpha Geek

    Likes Received:
    38
    Trophy Points:
    0
    yeah its only about 16 quid for me, definitely worth it!
     
  19. Exfoliate

    Exfoliate Geek Trainee

    Likes Received:
    166
    Trophy Points:
    0
    Damn, it's really expensive on amazon, $56 or something, and that's including the used prices!
     
  20. ninja fetus

    ninja fetus I'm a thugged out gangsta

    Likes Received:
    65
    Trophy Points:
    48
    hahahaha I've seen that done, pretty cool. Kinda worries me when my friend and I joke about writing a whole new operating system in notepad :eek:hah:
     

Share This Page