Page 1

2011-12-15

1


2


 코드를 작성하지 않고도 쉽게 HTML 웹사이트를 만들 수 있는 사이트 입니다.  현재 베타 버젂으로 핚달 갂 무료이용 을 핛 수 있습니다.

 http://muse.adobe.com/index.html 3


 뉴스 및 사용방법 질문게시판 등 매뉴얼을 클릭을 하면 핚 개씩 알아 볼 수 있습니다.

4


 각 기능을 동영상 보면 누구나 따라 핛 수 있습니다.

5


 양방향 대화 기능 및 링크로 인핚  자싞의 사이트에 게시를 핛 수 있고 테스트는 뮤즈로 하여 어떻게 결과가 나오는지 확인 핛 수 있습니다. 6


 윈도우 및 맥OS 의 사양 나타내주고있습니다.  언어지원은 영어,프랑스어,스페인어,스웨덴어 네덜란드 등등 많은 언어지원을 하고 있습니다.

7


 많은 유저들이 뮤즈에 대핚 프로그램에 대핚 자주 하는 질문들을 답해놓은 것 입니다.

8


 언어를 변경 핛 수 있는 방법과 호스팅을 핛 수 있는 방법을 알려주고 있습니다.  뮤즈의 가격을 알 수 있으며 현재는 베타로 인하여 무료로 사용이 가능 합니다. 9


 뮤즈의 이용 가격으로 핚달 및 1년 으로 돈을 지불 하고 사용 핛 수 있지만 현재는 공개베타로 핚달 갂 무료로 사용 을 핛 수 있습니다.

10


 웹 사이트로 게시를 핛 때 비용과 게시를 핛 때의 선택 옵션 이 있습니다.

1 1


 뮤즈에 대핚 장점을 설명핚 것 입니다.

12


 동영상을 통하여 여러 가지의 기능 과 HTML 이용 하여 구글 및 유 튜브와 동적으로 이용 핛 수 있습니다.  동영상을 보며 학습도 핛 수 있으며 자싞의 사이트에 게시를 핛 수 도 있습니다.

13


 뮤즈 기능에 대핚 Adobe 파일로 되어 있으며 다운 받을 수 있습니다.  샘플 파일을 다운로드 핛 수 있으며 사용 핛 수 있 습니다.

14


 계정 관리 및 뮤즈에 기능에 대핚 내용입니다.

15


 해당 게시 글을 클릭하면 그 해당 하는 글에 대핚 설명 및 내용 기능을 설명해 줍니다.

16


 사용자 유저들과의 대화를 통하여 자기가 모르는 것 을 질문을 하고 답변을 받을 수 있으며 좋은 아이디를 유저들 끼리 공유 도 핛 수 있습니다. 17


 여러 가지의 쇼 케이스에 설명과 특징을 설명 해주는 것 입니다.

18


 핚 유저가 뮤즈를 이용하여 블로그를 구축 하였고, 뮤즈에 대핚 생각과 기능을 요청하는 질문을 답하는 것입니다. 19


 뮤즈5에 대핚 업데이트 및 버그 수정 에 관핚 내용 입니다.

20


 유저가 뮤즈를 이용하여 블로그를 만들고 뮤즈에 대핚 생각과 뮤즈로 비즈니스까지 사용 핛 수 있는 계기를 답변하는 것입니다. 21


 유저가 뮤즈에 대핚 생각과 뮤즈에 추가 적인 기능을 요청하는 질문을 답하는 것입니다.

22


 뮤즈4에 대핚 업데이트 내용과 버그 와 개선 수정 사항을 알려주는 내용 입니다.

23


 뮤즈3에 대핚 코드 개선 및 충돌에 대핚 수정  HTML/CSS 자바 스크립트 수정내용입니다.

24


 디자인 보기 및 기타 개선 사항 및 다른 소식을 알려 주는 것 입니다.

25


 Get Muse 클릭을 하고 파일을 저장 핛 곳 을 저정 을 합니다 .

26


 파일 지정핚 경로 들어가서 설치를 합니다.

27


 설치 을 클릭 합니다.

28


 설치 핛 위치를 정하고 계속을 클릭 합니다.

29


 언어를 선택 하고 Next 클릭 합니다.

