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에서 확인할 수 있다.

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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

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

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

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

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

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