보도메일 HTML 소스 사용 안내 Version 1.0( 미디어국 제작)

Presentation on theme: "보도메일 HTML 소스 사용 안내 Version 1.0( 미디어국 제작)"— Presentation transcript:

1 보도메일 HTML 소스 사용 안내 Version 1.0(201602 미디어국 제작)
TEL FAX COPYRIGHT 2016 사교육걱정없는세상 ALL RIGHT RESERVED.

2 HTML 소스 사용 안내 ① 문제 파악 ㉠ 다음(카페)에 업로드 된 보도자료의 우측이 잘리는 현상
해결방안 -> 소스 가로 폭 줄임 (기존 740px -> 700px) ㉡ 보도자료 형식이 다양해져 어떤 것이 원본인지 모호 해짐 해결방안 -> 기존 소스 코드 정리 및 소스 사용 방법의 일원화

3 HTML 소스 사용 안내 ② 소스 사용 방법 안내 ㉠ 원본 소스 사용 방법 ㉡ 소스 경로
오즈메일러에 저장되어 있는 소스를 우선 사용하고. NAS에 있는 원본 파일은 오즈메일러에 문제가 있을 경우에만 사용. ㉡ 소스 경로 오즈메일러 : [뉴스레터 관리함] -> [편집중인 메일함] -> [보도자료 폴더] -> 이메일 보도자료양식 원본 (수정 금지) NAS : [NOWORRYSERVER] -> [Public 폴더] -> [ 폴더] -> 이메일 보도자료양식 원본 (수정 금지).txt ※ NAS 접속 방법은 [네트워크 서버 및 NAS 사용 가이드] 참고

4 HTML 소스 사용 안내 ② 소스 사용 방법 안내 ㉢ 이전 보도자료 소스를 복사하여 재사용 X 오즈메일러에 저장되어 있는 원본 소스를 복사후 편집함.

5 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ① 오즈메일러에 접속하여 뉴스레터 관리함을 선택

6 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ② 뉴스레터 관리함의 1. 편집중인 메일함 선택

7 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ③ 뉴스레터 관리함 선택 목록에서 보도자료 항목 선택

8 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ④ 복사후 편집 메뉴를 선택하여 편집 창으로 이동

9 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ⑤ 본문편집하기 버튼을 선택

10 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ⑥ HTML 에디터 우측 하단의 메뉴에서 HTML 탭을 선택 후 소스를 편집

11 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ⑦ 편집 후 Editor 탭을 선택, 내용을 확인 후 반드시 저장 후 닫기

12 HTML 소스 사용 안내 ※ 오즈메일러 사용 방법 ⑧ 모든 수정을 마친 후 미리보기로 확인하고 테스트 메일 발송

13 HTML 소스 사용 안내 ※ HTML 에디터 사용방법 ① 접속. ② 메인 화면의 버튼을 클릭. ③ 좌측 Edit This Code: 에 소스를 붙여 넣고 중앙 상단의 버튼을 클릭 하면 화면 우측 Result: 창에 결과물을 확인 할 수 있음. ④ 편집 후 좌측 Edit This Code: 의 내용을 복사하여 오즈메일러에 붙여 넣고 최종 확인. (테스트 메일 발송)

14 HTML 소스 사용 안내 <br> <!-- ★보도 안내 내용 시작 -->
<!-- ★보도 안내 내용 시작 --> <div style="text-align: justify; color: rgb(0, 0, 0); line-height: 200%; font-family: 맑은 고딕, Malgun Gothic, 굴림, Gulim, Arial; font-size: 12pt;font-weight: bold; width: 700px;"> ■ 보도 안내 내용을 입력하세요. </div> <!-- ★보도 안내 내용 끝 --> <br><br> <!-- ★헤드라인 시작 --> <div style="text-align: center; color: rgb(0, 132, 160); line-height: 150%; font-family: 맑은 고딕, Malgun Gothic, 굴림, Gulim, Arial; font-size: 30pt; font-weight: bold; width: 700px;"> 헤드라인을 입력하세요. <!-- ★헤드라인 끝 --> HTML 소스 사용 안내 ※ 소스 편집 팁 1 – HTML 코드 이해 주석 부분입니다. <!-- --> 소스의 시작과 끝을 알리는 부분입니다. <!-- ★헤드라인 시작 --> <div style="text-align: center; color: rgb(0, 132, 160); line-height: 150%; font-family: 맑은 고딕, Malgun Gothic, 굴림, Gulim, Arial; font-size: 30pt; font-weight: bold; width: 700px;"> 헤드라인을 입력하세요. </div> <!-- ★헤드라인 끝 --> <br><br> 소스의 처음과 끝 입니다. 필요시 이 부분을 전부 복사&붙여 넣기 하여 사용합니다. 실제 내용을 입력하는 곳입니다. 이 부분의 텍스트를 수정하여 사용합니다. <br> 단락을 줄바꿈 할 때 사용합니다. <br> 태그 하나에 한 줄.

15 HTML 소스 사용 안내 ※ 소스 편집 팁 2 – 이미지 및 파일 첨부 1. 이미지 첨부
<!-- ★이미지 삽입 시작★ 이 소스를 복사하여 이미지를 추가할 수 있습니다. --> <!-- src=" " 안의 주소를 수정하세요! --> <img style="border: 0px; margin: 0px;" src=“ 이곳에 이미지 경로를 입력하세요! " width="700"> <!-- ★이미지 삽입 끝★ 여기까지 복사하세요. --> 소스의 안에 첨부할 이미지의 경로를 입력해줍니다. 여러 개의 이미지가 필요할 경우 위 소스를 복사해 이미지의 경로만 수정하여 사용할 수 있습니다.

16 HTML 소스 사용 안내 ※ 소스 편집 팁 2 – 이미지 및 파일 첨부 2. 한글 및 PDF 파일 첨부
<!-- ★한글 첨부 시작 --> <a href=“ 이곳에 파일 경로를 입력하세요! " style="color: rgb(0, 132, 160); background-color: transparent; text-decoration:none;" target="_blank"> <img style="border: 0px; margin: 0px; border-image: url('') none; width: 21px; display: inline;" src=“ 보도자료(HWP)</a> <!-- ★한글 첨부 끝 > 소스의 안에 첨부할 파일의 경로를 입력해줍니다. 여러 개의 파일을 첨부할 경우 위 소스를 복사해 파일의 경로를 수정하여 사용할 수 있습니다.

17 HTML 소스 사용 안내 ※ 소스 편집 팁 3 – 추천 사이트 HTML에 대해 더 궁금한 분은 이 사이트를 참고해 주세요.
w3schools.com – 해외 생활코딩 – 국내