Topic: redone site open for comments Pages that link to <a href="https://ozoneasylum.com/backlink?for=10440" title="Pages that link to Topic: redone site open for comments" rel="nofollow" >Topic: redone site open for comments\

 
Author Thread
Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 00:30 Edit Quote

http://photo.neontuner.com

it is somewhat bland right now ... just done with basic HTML nothing fancy ... but i am considering updating peices of it to make the site flow better ... my main thing is that it be compatible across most all platforms ... ( IE, netscape - MS, Mac )

i am open to any suggestions ...

as for what i use ...

Photoshop 7.0 (and other software that comes with it like Illustrator 10 and such)
Dreamweaver 3.0
Fireworks 3.0

i would prefer to stay away from flash ... tho it might look nice ... i would wrather have it so that people dont have to depend on a plugin they might not have installed ...

the overall idea of the site i want to stay the same ... but looking for suggestions like for a menu or an alternate layout.



Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

IP logged posted posted 09-14-2003 01:08 Edit Quote

First of all drop the splash page. There is no need for it and it makes me click one more time to get to the page.

At the moment the American flag is taking all the attention. I doubt displaying the flag is the purpose of the site, so I would advice doing something about it. Maybe tone down the color a little bit, so it don't create such a contrast with the rest of the page?

In your portfolio section you should add a note that the images are opened in a new window. Or you could have the image open in the 'content area' and add a nice little back button bellow it, this was at least the effect I expected when I pressed the image.

The menu isn't all that bad. My main problem with it at the moment is that it is so close to the flag which draws all the attention away from it... A hover effect on the links wouldn't be a negative thing though, just some small thing showing that I'm hovering over the element.

You use a table based design for your homepage now. It works, but it is an old and not a very good way of designing sites. You should look into CSS, since that is 'the better way' of creating web pages...

The page also lacks a Doctype and an encoding. Both of them are needed to ensure that the page is rendered and displayed correctly in the users browser.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"

[This message has been edited by Veneficuz (edited 09-14-2003).]

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 01:21 Edit Quote

i thought about the colors of the flag after i was done .. just automatically made them as bright as possible (comes from having to do that daily at work) ... already working on toning them down some so they don't distract as much ...

as for the intro page .. what about an auto refresh? ...

on the portfolio section ... working out something a little different for it ... possibly a pop up window for each topic .. and the images can be browsed through in that window and closed once person is done?

will have to pick up a book on CSS never worked with it before ... glancing over it some right now ...
same with the doctype and encoding .. have never heard of or know what those are for yet.

thank you so far.

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 03:21 Edit Quote

i have read through some of the CSS .. and i am sure i havent seen all of it .. but from what i see i am not locating what would make it any better ...

the style formatting part of it would save some time but thats about all i found ...

instead of the frames i guess i could do layers to get the same effect ...



ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 09-14-2003 03:53 Edit Quote

You said that you wanted your site to be compatible across all browsers. CSS will help you do that. Start by getting a doctype. You already have encoding, but I suppose that's the work of Dreamweaver, so you should still read up on it, just so you understand.

The purpose of CSS is to seperate content from presentation. Since you seem to be interested in what advantages it presents, lemme just list stuff off the top of my head:

- It makes your site easier to code. No tables. No font tags. No junk.
- It makes sites easier to maintain, through the use of external stylesheets. Link the stylesheet to all of your pages, make one change in the sheet, and the whole site reflects the change, instantly.
- It makes sites load faster, by removing presentational markup from your HTML, and moving it all to one external stylesheet.
- It makes sites more accessible to everyone. CSS allows you to format your document so that it is viewable, no matter what platform or browser they are using, whether it's a computer monitor, a screen reader, a Palm Pilot or Pocket PC, or a printer.

Basically, it's a very good thing, and it's something you should know about when you design a site.


quote:
as for the intro page .. what about an auto refresh? ...


Negative. Just ditch it. Oh, and might I add, quoting yourself doesn't put you in a particular flattering light, if you know what I mean

