1 / 57

9 장 멀티미디어를 활용한 웹 페이지의 저작

9 장 멀티미디어를 활용한 웹 페이지의 저작. 9.1 HTML 과 웹 페이지 최근 WWW 의 보급으로 많은 컴퓨터 사용자들이 WWW 을 이용하게 되어 멀티미디어 정보를 웹 페이지를 통해 전달하는 경향이 크다 . 멀티미디어 CD-ROM 타이틀과 비교해 볼 때 웹 페이지는 모든 사람에게 공개되어 있으며 , 언제라도 내용을 갱신할 수 있으므로 최신의 정보를 제공할 수 있다는 것이 장점이다 . . 9.1.1 HTML 이란 ?

kellsie
Download Presentation

9 장 멀티미디어를 활용한 웹 페이지의 저작

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 9장 멀티미디어를 활용한 웹 페이지의 저작

  2. 9.1 HTML과 웹 페이지 • 최근 WWW의 보급으로 많은 컴퓨터 사용자들이 WWW을 이용하게 되어 멀티미디어 정보를 웹 페이지를 통해 전달하는 경향이 크다. • 멀티미디어 CD-ROM 타이틀과 비교해 볼 때 웹 페이지는 모든 사람에게 공개되어 있으며, 언제라도 내용을 갱신할 수 있으므로 최신의 정보를 제공할 수 있다는 것이 장점이다. 2

  3. 9.1.1 HTML이란? • HyperText Markup Language의 약자로 Web Page를 만들기 위한 기본 언어 또는 약속이라 할 수 있다. • Markup Language ? • 문자열의 앞뒤에 태그(tag, 문서의 형식을 지정하는 일종의 해석 기호)를 붙여 그 문자열의 특성을 나타내 주는 언어 • HTML은 SGML(Standard Generalized Markup Language, 문서의 논리적 구조를 기술하기 위한 Markup Language의 정의를 위한 언어) 표준에 따라 구현한 문서 형식 3

  4. 태그의 종류와 형식 • 태그에는 문자열을 시작을 나타내는 시작 태그와 끝을 나타내는 끝 태그가 있다. • 시작 태그의 형식 : <"태그이름"> • 끝 태그의 형식 : </"태그이름"> • 시작 태그 안에 ' 속성 이름="속성값" '의 쌍으로 태그의 속성을 지정하기도 한다. 4

  5. 9.1.2 HTML 문서 • HTML문서의 구성 <HTML> <HEAD> <TITLE> 간단한 HTML문서 </TITLE> </HEAD> <BODY> Body태그 안의 내용이 브라우저에 나타납니다.<BR> 줄을 건너 뛰었습니다.<BR> <H1>Heading 1</H1> <H3>Heading 3 / 제목: 간단한 웹 페이지</H3><BR> <FONT size=2>Font 크기 2</FONT><BR> <FONT size=6>Font 크기 6</FONT><BR> </BODY> </HTML> 5

  6. 9.1.3 하이퍼링크 (Hyperlink) • 하이퍼텍스트 상에서 원하는 곳으로 이동할 수 있도록 만들어진 링크. 웹에서의 하이퍼링크는 <A>태그에 의해 만들어진다. • <A href="가고자 하는 곳의 주소">링크가 될 부분</A> • 다른 웹 사이트로의 링크 • <A href="http://www.snoopy.com">Snoopy.com으로의 링크</A> • 자기 계정 내에서의 링크 • 하위 폴더: <A href="example/travel.htm"> • 상위 폴더: <A href="../게시판/게시판.html"> • 한 페이지 내에서의 링크 • 링크: <A href="문서명#문서내 위치명">링크가 될 부분</A> • 위치 정의: <A name="문서내 위치명"></A> 6

  7. 9.2 웹 페이지의 디자인 • 다른 매체와 마찬가지로 뚜렷한 주제와 충실한 내용이 중요 • 시각적인 디자인과 탐색 구조, 인터페이스도 중요 • 네트워크상에서의 통신 효율도 고려 7

  8. 9.2.1 웹 페이지의 개발 과정 8

  9. 주제와 대상의 결정 • 명확한 주제와 그에 관한 정보를 중심으로 제작 • 웹 페이지를 접하는 대상을 고려 (연령층 등) • 아이디어 도출 (Brainstorming) • 정한 주제와 관련된 것들을 자유롭게 생각해 보고 생각나는 것들을 모두 적는 단계 • 내용의 구성 • 아이디어를 의미있게 구성하여 사이트 맵을 제작 • 사이트 맵: 웹 페이지의 구조를 파악할 수 있도록 페이지간의 계층 구조를 그림으로 나타낸 것 9

  10. 웹 페이지 작성의 준비 • 자료 수집: 저작권에 유의 • 스토리보드(Storyboard)의 작성 • 스토리보드: 만들어야 할 각각의 웹 페이지를 종이 위에 그려 보는 것 • 각 구성요소들의 위치와 크기(레이아웃) 그리고 색 등을 지정 • 웹 페이지의 작성 • 수집한 문서, 이미지 등을 편집 • 스토리보드를 따라 웹 페이지를 작성 10

  11. 9.2.2 웹 페이지의 구성 (1) 페이지의 분할 • 스크롤을 여러 번 해야 할 정도로 긴 페이지는 사용자에게 부담을 줌 • 프레임을 너무 많이 나누면 혼란스러움(2~3개가 적당) (2) 웹 페이지의 탐색 구조 • 선형구조: 정해진 순서대로 앞/뒤만 이동 가능(강의 노트 등) • 계층구조: 전체적인 내용을 구조화하여 내용을 분류(상위메뉴/하위메뉴) • 선형+계층구조: 실제적으로 가장 많이 사용 • 망 구조: 별다른 구조 없이 관련된 페이지들끼리 연결 11

  12. 탐색 구조의 표현 • 텍스트 또는 이미지를 통하여 링크 12

  13. 이미지 맵 • 그림에서 영역을 지정해 그 부분을 링크로 만드는 것 13

  14. (3) 테이블을 이용한 페이지 레이아웃 • 기본적인 HTML문서는 구성요소를 왼쪽 위로부터 차례로 표시 • 테이블을 이용하면 어느 정도 원하는 위치에 구성요소를 배치할 수 있음 (4) 열거목록(리스트) • 웹 페이지의 글은 서술형으로 길게 늘여 쓰는 것 보다는 간결하고 짧게 하는 것이 내용 전달에 효과적 • HTML문서의 열거 목록의 종류: 무순서목록, 순서목록, 정의목록 14

  15. 열거목록을 사용한 경우 15

  16. (5) 프레임의 이용 • 웹 브라우저의 화면을 분할해 주는 기능 • 일반적으로 메뉴 등 바뀌지 않는 부분과, 선택에 따라 바뀌는 내용 부분을 나누는 일에 사용 • 너무 많은 프레임은 사용자에게 혼란을 가져옴 (2~3개가 적당) 16

  17. 9.2.3 웹 페이지의 시각적 요소 (1) 일관성 있는 디자인 • 배경과 레이아웃의 통일 • 공통된 마크, 아이콘, 헤더 등 특정한 그래픽스의 사용 • 통일된 색채 계획 17

  18. (2) 텍스트의 사용 • 내용에 어울리는 폰트와 스타일 선택: 내용의 강조, 예시 등을 효과적으로 나타낼 수 있다. • 모니터의 해상도와 사이즈를 고려하여 전체 문장량과 문장 길이를 정한다. • 여백의 적절한 사용: 페이지의 인상을 높여 주목도를 높인다. (3) 색상 • 융합, 대조, 조화를 얻기 위해 사용 • 색이 주는 느낌을 고려 • 웹 페이지의 분위기를 결정 18

  19. 여러가지 색이 지닌 뜻 19

  20. (4) 메타포 • 사용자의 연상이나 경험과 관련된 시각기호와 청각기호로 조작성과 이해도를 높인다. • Icon: 인터페이스 향상, 조작성, 사용자의 속성, 내비게이션 구조를 고려하여 디자인한다. • Symbol: 사용자, 목적, 조작성, 사용자의 속성을 고려 20

  21. 9.2.4 웹 페이지 디자인의 원칙 • 웹 페이지를 만들기 전에 철저한 기획 단계를 거친다. • 웹 페이지 로드 시간이 10초 이상이 되어서는 안된다. • 길게 스크롤되는 문서를 만들지 않는다. • 방문객이 웹 사이트의 구조를 쉽게 파악할 수 있도록 구성하고 웹 페이지간의 이동이 용이하게 만든다. • 웹 페이지에 의미있는 제목을 붙인다. • 브라우저의 종류나 크기를 제한해서는 안된다. • 지나치게 많은 애니메이션을 사용하지 않는다. • 첫 화면에 플러그인을 적용하지 않는다. • 프레임을 너무 많이 사용하지 않는다. • 내용을 수시로 업데이트한다. 21

  22. 9.3 이미지의 활용 9.3.1 웹 페이지의 이미지 • <IMG src="이미지 파일 이름 또는 URL"> • 웹 페이지에 사용할 수 있는 이미지 형식은 GIF 또는 JPEG의 두 가지 • 일반적으로 크기가 작은 그림이나 버튼, 메뉴 등에 사용하는 이미지는 GIF 형식을, 미묘한 색의 변화가 많은 사진에는 JPEG 형식을 사용한다. • Animated GIF: 여러장의 GIF를 하나의 파일로 합치고 순서대로 보여주어 애니메이션 효과를 내는 GIF 파일 형식 • Interlaced GIF: 이미지의 대략적인 모습을 먼저 보여주고 차츰 세부적인 모습을 보여주는 GIF파일 형식 22

  23. 9.3.2 배경 이미지와 투명 GIF • 배경 이미지 넣기 • 형식 : <BODY>태그 안에 background="파일 이름"으로 배경 이미지 속성 지정. • 배경 이미지로 사용한 이미지가 반복해서 타일 형식으로 나타난다. 그러므로 이미지가 반복되어도 어색하지 않은 이미지를 사용해야 한다. • 배경 이미지가 너무 복잡하거나 두드러져 보여도 안된다. • 투명 GIF(Transparent GIF)의 사용 • 웹 페이지에 배경 색이나 배경 이미지를 넣으면 웹 페이지에 사용된 그림과 배경이 달라 어색해 보이는 경우가 있다. • 투명색을 설정하여 배경을 투명하게 한 투명 GIF를 이용하면 이러한 문제점을 해결할 수 있다. 23

  24. 9.3.3 이미지에 링크 달기 • 이미지에 다른 페이지로 이동할 수 있는 링크를 넣을 수 있다. • <IMG> 태그의 바깥쪽에 <A>태그를 이용해 링크를 넣는다. • 그림에 링크를 넣으면 자동으로 파란색 테두리가 생긴다. 이 테두리를 없애기 위해서는 <IMG> 태그의 border 속성을 0으로 한다. • 이미지 맵의 활용 • 하나의 이미지를 메뉴처럼 사용하는 것 • 이미지상의 특정지역을 링크시킴으로써 마우스를 대면 포인터가 손모양으로 바뀌고 클릭하면 해당 페이지로 가게 만든 것. 24

  25. 이미지 맵의 형식 <MAP name="이미지맵의 이름"> <AREA shape="rect, circle 또는 poly" coords="모양에 맞는 좌표"> </MAP> <IMG usemap="#앞에서 정의한 이미지맵 이름" src="이미지맵으로 사용할 그림의 URL"> 25

  26. 이미지 맵의 모양과 좌표 지정 • 이미지맵의 좌표 계산은 그래픽 툴에서 하거나, 이미지맵을 만들어 주는 프로그램을 이용한다 26

  27. 9.4 애니메이션의 활용 (1) Animated GIF • 여러장의 GIF를 모아 시간 간격을 두고 차례로 보여주어 애니메이션 효과를 내는 방법 • 보통 이미지와 마찬가지로 <IMG>태그를 이용 • Animated GIF를 만들기 위한 프로그램 • GIF Animator • GIF Construction Set 27

  28. (2) Shockwave Flash • 매크로미디어사에 개발한 파일 형식, 확장자는 swf • 벡터 방식의 애니메이션으로 사이즈가 작으며 사용자 상호작용까지 지원 • Flash 애니메이션을 만들기 위한 프로그램: Macromedia Flash • 웹 브라우저에서 Flash 애니메이션을 보기 위해서는 Flash 플러그인을 설치해야함 • <EMBED>태그를 써서 HTML문서에 삽입 28

  29. (3) Dynamic HTML과 JavaScript • Dynamic HTML • 기존의 정적인 HTML에 동적인 요소를 추가하기 위하여 개발된 것 • 문서의 각 요소를 객체로 정의하여 위치, 스타일, 상호작용 지정 가능 • 자바스크립트를 기반으로 하여 빠르고 편리함 • Dynamic HTML을 이용한 애니메이션의 예 • Dynamic HTML의 Layer을 적용하여 바다 속 풍경 내의 객체들을 레이어로 정의하고 그 레이어의 속성을 제어하여 바다속에서 움직이는 물고기를 표현할 수 있다. 29

  30. (4) Java Applet • 웹에서 사용되는 자바 어플리케이션 • JavaScript나 Dynamic HTML에 비해 느리고 어려우나 높은 수준의 상호작용성과 인터페이스 제공 • 필요한 HTML 태그 • <APPLET>: 자바 애플릿을 삽입할 때 쓰임 • <PARAM>: 삽입된 애플릿에 정보를 전달할 때 쓰임 30

  31. 9.5 사운드와 비디오의 활용 9.5.1 웹에서 지원하는 사운드와 비디오 파일 (1) 사운드 파일의 종류 • Wave 파일 • 윈도우에서 기본적으로 지원하는 파일 형식이므로 별도의 플러그인 없이 사용할 수 있다. • 파일이 크기 때문에 길이가 짧은 음악이나 음향 효과에 주로 사용한다. 31

  32. Real Audio 파일 • Real Audio 플러그인을 설치하면 들을 수 있다. • 실시간 전송이 가능하다. 즉 다운로드와 동시에 음악을 들을 수 있다. • 파일 크기가 Wave 파일의 1/10 정도로 작기 때문에 대부분의 온라인 음악 사이트에서 이 파일 형식을 사용하지만 음질이 별로 좋지 못하다. • MIDI 파일 • 퀵 타임 플러그인이나 미디어 플레이어 플러그인을 설치하면 들을 수 있다. 32

  33. (2) 비디오 • AVI 파일 • Wave 파일과 마찬가지로 윈도우에서 기본적으로 지원하는 형식이므로 별도의 플러그인 없이 사용할 수 있다. • Real Video • 사운드만 지원하던 Real Audio에 비디오 기능을 추가한 것. • Real Audio와 마찬가지로 실시간 전송이 가능하며, 음악 사이트의 뮤직 비디오나 실시간 방송에 사용한다. • MOV 파일 • 매킨토시 전용인 퀵타임이라는 동영상 프로그램의 파일 형식 • 현재는 윈도우에서도 사용 가능 • MPEG 파일 • MPEG 압축 기술을 이용해 동영상을 압축시킨 파일 • 퀵 타임 플러그인이나 미디어 플레이어 플러그인을 설치하면 들을 수 있다. 33

  34. 9.5.2 사운드와 비디오를 활용한 웹 사이트 (1) 사운드를 제공하는 웹 사이트 • 팝 가수의 홈페이지: 여러 앨범의 가사와 함께 노래를 Wave, Real Audio, MIDI로 제공 (2) 비디오를 제공하는 웹 사이트 • TV 프로그램의 예고편을 보여주는 사이트 34

  35. 9.5.3 사운드와 비디오의 삽입 • 웹 페이지에 사운드와 비디오를 추가하는 방법에는 크게 두가지가 있다. • <EMBED> 태그를 사용하여 문서 내에 포함시키는 방법 • <EMBED>태그의 기본 형식 • <EMBED src="사운드 또는 비디오 파일의 URL" > • <EMBED>태그는 파일의 종류에 관계없이 사용한다. 35

  36. <EMBED>태그 안에 사운드 또는 비디오의 콘트롤의 크기 등의 속성을 추가할 수 있다. • 콘트롤의 크기 : width=픽셀 수, height=픽셀 수 • 반복 재생하기 : loop = true 또는 false • 자동 시작 : autostart = true 또는 false • 콘트롤 숨기기 : hidden = true 또는 false • 비디오, 사운드 파일을 하이퍼링크로 연결해 클릭하여 보거나 듣는 방법 • <A> 태그를 사용 (일반적인 하이퍼링크와 동일) • <A href=“사운드 또는 비디오 파일의 URL”> … </A> 36

  37. 9.6 고급 웹 기술의 활용 9.6.1 CGI의 활용 • 사용자로부터 입력받은 정보를 서버의 데이터베이스에 저장하거나 더 나아가 사용자가 원하는 정보만을 보여 줄 수도 있다. • CGI의 작동 과정 • 사용자가 클라이언트의 웹 브라우저를 통해 정보를 입력 • 서버는 입력된 정보를 CGI 응용 프로그램에 전달 • 프로그램은 파일 시스템이나 데이터베이스에 접근하여 이 정보를 처리하고 그 결과를 서버를 통해 사용자의 브라우저로 전달 • 사용자의 웹 브라우저는 전송받은 결과를 사용자에게 HTML 문서로 보여줌 37

  38. CGI의 작동 원리 • <FORM>: HTML에서 CGI 프로그램으로 데이터를 전달하는 데에 쓰이는 태그 • <INPUT>: <FORM>태그 안에서 입력 양식을 지정하기 위해 쓰이는 태그 38

  39. 최근 CGI 프로그램을 무료로 제공하는 사이트가 증가 • 카운터, 방명록 등 무료 CGI 프로그램을 제공하는 사이트 • Korea Famous CGI Server: http://www.cgiserver.net • 링코: http://www.linko.com • 넷토픽: http://anu.andong.ac.kr/~kaen/bbs • 프리보드: http://www.bbs4u.com FORM등 입력 태그를 사용한 예 39

  40. 9.6.2 JavaScript와 Dynamic HTML • 동적 HTML • 기존 HTML의 단점을 개선해 동적인 웹 페이지를 만들수 있도록 하기 위한 기술 • 브라우저에서 실행되어 서버의 부담이 적고, CGI나 Java에 비해 간단하면서도 비슷한 수준의 기능 제공 • CSS(Cascading Style Sheet)를 통해 웹 페이지의 구성요소를 자유롭게 배치 • 브라우저 간에 표준이 정립되지 않은것이 문제점 40

  41. (1) 자바스크립트 • 동적인 웹 페이지와 상호작용을 지원하기 위하여 개발됨 • 동적 HTML의 객체들을 제어하는 데에 필수적으로 사용됨 (2) 스타일 시트의 활용 • 스타일 시트의 삽입 • <HEAD>와 </HEAD>사이에 <STYLE>태그와 </STYLE>을 넣고 그 안에 스타일 정보를 넣음 • 외부 스타일 시트 파일(.css)을 링크 (3) 레이어의 활용 • 레이어 : 동적 HTML의 핵심 • 문서 내 여러곳에 자유롭게 배치가 가능한 웹 페이지의 구성요소 • 애니메이션에서 쓰이는 투명 셀룰로이드(셀)와 같은 원리 • 구성 요소의 자유로운 위치 지정 • 자바스크립트를 이용하여 레이어의 속성 수정 가능 41

  42. 9.6.3 자바의 활용 (1) 자바의 역사 • 1991년 Sun Microsystems사의 제임스 고슬링이 가전제품에서 사용될 수 있는 단순하고 버그 없는 언어 제작을 목적으로 프로젝트 시작 • 이를 위해 특정한 컴퓨터 칩에 의존하지 않는 언어인 '자바'를 구상 • 1993년 월드와이드 웹 발표 후 인터넷과 같은 분산환경에서는 자바와 같이 하드웨어 독립적인 언어가 이상적인 프로그래밍 수단임을 많은 사람들이 인식 • Netscape 2.0에 자바 기술이 포함된 이후 인터넷 환경에서 가장 각광받는 프로그래밍 언어로 부상 (2) 자바의 활용 분야 • 웹, 네트워크, 멀티미디어 분야 • 인트라넷 분야 • 주식, 증권 분야 • 인터넷 제어(Control) 42

  43. (3) 자바의 컴파일과 실행 환경 • 자바 프로그램 개발 환경은 컴파일과 실행환경으로 구성 • 자바 소스 코드(.java)를 만들고, 이를 바이트코드(.class)로 컴파일 • 생성된 바이트코드는 자신의 컴퓨터에서 자체적으로 이용되거나 네트워크를 통해 다른 곳으로 전송 • 자바 가상 기계가 바이트코드의 명령을 해석하여 실행 43

  44. (4) 자바 애플릿 • 인터넷 브라우저 상에서 실행되는 자바 어플리케이션 • HTML로만 구성된 정적 웹페이지에 동적 효과와 여러가지 특수효과를 지원 • 미리 만들어져 있는 자바 애플릿 클래스 화일을 다운로드받아 쉽게 사용 가능 • 자바 애플릿을 다운로드받을 수 있는 웹사이트 • http://java.sun.com : 자바를 개발한 Sun사의 홈페이지 • http://www.gamelan.com : 자바 어플리케이션 개발자를 위한 웹 사이트 • http://www.javaboutique.com : 다양한 자바 애플릿이 종류별로 잘 정리되어 있는 곳 44

  45. (5) 자바 애플릿과 JavaScript의 차이점 (6) 자바 애플릿을 사용하는 이유 • 자바 애플릿은 브라우저에 대해서 독립적 • 프로그래밍에 대한 지식 없이도 쉽게 미리 만들어진 애플릿을 가져와 이용할 수 있음 • JavaScript와 Dynamic HTML 보다 높은 수준의 상호작용성을 지원 45

  46. 9.7 멀티미디어 문서의 표준 9.7.1 기존 전자문서의 문제점과 표준 • 기존 전자 문서의 문제점 • 특정 응용 프로그램으로 작성되어 있어 서로 다른 프로그램에서 작성된 문서와 호환이 되지 않음 • 문서를 작성한 응용 프로그램의 새로운 버전이 나오면, 기존의 문서도 새로운 버전에 맞게 변환되어야 함 • 파일 형식이 시스템에 의존적이므로 서로 다른 기종의 컴퓨터 간에 파일을 주고 받을 수 없음 • 응용 프로그램과 시스템으로부터 독립적인 문서의 필요성이 대두되었고, 이러한 요구에 따 라 ISO(International Standard Organization:국제 표준화 기구)에서 문서의 논리적 구조에 관한 표준인 SGML(Standard Generalized Markup Language, ISO 8879, 1986년) 표준을 제정 46

  47. 마크업 언어 • 절차적 마크업 (Procedural Markup) • 일반적으로 문서의 외형을 지정해 주는 데 사용 • 예 : 이 글자의 크기는 12 포인트로 하고, 글자체는 명조체를 사용하라는 식으로 설명을 덧붙이는 것 • Word Processor나 Unix에서 사용하는 마크업 언어인 nroff, troff 등에 이용되는데, 이 형식을 사용한 파일은 특정 프로그램에서만 사용할 수 있어 서로 다른 시스템간의 호환이 어려움 • 구조적 마크업 (Descriptive Markup) • 문서의 외형을 하나하나 지정해 주는 것이 아니라 문서의 논리적인 구조만을 기술하는 것 • 예 : 책을 쓰고자 한다면 장(chapter)의 제목, 절(section)의 제목, 문단, 꼬리말과 같이 문장의 속성만을 지정해 주는 형식 • 문서의 구조와 형식이 분리되며, 특정 프로그램에 종속적이지 않으므로 다른 시스템 간에도 호환이 쉬움 47

  48. 절차적 마크업과 구조적 마크업 48

  49. 9.7.2 SGML (Standard Generalized Markup Language) • SGML이란? • SGML은 문서의 논리적 구조를 기술하기 위한 마크업 언어를 정의하기 위한 언어의 표준으로, 구조적 마크업을 생성하는 기법을 제공하며, 문서의 내용이나 구조를 정의하기 위한 언어 • SGML은 그 자체가 마크업 언어가 아니라 마크업 언어를 정의하기 위한 메타 언어 • SGML은 처리 방법에 대한 표준이 아니라 논리적인 정보만을 제공하므로 포맷 정보를 제공하지 않음 49

  50. 문서의 구조 50

More Related