웹사이트 개발과정 – 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에서 확인할 수 있다.