웹개발/HTML

[웹 개발] Caffe.in

에르소 2014. 5. 28. 01:06
반응형

[홈페이지 전체레이아웃]



JAVA + JSP + HTML + CSS + JavaScript 를 통합하여 만든 caffe.in 사이트



로고는 누르면 index 페이지(main) 페이지로 이동할수있게 링크를 연결하였고


검색은 홈페이지 전체적인 내용들을 검색할수 있도록 만든 search bar


메뉴쪽은 현재페이지는 "bold" 처리를 해두었으며, 

마우스를 가져다 대면 색이 변하도록 제작(css: a hover)


body 맨윗부분 (div) 태그로 제작하였고, javascript 를 사용해서 

image 10개를 5초간격으로 이동할수 있게 제작.


공지/ 자유게시판은 db (oracle 10g) 를 layout 에 include하여 새글이 뜨면 볼수있게 (preview) 기능을 추가하였고


left layout은 .. 대부분의 음악사이트는 footer 쪽에 신곡에 관해서 200x20 size 의 이미지로 

링크를 걸어주나 시도해보고 싶은 부분이여서, 왼쪽에 배치를 해보았는데.. 생각보단 괜찮은 느낌이다.


right layout은, 말그대로 어느사이트나 가도 popup 이미지를 배치하기에

비슷하게 업로드하였다.


footer 같은 경우에는, text type 으로 제작하는것이 검색이나 이런점에서 좋으나..

시간여건상 img 통짜로 제작해서 업로드 시켜버렸다 ^^;


[멤버 로그인창]

------------------------------------------------------------------------------------------------------------


[회원가입 폼]

------------------------------------------------------------------------------------------------------------


[마이페이지/정보수정]

------------------------------------------------------------------------------------------------------------


[TopRead - 조회수순 정렬]

------------------------------------------------------------------------------------------------------------


[TopScore - 좋아요 (Favor) 순 정렬]

------------------------------------------------------------------------------------------------------------


[음원 상세페이지]


좋아요: +1점 / 싫어요: -1  (TopScore) 관련// 단(계정당 그 음악에 대해서는 1번씩 밖에 클릭이 안됩니다..)

페이지를 많이 찾는 Read (읽기) 순에 따라서.. TopRead 쪽, 상위랭크 되어집니다.

즐겨찾기 : 마이페이지에 즐겨찾기 음악으로 추가되어집니다.

------------------------------------------------------------------------------------------------------------


[즐겨찾기]

자신이 즐겨찾기한 음악을 찾을수 있는 즐겨찾기란

곡삭제도 가능합니다.


반응형

'웹개발 > HTML' 카테고리의 다른 글

HTML 3장 (글자태그)  (0) 2014.06.04
JavaScript 시작하기 1  (0) 2014.06.01
톰캣 에러  (0) 2014.05.28
Ajax3  (0) 2014.05.26
Ajax2  (0) 2014.05.23