웹사이트 리뉴얼 이야기 - 9. INTRO 페이지

본 이야기는 지인의 기업용 홈페이지의 리뉴얼을 의뢰받아서 진행하는 과정을 적은 내용이며, 가비아 크리에이터링크 서비스를 이용해서 제작하였습니다. 

 

지인 회사 웹사이트 리뉴얼 이야기는 계속 이어집니다. 

 

 

 

INTRO  페이지

흔히 인덱스(INDEX) 페이지하고 하는 웹사이트 처음 접속하면 보이는 첫 페이지입니다. 
그동안 만든 콘텐츠도 이용하고 새로운 요소도 추가하여 꾸며 보도록 하겠습니다. 

 

1. 상단 슬라이드 이미지 블록 추가

   - 이 부분은 인사말 페이지 제작할 때 만들어 두었던 것을 그대로 옮겨 두었습니다. 

특별히 손 델 부분은 없을 듯하여 그냥 유지하도록 하겠습니다.  나중에 수정/보완할 때 좌우 폭이나 이미지와 텍스트 교체 정도는 이루어질 수 있습니다.

 

 

2. 구분선 추가

구분선이 차지하는 부분이 좀 큰 듯하여 줄여 보겠습니다.  HTML/CSS 소스 수정이 필요합니다.  구분선 블록 설정 버튼 눌러 HTML/CSS 수정 버튼을 누릅니다.    템플릿 수정 창에서 css 탭을 눌러서 보면 세로 길이에 대한 속성 값이 보입니다.  height:87px;  이 부분은 PC용 웹브라우저에서 접속할 때 지정되는 길이 값이고 height:40px;  이 부분은 모바일용 웹브라우저에서 접속할 때 지정되는 길이 값인 듯합니다.  저 값을 PC용은 60, 모바일용은 30으로 수정하였습니다.  일단 이 정도로 해 놓고 나중에 전체 페이지 만들어지면 다시 다듬어 보도록 하겠습니다.

 

3. 간략한 회사 소개 및 제품페이지로 가는 이동 버튼 추가

 

콘텐츠 블록 중에 [VIEW MORE] 버튼이 들어가 있는 것을 사용해 보겠습니다.  [VIEW MORE] 버튼을 제품소개 페이지로 연결할 생각입니다.  이미지 편집해서 넣고 내용도 적당히 입력하였습니다. [제품보러가기] 버튼에는 '제품소개' 페이지로 바로 가는 링크가 걸려 있습니다.  ※ 알립니다. 위 문구에 들어간 건강 관련 문구로 인해 문제가 될 수 있어서 완성 후 수정되었습니다.  위 부분에 사용한 이미지는 shutterstock 에서 구매하였습니다.  [제품보러가기] 버튼에 링크 거는 방법은 간단합니다.  우선 '제품보러가기' 글자를 드래그하여 블록으로 지정하면 뜨는 설정창에서 링크 버튼을 누릅니다.  링크 버튼을 누르면 링크 설정창이 뜨며 가운데  '메뉴링크' 선택 후 '제품소개' 메뉴를 선택해 주면 됩니다.  설정된 링크는 수정 또는 삭제 가능합니다.

 

4. 구분선 블록 추가

     - 위에서 만들어 놓은 구분선을 그대로 복사해서 사용하겠습니다. 

 

블록 복제 후 바로 블록 이동 들어갑니다.      간단하게 구분선 블록을 추가하였습니다.  ※ 알립니다. 위 문구에 들어간 건강 관련 문구로 인해 문제가 될 수 있어서 완성 후 수정되었습니다.

 

 

5. 제품썸네일 블록 추가

   - 제품소개페이지 상단에 넣었던 썸네일 블록을 그대로 복사해서 넣을 겁니다. 

복제 후 이동합니다.   복제한 블록을 INTRO 페이지 아래쪽으로 이동 후 [저장] 합니다.  정말 간단하게 INTRO 페이지를 채워 나가고 있습니다. 날로 먹는 기분... 흠!

 

 

6. 홍보물 추가

     - 아무래도 너무 날로 먹는 듯하여 간단한 홍보문구 하나 편집해서 넣어 주겠습니다. 마침, 넘겨받은 자료에 수삼, 홍삼에 대한 설명 부분이 있네요. 이 내용을 조금 활용해 보겠습니다. 

