in 웹 디자인

웹사이트 개발과정 – 2

일단, 참고할만한 신문(개인적으로 한겨레를 추천)을 하나 준비한 후에 드림위버를 실행시킨다.

한겨레드림위버 파일을 새로 하나 만들고, 페이지 속성에서 제목/문서유형/인코딩을 변경한다.

디자인 보기 모드를 활성화 시키고, 워드프로세서 툴을 사용하던 것처럼, 편하게 글을 쓰기 시작한다. 글을 쓰다가 코드 보기 또는 분활 보기를 통해서 코드를 확인하면, 곳곳에 p 태그가 입력된 것을 확인할 수 있다.

제목글이나 목록형식, 또는 글자 강조 같은 꾸미기는 나중에 할 것이므로, 웹문서에 들어가야 할 내용들만 적당히 써준다. (한꺼번에 글을 완성할 생각보다는 차분히 내용들을 채워간다는 생각으로 글을 작성해야 한다.)

들어가야 할 내용은 저자(개발자)의 판단이 중요하다. 다른 사이트를 참고할 수도 있고, 자신이 나름대로 정리한 내용들이 있을 것이다. CSSLook.com을 기준으로 들어가야 할 내용들을 정리한 후, 드림위버로 작업한 모습은 예제1에서 확인할 수 있다.

포맷 형식 설정이제, 준비했던 신문을 보자. 가장 상단에는 제호(신문사명)이 나오고, 배포일도 나오고, 커다란 글씨로 1면 톱기사 제목이 나오고, 여러 기사들이 단으로 나눠져 있고, 큰 글씨의 제목글들도 몇가지 크기로 분류돼어 있는 것을 확인할 수 있다. 또한 광고도 있다. ^^;

드림위버에서 무작정 작성한 글을 이제 꾸며보자. html 요소를 수정하는 것으로, css는 추후에 수정할 것이다. 신문의 가장 큰 글자인 톱기사 제목을 html에서는 첫번째 머릿글이라고 하고, h1으로 표현한다. heading 1의 줄임말인 것을 유추할 수 있을 것이다. 이와 마찬가지로 2번째 큰 제목을 h2, 3번째는 h3, 이렇게 h6까지 있다.

드림위버에서 작성한 글 중에서 첫번째 제목글이라고 판단한 부분을 선택한 다음, 하단에 속성메뉴 중에서 펼침메뉴로 돼있는 포맷에서 머릿글 1을 선택하면 된다. 이런식으로 적당히 머릿글1~6을 선택해서 포맷을 수정해준다.

신문 한켠을 보면, 그날의 기사 목록이 정리돼있는 박스를 발견할 수 있다. 이를 웹페이지에서는 메뉴라고 하며, 메뉴에 들어갈 내용을 선택한 후에 드림위버 하단의 속성바에서 비순차 목록 아이콘을 누른다. 선택했던 내용들이 ul, li로 둘러쌓인 모습을 코드 보기 모드에서 확인할 수 있다.

드림위버로 목록 만들기

이와 같은 방법으로, 머릿글 1에서 6까지(가급적 3까지) 적당히 선택해서 수정하고, 목록들도 수정해준다. 목록은 순차적 목록(ol : Ordered List)과 비순차적목록(ul : Unordered List)이 있는데, 목록의 항목(li : list)들의 배열순서가 상관없는 메뉴는 ul을, 목록의 항목들의 배열순서가 상관있는 최근 글은 ol을 선택하면 된다.

이렇게 html의 수정이 끝난 결과는 예제2에서 확인할 수 있다.

댓글 남기기

  1. 나름대로 “웹표준을 준수한 웹페이지 제작이 이렇게 쉽구나”를 알려주려고 작성하고 있답니다.

    몇몇 분들의 “웹표준을 준수하려면 텍스트에디터를 써야만 해”라는 오해도 불식시켜보고 싶구요~ ^^;

  2. 요즘 사이트를 제작하고 있는데 좋은 참고가 될 것 같습니다.
    앞으로도 꾸준히 부탁드려요. 잘 읽겠습니다. 고맙습니다. ^^

  3. p.s
    지금 제작 중인 페이지를 변화 과정도 함께 계속 기록하셨으면 합니다. 그리고 최종 강의가 끝나면, 그때 결과물 그림 파일을 animation gif로 해서 바뀌는 과정을 보여주면 웹 표준에 따라 제작하면 간단한 수정만으로도 이렇게 된다! 라는 걸 뼈 저 리 게 가르쳐줄 수 있는 좋은 방법이 될 거 같습니다.

  4. yser님/ 제 글이 끝까지 간다면, yser님 때문이겠네요. ^^;

    애미메이션.gif보다 플래시를 활용한 캡쳐화면도 좋을 것 같은데요~ 글보다 쉽고 빠르게 작업할 수 있는 여러 방법을 모색중입니다. 🙂