Chapter 4 Doking의 BLOG 홈페이지 구현
이제 모든 준비가 완료되었으므로 Doking의 BLOG 페이지 디자인과 데이터베이스 프런트엔드 구현부터 시작해야 합니다.
여기서는 웹아트 제작 지식에 대해 이야기하는 것이 아니라 Dreamweaver MX2004에서 웹사이트 내부 페이지를 구축하는 아이디어와 방법에 대해 설명합니다.
4.1.1 웹사이트 디자인 아이디어
각 웹페이지를 시작하기 전에 일반적으로 기본 페이지 디자인은 Firworks나 Photoshop과 같은 이미지 디자인 소프트웨어로 디자인해야 합니다. 그림 4-1-1은 Photoshop에서 디자인한 기본 페이지 디자인입니다.
그림 4-1-1 도킹의 BLOG 기본 페이지 디자인은
그림 4-1-1과 같습니다. ①빨간색 사각형 원으로 표시된 부분은 현재 웹 페이지의 왼쪽 열입니다. 다음 장에서 하나씩 추가되는 내용이며, 일련번호 ②에서 빨간색 사각형 원으로 표시된 부분이 웹사이트의 네비게이션 바인데, 이는 Chapter에서 구축한 dkblog.mdb 데이터베이스의 LM 테이블에서 동적으로 생성되는 것입니다. 3. 기본 아이디어가 명확해진 후 웹사이트용 템플릿 구축을 시작하세요.
4.1.2 웹사이트 템플릿 구축을 위한 디자인 아이디어
: 웹사이트 템플릿을 구축하고 웹사이트 웹 디자인을 통합합니다. 웹사이트 열 메뉴의 내용은 데이터 테이블의 동적 LM에 의해 생성되며, 이는 웹사이트 열 메뉴 내용의 수정도 용이하게 합니다.
(1) [파일] → [새로 만들기]를 열고 [새 문서] 대화 상자를 열고 "템플릿 페이지"로 "범주:"를 선택하고 "ASP.NET VB 템플릿"으로 "템플릿 페이지:"를 선택하면 결과가 나타납니다. 는 그림과 같습니다. 4-1-2와 같습니다.
그림 4-1-2 새 템플릿 대화 상자
(2) "생성" 버튼을 클릭하고 레이어를 삽입한 후 속성 창에서 ID를 "main"으로 설정하고 "왼쪽(L)"과 "상단(T)"을 변경합니다. )'를 0px로 설정하고, '너비(W)'를 100%로 설정하고, 정렬을 가운데로 설정합니다. 이는 웹 페이지를 중앙에 배치하는 것입니다.
(3) 테이블을 삽입하고 ID를 "bodyT"로 설정하고 너비를 780픽셀(기본 페이지 디자인의 너비를 기준으로 설계됨)로 설정하고 단위 셀의 여백과 간격을 0으로 설정한 후 테두리 두께를 0으로 설정합니다.
(4) "bodyT" 테이블의 두 번째 행의 수직 정렬을 위쪽으로 설정한 후, 첫 번째 열의 너비를 220px로, 첫 번째 열의 너비를 560px(너비)로 설정합니다. 할당된 열 중 (기본 페이지 디자인에 의해 할당됨)을 기준으로 열 1의 배경색을 RGB(236, 236, 236)로 설정합니다.
(5) "bodyT" 테이블의 첫 번째와 세 번째 행에 해당 배경 이미지를 삽입하고, 첫 번째 행의 세로 정렬을 아래쪽으로, 가로 정렬을 오른쪽으로 설정합니다.
(6) 필요에 따라 제목, 글꼴 크기, 연결 글꼴 색상 또는 색 구성표를 디자인할 수도 있습니다.
(7) 웹사이트의 네비게이션 바를 구축합니다.
① Access2003을 시작하고 dkblog.mdb 데이터베이스를 열고 그림 4-1-3과 같이 LM 테이블의 LM 필드에 그래픽 디자인, 3D 디자인, 웹 디자인, 네트워크 프로그래밍 등 4개의 레코드를 순서대로 입력합니다. .
그림 4-1-3 LM 테이블 데이터 입력
② Dreamweaver로 돌아가서 [Server Behavior] 패널로 전환하고 "+" 버튼을 클릭한 후 그림 4-와 같이 드롭다운 메뉴에서 "Data Set"을 선택합니다. 1-4.
그림 4-1-4 데이터셋 추가
③ 팝업되는 [Data Set] 대화상자에서 데이터셋 이름을 "menuda"로 입력하고, 연결 드롭다운 메뉴에서 "dkconn"을 선택한 후, LM 테이블을 선택합니다. 테이블 드롭다운 메뉴에서 Column을 "All" 옵션으로 선택하고 정렬 드롭다운 메뉴에서 "LMID" 필드를 선택한 다음 정렬을 오름차순으로 설정하면 그림 4-1-5에 표시됩니다. :
그림 4-1-5 데이터 세트 대화 상자
④ "테스트" 버튼을 클릭하면 그림 4-1-6과 같은 대화 상자가 나타나며, 데이터 세트가 성공적으로 생성되었음을 나타내는 대화 상자가 나타나며 "확인" 버튼을 클릭하면 완료됩니다. .
그림 4-1-6 데이터 세트 테스트 대화 상자
⑤ 그림 4-1-7과 같이 [Binding] 탭으로 전환하고 데이터 세트(메뉴) 필드를 확장합니다.
그림 4-1-7 바인딩 탭
⑥ 그림 4-1-8과 같이 LM 필드를 테이블 본문 T의 첫 번째 행으로 드래그합니다.
그림 4-1-8 LM 필드 드래그
⑦ 마우스를 놓으면 첫 번째 줄에 음영 문자인 {menuda.LM}이 추가됩니다. 그 앞에 "Home Page | "를 입력한 후 " 기호를 입력합니다. | Contact Us ”, 결과는 그림 4-1-9에 표시됩니다.
그림 4-1-9 bodyT 테이블에 데이터 바인딩
⑧ 음영처리된 문자 {menuda.LM}과 다음 문자 "|"를 선택하고 팝업 메뉴에서 [삽입] 메뉴 → [응용 프로그램 개체] → [반복 영역]을 선택합니다. up [반복 영역] 대화 상자에서 그림 4-1-10과 같이 데이터 세트를 "menuda"로 선택하고 표시된 레코드를 "All Records"로 선택합니다. "확인" 버튼을 클릭하면 웹 사이트 탐색이 완료됩니다. 메뉴.
그림 4-1-10 반복 영역 대화 상자
(7) 표 본문 T의 두 번째 행과 두 번째 열에 마우스를 이동한 후 [삽입] 메뉴 → [템플릿 개체] → [편집 가능 영역]을 선택한 후 [새 편집 가능 영역]을 클릭합니다. 그림 4-1-11과 같이 대화 상자에 "mainbody"라는 이름을 입력하고 "OK" 키를 누릅니다.
그림 4-1-11 새로운 편집 가능 영역을 생성합니다.
이것으로 웹 사이트 템플릿의 초기 작업이 완료됩니다. 템플릿을 bkblog.dwt.aspx로 저장합니다.
4.1.3 홈페이지 페이지 디자인을 위한 디자인 아이디어
: 웹사이트 템플릿 구축 작업을 완료한 후 이를 이용하여 웹사이트를 구축하고 업데이트한다.
(1) 새로운 "ASP.NET VB" 동적 페이지를 생성하고, [수정] 메뉴 → [템플릿] → [페이지에 템플릿 적용]을 열고, [템플릿 선택] 팝업 대화 상자에서 "dkblog" 템플릿을 선택합니다. "를 선택하고 그림 4-1-12와 같이 "선택" 버튼을 클릭합니다.
그림 4-1-12 템플릿 선택
(2) "본체" 편집 가능 영역으로 마우스를 이동시킨 후 테이블을 삽입하고 ID를 "ztre"로 설정하면 실제로는 그림 4-1-13과 같이 디자인되어 있습니다. . 각 연구 노트에 표시되는 내용은 다음과 같습니다.
그림 4-1-13 각 스터디노트에 표시되는 내용
이 섹션에서 설명한 데이터 세트를 삽입하는 것은 이전 섹션에서 설명한 것처럼 간단하지 않습니다. 먼저 그림 4-1-13을 보세요. 각 연구 노트에는 주제, 게시 시간, 노트 카테고리(즉, 해당 노트가 속한 하위 열), 작성자(이름) 및 답변(번호)이 표시됩니다. ZT 테이블의 설계 다이어그램을 보면(3.2 절의 그림 3-2-2) LMID(분류 열의 ID)만 있고 열 이름은 없으며 LM 테이블에 연결하여 얻을 수 있습니다. YHID(출판사 ID)만 있고 저자 이름은 연결되지 않습니다. YH 테이블에서만 얻을 수 있습니다. 다른 데이터는 ZT 테이블에서 얻을 수 있습니다. "너무 복잡해요!" 사실 걱정하지 마세요. 모든 어려움은 Access에서 해결될 수 있습니다.
4.2.1 데이터 테이블 연결 쿼리 설정
(1) Access2003을 시작하고 [쿼리]를 선택하고 → [디자인 보기에서 쿼리 만들기]를 더블클릭하면 그림 4-2-1과 같이 [테이블 표시] 창이 나타납니다. :
그림 4-2-1 쿼리 연결 테이블 추가
(2) LM 테이블, ZT 테이블, YH 테이블을 순서대로 추가하면 그림 4-2-2와 같다.
그림 4-2-2 데이터 테이블 연결 뷰
(3) 그림 4-2-3과 같이 쿼리 필드를 디자인합니다.
그림 4-2-3 쿼리 필드 디자인 다이어그램
(4) 이 쿼리를 ZTRE로 저장하고 Access에서 데이터 테이블 연결 쿼리를 완성합니다.
4.2.2 데이터 세트 삽입
(1) Dreamweaver로 돌아가서 [서버 동작] 패널로 전환하고 "+" 버튼을 클릭한 후 데이터 세트 Ztre를 추가하고 방금 Access에서 생성한 ZTRE 쿼리로 테이블을 선택하고 기타 관련 항목을 선택합니다. 설정, 그림 4-2-4와 같이:
그림 4-2-4 Ztre 데이터 세트 설정
(2) [Binding] 탭으로 전환하여 데이터 세트(Ztre)를 확장하고 ztre 테이블의 "Study Note Topic"을 대체할 ZTNAME 필드를 드래그한 후 드래그합니다. "Publish" Time"을 대체할 ZTTIME 필드, "Category"를 대체하기 위해 LM 필드를 드래그하고, ZYTEXT 필드를 ztre 테이블의 두 번째 행의 빈 공간으로 드래그합니다. 다른 디자인은 그림 4-2-5에 표시됩니다.
그림 4-2-5 ztre 테이블에 데이터 바인딩
(3) [Server Behavior] 패널로 전환하면 동적 텍스트(Ztre.ZYTEXT)를 더블클릭하여 추가된 것을 확인할 수 있습니다. 그림 4-2-6과 같이 "인코딩 - HTML 인코딩" 형식"으로 형식을 지정합니다.
그림 4-2-6 동적 텍스트 형식 설정
(4) ztre 테이블의 첫 번째, 두 번째, 세 번째 행을 선택하고 이를 반복 영역으로 정의합니다. 설정은 그림 4-2-7과 같습니다.
그림 4-2-7 반복 영역 정의
이것으로 홈 페이지에 데이터 세트 삽입 및 데이터 바인딩 작업이 완료되었습니다.
(1) 그림 4-3-1과 같이 "홈"을 선택하고 [서버 동작] 패널에서 "+" 버튼을 클릭한 후 [데이터 세트 페이징] → [첫 번째 페이지로 이동]을 선택합니다.
그림 4-3-1 데이터 세트 페이징 메뉴
(2) 팝업 대화 상자에서 그림 4-3-2와 같이 데이터 세트를 Ztre로 선택하고 "OK" 키를 누릅니다.
그림 4-3-2 첫 번째 페이지로 이동 대화 상자
(3) "이전 페이지"를 선택하고 데이터 세트 페이징의 "이전 페이지로 이동"으로 정의하고 "다음 페이지"를 선택하여 데이터 세트로 정의합니다. 페이지 매김을 위해 다음 페이지로 이동"; 데이터 세트 페이지 매김을 위해 "마지막 페이지로 이동"을 정의하려면 "마지막"을 선택하십시오.
(4) "페이지 번호"를 "현재 페이지 번호:"로 변경합니다. [서버 동작] 패널에서 "+" 버튼을 클릭하고 [기록 개수 표시] → [현재 페이지 번호 표시]를 선택합니다.
(5) index.aspx를 저장하여 홈페이지 디자인을 완성한다. Access에서 해당 ZT 테이블과 YH 테이블에 몇 가지 레코드를 입력하고 IE 브라우저에서 찾아본다.(다음 장에서 특별한 지침이 없는 경우, 참고 사항은 모두 그림 4-3-3에 표시된 대로 "네트워크 프로그래밍" 열에 속합니다.
그림 4-3-3 홈페이지 탐색 이미지