Dreamweaver CS5 실행하면 위와 같은 화면이 나옵니다. Layout 부분을 잘 기억하세요. HTML5 Pack 설치가 완료가 되면 다음같은 화면을 확인 하실수 있습니다.
HTML5 Pack 설치 완료가 되면 Layout 에 HTML5 There Col… HTMLt Two Col… 두개가 생성이 됩니다. 이글을 쓰는 목적은 이걸 설치하는데 1시간 정도를 소요 했습니다. 설치 방법을 알면 몇분정도면 완료가 됩니다. 저처럼 시간 낭비 하지 않기 바라면서…. 설치 방법을 알려 드립니다.
http://labs.adobe.com/downloads/html5pack.html 에서 HTML5 Pack를 다운 받습니다. Dreamweaver CS5 실행하신후 그림과 같이 아이콘을 클릭하여 Extension Manager를 실행합니다.
Extension Manager 오른쪽 상단에 Install을 클릭하여 다운 받으신 파일을 선택합니다. Dreamweaver CS5에서 Extension Manager를 실행하지 않고 다운 받은 파일을 더블 클릭하여 직접 실행 하시거나 Extension Manager 를 실행하시면 아래 화면이 한글로 나옵니다. 그리고 설치 하셔도 두번째 이미지처럼 등록이 되지 않습니다. 반드시 Dreamweaver CS5에서 Extension Manager를 실행 하신 후에 설치하셔야 됩니다.
위와 같은 화면이 나오셨다면 Accept 클릭하신후 다음 단계로 넘어갑니다.
설치가 완료시 화면입니다. 이제Dreamweaver CS5를 재실행하시면 두번째 이미지의 화면을 보실수 있습니다.





지금 까지는 Frame에 script를 작성 했는데, 재생 바 부분은 Class로 만들어 보겠습니다. Class 이름을 Slide Bar라고 하고 이 녀셕만 따로 생각을 해 봅시다. Slide Bar에서 ( 드래그 위치 / 드래그 총 영역 ) 값은 곧 percent가 됩니다. 0~1사이의 값( percent )을 Slide Bar에서 이벤트로 전달( dispatchEvent ) 해 준다고 하면 ( content길이 * percent )을 해주면 원하는 위치 값을 찾을 수 있습니다. 드래그 총 영역은 ( bg의 넓이 – dragger의 넓이 )입니다. 드래그 위치는 마우스로 drag&drop한 위치이겠죠. 마우스로 drag 할 수 있는 영역은 bg.x 좌표에서 시작해서 드래그 총 영역이 됩니다. 필요한 모든것은 다 알수 있습니다. 이걸 그냥 코드로만 표현 해보면 되겠네요. 디자인 부분은 (
\w은 대소문자 밑줄을 포함하는 모든 영숫자([a-zA-Z0-9_])와 같습니다. 더하기(+) 추가 되었네요. 공백은 포함이 되어 있지 않으므로 This까지만 일치 합니다. 표현식 뒤에 g가 붙어서 global flag가 true가 됩니다. String.match() method는 Global flag가 true이면 문자열의 시작 부분(인덱스 위치 0)에서 검색이 시작됩니다. 일반 표현식의 일치하는 항목이 배열에 추가되고 다음 인덱스 위치에서 검색이 진행됩니다. 메서드 실행이 완료되면 일반 표현식의 lastIndex속성이 0으로 설정됩니다. ary 배열에 밑줄을 포함한 모든 영숫자를 하나씩 찾아가면서 일치 하지 않는 공백이 나오면 다음을 찾습니다. 그래서, This,is,a,dalparan,example받아 배열에 넣습니다.