작성일자
카테고리 디자인툴/뮤즈 베타

이번글에서는 HOME 페이지에 플래시 로고와 컨텐트 영역에 유투브 동영상 삽입하는 방법을 알아봅니다. 이전글에서 구글맵을 삽입할때 알아봤듯이 모든 요소의 삽입은 위치배정에 있어서 아주 자유롭습니다. 이것을 CSS로 배치하자면 단순하지가 않습니다. 하지만 뮤즈에서는 클릭드래그해서 원하는 곳에 놓기만 하면 스타일을 자동으로 만들어주는 것입니다.

1. 플래시 로고 삽입하기



플랜뷰 모드에서 A-Master 썸네일을 우클릭해서 페이지 복사를 선택하면 매스터페이지가 복사됩니다. 이름을 바꾸고 더블클릭해서 디자인뷰에 불러옵니다.

 
1의 로고이미지를 선택해서 Delete키를 눌러 삭제하고 Ctrl+D키를 눌러 브라우저창에서 Logo.swf파일을 선택해서 엽니다. 3의 페이지 상단 조절 슬라이더를 이동해서 공간을 만든 다음 플래시 이미지를 배치합니다.

 
1의 소셜네트워크 아이콘은 플래시 애니메이션에 걸리므로 제거를 하거나 다른 곳에 배치합니다. 플랜뷰를 클릭합니다.


플래시 페이지를 클릭드래그해서 HOME페이지 위로 올리면 페이지가 교체됩니다. 여러개의 마스터 페이지가 있으면 원하는 상세페이지에 드래그해서 간단하게 교체됩니다.

2. 유투브 동영상 삽입하기 



플랜뷰에서 ABOUT페이지를 더블클릭하여 디자인뷰에 연 다음 유투브 사이트 로 갑니다. 


원하는 동영상을 찾아서 동영상 하단에서 공유를 클릭하고 소스코드를 클릭합니다. 3에 코드가 나오고 4에서 옵션을 선택한 다음 5에서 원하는 사이즈를 선택하거나 6에서 자유롭게 사이즈를 조절할 수 있습니다. 사이즈를 변경하고 나면 3의 코드가 변경이 됩니다. 우클릭해서 복사하기를 선택하거나 Ctrl+C키를 눌러 복사합니다.
 


페이지로 돌아와서 Ctrl+V키를 누르면 잠시후에 검정색 화면이 나옵니다. Preview모드로 가면 동영상 화면을 볼 수가 있습니다. 구글맵의 사이즈를 조정할 수 있는 것처럼 여기서도 유투브에 다시 가서 재조정할 필요없이 우클릭해서 HTML을 선택하면 코드창이 나옵니다. 다시 원하는 사이즈로 설정을 할 수 있습니다.

3. 트위터 위젯 설치하기



트위터에 로그인 하고 우측 사이드바 하단에 보면 자료실이 있습니다. 클릭한 다음 위젯을 선택합니다.


웹사이트용을 선택하고 검색위젯을 선택합니다.


설정에서 검색어에 원하는 검색어를 입력하고 제목과 설명을 입력하면 위젯에 나타납니다.


색상탭을 선택하고 위젯색상이나 기타 다른 색상을 설정합니다.


크기탭을 선택하고 위젯의 크기를 설정합니다.


마지막으로 끝내기 & 코드받기를 클릭하면 코드창이 나옵니다. 클릭하고 Ctrl+C키를 누르면 클립보드에 복사됩니다.


웹페이지로 돌아와서 Ctrl+V키를 누르면 나타나고 클릭드래그하여 배치합니다.
저작자 표시 비영리 변경 금지
신고
조을지

너무너무 좋은 강좌입니다 ㅠㅠ 감사해요~ 헌데 이 프로그램이 상용화되면 기존의 html은 몰라도 되나요...??

BlogIcon 베누시안

안녕하세요. 반갑습니다. 이 프로그램은 디자인 측면을 강조한 프로그램이기 때문에 HTML을 전혀 몰라도 웹디자인을 할 수 있도록 만들어졌습니다. 또한 신기술인 HTML5와 CSS3를 모든 웹브라우저에 적용할 수 있도록 호환성을 강조하여 코딩이 되기 때문에 이 신기술 또한 몰라도 웹디자인이 가능하게 됩니다. 앞으로 있을 어도비 엣지라는 프로그램은 애니메이션을 강조한 프로그램이고 이 또한 코딩을 안해도 되며 기존의 웹페이지도 간단하게 애니메이션이 되도록 수정할 수 있습니다. 예를 들면 단순한 이미지 배너가 있는 것을 화면 좌측에서 안보이다가 원래의 자리로 돌아오도록하는 애니메이션이 아주 간단하게 만들어집니다. 코드도 자동으로 만들어지지요. 아주 훌륭한 프로그램들입니다.

