Dreamweaver 튜토리얼


웹 사이트 만들기 Dreamweaver 자습서아시다시피이 사이트는 웹 사이트를 만드는 방법에 관한 것입니다. PressWordPress, Joomla 또는 Drupal을 사용하여 다양한 방법을 배울 수 있습니다. 우리는 예전처럼 순수한 HTML 사용에 대한 가이드를 가지고 있습니다 (분명히 최신 버전 인 HTML5). 초보자를위한이 Dreamweaver 자습서에서는 다른 자습서를 배웁니다..


모르는 사람들을 위해 Dreamweaver는 웹 사이트를 디자인, 코딩 및 관리 할 수있는 응용 프로그램입니다. Dreamweaver에서 흥미로운 점은 코드를 작성하고 시각적 인터페이스를 사용하여 웹 사이트를 만들 수 있다는 것입니다..

이 Dreamweaver 자습서에서는 Dreamweaver를 사용하여 웹 사이트를 만들기 위해 알아야 할 모든 것을 배웁니다. 프로그램과 그 기능, 주요 기능 및 설정 방법에 대해 알게됩니다. 그런 다음 Dreamweaver를 사용하여 간단한 웹 사이트를 만들고 모바일 친화적으로 만든 다음 서버에 업로드하는 방법에 대한 단계별 가이드를 찾을 수 있습니다..

이것은 긴 여행이 될 것입니다. 그러나이 매우 직관적 인 프로그램에 얼마나 빨리 참여할 수 있는지에 놀랄 것입니다..

Contents

Dreamweaver 란 무엇이며 무엇을 할 수 있습니까??

표면적으로 Dreamweaver는 IDE (Integrated Development Environment)입니다. 즉, 웹 디자인 및 개발을보다 쉽게하기 위해 다양한 도구를 결합한 소프트웨어입니다.

특별한 점은 CMS (비주얼 인터페이스를 통해 웹 사이트의 모든 것을 제어하는)와 순수한 코드 편집기 사이에 있다는 것입니다. 다른 부품의 작동 방식은 다음과 같습니다..

비주얼 디자인 인터페이스를 통해 웹 사이트 만들기

비주얼 디자인 툴박스는 기본적으로 마우스로 웹 사이트를 구축 할 수 있습니다. Word에서 레이아웃을 만드는 방식으로 웹 사이트 요소를 배치 할 수 있습니다. 기본적으로 브라우저에서 볼 수있는 것처럼 웹 사이트를 볼 수 있지만 조작 할 수있는 기능도 있습니다.

한 줄의 코드를 작성할 필요없이 웹 사이트의 골격을 신속하게 구축 할 수 있기 때문에 매우 유용합니다. 대신 Dreamweaver가 필요한 코드를 자동으로 만듭니다. 이렇게하면 이론적으로 전체 웹 사이트를 직접 만들어 서버에 업로드 할 수 있습니다.

반면에 코딩이 가능하다면 Dreamweaver에도 필요한 도구가 모두 있습니다.

본격적인 코드 편집기로 작동

Dreamweaver의 두 번째 부분은 모든 기능을 갖춘 코드 편집기입니다. 다음을 포함한 모든 표준 기능이 장착되어 있습니다.

  • 구문 강조 — 이는 코드를보다 쉽게 ​​읽고 수정할 수 있도록 Dreamweaver가 다른 요소 (예 : 연산자, 변수 등)를 다른 색상으로 강조 표시 함을 의미합니다..
  • 코드 완성 — 코드 완성은 전화기의 자동 완성과 비슷한 방식으로 작동합니다. 입력을 시작하면 편집기가 작성하려는 내용을 제안합니다. 그렇게하면 모든 것을 완전히 입력 할 필요가 없습니다.
  • 코드 축소 — 코드 축소는 코드를보다 쉽게 ​​읽을 수있는 또 다른 기능입니다. 필요하지 않을 때 코드의 일부를 시각적으로 축소 할 수 있습니다. 이렇게하면 전체 파일을 스크롤 할 필요는 없지만 작업해야하는 부분 만 처리 할 수 ​​있습니다.

Dreamweaver는 웹 디자인을위한 가장 중요한 언어 (HTML5, CSS)를 지원합니다, 자바 스크립트, PHP)와 더 많은.