quote:
possibly a pop up window for each topic


Let me drill this into your head, while it's still soft Repeat after me: no popups.


About the visuals... I agree with Veneficuz about the graphics. The US flag seems so prominently features, almost as if it were a government site of something. I can't see how it relates with your photography, but if you must have it, make it less visible.

The menu buttons are a little too big for my tastes, and once again, a rollover effect would be nice. Also, the button should not be active if it leads to the same page. For example, If I'm on the Portfolio page, I shouldn't be able to click on the Portfolio link, because it doesn't take me anywhere, right? So just make it an ordinary image and distinguish it from the others in some way.

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 05:46 Edit Quote

hmmm will have to read into the CSS some more .. so far i haven't found anything that would allow me to do away with tables ... tho i dont have a book on it have been combing through several sites ... and am starting to see where it might be a little better for making changes to an entire site ... but so far thats all i am getting out of it .. will keep reading more and maybe it will click (still stuck with the HTML i learned back in 97) ...

heh quoting myself ... well i am a photographer ... ... i find it amusing when people try to answer the questions that i ask myself while walking around ...

this was something i threw together in about 15 min ... so will likely ditch it all and rebuild it from scratch ... but that might take a bit now ... with reading the CSS stuff to learn how that works ... i know dreamweaver handles it somewhat .. but to what extent i am unsure...

thanks again for the reviews and comments ... just trying to understand this new stuff and how it will apply to what i am doing (i dont do this for a living .. i do photography so it isnt something i will use to often, but i would wrather do the site myself then spend $500+ for someone else to build a page)

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 05:50 Edit Quote

okay i see the doctype stuff now .. hmmm is there one specific for pages built using CSS? or just use one that is the highest version of HTML? ...

heh guess this thread is turning into more then just a review.

quisja
Paranoid (IV) Inmate

From: everywhere
Insane since: Jun 2002

IP logged posted posted 09-14-2003 11:13 Edit Quote

The layout of your site could be done very simply in CSS, something like this:

<body>
<!--div for top banner, flag image as background image of div-->
<div id="flag"> </div>
<!--div for navigation-->
<div id="navigation">
<img src="menu1.gif" /><img src="menu2.gif" /><img src="menu3.gif" />
</div>
<!--introductory paragraph-->
<p>
Text text text text text....
</p>
<!--div for bottom flag image, same technique as for header-->
<div id="footer"> </div>
</body>

And some partial css:

/*header flag*/
#flag {
width: 648px;
margin-left: auto;
margin-right: auto;
background-image: url("flag.jpg");
}

p {
width: 648px;
margin-left: auto;
margin-right: auto;
}

Obviously that's not a full website, but that should give you an idea of the basic bits of code you need to know to start with a CSS layout.

On the introduction to your portfolio page you have a list of catagories... which isn't marked up as a list. It would make more sense to do it that way, I'm not sure that the image is really adding anything to the site.

Another tip I might add is not to leave your email address on your site, since it will attract mountains of spam. If possible use an encoder such as the hivelogic one.

Hope that's of some help.

[edit]As far as the doctype goes, XHTML Strict would be the purists choice, and if you're coding your pages without presentational markup etc. then there's no reason why you shouldn't use it. However, if you're still using dreamweaver then you may want to stick with HTML 4 Transitional.[/edit]



[This message has been edited by quisja (edited 09-14-2003).]

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 17:17 Edit Quote

ahhh yes i have a lot of studying to do then ... very little of that made sense ...
well ok some of it did ... the div tag centers correct? ... and i understand the part
about closing each tag... would the first part you typed out still be HTML or XHTML
(heh not really sure on a difference)

i dont have to use the dreamweaver ... most of the time i end up typing up the
HTML in the source code window .. just use it so that i see what it looks like right
away instead of having to save and refresh a browser ...

i think its time that i pick up a few books and get myself reaquainted with the
new code...

i modified dreamweaver to include the doctype and am working on a basic css
file right now ... to play with and figure out what changes what ...



Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 18:07 Edit Quote

