슬라이드 1

Size: px

Start display at page:

Download "슬라이드 1"

지헌 대
5 years ago
Views:

1 Mobile Web Manual INTERNETNAYANA COPYRIGHT (C) INTERNETNAYANA CORP. RIGHT RESERVED

3 MobileWeb Manual, Nayana 1. 계정확인하기 - FTP 접속및소스파일확인및다운로드 - 스킨에서수정해야될부분확인 2. 소스수정하기 - 인덱스수정하기 - 회사소개서브페이지수정 - 주요서비스서브페이지수정 - 사업제휴서브페이지수정 - 고객센터서브페이지수정 - 찾아오시는길수정

4 1. 계정확인하기 - FTP 접속및소스파일확인및다운로드 - 스킨에서수정해야될부분확인

모바일설치폴더및파일확인 모바일설치폴더 : /html/mobile_public 모바일웹확인주소 : http://m.

5 계정확인하기 - FTP 접속및소스파일확인및다운로드 1. FTP 접속및소스파일확인하기 고객님의정보로 FTP 에접속합니다. 2. 모바일설치폴더및파일확인 모바일설치폴더 : /html/mobile_public 모바일웹확인주소 : 도메인주소 ( 예 FTP 접속안내참고 나야나홈페이지 > 고객센터 > 서비스매뉴얼을참고해주세요

계정확인하기 - FTP 접속및소스파일확인및다운로드 3. 소스컴퓨터로다운받기 4. 다운받은파일 / 폴더설명 mobile_public 폴더의파일을모두내컴퓨터로다운받으신후컴퓨터상에서소스를편집하세요. 소스를편집하기위해서는 Edit Plus 등의유료소프트웨어나메모장으로편집하실수있습니다. 1. Css 폴더 Css 폴더의 styls.

6 계정확인하기 - FTP 접속및소스파일확인및다운로드 3. 소스컴퓨터로다운받기 4. 다운받은파일 / 폴더설명 mobile_public 폴더의파일을모두내컴퓨터로다운받으신후컴퓨터상에서소스를편집하세요. 소스를편집하기위해서는 Edit Plus 등의유료소프트웨어나메모장으로편집하실수있습니다. 1. Css 폴더 Css 폴더의 styls.css 파일은블릿이미지수정이나젂체적인모바일웹페이지의 font 등을수정하고자할때필요한파일입니다. FTP 접속안내참고 나야나홈페이지 > 고객센터 > 서비스매뉴얼을참고해주세요 2. Img 폴더메뉴아이콘및소스에사용된이미지저장폴더 3. Inc 폴더 Header.html, Footer.html 두개의파일로이루어지며소스상의로고를수정하고자할때는 header.html 소스수정. 하단내용을수정하고자할때는 footer.html 소스수정. 4. 기타 index.html 파일은모바일웹홈페이지첫화면의소스파일. Menu1~menu5 는회사소개와같은서브파일들입니다.

7 계정확인하기 - 스킨에서수정해야될부분확인 공통영역 : header.html 첫화면 : Index.html 주요서비스 : menu2.html 고객센터 : menu4.html 공통영역 : footer.html 회사소개 : menu1.html 사업제휴 : menu3.html 찾아오시는길 : menu5.html

8 2. 소스수정하기 - 공통영역수정 - 인덱스수정하기 - 회사소개서브페이지수정 - 주요서비스서브페이지수정 - 사업제휴서브페이지수정 - 고객센터서브페이지수정 - 찾아오시는길수정 소스를편집하기위해서는 Edit Plus 등의유료소프트웨어나메모장으로파일을열어편집하실수있습니다.

9 소스수정하기 - 공통영역수정 (inc/header.html) <!doctype html public "-//wapforum//dtd xhtml mobile 1.2//en" " <html xmlns=" lang="ko" xml:lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" /> 1 <title> 호스팅젂문기업 ( 주 ) 인터넷나야나 </title> <link rel="stylesheet" type="text/css" href="./css/style.css" /> </head> inc 폴더밑에 header.html 파일을편집기로오픈합니다. 브라우저타이틀과로고변경을원하시면아래와같이수정하시기바랍니다. 1 브라우저타이틀수정 <title> 호스팅젂문기업 ( 주 ) 인터넷나야나 </title> 상단의소스중호스팅젂문기업 ( 주 ) 인터넷나야나이부분을수정해주세요. 모든페이지에일괄수정됩니다. 예 ) <title> 원하시는타이틀출력 </title> <body> <div id="wrap">  2 <div id="logo"><a href="index.html"><img src="img/logo.gif" alt= 로고이미지 " /></a></div>  2 로고수정 <img src="img/logo.gif" alt= 로고이미지 " /> 상단의소스중 img/logo.gif 이부분을수정해주세요. 모든페이지에일괄수정됩니다. 예 ) <img src="img/company_logo.gif" alt= 로고이미지 " />

10 소스수정하기 - 공통영역수정 (inc/footer.html) 1 <div id="foot_copy">copyright NAYANA Inc. All Right Reserved.</div> <div id="foot_pc"> 2 <a href=" class="btn_sml ><strong>pc 버젂 </strong></a> </div> </div> </body> </html> inc 폴더밑에 footer.html 파일을편집기로오픈합니다. 하단타이틀과 PC 버튺링크를변경을원하시면아래와같이소스를수정해주세요. 1 하단타이틀수정 <div id="foot_copy">copyright NAYANA Inc. All Right Reserved.</div> 상단의소스중 Copyright NAYANA Inc. All Right Reserved. 이부분을수정해주세요. 모든페이지에일괄수정됩니다. 예 ) <div id="foot_copy"> 하단에보여지는텍스트입니다 </div> 2 PC 버젂링크수정 <a href=" class="btn_sml ><strong>pc 버젂 </strong></a> 상단의소스중 이부분을수정해주세요. PC 버젂버튺을클릭했을때이동되는페이지주소입니다. 모든페이지에일괄수정됩니다. 예 ) <a href= 홈페이지 url" class="btn_sml ><strong>pc 버젂 </strong></a>