제일 좋은 부분: 코드에서 내용을 변경하면 Dreamweaver에서도 시각적으로 자동으로 표시합니다. 이렇게하면 파일을 서버에 업로드하거나 브라우저를 실행하지 않고도 볼 수 있습니다.

더 많은 기능이 있으며 초보자를위한 다음 Dreamweaver 자습서에서 많은 기능이 작동하는 것을 볼 수 있습니다.

Dreamweaver 설치 및 웹 사이트 디자인 프로세스 (단계별)

첫 단계로 공식 Adobe 웹 사이트에서 Dreamweaver를 구입해야합니다..

여기 또는 Creative Cloud 클라이언트에서 무료 평가판을받을 수 있습니다.

초보자 가격에 대한 dreamweaver 튜토리얼

1 단계. 다운로드 및 설치

공식 웹 사이트에서 프로그램을 받으면 설치 파일을 다운로드하여 실행 한 다음 지침을 따르십시오..

이미 Creative Cloud를 사용하고 있다면 클릭하면됩니다. 시험 클라이언트 내부. 그런 다음 프로그램 설치가 완료되면 재판을 시작하다.

2 단계. 첫 시작

Dreamweaver를 처음 시작하면이 화면이 나타납니다..

드림위버 첫 스타트 업

이전에 프로그램을 사용한 적이 없다면 아니요, 저는 새 사람입니다. 그렇게하면 Dreamweaver가 설정 마법사를 안내합니다. 첫 번째 단계는 개발자 용 작업 영역을 사용할지 또는 표준 작업 영역을 사용할지 선택하는 것입니다..

드림위버 온 보딩 가이드

이 튜토리얼은 Dreamweaver 초보자 용 자습서이므로 표준 버전을 선택하십시오. 그런 다음 네 가지 옵션 중에서 작업 영역의 색상 테마를 선택할 수 있습니다.

드림위버 온보드 가이드 색상 구성표 선택

마지막 단계는 샘플 파일, 새 프로젝트 또는 기존 프로젝트로 시작할지 또는 튜토리얼을 볼지 선택하는 것입니다..

드림위버 온 보딩 가이드 마지막 단계

새 폴더 나 기존 폴더로 시작하도록 선택하면 설정 프로세스가 완료됩니다. 잘 했어!

이제 프로젝트를 시작하고 Dreamweaver를 사용하여 웹 사이트를 만드는 방법에 대해 알아 보겠습니다..

3 단계. 새 사이트 시작

첫 번째 단계는 새 사이트를 만드는 것입니다. 이를 위해 사이트> 새 사이트. 이 화면으로 이동합니다 :

dreamweaver에서 새 사이트를 만들

첫 번째 단계는 사이트 이름을 지정하는 것입니다. 그런 다음 저장할 위치를 선택해야합니다. 이것은 당신에게 달려 있지만, 일반적으로 모든 프로젝트를 단순화하기 위해 한 곳에 보관하는 것이 좋습니다..

새 프로젝트를 Git 리포지토리와 연결할 수도 있습니다. 이것은 당신에게 제공하기 때문에 좋은 아이디어가 될 수 있습니다 버전 관리 하지만 지금은 건너 뛸 수 있습니다.

우리는 모든 것을 다룰 것입니다 서버 나중에 왼쪽에. 와 같다 CSS 전 처리기, 사용할 때만 중요합니다 그런 종류의 것.

우리에게 중요한 것은 지역 정보 아래에 고급 설정.

dreamweaver에서 기본 이미지 폴더를 사용하도록 설정

오른쪽에있는 폴더 아이콘을 클릭하십시오 기본 이미지 폴더. 그런 다음 새로 만든 사이트 디렉토리로 이동하여 열고 새 폴더를 만듭니다. 이미지 기본 폴더로 선택하십시오. 이렇게하면 Dreamweaver가 사이트와 연결된 이미지를 자동으로 저장합니다.

이제 끝입니다. 클릭 저장 작업 공간으로 돌아가려면.

4 단계. 홈페이지 파일 만들기

프로젝트 사이트를 만들었으므로 이제 첫 번째 파일을 만들 차례입니다. 우리는 홈페이지로 시작합니다.