working on some other changes to it .. and redoing the menu parts right now ... till i can figure out what i like and what looks good at the same time

quote:
I can't see how it relates with your photography, but if you must have it, make it less visible.



well my reason for them being there .. my full time job is as a photojournalist .. and daily i run into people saying when and where i can take pics .. was either put that or quote a few laws .. tho neither prob have a place on the site it is something i deal with daily and decided to put there.

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 19:42 Edit Quote

http://www.neontuner.com

just giving it a try to see how the CSS works and such ... after trying it a bit i can see how it would be easier ... still unsure how exactly it would do away with tables but i am sure it will hit me soon ... i see where setting up a few different styles for font . and placement ... and then just linking it in the html code would save a lot of time ...

since i am having trouble finding it ... would any of you have a link to the part that would eliminate tables? ... i think i have the basics down ... but not sure how well .. going to give it a try in just a bit and see how it works... will upload what i try .


-edit-
ok i am getting the hang of it ... but sure i could clean it up even more ... going to read through some more ... but is there a way to layer stuff on top of each other? ... like with the menu selection .. when it is clicked .. the images would appear over to the right of the page without linking to another page completly? ...

-re-edit-
playing around a bit more .. starting to get the hang of this.

[This message has been edited by Flea (edited 09-14-2003).]

[This message has been edited by Flea (edited 09-16-2003).]

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 09-14-2003 21:18 Edit Quote

Flea: For the sake of humanity, do not use "text-decoration: blink"... please.

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-14-2003 21:25 Edit Quote

i unselected that after i saw what it does ... and uploaded the file ... it shouldn't be blinking .... doesnt blink here.

-edit-

reuploaded the css file and made a few more changes ... using what i know and what i have found out so far .. dont laugh to hard at me combining the two tho


[This message has been edited by Flea (edited 09-14-2003).]

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 09-15-2003 01:49 Edit Quote

Another great thing about CSS is that it negates the need for JavaScript in order to accomplish simple rollovers.
The method is documented here.


I did a quick demo of it here.
As you can see, no JavaScript and no <img> tags required. Pure CSS.


DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 09-15-2003 03:15 Edit Quote

Just one important note at the moment -

there isn't one particular *part* of CSS that eliminates tables. It's a matter of using properly coded markup to ensure proper structure, and using CSS to format your elements so that they lay out on the page the way you want them, using things like the FLOAT attribute, margins, padding, and - in some cases - the POSITION attribute.

There's no magic "tables-be-gone" tags, just proper and logical use of markup and formatting.

=)

Some important resources from the Gurus Network - http://www.gurusnetwork.com/tutorials/html/xhtml/xhtml1.html
http://www.gurusnetwork.com/tutorials/css/cssintro/cssintro1.html
http://www.gurusnetwork.com/tutorials/css/cssintro2/cssintro2-1.html
http://www.gurusnetwork.com/tutorials/css/box_model/style.html
http://www.gurusnetwork.com/tutorials/css/cssprint/cssprint1.html



Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-15-2003 04:59 Edit Quote

oh wow okay i see more of what you are saying now ... and that does load up a little quicker and the code is much much neater...

ok now its for sure ... i gotta pick up a book on xhtml and css next time i make a run into a town with a good book store ...

i am starting to understand what CSS can do now ... going to have to read up on it more to understand exactly how ... any good books ya can reccomend??

thanks all ... hehe i might be stubborn and talk to myself often .. but eh who doesnt...

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 09-15-2003 05:37 Edit Quote

Okay, shameless plug for Designing with Web Standards. I haven't seen many good books that actually guide you through the process of designing with XHTML/CSS, but this is one of them. It actually starts off by teaching you how to make a hybrid tables/CSS site, so you must not be the only one that's stubborn

Remember, Zeldman is your friend.

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-16-2003 03:23 Edit Quote

getting the hang of this now
http://www.neontuner.com

