홈페이지 만들기

개요

안녕하세요.
이번 강좌에서 이미지 타이틀, 로그인, 회원가입, 마이페이지 등을 만들어 보도록 하겠습니다.

이미지 타이틀 (iFont)

홈페이지 제작하면서 이미지 수정은 정말 귀찮고 시간도 많이 소요 됩니다.
이를 최소화 하기 위해 솔루션에서 이미지 글자를 생성할수 있도록 iFont 기능을 제공 하고 있습니다.


관리자 모드 상단에 iFont를 클릭 해주세요.


새창이 열리면 "CEO 인사말" 입력하고 사이즈 및 폰트를 적당히 수정 하시기 바랍니다.
(만약 따로 폰트를 가지고 계신다면 FTP에 파일을 업로드 후 폰트경로를 입력하시면 자동으로 인식 됩니다. ^^)

이렇게 간단하게 텍스트만 입력하면 바로 이미지로 생성되는것을 확 인 할 수 있습니다.
이제 홈페이지에 바로 적용 시켜 보도록 하겠습니다. [샘플소스A]를 복사합니다. ( Ctrl + C )


[디자인관리 > 고급 디자인 관리 > 추가 페이지 관리]으로 이동 해서 "CEO 인사말"을 아래와 같이 수정 합니다.

<img src="{@echo image_font('CEO 인사말','400','100','32','#000000','NanumBarunGothicBold.ttf')@}" alt="CEO 인사말"/>


이런 방식으로 나머지 페이지도 모두 넣어줍시다.
iFont 최대 장점은 텍스트로 바로 수정 할 수 있기 때문에 빠르게 수정 할수 있으며, 새로운 글자도 위 문법에 맞추서 작성만 해도 바로 이미지 처리가 되기때문 입니다.

<img src="{@echo image_font('오시는길','400','100','32','#000000','NanumBarunGothicBold.ttf')@}" alt="오시는길"/>
<img src="{@echo image_font('제품소개','400','100','32','#000000','NanumBarunGothicBold.ttf')@}" alt="제품소개"/>
<img src="{@echo image_font('견적문의현황','400','100','32','#000000','NanumBarunGothicBold.ttf')@}" alt="견적문의현황"/>
<img src="{@echo image_font('방문 상담원 소개 ','400','100','32','#000000','NanumBarunGothicBold.ttf')@}" alt="방문 상담원 소개 "/>
<img src="{@echo image_font('제휴문의','400','100','32','#000000','NanumBarunGothicBold.ttf')@}" alt="제휴문의"/>


ifont 사용 예시 : http://uany04.anybuild.co.kr/add/sub1_1

로그인 / 로그아웃 만들기

앞장에서 설명 드렸들이 기본적이 프로그램이 섞여 있는 페이지 같은 경우에는 [세부화면 디자인]에서 찾을수 있으며, 프로그램 기능이 전혀 없는 일반 디자인 페이지는 [추가 페이지]에서 직접 만드시면 됩니다.
로그인 페이지 역시 프로그램이 섞여 있기 때문에 [세부화면 디자인]에서 찾으셔야 합니다.


스킨은 "메인 스킨"을 선택하고 페이지디자인 은 [phpx]SSL 보안 로그인 (radio)를 선택하고 "나만의 디자인으로 복사"를 실행 합니다.
복사 후 iFont를 기능을 활용하여 타이틀 이미지 수정 합니다.
그리고 하단부분에 주문서 조회 기능이 들어가 있는데, 이부분은 쇼핑몰 전용 기능이니 주석 또는 삭제 처리 하도록 합시다.
이제 홈페이지 접속 해보시면 아주 손쉽게 로그인 페이지가 만들어 졌습니다.

http://uany04.anybuild.co.kr/shop_login/login_form.htm


PS. 보안서버 로그인은 원칙상 도메인별로 신청 후 사용가능(년 11만원) 하지만 애니빌드 솔루션에는 무상으로 제공 되고 있으므로 별도의 절차 없이 위 설정만으로도 자동 셋팅 됩니다.


이제 실제 홈페이지에 링크를 걸어 보도록 하겠습니다.
[디자인관리 > 고급 디자인 관리 > 스킨 관리]으로 가셔서 "메인스킨", "서브스킨" 둘다 아래와 같이 수정 해주세요.