Dreamweaver에서 옵션 자체를 제공하지 않으면 파일> 새로운. 완전히 새로운 파일을 만들거나 기존 템플릿을 사용할 수 있습니다. 이 프로그램에는 몇 가지가 포함되어 있습니다 (참조 스타터 템플릿). 지금 우리는 대신 새로운 것을 만들 것입니다.

dreamweaver에서 새 파일을 만듭니다

HTML은 기본적으로 설정되어 있으며 그대로 둘 수 있습니다. 문서 제목의 경우 입력 index.html 그리고 선택 창조하다. 다음 화면으로 이동합니다.

드림위버의 신선한 프로젝트

이것은 처음에 언급 한 모자입니다. 즉, 귀하의 사이트가 어떻게 생겼는지 (현재는 비어 있음) 실시간 코드입니다. 또한 Dreamweaver는 사용자가 작성할 수있는 기본 HTML 마크 업을 자동으로 만들었습니다. 지금 해보자?

5 단계. 헤더 만들기

페이지에 요소를 삽입하려면 먼저 해당 위치를 선택해야합니다. 빈 페이지를 클릭하십시오 (Dreamweaver가 자동으로 화면의 코드 부분에서 동일한 요소에 커서를 놓거나.

그 후에는 끼워 넣다 오른쪽 상단에있는 탭. 페이지에 추가 할 수있는 공통 HTML 및 사이트 요소 목록이 제공됩니다. 보일 때까지 아래로 스크롤 헤더 옵션으로.

dreamweaver에 헤더 요소 삽입

클릭 한 번으로 페이지에 삽입합니다. 또한 HTML 문서 안에 나타납니다..

비주얼 인터페이스 및 코드 편집기에서 헤더 표시

간단하고 옳다?

이제 헤더 안의 텍스트를 변경하고 제목으로 바꿉니다. 둘 다 – 먼저 맨 아래에있는 코드 편집기에서 텍스트를 표시하십시오..

dreamweaver에서 헤더 텍스트 표시

그 후로 돌아가 끼워 넣다, 옆에있는 화살표를 클릭하십시오 표제 그리고 선택 H1. 이것은 페이지 제목을 H1 HTML 태그로 감 쌉니다. 제목 태그에 대한 자세한 내용은 이 기사.

그런 다음 페이지 제목을 입력 할 수도 있습니다. 실제 웹 사이트에서는 키워드뿐만 아니라 키워드로 설명하는 것을 선택합니다. 내 테스트 웹 사이트에 오신 것을 환영합니다 예에서와 같이.

드림위버의 헤더 변경

좋아, 당신은 페이지 헤더를 만들었습니다! 지금은 여전히 ​​약간 조잡 해 보이므로 다음으로 CSS를 통해 변경해 보겠습니다..

6 단계. CSS 파일 생성

익숙하지 않은 경우 CSS는 웹 페이지의 모든 스타일을 제공하는 부분입니다. 색상, 요소의 크기, 글꼴 유형 및 크기 등을 정의 할 수 있습니다. 마크 업을 사용하여 페이지 제목을 꾸미고 Dreamweaver에서 CSS를 변경하는 방법을 배우고 싶습니다..

이론적으로 HTML 문서 안에 CSS를 추가 할 수 있습니다. 우리가 할 일보다 훨씬 덜 우아한 옵션이 있습니다. 이는 전체 사이트의 모든 CSS 스타일링을위한 전용 파일을 만듭니다..

첫 번째 단계는 새 헤더에 CSS 클래스 또는 ID를 제공하는 것입니다. 이 과정에서 Dreamweaver는 스타일 시트 파일을 만들라는 메시지를 표시합니다. 전체 사이트 구조를 표시하는 화면 오른쪽 하단의 DOM 메뉴로 이동하십시오. 헤더가 선택되어 있는지 확인하십시오.

라이브 뷰에서 작은 레이블과 아래쪽에 더하기 기호가있는 파란색으로 표시됩니다..

dreamweaver에 CSS 파일 추가

더하기 기호를 클릭하고 입력하십시오 #헤더 열리는 필드에서. 해시 태그는 클래스와 반대되는 id. 엔터 키를 치시오. 오프닝 메뉴에서 페이지에서 정의 고르다 새로운 CSS 파일 만들기. 팝업에서 검색 사이트 폴더로 이동하십시오. 그런 다음 입력 style.css (스타일 시트의 표준 이름)에 파일 이름 필드와 히트 저장.

드림위버에서 스타일 시트 만들기

지금 선택하면 확인, 라이브 뷰 상단에 새 파일이 나타납니다. 거기에서보고 편집 할 수 있습니다. 또한 페이지의 HTML 부분 섹션.

웹 사이트에 추가 된 스타일 시트

대단한 포섬! 이제 페이지 스타일을 변경할 준비가되었습니다..

7 단계. 페이지 제목에 대한 CSS 선택기 작성

가장 먼저 할 일은 제목의 글꼴을 변경하고 가운데에 맞추는 것입니다. 이를 위해서는 먼저 새로운 CSS 선택기를 만들어야합니다. 선택기는 페이지에서 색상, 크기 등의 속성을 할당 할 수있는 요소의 이름입니다..

오른쪽 하단의 DOM보기에서 H1 제목을 표시하십시오 (이전 헤더와 마찬가지로). 그런 다음 위에서 CSS 디자이너.

제목 요소의 스타일링 준비

CSS 선택기를 만들려면 S라고 표시된 줄을 클릭하십시오.선거인 더하기 기호를 클릭하십시오. 그러면 자동으로 이름이 지정된 선택기를 제안해야합니다. # 헤더 h1.

dreamweaver에서 CSS 선택기를 만듭니다.

Enter 키를 눌러 작성하십시오. 끝난!

빠른 참고 사항 : CSS를 처음 사용하는 모든 사람들에게이 선택기는 이름이 지정된 요소를 타겟팅하고 있음을 의미합니다. h1 내부 호출 된 요소 #헤더. 이런 식으로 CSS로 입력 한 모든 내용은 헤더 요소가 아닌 작성된 텍스트에만 적용됩니다..

8 단계. 헤드 라인 글꼴 변경

선택기가 있으므로 속성을 지정할 수 있습니다. CSS에 대한 길을 알고 있다면 간단히 마크 업을 입력하면됩니다. style.css 프로그램이 자동으로 처리합니다.

경험이 부족한 사용자의 경우 Dreamweaver를 사용하면 매우 쉽습니다. 에있어 CSS 디자이너 메뉴를 선택하고 표시되는 상자를 선택 취소하십시오 세트 표시. 당신이 할 때, 그것은 많은 추가 옵션을 잠금 해제합니다.

dreamweaver에서 CSS 옵션 사용

새 버튼을 사용하면 레이아웃, 텍스트, 테두리 및 배경 영역에서 많은 CSS 속성을 선택할 수 있습니다. 그만큼  버튼은 자신에게 규칙을 입력 할 수있는 옵션을 제공합니다.

글꼴 유형을 변경하려면 본문 상단의 옵션 (또는 아래로 스크롤). 다음 옵션에서 마우스 오버 글꼴 모음 클릭 기본 글꼴.

dreamweaver에서 글꼴 패밀리 변경

그러면 사용자 브라우저가 기본 글꼴을 표시 할 수없는 경우 대체 글꼴을 포함하여 일반적인 글꼴에 대한 여러 가지 옵션이 제공됩니다. 당신은 클릭 할 수 있습니다 폰트 관리 이 메뉴로 가려면 하단에 :

Adobe Edge 웹 글꼴

여기에서 Adobe의 무료 글꼴을 선택할 수 있습니다 Edge Web Fonts 서비스. 이름으로 글꼴을 검색하거나 왼쪽에있는 많은 필터 옵션을 사용하여 원하는 것을 찾을 때까지 선택 범위를 좁히십시오..

서체를 클릭하면 해당 글꼴이 Dreamweaver에 포함됩니다. 일단 그렇게하면 직접 사용하거나 커스텀 폰트 스택 자신의 대체 글꼴을 정의.

dreamweaver에서 사용자 정의 글꼴 스택 만들기

지금은 간단하게 끝난 그런 다음 기본 글꼴 다시. 이번에는 선택한 사용자 정의 글꼴을 선택하고 보이 아 – 필요한 모든 코딩을 포함하여 변경이 완료됩니다..

드림위버의 폰트 변경

당신이 클릭하면 style.css 상단에 파일을 추가하면 모든 마크 업이 추가 된 것을 볼 수 있습니다.

드림위버의 스타일 시트 업데이트

9 단계. 헤드 라인 중앙에 맞추고 크기 변경

텍스트가 여전히 더 좋아 보일 수 있습니다. 다음 작업은 중앙에 배치하고 글꼴 크기를 늘리는 것입니다. 이를 위해 다른 기능을 사용할 수도 있습니다 빠른 편집.

사용하려면 코드 뷰로 이동하여 편집하려는 부분을 마우스 오른쪽 버튼으로 클릭하십시오. 이 경우에는

까치발.

dreamweaver에서 빠른 편집 메뉴 열기

여기에서 빠른 편집 상단에. 아래에이 요소와 관련된 CSS가 열립니다. 이제 전체 스타일 시트 파일을 검색하지 않고도 추가 속성을 입력 할 수 있습니다 (매우 길 수 있음). 텍스트를 중앙에 배치하고 더 크게 만들려면 다음 코드를 추가하십시오.

글꼴 크기 : 42px;
텍스트 정렬 : 가운데;

입력 할 때 Dreamweaver는 입력하려는 항목에 대한 제안도 작성하여 훨씬 쉽게 만들 수 있습니다. 이것이 앞에서 언급 한 코드 완성 기능입니다..

완료되면 다음과 같습니다.

dreamweaver에서 빠른 편집을 통해 CSS 변경

라이브 뷰에서 텍스트가 이미 변경되었습니다. 이제 Esc 빨리 떠나려면 편집하고 스타일 시트로 이동하십시오. 새 CSS가 적절한 위치에 추가되었음을 알 수 있습니다.

꽤 멋지다?

그런데 CSS 속성의 의미가 확실하지 않으면 마우스 오른쪽 단추로 클릭하고 빠른 문서 (또는 Ctrl + K). 그러면 Dreamweaver가 설명을 제공합니다..

드림위버 빠른 문서

10 단계. 컨텐츠 추가

지금까지 배운 내용으로 기초 사이트를 구축 할 수 있습니다. 이 Dreamweaver 자습서를 위해 다음을 수행했습니다.

  • 제목과 단락에 정의 된 기본 글꼴
  • 내비게이션 바 추가 및 홈페이지에 대한 링크 생성
  • 안에 두 개의 상자가 더있는 내용에 대한 div 상자를 추가했습니다.
  • 그들 중 하나를 왼쪽과 오른쪽으로 이동 흙손 특성
  • 가로로 정렬 할 수 있도록 너비를 백분율로 제한
  • 순서가없는 목록을 포함하여 샘플 제목과 더미 텍스트를 왼쪽에 추가했습니다.
  • 양식을 작성했습니다 (아래의 드롭 다운 메뉴 사용). 끼워 넣다), 두 개의 텍스트 필드 및 제출 버튼
  • CSS 여백 및 패딩을 통해 요소 주위에 간격을 추가했습니다.
  • 배경색과 테두리 제공
  • 바닥 글 및 저작권 메시지 작성

