HTML5_07장(교수용)_웹사이트제작실습_150415
Download
Report
Transcript HTML5_07장(교수용)_웹사이트제작실습_150415
HTML5 웹 프로그래밍 입문(교수용)
7장. 웹사이트제작실습
목차
7.1 웹사이트 전체 기능 구상
7.2 페이지 별 구현
7.3 CSS3를 이용한 웹사이트 스타일 설계
2
7.1 웹사이트 전체 기능 구상
7.1.1 웹사이트 전체 구성
7.1.2 인터넷 서점 사이트 기능과
페이지 구상
3
웹사이트 전체 구상
웹사이트 전체 기능 구상
웹사이트를 제작하기 위해서는 웹사이트 전체의 구성과 메뉴 구
성, 그리고 각 메뉴의 기능은 어떻게 구현할지에 대한 설계를 미리
수행해야 한다
웹사이트 제작
웹사이트 디자인과 웹 프로그래밍 등 눈에 보여지는 부분이나 동
작의 구현에 앞서 전체적인 구성에 대한 설계를 구체적으로 할 수
록 실제 구현 단계에서의 시행 착오를 줄일 수 있다
4
웹사이트 제작 단계
기능/메뉴 나열
필요한 자원 파악
웹사이트가 수행해야 하는 기능들을 나열
웹사이트의 메뉴들, 기능들, 화면에 표시해야 할 정보들에 대
해 나열하고 필요한 입력 데이터나 외부 자원에 대해 파악
기능과 메뉴를 페
이지별로 할당
HTML 문서작성
나열된 기능과 메뉴를 웹페이지별로 할당
이때 웹페이지 구현은 스타일이나 레이아웃, 꾸미기 등은 고
려하지 않고 HTML 태그와 콘텐츠만으로 구조화된 웹 문서를
작성하여 구현
CSS스타일 적용
웹사이트 디자인
CSS 스타일을 적용하여 웹문서에 레이아웃 및 표현을 적용한
다. 각 요소의 크기, 색상 및 배치 형태를 조절하게 된다. 웹사
이트 디자인을 적용하는 단계
[그림 7-1] 웹사이트의 제작 단계
5
인터넷 서점 사이트의 기능
기능
설명
구현형태/페이지
메인 화면
인터넷 서점 웹사이트의 첫 메인화면이다. 로고, 메뉴 및 로그인/
회원가입 메뉴등이 보여진다.
main.html
로그인
로그인 화면을 보여준다. 로그인 화면은 새로운 화면으로 이동하
지 않고 메인화면의 중간에 보여진다.
login.html
회원 가입
폼 위젯을 이용하여 제작된 회원가입 양식을 보인다. 새로운 화면
으로 이동하여 보여준다.
signup.html
메뉴/
국내도서
국내도서 서적 리스트를 이미지와 함께 보여준다. 새로운 화면으
domestic_books.html
로 이동하지 않고 메인화면의 중간에 보인다.
메뉴/
해외번역도서
해외번역 서적 리스트를 이미지와 함께 보여준다. 새로운 화면으
foreign_books.html
로 이동하지 않고 메인화면의 중간에 보인다.
메뉴/
음반/DVD
오디오, 비디오 자료를 이미지와 함께 보여준다. 미리듣기, 미리보
기 기능을 제공한다.
music.html
주문하기
서적 주문을 위한 폼을 보인다. 주문한 서적에 대한 합계를 보일 수
있도록 테이블 형태의 주문 양식을 사용한다.
order.html
6
메뉴와 기능 별 페이지 할당
login.html
폼 위젯사용
domestic_books.html
<img> <ul> 태그 사용
①
②
③
④
⑤
⑥
⑦
main.html
메인화면
로그인
회원가입
국내도서
해외번역도서
음반/DVD
주문하기
signup.html
폼 위젯사용
music.html
오디오/비디오
태그 사용
order.html
foreign_books.html
<img> <ul> 태그 사용
7
폼 위젯사용
테이블 태그 사용
7.2 페이지 별 구현
7.2.1 메인 페이지
7.2.2 로그인 및 회원가입 페이지
7.2.3 도서 목록 페이지
7.2.4 주문 페이지
8
메인 페이지(main.html) 구현
HTML 태그 만을 이용해서 구
현
처음에는 스타일이나 레이아웃,
배치 등은 고려하지 않고 문서
구조와 콘텐츠만을 기술하기 위
해 HTML 태그를 이용하여 각 페
이지를 구현
헤더 <header>
내비게이션 메뉴 <nav>
HTML5 기본 문서 구조 이용
아티클 <article>
각주 <footer>
9
어사이드
<aside>
메인 페이지(main.html) 구현
헤더 <header>
인터넷 서점의 이름, 로그인 관련 메뉴
내비게이션 메뉴 <nav>
국내도서, 해외번역도서, 음반/DVD, 주문하기 메뉴
아티클 <article>
메인페이지에서 보여주고자 하는 주요 내용을 표시
내비게이션 메뉴 중 하나를 누르면 해당 내용이 아티클에 나타는 방
식으로 동작하고자 한다
어사이드 <aside>
추가 메뉴 구현
각주 <footer>
연락처, 저작권, 기타 정보 등 부수적인 정보를웹사이트에 추가하고
자 할 때 사용
10
메인 페이지 실행결과
CSS 스타일
헤더
내비게이션
미적용
아티클
어사이드
각주
11
로그인 (login.html) 페이지
1 <body id="login">
2
<form>
3
<a>회원가입</a>
4
<a>아이디/비밀번호찾기</a>
5
<fieldset>
6
<span>사용자 아이디</span>
7
<input id="username" type="text"/><br/>
8
<span>비밀번호</span>
9
<input id="password" type="password"><br/>
10
<span></span>
11
<input id="login_button" type="submit" value="로그인" disabled/>
12
<input id="reset" type="button" value="취소" disabled/>
13
</fieldset>
14
</form>
15 </body>
12
회원가입 (signup.html) 페이지
13
도서 목록 페이지
국내도서 목록 페이지
domestic_books.html
도서목록을 그림 (thumbnail)과 함께 나열
나열식 태그인 <ul> 태그를 주로 사용
해외번역도서 페이지도 동일하게 구현
CSS 스타일 미적용 상태이므로 도서 목록의 배치가 순차
적임
추후 CSS 스타일 적용하여 배치 형태 변경 예정
14
국내도서 목록 페이지
1 <body class="booklist">
2
<div class="head">국내 도서</div>
3
<ul>
4
<li> <img src="images/book1.jpg"/><br/>
5
멀티미디어배움터 2.0<br/> 최윤철, 임순범<br/> 생능출판사 | 25,000원
6
</li>
7
<li> <img src="images/book2.jpg"/><br/>
8
(알기쉬운) 알고리즘<br/> 양성봉<br/> 생능출판사 | 24,000원
9
</li>
ㆍ
ㆍ
ㆍ
ㆍ
ㆍ
ㆍ
22 </ul>
23 </body>
15
음반/DVD (music.html) 페이지
오디오와 비디오 등 멀티미디어 자료를 보여주기 위한 페이지
<audio>, <video> 태그 이용
16
주문 (order.html) 페이지
폼의 여러 위젯과 테이블 태그를 이용해서 작성
CSS 스타일시트 미적용으로 테이블의 테두리는 나타나지 않음
17
7.3 CSS3를 이용한 웹사이트
스타일 설계
7.3.1 요소의 크기 조절
7.3.2 요소의 배치
7.3.3 스타일 효과 추가하기
18
CSS3를 이용한 웹사이트 스타일 설
계
웹사이트 스타일 설계 이전에 기본적인 웹페이지를 구현
HTML 태그들을 이용해서 문서를 구성하고 콘텐츠를 채움
CSS 스타일을 적용하여 웹페이지에 스타일 적용
요소들의 배치, 레이아웃 및 표현을 적용
각 요소의 크기, 배치 방법, 위치, 스타일, 색상 등을 조절
<link rel="stylesheet" type="text/css" href="style-size.css"/>
<link rel="stylesheet" type="text/css" href="style-layout.css"/>
<link rel="stylesheet" type="text/css" href="style-presentation.css"/>
CSS 스타일을 적용하는 단계에서는 웹문서의 구조나
콘텐츠 자체는 변경되지 않는다.
웹사이트의 디자인을 결정하는 단계
19
요소의 크기 조절
요소의 크기 조절을 위한 대표적인 CSS 스타일 속성
width, height, min-height
20
요소 크기 지정을 위한 스타일시트
ch07/style-size.css
.wrap { width:700px; min-height:600px; }
header { height: 80px; }
nav { width: 700px; }
nav a { height:20px; }
footer { height:70px; }
#login fieldset span { width: 80px; }
#signup fieldset span { width: 90px; }
#order table td, th{ width: 150px; height: 30px; }
.booklist { height: 462px; }
.booklist ul li { width: 150px; height: 180px; }
.musiclist ul li { width: 530px; }
.booklist ul li img { height: 120px; }
빈칸채우기 [실습 7-4]
{ width: 330px; }
.booklist ul li video { height: 120px; }
21
요소의 배치
요소들을 배치하기 위한 대표적인 CSS 스타일 속성들
position, left, top, text-align, margin,
padding, float, vertical-align
22
요소 위치 지정을 위한 스타일시트
ch07/style-layout.css
body { margin:0; padding:0; line-height: 1.2em; font-size: 0.75em; line-height: 1.2em; }
.wrap { margin:0; margin-right: auto; margin-left: auto; }
header { vertical-align: middle; }
.left { float: left; }
.right { float: right; }
#logo { float: left; vertical-align: middle; margin:30px 0 0 20px; }
:
:
#login fieldset span { display: inline-block; }
#signup { margin: 30px; }
#signup fieldset span { display: inline-block; vertical-align: middle; }
#signup fieldset input { vertical-align: middle; }
#order { margin: 30px; }
.booklist { margin: 10px; padding: 5px; }
.booklist .head { margin: 15px 0 0 10px; }
.booklist ul li {빈칸 채우기 [실습 7-5]
list-style-type: none;
23
요소의 크기와 배치 스타일 적용
메인 화면 (main.html)
국내도서 화면 (domestic_books.html)
24
요소의 크기와 배치 스타일 적용
로그인 화면 (login.html)
음반/DVD 화면 (music.html)
25
회원가입 화면 (signup.html)
스타일 효과 추가하기
표현(presentation)에 관련된 CSS 스타일시트를 지정
글자의 폰트, 색상, 꾸미기 효과 등
배경 색상, 배경 이미지 지정 등
대표적인 CSS 꾸미기 스타일 속성
font-family, font-weight,font-size, color, text-decoration,
border, border-color, border-style, border-width,
background-color, background-image, background-position,
list-style-type
26
요소 표현을 위한 스타일시트
ch07/style-presentation.css 예제
body {
background-color: gray;
font-size: 0.75em;
line-height: 1.2em;
}
nav a {
text-decoration:none;
color:#000000;
border-style: hidden hidden solid hidden;
border-color: transparent;
}
27
.booklist {
font-family: arial;
background-color: #f0f0f0;
background-image:
url(./images/cloud.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
border:solid 3px steelblue;
border-radius:10px;
}
.booklist ul li {
font-size: 12px;
list-style-type: none;
}
CSS 스타일을 적용한 웹사이트
실행결과 (1/2)
메인 화면 (main.html)
해외번역도서 화면 (foreign_books.html)
28
CSS 스타일을 적용한 웹사이트
실행결과 (2/2)
음반/DVD 화면 (music.html)
주문하기 화면 (order.html)
29