<p style="text-align:right">
	<a href="/main">홈</a> |
	<!--@if(!$_SESSION[mem_id])-->
		<a href="/login">로그인</a> | <a href="/join">회원가입</a>
	<!--@else-->
		<a href="/logout">로그아웃</a> | <a href="/shop_login/mem_form.htm?mode=edit">회원정보수정</a>
	<!--@end-->
	| 카카오톡 | 카카오스토리 | 페이스북
</p>


수정 방법에 대해서 알려드리겠습니다.
링크주소를 링크 걸려고 하면 막상 어떤 주소를 걸어야 할지 모를때가 있습니다 이런경우 각 html 소스 입력창 하단에 [link URL] 이라는 버튼이 있습니다.

이 버튼을 통해서 링크 주소를 알아낼수 있으니 참고 하셔서 직접 연결 해주셔야 합니다.
문법을 보시면 <!--@if(!$_SESSION[mem_id])--> 이런 생소한 문법을 보실 수 있습니다.
문법설명은 여기서 하는것보다 아래 매뉴얼을 통해 익히시는게 좋을것 같습니다.
http://manual.anybuild.co.kr/add/basic1_01b


이렇게 작업 했다면 아래와 같이 로그인 했을때와 로그아웃 했을때 따로 작동 되는것을 확인 할수 있습니다.



상단 로그인 부분이 완성 되었다면 좌측 로그인 박스도 만들어 보겠습니다.


[디자인관리 > 고급 디자인 관리 > 그룹디자인 관리]으로 이동 해서 [프로그램마법사 생성]을 클릭합니다.
[미니로그인박스] 탭을 선택 후 "로그인박스- 기본형"를 선택 해서 생성 합니다.



필자는 {GROUP_loginbox} 라는 그룹디자인으로 생성 하였습니다. 생성된 그룹디자인을 "서브 스킨"에 삽입하시기 바랍니다.


이제 홈페이지로 접속해보시면 상단 / 좌측에 로그인 기능을 추가 되었습니다.

회원가입 만들기

회원가입 페이지도 프로그램이 섞여있는 페이지 이므로 [세부화면 디자인]에 있습니다.
아래와 같이 설정 하고 ifont 및 원하시는데로 디자인을 수정 해주세요. (회원가입약관, 회원가입폼, 회원가입완료 3페이지 모두 동일하게 설정 해주세요 )




모두 수정 하였다면 홈페이지 접속해서 확인해보시기 바랍니다.
http://uany04.anybuild.co.kr/shop_login/mem_agree.htm

디자인 페이지는 완성 되었으니 회원가입 항목을 설정해 보도록 하겠습니다.

[회원관리 > 회원관리 > 가입양식관리]으로 가셔서 원하는 항목으로 설정하시기 바랍니다.
(이 부분은 따로 설명하기 보다는 그냥 편하게 이것저것 만져보시는게 더 빨리 이해 되실것 같습니다. 누구나 쉽게 설정 할수 있도록 되어 있으니 부담없이 천천이 만져보시기 바랍니다.)

다시 회원가입 및 로그인 / 로그아웃 테스트 해보시기 바랍니다.

마이페이지 만들기

회원정보 수정, 패스워드 변경, 회원탈퇴, 로그아웃등 페이지를 만들어 보도록 하겠습니다.


[디자인관리 > 전문가 환경설정 > 네비게이션 마법사]으로 이동 해서 대메뉴 [마이페이지] 를 생성하고 링크주소를 # 을 입력하세요. 이때 메뉴 출력 여부는 '출력안함'으로 설정 해주셔야 합니다.
만약 출력함으로 설정시 홈페이지 네비게이션에 출력 되는데 마이페이지는 굳이 출력 할 필요가 없기 때문입니다.


이제 서브 메뉴를 아래와 같이 셋팅해주세요. 이때 링크주소를 모르시면 [세부페이지] 탭안에 해당 페이지를 클릭 하면 자동으로 셋팅 됩니다.


이제 각 페이지별로 스킨을 선택 해줘야 합니다. 패스워드변경은 팝업창으로 되어 있으므로 스킨 선택하실 필요가 없습니다.

[디자인관리 > 고급 디자인 관리 > 세부 화면 디자인]으로 가셔서 회원정보 수정, 회원탈퇴 페이지의 스킨을 "서브 스킨"으로 수정 하세요.

회원마이페이지는 내가 작성한 게시글, 이머니 내역, 포인트내역등 많은 페이지가 존재 합니다.
페이지 구성 방식은 모두 동일 하므로 필요하면 추가 셋팅해보시기 바랍니다. ^^
이렇게 해서 회원가입 관련 작업이 마무리 되었습니다.
수고 하셨습니다.


top