Dreamweaver를 사용하여 웹페이지를 만드는 방법

Dreamweaver는 관련 전문가라면 누구나 익숙할 전문적인 웹페이지 제작 소프트웨어입니다. 전문 웹 디자이너를 위해 특별히 개발된 최초의 시각적 웹 개발 도구 세트라고 할 수 있으며, 플랫폼 제한과 브라우저 제한을 뛰어넘는 동적 웹 페이지를 쉽게 만들 수 있습니다.

여기 Xixi는 DW를 처음 접하는 친구들이 참조할 수 있도록 Dreamweaver로 웹 페이지를 만드는 방법에 대한 튜토리얼을 제공합니다.

1. 사이트를 정의합니다.

1. 루트 디렉터리(여기서는 드라이브 E라고 가정)에 폴더를 만듭니다. 예를 들어 이름을 MyWeb으로 지정합니다.

***참고: 웹사이트에 사용되는 모든 파일 이름은 영어로 되어 있어야 합니다.

2. Dreamweaver를 열고 "사이트 - 새 사이트"를 선택하여 대화 상자를 엽니다. 사이트 이름(중국어 가능)에 웹사이트 이름을 입력하고, 로컬 루트 폴더에 방금 생성한 폴더(E:web)를 선택합니다. 그런 다음 확인하십시오.

***참고: Dreamweaver를 다시 열면 방금 만든 사이트를 자동으로 찾을 수 있습니다. 사이트가 여러 개인 경우 "사이트 - 사이트 열기" 메뉴에서 선택할 수 있습니다.

2. 페이지 만들기

1. 로컬 폴더 E:\MyWeb 아래의 빈 공간에서 마우스 오른쪽 버튼을 클릭하고 "새 파일"을 선택하여 페이지를 만듭니다. 파일 이름은 untitled.htm입니다. htm은 이 웹 페이지 파일이 정적 HTML 파일임을 의미합니다. 이름을 index.htm으로 바꾸세요.

***웹사이트의 첫 번째 페이지 이름은 일반적으로 index.htm 또는 index.html입니다. 다른 페이지의 이름은 직접 선택할 수 있습니다.

2. index.htm을 두 번 클릭하여 페이지 편집 상태로 들어갑니다. 제목 상자에 웹페이지 이름을 입력하고 마우스 오른쪽 버튼을 클릭한 후 페이지 속성을 선택하여 "페이지 속성" 창을 엽니다. 여기에서 웹 사이트의 제목, 배경색 또는 뒷면 이미지, 하이퍼링크 색상(보통 기본값이면 충분함)을 설정하고 다른 모든 항목은 기본값으로 유지할 수 있습니다.

3. 이때, 커서는 좌측 상단에 위치하며, "Welcome to my home"과 같은 문장을 입력할 수 있습니다. 텍스트를 선택하고 "창/속성" 메뉴를 사용하여 속성 패널을 열고 텍스트 크기를 6으로 선택한 다음 텍스트를 중앙에 배치한 다음 텍스트 앞에 몇 개의 캐리지 리턴을 사용하여 텍스트 중앙에 배치합니다. 페이지.

4. 글꼴을 선택하려면 글꼴: 글꼴 목록 편집에서 마지막 항목을 선택합니다. 그런 다음 대화 상자에서 + 기호를 선택한 다음 "사용 가능한 글꼴" 열의 글꼴 목록에 추가해야 하는 글꼴을 선택하고 가운데에 있는 버튼을 클릭하여 추가합니다.

*** 노래 글꼴은 웹 페이지에서 가장 일반적으로 사용됩니다. 사용하기 위해 목록에 특수 글꼴을 추가하지 마십시오. 컴퓨터에 특수 글꼴이 설치되어 있지 않으면 다른 사람이 볼 수 없기 때문입니다. 꼭 사용해야 할 경우에는 사진으로 만들어서 사용하세요.

***웹페이지에서 공백을 입력하는 방법은 입력 방식을 전각으로 조정하는 것입니다.

***웹페이지에서 줄바꿈하는 방법은 Shift+Enter입니다. 단락을 변경하려면 Enter 키를 누르기만 하면 됩니다.

3. 페이지에 사진 추가

1. 로컬 폴더 E:\MyWeb 아래의 빈 공간에서 마우스 오른쪽 버튼을 클릭하고 "새 폴더"를 선택하여 폴더를 만듭니다. 사진을 넣는 데 사용하면 이름을 tu, pic 또는 Images로 바꿀 수 있습니다.

2. "창/개체" 메뉴를 사용하여 개체 패널을 열고 "이미지 삽입"을 클릭한 다음 대화 상자에 삽입할 그림을 선택합니다. "이 파일을 루트 폴더에 복사하시겠습니까?"라는 대화 상자가 나타나면 "예"를 선택한 다음 방금 생성한 폴더에 저장해야 합니다.