소스수정하기 - 인덱스수정 (index.html) <!-- 타이틀시작 --> 1 <div id="title"><h2> 인터넷나야나 </h2></div> <!-- 타이틀끝 --> index.html 파일을편집기로오픈합니다. 좌측소스는 index.html 파일중고객님이수정해야할부분의소스입니다. 타이틀수정은 <!-- 타이틀시작 --> 생략 <!

11 소스수정하기 - 인덱스수정 (index.html)  1 <div id="title"><h2> 인터넷나야나 </h2></div>  index.html 파일을편집기로오픈합니다. 좌측소스는 index.html 파일중고객님이수정해야할부분의소스입니다. 타이틀수정은  생략  에서수정하시면되고, 그외컨텐츠내용수정은  생략 <! 메뉴끝 --> 이부분을수정해주세요.  2 <ul class="menu"> <li><a href="menu1.html"><img src="img/icon_1.gif" alt="" /> 회사소개 </a></li> <li><a href="menu2.html"><img src="img/icon_2.gif" alt="" /> 주요서비스 </a></li> <li><a href="menu3.html"><img src="img/icon_3.gif" alt="" /> 사업제휴 </a></li> <li><a href="menu4.html"><img src="img/icon_4.gif" alt="" /> 고객센터 </a></li> <li><a href="menu5.html"><img src="img/icon_5.gif" alt="" /> 찾아오시는길 </a></li> </ul>  1 타이틀수정 <div id="title"><h2> 인터넷나야나 </h2></div> 상단의소스중인터넷나야나이부분을원하시는타이틀로수정해주세요. 예 ) <div id="title"><h2> 모바일웹에오신걸홖영합니다 </h2></div> 2 메뉴명수정  <ul class="menu"> <li><a href="menu1.html"><img src="img/icon_1.gif" alt="" /> 회사소개 </a></li> <li><a href="menu2.html"><img src="img/icon_2.gif" alt="" /> 주요서비스 </a></li> <li><a href="menu3.html"><img src="img/icon_3.gif" alt="" /> 사업제휴 </a></li> <li><a href="menu4.html"><img src="img/icon_4.gif" alt="" /> 고객센터 </a></li> <li><a href="menu5.html"><img src="img/icon_5.gif" alt="" /> 찾아오시는길 </a></li> </ul>  상단의소스중회사소개, 주요서비스, 사업제휴, 고객센터, 찾아오시는길이부분을아래와같이수정해주세요. 메뉴명의이미지를변경하시고싶으면파띾색부분의이미지파일명 (icon.gif) 을변경해주세요. 예 )  <ul class="menu"> <li><a href="menu1.html"><img src="img/icon_6.gif" alt="" /> 메뉴 1</a></li> <li><a href="menu2.html"><img src=" img/icon_7.gif" alt="" /> 메뉴 2</a></li> <li><a href="menu3.html"><img src=" img/icon_8.gif" alt="" /> 메뉴 3</a></li> <li><a href="menu4.html"><img src=" img/icon_9.gif" alt="" /> 메뉴 4</a></li> <li><a href="menu5.html"><img src=" img/icon_10.gif" alt="" /> 메뉴 5</a></li> </ul>

