이 기사에서는 dreamweaver에 대한 48가지 매우 실용적인 팁을 공유합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
관련 권장 사항: "dreamweaver 튜토리얼"
DW의 매우 실용적인 48가지 팁
1. Dreamweaver 4.0을 사용하여 자동으로 탄력적으로 조정되는 웹 페이지를 쉽게 디자인하세요
가장 먼저 확인해야 할 사항 귀하의 페이지입니다. 내용이 표 형식으로 되어 있으며 편집하려는 페이지를 열고 "Ctrl+F6"을 누르거나 "보기→표 보기→레이아웃? 보기" 메뉴를 눌러 레이아웃 보기로 전환합니다. 이때 셀의 열 너비를 볼 수 있습니다. 열 너비 숫자 옆에 작은 드롭다운 화살표가 있습니다. 유연한 표시를 설정하려는 열 위의 작은 화살표를 클릭한 다음 "열 너비 설정"을 선택하세요. 유연한 디스플레이" "(열 자동 늘이기 만들기). 열 너비를 나타내는 숫자 대신 열 상자 위에 물결선이 나타납니다. 완료되면 페이지가 유연한 페이지가 됩니다. 또한 페이지에 너무 큰 이미지를 포함하지 않도록 주의하세요.
**************************************************** **********
**************************************** **** ************************
2. Dreamweaver 4.0을 사용하여 깜박이는 효과가 있는 플래시 버튼 만들기
삽입 메뉴 선택→ 대화형?이미지→플래시?버튼 어떤 인라인 버튼을 사용할 수 있는지 확인하세요. 팝업 대화 상자의 "스타일" 목록에서 원하는 버튼 스타일을 선택할 수 있으며, 미리보기(샘플) 창에서 이 스타일의 효과를 확인할 수 있습니다. 선택 후 "Button? Text" 창에서 버튼에 텍스트를 입력하고, "Font" 창에서 글꼴을 선택하고, "Size" 창에서 텍스트 크기를 입력하고, "Link"에서 링크 대상을 입력합니다. 창을 열고 "Target" 창에 대상을 입력합니다. 링크를 여는 방법을 선택하고 "BgColor"에서 버튼 배경색을 선택한 후 "Save? As" 창에서 저장 파일 이름을 입력합니다. 이 작업을 완료한 후 "OK" 버튼을 누르면 플래시 버튼이 완성됩니다. 이 버튼은 웹 페이지에도 자동으로 삽입됩니다. 그런 다음 Dreamweaver 편집 창에서 방금 만든 버튼을 선택하면 위의 "재생" 버튼을 클릭하면 버튼을 직접 만들 수 있습니다. 편집 창에서 이 버튼의 깜박이는 효과를 미리 봅니다. Dreamweaver® 4.0의 이 기능은 중국어 글꼴을 지원하지 않는다는 점에 유의해야 합니다.
**************************************************** **********
**************************************** **** **********************
3 Dreamweaver 4.0에서 키보드 단축키를 사용자 정의하세요
"편집→키보드?단축키" 메뉴를 선택하고 대화 상자에는 현재 활성화되어 있고 변경할 수 있는 단축키가 나열되어 있습니다. 여기에서 익숙한 단축키를 변경할 수 있습니다. 바로가기 키를 변경하려면 먼저 변경하려는 명령을 선택한 다음 현재 바로가기 키를 선택하세요. 이 바로가기 키는 "단축키" 목록에 나타납니다. 그런 다음 사용하려는 바로가기 키를 " Press Key" 창을 클릭한 후, "Change" 버튼을 클릭하면 변경이 완료됩니다. "+" 및 "-" 버튼을 사용하여 현재 단축키를 추가하거나 삭제할 수도 있습니다.
**************************************************** **********
**************************************** **** **********************
4. Dreamweaver 4.0을 Fireworks와 통합하세요
Dreamweaver/Fireworks가 컴퓨터에 동시에 설치된 경우 시간이 지나면 Dreamweaver?4.0에서 제공하는 Fireworks 통합 기능을 사용할 수 있습니다. 이 기능을 사용하면 GIF 이미지를 더욱 매력적으로 수정하고 애니메이션 효과를 쉽게 얻을 수 있습니다. Dreamweaver 편집 창에서 수정하려는 GIF 이미지를 선택한 다음 이미지 속성 창에서 "편집" 버튼을 클릭하면 시스템이 자동으로 Fireworks 소프트웨어를 시작하여 이미지를 편집합니다. 자세히 살펴보면 Fireworks 그림 편집 창에 텍스트와 패턴 Editing?From?Dreamweaver가 나타나는 것을 알 수 있습니다. 이는 이 그림이 Dreamweaver 페이지의 그림 편집용임을 의미합니다. 이제 Fireworks에서 편집할 그림을 선택하고 "수정→애니메이션→애니메이션?선택" 메뉴를 선택합니다. 팝업 창에서 애니메이션 속성(선택한 애니메이션의 프레임 수, 애니메이션 이동 방향, 투명도 등)을 설정합니다. 그런 다음 수정된 파일을 내보냅니다. 이러한 방식으로 Dreamweaver 편집 창은 방금 수정한 파일을 자동으로 업데이트하여 페이지 그림을 움직이게 합니다.
**************************************************** **********
**************************************** ************************
5. 웹사이트 리포터를 능숙하게 사용하세요
Dreamweaver?4.0은 이 웹사이트 리포터를 사용하면 도움이 될 수 있습니다. 웹사이트의 많은 파일 중에서 오류를 빠르게 찾아 수정하세요. '사이트→리포트' 메뉴를 클릭해 리포터를 시작하고, 확인하고 싶은 항목을 선택한 후 '실행' 버튼을 클릭해 홈페이지의 일반적인 문제점을 찾아보세요. 웹사이트의 일부 특정 문제를 탐지하기 위해 자신만의 리포터를 작성할 수도 있습니다(일반적인 문제는 일반적으로 누락된 텍스트나 이름이 없는 문서입니다).
**************************************************************************** ***** *********
************************************ ******** *******************
6. 여러 작업을 빠르게 복원
페이지를 만들 때 페이지를 지속적으로 수정해야 할 수도 있습니다. , 때로는 과거를 복원해야 합니다. 작업하려면 "편집" 메뉴에서 "실행 취소" 명령을 사용할 수 있지만 이 명령은 한 번에 한 번만 복원할 수 있습니다. 여러 작업을 복원해야 하는 경우 " 실행 취소"를 계속 실행하는 것은 정말 짜증나는 일입니다. Dreamweaver 4.0에는 여러 작업을 쉽게 복원할 수 있는 기록 창이 제공됩니다. 이 기록 창을 열려면 "Windows" 메뉴에서 "기록"을 선택하세요. 이 창에서는 수행한 모든 작업이 유지됩니다. 창 왼쪽에 있는 슬라이딩 포인터를 사용하면 저장된 작업을 포함하여 모든 작업을 지속적으로 복원하고 실행 취소할 수 있습니다. 그리고 이 역사적 기록을 저장하고 공유할 수도 있습니다.
**************************************************** **********
**************************************** **** *********************
7. 부동 패널 숨기기
Dreamweaver를 열면 첫인상은 부동 패널입니다. , 끌어서 열 수는 있지만 결국 매우 제한된 화면을 차지하므로 닫으면 사용할 때 다시 열어야 합니다. 실제로 F4 키를 한 번만 누르면 모든 부동 패널이 사라지고 F4 키를 다시 누르면 모두 화면에 다시 나타납니다.
**************************************************** **********
**************************************** **** ************************
8. 웹 페이지를 빠르게 미리보기
Dreamweaver 초보자는 미리보기 메뉴를 찾지 못해 미리보기를 해야 하는 경우가 많습니다. 웹 페이지를 미리 보려면 IE 브라우저를 시작하세요. 실제로 Dreamweaver의 미리보기 메뉴는 파일 메뉴 아래에 있습니다. 편집 중인 웹 페이지를 미리 보려면 F12 키를 누르기만 하면 됩니다. 매우 편리합니다! 다른 브라우저에서 미리 볼 수 있도록 파일 메뉴 아래의 브라우저 미리 보기에서 브라우저 목록 편집을 선택하여 미리 볼 다른 브라우저를 선택할 수도 있습니다. 다양한 브라우저에 대한 웹페이지의 적응성을 테스트합니다.
**************************************************** **********
**************************************** **** ************************
9 HTML 검사기에서 줄 번호 표시 및 자동 줄 바꿈
Dreamweaver의 동작은 자바스크립트 애플릿의 매크로, 특별한 웹 페이지 효과를 달성하는 많은 자바스크립트 프로그램에는 수동 프로그래밍이 필요하지 않지만 때로는 작은 프로그램을 작성해야 할 때, 특히 오류가 발생할 때 프로그램 줄 번호를 표시하는 것이 특히 필요합니다. 프로그램을 사용하다 보면 "XX행에 오류가 있습니다."라는 메시지가 자주 뜹니다. "행 번호를 한 줄씩 세다 보면 너무 힘들 뿐만 아니라 잘못 셀 수도 있습니다. FrontPage에서는 항상 잘못 셀까 봐 걱정됩니다." 줄 번호. 이는 Dreamweaver에서 편리합니다. HTML 소스 코드 뷰어 창에서 "줄 번호" 확인란을 선택하면 소스 코드 뷰어 창의 각 HTML 문에 대해 줄 번호가 자동으로 표시되어 한 눈에 알아볼 수 있습니다. . 마찬가지로 HTML 소스 코드 뷰어 창에서 "Warp"(자동 줄 바꿈) 확인란을 선택하면 창의 자동 줄 바꿈 기능이 활성화되어 코드 줄이 지나치게 길어지는 경우가 있습니다. 코드는 자동으로 창 가장자리를 둘러쌉니다.
**************************************************** **********
**************************************** ****************************
10. 색상의 16진수 코드를 얻는 방법
웹 페이지를 디자인할 때 16진수 색상을 사용합니다. 코드가 가끔 사용되는데, 예전에는 이것 때문에 골치 아픈 일이 많았습니다. Dreamweaver에서는 팝업 색상 팔레트에서 "bg" 옆에 있는 작은 상자의 오른쪽 하단에 있는 작은 삼각형을 클릭하면 됩니다. 마우스를 가리키면 해당 색상이 즉시 16진수로 표시되므로 편리합니다.
**************************************************** **********
**************************************** ****************************
11. 배경 음악 만들기
Dreamweaver에 배경 음악을 삽입하는 방법은 다음과 같습니다. 당신이 선택할 수 있는 두 가지 방법.
(1) 페이지의 눈에 띄지 않는 곳에 빈 레이어를 삽입하고 해당 레이어에 ActivX 개체를 두 번 클릭한 후 열리는 대화 상자에서 MIDI 음악 파일을 선택한 다음 레이어 개체 속성 패널의 가시성은 "숨겨짐"입니다. 변경 사항을 저장한 후 F12를 눌러 웹 페이지를 미리 보고 음악이 있는지 들어보세요.
(2) 또 다른 방법은 Dreamweaver의 "비헤이비어" 비헤이비어 편집기를 사용하여 "+" 버튼을 클릭하고 "사운드 재생" 옵션을 선택한 다음 팝업 대화 상자에서 음악 파일을 선택하는 것입니다. 직접 시도해 보세요!
**************************************************** **********
**************************************** ****************************
12 배경 이미지를 스크롤하지 않도록 설정하세요
FrontPage와 달리 Dreamweaver에 삽입된 배경 이미지는 스크롤되지 않습니다. 텍스트와 함께 스크롤하세요. 가끔 고정된 배경 이미지를 생성해야 할 경우가 있는데 어떻게 해야 합니까? 먼저 배경 이미지를 정의하고, "F10"을 눌러 HTML 소스 파일을 열고, background="images/Background.JPG"와 같은 배경 이미지를 정의하는 명령문을 찾은 다음, 공백에 bgproperties="fixed" 문장을 추가합니다. 그 뒤의 공간. 미리 보고 약간의 성취감을 느껴보세요.
**************************************************** **********
**************************************************************************************************** ***** *********
13. 고정 크기 텍스트 정의
다른 사람의 웹 페이지에 있는 텍스트는 왜 브라우저 글꼴 버튼의 크기를 아무리 눌러도 아름다운가요? 글꼴 크기는 변경되지 않습니다. 실제로 웹페이지에서는 "CSS" 스타일 시트 기술을 사용하는데, Dreamweaver에서 이 기능을 구현하는 것은 매우 간단합니다. 먼저 "F7"을 누르거나 "창" 메뉴에서 "스타일 시트" 옵션을 선택하여 스타일 시트 편집기를 열고 창에서 마우스 오른쪽 버튼을 클릭한 후 "새로 만들기"를 선택하고 편집해야 하는 스타일 시트의 이름을 입력하세요. 팝업 대화 상자에서 정의한 다음 "확인"을 누른 다음 목록에서 첫 번째 항목 "유형"을 선택하고 특정 텍스트 속성에 대한 매개변수를 정의합니다(일반적으로 텍스트 크기는 10.5를 선택하는 것이 더 적합합니다). 800×600 화면) "확인"을 누르면 정의된 스타일 시트가 나타납니다. 웹 페이지 편집 창에서 텍스트를 선택하고 새로운 스타일 시트 이름을 클릭하면 선택한 텍스트의 변경 사항을 확인할 수 있습니다. 미리 보고 정의된 텍스트 글꼴 크기가 브라우저에서 선택한 글꼴 크기에 따라 변경되는지 확인해보세요.
**************************************************** **********
**************************************** **** **********************
14. 플래시 애니메이션 삽입
Macromedia의 플래시 애니메이션은 다음과 같은 장점으로 인해 점차 웹 페이지에서 인기 있는 선택이 되었습니다. 상호작용성과 빠른 전송 속도. 웹 페이지에 플래시 애니메이션을 삽입할 수 있다면 확실히 작업에 많은 색상을 추가할 수 있습니다. Dreamweaver에서 Flash로 생성된 SWF 형식 애니메이션을 삽입하는 것은 매우 쉽습니다. 개체 도구 모음에서 Flash 로고를 클릭하거나 "미디어" 아래의 "Flash"를 클릭하면 SWF 애니메이션 파일을 선택할 수 있는 대화 상자가 열립니다. 속성 패널에서 재생 매개변수를 설정하면 완료됩니다.
**************************************************** **********
**************************************** **** ********************
15. 웹페이지에서 표를 비워두세요
새 Dreamweaver 웹페이지에 텍스트를 입력할 때 기본 형식은 다음과 같습니다. 정말 불공평해요. 모두가 테이블 도구를 잘 사용하는 한 실제로 이러한 단점을 피하는 것은 매우 간단합니다. 구체적인 방법은 새 페이지에 중앙 정렬된 표를 삽입하는 것입니다. 표를 쉽게 제어하려면 열 수를 홀수로 설정하는 것이 가장 좋으며 값은 너무 크지 않아야 합니다. 이렇게 하면 셀에 입력되는 텍스트가 너비를 마음대로 조정할 수 있는 영역으로 제한되므로 텍스트가 통제 불능이 되는 것을 걱정할 필요가 없습니다.
**************************************************** **********
**************************************** **** ********************
16. 상태 표시줄 프롬프트 텍스트 변경
일반적으로 브라우저가 페이지를 로드하면 페이지에 표시됩니다. 상태 표시줄은 페이지의 주소 이름인데 매우 지루합니다. 브라우저의 상태 표시줄에 약간의 개성을 추가하는 것에 대해 생각해 본 적이 있습니까? 그렇다면 아래 단계에 따라 원하는 텍스트를 맞춤설정하세요! 먼저 "동작" 동작 편집 창을 열고 "+" 버튼을 클릭한 다음 "텍스트 세트 설정"에서 "상태 표시줄의 텍스트" 옵션을 선택한 다음 상자에 "내 홈페이지에 오신 것을 환영합니다"와 같은 텍스트를 입력하세요. " " 등을 선택하고 "확인"을 클릭합니다.
**************************************************** **********
**************************************** **** ********************
17. 통합 텍스트 코드 편집기
비주얼 웹 페이지 편집 소프트웨어의 가장 큰 불편은 편집이 어렵다는 것입니다. 소스 코드는 말할 것도 없고 Dreamweaver를 사용하면 코드를 매우 쉽게 다룰 수 있습니다. 이 내장 텍스트 코드 편집기의 새로운 주요 기능은 자동 들여쓰기(한 번에 여러 줄을 선택하여 들여쓰기 가능)이며, 코드를 작성할 때 ""를 잊어버린 경우 힌트를 제공합니다. . 도구 목록의 드롭다운 메뉴에는 현재 웹페이지에 있는 모든 사용자 정의된 JavaScript 기능이 나열되어 있어 웹페이지의 원본 코드로 자유롭게 이동할 수 있습니다. "소스 코드 탐색 도구"를 사용하면 전문가가 JavaScript를 쉽게 처리할 수 있습니다. ; /I> 기능을 사용하려면 텍스트 코드 편집기에 자바스크립트 코드를 입력하면 시스템이 해당 코드를 다른 색상으로 표시합니다.
**************************************************** **********
**************************************** **** ********************
18. Dreamweaver에서 공백을 여러 개 입력하세요
우리가 일반적으로 입력하는 공백은 반각 문자지만, Dreamweaver에서는 공백을 하나만 입력하세요. 공백을 여러 개 입력하려면 전체 너비 공백만 입력하세요. 전자 공백을 입력하는 방법은 중국어 입력 방법을 열고 Shift+Space를 눌러 전자 상태로 전환하는 것입니다. 이때 입력하는 공백은 전각 공백입니다.
**************************************************** **********
**************************************** ****************************
19 Dreamweaver의 BUG
중 하나를 해결하세요.Dreamweaver 3.0의 동작 관리자에서 "이벤트 대상" 드롭다운 메뉴 항목을 열 수 없습니다. 결과적으로 많은 특수 효과는 쓸모가 없으며 전혀 제작할 수 없습니다. 실제로 이는 Dreamweaver 3.0과 중국어 Windows98 간의 비호환성 문제로 간주되어야 합니다. 이 문제는 영어 Windows98에서는 존재하지 않습니다. 실제로 이 메뉴를 열 수는 있지만 올바르게 표시할 수는 없습니다. 드롭다운 메뉴를 선택한 후 위쪽 및 아래쪽 키를 사용하여 사용하려는 브라우저를 선택할 수 있습니다.
**************************************************** **********
**************************************** ****************************
20.Dreamweaver 3.0 템플릿을 사용하여 웹페이지 생성 및 비헤이비어(Behavior) 설정
템플릿(Template)을 사용하여 생성된 웹페이지에는 새로운 동작을 추가할 수 없습니다. 이는 새로운 동작을 위해서는 HTML 파일의 Head 부분에 javascript를 삽입해야 하고, Template을 사용한 후에는 HTML 파일의 Head 부분이 "차단"되기 때문입니다. 템플릿을 사용하여 생성된 웹 페이지에 비헤이비어를 적용하려면 템플릿에 미리 비헤이비어를 정의한 후 템플릿의 편집 가능한 영역으로 정의해야 합니다. 그런 다음 웹 페이지에서 이 동작을 변경할 수 있습니다. 그러나 이는 동작의 트리거 이벤트(이벤트) 및 동작(액션)의 특정 내용을 변경하는 것으로만 제한되며 동작 유형은 변경되지 않습니다.
**************************************************** **********
**************************************** **** ************************
21. 텍스트에 비헤이비어를 적용하고 동적 텍스트 효과를 만듭니다.
Dreamweaver의 일반 텍스트는 다음과 같이 측정됩니다. 문자는 객체로 사용할 수 없습니다. 즉, 일부 매우 유용한 자바스크립트 이벤트에는 텍스트를 할당할 수 없습니다. 텍스트에는 그림이나 기타 컨트롤과 같은 특정 "표시"가 없기 때문에 텍스트에는 많은 특수 효과가 누락됩니다. 텍스트에 특수 효과를 추가하려면 텍스트를 하이퍼링크로 만드는 방법밖에 없습니다. 이런 방식으로 텍스트는 객체가 되어 동작을 부과할 수 있습니다. 그러나 이로 인해 밑줄과 같은 일부 불필요한 하이퍼링크 속성과 마우스 오버 및 방문과 같은 색상 변경이 발생합니다. 단순히 텍스트에 특수 효과를 추가하려면 먼저 설정하려는 텍스트를 하이퍼링크로 만든 다음 그 위에 동작을 추가하고 마지막으로 하이퍼링크를 일반 텍스트로 변환하면 됩니다. 구체적인 단계는 다음과 같습니다.
편집하려는 텍스트를 선택하고 링크 대상 상자에 몇 글자를 입력합니다. 이 링크를 선택하고 Windows → 동작을 클릭하면 동작 패널이 나타납니다. "+"를 눌러 사운드 재생 등 원하는 동작을 추가하세요. Dreamweaver 하이퍼텍스트 편집기를 열고 이 링크를 찾아 다음으로 변경합니다. 마지막으로 "href=..."를 삭제하세요. 이 페이지를 저장하세요. 미리 보려면 F12를 누르세요. 효과는 나쁘지 않아요!
**************************************************** **********
**************************************** ****************************
22. 웹페이지에서 각 요소의 위치를 정확하게 찾습니다.
두 가지 방법으로 정확하게 찾을 수 있습니다. 웹페이지에서 각 요소의 위치를 찾으세요. 테이블이나 레이어를 사용하세요. 현재 테이블을 사용하는 것이 일반적인 방법입니다. 구체적인 방법은 먼저 웹 페이지에 테이블을 만들고 테이블의 테두리 너비가 0이어야 한다는 점에 유의하세요. 그런 다음 요구 사항에 따라 각 테이블 셀에 각 요소를 배치합니다. 표 셀의 크기와 표 테두리의 위치를 조심스럽게 조정하면 표 셀의 요소도 그에 따라 이동합니다. 이러한 방식으로 웹 페이지에서 각 요소의 위치를 보다 정확하게 찾을 수 있습니다. 테이블 사용의 장점은 테이블이 보편적이며 거의 모든 버전의 브라우저가 테이블을 지원할 수 있다는 것입니다. 단점은 사용이 번거롭고 세심한 조정이 필요하며 위치 지정이 정확하지 않다는 것입니다. 레이어는 웹 페이지의 어느 곳에나 배치할 수 있으므로 정확한 위치 지정을 위해 레이어를 사용할 수 있습니다. 사용 방법은 웹 페이지에 레이어를 삽입한 다음 레이어에 배치하려는 요소를 배치하는 것입니다. 그런 다음 원하는 위치에 레이어를 배치할 수 있습니다. 또한 정확한 위치 지정을 위해 눈금자와 격자를 사용할 수 있습니다. 레이어는 최신 브라우저에서만 지원되므로 이전 브라우저와 호환되도록 레이어를 테이블로 변환할 수 있습니다. 방법은 "수정→레이아웃 모드→레이어를 테이블로 변환"을 선택하는 것입니다. 이때 레이어는 겹칠 수 없습니다. 레이어 겹침을 피하기 위해 레이어를 삽입하기 전에 "보기 → 레이어 겹침 방지"를 선택할 수 있습니다. 일반적으로 변환된 페이지에는 일부 변경 사항이 있을 수 있으므로 수동으로 조정해야 합니다. 마지막으로 주의할 점은 표와 레이어를 변환할 때 한 페이지에서 레이어와 표를 동시에 사용하지 않는 것이 가장 좋습니다. 페이지가 엉망이 될 수 있기 때문입니다
23 뷰어의 마우스 모양을 변경해 보세요
.스타일시트를 편집하면 됩니다. 구체적인 방법은 "텍스트 → 사용자 정의 스타일(CSS 스타일) → 스타일 시트 편집"을 선택하면 스타일 시트 편집 창이 팝업되고 그 안에서 "새로 만들기"를 선택하는 것입니다. 그런 다음 "사용자 정의 스타일 만들기"를 선택하고 스타일 시트에 이름을 지정한 다음 확인을 클릭합니다. 스타일 시트를 편집하고 확장자를 선택한 후 오른쪽 커서 항목(Cursor)에 나타날 포인터 효과를 선택하세요.
**************************************************************************************************** ***** *********
************************************ ******** *******************
24. 하이퍼링크 텍스트 아래의 밑줄을 제거하세요
이 효과는 스타일 시트를 편집하여 얻을 수 있습니다. 구체적인 방법은 "텍스트(텍스트) 클릭 → 스타일 사용자 정의(CSS Style) → 스타일 시트 편집(Edit Style Sheet)"으로, 스타일 시트 편집 창이 나타나며, "새로 만들기(new)"를 선택합니다. 그런 다음 HTML 태그 재정의를 선택하고 아래 태그 메뉴에서 a를 선택합니다. 스타일 시트를 편집하고 유형을 선택한 다음 오른쪽 장식에서 없음을 선택합니다.
**************************************************** **********
**************************************** **** *********************
25 페이지를 따라가는 이미지를 만듭니다
이 효과는 자바스크립트를 통해 구현됩니다. 일반적으로 이러한 효과를 얻으려면 특정 프로그래밍 기술이 필요하지만 이제는 Dreamweaver 플러그인을 통해 쉽게 얻을 수 있습니다. 이 플러그인은 http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip에서 다운로드할 수 있습니다. 플러그인 설치 방법: 압축을 풀고 Dreamweaver 아래 ConfigurationObjects 폴더의 새 폴더에 복사합니다. Dreamweaver를 다시 시작하면 개체 패널에서 새로 설치된 플러그인을 찾을 수 있습니다. 플러그인 아이콘을 클릭하고 팝업 대화 상자에 이미지 저장 주소와 이미지 표시 위치를 입력하세요.
**************************************************** **********
**************************************** **** ********************
26. 마우스를 위에 올리면 바뀌는 동적 메뉴를 만들어 보세요
소위 동적 메뉴는 실제로 두 장의 사진 중 하나는 마우스를 움직일 때의 사진이고, 위에 표시된 사진은 마우스를 위로 움직일 때 반대편에 표시되는 사진입니다. Dreamweaver에서 제공하는 비헤이비어에서 스왑 이미지를 사용하여 이 효과를 얻을 수 있습니다. 먼저 그림을 삽입하고 마우스로 클릭한 후 속성 패널의 연결란에 연결할 웹페이지를 입력합니다. 그런 다음 동작 패널을 열고 "+" 기호를 클릭한 다음 이미지 교체를 선택합니다. 그러면 마우스를 위로 이동한 후 표시될 사진을 선택하라는 창이 나타납니다. 여기에서 두 번째 사진을 선택하고 "확인"을 클릭하세요. 자, 효과가 완성되었습니다. 얼마나 간단합니까?
**************************************************** **********
**************************************** **** ********************
27. Dreamweaver를 사용하여 드롭다운 메뉴와 유사한 효과를 만드세요
드롭다운 메뉴를 사용하려면 레이어 숨기기 및 표시 속성을 사용해야 합니다. 구체적인 방법은 단일 행, 다중 열 테이블을 메뉴 표시줄로 페이지에 삽입하는 것입니다. 테이블의 열 수는 메뉴 옵션 수에 따라 결정됩니다. 레이어를 삽입하고 레이어의 첫 번째 드롭다운 메뉴 내용을 입력한 후 테이블의 첫 번째 열 아래로 레이어를 이동합니다. 같은 방법으로 다른 메뉴 항목에도 동일한 작업을 수행하고 해당 레이어를 삽입합니다. 모든 레이어의 표시 속성(vis)을 숨김(Hidden)으로 변경합니다.
표의 첫 번째 셀을 선택하고 Windows → 동작을 클릭하면 동작 패널이 나타납니다. "+"를 눌러 레이어 표시-숨기기 동작을 추가하고 첫 번째 레이어(Layer1)의 속성을 표시(표시)로 변경하고 다른 레이어의 속성을 숨기기(숨기기)로 변경합니다. 그런 다음 동작 패널에서 이 동작을 편집하고 트리거 이벤트(이벤트)를 onMouseover로 변경합니다. 이렇게 하면 첫 번째 테이블 셀 위로 마우스를 이동하면 첫 번째 드롭다운 메뉴가 나타납니다. 그런 다음 다른 동작 표시-숨기기 레이어를 추가하고 모든 레이어의 속성을 숨김으로 변경합니다. 그런 다음 동작 패널에서 이 동작을 편집하고 트리거 이벤트(이벤트)를 onMouseout으로 변경합니다. 이렇게 하면 마우스가 첫 번째 테이블 셀에서 멀어지면 첫 번째 드롭다운 메뉴가 숨겨집니다. 다른 메뉴 항목에 대해서도 반복합니다. 그러나 "메뉴 2"를 설정하면 두 번째 레이어가 표시되고 다른 레이어는 숨겨집니다. "메뉴 3"을 설정하면 세 번째 레이어가 표시되고 다른 레이어는 숨겨집니다. 자, 끝났습니다. F12를 눌러 살펴보세요.
**************************************************** **********
**************************************** ****************************
28. 다운로드 파일을 쉽게 생성하세요
Dreamweaver를 사용하는 방법은 실제로 매우 간단합니다. 시청자가 다운로드할 파일을 선택한 후 드래그합니다. 마우스를 움직여 이 텍스트를 선택하고 텍스트 속성 패널의 "링크" 속성 입력 상자에 파일 이름을 입력합니다. 참고: 다운로드한 파일이 웹 페이지와 동일한 디렉터리에 없으면 파일 이름에 상대 경로가 포함되어야 합니다. 그렇지 않으면 다운로드할 때 파일을 찾을 수 없다는 메시지가 표시됩니다.
**************************************************** **********
**************************************** **** **********************
29 Dreamweaver의 북마크를 사용하여 점프 링크를 만드세요
Dreamweaver의 북마크를 사용하여 이 기능을 구현할 수 있습니다. 구체적인 방법은 점프하고 싶은 곳으로 커서를 이동시킨 후, 메뉴에서 '삽입 → 북마크(이름 앵커)'를 선택하고 북마크 이름을 입력하는 것입니다. 다음으로, 링크를 호출하려는 링크 대상 박스에 "#북마크 이름"을 입력하면 해당 페이지 내 점프 링크가 준비됩니다. 여기서 북마크 이름 앞에 웹페이지 이름을 입력하면 다른 페이지의 북마크로 이동합니다. 예를 들어 링크에 "index.htm#top"을 입력하면 사용자가 이 링크를 클릭하면 색인 페이지의 최상위 책갈피로 이동합니다.
**************************************************** **********
**************************************** ****************************
30 그림과 테이블이 닿는 부분을 없애주세요
틈이 없는지 확인하세요. 그림과 표가 닿는 부분에 표 속성을 추가하기만 하면 됩니다. 패널에서 테두리를 0으로 설정할 수 없습니다. 또한 셀의 두 가지 속성을 0으로 설정해야 합니다(예: cellpacing="0" 및 cellpadding). 테이블의 속성 패널에서 ="0")입니다.
**************************************************** **********
**************************************** **** ********************
31 TracingImage를 사용하면 웹페이지에서 각 요소의 위치를 찾는 데 도움이 됩니다.
TracingImage는 매우 효과적인 기능입니다. 사용자가 사용할 수 있는 드림위버(Dreamweaver) 원본 패턴 디자인을 보조 배경으로 사용합니다. 이러한 방식으로 사용자는 페이지에서 텍스트, 이미지, 표, 레이어 및 기타 웹 페이지 요소를 쉽게 찾을 수 있습니다. TracingImage의 구체적인 용도는 다음과 같습니다. 먼저 다양한 그리기 소프트웨어를 사용하여 가상의 웹 페이지 레이아웃 다이어그램을 만든 다음 이 그림을 네트워크 이미지 형식(gif, jpg, jpeg 및 png 포함)으로 저장합니다. Dreamweaver를 사용하여 편집 중인 웹 페이지를 열고 페이지의 빈 영역을 마우스 오른쪽 버튼으로 클릭한 다음 "페이지 속성..."을 선택한 다음 Tracing에서 방금 만든 웹 페이지 레이아웃 패턴의 위치를 입력합니다. 팝업 대화 상자의 이미지 항목입니다. 그런 다음 Image Transparen에서 TracingImage의 투명도를 설정합니다. OK. 이러한 방식으로 현재 웹 페이지에서 각 웹 페이지 요소의 위치를 쉽게 찾을 수 있습니다. TracingImage를 사용하는 웹 페이지는 Dreamweaver로 편집할 때 더 이상 배경 패턴을 표시하지 않습니다. 그러나 브라우저를 사용하여 탐색할 경우에는 그 반대가 적용됩니다. TracingImage는 사라지고 편집된 웹 페이지만 표시됩니다. 표시됨).
**************************************************** **********
**************************************** **** ************************
32 "표 너비를 픽셀로 변환" 및 "표 너비를 백분율로 변환" 정보
"표 너비를 픽셀로 변환" 및 "표 너비를 백분율로 변환"은 표 너비 설정을 위한 Dreamweaver의 두 가지 중요한 기능입니다. 테이블이 있는 웹 페이지를 열 때 상태 표시줄에서
| 태그에서 스타일을 호출하면 됩니다. |
위 내용은 DW 중국 슈퍼 리그에 대한 48가지 실용적인 팁 (공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
