마법사와 템플릿은 Frontpage에서 웹 사이트를 만드는 데 효과적인 도구입니다. 3장에서는 웹 사이트와 페이지를 대화형으로 생성하는 마법사를 살펴보았습니다. 이 장은 템플릿에 관한 것입니다. 내장된 템플릿을 기반으로 웹 사이트와 웹 페이지를 만드는 방법뿐만 아니라 자신만의 템플릿을 개발하는 방법도 배우게 됩니다.
웹사이트 템플릿
Frontpage는 웹 사이트와 웹 페이지를 모두 만들기 위한 템플릿을 제공합니다. 먼저 웹 사이트 템플릿을 살펴보겠습니다. 프론트페이지를 다운로드하세요. 다운로드 프로세스가 완료되면 웹 하위 메뉴 명령인 새 파일 메뉴를 활성화합니다. 새로 만들기 대화 상자가 열리면 웹 사이트 마법사 및 템플릿 목록이 표시됩니다. 총 5개의 템플릿이 있습니다.
한 페이지 웹;
고객 지원 웹(고객 지원 웹 사이트)
빈 웹(빈 웹 사이트);
페르소나] 웹(개인 웹사이트);
프로젝트 웹.
한 페이지 웹 템플릿
기본적으로 새로 만들기 대화 상자에는 한 페이지 웹 템플릿이 선택되어 있습니다. 이 템플릿을 사용하면 웹 사이트 폴더 구조가 생성되고 하나의 페이지(홈 페이지)가 생성됩니다. 다음으로 다음을 수행합니다.
행위:
1. 새로 만들기 대화 상자의 새 웹 위치 지정 필드에 웹 서버 이름과 웹 사이트 이름(예: 한 페이지)을 입력합니다. 확인을 클릭하세요.
2. 노드의 구조를 보려면 보기 패널에서 동일한 이름의 제어 요소를 클릭하여 폴더 보기 모드로 이동합니다(그림 4.1).
3 홈 페이지 파일(기본값 htm)을 두 번 클릭하여 페이지 B 보기 모드에서 엽니다. 이 순간페이지가 비어 있습니다. 페이지 제목 "홈페이지"를 입력하세요.

그림 4.1. 폴더 보기의 한 페이지 템플릿을 기반으로 하는 웹 사이트

앞으로는 어떤 보기 모드에서든 웹 사이트에 새 페이지를 추가할 수 있으며 탐색 보기에서는 페이지 간 링크를 생성할 수 있습니다. 다음을 수행하십시오: 1 탐색 보기로 이동 오른쪽 창에서 홈 페이지 아이콘(색상)을 클릭합니다. 아이콘이 변경됩니다). 새 페이지를 생성하려면 표준 도구 모음에서 새 페이지 버튼을 클릭합니다. 기본적으로 새 페이지의 이름은 새 페이지 1로 지정됩니다. 이 페이지는 홈 페이지의 하위 페이지로 생성됩니다. 이런 방식으로 원하는 페이지를 생성할 수 있습니다. 2 새 페이지와 동일한 수준에서 6개의 페이지를 더 생성합니다. 1(홈 페이지 아이콘이 선택된 상태)
3. 이제 페이지 사이의 링크를 변경하려면 예를 들어 New Page 4 페이지를 선택하고 마우스 버튼을 누른 상태에서 New Page 2 페이지 아래로 끌어서 마우스 버튼을 내리십시오. 따라서 New Page 4 페이지는 New Page 2 페이지의 자식이 되었습니다. 이제 New Page 5 페이지를 New Page 2 페이지의 자식으로 만들고 New Page 6 페이지를 New Page 4 페이지의 자식으로 만듭니다(그림 4.2.)

메모
탐색 보기 모드에서는 이 모드로 전환할 때 화면에 나타나는 동일한 이름의 패널 도구를 사용할 수 있습니다. 이러한 도구 중 하나는 표시할 눈금을 선택할 수 있는 확대/축소 목록 상자입니다. 웹 사이트의 구조 이 목록에서 항목의 크기를 선택하십시오. 맞춤(크기 선택) 선택하면 웹 사이트의 모든 페이지에 대한 아이콘이 표시됩니다. 아이콘의 크기는 Frontpage 창의 영역에 따라 달라집니다. 현재 오른쪽 패널이 차지하고 있습니다(이 패널의 영역은 폴더 목록 패널과 분리되는 수직 슬라이더로 조정됩니다). 2 새 페이지와 동일한 수준에 또 다른 6개의 페이지를 만듭니다. 1 페이지(홈 페이지 아이콘은 선택된)
3. 이제 페이지 사이의 링크를 변경하려면 예를 들어 새 페이지 4 페이지를 선택하고 마우스 버튼을 누른 채 새 페이지 2 페이지 아래로 끌어서 마우스 버튼을 놓습니다. 따라서 New Page 4 페이지는 New Page 2 페이지의 자식이 되었습니다. 이제 New Page 5 페이지를 New Page 2 페이지의 자식으로 만들고 New Page 6 페이지를 New Page 4 페이지의 자식으로 만듭니다(그림 4.2).

그림 4.2. 탐색 보기에서 페이지 간 링크 변경

메모
탐색 보기 모드에서는 이 모드로 전환할 때 화면에 나타나는 동일한 이름의 패널 도구를 사용할 수 있습니다. 이러한 도구 중 하나는 표시할 눈금을 선택할 수 있는 확대/축소 목록 상자입니다. 웹사이트의 구조. 이 목록에서 크기에 맞는 항목을 선택하십시오. 선택하면 웹 사이트의 모든 페이지에 대한 아이콘이 표시됩니다. 아이콘의 크기는 현재 Frontpage 창에서 오른쪽 패널이 얼마나 많은 영역을 차지하고 있는지에 따라 달라집니다( 이 패널의 영역은 패널과 폴더 목록 패널을 구분하는 수직 슬라이더로 조정됩니다)
3. 파일 메뉴에서 웹 삭제 명령을 선택하고 삭제 확인 대화 상자에서 이 웹 전체 삭제 스위치를 활성화하여 빈 웹 사이트를 삭제합니다.
개인 웹 템플릿을 사용하면 소규모 조직이나 개인을 나타내도록 디자인된 5개의 페이지로 구성된 웹 사이트를 만들 수 있습니다. 사이트를 만들려면 다음 단계를 수행하십시오.
1. 새로 만들기 대화 상자에서 개인 웹 템플릿을 선택하고 웹 사이트의 URL을 입력합니다(사이트 이름(예: Personalweb)). 확인 버튼을 클릭하면 새로운 웹 사이트가 생성됩니다. 폴더 보기 모드로 이동하여 해당 구조를 확인하세요.
2. 오픈 홈페이지페이지 보기 모드의 노드(그림 4.3.)

그림 4 3 개인 웹 사이트 홈 페이지

이 페이지는 전체 또는 일부를 사용하거나 전혀 사용하지 않을 수 있는 요소 집합을 제공합니다. 가장 중요한 요소는 다음과 같습니다.
일반 영역 - 페이지의 상단, 하단, 왼쪽 및 (드물게) 오른쪽 가장자리에 배치되는 영역입니다. 이러한 영역은 기본 영역에 배치됩니다. 네비게이션 바(왼쪽 및 상단) 및 연락처 정보 (하단) Personulweb 홈페이지에는 상단 및 왼쪽 일반 영역이 있습니다.
페이지 머리글은 FrontPage 구성 요소인 페이지 배너입니다. 이 구성 요소는 텍스트 형식이 아닌 그래픽 이미지 형식으로 페이지에 머리글을 삽입합니다. 머리글 유형은 페이지 배너 속성 창에서 결정할 수 있습니다. 같은 이름의 상황에 맞는 메뉴 명령을 활성화합니다
페이지 제목(이 경우 홈 페이지)을 변경하려면 탐색 보기 모드에서 페이지를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 이름 바꾸기를 선택한 후 새 제목을 입력해야 합니다.
머리글 바로 아래와 페이지 왼쪽에 있는 탐색 패널은 FrontPage 구성 요소입니다. 패널 매개 변수는 탐색 Bai Pioperties 대화 상자에서 설정됩니다.

일반 텍스트는 사용자가 직접 바꿀 수 있는 텍스트입니다.
하이퍼링크는 밑줄이 그어져 있으며 웹 사이트의 페이지를 연결합니다.
배경 이미지는 페이지에 모자이크 같은 배경이나 단색 배경을 형성하는 많은 복사본이 있는 작은 그래픽 이미지입니다.
글꼴 및 텍스트 색상 등 배경 이미지, 이 웹 사이트에 할당된 주제에 정의되어 있습니다.
날짜 및 시간 - 날짜를 삽입하는 FrontPage 날짜 및 시간 구성 요소 마지막 업데이트페이지. 날짜를 두 번 클릭하면 열리는 날짜 및 시간 속성 대화 상자에서 이 구성 요소의 속성을 변경할 수 있습니다.
Frontpage 2000 로고는 홈 페이지의 오른쪽 하단에 있습니다. 모든 그래픽 편집기에서 삭제하거나 편집할 수 있습니다. 기본적으로 그래픽 편집은 그래픽 편집에 사용됩니다. 마이크로소프트 에디터이미지 작곡가. 로고를 두 번 클릭하면 편집기 창에서 처리할 수 있습니다. 기본 그래픽 편집기는 다음과 같이 변경할 수 있습니다. 도구 메뉴에서 옵션 명령을 활성화합니다. 옵션 대화 상자에서 편집기 구성 탭으로 이동합니다. 적절한 확장자를 가진 파일을 처리하는 데 사용할 수 있는 편집기 목록이 표시됩니다. 볼륨 액세스 경로 지정 그래픽 편집기, 함께 일하고 싶은 사람. 또한 이미지를 클릭하면 화면에 나타나는 그림 패널의 도구를 사용하여 이미지를 변경할 수 있습니다.