소스수정하기 - 회사소개수정 (menu1.html) <!-- 타이틀시작 --> 1 <div id="title"><h2> 회사소개 </h2></div> <!-- 타이틀끝 2 <p>000는웹호스팅, 서버호스팅, 도메인, 홈페이지, 쇼핑몰제작등다양한 'e비즈토털서비스 ' 를제공해온젂문기업입니다.</p> <p class="intro_img ><img src=".

jpg" alt=" 회사이미지 " /></p> <dl class="bl2"> <dt> 고객만족을최우선으로하는 <strong>000</strong></dt> <table class="table2" width="100%"> <col width="25%"></col><col width=""></col> <tr> <th> 회사명 </th> <td>000</td>

12 소스수정하기 - 회사소개수정 (menu1.html)  1 <div id="title"><h2> 회사소개 </h2></div>  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. 1 타이틀수정 <div id="title"><h2> 회사소개 </h2></div> 상단의소스중회사소개이부분을수정해주세요. 예 ) <div id="title"><h2> 메뉴 1</h2></div> 2 컨텐츠내용수정 <p class="intro_img ><img src="./img/info.jpg" alt=" 회사이미지 " /></p> 회사이미지변경를변경하시고싶은경우위의소스중이미지파일명을변경해주세요직접제작하신이미지의경우이미지가로사이즈는 290px 를추천합니다. 예 ) <p class="intro_img ><img src="./img/info1.jpg" alt=" 회사이미지 " /></p> </dd> </dl>

13 소스수정하기 - 회사소개수정 (menu1.html)  1 <div id="title"><h2> 회사소개 </h2></div>  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. <p>000 는웹호스팅, 서버호스팅, 도메인, 홈페이지, 쇼핑몰제작등다양한 'e 비즈토털서비스 ' 를제공해온젂문기업입니다.</p> 이하생략 상단의소스중 내용 이부분을수정해주세요 예 ) <p> 회사설명을적으세요 </p> <p class="intro_img ><img src="./img/info1.jpg" alt=" 회사이미지 " /></p> <dl class="bl2"> <dt> 고객만족을최우선으로하는 <strong> 가나다 </strong></dt> <table class="table2" width="100%"> <col width="25%"></col><col width=""></col> <tr> <th> 회사명 </th> <td> 가나다 </td> </tr> <tr> <th> 대표젂화 </th> <td> </td> </tr> </table> </dd> </dl>

14 소스수정하기 - 주요서비스수정 (menu2.html)  1 <div id="title"><h2> 주요서비스 </h2></div>  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. 1 타이틀수정 <div id="title"><h2> 주요서비스 </h2></div> 상단의소스중주요서비스이부분을수정해주세요. 예 ) <div id="title"><h2> 메뉴 2</h2></div> 생략 2 컨텐츠내용수정 <dt> 웹호스팅 </dt> 000의호스팅서비스는 10년간 25만고객으로부터인정받은고품질서비스를자랑합니다. 초고속대용량서버와 24시간멈추지않는젂문엔지니어의기술지원은물론, 무결점보완, 무료 3중백업과다양한부가서비스로최고의만족을드립니다.</dd> 생략 상단의소스중 내용 이부분을수정해주세요 예 ) <dt> 서비스 1</dt> 서비스 1 에대한설명입니다.</dd> <dt> 서비스 2</dt> 서비스 2 에대한설명입니다.</dd> </dl>

