1. 배경 분석
시각적 환경에서 복잡한 웹 페이지를 제작하려는 전문 웹 페이지 제작자에게 Dreamweaver는 점차 웹 페이지 편집 도구로 등장하여 전문가가 웹 페이지를 작성하는 최고의 선택이 되었습니다. Macromedia의 조사에 따르면 Dreamweaver는 현재 700,000명 이상의 사용자를 보유하고 있으며 점유율 측면에서 웹 편집 도구 중 1위를 차지하고 있으며 "Adobe GoLive" 및 "NetObjects Fusion"과 같은 경쟁업체를 훨씬 뒤처지고 있습니다. 따라서 일반적으로 드림위버의 사용자 수는 지속적으로 증가할 것으로 예상됩니다.
이러한 압도적인 인기로 인해 Dreamweaver에 내장된 기능은 점점 더 풍부해지고 풍부해지고 완성도가 높아지고 있습니다. 이번 소개에서는 웹 페이지 제작자에게 더 빠른 디자인, 더 쉬운 코딩, 더 통합된 기능을 제공하는 몇 가지 새로운 기능이 있습니다. 더 이상 고민하지 않고 여기서는 Dreamweaver의 일부 기능을 효과적으로 활용하는 방법을 소개합니다. 아래에는 12가지 비법이 있는데, 이는 4가지 테마로 나눌 수 있습니다. 여기에는 웹 페이지 디자인(Dreamweaver에는 유연한 페이지 디자인 기능이 있음), 다른 Macromedia 제품과 함께 Dreamweaver 사용(도움을 요청하지 않고 애니메이션 및 그림 만들기), 사용자 인터페이스 사용자 정의(개인화된 사용자 경험 즐기기), 마지막으로 Dreamweaver Extensions 가입( 확장된 고급 기능을 웹 페이지에 로드합니다.)
2. 웹 페이지 디자인을 위한 팁
원래 HTML 구문을 사용하여 웹 페이지를 단어 그대로 작성하든, 웹 페이지의 시각적 디자인을 위해 표준화된 창을 사용하든 다음 팁이 유용할 수 있습니다.
팁 1: 웹 페이지 크기를 더 유연하게 만드세요.
일부 웹 개발자는 아래에 소개된 기술을 "유동적"이라고 부르지만 여기서는 "탄력적 확장 기술"이라고 부릅니다. 이는 방문자의 브라우저 창 크기가 변경될 때 웹 페이지의 크기를 조정하는 기술입니다. 따라서 창이 너무 크면 공백이 생기지 않고 창이 너무 작으면 위아래로 움직입니다. 막대는 가장자리에 나타나지 않습니다. 실제로 대부분의 간단한 웹 페이지는 브라우저 창의 크기에 따라 페이지 크기를 자동으로 조정합니다. 그러나 웹 페이지에 다양한 프레임과 테이블이 사용되는 경우 웹 페이지 크기를 자동으로 조정하기가 어렵습니다. 유연하게 조정됩니다. 일반적으로 웹 디자이너는 웹 페이지를 디자인할 때 간격으로 고정 너비 프레임과 GIF 이미지를 혼합하여 사용합니다. 이렇게 하면 Internet Explorer를 사용하든 Netscape Navigator를 사용하든 페이지 크기가 고정되어 사라지지 않습니다. Dreamweaver 4.0을 사용하면 자동으로 유연하게 조정되는 웹 페이지를 쉽게 디자인할 수 있습니다. 어떻게 하나요?
★구체적인 방법: 도구 팔레트(개체 팔레트)의 버튼을 사용하여 웹 페이지를 열고 "레이아웃 보기"로 전환합니다. 이때 텍스트 상자의 열 너비를 볼 수 있습니다. 각 열 위 상자 중앙에 유연한 표시를 설정하려는 열 위의 작은 화살표를 클릭한 다음. "열을 열 자동 확장으로 설정"을 선택합니다. (자동 조정 열 너비를 하나의 열로 제한하도록 설정) 이때 열 너비를 나타내는 원래 숫자 대신 열 상자 위에 물결 모양의 선이 나타납니다. Dreamweaver에서는 자동으로 고정 레이아웃의 빈 이미지를 생성합니다. 이 빈 이미지는 열 위에 두 개의 긴 빈 테이블로 표시됩니다. 이렇게 하면 레이아웃이 자동으로 채워지고 유연한 레이아웃 설정이 완료됩니다. (처음으로 빈 그림을 추가하면 내장된 그림을 사용할지 묻는 대화 상자가 나타납니다. 최상의 효과를 얻으려면 Dreamweaver에서 자동으로 그림을 생성하도록 하는 것이 좋습니다. 그렇지 않으면 그림을 생성하지 않습니다. 레이아웃을 채우려면 빈 그림을 사용해야 합니다.)
팁 2: 개인 팔레트 만들기
Dreamweaver의 새로운 "에셋 패널"(속성 제어판)은 그림, 스타일 등과 같은 파일 형식에 따라 파일을 관리할 수 있는 새로운 도구입니다. , 웹사이트를 편집할 때.
★특정 방법: 새 사이트를 정의하면(사이트 새 사이트 클릭) 모든 유형의 개체가 "자산 패널"의 해당 테이블 상자에 자동으로 추가됩니다. 새로 추가된 이 "자산 패널" 속성 제어판에는 텍스트 색상, 배경 색상 및 하이퍼링크 색상을 포함하여 웹 사이트에 사용되는 모든 색상을 저장하는 색상 상자도 있습니다. 이것은 사용자를 위해 맞춤화된 웹사이트 탐색 색상 팔레트입니다. "자산 패널"을 시작한 다음(먼저 "창"을 선택한 다음 "자산"을 클릭) 왼쪽에 있는 작은 색상 스크롤을 클릭하면 웹사이트에 대한 다양한 색상 옵션이 표시됩니다. 물론 선택한 특정 텍스트에 이러한 색상을 적용할 수도 있습니다. 특정 색상을 선택하더라도 색상 밀도의 16진수 값과 3가지 기본 색상 대비 코드(RGB)가 화면에 나타납니다. 팔레트 도구 모음을 더 작게 만들고 싶다면 팔레트의 "즐겨찾기"에 특정 색상만 추가할 수도 있습니다. 선택한 색상을 강조 표시하고 창에서 "즐겨찾기에 추가" 버튼(오른쪽 하단 버튼)을 클릭하면 작업이 완료됩니다.
팁 3: 팝업 메뉴 탐색 시스템 만들기
원래 팝업 메뉴 탐색 시스템을 만들려면 많은 JavaScript 구문과 기술이 필요했지만 Dreamweaver와 Fireworks Studio가 있으면 쉽고 빠르게 할 수 있습니다.
★구체적인 방법: 먼저 "불꽃놀이"를 시작하고 그림을 선택한 후 "팝업 메뉴 설정" 대화상자에서 "팝업 메뉴 삽입"을 클릭합니다. 항목(항목)의 이름을 입력하고 클릭합니다. 항목을 추가하려면 "플러스" 버튼을 누르세요. 팝업되는 정보 상자에서 프로젝트에 사용할 텍스트 및 하이퍼링크 설정 등 세부 설정을 계속할 수 있습니다. 물론 하위 메뉴를 추가하고 다음 레벨에 대한 설정을 재정렬할 수도 있습니다. 완료되면 "다음"을 클릭하여 색상, 글꼴 등과 같은 다양한 매개변수 값을 계속 설정하세요. 메뉴가 완성되면 HTML 구문과 이미지를 모두 미리 볼 수 있습니다. "마침"을 다시 클릭하세요. 이때 원본 그림으로 마우스를 이동하면 메뉴 시스템의 내용 목록이 나타난다. 그런 다음 생성된 파일을 내보내면 "Fireworks"는 Dreamweaver에서 사용해야 하는 모든 HTML, javascript 및 이미지 파일을 자동으로 생성합니다.
팁 4: 사진을 움직이게 만드세요.
Dreamweaver와 Fireworks Studio를 동시에 설치했다면 이 두 소프트웨어의 완벽한 조합에 놀라게 될 것입니다. 전문 사진 디자이너가 아니더라도 웹 페이지를 디자인할 때 일부 GIF 사진을 수정하여 더욱 생생하게 만들고 싶을 수도 있습니다. Dreamweaver를 사용하면 도움을 받지 않고도 애니메이션을 만들 수 있습니다.
★구체적인 방법: 표준 창에서 수정할 그림을 선택한 후 "속성 관리자"에서 "편집"을 클릭합니다. "Fireworks"가 포함된 Dreamweaver를 설치한 경우 "Fireworks"는 Dreamweaver의 기본 이미지 편집기이며 이미지는 "Fireworks"에 자동으로 로드됩니다. (자세히 살펴보면 "Dreamweaver에서 편집"과 같은 텍스트와 그래픽이 Fireworks 화면에 나타나 Dreamweaver에서 사진을 편집할 수 있음을 나타냅니다.) 좋습니다. 이제 "에서 편집하려는 사진을 클릭합니다. Fireworks"에서 "Animate Animate 선택 수정"을 선택합니다. 다음으로 "애니메이션 대화 상자"에서 설정을 완료하고 애니메이션 프레임 수, 애니메이션 이동 방향, 투명도 및 기타 설정을 선택합니다. 또한 "프레임" 도구를 클릭하여 이동 속도를 설정하고 "개체" 패널을 선택하여 설정을 변경할 수도 있습니다. 파일을 내보내려면 "최적화" 도구 모음을 클릭하고 파일 형식에서 "애니메이션 GIF"를 선택하세요. 완료되면 "Fireworks"는 최적화된 설정으로 이미지를 자동으로 내보내고 GIF 이미지를 자동으로 업데이트하며 업데이트된 이미지를 Dreamweaver에 표시합니다. 방금 만든 멋진 사진을 브라우저에서 미리 볼 수 있도록 "브라우저에서 파일 미리보기"를 클릭하세요.
팁 5: 버튼에 깜박이는 효과 만들기
Dreamweaver에서는 플래시 없이 깜박이는 효과가 있는 Flash 버튼 객체를 만들 수 있습니다. Dreamweaver에는 다양한 형태의 버튼을 만들 수 있는 여러 내장 Flash 버튼 객체가 있습니다.
★구체적인 방법: 내장된 버튼을 보려면 "인터랙티브 이미지 플래시 버튼 삽입"을 클릭하세요. 마우스를 사용하여 대화 상자에서 사용하려는 버튼 양식을 가리킨 다음 브라우저에서 이것이 어떻게 작동하는지 확인할 수도 있습니다. 마우스 포인터를 사용하여 사용할 버튼 형태를 선택한 다음 버튼의 텍스트, 글꼴, 색상, 하이퍼링크 등과 같은 매개변수나 사용자 정의 파일 이름을 순서대로 입력합니다. 확인을 누르세요. 다음으로, "SWF" 형식의 파일이 생성되고 해당 파일이 자동으로 웹 페이지로 가져옵니다. 완성된 파일을 클릭하면 "속성 검사기"에 표시된 파일 속성을 볼 수 있습니다. 파일 속성을 표시할 때 파일 속성 목록을 확장하면 '재생'이 표시되며, 클릭 후 브라우저를 열지 않고도 버튼의 깜박임 효과를 미리 볼 수 있습니다.
팁 6: 흐르는 텍스트 만들기
웹 페이지에 흐르는 텍스트를 추가하는 것은 방금 소개한 Flash 버튼을 추가하는 것만큼 쉽습니다. 마찬가지로 Flash를 설치하지 않고도 Dreamweaver에서 제공하는 새로운 기능을 사용하여 쉽게 할 수 있습니다. 일반적으로 HTML 구문을 사용하여 웹 페이지를 작성하고 대화형 미디어에 대한 경험이 없는 웹 페이지 작성자는 Flash 형식의 컴팩트한 흐르는 텍스트를 쉽게 만들 수 있습니다. 이 새로운 기능은 호환성 문제를 추가하지 않고도 웹 페이지에 브라우징 상호 작용을 추가할 수 있습니다. ★구체적인 방법: "인터랙티브 이미지 플래시 텍스트 삽입"을 클릭한 다음 매개변수 설정을 하나씩 입력합니다(예: 효과를 변경하려는 텍스트, 글꼴 스타일, 글꼴 색상 및 글꼴 크기 등).
팁 7: 키보드 단축키 변경
Dreamweaver를 사용하면 사용자가 인터페이스를 사용자 정의할 수 있으며 이 디자인은 매우 유연합니다. 예를 들어 사용자는 프로그램을 작성하거나 객체를 직접 추가하여 메뉴를 변경할 수 있습니다. Dreamweaver에는 "키보드 단축키 편집기"라는 그래픽 인터페이스가 있으므로 키보드 단축키를 변경하기 위해 전문가가 될 필요는 없습니다.
★구체적인 방법: "키보드 단축키 편집"을 클릭하기만 하면 변경할 수 있는 단축키가 대화 상자에 로드되고 나열되어 익숙한 설정으로 단축키를 변경할 수 있습니다. 단축키를 변경하려면 현재 설정 및 명령 모음의 드롭다운 메뉴를 사용하고 기존 명령 중에서 변경하려는 명령을 찾은 다음 현재 단축키를 선택하면 단축키 목록에 나타납니다. 목록에 있습니다. 또한, 단축키 설정을 추가하고 싶다면 "플러스"를 클릭하고, 사용하고 싶은 새로운 단축키 대표키를 키보드에 입력한 후 "변경"을 누르면 됩니다. 동시에 단축키를 선택하고 "빼기"를 클릭하여 단축키를 제거할 수도 있습니다.
팁 8: 사이트 창 열 재설정
★ 구체적인 방법: "사이트 창"에서 "파일 보기 열 보기"를 클릭하면 사이트 보기 열의 크기와 모양을 볼 수 있습니다. 필드 이름을 선택하고 위쪽 및 아래쪽 화살표를 사용하여 크기를 조정하거나 필드 표시를 선택 취소하여 필드를 숨깁니다. 또한 "더하기" 버튼을 클릭하여 열을 추가하고 자신만의 열 이름을 만들 수도 있습니다. 또는 드롭다운 메뉴에서 기존 "노트"를 선택하여 열을 "디자인 노트"와 연결할 수 있습니다.
팁 9: 웹페이지의 원본 코드 보기
★ 구체적인 방법: 속성이나 브라우저 호환성을 확인하기 위해 "Reilly Code Reference"(창 참조)를 열면 기본 창에 "참조 설정"이 작은 글꼴 값으로 표시됩니다. 그러나 창 오른쪽 상단(닫기 버튼 바로 아래)에 있는 오른쪽 버튼을 누르면 원래 코드 글꼴 크기(소형에서 중형 및 대형)를 선택할 수 있는 드롭다운 메뉴 행이 나타납니다. 큰 글꼴을 선택하면 원본 HTML 코드를 읽을 때 화면을 보기 위해 돋보기를 들고 있을 필요가 없기 때문에 눈에 덜 "학대"합니다.
팁 10: Flash 버튼 추가
팁 5에서는 20가지 사전 설정 버튼 유형을 사용하여 Dreamweaver에서 Flash 버튼을 만드는 방법을 소개했습니다. 별도의 파일이나 프로그램 설치가 필요 없는 방법입니다. 아래에는 "Fireworks 버튼"을 설치하는 또 다른 방법이 있습니다. 이 확장은 팁 5와 동일한 효과를 갖습니다.
★구체적인 방법: "Exchange for Dreamweaver"(Dreamweaver 확장 교환 센터)에 가서 "InstaGraphics Extensions for Dreamweaver"라는 키워드 검색을 입력한 후 약 577K 파일을 다운로드합니다. Dreamweaver로 전환하고 "명령 관리 확장"을 선택한 다음 "파일 설치 확장"을 선택하여 설치를 시작합니다. "Dreamweaver"를 다시 시작하면 "Surfboard" 및 "Bulletbar"를 포함한 6개의 새롭고 흥미로운 버튼 형식이 표시됩니다. 이때 "Interactive Images Fireworks 버튼 삽입" 명령을 사용하여 멋진 버튼을 만드세요. "글머리 기호를 이미지로 변환 명령" 및 "텍스트를 이미지로 변환 명령"을 사용할 수도 있습니다. 위의 두 가지 방법 모두 자동으로 "Fireworks"를 실행할 수 있습니다.
Tip 11: 웹페이지에 '즐겨찾기' 기능 추가 ★ 구체적인 방법: 'Exchange'에서 검색하시면 '즐겨찾기 추가' 확장 기능을 찾으실 수 있습니다. 이 작은 파일은 3K만 차지하며 다운로드 시간이 너무 오래 걸리지 않습니다. 그런 다음 동일한 단계에 따라 "확장 관리자"(확장 관리 명령, 파일 설치 확장)에서 로드합니다. 그런 다음 Dreamweaver를 다시 시작하면 새로 로드된 확장 파일이 Dreamweaver에 새로운 기능을 추가합니다. 이 "내 컬렉션에 추가" 기능을 웹 페이지에 추가하면 사용자가 웹 사이트를 볼 때 단 한 번의 클릭만으로 귀하의 웹 사이트를 브라우저의 "내 컬렉션"(또는 개인 북마크)에 쉽게 추가할 수 있습니다. 또한, 가장 멋진 점은 "내 즐겨찾기" 이름과 "내 즐겨찾기" 이름 앞에 표시되는 작은 아이콘(일반적으로 컴퓨터에서 "내 즐겨찾기" 앞에 있는 작은 아이콘)을 사용자 정의할 수 있다는 것입니다. IE는 IE의 기본값입니다. 직접 디자인한 작은 아이콘이 있으면 더 눈부실 것입니다. 이 기능은 IE 4.0 이상을 사용하는 브라우저만 지원합니다. "Windows" 메뉴에서 "동작" 패널을 선택한 다음 IE 기능 드롭다운 메뉴로 이동하여 이 기능을 클릭하면 이 멋진 기능을 쉽게 활성화할 수 있습니다.
팁 12: 정말 멋진 차트.
양식을 만들고 싶다면 웹페이지의 원본 코드를 그대로 작성해야 합니까? 필요하지 않습니다. 이미 작성된 양식이 있습니다
. "Form Builder 확장"을 교환하고 다운로드하세요. 국가, 성별, 결혼 여부, 연령 그룹 및 기타 범주가 포함된 테이블을 즉시 복사할 수 있는 기성 테이블이 있습니다. Exchange로 이동하여 이 작은(11K만) 파일을 다운로드한 다음 "확장 관리자"(명령 관리 확장, 파일 설치 확장)를 통해 설치하십시오. 그런 다음 Dreamweaver를 다시 시작하고 "FormBuilder 삽입"을 클릭하면 (FormBuilder 삽입)에서 확장 기능을 찾을 수 있습니다. 클릭하면 적용 가능한 모든 형식 메뉴가 표시되는 대화 상자가 나타나므로 매우 편리합니다.