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.
From: A graveyard of dreams Insane since: Mar 2001
posted 09-14-2003 01:08
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).]
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.
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 ...
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.
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)
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>
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).]
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 ...
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.
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).]
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).]
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.
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...
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
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).]
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.
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.
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.
From: A graveyard of dreams Insane since: Mar 2001
posted 09-16-2003 18:36
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 -
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.
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).]
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.
posted 09-14-2003 00:30
Repeat after me: no popups.
