나모 웹 에디터의 간단한 프로그램 사용법 5. 홈페이지 작성 도구들
Download
Report
Transcript 나모 웹 에디터의 간단한 프로그램 사용법 5. 홈페이지 작성 도구들
3. 홈페이지 글자 멋내기
폰트 태그
제목 글자 태그
글자의 물리적, 논리적 스타일 태그
MARQUEE 태그
3. 홈페이지 글자 멋내기
<FONT>태그
텍스트 색상을 원하는 색상으로 바꿀 때
<FONT COLOR=“green”> ~ </FONT>
색: RGB (16진수 코드값) 또는 영문색상명
텍스트 크기를 바꿀 때
<FONT SIZE=“3”> ~
</FONT>
크기 : 1~7
<FONT STYLE=font-size=“100”> ~ </FONT>
무한대의 크기
텍스트를 원하는 글꼴로 지정할 때
<FONT FACE=“궁서체”> ~ </FONT>
<FONT FACE=“@궁서체”> ~ </FONT> => 옆으로 쓰러진 글자
3. 홈페이지 글자 멋내기
<H>태그
제목 문자의 크기를 지정할 때
<h1> 내용 </h1>
<h2> 내용 </h2>
크기가 제일
크다
제목 문자를 정렬할 때
<h1 align=“정렬방식”> 내용 </h1>
정렬방식 : justify, center, right
<h3> 내용 </h3>
<h4> 내용 </h4>
<h5> 내용 </h5>
<h6> 내용 </h6>
크기가 제일
작다
제목글자 크기는 <h1>~<h6>까지
굵은 글자체로 표시, 윗줄과 아랫줄에
각각 빈줄 삽입
3. 홈페이지 글자 멋내기
글자의 논리적 스타일 태그
글자의 논리적 스타일 태그
<CITE>~</CITE>
짧은 인용구나 책 제목, 참고 문헌 같은 문구를 표시할 때
<CODE>~</CODE>
프로그램 소스 코드의 입력 내용을 표시할 때
<EM>~</EM>
문장을 강조하는 내용을 표시하는 것 (이탤릭체)
<KBD>~</KBD>
키보드로 입력해야 할 내용을 표시할 때
<VAR>~</VAR>
프로그램에서 값이 바뀔 수 있는 변수를 표시할 때
<SAMP>~</SAMP>
컴퓨터로부터의 상태를 나타내는 메시지를 표시할 때
<STRONG>~</ STRONG >
문장을 강조하는 내용을 표시하는 것 (볼드체)
3. 홈페이지 글자 멋내기
글자의 물리적 스타일 태그
글자의 물리적 스타일 태그
<B>~</B>
볼드체로 글자를 두껍게 한다
<I>~</I>
이택릭체로 글자를 나타낸다
<S>~</S>
취소선(텍스트의 가로로 중앙을 가로지르는 선)
<U>~</U>
밑줄을 긋는다
<SUP>~</SUP>
위첨자를 나타낸다
<SUB>~<SUB>
아래첨자를 나타낸다
3. 홈페이지 글자 멋내기
<body>~<body>태그 사이에 많이 쓰이는 태그들 <MARQUEE>태그
글자가 화면의 좌우로 흐르게 만들 때
<MARQUEE DIRECTION=“값”> ~ </MARQUEE>
값 : left, right
스크롤 방법에 변화를 줄 때
<MARQUEE BEHAVIOR=“값”> ~ </MARQUEE>
값 : scroll, slide, alternate
스크롤 반복 횟수를 정할 때
<MARQUEE LOOP =“값”> ~ </MARQUEE>
값 : infinite 또는 반복 횟수
3. 홈페이지 글자 멋내기
<body>~<body>태그 사이에 많이 쓰이는 태그들 <MARQUEE>태그
스크롤의 이동 거리 간격, 시간 간격을 정할 때
<MARQUEE SCROLLAMOUNT=“값”> ~ </MARQUEE>
값 : 픽셀 수(텍스트 움직임의 거리 간격)
<MARQUEE SCROLLDELAY=“값”> ~ </MARQUEE>
값 : 1/1000초(텍스트 움직임의 시간 간격)
스크롤 부분에 배경색을 넣을 때
<MARQUEE BGCOLOR =“값”> ~ </MARQUEE>
값 :RRGGBB 또는 영문 색상명
4. 홈페이지에 글머리표 달기
순서 있는 목록 태그
순서 없는 된 목록 태그
4. 홈페이지에 글머리표 달기
순서 있는 목록 태그
목록에 번호를 붙일 때
순서 있는 목록 문서의 기본 형식
<ol>
-> 목록의 시작
<li> 목록 1
-> 목록1 문자열
<li> 목록 2
-> 목록2 문자열
</ol>
-> 목록의 끝
순서 있는 목록의 모양 바꾸기
<ol start=시작번호 type= A 또는
a >
알파벳
대문자
알파벳
소문자
<ol start=시작번호 type= I 또는 i >
그리스어 그리스어
대문자
소문자
4. 홈페이지에 글머리표 달기
순서 없는 목록 태그
목록에 기호를 붙일 때
순서 없는 목록 문서의 기본 형식
<ul>
-> 목록의 시작
<li> 목록 1
-> 목록1 문자열
<li> 목록 2
-> 목록2 문자열
</ul>
-> 목록의 끝
순서 없는 목록의 모양 바꾸기
<ul type=disk>
<ul type=circle>
<ul type=square>
5. 홈페이지 작성 도구들
웹 에디터의 정의와 종류
나모 웹 에디터의 간단한 사용법
5. 홈페이지 작성 도구들
웹 에디터의 종류
웹 에디터란?
홈페이지을 제작하기 위한 프로그램
위지윅(WYSIWYG)을 지원하는 웹 에디터의 종류
WYSIWYG 이란 What You See Is What You Get의 약어로
화면에 보이는 그대로 출력물을 얻을 수 있다는 의미
종류 : 나모, 드림위버, 프론트 페이지 등
홈페이지
5. 홈페이지 작성 도구들
나모 웹 에디터 화면 구성
메뉴와
기본도구들
작업
창
<편집창>
문서편집할때 클릭
<HTML창>
HTML 코드를 살펴볼때
<미리보기 창>
편집할 문서의 결과를
볼때
5. 홈페이지 작성 도구들
드림위버 화면 구성
메뉴와
기본도구들
작업 창
속성 창
패
널
5. 홈페이지 작성 도구들
나모 웹 에디터의 간단한 프로그램 사용법
글자의 속성 바꾸기 =>편집모드상태에서 글자를 입력>블록설정>크기,색깔,정렬,글꼴,제목글자 바꾸기
제목글자
글꼴
글자속성과 색깔
글자크기
정렬
5. 홈페이지 작성 도구들
나모 웹 에디터의 간단한 프로그램 사용법
글자의 속성 바꾼 결과 HTML창에서 확인하기
HTML 태그가 자동적으로 만들어짐
5. 홈페이지 작성 도구들
나모 웹 에디터의 간단한 프로그램 사용법
글자의 속성 바꾼 결과 미리보기 창에서 확인하기
브라우저에서 보는 결과와 같음
5. 홈페이지 작성 도구들
나모 웹 에디터의 간단한 프로그램 사용법
문서의 배경색과 배경그림 바꾸기 => 편집창 빈 공간에서 마우스 오른쪽 버튼> 문서속성
문서속성
5. 홈페이지 작성 도구들
나모 웹 에디터의 간단한 프로그램 사용법
문서의 배경색과 배경그림 바꾼 결과 HTML창에서 확인하기
HTML태그가 자동적으로 만들어짐
5. 홈페이지 작성 도구들
나모 웹 에디터의 간단한 프로그램 사용법
문서의 배경색과 배경그림 바꾼 결과 미리보기창에서 확인하기
브라우저에서 보는 결과와 같음