3. 사진을 선택하고 속성 패널을 열어 사진 이름을 지정하고, 사진의 높이와 너비를 재설정하고, 사진 모서리의 점을 드래그하여 크기를 변경할 수 있습니다. Shift 키를 누른 채 모서리 점을 드래그하면 종횡비를 유지하면서 이미지가 늘어납니다. 원래 크기로 복원하려면 오른쪽 하단에 있는 "크기 조정" 버튼을 클릭하세요.

4. '링크'는 여기에 주소를 직접 입력할 수 있습니다. "Replacement"는 그림에 대한 설명, 즉 마우스가 그림을 가리킬 때 표시되는 텍스트입니다. "Border"는 그림 테두리의 너비이고 "Alignment"는 정렬 방법입니다.

4. 하이퍼링크 추가

1. 텍스트에 링크를 추가합니다.

예를 들어 페이지에 '내 기사'를 입력한 다음 이를 선택하고 속성 패널을 연 다음 '링크' 상자에서 링크하려는 페이지를 선택하세요. 다음 "대상" 상자에서는 일반적으로 self를 사용하여 현재 열려 있는 창 대신 새 창을 열거나 공백을 선택하여 새 창을 엽니다.

2. 이미지에 링크 추가

위 텍스트 링크와 같은 방법으로 이미지를 삽입한 후 속성 패널의 링크 상자에서 선택하세요. .

****사진은 여러 개의 서로 다른 링크를 생성할 수 있습니다. 방법은 다음과 같습니다.

속성 패널의 '지도' 항목 아래에 일부 그래픽이 있습니다. 예를 들어 사각형을 클릭하면 커서가 십자 모양으로 바뀌고 파란색 직사각형 핫존이 그려집니다. 이때, 속성에서 패널의 이 핫스팟에 대한 링크 주소를 설정할 수 있으며 마우스가 이를 가리킬 때 표시됩니다. 마찬가지로 원을 사용하여 핫스팟을 설정하면 이미지에 대한 다른 링크를 설정할 수 있습니다.

3. 이메일 링크 추가

이메일 링크를 추가하려는 텍스트나 그림을 선택하고 속성 패널을 열고 이메일 주소를 입력하세요. "링크" 상자. 형식은 다음과 같습니다: mailto: 이메일 주소. 사이에 공백이 없다는 점에 유의하세요.

4. exe, Zip 등 브라우저에서 열 수 없는 파일에 대한 링크인 경우, 뷰어가 링크를 클릭하면 파일 다운로드 또는 온라인 재생 기능이 실행됩니다. 실현되다.

5. 표 사용

1. 삽입/표를 클릭하여 설정을 위한 표 패널을 엽니다. 행, 열, 너비, 테두리 등의 수, "셀 채우기"는 셀 내부와 내용 사이의 거리이고, "셀 간격"은 셀 사이의 거리이며 단위는 픽셀입니다.

2. 표를 삽입한 후 표의 테두리를 클릭하면 표 전체를 선택할 수 있습니다. 그러면 아래 속성 패널에서 다양한 설정을 할 수 있습니다.

3. 커서를 셀 중 하나로 이동합니다. 지금 보이는 속성 패널은 셀의 속성 패널입니다. 셀에 대해 다양한 작업을 수행할 수도 있습니다. 배경색, 배경 이미지, 테두리, 병합, 분할 등

6. 표에 대한 기타 작업

1. 얇은 선 표를 만드는 원리:

1. 표 전체를 선택하고 배경을 검정색으로 설정합니다( 이 색상은 테이블 선 색상입니다).

2. 모든 셀을 선택하고 배경을 흰색으로 설정합니다.

2 자동으로 표 서식 지정

1. 먼저 표를 만든 다음 선택하세요.

2. 메뉴에서 명령/표 서식을 선택합니다. 즉, 미리 설정된 일부 테이블 스타일을 선택할 수 있습니다.

Sanyi 픽셀 구분선

1. 행 1개, 열 1개, 너비 200픽셀, 테두리와 여백 0인 표를 삽입합니다.

2. 표를 선택하고 표 높이를 1픽셀로 설정한 후 배경색(즉, 원하는 선 색상)을 설정합니다.

3. 코드 및 디자인 창으로 전환하여 코드를 삭제합니다.

7. 표를 사용하여 전체 페이지 만들기

웹페이지 상단(일반적으로 아이콘, 광고, 탐색 메뉴 포함)

1. 행과 2개의 열, 너비가 760픽셀이고 테두리와 여백이 0인 테이블입니다.