우선 자료를 열어보니 수삼, 홍삼에 대한 설명이 되어 있습니다. 글 만 있으니 해당 이미지를 구해와야 되겠지요! shutterstock 의 도움을 받아 보겠습니다.  찾아야 할 사진은 수삼과 홍삼 단독샷입니다.  먼저 수삼 이미지입니다.  수확한 상태 그대로 흙이 묻어 있는 수삼의 모습은 이 정도면 적당할 듯 합니다.  그다음은 홍삼 이미지입니다.  이렇게 필요한 이미지는 구하였으니 적당한 크기로 조정한 후 추가하면 됩니다.  우선 적당한 블록을 추가해야 되겠죠. 콘텐츠 블록 중 두 개의 이미지와 설명을 적을 수 있는 블록을 찾아서 추가합니다.  추가 후 이미지와 내용을 수정해야 되겠죠! 이미지보관함에 두 개의 이미지를 업로드 한 다음 각각 교체하여 줍니다.  이제 설명 부분을 수정하여 줍니다.  타이틀도 하나 달아 주었습니다.  만들고 보니 이 내용은 제품소개 페이지에 들어가도 좋을 듯하군요. 고려해 보도록 하겠습니다.

 

 

7. 공지게시판 최근게시물 블록 추가

    - 제품 썸네일 아래쪽에 추가하도록 하겠습니다. 

    - 최근 게시물 블록 중 적당한 것을 골라 설치합니다. 

 

 

   - 타이틀 블록도 하나 설치해 줍니다. 

 

 

   - 타이틀 블록의 글자를 '공지사항' 으로 수정하고 크기는 24로 조정합니다. 

 

 

   - 최근게시물 블록의 설정버튼을 눌러 폰트를 기본 설정한 폰트로 변경해 줍니다. 

 

 

   - 공지사항 게시판으로 이동 후 게시판 블록 설정버튼을 눌러 공지사항 게시판의 블록 이름을 정해 줍니다. 

     블록 이름 : 공지사항
     블록 링크 : ON

 

 

 

   - 다시 INTRO 페이지로 돌아와서 최근게시물 블럭 설정으로 들어가서 '아직 연결된 게시판이 없습니다.' 라고 되어 있는 곳 아래의 [ + 추가 ] 버튼을 누릅니다. 

 

 

 

   - 조금 전 공지사항 게시판에 가서 설정해 놓은 이름이 뜹니다. 만약 공지사항 게시판의 블럭이름을 설정하지 않았다면 다른 이름으로 보일 거예요. 

     선택한 후 [저장] 누릅니다.

 

 

   - 

 

 

   - 이제 공지사항 최근게시물이 보입니다. 

공지사항 게시판에는 미리 한 개의 게시물을 등록해 두었는데요, 등록하지 않았다면 처음 공지사항 게시판 설치할 때 처럼 샘플목록이 보입니다. 

여기서, 미리 설치해 놓은 공지사항 타이틀블럭이 있으므로 최근게시물 부분에 나오는 '공지사항' 글자는 지워야 되겠죠! 그냥 둬도 상관 없다면 타이틀을 지우면 되지만 기본 설정된 글자 크기가 작아서 저는 타이틀로 대체하려고 한 것입니다. 

 

 

 

   -  최근게시물 블럭설정 들어간 후 HTML/CSS 버튼 누릅니다. 

 

 

 

   - 템플릿 수정창의 html 테그에 표시한 부분이 '공지사항' 이라는 게시판 이름이 보이는 곳입니다. 저 곳을 다음과 같이 수정합니다. 

 

 

   - 이렇게 하면 최근게시물 목록 위에 나오던 게시판 이름이 안 보일거에요.

 

 

 

 

   - 깔끔하게 안 보이고 미리 추가해 놓은 공지사항 타이틀 블럭이 잘 보입니다. 

     마지막으로 구분선 하나 추가해 줍니다. 

 

 

   - 회색의 1픽셀 두께의 가는 실선입니다. 구분선 블럭 중 맨 마지막에 있어요. 이걸 넣어주면 아랫부분의 삼 설명부분과 최근게시물 부분이 분리되어 보여집니다

 

 

   - 일단 이렇게 해 놓은 후 다 만들어 지면 위치변경도 하도 다듬기도 할 겁니다. 

 

 

---

 

INTO 페이지 제작을 마치며...

간단하게 INTRO 페이지를 구성하여 보았습니다. 

 

 

 

제일종합식품 소개

 

 

 

---