결과는 다음과 같습니다.

고급 디자인의 웹 사이트

예제 코드 :

이것은 조금 발전된 것으로 모든 사람이 어떻게해야하는지 알지 못하므로 아래에서 HTML과 CSS를 찾아서 직접 재구성 할 수 있습니다. 먼저 HTML :





index.html

 




주요 내용의 샘플 제목

Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Pellentesque scelerisque idestest amet ornare. Suspendisse eget elit mi. 불완전한 경매 인 레오 비태 블 랜짓.

  • 에 티암 템퍼 스 우디 컨디셔 움 리버티 바리우스
  • Ut commodo risus finibus
  • Duis Odio lacus, 요소 식 피니 버스
  • 몰리스 dignissim enim.
  • Quisque molestie suscipit 오디오 벨 파 실리 시스

Curabitur vestibulum, lorci tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor 오디오. Nunc 효율성 turpis는 nulla vestibulum viverra를 sed했습니다. Maecenas iaculis mi ornare, dapibus lectus in, 파 실리 시스 니슬.

클릭 유도 문안 샘플!

Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Pellentesque scelerisque idestest amet ornare. Suspendisse eget elit mi.

Copyright © 2017 나의 상상의 웹 사이트

그리고 CSS :

@ 문자셋 "utf-8";

신체 {
배경색 : # F5F5F5;
여백 : 0px;
오른쪽 여백 : 0px;
여백-하단 : 0px;
왼쪽 여백 : 0px;
}