2. 테이블을 선택하고 정렬을 가운데 정렬로 설정하고 배경색을 #3366CC로 설정합니다.

3. 왼쪽 셀에 커서를 놓고 가로 배열은 왼쪽 정렬, 세로 배열은 위쪽 정렬로 설정한 후 일반적으로 웹사이트의 아이콘이 삽입됩니다. 즉, 로고입니다.

4. 오른쪽 셀에 커서를 놓고 너비를 500으로 설정한 후 가로 중앙 정렬, 세로 중앙 정렬 후 이미지(보통 웹페이지)를 삽입합니다. 광고, 즉 배너.

5. 방금 완성한 표 뒤에 커서를 놓고 /table을 삽입한 다음 행 1개, 열 1개, 너비 760픽셀, 테두리와 여백 0인 표를 만듭니다.

6. 방금 생성한 테이블을 선택하고 정렬을 가운데 정렬로 설정하고 배경색을 #005173으로 설정합니다.

7. 테이블에 여러 이미지를 탐색 모음 메뉴로 삽입합니다.

두 번째 웹페이지 중간 부분(왼쪽 열 목록, 가운데 웹사이트 뉴스, 오른쪽 열 목록)

1. /table 및 1행과 3열 너비를 만듭니다. 테두리가 0이고 여백이 0인 760픽셀의 테이블입니다. 그리고 정렬 모드를 중앙 정렬로 설정하고 배경색을 #FFFFFFFF로 설정합니다.

2. 왼쪽 셀에 커서를 놓고 너비를 18%로 설정한 후 가로 중앙, 세로 위쪽으로 정렬한 후 이미지와 탐색 모음을 삽입합니다.

3. 방금 삽입한 그림 뒤에 커서를 놓고 삽입/표를 클릭한 다음 행 12개, 열 1개, 너비 90%의 표를 삽입합니다. 셀 간격을 1로 설정하고 배경색을 #CCCCCC로 설정합니다.

4. 테이블의 첫 번째 셀에 커서를 놓고 높이를 20으로 설정하고 배경색을 #FFFFFF로 설정합니다. 삽입/이미지, 탐색 텍스트 앞에 작은 점을 삽입합니다. 나머지 11개 셀도 동일하게 설정하면 왼쪽의 열 분류 목록이 완성됩니다.

5. 메인 테이블의 가운데 셀에 커서를 놓고 너비를 66%로 설정하고 가로는 중앙, 세로는 위쪽으로 정렬한 후 /image를 삽입하고 네비게이션 바.

6. 이미지 뒤에 커서를 놓고 삽입/표를 클릭한 다음 행 4개, 열 1개, 너비 95%의 표를 삽입합니다. 셀 간격을 1로 설정하고 배경색을 #CCCCCC로 설정합니다.

7. 테이블의 첫 번째 셀에 커서를 놓고 마우스를 드래그하여 4개 셀을 모두 선택한 다음 높이를 60으로, 배경색을 #FFFFFF로 설정합니다.

8. 메인 테이블 오른쪽 셀에 커서를 놓고 너비를 16%로 설정하고 가로 중앙 정렬, 세로 위쪽 정렬하고 /image를 삽입한 다음 네비게이션 바를 삽입하세요.

9. 이미지 뒤에 커서를 놓고 삽입/표를 클릭한 다음 행 7개, 열 1개, 너비 90%의 표를 삽입합니다. 간격을 1로 설정하고 배경색을 #CCCCCC로 설정합니다.

10. Ctrl 키를 누른 채 방금 삽입한 표의 셀 1, 3, 5, 7을 마우스로 클릭한 다음 높이를 55로, 배경색을 #으로 설정합니다. FFFFFF.

11. 셀 2, 4, 6을 선택하고 높이를 6으로 설정하고 배경색을 #FFFFFF로 설정합니다.

12. 소스 코드 창으로 전환하고 셀 2, 4, 6에서 공백 기호 " "를 삭제합니다.

3개의 웹페이지 하단(일반적으로 저작권 정보 및 기타 관련 내용 포함)

1. 메인 테이블 뒤에 커서를 놓고 /table을 삽입한 후 2를 만듭니다. 너비가 0인 행과 2개의 열 테두리가 0이고 여백이 0인 760픽셀의 테이블입니다.

2. 테이블을 선택하고 정렬을 가운데 정렬로 설정하고 배경색을 #3366CC로 설정합니다.

3. 표의 1행 왼쪽 셀에 커서를 놓고 너비를 50%로 설정하고 가로배열을 기본값으로 세로배열을 기준선으로 배경색을 #FFFFFF로 설정한 후 copyright를 입력합니다. 정보, 콘텐츠 색상은 임의적입니다.