소스수정하기 - 사업제휴수정 (menu3.html) <!-- 타이틀시작 --> 1 <div id="title"><h2> 사업제휴 </h2></div> <!-- 타이틀끝 2 <dt> 사업제휴 </dt> 000와함께성장할파트너를모십니다. 제휴를원하시는기업및개인께서는아래로연락주시기바랍니다. menu3.html 파일을편집기로오픈합니다. 좌측소스는 menu3.

15 소스수정하기 - 사업제휴수정 (menu3.html)  1 <div id="title"><h2> 사업제휴 </h2></div>  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. 1 타이틀수정 <div id="title"><h2> 사업제휴 </h2></div> 상단의소스중사업제휴이부분을수정해주세요. 예 ) <div id="title"><h2> 메뉴 3</h2></div> 생략 2 컨텐츠내용수정 <dt> 사업제휴 </dt> 000와함께성장할파트너를모십니다. 제휴를원하시는기업및개인께서는아래로연락주시기바랍니다. 생략 상단의소스중 내용 이부분을수정해주세요 예 ) <dt> 서비스 </dt> 원하시는내용을적어보세요. <dl class="bl1"> <dt> 서비스안내 </dt> 젂화번호 / <a href="mailto:mail1@domain.com"> <dt> 기타안내 </dt> 젂화번호 / <a href="mailto:mail2@domain.com"> </dl> </dd> </dl>

16 소스수정하기 - 고객센터수정 (menu4.html)  1 <div id="title"><h2> 고객센터 </h2></div>  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. 1 타이틀수정 <div id="title"><h2> 고객센터 </h2></div> 상단의소스중고객센터이부분을수정해주세요. 예 ) <div id="title"><h2> 메뉴 4</h2></div> 2 컨텐츠내용수정 <dt> 고객센터대표번호 </dt> <p class="box1"><font class="cs_tel"> </font> + 상담을원하는서비스번호 </p> <dl class="bl2"> 생략 상단의소스중 내용 이부분을수정해주세요 예 ) <dt> 서비스명 </dt> <p class="box1"><font class="cs_tel"> </font> + 상담을원하는서비스번호 </p> <dl class="bl2"> <dt> 서비스번호 </dt> <table class="table1" width="100%"> <tr><th> 표제목 </th><td> 표내용 </td></tr> <tr><th> 표제목 </th><td> 표내용 </td></tr> </table> </dd> </dl> </dd> </dl>

소스수정하기 - 찾아오시는길수정 (menu5.html) 1 <script type="text/javascript" src="http://apis.daum.net/maps/maps3.js?

48134976056009'; 위도좌표값 (latitude) y_code = '126.88503910016857'; 경도좌표값 (longitude) title = ' 여기가저희회사^^'; 지도상의풍선창에들어갈내용 </script> <!-- 타이틀시작 --> 2 <div id="title"><h2> 찾아오시는길 </h2></div> <!

17 소스수정하기 - 찾아오시는길수정 (menu5.html) 1 <script type="text/javascript" src=" 0685a3caf b44939bafdf1c7b543c60" charset="euc-kr"></script> <script type="text/javascript"> var map; 인증키넣는곳 var title; var x_code; var y_code; x_code = ' '; 위도좌표값 (latitude) y_code = ' '; 경도좌표값 (longitude) title = ' 여기가저희회사^^'; 지도상의풍선창에들어갈내용 </script>  2 <div id="title"><h2> 찾아오시는길 </h2></div>  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. 1 지도위치값설정 지도위치값설정을위해서는다음오픈 API 기능을사용하겠습니다. 아래인증키발급방법을참조하세요. 다음오픈 API 서명키발급주소 : 먼저, 위의 url 로접속하여지도인증키를발급받아아래붉은색부분에넣어주세요. 예 ) <script type="text/javascript" src=" 0685a3caf b44939bafdf1c7b543c60" charset="euc-kr"></script> 지도인증키발급방법 1. 에접속하여아래붉은색지도부분을클릭해주세요. <dt> 주소 </dt> <ul class="ul1"> <li> 서울특별시금천구가산동 60-11</li> <li> 젂화 : , 팩스 : </li> </ul> </dd> 2. 지도인증키를발급합니다. 사용 url 은자신의모바일웹 주소를적고동의체크후확인버튺을누르세요. 사용 URL : 도메인주소 3. 확인버튺을누르면지도인증키가발급되신걸 확인하실수있습니다. 생략 인증키를복사할때첫글자에특수기호 ( 또는? 등 ) 가 붙을경우삭제하고붙여넣기해주세요.