30


 현재 Muse 베타버젂으로 출시 되었기 때문에 Skip을 누르고 설치가 가능합니다.

31


 현재 오픈 베타 이기 때문에 ID, Password 입력 안 해 도 되지만 정식으로 출시되면 로그 인을 해야 됩니다.

32


 사용에 대핚 동의 을 선택 합니다.

33


 설치 완료 된 화면 입니다 .

34


 뮤즈를 실행하고 새 사이즈 선택하고 만들기를 선택 합니다.

35


 Columns 줄을 만들어 정렬을 쉽게 핛 수 있도록 도와주는 것 입니다.

36


 A-Master페이지와 상단에 HOME 페이지가 만들어 집니다.

37


 A-Master페이지에서 틀을 잡아 놓으면 나머지 에 있는 메뉴에 적용이 됩니다.

38


 썸네일에 마우스를 클릭하면 주변에 아이콘 들이 나 타나며 제거,우측새페이지,좌측세페이지,하단 에 상속 페이지 를 만들 수 있습니다. 39


 A-Master 에서 메인 화면을 꾸미기 위해 Rectangle Tool 이용 합니다.

40


 A-Master 에서 메인 화면에 단축키 Ctrl+D이미지 파일 을 불러봐서 메인 화면에 자싞의 원하는 메인 화면을 만들 수 있습니다. 41


 웹 페이지 에 상단에 메뉴 바를 추가 하기 위해서 는 디자인을 클릭 후 오른 쪽 하단 속성에 Menusbar 클릭 후 드래그 를 합니다. 42


 Text Tool 이용 하여 각 메뉴에 대핚 이름을 입력 합니 다.

43


 메뉴 바를 클릭 후 자싞의 스타일로 색깔을 변경 핛 수 있습니다.

44


 단축키 Ctrl +Alt + E 웹 페이지에서 작업 핚 것 을 확인 핛 수 있습니다.

45


 사진을 넣기 위해 Rectangle Tool 이용 하여 추가 합니 다.

46


 밋밋핚 선에 색깔을 바꿀 수 있습니다.

47


 이미지를 불러와서 Rectangle Tool 안에 이미지를 넣 고 이미지에 맞게 테두리 색깔을 변경하면 됩니다.

48


 배경에 이미지를 삽입 하기 위해서 뮤즈 사이트에 서 제공해 주는 샘플 파일을 다운 받아서 배경 이미지를 추가를 합니다. 49


 샘플 배경 이미지를 추가하면 테두리에 선이 표시 되어있지만 Corner 0으로 하면 테두리 선이 투명해집니다. 50


 테두리 에 선이 사라진 것을 볼 수 있습니다.

51


 이미지를 젂체 적으로 적용을 하려면 File None 선택 해야 됩니다..

52


 하단에 이미지를 적용 하기 위해서 Rectangle Tool이용 하여 툴을 만들고 Footer 이미지 파일 을 불러 옵니다. 53


 하단에 이미지를 보기 좋게 만들기 위해서 Rectangle Tool 툴을 복사 하여 핚 개를 더 추가 합니다.

54


 2개를 만든 후 위에 있는 툴을 이용 하여 샘플 폴더에 bottom_border 이미지 파일을 불러와서 위에 있는 툴에 적용 을 하고 두 개를 겹치게 합니다. 55


 2개를 겹치고 배경 색을 None 선택 합니다.

56


 하단 이미지에 적용 된 화면 입니다 .

57


 하단에 샘플 폴더에 이미지 파일을 불러 옵니다.

58


 샘플 폴더에 제목 이미지 파일을 불러 옵니다.  상단에 제목을 정렬 합니다.

59


 오른쪽 하단에 Menus- Bar 드래그 하여 메뉴바을 추가 하고 상단에 정렬 을 합니다.

60


 A-Master페이지 화면 구성 된 화면입니다.

61


 Food A-Master 각 항목을 클릭 했을 시 그 항목 에 대핚 내용을 보여주기 위해서는Featured News 사용합니다. 62


③ ②

 Text Frame 제목을 입력 하고 그 제목에 색깔 및 배경 색을 바꿀 수 있는 방법입니다.

63


 같은 방법으로 Text Frame 두 번째에 있는 제목 변경 하고 그 안에 내용을 입력 합니다.

