콘텐츠

• 단계

comScore Inc에 따르면 1 억 명 이상의 소비자가 휴대 전화를 사용하여 인터넷을 검색합니다. 해당 청중을 위해 특별히 웹 사이트를 만드는 방법을 알아보십시오. 이 자습서에서는 Dreamweaver CS5 이상이 필요합니다. jquery에서 모바일 사이트를 만드는 방법을 배웁니다.

단계

1. 

   Dreamweaver를 열고 "File"> "New"로 이동하면 "New Document"옵션 창이 표시됩니다. 왼쪽 모서리에서 "Mobile Starters"옵션을 선택합니다. 그런 다음 다음 열에서 "Mobile Starters"와 "jQuery Mobile (CDN)"을 차례로 선택합니다.

2. 

   
   
   페이지를 만듭니다. jQuery Mobile (CDN) 파일을 열면 다음 사진에 표시된 것과 유사한 페이지가 표시됩니다.
   • 기술적으로는 단일 페이지 문서이지만 각 주제는 서로 다른 "페이지"를 나타냅니다. 예를 들어, "페이지 1"은 모바일 사이트의 홈 페이지이고, "페이지 2"는 "사이트 정보"필드이고 서비스의 경우 "페이지 3"이 될 수 있습니다.

3. 

   
   
   코드를보세요. 기본 HTML에 익숙하지 않은 경우 이러한 단계가 복잡 할 수 있습니다. 콘텐츠를 만들기 위해 저는 Dreamweaver의 "분할보기"모드에서 작업하는 것을 좋아합니다. 이를 찾으려면 프로그램의 왼쪽 모서리에있는 "파일"메뉴로 이동하면 "코드", "분할", "디자인"및 "라이브"네 가지 옵션이 있습니다. :
   • "분할"옵션을 선택하면 사이트 옆에 코드가 표시됩니다. 잠시 코드를 살펴 보겠습니다.
4. 각 페이지의 제목을 편집하십시오. 코드 (div data-role = "page"id = "page")는 새 페이지의 시작을 나타냅니다. 동일한 코드가 다른 페이지와 연결될 때 div data-role = "page"id = "page2" '또는'div data-role = "page"id = "page3과 같이 문서의 다른 시트를 나타냅니다. ". 코드
   
   ’Div data-role = "header"는 제목이며, "h1"과 "/ h1"태그 사이에 작성되어야합니다.

5. 

   
   
   콘텐츠 및 메뉴 항목을 편집합니다. ’div data-role = "Content"’코드는 콘텐츠 섹션의 시작 부분입니다. 여기에 각 페이지의 콘텐츠를 배치 할 수 있습니다. 첫 페이지에서 찾을 수있는 내용을 확인하세요.
   • 링크 목록을 찾으려면 페이지 자체를보십시오. ’ul data-role = "listview"’코드는 콘텐츠 영역에 링크 목록을 삽입하려고 함을 의미합니다. 메뉴 또는’data-role = "listview"’에 항목을 추가 할 때 올바른 페이지에 텍스트를 삽입해야합니다. 예를 들어 두 번째 페이지가 "회사 정보"섹션을 참조하고 세 번째 페이지가 "서비스"이고 네 번째 페이지 인 "연락처"를 참조하는 경우 다음을 입력합니다.

     

   • 콘텐츠를 편집하려면’div data-role = "content"’및’/ div’태그 사이에 텍스트를 삽입하면됩니다. 예를 들면 :

     

6. 바닥 글을 편집하십시오. 편집하려면 "페이지 바닥 글"필드에 텍스트를 입력하십시오.

7. 

   "라이브"옵션을 통해 귀하의 웹 사이트를 살펴보십시오. "분할"기능으로 변경된 위치를 기억하십니까? 그 안에 "라이브"라는 버튼이 있습니다.이 버튼을 클릭하면 웹 사이트가 휴대폰에서 어떻게 보이는지 볼 수 있습니다!