How to I make a CCS file?

[AmayaHayate]

I REALLY need help with this.  First question: where in my account do I put the CCS file?  Second question: I already know exactly what I want my site to look like, but I want to know if I can place an image at the bottom over background colors, and have the image fade into it towards the top - and part of the image would border the page vertically, as well as at the bottom - I barely understand any of this, and I'm REALLY confused as to where to begin.
   Another question.  When it comes to my page links, how do I place them along the sides?  I really dont' understand any of this, and I'm so confused that even when I studied a few things at w3schools.com, I was just as lost as ever.  My notepad program is retarded.  It doesn't have the correct options in it to even make html right!
     I also want to add actual writing that isn't a picture description, like an about the artist section, and I want to create articles and stuff like that that go along with my art and its theme.
     I just don't know where to begin - I have all my categories in order, but that's it.  I really want to make an excellent-looking site - and I dont' even know how to create an image that'll fit the page!
   This just shows how absolutely lost and confused I am.  The help section didn't help me at all.
   ...Help?

[Richard K Niner]

Lets break this down a bit:

First you can put the CSS file wherever you like, so long as you link to it from the page header.

For playing with fading images, I'd say your best starting point would be to make a copy of the image you want to use, and play with its alpha transparency so that it fades to nothing in the appropriate locations.  Photoshop, if you can find a copy, is really useful for this - I've yet to figure out how to do it in The GIMP.  Then, either save the result as a PNG (thereby making it more difficult to use in Internet Explorer, due to a lack of alpha transparency support), or use a solid coloured layer placed under it to make the whole thing nontransparent, and saving that in your preferred format (PNG works well for this, btw).

For side-links, try this:
<div class="sidebar">
<a href="example.com">Example</a>
<a href="example.com/somesite.html">Another example</a>
</div>

Add the following to your CSS file:
.sidebar { float:left; }
.sidebar a { display:block; }

(Note that you can alter the above example to suit the actual HTML you're using.)

And if you're trying to use notepad: don't.  While I'd recommend Vim, there are other decent text editors that have less of a learning curve.  Mainly, these ones use colour-coding that should make HTML/CSS editing a bit easier; though I won't stop you from getting a WYSIWYG editor like Dreamweaver, Frontpage, etc.

Finally, adding new sections/articles can be done by uploading finished HTML pages (complete with a .html extension) to wherever you like on the site (or .php, or .shtml, but those are a bit more advanced, and probably aren't a good idea for your examples).  You can then link to them from other pages on your site.


Also, unless you want to use the indexer for your homepage (and with the customizations you're planning, you probably don't) upload an HTML file called "index.html" into your /html folder (this also works on any folder inside your website where you want to avoid using the indexer).

[Firehazard]

Quote (Richard K Niner @ Oct. 13 2006, 9:53 am)

For playing with fading images, I'd say your best starting point would be to make a copy of the image you want to use, and play with its alpha transparency so that it fades to nothing in the appropriate locations.  Photoshop, if you can find a copy, is really useful for this - I've yet to figure out how to do it in The GIMP.

Sounds like she wants the image to fade from solid to transparent as it goes up.  This is REALLY easy in the Gimp: Just add a mask to the layer (Layer > Mask > Add Layer Mask...), and then, while still editing the mask (which you are by default), do a horizontal gradient from black to white (I forget which end should be white and which should be black; I quit using the Gimp because it hates my tablet).  If you want it to be more transparent on the bottom or more opaque on the top, toy with different shades of gray.  Once you have it the way you want, just hit Layer > Mask > Apply Mask, add a layer underneath that's the same color as the background, and save.  Easy.

What I don't know is how you'd do that in Photoshop.

[Richard K Niner]

Quote (Firehazard @ Oct. 13 2006, 9:12 pm)

What I don't know is how you'd do that in Photoshop.

Create a new layer under the image, give it a gradient from the colour of your choice (because it really doesn't matter) to transparent, then go to the original layer and "Group with Previous". (I forget where to find that, but the keyboard shortcut was Ctrl+Shift something.  Probably "G".)

[AmayaHayate]

Thanks guys, I think I can definately work with that advice!