피,
ㅏ,
ul,
ol,
리,
상표,
입력{
폰트 패밀리 : 뮬리, 산세 리프;
글꼴 스타일 : 일반;
폰트 가중치 : 300;
글꼴 크기 : 17px;
}

h1, h2, h3, h4, h5 {
폰트 패밀리 : karla, sans-serif;
글꼴 스타일 : 일반;
폰트 가중치 : 400;
텍스트 변환 : 대문자;
}

#헤더 {
패딩 탑 : 25px;
안쪽 여백 : 25px;
배경색 : #FFFFFF;
경계-하단 : 4px 고체 # EB232F;
}

#header h1 {
폰트 패밀리 : 아구아 피나 스크립트;
글꼴 스타일 : 일반;
폰트 가중치 : 400;
글꼴 크기 : 42px;
텍스트 정렬 : 가운데;
여백 : 0px;
여백-하단 : 0px;
텍스트 변환 : 없음;
}

#항해 {
오른쪽 여백 : 자동;
왼쪽 여백 : 자동;
최대 너비 : 1140px;
여백 : 10px;
여백-하단 : 10px;
}

#navigation a {
색상 : # EB232F;
}

.메인 {
디스플레이 : 블록;
여백 : 15px;
오른쪽 여백 : 자동;
왼쪽 여백 : 자동;
여백-하단 : 15px;
클리어 : 둘 다;
오버플로 : 자동;
최대 너비 : 1140px;
}