이미지 매개변수는 동일한 이름의 상황에 맞는 메뉴 명령을 활성화하여 열리는 Pictuie 속성 대화 상자에서 설정됩니다. 탐색 모드에서 웹 사이트의 다른 페이지를 열고 봅니다.
페이지 개인 웹 사이트 삭제 개인 웹 템플릿을 사용하여 개발된 웹 사이트는 보다 복잡한 웹 사이트를 위한 좋은 기반입니다. 자체 웹 사이트를 만들 때 이 점을 염두에 두는 것이 좋습니다. 프로젝트 웹 템플릿
프로젝트 웹 템플릿(프로젝트 웹 사이트)은 작업 시작부터 프로젝트에 대한 다양한 정보를 지속적으로 표시하는 데 사용되는 다중 페이지 웹 사이트(그림 4.4)를 생성하도록 설계되었습니다. 사이트에는 프로젝트 참가자 목록, 계획 및 상태, 페이지 머리글 및 바닥글, 아카이브, 토론 게시판 및 검색 엔진과 같은 정보가 포함되어 있습니다. 프로젝트 웹 템플릿을 기반으로 다음과 같이 웹 사이트를 만듭니다.
1. 새로 만들기 대화 상자에서 Project Web 템플릿을 선택하고 URT(웹 사이트 주소)를 입력합니다(예: Project와 같이 사이트 이름 지정).

그림 4.4. Project Web 템플릿을 기반으로 하는 웹 사이트

2. 탐색 패널에서 홈 페이지 아이콘을 두 번 클릭하여 페이지 보기 모드에서 홈 페이지를 엽니다(그림 4.5).

쌀. 4.5. 페이지 보기의 헤더, 탐색 및 패널이 있는 프로젝트 웹 사이트의 홈 페이지

일반지역
프로젝트 웹 사이트 페이지에는 편집할 수 있는 세 가지 일반 영역이 있습니다.
1. 상단 일반 영역에 위치한 네비게이션 바를 편집하세요. 이렇게 하려면 막대에서 먼저 한 번 클릭하여 선택한 다음 두 번 클릭하여 탐색 모음 속성 대화 상자를 엽니다.
2. 탐색 모음 속성 대화 상자의 페이지에 추가할 하이퍼링크 영역에서 하위 수준 스위치를 활성화하고 홈 페이지 및 상위 페이지 옵션을 설정합니다. 방향 및 모양 영역에서 수평 및 텍스트 스위치를 활성화합니다(그림 4.6). 마지막으로 확인 버튼을 클릭하세요.

그림 4.6. 탐색 모음 속성 대화 상자에서 설정 변경

