우선 ... Server/System 쪽으로는 충분한 지식을 가지신듯 ... 문제 없을거 같아 보이네여~!
근데 ... 질문이 좀 뭉텅구리?[구체적이지 않아] 라서 ... -0-;;
젝아 생각 하는 방향으로 임의 설명 드리겠습니다~!
Home Page를 만들려면 ... 기획/정보수집/디자인/스토리보드/웹문서코딩등등
여러 단계를 거쳐서 만들게 되는데 ... 질문자님께서 말씀 하시는 Web page라는
범위는 너무 넓습니다~! 그래서 ... 그냥 제 나름대로 Home Page를 기획하고 제작하는
단계별 설명을 찾아 올려 드리겠습니다~! -.ㅡ;;
-----------------------------------------------
홈페이지 제작 과정
홈페이지를 제작하는 중요 과정과 각 과정에 대해 필요한 준비사항과 세부적으로 어떤 한 일을 하는지에 대한 과정을 생각해야 합니다. 홈페이지를 제작하는 과정은 마치 요리를 만드는 과정과 비슷하다고 생각하면 이해하기 쉬운데 그 제작 과정을 정리하면 다음과 같습니다.
① 주제와 대상층 선정
홈페이지의 주제를 정하고 그에 따른 대상층을 정합니다. 대상층은 연령별로 나눌 수도 있고 관심사에 따라 나눌 수도 있습니다. 주제를 정할때는 다른 이용자들에게 관심을 끌 수 있는지 여부와 내용 전달에서 가장 중요한 것과 사이트를 어떻게 운영할 것인지의 정도를 생각해야 합니다. 예를 들어 개인 홈페이지에서 "웹디자인"을 주제로 정했다면 대상층이 초보인지 중고급 사용자인지 혹은 어린이나 성인인지 등에 따라서도 방향을 다르게 잡아야 합니다.
② 컨덴츠 기획
주제를 정했으면 그에 따른 자료나 정보를 수집해야합니다. 자신이 정한 주제와 비슷한 주제를 가진 다른 홈페이지를 돌아다니면서 분석하고 소스를 수집합니다. 이런 과정등을 통해서 자신이 정한 아이디어를 구체화하게 되며 정보위주나 디자인 위주의 홈이 될 것 인지의 여부도 구체화 됩니다. 하지만 인터넷 같은 경우는 좋은 자료는 거의 공유되고 있기 때문에 타사이트와의 차별성을 위해서 잡지나 혹은 서적등도 같이 참고하는 것이 좋습니다.
③ 스토리보드 설계
스토리 보드란 일종의 홈페이지를 만들기 위한 계획표입니다. 각 웹페이지에 대한 정보와 구성 요소간의 상호 관계를 알기 쉽도록 구성해보는 것입니다.
웹 사이트의 구조 및 네비게이션을 설계하는 과정인 맵을 작성하는 방법은 크게 두 가지 방식으로 나누어 생각해 볼 수 있습니다. 한가지는 flowchart 형식으로 이루어진 visual map을 만드는 것이고, 다른 한가지는 텍스트 이루어진 것입니다. 혹은 두가지를 혼합하는 것도 좋은데 맵을 만드는 설계 단계에서 페이지 간의 연결 체계와 그에 따라 적용할 프로그래밍 수준과 범위, 컨텐츠,DB제작 등의 기술 범위를 결정하게 됩니다. 맵을 만드는 과정을 마치면 주요화면에 대해 다양한 레이아웃으로 시안 작업을 하고, 실제 제작 과정에 들어가게 됩니다. 내용의 체계성이나 구성적은 측면을 고려해 웹 사이트를 만드는 기술적인 부분보다는 철저한 기획과 계획에 많은 시간을 들여 작업해야 합니다.
④ 홈페이지 재료 준비
홈페이지 제작들어가기 전에 내용을 정리해야 합니다. 내용은 그래픽이나 텍스트 혹은 동영상등 여러가기가 될 수 있습니다. 그래픽이나 동영상 등은 스캔이나 혹은 디지털 카메라 등을 통해서 직접 제작 할 수도 있고 혹은 기존에 있던 소스 등을 이용할 수도 있습니다.
텍스트 같은 경우도 홈페이지 분위기에 어울리는 정렬방식이나 서체등을 미리 지정하는 것이 효율적입니다.
⑤ 홈페이지 제작
제작에 관해서는 만들기 1과 II를 통해서 알아보도록 하겠습니다. 여기서는 제작에 있어서 고려해야할 주의사항을 알아봅니다.
< 제작시 주의 할 점 >
- 로딩속도를 고려한다.
- 메뉴의 이동을 최대한 간편하게 한다.
- 모든 브라우져에서 테스트를 해본다.
- 스크롤이 지나치게 많이 생기지 않게 한다.
- 가로스크롤은 피한다.
- 지나치게 화려한 디자인을 피한다.
- 스크립트나 자바 애플릿을 남용하지 않는다.
- 사운드 사용을 적절하게 사용한다.
- 차후 업데이트를 고려하여 제작하다.
- 링크의 칼라를 임의로 마구 바꾸지 않는다.
- 지나치게 많은 새창을 열지 않는다.
- 전체 이미지의 통일성을 고려한다.
⑥ 웹상에 올리고 홈페이지 서비스 시작
홈페이지를 계정에 올리고 서비스를 시작 합니다 .계정은 학교에 올릴 수도 있고 무료계정 서비스를 하는 곳이나 혹은 유료인 곳등 다양합니다.
⑦ 검색엔진에 등록하고 업데이트하기
홈페이지를 알리기 위해서는 nate나 naver같은 검색엔진에 등록하여 널리 홍보하고 지속적인 업데이트를 하여야 합니다.
용어설명
2. HTML
월드 와이드 웹(WWW)에서 하이퍼텍스트 문서를 작성하는 데 사용되는 기본 언어.
'hyper text markup language'의 약칭이다. 인터넷의 월드 와이드 웹을 통해 볼 수 있는 수
많은 문서와 홈페이지들은 기본적으로 하이퍼텍스트 형식으로 작성되는데, 이때 사용되는
언어가 HTML이다. HTML은 문자로 된 정보뿐만 아니라 화상이나 음성, 다른 문서로의 이동
(하이퍼링크) 등을 기록할 수 있다. 원래는 문서의 구조를 기록하는 것이었으나, 점차 표나
입력형식 등의 기록 기능이 추가되어 문자의 크기나 행간, 1행이나 1쪽의 글자 수 등 다양
한 표현이 가능하게 되었다
3. 이미지 형식 PNG, JPG, GIF 비교 설명
① PNG(Portable Network Graphics)는 비손실 그래픽 파일 포맷의 하나이다. 특허 문제가
얽힌 GIF 포맷의 문제를 해결하고 개선하기 위해서 고안되었다. PNG는 공식적으로는 "핑
"(/pɪŋ/)이라고 읽지만, 대부분은 "피엔지"라고 영어 철자 그대로 읽는다.
② JPEG(Joint Photographic Experts Group)은 정지 화상을 위해서 만들어진 손실 압축 방법 표준이다. 이 표준은 ISO와 ITU-T에서 제정하였다. JPEG를 사용하는 파일 형식들도 보통 JPEG 이미지라 불리며, .jpg, .jpeg, .jpe 등의 확장자를 사용한다.
③ GIF(Graphics Interchange Format)는 비트맵 그래픽 파일 포맷이다. 1987년 컴퓨서브에 의해 발표되었으며, 월드 와이드 웹에서 가장 널리 쓰이는 파일 포맷이기도 하다.
최대 256 색까지 저장할 수 있는 비손실 압축 형식이다
<< 비 교 >>
PNG
(1) GIF와 차이점
대부분의 경우 PNG는 GIF보다 압축률이 더 높다.
GIF의 단색 투명층과 달리 8비트 알파 채널을 이용한 투명층을 지원한다.
256색을 지원하는 GIF와 달리 트루 컬러를 지원한다.
GIF에서는 제공되는 애니메이션을 PNG는 지원하는 않는다.
(2) JPEG와 차이점
왼쪽의 JPEG 파일에 비해 오른쪽의 PNG 파일이 훨씬 더 깔끔하다.
손실 압축 알고리즘을 사용하는 JPEG가 PNG에 비해 더 작은 파일을 만든다. 경우에 따라 5-10
배 차이를 보이기도 한다. 하지만 JPEG 압축은 양자화의 영향으로, 바라지 않던 잡티가 낄 수 있
다. 문자나 날카로운 경계가 있는 그림은 JPG에서 뭉게지기 쉽기 때문에 PNG를 쓰는 게 더 낫
다. 또한, PNG는 비손실 압축이므로, 나중에 편집을 해야 한다면 PNG로 저장해 놓는 것이 낫다.
JPEG를 사용할 때는 저장을 하면 할수록 계속 손실이 누적될 수 있다.
(3) GIF//JPEG 차이점
사진이 아닌 간단한 그림의 경우에는 JPG파일이 압축률이 좋다고는 하지만 압축하는데 필요한
명령공간 때문에 그림을 최대로 줄여도 파일 크기가 7KB이하로는 줄일 수 없으므로 간단한 파일
은 GIF파일로 저장하는 것이 더 효과적인이라고 합니다. 그렇지만 화소가 높은 사진인 경우나 색
상이 많아서 복잡한 경우에는 경우 GIF파일은 색상이 256컬러로 제한 되어져 있기 때문에 색상
지원이 많이 되지 못하고 압축율도 떨어지므로 JPG파일로 용량을 작게 할 수 있습니다.
4. 글꼴에서 고정폭 글꼴과 가변폭 글꼴의 차이
도스 시절의 텍스트는 무조건 고정형 글꼴이었습니다.
한글이야 차이가 없지만 영어의 경우에 'I'는 글자 폭이 좁고 'Q'는 글자 폭이 넓습니다.
그렇기 때문에 텍스트에서 붙여 쓰면 'II'가 'QQ'에 비해서 글자 간격이 넓어집니다.
이래서는 보기 흉하다고 글자의 폭과 관계없이
글자 간격을 일정하게 유지하는 것이 생겨났습니다.
이것이 가변형 글꼴입니다.
5. 웹칼라(Wep color)
앞으로 홈페이지를 만들면서 색상을 다루게 되는 일이 많을 것인데, 웹에서 색상을 지정하는 방법은 정확한 색상이름을 적어주는 색상표현법과 16진수 컬러 값을 지정하는 방법이 있습니다.
색상을 사용할 때 일상적인 생활에서 사용하는 색상이름을 사용하는 것은 간편하긴 하지만, 표현할 수 있는 범위가 작기 때문에 정확한 색상 표현을 위하여 16진수로된 컬러값으로 표현합니다.
6. 웹브라우저의 종류
① Microsoft Internet Explorer : 인터넷 익스플로러는 마이크로소프트에서 개발한 웹 브라우저로, 월드와이드웹(WWW)에서 정보를 열람할 수 있게 해주는 검색용 프로그램이다.
1995년 8월 버전1.0이 발표되었으며 1996년부터는 마이크로소프트의 운영체제인 윈도에 기본 내장되어 보급되기 시작하였다.
② Netscape : 넷스케이프 커뮤니케이션즈 코퍼레이션에서 처음 개발했으며 현재는 AOL에서 개발하는 웹 브라우저 시리즈의 일반 이름이다. 예전에는 사용자 점유율에서 독보적인 위치의 브라우저였지만, 지금은 상대적으로 미미한 사용자층을 가지고 있다.
③ Mozilla : 자유 소프트웨어 크로스 플랫폼 인터넷 스위트로, 웹 브라우저, 이메일 클라이언트, 뉴스 클라이언트, HTML 편집기, IRC 클라이언트가 포함되어있다. 처음에는 넷스케이프 커뮤니케이션즈 코퍼레이션이 넷스케이프 커뮤니케이터의 소스를 기반으로 개발을 시작했으나, 이후 모질라 재단에서 개발을 주도하였다. 현재는 개발이 중단되었으며, 후속 버전으로 시몽키 커뮤니티에서 개발하는 시몽키(SeaMonkey)가 있다.
④ Opera : 초기부터 작은 용량과 빠른 속도로 인기를 얻었으며 넷스케이프와 익스플로러가 브라우저 시장을 장악하는 상황 속에서도 나름대로 인지도를 얻는데 성공한 브라우저 작은 용량과 빠른 속도가 주 무기이긴 하지만 그 외에도 방대한 양의 단축키, 표준성이 특징이다
⑤ Safari : 애플이 자사의 맥 오에스 텐(Mac OS X) 운영체제를 위해 개발한 웹 브라우저이다. 사파리는 맥 오에스 텐 10.3 팬서의 기본 브라우저로 포함되었고, 맥 오에스 텐 10.4 타이거에 기본으로 포함된 유일한 웹 브라우저이다.
7. 하이퍼링크(Hyperlink)
모든 형식의 자료를 가리킬 수 있는 고리이다. 예를 들자면 동영상, 글, 음악, 그림, 프로그램, 파일, 글의 특정 위치 등을 지정할 수 있다. 이는 하이퍼텍스트의 핵심 개념이며, HTML을 비롯한 마크업 언어에서 구현하고 있다.
8. 네임 앵커 (Named Anchor)
하나의 웹문서 안에서 원하는 부분으로 바로 바로 이동을 할 수 있게끔 만든다거나,
또는 다른 웹문서를 불러들였을 경우 자유로이 원하는 위치로 이동하는 태그를 뜻하는 것입니다
9. 롤오버메뉴
롤오버 이미지는 굳이 설명하지 않아도 잘 알다시피 웹페이지에서 마우스를 갖다 대고 클
릭하면 형태가 변하는 이미지입니다. 주로 웹페이지에서 메뉴버튼형식으로 활용됩니다.
보통은 포토샵에서 기본 이미지 제작과 세팅을 마친 상태에서 Image Ready(이미지레디)
로 불러들여서 up, over, down 각각의 상태로 보여질 레이어를 선택지정한 후 저장하면
됩니다. 여기서 up, over, down 이 의미하는 바를 이해할 필요가 있습니다.
up - 보통의 상태 (normal state)
over - 이미지에 마우스 커서를 갖다 댔을 때의 모습 (over state)
down - 마우스 Over상태에서 왼쪽 버튼으로 클릭했을 때의 모습 (down state)
10. 점프메뉴
점프메뉴는 클릭하면 메뉴목록이 나타나는 드롭다운형태의 메뉴로 작은 공간을 차지하면서 많은 메뉴목록을 포함할 수 있어 쇼핑몰 박물관과 같이 메뉴로 나누어야 할 부분이 많을 경우 주로 사용한다.
ACTION ; 폼의 데이터를 처리할 CGI 프로그램을 지정하는 URL
ENCTYPE ; 폼의 데이터 전송 시 암호화 방법 지정
METHOD ; 폼의 데이터를 전송하는 방식 지정
NAME ; 폼의 이름
TARGET ; CGI 프로그램에 의하여 전송되는 데이터를 출력할 윈도우 지정
