|
DIV-layer layouts for LiveJournal and LJ-clones using Dreamweaver
+ This tutorial goes step-by-step on creating a two-column DIV layout from
conception to implementation for LiveJournal and similar sites. Graphic-intensive.
This is the Dreamweaver tutorial, meaning you will need Dreamweaver 4.0 or
later to be able to complete this tutorial. Other than that, you will need:
+ A graphics-editing program, such as Photoshop or Paint
Shop Pro. The screencaps will be done using Photoshop 5.5, as that is what
I use. Most programs above Microsoft Paint should work for your purposes,
but I HIGHLY reccomend they have layers.
+ A basic knowledge (or better) of your chosen graphics program: how to select
areas, create layers (if availiable), change the brush size, etc.
+ An account on LiveJournal or an LJ-clone that will allow you to create and
edit styles. On most sites, this requires an early adopter, paid, or permanent
account.
+ A basic knowledge of Dreamweaver 4.0 or above. This tutorial uses 4.0, and
I really am assuming a lot when I say that newer versions will work (for a
lot of Photoshop 5.5 things, the steps to do certain things won't work in,
say, 6 or 7). A basic knowledge means how to insert images, make text bold,
underlined, italicized, linked,
etc.
+ Also helpful is SOME sense of aesthetics. I'm sorry, but some of the layouts
I've seen over at LJ make me cringe. Neon green
is NOT a good choice for a background, I don't care HOW colourblind you are
XP
Starting Off
+ Chances are, if you're reading this, you have an image or an idea for a
DIV-styled layout already, and are just lacking the knowledge of how to put
it together. If you don't have an image, might I suggest Images
That Still Don't Suck for some good images that.. well, don't suck ^^;
Many of their images are fan-created (which could lead to people bitching
at you oO), but a good chunk (like the image I'll be using in this tutorial)
are either screencaps from various series or scans from artbooks. It's always
a good idea to ask for permission from the artist if you can find them before
you use their artwork (and, speaking as an artist, I can safely say that the
best layouts come from the artwork of the person who is creating the layout.
At least, that's my opinion ^^;)
+ Open the image of your choice in the program of your choice. Screencaps will be either from Photoshop 5.5, Dreamweaver 4.0, or Internet Explorer (for the Mac) 5.1:
I've shrunken this down to 25%, but I'll generally be working
on it at 100% or higher. I won't be doing very much to this image to get it
ready to become a layout, but your results will vary. Be sure your image is
in RGB colour mode: if its in index, you won't be able to create layers, add
any colours that aren't in the image, or any of those neat things (most, if
not all GIF and PNG files are indexed colour, while most JPG files aren't).
I'm not particularly sure what I want the layout to look like EXACTLY (if
you do, I am jealous X3;), but I know that right now my image is 887x620 pixels,
and I for one hate working with anything that doesn't end in a 5 or 0 (450,
625, etc.) If you want your layout to span your whole screen when your browser
is in full-screen mode, or you want it to be able to display on a certain
resolution, be sure to know what your resolution is. The maximum viewable
area on a 640x480 resolution is 600x300 pixels. The web-standard resolution,
800x600, can view up to 760x420 pixels, and 1024x768 (which is becoming very
popular and which is what I myself use) can display up to 955x600. Your layout
will scroll horizontally for anyone who does not fit those criteria, so any
people with an 800x600 resolution will not have your layout appear the way
you intended if it's 790x500, for example. If how it looks for other people
isn't an issue, then by all means, design with your own computer in mind ^^
While we're talking about different resolutions, I'd like to point out that
not everyone uses millions of colours (or whatever the equivelant is on a
PC). Computers using 256 colours DO exist, still, and your layout will likely
look very poopy (to be nice about it) on them. I don't tend to worry about
it, and it always shocks me when I'm at the computers at school, or viewing
through my PC emulator (which is on 256 to make it run faster). Just a FYI
^^
+ I like to keep my layouts viewable in at least the web-standard. Viewing them above it (1024x768 or above) won't kill them, they'll just be able to see a bit more of the background. Open up the "Image Size" window, enter the width you would like your image to be, and if "constrain proportions" is checked, the height will change to match. Bicubic resampling tends to look the best, in my opinion, unless you're resizing a sprite from a video game, in which case you'd want to use "Nearest Neighbor".
I've gone below the maximum viewable area for 800x600, notice.
This is firstly because I personally don't tend to maximize my windows, though
if you do, more power to you. When I'm online, I'm doing five billion things
at once, and since I'm not on a PC, I don't have the "start bar of destruction"
that lists ALL my open windows oO; I'm also very likely to add some width
onto the right side of the image later to blend it in with whatever background
I give the image later, so going below lets me stay within my maximum range
for later. Remember what I said about not liking that whole not-ending-in-5-or-0
thing? Since I'll most likely be adding a bit of height on my image later
anyway, it won't bug me (it's when I'm playing with the code later that it
annoys me ^^;).
You might be saying "Wait a minute, 527 pixels tall? But isn't the maximum
viewable area on an 800x600 maximized browser 420 pixels tall?" And yeah,
you'd be right. I don't tend to worry about vertical scrolling, though. Horizontal
scrolling is the one that REALLY gets my goat, so to speak oO; If you want
to size your image so it ALL fits at once, be my guest ^^ I just don't work
that way. You also might be a math whiz and realize that those numbers don't
match up with the first ones I gave you, and that would be because I cropped
a bit off the left side of the image that I didn't like being there ^^
Preparing the Image for Layout-dom
+ Here's where the whole "design" thing comes in full-force. We're
going to be making a layout that has two columns, one for the journal entries,
and one for any information we choose to put in it, such as links to other
interesting journals, webpages we like, information on ourselves, whatever.
The question now is what side do we want each to be on? You can choose whichever
you like, as for me, I'm going to be putting the sidebar (the not-journal
entry layer) on the left-hand side, while the entries will be next to it on
the right.
And so. Usually I won't put those horrid blobs of green and yellow there, but I figured some of you might need a visual aide oO; Green is the sidebar, yellow is where your entries will go. The next step, which isn't illustrated, is where I bust out my mad erasing skills and erase the bits of the yellow and green boxes that have Lina (the girl, she's from Slayers for those who don't know ^^) and the potato chips in them so that it looks like the chips are spilling out onto the layer, and she's sort of clutching the entries box in her sleep. I figure you don't need to see me erase, so we'll just skip to the eraser-finished step:
As a little sidenote, that image would NOT have worked after my bars if they hadn't been on a seperate layer. I used the clouds filter to create a nice pale-yellow-white mixture in the entries box, and decided the sidebar didn't need any sort of definition to it. The layout was going to be for a dream journal, and so I felt that not defining it would work fine in this case. I also coloured the bit outside the entry box on the right side pink from Lina's shorts, as I felt the white worked fine on the left, but not on the right. That may change, though, as at this point I'm still not sure where I'm going with this layout (this is usually where I would scrap a layout if it wasn't clicking yet, but as this is a tutorial, we don't really care, do we? Oo)
+ The last thing we do before we start cutting this up is to trim the right side so it has some sort of border, and give it some text. This is optional, but I really do like having some sort of text up on the top image, if only "Xella's Journal". In this case, since its a layout for a dream journal, I racked my brain for song lyrics and came up with Depeche Mode's "Dream On":
Cutting The Image Up For The Web
+ Cutting up is a very odd term to use, and I'll tell you why. We're not doing
very much cutting in this, more copying and pasting. If everything goes as
well as it should, you added just a smidgeon (5-20 pixels) of extra height
onto your image that doesn't have any of the frilly effects from the top image:
This will make everyone's life infinitely easier. If you didn't, go back and create it (Canvas size to add the space, paintbrush/airbrush/whatever to create the layers), keeping in mind that this will be what repeats for the background of your two columns, so you have to be able to read stuff through it. Flatten your image so you just have the "background" layer. Save this file as a JPG or GIF (most of the time it will be a JPG), say "dreamon_top.jpg" or whatever you prefer to call it ("top.jpg" works just fine, and is what we'll be calling it for the remainder of this tutorial). Select the area we just talked about (the 5-20 pixels of not-frilly-ness), copy, and paste into a new document.
+ In this new file, go under Image>Canvas Size and make the width 2.000 pixels. This is to make sure that the background doesn't repeat on any resolution, though I'd imagine the way video cards are going, soon this number will need to go up to 5,000 or something, but for now we're all good. Be sure your anchor is set all the way to the left, or all your current image goodness will shift to the center of the image, when we want it all~ the way on the left.
You can do whatever you like with the extra 1,500ish pixels you get from this. I usually leave it a solid colour, like a light sugar pink. Save this file as a JPG or GIF, in the same folder as your top file. Call it what you will (in this tutorial, it will be referred to as "bg.jpg"). If you have chosen a solid colour, find out what it's Hex value is (do this by selecting it using the eyedropper and clicking on the colour picker. The six-digit letter and/or number code is the HEX value that represents that colour on the web and in HTML.
+Open up Dreamweaver, and create a new file (if it doesn't create one automatically on opening). Save it in the folder with top.jpg and bg.jpg, and call it what you like (I usually call it index.html). Under the Modify menu, select Page Properties, and put the HEX value that you found earlier into the "background" box. Delete any of the other values that might be in the other boxes (we'll deal with those using CSS in a minute), select your background image in the "background image" box, and set Left Margin, Top Margin, Margin Width, and Margin Height all to 0. Put whatever you would like as the title of your page/journal in the Title box, and hit OK. You should now see your background image tiling on your page. If your background looks really odd from tiling (as in, you can see where it ends and begins), you need to fix it. My suggestion (read: the way I do it) is using the Unplugged Effects filter "Vertical Tile". It's a free filter for Photoshop and it actually works (and is probably the one of all the Unplugged filters I use the most). You can get it here.
+ Click the Code View button at the top of the window to switch to the HTML view. In between <HEAD> and </HEAD>, probably right after the <TITLE> tag, place the following code:
<STYLE TYPE="text/css">
BODY, TD {font-family:verdana;color:#ABC123;font-size:10;}
A:link {color: "#123ABC"; text-decoration:none}
A:visited {color: "#123456"; text-decoration:line-through}
A:hover { text-decoration:underline; color:"#ABCDEF"; cursor:crosshair; }
</STYLE>
This is the CSS heading tag that sets what your text is going
to look like. Only the font and the colour shows up in Dreamweaver, but if
you save your file and open it in Explorer/Netscape, you should see everything
as it will look on your page (in fact, if it doesn't show up that way, I'd
be very confused ^^;) Change "verdana" to whatever font you want
your page to be displayed in, change 10 to whatever size you want it to be,
change the first HEX code to what your regular text colour should be, the
second to what your unclicked links colour should be, the third to visited
links, and the fourth to what colour the links should be when your mouse is
over them. The text-decoration: tags say what should happen to the text; change
them to be the way you want, using either none (no decoration), underline
(to underline the text), overline (to have a line over the text), or
line-through (to strike through the text). There are other things you
can do, but god forbid I list them here, they annoy me X3; The cursor: tag
looks different on every system (and honestly, the crosshair just looks the
best but eh), and can be: auto, crosshair, default, e-resize, help, move,
n-resize, ne-resize, nw-resize, pointer, s-resize, se-resize, sw-resize, text,
w-resize, or wait. Click on the Design View (the right-hand button on the
left side of your Dreamweaver window) to go back to your.. blank page of doom
oO;
+ If you don't have it open and ready already, open up the Properties and Objects windows from the Window menu, and check that Common is the word at the top of the Objects Menu:
Add top.jpg to your blank file of doom and make it the not-quite-so-blank file of doom (the top-left button on the Objects menu, it's a tree ^^)
Adding Your DIV Layers
+ If you haven't already, go under the View>Visual Aides menu and turn
off "Invisible Elements". This will make you not able to see things
like anchors, but it'll also get rid of the little thing that tells you you
have a DIV layer but that ISN'T a DIV layer. If that made no sense, just smile
and nod and do it ^^;;
+ The third icon down on the left side of the Objects menu is the "Draw Layer" tool. This is where we get our DIV layers from. Click and drag from where you want the top-left hand corner of the DIV to be to the right-hand side. If you screw up, don't panic, the black squares that surround the box let you change its size after it's created ^^ Don't worry about how high it is, it'll expand as more text is placed into it. Speaking of text, put some in there so you can get an idea of what it'll look like. Create your other layer, and put some text in there, too. Doesn't have to be anythign big in either case, just a place holder ^^
If everything looks right to you, in both Dreamweaver (the screencap above) and IE, then you're ready to add your LJ-specific tags!
LiveJournal-etc. Specific Tags
+ The LJetc. Specific tags are the tags that don't work for sites that aren't
based on the LiveJournal open source coding. The one that is NOT optional
of these is %%events%% (just like that), which goes in your entries window.
This is what tells the site that that's where your entries go, and you can
NOT create a layout without it. The optional ones I use are %%userpic%% to
show my default user icon, and %%skiplinks%% so you can go back and forth
however many entries in time. Additionally, I often create an anchor named
top directly before the %%events%% tag, and put a link beneath it that links
back to the top of the page (via the anchor).
Creating The Style
+ On a seperate page, since this is the same for essentially every layout
tutorial, and it's far easier to create a second page for every tutorial than
.. well okay it's not easier, but it lowers the size of my files and the time
you spend loading them XD; So it's easier.
+ Next (Creating The Style)
+ Back to Tutorials