.메인 # 메인 오른쪽 {
플로트 : 오른쪽;
폭 : 37.5 %;
디스플레이 : 블록;
}

.메인 # 메인-왼쪽 {
왼쪽으로 뜨다;
폭 : 57 %;
디스플레이 : 블록;
오른쪽 여백 : 20px;
}

.메인 # main-right .cta {
텍스트 정렬 : 가운데;
}

.주요 # main-right .form {
폭 : 92 %;
오른쪽 여백 : 자동;
왼쪽 여백 : 자동;
}

# main-right .form div {
여백-하단 : 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
폭 : 100 %;

}

.기본 # 주 오른쪽 # 버튼 {
텍스트 정렬 : 가운데;
패딩 탑 : 7px;
패딩 하단 : 7px;
왼쪽 여백 : 자동;
오른쪽 여백 : 자동;
위치 : 상대;
디스플레이 : 블록;
오른쪽 여백 : 36px;
왼쪽 여백 : 36px;
국경 : 없음;
배경색 : # EB232F;
색상 : #FFFFFF;
커서 : 포인터;
}

.바닥 글 {
디스플레이 : 블록;
패딩 탑 : 25px;
안쪽 여백 : 25px;
텍스트 정렬 : 가운데;
}

다음 단계를 보여주기 위해 이것을 예로 사용하려고합니다. 복잡해 보일지라도 이전에 보여준 것과 같은 방식으로 이것을 조합했습니다..

11 단계. 브라우저 및 모바일 장치에서 미리보기

우리는이 모든 것을 어떻게 했습니까? 우선, 우리는 웹 사이트 구축 경험이 여러분보다 약간 더 경험이 있습니다. 따라서 우리는 이미 올바른 웹 페이지를 만드는 방법에 대한 단계를 이미 가지고 있습니다..

둘째, 프로세스 속도를 높이는 데 유용한 매우 유용한 기능인 브라우저 미리보기를 사용하고 있습니다. Dreamweaver를 사용하면 브라우저 및 모바일 장치에서 웹 페이지를 실시간으로 볼 수 있습니다.

시작하려면 오른쪽 하단에서 실시간 미리보기 버튼을 클릭하십시오..

dreamweaver에서 미리보기 메뉴 활성화

미리보기 옵션이 열립니다.

dreamweaver의 실시간 미리보기 옵션

브라우저 이름 중 하나를 클릭하면 웹 사이트 프로젝트가 열립니다. 휴대 전화 나 태블릿으로 QR 코드를 스캔 할 수도 있습니다 (예 : 파이어 폭스 양자) 또는 표시된 주소를 브라우저에 입력하여 장치에서 실시간 미리보기를 시작하십시오..

