css로 하는건 편법이 있지요.
이미지를 말씀하신대로 100x100과 400x400으로 나누면, 둘다 제어가 안될걸요?(되나?)
통으로 작업하셔서 css롤오버를 쓰시면 될 것 같구요.
좀 다이나믹하게 하려면 역시나 자바스크립을 쓰셔야 할 것 같습니다.
제 사이트에 이런게 남아있네요.
http://manual.twotwo.pe.kr/2nd/ (복사하셔서 주소창에 붙여넣으시길, 외부링크 막아져있네요;;)

LonnieNa 님! 우선 빠른 답변에 감사드립니다. 사실 혼자 좀 막막했는데 세상은 아직 따듯하네요.

바쁘시겠지만 도움 주신 내용에 추가 질문 조금만 드려도 될까요?

우선 가장 중요한 1번의 구현시 CSS 롤오버라는 것은 한번에 두 군데 영역을 변화 시킬 수 있다는 말씀이신지요?
자바 스크립트의 경우 한번에 똑같은 영역만 변화 시킬 수 있었기에 이 점에 있어서는 조금 혼란 스러워서요.
예를 들어 위의 그림에서 100 X 100 픽셀의 "한글" 이라는 메뉴에 커서를 갖다대면 100 X 100 픽셀만 변화되는 것이 아니라 아래쪽 이미지 (예:400 X 400) 도 동시에 바뀔 수 있다는 말씀이신지요.

검색 사이트를 통해 CSS 롤오버라는 정보를 검색해보니 자바 스크립트를 이용한 롤오버와 큰 차이가 없어 보이기에 이렇게 또 귀찮게 해드립니다.

혹 이 기능에 대해 괜찮은 강좌 페이지를 알고 계시다면 주소를 알려주시면 감사하겠습니다.

마음은 앞서는데 머리가 굳어 쉽지가 않네요... 이놈의 나이가...

아무튼 오늘도 좋은 일만 가득하시길 기원합니다!

1, 2, 3번 모두 구현의 방법은 워낙 다양하기에 어느게 맞다는 정답은 없을것 같습니다.
굳이 자바스크립이 아니더라도 간단히 css롤오버를 이용하셔도 되구요.
링크를 클릭후에 페이지 이동 완료두엔 사각형의 형태가 이동된 페이지에 맞게 배경으로 지정해주시면 될 것 같습니다.
(말로 설명하기가 힘드네요.)
2번의 경우도 간단히 몇개의 고정 문구로해서  div로 레이어를 이용해서 보여주는 방법도 있구요.
매번 문구를 변경해야 한더던가 업데이트를 해야한다면 php와 같은 프로그래밍을 해야할 수도 있습니다.
3번의 경우 전체적인 레이아웃을 잡고나서 전체의 영역을 감싸는 div등을 명시 후에 center나 margin:auto 값을 정의해 주면 될 것 같습니다.