Frontpage 창의 상태 표시줄에 해당 페이지에 대한 전체 경로가 표시되는 탐색 모음 버튼 위에 마우스 포인터를 놓으면 탐색 모음에 어떤 페이지가 연결되어 있는지 확인할 수 있습니다. 탐색 모음 버튼의 이름은 탐색 모음 속성 대화 상자의 해당 옵션을 사용하여 하이퍼링크로 연결된 페이지의 제목과 일치한다는 점을 이미 언급했습니다. 탐색 보기에서 페이지 이름을 변경하면 탐색 모음에 나타나는 이름이 변경됩니다.
3. 페이지 하단으로 스크롤합니다. 아래와 같이 하단 일반 영역을 확인합니다. FrontPage 구성 요소가 포함되어 있습니다. 날짜 및 시간 저작권 또는 기타 소유권 정보가 여기에 표시됩니다.
4. 페이지 보기에서 각각 공통 영역이 포함된 회원, 일정, 상태 및 아카이브 페이지를 열고 봅니다.
검색 및 토론 그룹
결과 프로젝트 웹 사이트에는 다음이 포함됩니다. 기능성, 텍스트 검색 및 토론 그룹과 같습니다(이 내용은 3장에서 살펴보았습니다. 이제 프로젝트 웹 템플릿을 기반으로 하는 웹 사이트와 관련하여 살펴보겠습니다.
1. 페이지 보기 모드(그림 4.7)에서 검색 페이지(search.htm)를 엽니다. 이 페이지에는 단일 필드가 포함된 양식이 포함되어 있습니다. 이 양식을 사용하면 양식에 지정된 검색 기준과 일치하는 정보에 대해 웹 사이트 문서를 검사할 수 있습니다.

그림 4.7. 프로젝트 웹사이트 검색 페이지

검색 양식은 FrontPage 구성 요소입니다. 상황에 맞는 메뉴의 양식 속성 검색 명령을 사용하면 이 구성 요소의 속성을 변경할 수 있습니다. 검색 페이지에서는 검색 기준 설정에 대한 지침을 제공합니다. 검색 페이지를 닫고 요구 사항 및 기술 자료 토론 그룹에 대한 링크가 포함된 토론(htm 토론) 페이지를 엽니다. 토론 그룹은 양식 및 FiontPage 구성 요소를 포함하는 관련(주로 주제별) 웹 페이지 그룹입니다. 이를 통해 일부 사용자는 자신의 의견과 제안을 표현하고 다른 사용자는 이에 대해 의견을 제시할 수 있습니다. 이런식으로 대화가 진행됩니다
3. 평가하기 모습 Project Web 템플릿을 사용하여 만든 웹 사이트의 페이지를 보려면 파일 메뉴의 브라우저에서 미리 보기 명령을 사용하거나 같은 이름의 도구 모음 단추를 사용하세요. 나타나는 대화 상자에서 브라우저를 선택하고 창 크기를 지정한 다음 확인을 클릭합니다. 탐색이 끝나면 브라우저와 Frontpage를 닫은 다음 Frontpage에서 Project 웹 사이트를 삭제하십시오. Project Web 템플릿을 사용하여 만든 웹 사이트는 프로젝트 정보뿐만 아니라 그날의 정보도 제공하는 데 사용할 수 있습니다. -팀이나 부서의 주간 업무.
고객 지원 웹 템플릿
고객 지원 웹 템플릿은 다양한 방법으로 사용자에게 다양한 정보를 제공하고 정보를 게시할 수 있는 웹 사이트를 만듭니다.다음 단계를 따르세요.
1. 새로 만들기 대화 상자에서 고객 지원 웹 템플릿을 선택합니다. 웹 사이트의 URL을 입력합니다(사이트 이름(예: Customer))(생성된 웹 사이트는 그림 48에 표시됨)

그림 4.8. 고객 지원 웹 템플릿을 기반으로 하는 웹 사이트

2. 페이지 보기에서 시작 페이지(홈 페이지)를 엽니다. 이 페이지에는 상단, 하단 및 왼쪽 일반 영역과 상단 및 왼쪽 탐색 모음이 포함되어 있습니다.
3. 페이지 보기 모드에서 새로운 내용 및 FAO(자주 묻는 질문) 페이지를 봅니다. 이 페이지는 잘 디자인되었으며 목적에 완전히 부합하며 텍스트, 하이퍼링크, 머리글 및 바닥글이 결합되어 있습니다.
4. 버그 페이지(Bugrep.htm)를 엽니다. 여기에는 사용자가 발생한 소프트웨어 오류를 설명하고 관련 질문을 할 수 있는 양식이 포함되어 있습니다. 이 양식수정 가능: 필드의 레이블, 크기 및 내용을 변경합니다.
5. 목록 필드 속성 창을 로드합니다. 이 요소를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 양식 필드 속성 명령을 활성화합니다. 목록 필드를 추가, 삭제, 변경하고 위아래로 이동할 수 있는 버튼이 포함된 드롭다운 메뉴 속성 대화 상자가 나타납니다(그림 4.9).

그림 4.9. 드롭다운 메뉴 속성 대화 상자

6. 드롭다운 메뉴 속성 대화 상자와 버그 페이지를 닫습니다. 고객 제안이 포함된 고객의 제안(제안, htm) 페이지를 열고 보고 닫습니다. 고객 지원 다운로드 페이지(다운로드, htm)를 엽니다. 다운로드 페이지는 사용자가 사이트에서 자신의 컴퓨터로 소프트웨어나 문서를 다운로드할 수 있도록 설계되었습니다. 이 예에서는 파일이 FTP(F-e 전송 프로토콜)를 사용하여 서버에서 클라이언트 컴퓨터로 전송됩니다. 링크 위에 마우스 포인터를 놓으면 링크가 활성화될 때 파일이 다운로드될 웹 사이트의 URL이 상태 표시줄에 표시됩니다.
7. 다운로드 페이지를 닫습니다. 토론 및 검색 페이지를 열고, 보고, 닫습니다. 여기에는 위에서 논의한 것과 유사한 토론 그룹과 검색 양식이 있습니다.
8. 브라우저에서 고객 지원 템플릿을 기반으로 하는 웹 사이트를 열고 제안(제안 제출) 및 버그(소프트웨어 작업 중 발생한 버그 설명) 페이지에서 작업합니다.
9. Frontpage로 돌아가서 보기 메뉴의 새로 고침 명령을 활성화하십시오. Buglist.htm 및 Feedback.htm 페이지를 열고 보려면 Frontpage로 이동하세요.
10. 마지막으로 고객 웹 사이트를 삭제합니다.
웹 페이지 템플릿
웹 사이트 템플릿을 기반으로 사이트는 다음과 같이 생성됩니다. 큰 금액다양한 페이지와 각 페이지의 다양한 기능. 하지만 때로는 단일 페이지를 만들어야 하는 경우도 있습니다. Frontpage는 26개의 템플릿과 1개의 페이지 생성 마법사를 제공합니다. 가장 유용한 템플릿 중 일부를 살펴보겠습니다. 템플릿을 기반으로 웹 페이지를 만드는 프로세스에는 다음 단계가 포함됩니다.
1. Frontpage에서 빈 웹 템플릿을 기반으로 새 웹 사이트를 생성합니다. 이름을 TestPages로 지정합니다. 표준 도구 모음에서 새 페이지 버튼을 클릭하여 홈 페이지를 만듭니다.
2. 페이지 보기에서 홈 페이지를 엽니다.
3. 파일 메뉴의 새로 만들기 하위 메뉴에서 페이지 명령을 활성화하면 일반 탭에 표시된 웹 페이지 템플릿 목록과 함께 새로 만들기 대화 상자가 나타납니다(그림 4.10). 우리는 다섯 가지 패턴에 중점을 둘 것입니다. 다음 템플릿을 사용하여 페이지를 만든 후 먼저 Frontpage에서 확인한 다음 브라우저에서 확인하세요.
메모
기본적으로 대화 상자에서는 일반 페이지 템플릿이 선택되어 있습니다. 이를 바탕으로 빈 페이지가 생성됩니다. 이 대화 상자는 페이지 보기 모드에서만 나타납니다. 다른 보기 모드에서 파일 메뉴의 새로 만들기 하위 메뉴에 있는 페이지 명령을 사용하면 일반 페이지 템플릿을 기반으로 한 페이지가 생성됩니다. 모든 보기 모드에서 표준 도구 모음의 새로 만들기 버튼을 클릭하면 새로 만들기 대화 상자를 로드하지 않고도 이 템플릿을 기반으로 페이지가 생성됩니다.

쌀. 4.10. 템플릿 목록이 포함된 새 대화 상자(일반 탭)

피드백 양식 템플릿
피드백 양식 템플릿은 필요한 정보를 수집하도록 설계된 양식이 포함된 페이지를 만드는 데 사용됩니다(그림 4.11). 이 양식을 피드백 양식이라고 합니다. 템플릿에 따라 여러 유형의 필드가 형성되며 이 필드에는 확인 양식 템플릿에도 사용되는 이름이 할당되고 양식의 데이터가 다음에 저장되도록 설정됩니다. 웹 사이트의 _Private 폴더에 있는 Feedback.txt 파일(파일 이름, 데이터가 파일에 기록되는 형식 및 기타 설정은 항상 양식 속성 대화 상자에서 무시될 수 있음) 사이트 이름이 TestPages이고 기본 폴더 시스템을 사용하는 경우 Feedback.txt 파일의 경로는 다음과 같습니다.
C:\InetPub\Wwwroot\TestPages\_Private\Feedback.txt.

쌀. 4.11. 피드백 양식 템플릿을 사용하여 생성된 페이지

확인 양식 템플릿
이 템플릿은 페이지의 양식에 대한 사용자 입력이 수신되었음을 입증하는 데 사용되는 확인 페이지를 만듭니다. 확인 페이지는 사용자가 웹 사이트에 데이터를 제출한 후 클라이언트 브라우저에 자동으로 로드됩니다. 양식을 만들 때 Frontpage는 자동으로 확인 페이지를 생성합니다. 당신은 만들 수 있습니다 자신의 페이지확인 양식 템플릿을 사용하여 확인합니다.
이렇게 하려면 다음 단계를 수행해야 합니다. 데이터를 전송하려는 페이지에 있는 양식을 마우스 오른쪽 버튼으로 클릭하고 나타나는 상황에 맞는 메뉴에서 양식 속성 명령을 활성화합니다. 열리는 대화 상자에서 옵션 버튼을 활성화합니다. 양식 결과 저장 옵션 창에서 확인 페이지 탭을 선택하고 확인 페이지 URL(선택 사항) 필드에 확인 페이지의 URL을 입력합니다. Frontpage의 하이퍼링크 보기에서 데이터가 제출된 양식(제출 양식)과 확인 페이지 사이의 링크를 볼 수 있습니다. 확인 양식 템플릿을 기반으로 페이지가 생성된 경우 확인 필드 FrontPage 구성 요소가 포함됩니다(그림 4.12). 이 구성 요소는 확인 페이지의 해당 양식 필드에서 전송된 데이터를 표시합니다.
확인 페이지에 확인 필드 FrontPage 구성 요소를 추가하려면 다음 단계를 따르세요. 삽입 메뉴의 구성 요소 하위 메뉴에서 확인 필드 명령을 활성화합니다. 로드되는 확인 필드 속성 대화 상자에서 확인 필드의 이름을 입력합니다. 양식 필드에서 전달된 정보가 확인 페이지에 올바르게 표시되려면 양식 필드와 확인 필드의 이름이 일치해야 합니다.

쌀. 4.12. 확인 양식 템플릿을 사용하여 생성된 페이지

검색 페이지 템플릿
검색 페이지 템플릿은 웹 사이트의 모든 페이지에 대한 정보를 검색할 수 있는 FrontPage 구성 요소 검색 양식이 포함된 페이지를 만듭니다. 이 페이지에서는 쿼리 언어 연산자를 사용하는 방법에 대한 지침도 제공합니다(그림 4.13).
Project Web 템플릿을 사용하여 만든 웹 사이트에서 TestPages 키워드를 검색한 결과가 그림에 나와 있습니다. 4.14(이 키워드가 있는 페이지 목록이 표시됩니다). 페이지를 보려면 해당 목록 항목을 클릭하기만 하면 됩니다.

그림 4.13. 검색 페이지 템플릿을 사용하여 생성된 검색 페이지

그림 4.14. TestPages 키워드에 대한 검색 결과

목차 템플릿
이 템플릿을 사용하면 목차가 포함된 페이지를 만들 수 있습니다. 이 표에는 웹 사이트의 모든 페이지에 대한 링크가 포함되어 있으며 모든 웹 페이지에 대한 빠른 탐색을 제공합니다. 목차는 브라우저에서만 볼 수 있습니다.
그림에서. 4.15. 우리가 조사한 템플릿을 사용하여 생성된 페이지에 대한 링크가 포함된 웹 사이트의 목차가 표시됩니다. 목차 속성은 삽입 메뉴의 구성 요소 하위 메뉴에 있는 목차 명령을 사용하여 로드되는 목차 속성 대화 상자에서 변경할 수 있습니다.

쌀. 4.15. 브라우저의 목차 페이지

좁고 오른쪽 정렬된 몸체 패턴
지금까지 검색 양식, 목차, 확인 필드 등 FrontPdge 구성 요소의 사용을 제공하는 템플릿을 살펴보았습니다. 레이아웃 페이지(예: 표 포함)를 기반으로 하는 템플릿이 있습니다. 텍스트와 그래픽으로 채워지도록 작성되었습니다. 이러한 페이지는 FrontPage 구성 요소를 사용하지 않습니다. 좁은 오른쪽 정렬 본문(좁고 오른쪽 정렬 본문)은 그러한 템플릿 중 하나입니다. 이 템플릿을 사용하면 다음 작업이 가능합니다. 시사새로 만들기 대화 상자의 미리 보기 영역에서 페이지 구성을 확인하세요. Narrow, Right-aligned Body 템플릿에서 생성된 페이지에는 2개의 열과 1개의 행으로 구성된 테이블이 포함되어 있습니다. 테이블의 왼쪽 셀에는 큰 그래픽 이미지가 포함되어 있으며, 오른쪽 셀에는 대체되어야 하는 의미 없는 텍스트가 채워져 있습니다. 웹 사이트 페이지를 보는 방문자는 Frontpage에서 셀을 구분하는 점선을 볼 수 없습니다. 4.16. 방법을 보여줌 이 페이지 Frontpage 미리보기 모드와 같습니다(페이지 보기 모드에서 페이지 창 하단에 있는 미리보기 탭을 클릭하세요). 이 모드셀 테두리는 표시되지 않습니다. 자신만의 템플릿 개발을 시작하기 전에 사용 중이던 TestPages 웹 사이트를 닫고 삭제하세요.

그림 4.16. Frontpage의 미리보기 보기 모드에서 좁은 템플릿인 오른쪽 정렬 본문을 기반으로 생성된 페이지

Frontpage에서 템플릿 만들기
한동안 템플릿 작업을 해왔기 때문에 아마도 어떤 종류의 Frontpage 템플릿을 갖고 싶은지에 대한 몇 가지 아이디어가 있을 것입니다.
다음으로 두 가지 템플릿을 만드는 과정을 살펴보겠습니다. 다른 유형.
템플릿 유형
실제로 템플릿은 별도로(특수 폴더에) 위치하며 다양한 웹 사이트 및 페이지를 개발하기 위한 모델 역할을 하는 노드 또는 페이지입니다. 웹 사이트 템플릿과 웹 페이지 템플릿은 다음 위치에 저장됩니다. 다른 폴더그러나 그들 사이에는 많은 유사점이 있습니다. 페이지 템플릿은 일반적으로 별도로 생성된 웹 사이트의 일부가 되는 하나의 페이지를 생성합니다. 웹 사이트 템플릿을 사용하면 하나 이상의 관련 페이지가 포함된 완전한 Frontpage 웹 사이트를 만들 수 있습니다. 모든 템플릿 파일은 Frontpage 폴더 구조의 일부인 하나의 폴더에 있습니다. 표시된 두 가지 유형의 템플릿을 생성하는 것은 일반적인 방법으로 노드나 페이지를 생성하는 것과 같습니다. 요구 사항에 따라 사이트나 페이지가 완전히 디자인되면 템플릿용으로 지정된 폴더에 배치합니다(템플릿 파일이 포함된 폴더에는 TEM 확장자가 있어야 함). 템플릿 폴더에는 웹 사이트의 HTML 파일, INF 파일(템플릿에 대한 정보 포함) 및 DIB 파일(새 창의 미리 보기 상자에 표시되는 템플릿 축소판)이 포함되어 있습니다. 일부 템플릿 폴더에는 그래픽 파일이 포함되어 있습니다.
프론트페이지 폴더 구조
Frontpage 2000을 설치하는 동안 페이지, 노드, 프레임 및 스타일 시트(폴더 이름은 각각 Pages, Webs, Frames, Css)에 대한 템플릿이 포함된 폴더가 생성됩니다. 이러한 폴더의 기본 경로는 C:\Program Files\Microsoft Onice\Templates\1033\입니다. 그림에서. Windows 탐색기의 4.17에는 Pages 폴더의 내용이 표시됩니다(각 템플릿의 파일은 TEM 확장자를 가진 별도의 하위 폴더에 있음). 컴퓨터에 Microsoft Personal을 설치한 경우 웹 서버 4.0에서는 설치 프로세스 중 기본 설정을 사용하면 해당 파일 및 폴더의 경로가 다음과 같습니다: C:\InetPub\Wwwroot\. 이 폴더는 웹 서버의 루트 폴더입니다. 여기에는 루트 웹 사이트가 포함됩니다. Frontpage에서 생성된 모든 노드는 웹 서버 루트 폴더의 하위 폴더에 배치됩니다. 루트 웹 사이트는 서버 이름만 지정하는(폴더나 페이지 이름은 지정하지 않음) URL에서 액세스되는 사이트입니다.
액세스 실행 가능 파일 Frontpage(frontpage.exe)는 기본적으로 다음 경로에 있습니다: C:\Program Files\Microsoft Office\0ffice

그림 4.17. 페이지 템플릿 파일이 포함된 Microsoft Front Page 폴더 및 Pages 하위 폴더

Windows 탐색기에서 Pages 폴더(전체 경로는 C:\ProgramFiles\Microsoft Office\Templates\1033\Pages)를 엽니다. 그런 다음 하위 폴더 중 하나(예: 1 center tern)를 엽니다. 템플릿 폴더에는 최소 3개 이상의 파일이 있어야 하며 그 중 하나는 HTML 파일입니다.이 파일 이름을 두 번 클릭하면 기본 브라우저가 이 템플릿을 기반으로 웹 사이트 페이지를 로드하고 표시합니다. 템플릿 폴더에는 INF 파일과 DIB 파일이 있는데, 그 용도에 대해서는 이미 이야기한 바 있습니다. INF 파일에 대해 좀 더 자세히 살펴보겠습니다.
INF 파일
INF 파일에는 템플릿에 대한 설명 정보가 포함되어 있습니다. INI 파일과 유사합니다. 윈도우 시스템. INF 파일은 해당 파일이 있는 폴더와 이름이 동일해야 합니다.
Pages 폴더에서 Icentertem 폴더를 연 다음 center.inf 파일 이름을 두 번 클릭합니다. INF 파일이 해당 파일을 볼 수 있는 응용 프로그램과 연결되어 있지 않으면 이를 위해 메모장 편집기를 사용하십시오. 메모장 창에는 다음 이미지와 같이 파일 요약이 표시됩니다.
INF 파일 섹션
INF 파일에는 항상 최소한 두 개의 하위 섹션(템플릿 제목과 설명)이 있는 섹션이 있습니다. 웹 사이트 템플릿 파일인 경우 하위 섹션의 정보가 새로 만들기 대화 상자(웹 사이트 탭)에 표시되고, 웹 페이지 템플릿 파일인 경우 새로 만들기 대화 상자(일반 탭)에 표시됩니다. 그림에서. 4.18. 새로 만들기 대화 상자의 일반 탭에서 단일 열 페이지 템플릿이 선택되어 있으며 이에 대한 설명은 설명 영역에 표시됩니다.
INF 파일이 생성되지 않으면 해당 템플릿 이름이 사용 가능한 템플릿 목록에 포함되지 않습니다.
INF 파일 내용의 올바른 구성을 고려해야 합니다. 큰 중요성. 섹션은 물론 제목과 설명 줄이 포함된 제목 및 설명 하위 섹션도 있어야 합니다. 섹션에서 하위 섹션 이름과 항목의 총 길이는 최대 255자일 수 있습니다. 새로 만들기 대화 상자에 완전히 표시되는 제목과 설명의 최적 길이는 각각 30자와 100자입니다.
메모
만드는 가장 편리한 방법입니다. Frontpage에 표시되는 웹 사이트 템플릿의 INF 파일에는 템플릿을 로드할 때 사용되는 추가 섹션이 포함될 수 있습니다.

그림 4.18. 새로 만들기 대화 상자(일반 탭)에서 페이지 템플릿이 선택되었습니다. 한 열 페이지 섹션

섹션(그림 419)을 사용하여 이 템플릿을 기반으로 생성된 웹 사이트의 파일 저장 구조를 정의합니다.섹션이 누락된 경우. Frontpage는 폴더에서 모든 파일을 로드하지만 하위 폴더에서는 아무것도 로드하지 않습니다. 섹션이 없더라도 TEM 폴더의 모든 JPG 및 GIF 파일은 웹 사이트의 Image 하위 폴더에 배치됩니다. 이 섹션은 다음을 원하는 경우에 필요합니다.
TEM 폴더의 하위 폴더에 있는 파일이 웹 사이트에서 사용되도록
웹사이트에 배치되어야 할 TEM 폴더에 필요한 파일을 지정합니다. (해당 섹션에 포함되지 않은 TEM 폴더 파일은 무시됩니다.)
파일이 루트 폴더뿐만 아니라 웹 사이트의 특정 폴더에 위치하도록
섹션을 사용할 때 이 템플릿을 기반으로 생성된 웹 사이트에서 사용될 모든 파일의 목록을 만들어야 합니다. 루트가 아닌 사이트의 다른 폴더에 페이지나 이미지를 배치하려면, 특정 규칙에 따라 하위 섹션의 이름과 해당 내용을 구성해야 하며, 템플릿 폴더에 대한 상대 파일 경로와 이 파일의 이름을 섹션 이름으로 사용해야 합니다. 예를 들어 이미지 폴더는 템플릿 폴더에 있고 scrnshot.gif 파일은 이미지 폴더에 있습니다. 그러면 하위 섹션 이름은 다음과 같습니다. 이미지\scrnshot.gif. 하위 섹션의 내용은 웹 사이트에 있는 이 파일의 URL이어야 합니다.

그림 4.19. INF 파일 섹션

부분
이 섹션은 FrontPage 구성 요소 대체에 사용되는 변수를 저장하도록 설계되었습니다. 이 구성 요소를 페이지에 배치하려면 삽입 메뉴의 구성 요소 하위 메뉴에서 동일한 이름의 명령을 활성화해야 합니다. 이 구성 요소는 웹 페이지에 특정 유형의 정보를 배치하는 데 사용됩니다. 예를 들면 다음과 같습니다.

회사 이름 = Exciting Travel, Inc.
회사 주소 = 1 Main St, Some Town, WA 98100
부분
섹션은 이 템플릿을 사용하여 웹 사이트를 생성한 경우 작업 보기 모드에 표시되는 작업 목록을 제공하는 데 사용됩니다. 섹션의 레코드(하위 섹션 이름 및 해당 내용)는 TaskNumber=TaskNameI 우선 순위 형식으로 표시됩니다. 작성자: URLI 주석 하위 섹션 레코드 요소는 수직 막대(하위 섹션 이름, 작업을 식별하는 고유 번호 또는 키)로 서로 구분됩니다.
이에 대한 설명은 표 4-1에 나와 있으며 사용 방법은 그림 4.20에 나와 있습니다.

그림 4.20. 즐겨찾는 세부정보" 대화 상자

표 4.1. 섹션 레코드 요소에 대한 설명 [ra^kLi"sl]

요소	설명	노트
TaskNumber(태스크 번호)	고유 번호 또는 키	예를 들어 "t01", "t02", "t03" 등입니다.
작업 이름	작업에 대한 간략한 설명	세 단어 또는 네 단어로 된 문구
우선 사항	작업의 중요성(우선순위)을 설명하는 정수	1 - 높음, 2 - 중간, 3 - 낮음
작성자(페이지를 만든 사람)	템플릿 이름	작업 세부 정보 대화 상자의 작성자 및 할당 필드에 표시됩니다.
	작업이 생성된 페이지의 URL	작업 세부 정보 대화 상자의 링크 대상 필드에 지정됨
논평	작업 설명	더 상세 설명무엇을 해야 합니까?

특별한 능력
다양한 웹 서버의 특징은 다음과 같습니다. 다른 설정기본 홈 페이지 파일 이름을 설정합니다. MSPWS를 사용하는 경우 기본적으로 Frontpage의 이름은 웹 사이트 홈 페이지인 Default.htm입니다. NCSA 서버(UNIX 서버)에서는 홈 페이지 이름이 Index, htm으로 웹사이트 접속 시 URL에서 생략 가능합니다. 예를 들어, URL http://www*fairmountain*com/wine을 입력하면 Fairmountain NCSA 서버에 있는 Wine 웹 사이트의 Index.htm 페이지로 이동됩니다. CERN 서버(UNIX 서버)에서는 일반적으로 Welcome.htm이라는 이름이고 Internet Information Server에서는 일반적으로 Default.htm이라는 이름입니다. 모든 웹 사이트 템플릿 홈 페이지 파일의 이름은 index.htm으로 지정됩니다. 템플릿으로 사이트를 만들면 Frontpage는 기본적으로 웹 서버에 설정된 이름을 홈 페이지 파일에 부여합니다. 이에 따라 홈페이지 링크가 변경됩니다. 사용하고 싶지 않다면 이 기회, 섹션의 INF 파일에 다음 줄을 입력해야 합니다(홈 페이지 이름은 변경되지 않음): NoIndexRenaming"
메모
흥미로운 점은 홈 페이지에 대한 링크를 구성할 때 해당 파일 이름(예: Default.htm)을 명시적으로 표시할 필요가 없다는 것입니다. 파일 이름 대신 "./" 문자를 사용할 수 있습니다.
이러한 문자는 웹 서버에 설정된 기본 홈 페이지 파일 이름에 해당합니다.
한 페이지 템플릿 만들기
이것은 매우 간단하게 수행됩니다. 정보가 포함된 일반 웹 사이트 페이지를 만든 다음 이를 템플릿으로 저장하면 충분합니다. 이게 다야:
1. Frontpage에 단일 페이지 웹 사이트를 만들고 이름을 템플릿으로 지정합니다. 홈 페이지를 두 번 클릭하여 페이지 보기에서 엽니다.
2. 페이지 상단에 "Home Page"라는 텍스트를 입력하고 제목 1 단락 스타일을 지정합니다. 텍스트를 선택하고 서식 도구 모음에서 가운데 ​​버튼을 클릭하면 텍스트가 페이지 중앙에 정렬됩니다.
3. 파일 메뉴에서 다른 이름으로 저장 명령을 호출합니다. 같은 이름의 대화 상자가 나타납니다. 다른 이름으로 저장 목록 상자에서 Frontpage 템플릿(*.tem)을 선택합니다. 저장 버튼을 클릭하세요. 템플릿으로 저장 대화 상자가 열립니다.
4. 새 템플릿 제목 "홈 페이지"와 페이지 이름(hometem)을 지정하고 설명 필드에 "홈 페이지 생성"과 같은 항목을 입력한 다음 확인을 클릭합니다.
5. 기본 폴더 구조를 사용하는 경우 새 템플릿 파일이 포함된 폴더 경로는 C:\Windows\Application\Microsoft\FrontPage\Pages\Pages\Hometem.tem입니다.
메모
페이지 템플릿을 생성한 후 Windows 탐색기의 페이지 폴더에서 해당 폴더를 찾을 수 없는 경우 키를 눌러 내용을 새로 고칩니다. 윈도우 창탐침.
6. Hometem.tem 폴더를 엽니다. 여기에는 페이지를 템플릿으로 저장할 때 자동으로 생성되는 세 가지 파일(HTML 파일, INF 파일, DIB 파일)이 포함되어 있어야 합니다. INF 파일 이름을 두 번 클릭합니다. 파일이 메모장 편집기에서 열립니다. 그 내용은 다음 그림과 같습니다.
7. 메모장을 닫고 Frontpage로 돌아갑니다. 파일 메뉴의 새로 만들기 하위 메뉴에서 페이지 명령을 활성화하고 로드된 새로 만들기 대화 상자에서 "홈 페이지" 템플릿을 선택합니다(그림 4.21). 버튼을 클릭하세요

새 창을 클릭하면 템플릿을 기반으로 새 페이지가 열립니다(그림 4.22).

쌀. 4.21. 새로 만들기 대화 상자에서 홈 페이지 템플릿이 선택됩니다.

쌀. 4.22. 홈 페이지 템플릿에서 생성된 페이지입니다.

주어진 예는 매우 간단합니다. 그 목적은 페이지 템플릿을 만드는 원리를 보여주는 것입니다. 나중에 개발한 흥미로운 페이지를 템플릿으로 저장하고 싶을 것입니다. 부록 B에서는 자신만의 웹 사이트 템플릿을 만드는 방법을 보여줍니다. 이 절차는 페이지 템플릿을 만드는 것보다 조금 더 복잡하지만 쉽게 익힐 수 있기를 바랍니다.

다양한 선택을 통해 인터넷 페이지 디자인의 기본 원리를 아주 쉽게 이해할 수 있는 프로그램 추가 도구복잡한 인터넷 사이트와 포털을 만드는 데 사용됩니다.

Microsoft FrontPage 프로그램에 대해 간략히 설명합니다.

이것은 웹 사이트를 디자인, 준비 및 게시하기 위한 배우기 쉽고 편리한 웹 편집기입니다. MS Office 제품군과의 통합, 친숙한 인터페이스 및 풍부한 템플릿 덕분에 이 프로그램을 사용하면 MS Word 작업의 기본 사항에 익숙한 초보 사용자라도 작업을 빠르게 익힐 수 있습니다. 동시에 FrontPage는 "인형"을 위한 솔루션이라고 할 수 없습니다. 이 프로그램은 인터넷 페이지 최적화를 위한 광범위한 기능과 다양한 도구를 제공합니다.

참고로 Microsoft FrontPage라는 이름은 2003년까지만 존재하다가 새로운 기능이 추가되면서 이름 자체가 변경되었습니다. 소프트웨어. 2007년에 FrontPage는 Microsoft Expression Web으로 이름이 바뀌었고, 2010년에는 마이크로 소프트 오피스셰어포인트 디자이너. 실제로 새 버전에는 일부 추가 사항이 추가되었지만 프로그램의 기본 모습은 그대로 유지되었습니다.

기본 프로그램 도구

일반 형태 마이크로소프트 프로그램첫 장

Microsoft FrontPage는 MS Word 도구와 공통점이 많기 때문에 많은 버튼과 메뉴 탭도 직관적이어서 페이지 생성 과정이 더 쉬워졌습니다. 많은 사람들이 이미 간단한 텍스트를 입력하고 서식을 지정하는 방법, 표를 만드는 방법을 알고 있습니다. 마이크로 소프트 워드, FrontPage에서 페이지를 편집하는 데 동일한 원칙이 사용됩니다.

오른쪽 사진이 보여요 일반적인 형태텍스트, 링크 및 그림이 포함된 페이지 템플릿을 만들 수 있는 표준 도구 세트가 있는 프로그램입니다. "보기" 탭으로 이동한 다음 "도구 모음"으로 이동하여 " 기준", "서식 지정" 그리고 " 테이블", 이러한 도구는 페이지만 만드는 데 충분합니다. 하단에서 "디자이너", "코드" 및 "보기" 탭에 주의하세요. 이 세 가지가 있습니다. 다양한 모드여기서는 생성 중인 페이지가 어떤 모습인지 항상 확인할 수 있습니다.

• Designer에서는 모든 편집 내용이 입력되고, 텍스트가 입력되고 서식이 지정되며, 그림이 삽입되고, 링크가 생성되고, 배경 및 글꼴 색상이 Microsoft Word와 동일한 방식으로 변경됩니다.
• "코드" 탭에서는 소위 HTML 코드를 볼 수 있습니다. HTML은 World Wide Web의 문서에 대한 표준 마크업 언어입니다. 대부분의 웹페이지는 다음을 사용하여 생성됩니다. HTML 언어. 이 탭에서는 페이지를 편집할 수도 있지만 이 마크업 언어를 알아야 합니다. 그러나 초보자는 생성자에서 모든 변경을 수행해야 하며 HTML에 대한 모든 변경 사항은 자동으로 발생합니다.
• "보기" 탭에서는 브라우저(예: Internet Explorer)에서 페이지가 어떻게 보이는지 직접 확인할 수 있습니다.

기타 메뉴, 버튼, 메뉴에 대한 자세한 설명 마이크로소프트 기능 FrontPage는 프로그램 도움말에 표시됩니다. 이렇게 하려면 "F1" 키를 누르세요.

FrontPage에서 페이지용 템플릿 만들기

편집기에 기본 테이블 삽입

따라서 간단한 템플릿을 생성하려면 세 개의 블록이 포함된 테이블을 삽입해야 합니다. 세 개의 블록은 간단한 표준입니다. 맨 위 블록은 사이트 이름, 두 번째 블록은 사이트 탐색 링크, 세 번째 블록은 페이지의 텍스트, 그림 및 기타 정보를 위한 것입니다. 편의상 더 많은 테이블 블록을 삽입할 수 있지만, 이러한 블록을 어떻게, 얼마나 많이, 어떤 크기로 만들 것인지는 취향의 문제입니다. 테이블을 만드는 것이 아니라 소위 "div" 요소를 페이지에 삽입하고 특정 스타일을 지정하여 블록을 만드는 또 다른 방법이 있지만 이 방법은 새로운 웹마스터를 위한 것이 아니며 이에 대해 별도의 기사를 작성할 수 있습니다.

1. 표를 삽입하려면 “표” > “삽입” > “표” 탭으로 이동하여 오른쪽 그림과 같이 필드를 입력하세요. 실제로는 자신만의 매개변수를 입력할 수 있지만 이 테이블너비가 고정되어 있으며 화면 영역의 100%까지 확장됩니다. 이렇게 하면 테이블이 브라우저에 간결하게 표시됩니다.
2. 그런 다음 삽입 후 높이가 동일하므로 세 셀을 모두 조정해야 합니다. 맨 위의 셀을 마우스 오른쪽 버튼으로 클릭하고 "셀 속성"으로 이동한 다음 높이 필드에 조건부로 "150"을 입력하고 "점" 상자를 선택합니다. 셀 크기는 150픽셀입니다. 같은 메뉴에서 셀의 배경색을 선택할 수 있고, "스타일..." 메뉴를 클릭하면 다른 셀 설정을 할 수 있습니다. 예를 들어 셀 테두리의 색상과 크기를 선택할 수 있습니다. 이것을 실험하고 결과를 확인하십시오. 셀 자체에 사이트 이름을 입력할 수 있습니다.
3. 다음으로 사이트 탐색 링크용으로 사용되는 두 번째 셀을 편집합니다. 너비를 약 40픽셀로 설정하면 충분하며 배경색, 여백 등 기타 설정도 취향에 맞게 조정합니다. 다음으로 링크 자체의 이름을 기호로 구분하여 작성합니다. 수직선또는 다른 기호(아래에서 전체 템플릿을 다운로드하여 볼 수 있음). 테스트를 선택하고 MSWord와 마찬가지로 가운데 정렬 버튼을 누릅니다. 같은 방법으로 글꼴, 글꼴 크기 및 기타 텍스트 설정을 변경할 수 있습니다.
4. 마지막 셀도 설정했습니다. 인사말을 입력할 수 있는 본문용입니다.
5. 마지막으로 "파일" > "속성" 탭으로 이동하여 사이트 이름을 입력하고 페이지의 일반 배경 및 기타 일반 설정을 변경할 수 있습니다.

이제 템플릿이 준비되었습니다. 이는 사이트의 모든 후속 페이지에 대한 프레임워크입니다. 사이트가 HTML 코드로 표시되는 모습은 다음과 같습니다.

이것이 사이트의 템플릿을 얻는 방법입니다.

< html > < head > < meta http-equiv = "Content-Language" content = "ru" > < meta http-equiv = "Content-Type" content = "text/html; charset=windows-1251"> < title >사이트 이름 < body bgcolor = "#F8F3FE" > < div align = "center" > < table border = "0" width = "800" cellspacing = "4" cellpadding = "0" height = "100%" > < tr > < td height = "150" bgcolor = "#4A4A4A" style = "border: 1px solid #000000" > < p align = "center" >< font face = "Verdana" size = "6" color = "#FFFFFF" >사이트 이름 < tr > < td height = "40" bordercolor = "#4A4A4A" style = "border: 1px solid #4A4A4A" bgcolor = "#FBFBFB" > < p align = "center" >< font face = "Verdana" size = "2" > < b >집 | < b >2 쪽 | < b >페이지 3 | < b >4페이지 | < b >5페이지 | < b >콘택트 렌즈 < tr > < td valign = "top" style = "border: 1px solid #4A4A4A" bgcolor = "#FFFFFF" >< div style = "padding: 6px;" > < font face = "Verdana" size = "2" >홈 페이지 텍스트. 여기에 인사말 텍스트를 삽입하고 사이트 전용 내용을 간략하게 작성할 수 있습니다.

이 HTML 코드는 "코드" 탭의 편집기에 즉시 삽입될 수 있으며 즉시 볼 수 있습니다. 기성 템플릿. 자신의 필요에 맞게 변경하고 편집할 수 있습니다. 여기에서는 본문이 삽입되는 위치가 필드 가까이에 위치하지 않도록 예제와 같이 들여쓰기 설정과 함께 "div" 태그로 구성된다는 점을 설명할 가치가 있습니다.

추가 템플릿

1. 또한 FrontPage 프로그램 및 기타 유사한 프로그램에는 페이지를 만드는 데 사용할 수 있는 표준 템플릿이 있다는 점을 알아야 합니다. 이러한 템플릿은 쉽게 편집할 수 있으며 필요에 맞게 템플릿을 사용자 정의할 수 있습니다. 표준 템플릿을 선택하려면 열린 창에서 "파일" 탭 > "만들기..."로 이동하여 "기타 페이지 템플릿"을 선택하세요. 여기에서 원하는 템플릿을 선택할 수 있습니다.
2. 두 번째 옵션이 있습니다. 인터넷에서 전체 템플릿을 다운로드하는 것입니다. 이런 서비스를 제공하는 사이트가 많이 있습니다. 템플릿은 유료이거나 무료일 수 있습니다. 이 템플릿 또는 해당 템플릿을 다운로드한 후 프로그램에서 편집하고 필요한 콘텐츠로 채우고 이 요소 또는 해당 요소의 스타일을 변경할 수 있습니다.

표준 테이블 및 테마 레이아웃 사용

Microsoft FrontPage는 웹 사이트 구축을 위해 미리 만들어진 테이블 레이아웃과 테마를 위한 좋은 도구를 제공합니다.

Microsoft FrontPage에는 일반 페이지나 명함 사이트를 만드는 방법을 배우는 데 도움이 되는 표준 표 레이아웃 및 테마 세트가 있다는 점을 알아야 합니다. 오른쪽 상단에는 드롭다운 메뉴가 있습니다(테이블 레이아웃과 디자인 테마를 사용한 결과도 보여주는 오른쪽 그림 참조). 클릭하면 "레이아웃"을 선택해야 하는 메뉴가 나타납니다. 테이블과 셀'을 선택하면 아래에 다양한 테이블 레이아웃이 표시되며 자신의 재량과 취향에 따라 선택할 수 있습니다. 이렇게 하면 테이블을 직접 수동으로 생성할 수 있습니다.

따라서 텍스트, 로고, 링크를 표 셀에 입력하거나 붙여넣고 동일한 메뉴로 이동하여 페이지, 링크, 페이지 디자인에 대한 다양한 테마를 선택할 수 있는 "테마" 메뉴를 선택할 수 있습니다. 배경 및 훨씬 더. 이 기회는 인터넷 페이지를 만드는 방법을 막 배우고 웹 사이트를 만드는 과정을 아주 명확하게 반영하는 사람들에게 좋습니다. 즉, Microsoft FrontPage에서는 다양한 설정을 시험해 보고 특정 페이지가 어떻게 변환되는지 명확하게 확인할 수 있습니다. 여기에서 한 가지 조언을 드릴 수 있습니다. 프로그램의 모든 기능을 연구하고 이 메뉴나 저 메뉴를 활용하는 것을 두려워하지 마세요. 각 도구에는 본격적인 페이지를 만들기 위한 고유한 속성과 목적이 있기 때문입니다.

그림 삽입 및 페이지 링크 만들기

초보 웹마스터가 페이지에 그림을 삽입하고 다른 페이지에 대한 링크를 만드는 방법을 아는 것이 중요합니다. 예를 들어 사이트 이름 텍스트 대신 사이트 로고 그림을 삽입할 수 있습니다. 이렇게 하려면 먼저 이미지를 삽입하려는 필드를 클릭한 다음 맨 위에서 "삽입" 탭 > "그림" > "파일에서"를 클릭하고 원하는 이미지를 선택한 다음 "삽입"을 클릭합니다. 이미지가 페이지에 나타날 것입니다. 이미지를 마우스 오른쪽 버튼으로 클릭하면 추가 이미지 설정이 있는 메뉴로 이동할 수 있습니다. 모든 사진은 모든 이미지에 대해 엄격하게 정의된 하나의 폴더에 있어야 합니다.

사이트의 다른 페이지로 이동하려면 사용자가 사이트의 모든 페이지를 방문할 수 있는 링크를 만들어야 합니다. 이렇게 하려면 링크에 대해 원하는 텍스트를 선택하고 "삽입" > "하이퍼링크" 탭으로 이동해야 합니다. 열리는 메뉴에서 링크가 생성되는 페이지를 지정하고 "확인"을 클릭해야 합니다. . 같은 창에는 새 창에서 링크를 열지 여부와 같은 링크에 대한 다른 설정이 있습니다. 원칙적으로는 스스로 공부할 수 있습니다.

결론

기본적으로 이러한 편집기는 서로 유사하며 유사한 기능과 메뉴를 가지고 있습니다. 마스터한 기본 설정, 다른 편집기에서 쉽게 웹사이트를 만들 수 있습니다. 이러한 원칙을 익히면 소위 CSS를 사용하여 보다 복잡한 웹 사이트 디자인 방법으로 넘어갈 수 있습니다. CSS에 대한 기사에서 그것이 무엇인지, 웹사이트 디자인을 편집하는 방법에 대해 읽을 수 있습니다.

이 "템플릿" 방법의 단점은 생성된 템플릿을 기반으로 각 페이지를 별도로 생성해야 한다는 것입니다. 소위 엔진을 이용하여 웹사이트를 제작할 때와 같이 별도의 페이지 생성이 필요하지 않을 경우, 컨텐츠 추가 시 자동으로 생성됩니다.

기사에 대해 질문이 있거나 해당 프로그램을 사용하여 웹사이트를 만드는 방법에 대해 질문이 있는 경우 포럼의 토론 스레드에서 질문할 수 있습니다.

비슷한 주제에 관한 기사

OceanTheme의 온라인 서비스는 사람들이 프리미엄 템플릿과 확장 Joomla를 구매하기 위해 상호 관심을 가지고 서로 단결할 수 있는 플랫폼입니다! 저렴한 가격으로. 서비스의 대상 고객은 개인 및 중소기업, 온라인 상점, 커뮤니티 사이트를 만드는 전문 웹 개발자 또는 블로그를 갖고 싶어하는 사람들입니다. 우리의 훌륭한 프리미엄 솔루션 컬렉션에서 누구나 자신에게 필요한 것을 찾을 수 있습니다.

우리 리소스는 주최자 풀링 역할을 하며 템플릿 및 확장 프로그램을 구매하려는 사람 수, 상품 비용, 이러한 자료에 대한 금액 및 액세스 권한을 지정합니다. 우리 웹사이트에는 템플릿과 확장 기능을 쉽게 검색할 수 있는 기회가 많이 있습니다. 직관적인 탐색, 태그 지정 시스템, 필터별 정렬 및 "북마크에 추가" 도구를 사용하면 원하는 자료를 놀라울 정도로 빠르게 찾을 수 있습니다. 또한 매일 컬렉션을 업데이트할 수 있도록 항상 최신 정보를 찾을 수 있습니다.

구독 지갑에 명시된 클럽 기간 동안 전체 자료 데이터베이스에 대한 액세스가 제공됩니다. 구독자는 구독 기간 동안 사용 가능한 모든 아카이브, 뉴스, 업데이트는 물론 기술 지원에 무제한으로 액세스할 수 있습니다.

이 사이트에서 찾을 수 있는 모든 제품은 100% GPL과 호환됩니다. 즉, 원하는 대로 제품을 변경하고 사이트 수에 제한 없이 설치할 수 있다는 의미입니다.

템플릿과 확장 기능은 사용하기 쉽고, 설치 및 구성이 쉽고, 다기능이며 다양하므로 컬렉션 덕분에 많은 시간과 비용을 절약할 수 있습니다. 이를 통해 고급 웹 개발 기술을 배우지 않고도 어떤 복잡성과 방향의 웹사이트도 만들 수 있습니다.

당사 웹사이트의 주요 기능

즉시 사용할 수 있는 다양한 기능 세트:

귀하의 비즈니스 프로젝트 또는 창의적인 아이디어를 신속하게 구현하기 위해 준비된 전문 솔루션을 얻으려면 당사 리소스의 모든 기회를 활용하십시오.

검색 도구를 사용하세요

디자인, 기능, 기타 기준에서 원하는 웹 솔루션을 빠르게 찾기 위해 고급 검색과 필터링, 쉬운 탐색 기능을 사용하세요.

즐겨찾는 자료를 항상 가까이에 두고 싶다면 "즐겨찾기에 추가"라는 독특한 기능을 사용하세요. 해당 자료는 일년 내내 별도의 섹션에서 사용할 수 있습니다.

저희 사이트에 로그인하시면 댓글을 남기고 프로모션에 참여할 수 있을 뿐만 아니라 프리미엄 액세스가 포함된 무료 구독을 이용하실 수 있습니다.

우리 클럽 멤버십에 가입하세요

클럽에 가입하면 원본 자료의 전체 카탈로그에 대한 전체 액세스 권한을 얻을 수 있습니다. 또한 수년 동안 사용할 수 있는 프리미엄 템플릿과 확장 기능이 포함되어 있습니다.

제한이나 속도 제한 없이 무료 및 클럽 구독을 통해 Joomla 템플릿 및 확장 프로그램에 적합한 것을 다운로드하세요.

사이트의 자료가 마음에 들면 의견을 남기거나 소셜 네트워크를 통해 친구들과 공유할 수 있습니다.

주제 3.3: 웹사이트 제작을 위한 애플리케이션

주제 3.4: 경제 및 정보 보호에 인터넷 활용

웹사이트 제작 프로그램

3.3. 웹사이트 제작을 위한 응용 프로그램

3.3.2. 프론트페이지 소개

웹페이지는 하이퍼텍스트 설명 언어를 기반으로 합니다. HTML 문서(하이퍼텍스트 마크업 언어). HTML은 하이퍼텍스트 문서의 내용과 형식을 정의하기 위해 태그라는 명령을 사용합니다. HTML 페이지는 특수 서식 명령(HTML 태그)이 포함된 일반 텍스트 형식의 문서입니다.

FrontPage를 사용하여 웹사이트를 만들려면 HTML을 배울 필요가 없습니다. FrontPage를 사용하면 웹 페이지에 배치할 수 있는 텍스트를 입력하고 올바른 위치에 그림을 배치하는 것이 매우 쉽습니다. FrontPage를 사용하면 일반적으로 스크립트나 DHTML 프로그램이 필요한 효과를 만들 수 있습니다.

사이트 또는 웹 사이트는 서로 관련된 관련 웹 페이지 및 파일의 집합입니다. FrontPage에는 새 웹 페이지를 만들 수 있는 사이트, 템플릿 또는 미리 디자인된 텍스트 및 그래픽 형식 집합을 만들 수 있는 마법사가 있습니다. FrontPage 마법사와 템플릿을 사용하면 다양한 유형의 사이트를 만들 수 있습니다.

각 사이트에는 기본 페이지 또는 홈 페이지라고 하는 하나의 웹 페이지가 있습니다. 홈 페이지는 사이트 방문자가 방문하는 첫 번째 웹 페이지입니다. 탐색이나 하이퍼링크를 사용하면 사용자는 사이트의 다른 페이지로 이동할 수 있습니다.

일반적으로 웹 사이트는 사이트 방문자에게 웹 페이지에 대한 액세스를 제공하는 컴퓨터인 웹 서버에서 호스팅됩니다. FrontPage를 사용하면 웹사이트를 직접 만들 수 있습니다. 파일 시스템사용자의 컴퓨터에 저장하고 준비가 되면 웹 서버에 게시합니다.

FrontPage 프로그램을 실행하면(시작 – 프로그램 – FrontPage) 프로그램 창이 화면에 나타나며 새 페이지(new_page_1.htm)가 표시됩니다. 작업 창에 시작하기 패널이 표시됩니다.

쌀. 1.

FrontPage 응용 프로그램 창은 제목 표시줄, 메뉴 표시줄, 편집 및 서식 지정 도구 모음, 단추로 구성됩니다. 빠른 선택태그(태그 편집 및 입력용), 페이지 선택 탭 단축키(페이지 간 이동용), 새 페이지가 표시되는 작업 창, 그리기 패널, 보기 모드 버튼, 56kbps의 예상 페이지 로딩 시간 표시, 크기 표시 페이지, 작업 영역.

FrontPage에서는 디자인, 코드, 분할, 미리 보기라는 네 가지 보기 모드를 제공합니다. "디자이너" 모드에서 텍스트 에디터시각적 모드에서 페이지를 생성, 편집 및 서식을 지정할 수 있습니다. 텍스트를 입력하고, 그림과 표를 추가하세요. 이 경우 HTML 언어 태그가 자동으로 추가됩니다. 배경이지만 HTML 인코딩이 화면에 표시되지 않습니다.

"코드" 모드에서는 모든 인코딩이 화면에 표시되며 HTML 코드를 직접 편집하고 새 코드를 입력할 수 있습니다. 그림은 FrontPage 편집기의 새로운 빈 페이지에 대한 HTML 코드를 보여줍니다.

쌀. 2.

"분할" 모드 - 웹 페이지가 코드 모드와 디자인 모드에서 동시에 화면에 표시됩니다. 보기 모드에서 웹 페이지는 웹 브라우저에 나타나는 것과 유사하게 보입니다.

웹 페이지 및 웹 사이트에서 작동하도록 설계된 명령은 FrontPage 프로그램의 보기 메뉴에 있습니다.

1. 페이지는 페이지의 보기 및 개발 모드입니다.
2. 폴더 – 현재 사이트의 폴더 구조를 표시합니다.
3. 원격 노드 - 인터넷 서버에 있는 노드입니다.
4. 보고서 – 웹사이트의 요약을 제공합니다.
5. 전환 – 사이트 페이지 간의 전환 구조를 표시합니다.
6. 하이퍼링크 – 현재 페이지의 링크 목록을 엽니다.
7. 작업 – 현재 사이트에 대한 작업 목록을 엽니다.

쌀. 삼.

FrontPage 응용 프로그램에서 웹 페이지 만들기

새 빈 웹 페이지 만들기

FrontPage 프로그램 창을 열 때 빈 페이지가 표시되면 이 페이지를 기반으로 웹 페이지를 개발할 수 있습니다. FrontPage 편집기를 열 때 빈 기본 창이 표시되면 새 빈 페이지를 만들려면 파일/새로 만들기 명령을 실행하고 작업 영역에서 빈 페이지를 선택해야 합니다. 응용 프로그램 창에 빈 페이지가 나타납니다. 다음으로 페이지를 개발해야 합니다. 페이지 레이아웃(구조) 수행, 텍스트, 그림 입력 등

쌀. 4.

FrontPage 템플릿을 기반으로 웹 페이지 만들기

템플릿 중 하나를 기반으로 새 페이지를 만들 수도 있습니다. 이렇게 하려면 작업 영역에서 "기타 페이지 템플릿" 명령을 선택하십시오. 범주별로 다양한 페이지 템플릿을 제공하는 페이지 템플릿 대화 상자가 화면에 표시됩니다.

쌀. 5.

PC에 있는 기존 웹페이지를 기반으로 웹페이지 만들기

컴퓨터에 있는 기존 웹 페이지를 기반으로 웹 페이지를 만들 수도 있습니다. 이렇게 하려면 작업 영역에서 "기존 페이지에서" 명령을 선택하고 나타나는 대화 상자에서 필요한 페이지를 선택합니다. 그런 다음 페이지에 필요한 사항을 변경하고 다른 이름으로 저장할 수 있습니다.

FrontPage 응용 프로그램에서 웹 사이트 만들기

새 빈 사이트를 만들거나 콘텐츠가 없는 사이트를 만듭니다.

빈 사이트를 새로 만들려면 파일/새로 만들기 명령을 실행하고 작업 창에서 "기타 웹 사이트 템플릿" 명령을 선택합니다. 웹 사이트 템플릿 대화 상자가 열리면 빈 웹 사이트를 선택하고 확인을 클릭해야 합니다. FrontPage 응용 프로그램 창에는 그림에 표시된 웹 사이트가 표시됩니다.

쌀. 6.

새 웹사이트에서 빈 홈 페이지를 만들려면 전환 모드로 이동하여 버튼을 클릭해야 합니다. 새 페이지전환 패널에서 홈 페이지가 작업 필드에 나타납니다. 상황에 맞는 메뉴를 사용하여 홈 페이지를 만들 수도 있습니다.

쌀. 7.

마우스 왼쪽 버튼으로 홈 페이지를 두 번 클릭하면 편집을 위한 디자인 모드가 열립니다(페이지 - index.htm).

쌀. 8.

다음으로 홈 페이지를 디자인한 다음(레이아웃 또는 페이지 구조 만들기, 텍스트, 그림 입력 등) 전환 모드에서 홈 페이지에 페이지를 추가할 수 있습니다. 이렇게 하려면 전환 모드에서 홈 페이지를 선택하고 전환 패널에서 새 페이지 버튼을 클릭하거나 상황에 맞는 메뉴를 사용하세요.

그림과 같이 새로운 페이지 1이 추가됩니다. 그런 다음 사이트에 필요한 만큼 페이지를 추가한 다음 페이지 이름을 바꾸고 순서를 변경할 수 있습니다. 다음으로, 각 페이지에 콘텐츠(텍스트, 표, 그림 등)를 입력해야 하며 결과는 웹사이트입니다.

쌀. 9.

FrontPage 편집기 템플릿을 기반으로 웹사이트 만들기

템플릿을 기반으로 사이트를 만들려면 파일/새로 만들기를 실행하고 작업 영역에서 웹 패키지 명령을 클릭하면 웹 사이트 템플릿 대화 상자가 열립니다.

쌀. 10.

새 사이트를 생성하려면 필요한 템플릿이나 마법사를 선택하세요.

생성된 사이트에는 레이아웃과 디자인은 있지만 콘텐츠가 없습니다. 다음으로, 이 사이트의 페이지에 적절한 텍스트, 그림, 스크립트, 카운터 및 기타 사이트 요소를 입력해야 합니다.

Frontpage는 빈 종이인 기본 페이지 템플릿부터 상당히 복잡한 3열 페이지에 이르기까지 매우 다양한 페이지 템플릿을 제공합니다. 템플릿을 사용하여 만든 페이지를 기존 사이트에 추가하면 웹 사이트를 빠르고 쉽게 사용자 정의할 수 있습니다.

템플릿을 사용하는 페이지는 Editor에서 생성됩니다.

1. 새 페이지가 위치할 사이트를 탐색기에서 엽니다. (원하는 경우 이 단계를 건너뛸 수 있습니다. 페이지를 저장한 후 기존 사이트로 가져올 수 있기 때문입니다.)

2. Editor에서 항목을 선택합니다. 만들다메뉴에서 파일.

3. 창문에서 기타 페이지 템플릿선택하다 필수 템플릿제안 목록에서 버튼을 클릭하세요. 좋아요.

귀하의 웹사이트에서 사용할 수 있는 다양한 페이지 템플릿이 제공됩니다. 템플릿은 대화 상자 왼쪽의 목록에 나열됩니다. 페이지 템플릿, 이 창의 오른쪽에는 현재 템플릿에 대한 설명과 대략적인 모양이 표시됩니다.

프레임 페이지 만들기

본 강의에서는 물리학 및 수학부의 웹페이지 제작 사례에 대해 설명합니다. 사이트 템플릿 사용을 포기하고 프레임 페이지 템플릿을 사용하겠습니다.

프레임을 사용하면 페이지를 직사각형 영역으로 나눌 수 있으며 각 영역에는 자체 페이지가 표시됩니다. 프레임 페이지에 하나 이상의 프레임을 배치할 수 있습니다. 이는 서로 다른 영역에 서로 다른 콘텐츠가 표시되는 페이지를 만들 수 있음을 의미합니다. 한 프레임의 내용을 변경한다고 해서 다른 프레임의 내용도 반드시 변경되는 것은 아니지만, 원하는 경우 한 프레임의 링크에서 액세스하는 페이지가 다른 프레임 영역에 나타나도록 할 수 있습니다.

프레임은 웹 디자이너들 사이에서 매우 인기가 있으며, 그 중 일부는 자신의 페이지를 5개, 6개 또는 그 이상의 프레임으로 나눕니다(이 구조는 사이트 로딩 속도를 상당히 느리게 할 수 있습니다!). Frontpage는 프레임 페이지당 최대 4개의 프레임을 포함하는 10개의 프레임 템플릿을 제공합니다.

프레임 템플릿 사용

1. 새 프레임 페이지를 생성하려는 사이트를 탐색기에서 엽니다.

2. Editor에서 항목을 선택합니다. 만들다메뉴에서 파일.

3. 나타나는 대화 상자에서 페이지 템플릿탭에서 템플릿을 선택하세요 프레임 페이지을 클릭한 다음 확인을 클릭합니다.

선택한 프레임 페이지의 레이아웃이 대화 상자 오른쪽에 표시되므로 미리 볼 수 있습니다.

템플릿을 선택했다고 가정해 보겠습니다. 공지사항 1개와 목차입니다.화면에 다음 내용이 표시됩니다.

메모: 원하는 템플릿을 선택한 후에는 표시되는 직사각형 영역에서 새 페이지를 클릭하여 각 프레임을 저장하세요. 이 후에야 그림 1과 같은 결과를 얻을 수 있습니다. 원하는 대로 각 프레임의 이름을 지정할 수 있지만 일반적으로 전체 페이지를 이름으로 지정합니다.색인.

2. ms FrontPage 작업의 기본 사항

마법사를 사용하여 웹 페이지를 만들지 않고 프레임 템플릿만 사용하기로 결정한 경우 텍스트 배치, 탐색 구성(하이퍼링크 삽입) 및 멀티미디어 기술 사용 방법을 숙지해야 합니다.