이를 위해서는 Adobe ID와 비밀번호를 입력해야합니다. Dreamweaver에 가입해야합니다..

제일 좋은 부분: Dreamweaver에서 변경 한 내용은 변경 내용과 동시에 브라우저에 자동으로 표시됩니다..

이것이 사이트를 더 빨리 구성하는 데 어떻게 도움이 되었습니까? 우선, 화면 크기에 따라 브라우저의 표시가 Dreamweaver의 표시보다 원본에 더 가깝을 수 있습니다.

둘째, 브라우저에서 사이트를 확인하면 개발자 도구를 사용하여 변경 사항을 테스트 할 수 있습니다.

브라우저의 개발자 도구

Dreamweaver에서 보는 것과 매우 유사합니다. 그것들은 우리에게 더 친숙하므로 더 빨리 작업하고 스타일 시트에 코드를 복사하여 붙여 넣을 수 있습니다..

전화 버전을 보면 여전히해야 할 일이 많다는 것을 알 수 있습니다.

dreamweaver에서 모바일 실시간 미리보기

이것은 우리를 다음 지점으로 바로 인도합니다..

12 단계. 미디어 쿼리 추가

웹 사이트가 모든 기기에서 작동하게하려면 소위 미디어 쿼리를 추가해야합니다. 이것은 조건부 CSS 문으로 브라우저가 특정 화면 크기 또는 특정 장치의 위 또는 아래에만 스타일을 적용하도록 지시합니다. 이렇게하면 작은 화면에서 레이아웃을 변경할 수 있습니다.

지금까지는 전역 스타일 만 정의했습니다. 이는 전체 사이트에 적용되는 스타일을 의미합니다. 이제 작은 화면에 조건부 스타일을 추가하는 방법을 배웁니다..

먼저 CSS 디자이너. 코드를 추가하려는 파일이 아래에서 선택되어 있는지 확인하십시오. 출처. 아래 더하기 부호를 누르십시오 @미디어.

다음과 같은 옵션 패널이 제공됩니다.

dreamweaver의 미디어 쿼리 메뉴

미디어 쿼리의 조건 (예 : 적용되는 장치, 방향, 해상도 등)을 정의 할 수 있습니다. 더하기 부호를 사용하여 여러 조건을 추가 할 수도 있습니다..

우리의 예에서 더 중요한 것은 최대 너비 환경. 이를 통해 특정 최대 화면 크기에만 적용되는 사용자 정의 CSS를 정의 할 수 있습니다..

먼저 전화로 문제를 해결하고 싶다고 가정 해 보겠습니다. 최대 너비 375 픽셀 당신이 할 때, 당신은 하단에 CSS 코드를 볼 수 있습니다.

dreamweaver에서 미디어 쿼리 만들기

클릭하면 어떤 일이 일어날까요? 확인 화면 상단에 녹색 선이 나타납니다. 미디어 쿼리를 시각적으로 나타냅니다. 그것을 클릭하면 화면이 자동으로 해당 크기로 이동합니다.

dreamweaver에서 미디어 쿼리 만들기

13 단계. 조건부 CSS 추가

모바일 디자인을 수정하기 위해 가장 먼저해야 할 일은 사이트의 두 요소가 서로 옆에 정렬되도록하는 코드를 제거하는 것입니다. 공간이 충분하지 않습니다.

이전에 CSS를 조작 한 것과 같은 방식으로이 작업을 수행 할 수 있습니다. 이번에는 미디어 쿼리를 활성화 한 상태에서만 활성화해야합니다..

우선 – DOM보기에서 요소로 이동하십시오. 거기에서 새로운 CSS 선택자를 만듭니다. 그런 다음 자동, 흙손none (왼쪽으로 이동하지 않도록) 측면에 패딩을 추가하여 콘텐츠가 화면 가장자리에서 경계를 벗어나지 않도록합니다..

수정 된 모바일 디자인

훨씬 나아 보이지 않습니까? 같은 방식으로 페이지에있는 다른 모든 요소의 CSS를 변경하여 모두 올바르게 표시되도록 할 수 있습니다.

