Web Looking for feedback on my website

I'm making good use of my unemployed situation to finally put together the website I've always wanted but never had the ambition to do. It's got a long ways to go, but I wanted to get feedback before I get too far and have to fix every single page. So far, only the Nautical photography section is fully populated, but you get the idea. Thanks!

http://208.64.28.82/~cthippoc/cthippo/photography.html

EDIT: A good chunk of the photos are up now, feel free to nose around.

 

I don't like the font.
Layout seems ok, there's lot of black, blank space on the right that looks off.

EDIT: screenshot, FF v3.6.13, Win7 x86

 

Yeah you gotta sort out that black space. It takes up half of my screen! I also agree with changing the font. Maybe get a template or look at some templates and get ideas before making your own.

 

I know what's causing the black space, just not how to fix it. I'll have to talk to my more web design oriented friend to see if I can solve that one.

The font is actually unspecified. What you're seeing is whatever the default is on your browser. Still, I'll see if I can come up with something better.

Thanks for the feedback

 

Apart from what others have said, the general layout is ok, but its got a long way to go

I don't know if its what you want, but i've just had a look at Ms Webmatrix, which looks pretty helpful first time websites

 

Needs a title and descriptive text at the top of the page, something to identify the site. The rest is just technical.


You should be able to define a range of fonts by either using SPAN tags or a Cascading Style Sheet (CSS) file:

SPAN Tags:

Code:

<span style="font-family: georgia, times new roman, serif;">your text goes here</span>

Or with CSS:

Code:

{
font-size: 10pt;
font-family: "georgia", "times new roman", "serif";
}

If you're using tables for layout instead of DIVS and CSS (which people will tell you is bad practice, mmkay,) you can define the table's max width so that it only stretched so far when the browser window is resized. So a flexible table, no borders and a 1600 pixel max-width would be:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:1600px;">

If you want to center the table on the page itself, you can wrap the table with DIV tags, So:

Code:

<div align="center">

<table>
<tr>
etc..
</tr>
</table>

</div>

Technically, you could make a table with a single cell and background image, centred on the page with a set max-width and second table inside the first. The second table holds all your content, text, links etc and would then be centred along with the first. If you gave the second table thick borders, you'd see some of the background image from the first around the edges.

Not the best way to make a website though. If you want to break away from tables and use CSS, the best way is to grab a CSS template and poke around the file and seeing what stuff does what:

http://www.freecsstemplates.org/


Finally, before making it live you'll want to add metadata and a doctype, but I'll leave that for now.

 

Have you consdiered putting it up on the web rather than your own server? could be better for you security wyse.

Also why not use a wordpress CMS with a photo gallery plugin, it would take out all the hassle of dreamweaver coding and site design issues, as well as the directory management and layout issues.

Having said thaqt though your photos are really nice, I like the 4907 train in paticular

 

Thanks for your feedback, everyone. I'm trying to figure out how to make the changes you've identified. Thanks especially to Silver51 for the hints on the code.

@JoeK, It actually is on a webserver. I have two domains, but also rent space from a third party. When the site is ready I'll move it to my cthippo.com domain, but until then I want to develop it without it being widely viewable.

Believe it or not, I actually do my coding on a text based editor. It's what I learned on years ago and I've never made the switch to the wysiwyg editors. I like having my site on my own domain so I can keep it ad-free.

 

If you're staying with the table based layout, have a look at the source for this one:
http://www.marazion.cornwall.sch.uk/index.htm

It was the last table based site built before I made the leap to CSS and DIVs. It does use small CSS file, made using the CSS Creator tool, to define a centre column, background colour and minimum page width.

 

Hey Cthippo,

First off and don't get offended by this, but your page at the moment looks like something that has come back from 1994 to haunt us

I'd recommend that you look up Wordpress like JoeK suggested above.

It's a blog engine, which has evolved into a CMS (content management system). You can install it on your own server (third party or not) and it's totally ad free if you want it to be.

There are loads of free templates/themes for it and even the "professional" templates won't cost too much.

For example this one is a template running on Wordpress. That template can be bought at 35$ if I remember correctly.

I code web pages myself and have done so with a text editor a long time ago, but I wouldn't do it nowadays. I use a program called TopStyle for my coding and it's something between a wysiwyg editor and a text editor.

So if you want to keep coding your website, I'd suggest that you at least move into an application which can help you go about it a bit easier. I haven't used these, but gizmo's suggestions are usually good

And like Silver51 said, you really should move on to using CSS and DIVs, which can be a pain in the arse to learn (that's why I threw in Wordpress as an alternative).

Using DIVs would at least give you a better chance to use background images the way you are using them. With tables you run into problems like you have on your site when images won't line up.

Feel free to ask questions though, I and probably several other people are willing to answer them for you.

Darkened

 

Tbh, you could also make a really nice looking website from scratch for photography by using a jquery slider or gallery and a tasteful background.

Have a look through these to see what I mean... There are loads so I would recommend googling "jquery" and "slider/gallery".

They are normally very easy to use and implement and make a nice stylish yet simple website.

If you need any help or anything with them PM me.

 

I'm actually using Lightbox which is one of the scripts in the jquery gallery and so the pictures come up in that when they are clicked on.

I have a decent book on CSS, I just have to find time to read it and play with the code. There is a style sheet in the site for lightbox to use.

My immediate challenge is getting it to look right on different screen resolutions. The top and side images are fixed in size and so I don't know how to make them scale properly. Either that, or I can just center the whole mess and get big black bars at the sides.

 

Just thought il chime in with a few comments of my own as im doing the same as you more or less.

Either fix the background image so it sits tight to the corners and sides rather than having a black gap all the way around
or
keep it how it is but get your photography section to sit centre to the page

The white background of your photography section - make it 100% transparent

Finally i would argue against getting a template from somewhere else but instead do it yourself, you will end up learning something and get a much bigger sense of achievement.

There's some very nice pictures on there by the way

 

Ct, I've sent you a PM with a link.

I hope it's okay, but made a copy of one of your pages and made some of the changes suggested in this thread with comments to explain how they work.

Figured it'd be useful to see some of the changes in action.

 

Got it, Thanks! I'll look at it when I get home.

Have some rep

 

Okay, just a quick addition, but apparently IE8 still doesn't fully conform to CSS standards. Assuming you want a semi fluid layout, to get the min-width and max-width style working on all versions of Internet Explorer you can use a little bit of javascript. Grab the script from the bottom of the linked page and save it as minmax.js:

http://www.doxdesk.com/software/js/minmax.html



With the rest of your javascript tags, either add:

Code:

<script type="text/javascript" src="minmax.js"></script>

Or if you only want the script working on Internet Explorer:

Code:

<!--[if lte IE 8]><script type="text/javascript" src="minmax.js"></script><![endif]-->