조을지

감사합니다~^^ 정말 좋은 강좌네요 ㅠㅠ 근데 이 프로그램이 상용화 되면 웹표준이나 html은 몰라도 되는건가요?? 요즘 웹에 대해 전반적으로 궁금한게 넘 많네요ㅜ

BlogIcon 베누시안

하지만 웹디자인에서 그래픽을 배치하는 디자인 부분이 많은 부분을 차지하고 있지만 코딩을 알면 쉬워질 수가 있습니다. 예를 들어 위와같은 프로그램으로 디자인을 했다고 해도 세밀한 수정이 필요한 경우는 CSS로 수정을 해줘야 하거든요. 웹디자인에서 CSS는 가장 기본입니다. 일종의 웹프로그래밍 언어로 취급하지만 그렇게 어려운 언어도 아니니 배우시는게 좋습니다.

가필드

강좌 감사히 보고 있습니다! 근데 혹시 뮤즈로 만든 홈페이지에 게시판이나 방명록 같은 것도 넣을 수 있나요?

BlogIcon 베누시안

안녕하세요. 반갑습니다. 어도비 뮤즈로 웹페이지를 만드는 것은 기본적인 웹디자인을 위한 것이라서 게시판이나 방명록 같은 것은 php 프로그래밍을 알아야 추가할 수 있습니다. 대부분의 블로그 프로그램이 php 프로그램으로 만든 것인데 게시판이 있는 블로그 프로그램은 익스프레스 엔진이 있죠. 뮤즈로 익스프레스 엔진의 스킨을 만들어 설치하게 되면 게시판을 사용할 수 있게 됩니다.

뮤즈는 웹디자인의 CSS부분을 간단히 작업할 수 있는 프로그램입니다. 일일히 코딩하지 않아도 이미지만 삽입하고 배치만 하면 CSS와 자바스크립트는 자동으로 만들어주게 됩니다.

유태형

안녕하세요!! 강좌 잘 보면서 따라하고 홈페이지 만들고 있습니다!

유튜브 동영상 삽입을 하면 프리뷰에선 잘 보이지만 html로 익스포트하면

광고

라고만 나오고 유튜브 플레이어 자체가 표시되지 않는데 이것은 어떤문제인가요?? 알려주세요!!

BlogIcon 베누시안

안녕하세요. 반갑습니다. 일반적인 문제는 아닌것같고 뮤즈 파일을 한번 이메일로 보내줘보시겠어요? 다른 컴에서도 그런지 시험해보면 알 수 있을거 같네요. martian36@naver.com

유태형

앗,, html파일에서 열었을땐 안떴는데 호스팅에 파일올려서 확인해보니 되는군요, 뮤즈 파일 보내드릴테니 한번 확인 부탁드립니다~

BlogIcon 베누시안

유트브에서 동영상 파일 붙여넣으니 잘 나옵니다.

사이트 잘 만드셨네요. 많이 해보셨군요. 뮤즈 사용하면

웹페이지 만드는 것은 여렵지 않죠.

BlogIcon 토리's

대박이군요 소스를 복사 붙여넣기만해도 자동으로 인식하여 오브젝트로 취급을하니..
이거 물건이군요. 디자인을할때 매우편리해지는..코딩에 집중할수있겟네요.
아무리생각해도 물건이군요 리뷰해봐야겟습니다. 우어..

BlogIcon 베누시안

안녕하세요. 반갑습니다. 이제 몇개월 있으면 정식버전이 나온답니다. 그리고 아직 포스팅하지 않았지만 어도비 엣지도 사용해보세요. 이것은 플래시 처럼 웹애니메이션을 만드는 프로그램이지만 플래시를 만드는 것이 아니라 HTML5와 제이쿼리로 작동합니다. 코딩하지 않아도 애니메이션을 자동으로 만들어주죠. 대단한 프로그램입니다. 이것도 좀 있으면 정식버전으로 나오게 됩니다.

유태형

감사합니다~ 사실 포토샵 1년정도 열심히 공부하고 홈페이지 처음만들어봤는데, 칭찬해주시니 어깨가 으쓱해지는군요!!!!

로그인필요없는 게시판같은것도 넣을수 있음 좋을텐데,, 혹시 아시면 하나 추천해주세요!

BlogIcon 베누시안

안녕하세요. 역시 포토샵을 해보신 분이시군요. 포토샵을 잘 하시면 레이아웃은 쉽죠.