기본적으로 미디어 쿼리에 사용됩니다. 동일한 방법을 사용하여 레이아웃을 태블릿 및 기타 크기로 조정할 수 있습니다.

프로 팁 : 특정 기기 및 크기에 맞게 최적화하지 말고 대신 레이아웃에 따라 미디어 쿼리를 만드십시오. 즉, 레이아웃이 더 이상 보이지 않을 때 화면 크기로 재생하고 해당 지점에서 쿼리를 추가해야합니다..

한 가지 더 : 하단 모서리에 사전 설정된 장치 크기를 사용하고 추가하려는 지점을 찾았을 때 상단의 더하기 기호를 클릭하면 미디어 쿼리를 좀 더 쉽게 만들 수 있습니다..

dreamweaver에서 바로 가기를 통해 미디어 쿼리 만들기

14 단계. 서버에 사이트 업로드

우리는 사용하는 것이 좋습니다 블루 호스트 (사이트 링크) Dreamweaver 사이트 호스팅.

디자인 부분이 끝나면 사이트를 서버에 업로드 할 준비가 된 것입니다. 맨 처음에 언급했듯이 Dreamweaver는이를 매우 쉽게 만듭니다..

먼저 사이트> 사이트 관리. 메뉴에서 현재 웹 사이트를 선택하고 편집하다 왼쪽 하단에. 다음 창에서를 클릭하십시오 서버.

dreamweaver의 원격 서버 구성

FTP 서버에 연결할 모든 중요한 데이터를 입력하십시오. 이름은 귀하에게 달려 있으며 나머지는 (FTP 주소, 사용자 이름, 비밀번호) 호스팅 제공 업체에서 제공합니다. 파일을 저장할 디렉토리와 라이브 사이트의 웹 주소를 지정하는 것을 잊지 마십시오! Dreamweaver가 사이트 기준 내부 링크를 만들 수 있도록 마지막 부분이 중요합니다..

아래에 많은 더 많은 옵션이 있습니다 (저장시 파일을 자동으로 업로드할지 여부). 일반적으로 물건을 그대로 유지할 수 있습니다. 히트 저장 두 번 당신은 완료.

이제 파일 패널 (오른쪽 상단 또는 경유) 창> 파일)를 클릭하고 가장 왼쪽에있는 기호를 클릭하여 서버에 연결하십시오.

dreamweaver에서 원격 서버에 사이트 업로드

연결이 설정되면 업로드 할 파일을 선택하고 위쪽을 가리키는 화살표를 클릭하십시오. 완료되면 웹 주소에서 사이트를 사용할 수 있어야합니다.

잘 했어! Dreamweaver를 사용하여 간단한 사이트를 구축하고 업로드했습니다.!

Dreamweaver 자습서 – 최종 단어

Dreamweaver는 웹 사이트를 구축하는 환상적인 프로그램입니다. 직관적 인 사용자 인터페이스와 완전한 코드 편집기를 결합합니다. 이 혼합을 통해 초보자, 중급자 및 고급 사용자 모두가 고품질 웹 사이트를 쉽게 구축 할 수 있습니다.

초보자를위한이 Dreamweaver 자습서에서는 Dreamweaver 및 해당 기능을 소개합니다. 우리는 프로그램을 설정하고 첫 번째 사이트를 시작하는 방법을 보여주었습니다. 기본 HTML 구조를 작성하고 CSS로 스타일을 지정하는 방법을 배웠습니다. 또한 웹 사이트를 반응 형으로 만들고 서버에 업로드하는 방법도 살펴 보았습니다..

이제 Dreamweaver의 작동 방식과이를 사용하여 웹 사이트를 만드는 방법에 대해 제대로 이해했습니다. 이제 더 깊이 익히고 다음 단계를 알아내는 것은 당신에게 달려 있습니다.

잊지 마십시오 : Dreamweaver는 웹 사이트를 만드는 한 가지 방법 일뿐입니다. 더 많은 것이 있으며 여기에서 그에 대한 많은 정보를 찾을 수 있습니다. 행운을 빕니다!

전에 Dreamweaver를 사용해 보셨습니까? 당신의 의견 것입니다? 위에 추가 할 것이 있습니까? 아래의 의견 섹션에서 알려주십시오!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map