4. 표의 1행 오른쪽 셀에 커서를 놓고 /image를 삽입하고 둥근 이미지를 삽입한 다음 그 뒤에 Email이라는 단어를 입력하고 크기와 색상을 1과 #FFFFFF로 설정합니다. .

5. 개체/텍스트 필드 삽입/양식, 텍스트 필드를 삽입합니다. 너비는 임의로 지정할 수 있습니다.

6. 삽입/이미지, GO 이미지를 삽입합니다.

7. 페이지 속성을 설정합니다. 편집/페이지 속성 메뉴를 클릭하고 제목 열에 제목을 입력하고 배경 이미지를 선택한 다음 위쪽 테두리를 0으로 설정합니다.

*** 전체 웹페이지를 여러 부분으로 나누어 서로 다른 테이블로 결합하면 브라우저가 페이지를 읽는 데 걸리는 시간을 단축할 수도 있습니다. ; 브라우저는 표 전체를 읽은 후 내용을 표시하므로 표 전체를 프레임으로 표시하지 않는 것이 가장 좋습니다.

8. 레이아웃 표를 사용하여 전체 페이지 만들기

1. 삽입/레이아웃을 클릭하면 내부의 레이아웃 보기 버튼이 레이아웃 보기 상태로 전환됩니다(기본값은 표준임) 보다). 메뉴의 보기/테이블 보기/레이아웃 보기를 통해서도 들어갈 수 있습니다.

2. 먼저 Draw Layout Table 버튼을 클릭한 후, 그리기와 같이 페이지에 레이아웃 테이블을 생성합니다.

3. 이전 예와 마찬가지로 웹페이지 상단에 큰 테이블을 그린 다음 중앙, ​​하단을 그립니다.

4. 레이아웃 셀 그리기 버튼을 다시 클릭한 다음 이미 그려진 레이아웃 테이블에 레이아웃 셀을 그립니다.

5. 기본 보기로 돌아가 분할된 테이블에 작은 중첩 테이블을 삽입하고 페이지를 다듬어 전체 페이지의 디자인을 완성합니다.

****큰 레이아웃 테이블에 전체 페이지를 넣을 경우 주의하세요. 이러한 웹페이지는 탐색 속도가 매우 느리기 때문입니다. 페이지의 레이아웃과 내용에 따라 여러 개의 레이아웃 테이블을 나누고, 그 안에 레이아웃 셀을 삽입해야 합니다.

9. 레이어 사용

1. 삽입/레이어를 클릭합니다. 아이콘을 클릭하고 마우스를 드래그하여 레이어를 생성할 수도 있습니다.

3. 생성된 레이어를 선택하고 속성 패널을 살펴보세요. 기본 "레이어 번호"와 "레이블"을 사용하면 됩니다. 프로그래밍에는 "레이어 번호"가 필요하지만 현재는 일반적으로 사용하지 않습니다. "상단"은 페이지 상단 테두리로부터의 거리이고, "왼쪽"은 왼쪽 테두리로부터의 거리입니다. "z축"은 레이어의 순서로, 작은 숫자 위에 큰 숫자가 쌓입니다.

****색상을 설정하지 않으면 레이어가 투명해집니다.

4. 가운데 레이어의 왼쪽 상단에 있는 작은 상자를 클릭하면 레이어를 마음대로 드래그할 수 있으며, 크기도 조정할 수 있습니다.

5. "오버플로" 열에서 텍스트가 레이어 크기를 초과하면 표시(과잉 부분은 계속 표시됨), 숨김(과잉 부분은 숨겨짐), 스크롤(여부에 관계없음) 초과되면 표시됨) 스크롤 막대), 자동(초과된 경우에만 스크롤 막대가 나타남)

6. 창/기타/레이어 메뉴를 클릭하면 레이어 관리 창이 나타납니다. 여기에서 레이어 이름과 Z축 값을 수정하거나 눈 아이콘을 클릭하여 레이어를 표시하거나 숨길 수 있습니다. 중복을 방지하는 옵션도 있습니다.

7. 레이어 정렬. Shift 키를 누른 채 여러 레이어를 동시에 선택하세요. 그런 다음 여기에 있는 옵션을 사용하여 수정/정렬을 사용합니다.

8. 중첩 레이어. ⑴먼저 문서에 레이어를 삽입합니다. ⑵ 레이어 안에 커서를 놓고 계속해서 레이어를 삽입하면 중첩된 레이어가 생성됩니다. ⑶내부를 자식 레이어, 외부를 부모 레이어라고 합니다. Z축 순서는 동일합니다. 상위 레이어를 드래그하면 하위 레이어도 서로 상대적으로 이동합니다. 하위 레이어를 이동할 때 상위 레이어는 함께 이동되지 않습니다.