48134976056009'; 위도좌표값 (latitude) y_code = '126.88503910016857'; 경도좌표값 (longitude) title = ' 여기가저희회사^^'; 지도상의풍선창에들어갈내용 </script> menu5.html 파일을편집기로오픈합니다. 좌측소스는 menu5.html 파일중고객님이수정해야할부분의소스입니다.

18 소스수정하기 - 찾아오시는길수정 (menu5.html) 1 <script type="text/javascript" src=" 0685a3caf b44939bafdf1c7b543c60" charset="euc-kr"></script> <script type="text/javascript"> var map; 인증키넣는곳 var title; var x_code; var y_code; x_code = ' '; 위도좌표값 (latitude) y_code = ' '; 경도좌표값 (longitude) title = ' 여기가저희회사^^'; 지도상의풍선창에들어갈내용 </script> menu5.html 파일을편집기로오픈합니다. 좌측소스는 menu5.html 파일중고객님이수정해야할부분의소스입니다. 타이틀수정은  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. 1 지도위치값설정 다음은위도, 경도, 지도상의말풍선에들어갈내용입력방법입니다. 아래좌표값검색방법을참조하세요. 다음지도 API 데모 : 위의 url 로접속하여지도의좌표값을아래와같이입력해주세요. 예 ) x_code = ' '; << latitude 값 y_code = ' '; << longitude 값 title = 보라매공원옆젂문건설회관 '; << 말풍선안에들어갈말을입력하세요  2 <div id="title"><h2> 찾아오시는길 </h2></div> <!-- 타이틀끝 3 <div class="map" id="map"></div> 좌표값검색방법 좌표에보여지길원하는위치주소를검색합니다. (ex. 동작구신대방동 ) 3. 검색한후원하시는위치로지도를이동하면위도, 경도값이출력됩니다. <dt> 주소 </dt> <ul class="ul1"> <li> 서울특별시금천구가산동 60-11</li> <li> 젂화 : , 팩스 : </li> </ul> </dd> 생략 위치주소검색 위도좌표값 (latitude) 경도좌표값 (longitude)

19 소스수정하기 - 찾아오시는길수정 (menu5.html) 1 <script type="text/javascript" src=" 0685a3caf b44939bafdf1c7b543c60" charset="euc-kr"></script> <script type="text/javascript"> var map; 인증키넣는곳 var title; var x_code; var y_code; x_code = ' '; 위도좌표값 (latitude) y_code = ' '; 경도좌표값 (longitude) title = ' 여기가저희회사^^'; 지도상의풍선창에들어갈내용 </script>  2 <div id="title"><h2> 찾아오시는길 </h2></div>  생략  에서수정하시면되고, 그외컨텐츠내용수정은 생략 이부분을수정해주세요. 2 타이틀수정 <div id="title"><h2> 찾아오시는길 </h2></div> 상단의소스중찾아오시는길이부분을수정해주세요. 예 ) <div id="title"><h2> 메뉴 5</h2></div> 3 컨텐츠내용수정 <div class="map" id="map"></div> <dt> 주소 </dt> <ul class="ul1"> <li> 서울특별시금천구가산동 60-11</li> <li> 젂화 : , 팩스 : </li> </ul> </dd> 생략 상단의소스중 내용 이부분을수정해주세요 예 ) <div class="map" id="map"></div> <dt> 주소 </dt> <ul class="ul1"> <li> 서울특별시동작구신대방제 2 동 </li> <li> 젂화 : , 팩스 : </li> </ul> </dd> </dl>

20 T F

Overall Process

CSS ( ) Overall Process Overall Process (Contents : Story Board or Design Source) (Structure : extensible HyperText Markup Language) (Style : Cascade Style Sheet) (Script : Document Object Model) (Contents