(only the front page is done ... working on it more before i move onto other pages)

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 09-16-2003 03:29 Edit Quote

Ooh, another thing: test in as many browsers as possible. I'm viewing in Firebird, and it's not looking good.

At least make sure you site displays correctly in the biggies:

- IE6
- Mozilla - www.mozilla.org
- Opera - www.opera.com

Also, take advantage of the heading tags. Mark up your page title in an <h1> instead of <p> or the generic <div>. After all, that's what it is: a first-level heading. Use <p> for paragraphs, or other similar bodies of text.

It's going to take some getting used to, but you'll have to mark up the meaning of your page, instead of it's appearance.



[This message has been edited by ozphactor (edited 09-16-2003).]

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-16-2003 03:57 Edit Quote

use the <h1> tag instead of referring it to the CSS? ... or use it and referr but eliminate the size portion out of the CSS file?

i am checking it in IE 6 and mozilla ... also on a mac since i have to use those things at work ...

quote:
It's going to take some getting used to, but you'll have to mark up the meaning of your page, instead of it's appearance.



that is what i am finding out is the biggest change in learning this.

[This message has been edited by Flea (edited 09-16-2003).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 09-16-2003 15:46 Edit Quote

Yup, the whole idea of CSS is to seperate style from content.

Of course, that also means paying more attention to using HTML tags for what they are actually intended. Unfortunately, that is something that web designers got very far away from for a long time, so a great number of people learned some very bad habits from legitimate sources.

A top level header should always be marked-up as an <h1>. A secondary header as an <h2>, etc.
You can use CSS to set the appearance of each however you like.



quisja
Paranoid (IV) Inmate

From: everywhere
Insane since: Jun 2002

IP logged posted posted 09-16-2003 16:15 Edit Quote

Note: You can refer to elements directly, e.g.

.back
{
background-image: url(image/r-sand.gif);
background-attachment: fixed;
}

Could just as easily be:

body
{
background-image: url(image/r-sand.gif);
background-attachment: fixed;
}

So to style a heading you can just do:

h1 {
font-famil.....
}

Also there is a rogue <p /> floating about in there. Not sure what that's about.

And a few things to note here, especially errors: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.neontuner.com/style.css

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-16-2003 18:19 Edit Quote

okay a question ... i am understanding more ...
the basics are this
the CSS is for the style and design of the page
which leaves the html (xhtml) for the content

is that correct for the most part?

now on defining certain parts of the html code in the CSS file ... like body , h1 , p ... i would still need to direct it to the CSS file in the code right? ...

didn't realize there was a validator for the css file as well ... scared to even look at mine ... it is a mixmatch of what i figured out and what i have copied and cut up to get working ... (reasion i want a book so i have a refrence to what each code is and does and so forth) ...

now for another question.

the html file is what is downloaded to the individual computer right? .. the css file isn't .. it is only referred to on the server for apperance ... correct? ... so the overall size of the css file doesn't matter to much ... i know the code should be kept clean and organized ... but curious on that part of it...

oh, and that < /p> i have removed it in my local file but haven't uploaded it to the server yet .. not sure how it got there either heh.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 09-16-2003 18:31 Edit Quote

Not entirely clear on some of what you are asking, but let me try to clarify a couple things -

When you specify an element in a CSS file, all elements of that type will adopt those styles.

If you want to have different styles for the same element depending on the circumstance, there are a couple ways to do that. The most common is to set up a class in the style sheet.

in the CSS file you have something like this -

.myclass {
attribute:value;
attribute:value;
}

in the HTML you call like - <element class="myclass">

But again, that's only if you want to have special formatting for different circumstances. If you define the HTML element in the stylesheet, you don't have to do anything else in the HTML to make it work.

The stylesheet is linked to in the HTML file, and is downloaded along with the HTML file so that the browser can apply the style attributes. Nothing is done server side.

Of course, the file size is usually negligable, so it shouldn't be an issue.

hope that helps....




Veneficuz
Paranoid (IV) Inmate

From: A graveyard of dreams
Insane since: Mar 2001

IP logged posted posted 09-16-2003 18:36 Edit Quote
quote:
the CSS is for the style and design of the page
which leaves the html (xhtml) for the content


Seems to cover it pretty good. In the html document you should only have the content and some tags describing what the content is, ie <h1> for heading, <p> for paragraphs etc. Then you use the css file to style the document, either for viewing on a pc screen, printing or some other device.

quote:
the html file is what is downloaded to the individual computer right? .. the css file isn't ..


Nope, all files get download. All files you 'link' to in the html document are downloaded, javascript files, images, css files etc. The good thing with using CSS files that the file is in the computers cache once it is downloaded. So when you load a new page that has a different content, but the same css styling you won't have to download the css file again.



_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-16-2003 20:51 Edit Quote

okay i think i got it ...

if i setup something for

body

in the CSS file ..

then it will automatically apply to all pages that are opened without me having to specifically refer to the CSS sheet in the html code ...

<body>

would bring the settings ... instead of having to do

<body class="body">

is that correct?



DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 09-16-2003 21:27 Edit Quote

Yep.

every HTML element can be addressed in CSS in the same manner.



Flea
Bipolar (III) Inmate

From: Camden AR
Insane since: Aug 2003

IP logged posted posted 09-16-2003 21:40 Edit Quote

ahh okay so the only time

class="bla"

needs to be added to the html is when it is a special situation .. or a change from the already specified settings in the css file ...

say for instance i put one in the css file for

h1

but on a certain page i wanted h1 to have a different color ... i could make a second entry and then refer to that one and it would over ride the origional settings.

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 09-17-2003 07:18 Edit Quote

Yes, that's correct. You're catching on quickly, aren't ya?


Ooh, and before I forget, here's a few more ways to select elements...

In addition to the "class" attribute, there's also an "id" attribute, which can be used exactly once on each page (unlike "class," which can be used as many times as necessary). The ID selector is most often used to position the main layout <div>s. For example, <div id="menu">, <div id="content">, <div id="footer">, etc. Of course those divs can be named whatever you wish.

The way you select it is with the pound sign. To select, <div id="menu">, for example, you would use this in your CSS:

code:
#menu {
...do something...
}