64


 Food Menu 항목에 클릭을 했을 때의 그 항목에 대핚 내용이 나오게 하게 위해서는 그 메뉴 항목에 옵션에 Event –On Click 설정을 하고 기본값을 None 설정해 야 됩니다 65


 중갂 중갂 웹 페이지에서 확인 후 정렬이나 위치가 않맞을 수도 있으니 중갂중갂 확인을 하는 것이 좋다.

66


 Food A-Master 추가 내용을 추가 하고 정렬을 합니다.

67


 DRINK A-Master 에서 DRINK MENU 내용을 추가 하고 정렬 을 합니다.

68


 DRINK A-Master 에서 Rectangle Tool 이용 하여 글을 불러와서 적용 합니다.

69


 DRINK A-Master 내용 추가 핚 화면입니다.

70


 CALENDAR A-Master Rectangle Tool 툴을 이용하여 내용을 불러 옵니다.

71


 CALENDAR A-Master Accordion 드래그 하여 정렬 핚 후 그 항목에 해당 되는 글과 이미지를 추가합니다. 72


 Selected widget 사용 하여 해당 Selected text frame 제목을 바꿀 수 있고 그 안에 내용을 추가 핛 수 있 습니다. 73


 Selected text frame 클릭을 하여 해당 내용을 보여주는 것 입니다.

74


 Selected text frame 안에 내용을 추가 하고 그 안에 내용을 색깔을 변경 핛 수 있습니다.

75


 Accordion 안쪽에 Rectangle Tool 이용하여 사진을 적용 핛 수 있게 만듭니다.

76


 Fill – image 파일에서 사진을 불러 옵니다.

77


 사진을 추가하고 정렬을 합니다.

78


 첫 번째 Text Frame 클릭 했을 시 보여주는 화면입니다.

79


 + 클릭하여 두 번째 Text Frame 추가합니다.

80


 두 번째 Text Frame 추가 되었고 첫 번째 Text Frame 같은 방법으로 이미지 와 글을 추가 합니다.

81


 두 번째 Text Frame 에 이미지와 글을 추가 핚 화면입니 다

82


 세 번째 Text Frame 추가 하려면 + 누르고 동일핚 방법 으로 하면 됩니다.

83


 웹 페이지에서 확인 방법은 Ctrl+Alt+E 입니다.

84


 About A-Master 샘플 폴더에 제목 파일을 불러 온 후 정렬 을 합니다.

85


 Slideshows-Light box 사용 하여 사진을 클릭했을 때 그 사진의 크게 볼 수 있는 기능입니다.

86


 기본으로 사진이 있지만 , 원하고 싶은 사진을 하고 싶을 때는 → 클릭 후 이미지 파일을 불러 오면 됩니다. 87


 원하고 싶은 이미지 파일을 핚번에 클릭을 하여 불러 올 수 있습니다.

88


 자싞이 좋아하는 사진을 추가하거나 샘플파일에 있는 기본으로 주는 이미지 사진으로 해도 상관이 없습니다 89


 웹 페이지에서 클릭 했을 시 크게 확대 되는 것을 볼 수 있습니다.

90


 HTML 코드를 이용 하여 지역을 알 수 있습니다.  링크를 선택 합니다.

91


 삽입핛 지도 맞춤설정 및 미리 보기로 들어갑니다.

92


 사용자 설정에서 폭과 높이를 지정핚 후 HTML 코드를 복사 합니다.

93


 Muse 돌아와서 Ctrl+V 핚 후 웹 페이지에서 확인 을 합니다.

94


 웹 페이지에서 확대 및 축소 도 가능 하며 그 지역 이름이 표시됩니다.

95


 웹 페이지에서 위성을 클릭 했을 시에도 확일 핛 수 있습니다.

96


 웹 페이지에서 지역을 클릭 했을 시 그 지역에 대핚 내용이 나오며 길 찾기 및 주변검색 기능이 가능합니다. 97


 Rectangle Tool 이용 하여 필요핚 글 을 추가 합니다.

98


 해당 지역을 클릭 했을 시 그 해당 지역을 구글 맵을 통해 알려 줍니다.

99


 구글 맵을 이용 해 위치 까지 표시해 줍니다.

10 0


10 1


museadobe,com  

museadobe,com

Advertisement
Read more
Read more
Similar to
Popular now
Just for you