게시판 프로그램은 플러그인 설치로 간단하게 되는 것이 있지만 사용할만하지 못합니다. 게시판이 가능한 한국형 블로그 프로그램을 사용해야하는데 그누보드나 익스프레스 엔진이 좋습니다. 하지만 이들 프로그램도 잘 다둘줄 알아야하기 때문에 좀 배워야하고 CSS도 만질줄 알아야합니다. 뮤즈로는 간단한 홈페이지 만들기에는 적당하고 하나의 페이지를 만들어서 블로그 프로그램에 스킨으로 적용하는게 좋습니다. 익스프레스 엔진을 배우시는 것이 좋습니다.

이러한 프로그램을 사용하여 게시판을 넣을 수도 있지만 php 프로그래밍 언어를 배우시면 게시판만 만들어서 뮤즈로 만든 웹사이트에 첨부할 수 있는데 이 또한 어렵죠.

유태형

아하,, 그렇군요.. 군 전역하고 트위터가 막 인기있어지는걸 보고 php배우려다가 말았는데,, 저 경영학과거든요 ㅋㅋㅋㅋㅋㅋ

역시 지인에게 부탁하는게 좋을것같네여. 정말 감사합니다.

강좌 너무 잘봤습니다. 너무 도움이 많이됬습니다. 가능하다면 밥이라도 사고싶군요!! ㅎㅎ

BlogIcon 베누시안

네 그러셨군요. 밥을 사주신다니 먹은 걸로 하겠습니다. 감사합니다~ 뮤즈에 관한 포스팅이 아직 끝나지 않았는데 시간내서 추가로 올려야겠습니다.

BlogIcon 토리's

플래시를 만드는 것이 아니라 "HTML5와 제이쿼리로 작동합니다."
라고 해주셧는데 알고는 있엇습니다 그런데 프로그렘을 다운받으니 조금 재밋는 사실을 알았습니다
이프로그렘 플래시로 만들어졋더군요,, 이프로그렘으로 액션스크립트로 충분히 매리트있는
데스크탑 어플리케이션을 만들수있다는걸 알려주고 싶었을까요 ~_~ 어찌됫던간에
좋은프로그렘인건 확실합니다.

BlogIcon 베누시안

안녕하세요. 어도비 엣지가 플래시로 만들어졌다기 보다는 플래시 프로그램 형태인 것으로 생각되는군요. 어도비에서는 플래시를 포기하지 않고 다만 모바일부분에서만 개발을 중단하고 어도비 엣지를 출시하면서 플래시와 동반자적인 역할을 하는 프로그램이라고 말하더군요. 아무래도 플래시는 좀 무겁고 제이쿼리가 가볍기에 애플에서 플래시를 지원하지 않는 바람에 어도비에서도 새로운 대안을 제시한 것으로 생각됩니다.

윈드

아 덕분에 좋은 강좌 잘 보고 갑니다~감사합니다 베누시안님~^^

BlogIcon 베누시안

안녕하세요. 반갑습니다. 댓글 감사합니다.

뮤즈짱

좋은강좌 잘보고 도움이 많이 되었습니다.
뮤즈에 폼이 있는데..거기에 받고 싶은 메일입력하고 서버에 올려서..sumit 클릭하면 안되는데..
클릭해서 메일로 받을수 있는 방법은 없나요? 폼강좌도 올려주세요...

BlogIcon 베누시안

안녕하세요. 뮤즈는 디자인 부분만 만드는 프로그램이라서 메일 기능을 사용하려면 php 프로그래밍을 해야합니다. 이러한 서버측 언어를 사용할 필요가 없는 단순한 웹사이트를 만드는데는 뮤즈가 좋기는 합니다. 뮤즈는 디자인하기는 좋지만 복잡한 기능을 하기에는 부족해서 워드프레스와 같은 빠르게 웹사이트를 만드는 프로그램이 훨씬 좋습니다.

고재영

관리자의 승인을 기다리고 있는 댓글입니다

BlogIcon 김창혁

강좌 정말 잘보고있는데 한가지 궁금증이 생겨서 질문드립니다.

뮤즈를 통해서 홈페이지 디자인을 다 끝마치고 나면 이제 그 뮤즈파일을 어떻게 설정해야 제가 도메인으로 따놓은 홈페이지에 적용할수있나요?? 이 방법이 아니라면 뮤즈로 작성한 홈페이지를 웹상에 어떻게 올리는지 궁금합니다,.

비밀댓글입니다

BlogIcon 베누시안

제가 뮤즈를 안하다보니 지금은 알 수 없습니다.

티스토리 툴바