Phase 1: Establish a working, static html/css board which successfully overlays the grid on a background, and puts ships in grid cells. Being static, I expect a hardcoded change is necessary to move the ship to a different cell. I also need to work out how ships that are larger than cells will work (since images typically aren't positioned based on their center), and how to handle multiple ships in the same cell.
The key thing shown here, is that we have determined how I'll layer the css and the html, what is a child to what, tag wise, and how I'll move ships around. While this static version can't move ships without a hard code change, *where* to put that hardcode change is obvious.
The next step, I'll put in the hex-coordinates to pixel-position math, and a form to let us control them. Additionally, I may mess with some simple jquery. finally, I'll start playing with the php GD library that lets us rotate the image on-the-fly, and see if we want to do that, or simply store 6 orientations for each ship.
I haven't decided the best way to address if 2 ships are on the same square yet.