Cool? We're not finished yet.

One of the most useful selectors is the "contexual" selector, also known as the "descendent" selector. Basically, you can use it to select any particular element, but only when they appear in another particular element. Take this code for example:

code:
p a {
color: #00ff00;
}


What this does is select any <a> element within a <p> element, and make the link text green. You can list as many elements as you want, seperated by spaces, as a contextual selector.

To recap:

Plain ol' selectors:
<address> // address {} selects all <address> elements

Class selectors:
<p class="fineprint> // p.fineprint {} selects all <p>s of the class "fineprint" // or // .fineprint { color: #000; } selects any element of the class "fineprint"

ID selectors:
<div id="content"> // #content {} selects the element with the id="content" (there should only be one)

Contextual Selectors:
<address><a rel="nofollow" href="#">blah</a></address> // address a {} selects <a> elements, but only if they appear in an <address>


And finally, any of the above selectors can be combined. The possibilities are endless. Take this:

code:
#content div.float .red a {
color: #00ff00;
}



The above code selects any <a> elements, that appear within any element with class="red", that appear in any <div> element with class="float", that appears in the element with id="content"

Whew. That's enough for now.




[This message has been edited by ozphactor (edited 09-17-2003).]

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 09-17-2003 21:08 Edit Quote

A common use of what Oz is talking about would be something like a navigation menu. Rather than make a class for the links in the menu, you could specify it like this -

(in the style sheet - )

#menu {

whatever styles for the menu box...
}

#menu a {
styles specific to the links in your navigation menu...
}

And then in the HTML you specify -
<div id="menu">
<a blah blah....>link</a>
etc...
</div>

Any <a> inside the "menu" div will automatically inherit the styles specified in the #menu a {} bit.

Nice tidbit to save time and code =)







Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu