프레임 나누기 - File>New>Create - Layout>Standard> Frame> left Frame - Modify>Page Properties> Background color> 자기가 백그라운드 색깔로 넣고 싶은 색 leftframe, mainframe 에.

Presentation on theme: "프레임 나누기 - File>New>Create - Layout>Standard> Frame> left Frame - Modify>Page Properties> Background color> 자기가 백그라운드 색깔로 넣고 싶은 색 leftframe, mainframe 에."— Presentation transcript:

1 프레임 나누기 - File>New>Create - Layout>Standard> Frame> left Frame - Modify>Page Properties> Background color> 자기가 백그라운드 색깔로 넣고 싶은 색 leftframe, mainframe 에 선택해넣기 혹은 Properties 의 Page property>Background color 에서 자신이 원하는 색상 선택 - community left.html 과 community main.html 과 community.html 문서 만들기

2 Table 만들기 - community event table.html 만 들기 -file>New>Create> Layout>Standard> Table, table 나타나면 자신이 만들려는 Row 숫자 정하기,Row: 6, Columns:3, Table Width:1100 pixel >OK, Table PROPERTIES 에서 Align: Center 선택 -file>save> community event table.htm 로 저장하기 -1, 2,3,4,5 번 그림은 포토샵에서 가로 세로 픽셀 미리 계산하여 만들기 - 2 번은 gif 애니메이션 1 2 3 4 5

3 Table 만들기 - community event table.html 만드는 방법 - 1 번을 드래그하고 2 의 merges selected cells(cell 병합 ) 을 클릭하여 하나의 셀로 만들기, files 에서 넣으려던 파일 끌어 넣기,3 번에 파일 높이 픽셀 넣기 - 4 번도 드래그하여 병합하여 gif 애니메이션 넣기, 옆 셀에도 해당 파일 넣기 - 5 번, 8 번도 드래그하여 셀 병합하여 해당 파일 넣기 - 6 번에는 아래 Properies 의 format 의 heading 사이즈 정하고 7 번 page properties 클릭하여 text color 정하여 text 입력하기, - file>save> community event table.htm 로 다시 저장하기 1 2 4 5 6 3 7 8

4 프레임 만들기 - community left 를 클릭하고 Layout>Standard>Table, table 나타나면 자신이 원하는 서브 메뉴만큼 Row 숫자 정하기 Row: 2, Columns:1 Table Width: 140px >OK Table PROPERTIES 에서 Align: Center 선택. - 각 Table 의 H( 높이 ) 를 40px 정도로, Table 안에 text color 정하려면 Page properties 클릭하여 text color 정하기 - 자기가 원하는 서브 메뉴 테이블 안에 쓰기 예 (Event, Talk Talk) - community main 안에 Layout>Standard>Draw AP Div( 레이어 )1 개를 추가 - AP Div( 레이어 ) 안에 미리 만들어 놓은 이미지파일 file 에서 community main.gif 끌어 넣기 - 서브메뉴 Event 드래그 >Table PROPERTIES 의 Link 클릭 > community event table.html 찾아 클릭, 3 Target : community main 클릭

5 Form 문서 만들기  Form - 사용자에게 내용을 입력받아 서버로 전송하게 하는 웹 방식. 회원가입 양식이나 게시판이 이에 속함. - Form 요소는 다양, 이 요소를 삽입하기 전에 반드시 form 정의를 시켜 오류없이 처리  Form 문서 처리순서 - 코딩시 form 정의한 후 Form 요소 삽입 - 방문자가 데이터 입력하거나 선택 - 전송 버튼을 누를 경우 실제 처리를 담당하는 웹프로그램을 통해 웹서버에 데이터가 전송되어 전송, 처리 Form: 폼 태그 삽입 Text Field: 텍스트 입 력상자 Hidden Text: 보이지 않는 설정값 삽입 Textarea: 여러 줄 텍스트 입력상자 Checkbox Checkbox Group Radio button: 반드시 하나만 선택 Radio Group: 라디오버튼을 동 시에 여러 개 선 택 List/Menu: 선택할 수 있는 목록을 삽 입 Jump Menu: 여러 개 항목 중에서 선택한 항목으로 이동 Image Field: 이미지 버튼 File Field: 파일을 선택하 여 올릴 수 있 는 버튼 Button: 입력한 내용을 서버로 전송하는 버튼 Label: 라벨 Fieldset: 관련 있는 요소들을 하나로 묶을 수 있는 테두리

