여기 시스는 Dreamweaver 가 웹 페이지를 만드는 자습서를 가져왔는데, DW 초보자는 참고할 수 있습니다.
먼저 사이트를 정의합니다
1. MyWeb 과 같은 모든 루트 디렉토리 아래에 폴더 (여기서는 E 디스크라고 가정) 를 만듭니다.
* * * 참고: 본 사이트에 사용된 모든 문서는 영어 이름을 사용해야 합니다.
2. Dreamweaver 를 열고 [사이트-새 사이트] 를 선택하여 대화 상자를 엽니다. 사이트 이름에 웹 사이트 이름 (중국어) 을 입력하고 로컬 루트 폴더에서 방금 만든 폴더 (e: 웹) 를 선택합니다. 그럼 확인해 주세요.
* * * 참고: Dreamweaver 를 다시 열면 방금 설정한 사이트가 자동으로 검색됩니다. 여러 사이트가 있는 경우 사이트-사이트 열기 메뉴에서 선택할 수 있습니다.
두 번째로 페이지를 만듭니다
1. 로컬 폴더 E:\MyWeb 아래의 빈 공간에서 마우스 오른쪽 버튼을 클릭하고' 새 파일' 을 선택하면 기본 파일 이름이 untitled.htm 인 페이지가 만들어집니다. Htm 은 이 웹 파일이 정적 HTML 파일임을 의미합니다. 이름을 index.htm 으로 바꿉니다.
* * * 사이트 홈 페이지의 이름은 일반적으로 index.htm 또는 index.html 입니다. 너는 스스로 다른 페이지의 이름을 선택할 수 있다.
2. index.htm 을 두 번 클릭하여 페이지의 편집 상태로 들어갑니다. 제목 영역에 웹 페이지 이름을 입력하고 페이지 등록 정보를 마우스 오른쪽 단추로 클릭하여 페이지 등록 정보 창을 엽니다. 여기에서 웹 사이트의 제목, 배경색 또는 배경 이미지, 하이퍼링크의 색상 (일반적으로 기본값) 을 설정할 수 있으며, 나머지는 기본값으로 유지됩니다.
3. 커서가 왼쪽 위에 있습니다. "내 홈페이지에 오신 것을 환영합니다" 와 같은 문장을 입력할 수 있습니다. 텍스트를 선택하고 [창/속성] 메뉴를 사용하여 [속성] 패널을 열고 텍스트 크기를 6 으로 선택한 다음 텍스트를 가운데 맞춤한 다음 텍스트 앞에 몇 개의 캐리지 리턴을 사용하여 페이지 중앙에 배치합니다.
4. 글꼴을 선택하려면 글꼴의 마지막 항목을 선택합니다. 글꼴 목록 편집. 그런 다음 대화 상자에서+기호를 선택하고 [사용 가능한 글꼴] 열에서 글꼴 목록에 추가할 글꼴을 선택하고 가운데 버튼을 클릭하여 추가할 수 있습니다.
* * * 송체는 홈페이지에서 가장 많이 쓰이는 글자이다. 목록에 특수 글꼴을 추가하지 마십시오. 다른 사람의 컴퓨터에는 특수 글꼴이 없기 때문입니다. 필요한 경우 사용하기 전에 그림을 만들어야 합니다.
* * * 웹 페이지에 공백을 입력하는 방법은 입력기 길이를 전각으로 설정하는 것입니다.
* * * 웹 페이지에서 줄을 바꾸는 방법은 shift+Enter 입니다. Enter 키를 누르기만 하면 세그먼트를 변경할 수 있습니다.
셋째, 페이지에 그림을 추가합니다
1. 로컬 폴더 E:\MyWeb 아래의 빈 공간에서' 새 폴더' 를 마우스 오른쪽 단추로 클릭하고' 새 폴더' 를 선택합니다. 이렇게 하면 그림을 넣은 폴더가 만들어집니다. 이름을 tu 또는 pic 또는 images 로 바꿀 수 있습니다.
2. 메뉴 창/오브젝트를 사용하여 오브젝트 패널을 열고 이미지 삽입을 클릭한 다음 대화상자에서 삽입할 이미지를 선택합니다. "이 파일을 루트 폴더에 복사하시겠습니까?" 라는 대화 상자가 나타나면 예 를 선택한 다음 방금 만든 폴더에 저장해야 합니다.
3. 그림을 선택하고 속성 패널을 엽니다. 여기서 그림의 이름을 지정하고, 그림의 높이와 폭을 재설정하고, 그림의 구석에서 점을 드래그하여 크기를 변경할 수 있습니다. Shift 키를 누른 채 모서리 위의 점을 드래그하여 그림이 너비와 높이에 비례하여 늘어나도록 합니다. 원래 크기를 복원하려면 오른쪽 아래 모서리에 있는 크기 재설정 버튼을 클릭합니다.
4. "링크" 는 여기에 주소를 직접 입력할 수 있습니다. 대체는 그림에 대한 설명입니다. 즉, 마우스가 그림에 표시되는 문자를 가리킵니다. 테두리는 그림 테두리의 너비이고 정렬은 정렬입니다.
넷째, 하이퍼링크를 추가합니다
1. 텍스트에 링크를 추가합니다.
예를 들어 페이지에 [내 문장] 를 입력한 다음 선택하고 속성 패널을 연 다음 [링크] 상자에서 연결할 페이지를 선택합니다. 후자의 "목표" 에서는 일반적으로 기존 창을 열린 새 창으로 교체하는 self 를 사용합니다. 또는 공백을 선택하여 새 창을 엽니다.
2. 그림에 링크 추가
위 텍스트에 대한 링크와 마찬가지로 그림을 삽입하고 등록 정보 패널의 링크 상자에서 선택합니다.
* * * * 그림은 서로 다른 여러 링크를 만들 수 있습니다. 이 방법은 다음과 같습니다.
속성 패널의 지도 항목 아래에 도면이 있습니다. 예를 들어 사각형을 클릭하면 커서가 십자 모양으로 바뀌고 그림에 파란색 사각형 핫스팟이 그려집니다. 이 핫스폿의 링크 주소는 등록 정보 패널에서 설정할 수 있으며 마우스가 표시됩니다. 마찬가지로 원으로 핫스폿을 설정하여 그림에 대한 추가 링크를 설정할 수 있습니다.
3. 전자 메일 링크 추가
전자 메일 링크를 추가할 텍스트나 그림을 선택하고 속성 패널을 연 다음 [링크] 상자에 전자 메일 주소를 입력합니다. 형식은 mailto: 메일 주소입니다. 가운데에는 공백이 없습니다.
4. 브라우저에서 열 수 없는 파일 (예: exe, Zip 등) 에 링크하면. 브라우저에서 이 링크를 클릭하면 파일 다운로드 또는 온라인 재생 기능을 사용할 수 있습니다.
동사 (verb 의 약어) 테이블 사용
1. 삽입/양식을 클릭하여 양식 패널을 열고 설정합니다. 행 수, 열 수, 폭, 테두리 등. , "셀 채우기" 는 셀 내부와 내용 사이의 거리입니다. 셀 간격은 셀 사이의 거리 (픽셀) 입니다.
2. 테이블을 삽입한 후 테이블 경계를 클릭하여 전체 테이블을 선택합니다. 그런 다음 아래 특성 패널에서 다양한 설정을 수행할 수 있습니다.
3. 커서를 셀 중 하나 위로 이동합니다. 표시되는 속성 패널이 해당 셀의 속성 패널입니다. 셀에 대해 다양한 작업을 수행할 수도 있습니다. 배경 색상, 배경 이미지, 경계, 병합, 분할 등.
여섯째, 양식에 대한 다른 작업
1. 가는 선 테이블 제작 원칙:
1. 전체 표를 선택하고 배경을 검정색 (표 선의 색상) 으로 설정합니다.
2. 모든 셀을 선택하고 배경을 흰색으로 설정합니다.
2. 테이블 자동 포맷
1. 먼저 양식을 만든 다음 선택합니다.
2. 메뉴에서 명령/테이블 포맷을 선택합니다. 미리 설정된 테이블 스타일 중 일부를 선택할 수 있습니다.
삼위 일체 픽셀 구분 막대
1. 폭이 200 픽셀이고 테두리 여백이 0 인 1 행 1 열의 표를 삽입합니다.
2. 테이블을 선택하고 테이블 높이를 1 픽셀로 설정한 다음 배경 색상 (원하는 선 색상) 을 설정합니다.
3, 코드 및 디자인 창, 코드로 전환
일곱째, 양식을 사용하여 완전한 페이지를 작성하십시오.
웹 페이지의 맨 위 (일반적으로 아이콘, 광고 및 탐색 메뉴 포함)
1. 폭이 760 픽셀이고 테두리와 여백이 0 인 1 2 열 표를 만듭니다.
2. 테이블을 선택하여 정렬을 가운데 맞춤으로 설정하고 배경색을 #3366CC 로 설정합니다.
3. 왼쪽 셀에 커서를 놓고 수평 정렬을 왼쪽 정렬로 설정하고 수직 정렬을 위 정렬로 설정한 다음 이미지를 삽입합니다. 일반 웹사이트의 로고들은 모두 여기에 꽂혀 있습니다.
4. 오른쪽 셀에 커서를 놓고 너비를 500 으로 설정하고, 수평 가운데 정렬, 수직 가운데 정렬, 그림 (일반적으로 웹 광고, banner) 을 삽입합니다.
5. 방금 완성한 표 뒤에 커서를 놓고 /table 을 삽입하여 폭이 760 픽셀이고 테두리와 여백이 0 인 1 행 1 열 테이블을 만듭니다.
6. 새로 생성된 테이블을 선택하고 정렬을 가운데로 설정하고 배경색을 #005 173 으로 설정합니다.
7. 여러 이미지를 탐색 막대 메뉴로 테이블에 차례로 삽입합니다.
웹 페이지의 중간 부분 (왼쪽에는 열 목록, 가운데에는 웹 사이트 뉴스, 오른쪽에는 열 목록)
1. 탐색 막대 테이블 뒤에 /table 을 삽입하여 폭이 760 픽셀이고 테두리와 여백이 0 인 1 행 3 열 테이블을 만듭니다. 배열 모드를 가운데 정렬로 설정하고 배경 색상을 #FFFFFFF 로 설정합니다.
2. 왼쪽 셀에 커서를 놓고 너비를 18% 로 설정하고, 수평으로 중심에 정렬하고, 수직으로 위쪽으로 정렬한 다음 이미지와 탐색 막대를 삽입합니다.
3. 방금 삽입한 그림 위에 커서를 놓고 /table 을 삽입하고 12 행 1 열, 폭이 90% 인 테이블을 삽입합니다. 셀 간격을 1 으로 설정하고 배경색을 #CCCCCC 로 설정합니다.
4. 커서를 테이블의 첫 번째 셀에 놓고 높이를 20 으로, 배경색을 #FFFFFF 로 설정합니다. 삽입/이미지, 탐색 텍스트 앞에 점을 삽입합니다. 왼쪽 열 분류 목록이 완료되도록 다른 1 1 셀도 설정합니다.
5. 주 테이블의 가운데 셀에 커서를 놓고 너비를 66% 로 설정한 다음 수평으로 가운데 정렬하고 수직으로 위쪽으로 정렬한 다음 /image 를 삽입하고 탐색 막대를 삽입합니다.
6. 이미지 위에 커서를 놓고 /table 을 삽입하고 4 행 1 열, 폭이 95% 인 테이블을 삽입합니다. 셀 간격을 1 으로 설정하고 배경색을 #CCCCCC 로 설정합니다.
7. 테이블의 첫 번째 셀에 커서를 놓고 마우스를 끌어 네 개의 셀을 모두 선택합니다. 높이를 60 으로 설정하고 배경색을 #FFFFFF 로 설정합니다.
8. 주 테이블의 오른쪽에 있는 셀에 커서를 놓고 너비를 16% 로 설정하고, 수평 가운데 정렬, 수직 위 정렬, 삽입/이미지, 탐색 막대 삽입 등을 수행합니다.
9. 이미지 위에 커서를 놓고 /table 을 삽입하고 7 행 1 열, 폭이 90% 인 테이블을 삽입합니다. 간격을 1 으로 설정하고 배경색을 #CCCCCC 로 설정합니다.
10, Ctrl 키를 누른 채 방금 삽입한 테이블의 1, 3, 5, 7 셀을 클릭한 다음 높이를 55 로 설정하고 배경색을 #FFFFFF 로 설정합니다.
1 1. 두 번째, 네 번째 및 여섯 번째 셀을 선택하고 높이를 6 으로 설정하고 배경색을 #FFFFFF 로 설정합니다.
12. 소스 코드 창으로 전환하여 셀 2, 4, 6 에서 공백 기호'' 를 삭제합니다.
웹 페이지 맨 아래 (일반적으로 저작권 정보 등 관련 내용 포함)
1. 주 테이블에 커서를 놓고 /table 을 삽입하여 2 행 2 열, 760 픽셀 폭, 0 테두리 및 여백이 있는 테이블을 만듭니다.
2. 테이블을 선택하여 정렬을 가운데 맞춤으로 설정하고 배경색을 #3366CC 로 설정합니다.
3. 테이블의 1 행 왼쪽 셀에 커서를 놓고 너비를 50% 로 설정하고, 수평 정렬을 기본값으로 설정하고, 수직 정렬을 기준선으로 설정하고, 배경 색상을 #FFFFFF 로 설정한 다음 저작권 정보를 입력합니다.
4. 커서를 테이블의 1 행 오른쪽 셀에 놓고 /image 를 삽입하고, 필렛 이미지를 삽입하고, 그 뒤에 단어 Email 을 입력하고, 크기와 색상을 1 및 #FFFFFF 로 설정합니다.
5. 개체/텍스트 필드를 삽입/구성합니다. 임의의 폭의 텍스트 필드를 삽입합니다.
6. 삽입/이미지, GO 이미지 삽입.
7. 페이지 속성을 설정합니다. 메뉴 [수정/페이지 속성] 을 클릭하고 [제목] 열에 제목을 입력한 다음 배경 이미지를 선택하고 위쪽 테두리를 0 으로 설정합니다.
* * * 전체 웹 페이지를 하나의 테이블로 조합하면 브라우저에서 페이지를 읽는 시간이 단축됩니다. 을 눌러 섹션을 인쇄할 수도 있습니다 브라우저에는 전체 테이블을 읽은 후의 내용만 표시되므로 전체 테이블에 프레임을 넣지 않는 것이 좋습니다.
여덟 번째, 레이아웃 테이블을 사용하여 완전한 페이지를 만듭니다.
1. 삽입/레이아웃을 클릭하면 안에 있는 레이아웃 보기 버튼이 레이아웃 보기 상태 (기본값: 표준 보기) 로 전환됩니다. 메뉴에서 뷰/테이블 뷰/배치 뷰를 사용하여 를 시작할 수도 있습니다.
2. 먼저 "레이아웃 테이블 그리기" 버튼을 클릭한 다음 페이지에 드로잉과 비슷한 레이아웃 테이블을 만듭니다.
3. 앞의 예와 같이 페이지의 맨 위, 중간, 맨 아래에 큰 표를 그립니다.
4. 레이아웃 셀 그리기 버튼을 다시 클릭하고 이미 그린 레이아웃 테이블에 레이아웃 셀을 그립니다.
5. 표준 보기로 돌아가서 분할 테이블에 중첩된 작은 테이블을 삽입하고 페이지를 미세 조정하면 전체 페이지 디자인을 완료할 수 있습니다.
* * * * * 전체 페이지를 하나의 큰 레이아웃 표에 두는 것을 주의해라. 이런 웹 페이지는 브라우징이 매우 느리기 때문이다. 페이지의 레이아웃과 내용에 따라 레이아웃 테이블을 여러 개 분할한 다음 레이아웃 셀을 각각 삽입해야 합니다.
아홉, 레이어 사용
1, 삽입/도면층을 클릭합니다. 아이콘을 클릭하고 마우스를 끌어 레이어를 만들 수도 있습니다.
3. 생성한 레벨을 선택하고 속성 패널을 조회합니다. 도면층 번호 및 레이블에 대해 기본값을 사용합니다.. 프로그래밍은' 층 번호' 가 필요한데, 우리는 지금 일반적으로 사용하지 않는다. "위" 는 페이지의 위쪽 여백으로부터의 거리입니다. "왼쪽" 은 왼쪽 경계로부터의 거리입니다. Z 축은 레이어의 순서이며 더 큰 숫자가 더 작은 숫자 위에 겹쳐져 있습니다.
* * * * 색상이 설정되지 않은 경우 레이어는 투명합니다.
4. 중간층의 왼쪽 위 모서리에 있는 작은 상자를 클릭하여 레이어를 자유롭게 드래그하면 크기도 조정할 수 있습니다.
5. 오버플로우 표시줄에서 텍스트가 레벨 크기보다 크면 표시 (초과 부분은 여전히 표시됨), 숨기기 (초과 부분 숨김), 스크롤 (초과 여부에 관계없이 스크롤 막대 표시) 및 자동 (초과 시에만 스크롤 막대 표시) 이 표시됩니다.
6. 메뉴 창/기타/도면층을 클릭하여 도면층 관리 창을 엽니다. 레이어 이름과 z 축 값을 수정하거나 눈 아이콘을 클릭하여 레이어를 표시하거나 숨길 수 있습니다. 또 다른 옵션은 겹침을 방지하는 것입니다.
7. 레이어 정렬. Shift 키를 누른 채 여러 레이어를 동시에 선택합니다. 그런 다음 수정/정렬을 사용하고 여기에 있는 옵션을 사용합니다.
8. 레이어를 중첩합니다. (1) 먼저 문서에 레이어를 삽입합니다. ⑵ 커서를 이 레이어에 놓고 계속 한 레이어를 삽입하여 중첩된 레이어를 얻습니다. (3) 안쪽은 하위층이라고 하고 밖은 모층이라고 합니다. Z 축 순서는 같습니다. 상위 레이어를 드래그하면 하위 레이어도 상대적으로 이동합니다. 하위 레이어를 이동해도 상위 레이어는 함께 이동하지 않습니다.