1주제 : 나모 웹 에디터 5.0으로 멋진 홈페이지를 만들기 위한 준비를 하자!! 1. 나모 웹 에디터로 무엇을 할 수 있을까?? ... 24 (1) 나모 웹 에디터가 왜 필요한가? ... 25 (2) 나모 웹 에디터가 왜 좋을까? ... 25 2. 나모 웹 에디터의 CD 구성과 시스템 사양을 알자!! ... 27 3. 나모 웹 에디터 4.0을 설치해 보자!! ... 28 따라하기 : 나모 웹 에디터 4.0을 설치해 보자. ... 28 4. 나모 웹 에디터 4.0 실행하기 ... 34 따라하기 : 설치한 나모 웹 에디터 4.0을 실행해 보자. ... 34 5. 나모 웹 에디터 5.0으로 업그레이드 설치와 실행을 하자!! ... 35 (1) 나모 웹 에디터 5.0으로 업그레이드를 하자!! ... 35 따라하기 : 나모 웹 에디터 5.0으로 업그레이드를 해보자. ... 36 (2) 나모 웹 에디터 5.0을 실행하자!! ... 41 따라하기 : 나모 웹 에디터 5.0을 실행해 보자. ... 42 6. 나모 웹 에디터 5.0에서 향상된 기능과 추가된 기능을 알자!! ... 43 (1) 나모 5.0에서 개선된 기능을 알자! ... 43 (2) 나모 5.0에 새롭게 추가된 기능을 알자! ... 45 2주제 : 나모 웹 에디터 기본 기능을 마스터하자!! 1. 새로운 웹 페이지를 만들어 보자!! ... 48 쉬어가는 코너 : 리소스 관리자의 여러 가지 기능을 알자!! ... 49 초보자도 따라할 수 있어요 : 리소스 관리자를 이용해 2단 문서 양식을 만들어 보자. ... 52 초보자도 따라할 수 있어요 : 리소스 관리자를 이용해 회원 양식 입력 폼을 만들어 보자. ... 53 초보자도 따라할 수 있어요 : 리소스 관리자를 이용해 배너, 차례, 오른쪽 프레임을 만들어 보자. ... 54 초보자도 따라할 수 있어요 : 리소스 관리자를 이용해 이메일 양식 입력 폼을 만들어 보자. ... 55 초보자도 따라할 수 있어요 : 리소스 관리자를 이용해 대기 화면 폼을 만들어 보자. ... 56 쉬어가는 코너 : HTML 소스 편집 창을 알자!! ... 57 2. 이전에 작성한 웹 페이지를 열자!! ... 58 초보자도 따라할 수 있어요 : 나모 웹 에디터 5.0에서 기본적으로 제공하는 크리스마스 웹 페이지 파일(102_christmas.htm)을 열어 보자. ... 58 쉬어가는 코너 : HTML 태그 정리로 무엇을 할 수 있을까? ... 59 3. 나모로 작성한 웹 페이지를 저장해 보자!! ... 60 초보자도 따라할 수 있어요 : 회원 정보 웹 페이지를 저장해 보자. ... 60 쉬어가는 코너 : HTML문법 검사를 하자!! ... 61 4. 문서 속성과 문서 정보를 알자!! ... 62 (1) 문서 속성에는 무엇이 있을까? ... 62 쉬어가는 코너 : 웹 문서가 뭐예요? ... 63 (2) 문서 정보를 알자! ... 63 쉬어가는 코너 : 웹 서버와 웹 페이지는 어떤 관계일까? ... 65 5. 웹 브라우저로 작성한 웹 페이지를 확인하자!! ... 66 쉬어가는 코너 : 웹 문서의 특징을 알자!! ... 67 6. 소스 코드를 확인하자!! ... 68 쉬어가는 코너 : GUI(Graphics User Interface)란? ... 68 7. 웹 브라우저가 없이도 작성한 웹 페이지를 확인하자!! ... 69 8. 나모 웹 에디터 5.0를 종료하려면‥ ... 70 9. 도움말로 나모를 마스터하자!! ... 71 쉬어가는 코너 : 확장 태그 편집을 하려면‥ ... 74 3주제 : 웹 페이지를 꾸미자!! 1. 글자의 속성을 변경하자 ... 76 초보자도 따라할 수 있어요 : 웹 페이지에 입력된 글자의 속성을 진하게, 이탤릭체, 밑줄의 형태로 만들어 보자. ... 76 쉬어가는 코너 : HTML 태그 정리를 하려면 ... 78 2. 나만의 글꼴로 홈페이지를 꾸미자!! ... 78 초보자도 따라할 수 있어요 : 작업 창에 입력된 문자열을 '휴먼옛체'로 변경해 보자. ... 79 쉬어가는 코너 : 그림과 로딩 타임의 관계는.. ... 79 3. 글자 크기를 내맘대로.. ... 80 초보자도 따라할 수 있어요 : 앞에서 입력한 문자열의 크기를 6(24pt)으로 만들어 보자. ... 81 쉬어가는 코너 : 이미지 맵으로 무엇을 할 수 있나?? ... 81 4. 글자색으로 문자열을 강조하자!! ... 82 초보자도 따라할 수 있어요 : 웹 페이지에 입력된 문자열의 글자색을 변경해 보자. ... 82 5. 웹 페이지에 입력된 글자의 배경색으로 또 다른 느낌을 주자!! ... 83 초보자도 따라할 수 있어요 : 입력된 문자열의 배경색을 지정하자. ... 83 6. 글자 속성을 모두 지우자!! ... 84 초보자도 따라할 수 있어요 : 웹 페이지에 입력된 문자열의 속성을 모두 지우자. ... 84 7. 글자를 보기 좋게 정렬하자!! ... 86 초보자도 따라할 수 있어요 : 웹 페이지에 입력된 문자열을 왼쪽, 가운데, 오른쪽 정렬을 해보자. ... 86 8. 숫자 목록과 점 목록을 만들자!! ... 87 초보자도 따라할 수 있어요 : 입력된 문자열을 숫자로 된 목록과 점으로 된 목록으로 만들자. ... 89 9. 들여 쓰기와 내어 쓰기로 목록의 우선 순위를 정하자!! ... 90 초보자도 따라할 수 있어요 : 목록의 우선 순위를 들여 쓰기와 내어 쓰기로 정해 보자. ... 90 10. 웹 페이지의 배경색을 바꿔보자!! ... 91 초보자도 따라할 수 있어요 : 웹 페이지의 배경색을 아스키 코드 값 'FFCC00'으로 변경해 보자. ... 92 11. 문단 모양과 문단 유형을 지정하자!! ... 94 초보자도 따라할 수 있어요 : 문단의 모양과 유형을 지정해 보자. ... 94 12. 글꼴의 속성을 설정해 보자!! ... 96 초보자도 따라할 수 있어요 : 문자열의 속성을 '밑줄'과 '이탤릭체'로 설정하고, 글자와 낱말의 간격을 1인치(inch)로 만들어 보자. ... 96 쉬어가는 코너 : 외부 소스 편집 프로그램을 사용하려면‥ ... 99 4주제 : 이미지 삽입과 배경 이미지를 지정해 보자!! 1. 다운 로드한 이미지를 삽입해 보자!! ... 102 쉬어가는 코너 : GIF 파일의 용도는‥ ... 102 초보자도 따라할 수 있어요 : 인터넷에서 다운 로드한 이미지를 웹 페이지에 삽입해 보자. ... 103 쉬어가는 코너 : JPG 파일의 용도는‥ ... 105 2. 클립아트 이미지를 웹 페이지에 삽입하자!! ... 105 초보자도 따라할 수 있어요 : 리소스 관리자를 이용해 회원 양식 입력 폼을 만들어 보자. ... 106 쉬어가는 코너 : PNG 파일의 용도는‥ ... 109 3. 배경 이미지로 나만의 배경 화면을 만들자!! ... 110 (1) 이미지가 작다면‥ ... 110 초보자도 따라할 수 있어요 : 아래의 배경 이미지를 웹 페이지의 배경 화면으로 지정해 보자. ... 110 (2) 이미지가 크다면‥ ... 112 초보자도 따라할 수 있어요 : 클립아트의 배경 이미지를 웹 페이지에 삽입해 보자. ... 113 쉬어가는 코너 : 비트맵 방식과 벡터 방식은 어떻게 달라요? ... 115 (3) 그림 요소로 배경 그림을 삽입하자!! ... 116 초보자도 따라할 수 있어요 : 웹 페이지에서 배경 이미지를 만들어 보자. ... 116 4. 그림에 효과를 주자!! ... 120 초보자도 따라할 수 있어요 : 클립아트에서 삽입한 이미지에 명암, 대비, 선명도를 이용해 그림 효과를 주자. ... 121 쉬어가는 코너 : SIS 파일 ... 123 쉬어가는 코너 : 인터레이스 GIF와 프로그레스 JPG ... 127 5주제 : 웹 페이지 화면에서 따로 노는 레이어를 만들자!! 1. 레이어에서 사용되는 속성을 알자!! ... 130 (1) '레이어 ID'로 레이어의 이름을 정하자! ... 130 (2) 레이어가 보이는 '위치'를 지정하자!! ... 130 (3) 레이어의 '크기'를 정하려면‥ ... 131 (4) 'Z순서'로 레이어의 순서를 정하자!! ... 131 (5) '보이기'로 레이어를 보일까? 말까? ... 131 (6) 레이어에 '배경'을 지정하자!! ... 131 초보자도 따라할 수 있어요 : 웹 페이지에 레이어를 삽입한 후 이미지를 삽입해 보자. ... 132 2. 레이어 속성 창을 마스터하자!! ... 135 (1) 레이어 ID ... 136 (2) 위치와 크기 ... 136 (3) Z순서 ... 136 (4) 보이기 ... 136 (5) 그림 ... 137 (6) 색깔 ... 137 (7) 스크립트 마법사 ... 137 (8) 〈layer〉 태그로 저장 ... 137 3. 나모 웹 에디터로 레이어 작업을 하려면‥ ... 139 4. 레이어에 다양한 효과를 주자!! ... 140 (1) 스크립트 마법사로 동적인 홈페이지를‥ ... 140 (2) 액션과 이벤트로 여러 가지 효과를‥ ... 140 (3) 타임 라인으로 애니메이션 효과를‥ ... 140 초보자도 따라할 수 있어요 : 레이어에 스크립트 마법사로 이미지를 움직이자. ... 141 5. 레이어를 사용하면서 이런 것은 고려하자!! ... 143 (1) 레이어 내부에 레이어를 넣었을 경우 ... 143 (2) 레이어 내부에 삽입한 표에 스타일 시트를 적용할 경우 ... 143 (3) 문단 중간에 레이어를 삽입했을 경우 ... 144 6주제 : 하이퍼링크로 웹 페이지를 맘대로 이동하자!! 1. 하이퍼링크를 알자!! ... 146 (1) 글자 하이퍼링크 예 ... 146 (2) 이미지 하이퍼링크 예 ... 146 (3) 전자 우편 하이퍼링크 예 ... 147 (4) 문서 내 하이퍼링크 예 ... 148 2. 하이퍼링크 만들기 창을 마스터하자!! ... 148 3. 글자 하이퍼링크를 만들자!! ... 151 초보자도 따라할 수 있어요 : 하이퍼링크에 사용하기 위한 글자와 이미지를 삽입한 후 글자 하이퍼링크를 만들어 보자. ... 152 4. 새 윈도우 열기 창을 마스터하자!! ... 154 5. 새 웹 브라우저에 이미지 하이퍼링크한 웹 페이지를 열자!! ... 156 초보자도 따라할 수 있어요 : 야후 코리아 이미지를 클릭했을 때 새 창으로 야후 코리아 웹사이트로 이동해 보자. ... 157 6. 하이퍼링크로 쉉