6 Form 문서 만들기 - community sign up table.htm 만들기 - file>New>Create> Layout> Standard> Table,table 나타나면 Row, Columns 숫자 정하기, Row: 11, Columns:2, Table Width:1100pixel >OK, Table PROPERTIES 에서 Align: Center 선택 - page properties 클릭하여 배경색깔 선택하기, text color, text size 선택하기 - file>save>community sign up table.htm 로 저장하기 - 두 셀을 병합하여 1 번, 2 번처럼 만들기 - Last name, First name, ID, Password, Phone Number, Gender, Hobby, Birthday, My Photo Upload 등등 입력 - 완성 후 테이블 전체를 선택 후 CTRL+X - Form> 첫 번째 form 태그 삽입 - Form 태그 삽입 후 CTRL+V 1 2

7 -Last name, First name form 만들기 - 1 번에 커서 가져가서,Text Field 클릭 - 2 번에 ID 입력 예 inputname - 3 번에 charwidth:20, Maxchars:30 정도 입력, Int Val: 영어로 입력 Form 문서 만들기 1 2 1

8 -ID, Password, Phone Number form 만들기 - 1 번에 커서 가져가서,Text Field 클릭 - 2 번에 ID 입력 예 inputid - Text Property 에 charwidth:12, Maxchars:12 정도 입력, Int Val: 영어 6-12 자 입력, 3 번 위치로 커서 위치시키고, Button 클릭,ID:Inputredundancy, 아래 Button property value: 중복검사 입력 - 4 번에 커서 가져가서,Text Field 클릭 - 5 번에 ID 입력 예 inputpassword, Text Property 에 charwidth:12, Maxchars:12 입력, Type: Password 체크 - 6 번에 커서 가져가서,Text Field 클릭,ID:inputphonenumber, Text Property 에 charwidth:20, Maxchars:25 정도 입력, Int Val: 하이픈 생략 입력 - 8 번에 커서 가져가서, Radio Button 클릭, 9 번 ID: inputgender>OK Radio Button Property 에 Ini:Checked, 남이나 여 중에 하나만 체크 버튼 삽입된 후 Male 쓰기, Female 도 같은 방법으로 1 2,5,7,9 3 4 6 8

9 Form 문서 만들기 1 -Birthday, Hobby, My photo Upload form 만들기 - 1 번에 커서 가져가서,Text Field 클릭 ID 입력 예 inputyear - Text Property 에 charwidth:4, Maxchars:4 정도 입력, Field 옆에 Year 입력, -2 번 위치로 커서 위치시키고, 위 List/Menu 클릭, List/Menu property 에 type: List 체크 4 번에 List value 클릭하면,5 번 대화상자 열림, + 버튼 클릭 해서 item label 에 1 쓰고,+ 눌러 2 쓰고, 12 까지 다 쓰면 > OK> Month 입력 - Day 도 같은 방식으로 하기 - 6 번에 커서 가져가서,Checkbox group 클릭, Checkbox group 대화상자 뜨면 7 번처럼 Name 기입, Radio 위에 예 :Reading, Watching Movies 등등 + 버튼 클릭해서 item 늘릴 수도, Line breaks 체크 >OK - 8 번에 커서 가져가서,File Field 클릭,ID:inputphoto, 2 3 4 5 6 8 7

10 Form 문서 만들기 -My introduction, Submit, Reset form 만들기 - 1 번에 커서 가져가서,TextArea 클릭 ID 입력 예 inputintroduction Property 에 charwidth( 가로너비 ):80, Numlines( 줄수 ): 5 줄 정도 입력, type: Multi 체크 -2 번 위치로 커서 위치시키고, 위 Button 클릭, ID 입력 예 Submit, Submit 버튼이 생기면 다시 Button 클릭, ID 입력 예 Reset, Proterty 에 반드시 Action 란에 Reset Form 체크 해야 1 2

11 Form 문서 만들기 -form 문서 완성 후 >file>save>community sign up table.htm 로 다시 저장하기 1:Text Field 2: 중복검사 : Button 3:GENDER: Radio Button 4: 년 :Text Field, 월, 일 : List/Menu 5: checkbox Group 6: 사진 업로드 : File Field 7: 자기소개 : TextArea 8: Submit: BUTTON

12 하이퍼링크 - 회원가입 드래그 >Table PROPERTIES 의 Link 클릭 > community sign up table.html 찾아 클릭, 3 Target : _self F 클릭 - File>save> community event table.html