cascsding style sheets 적용하기

스타일 시트(cascsding style sheets)

• 작업 페이지마타 같은 스타일을 지정하여 일관성을 부여합니다.
• 스타일을 미리 만들어 저장하고 필요한 ㅂ1ㅜ분에 정의 해주는 기능입니다.
• 글자의 크기, 서체, 배경과 배열 위치 등을 선택하여 설정 할 수 있고 만들어진 스타일 시트는 삭제, 편집이 가능합니다.

외부 스타일 시트

확장자가 CSS가 붙어서 저장되는 독립된 파일입니다.

한번 저장해 놓으면 다른 파일에서 연결하여 사용 할 수 있습니다.

내부 스타일 시트

CSS를 정의한 문서에서만 사용이 가능합니다.

문서안에 포함되어 저장 되고 다른 파일에서는 연결하여 사용 할 수 없습니다.

스타일 시트 만들기

• 인라인 스타일 : 태그에 직접 적용되고 한번만 사용할 수 있습니다. 어떤 태그에 적용되고 있는지 코드를 통해 확인 할 수 있고 속성 창에서 값을 정의합니다.

• 클라스: CSS 디자이너 패널을 통해 정의하여 사용합니다.
1. 새CSS 파일 생성 : 외부 스타일 시트 정의
2. 기존 CSS 파일 첨부 : 저장된 외부 스타일 시트 연결
3. 이 페이지에 정의 :  내부 스타일 시트

스타일 시트(cascsding style sheets) 적용하기

스타일 시트 만들기

프레임 셋 태그 사용하기

레이아웃을 잡기 위해 화면을 분할하여 각각 나누어진 화면에 html문서를 불러들여 여러개의 파일을 하나의 파일에서 볼 수 있도록 하는 기능입니다.

드림위버CC 버전부터 프레임을 설정 할 수 있는 메뉴와 패널이 배제되었으므로 코딩창에서 직접 코딩하여 사용 할 수 있습니다.

네비게이션 테스트에 많은 시간이 소요되고 북마크의 어려움 가변적인 페이지 디자인의 방해 요소 등 다양한 단점들로 인해 최근 사용 빈도가 줄고 있으며 페이지를 레이아웃 하는 요소에서 베제되고 있습니다.

<frameset>

row="128,418"  행으로 분할

cols="183,1367" 열로 분할

frameborder="yes" 프레임 테두리 설정 여부 yes / no

border="5" 프레임 테두리의 두께

bordercolor="#99ff99" 테두리의 색상

<frame src="a,html">

</frameset>

<frame>

src="불러들일 파일 명"

scrolling="스크롤바의 생성 여부" auto / no / yes

noresize="noresize" 프레임의 크기 조절 불가

marginheight="0" 상하의 여백

marginwidth="0" 좌우 여백

name="b" 프레임의 이름 설정

목록만들기

시작번호 바꾸기

• 시작번호에 시작할 번호를 입력하면 목록이 만들어 질 때 설정한 번호가 첫번째로 매겨짐니다.
• 다른 페이지에서 리스트를 연결하거나 같은 페이지에서 연결되지 않은 새로운 목록에 시작 번호를 바꿔 연결된 것처럼 사용합니다.

링크 사용하기

LINK

link 걸기

E-mail link

이미지를 삽입하고 링크 설정하기

이미지 삽입

메뉴 - 삽입 - 이미지

삽입패널 - 이미지

한장의 이미지에 여러개의 링크를 걸 수 있습니다.

사각형, 원형, 다락형 형태의 핫스팟 토구를 이용하여 링크가 길럴 영역을 만들 수 있습니다.

링크가 걸릴 대상을 적어주고 링크가 열링 대상과 그림 설명을 삽입 할 수 있습니다.

Dreamweaver(드림위버)란?

웹 페이지를 만들기 위한 HTML 편집기를 말합니다.

윈도우, 맥 두개의 운영 체제를 모두 지원하며, Css를 비롯한 프로그레밍 언어와 같은 웹 기술에 대한 지원과 호환이 뛰어난 프로그램입니다.

1 글자 속성 알아보기

내용 입력

화면(body)에 한글이나 영문, 숫자, 특수문자를 입력함

줄 바꾸기

P태그(단락)

Enter 키를 누르면 단락 태그인 P 태그가 적용되어 한 줄이 떨어지고 그 다음 줄에 글자를 입력 할 수 있음.

BR태그( 줄바꿈)

Shift + Enter를 누르면 BR태그가 적용되어, 바로 다음 줄에 글자 입력이 가능함. 

특수 문자 입력

우리말의 자름을 입력하고 키보드의 한자 버튼을 누른다.

각각 자음마다 다른 모양의 특수 문자가 들어 있고, 원하는 모양으로 변환하여 사용함.

한자입력

한글로 음을 입력하고 바로 한자 버튼을 누룸.

뜻이 다른 음의 한자들 중에서 원하는 한자를 선택하여 변환.

Heading

속성창 - HTML - Format

B와 I

속성 창 - HTML

B는 선택한 글자를 볼드체로 두껍게 만들어 줌.(Stong)

I는 선택한 글자를 기울임꼴, 이탤릭체로 만들어 줌.(em)

들여쓰기와 내어쓰기

Blockquote 태그로 들여쓰기가 적용.

Remove Blockquote는 적용된 들여쓰기 태그를 삭제하여 내어쓰기가 실행.