비디오: [Do it! HTML5+CSS3 웹 표준의 정석 - 개정판] 27 - 반응형 웹 디자인 2024
Janine Warner
웹 디자인을 처음 사용하거나 HTML 페이지를 수년간 만들었다면 Adobe Dreamweaver CS6가 이상적인 도구입니다 귀하의 웹 사이트를 구축하십시오. 버전 CS6에서는 CSS (Cascading Style Sheet) 및 HTML5에 대한 최신 시작 화면과 최신 지원을 제공합니다. Dreamweaver는 전문 웹 디자이너뿐만 아니라 취미, 클럽, 가족 및 소규모 비즈니스를위한 사이트를 구축하려는 사람들에게 인기있는 프로그램입니다.
Adobe Dreamweaver CS6 시작 화면
Dreamweaver의 사용하기 쉬운 그래픽 인터페이스와 강력한 기능 목록을 통해 전문 웹 디자이너와 애호가 사이에서 인기있는 선택이 가능합니다. 새로운 버전이 나올 때마다 Dreamweaver CS6는 새로운 기능을 제공하지만 익숙한 시작 화면을 통해 시작할 수 있습니다.
텍스트 그림자를 생성하는 CSS3 코드는
h1 {text-shadow: 2px 2px 3px # 000;}
코드의 숫자는 텍스트 그림자가 오른쪽으로 2 픽셀, 3 픽셀 흐림 효과가있는 텍스트 아래의 픽셀 또한 음영은 검은 색으로 만들어지며 약식 16 진수 # 000으로 지정됩니다.
텍스트 그림자에 대한 규칙을 작성할 때 최대 네 개의 값을 지정할 수 있습니다:
수평 및 수직:
-
처음 두 숫자 값이 필요하며 수평 및 수직 오프셋을 지정합니다. 텍스트 (가로)와 텍스트의 오른쪽 (세로). 흐리게 반경:
-
세 번째 값은 그림자의 흐림 정도를 지정합니다. 흐림 반경을 포함하지 않으면 기본값은 0이며 그림자는 단색으로 나타납니다. 색상:
-
네 번째 값은 그림자의 색상을 지정하며 16 진수 색상 코드 또는 RGBa 색상 코드를 사용하여 정의 할 수 있습니다. 이미지에 표시된대로 CSS 스타일 패널의 아래쪽에있는 속성 패널을 사용하여 텍스트 그림자를 추가 할 수 있습니다.이렇게하려면 다음 단계를 수행하십시오.
CSS 스타일 속성 창의 왼쪽에있는 속성 추가 링크를 클릭하십시오.
-
드롭 다운 목록에서 CSS3 스타일 규칙 이름, 텍스트 섀도우를 입력하거나 스타일 규칙을 선택하십시오.
-
왼쪽에 이름이 나타나면 오른쪽에 작은 화살표가 나타납니다.
텍스트 그림자의 오른쪽에있는 화살표를 클릭하여 선택합니다.
-
상자가 나타납니다.
X 및 Y 오프셋, 흐림 반경 및 색상을 입력합니다.
-
웹 디자이너를위한 웹 사이트 및 리소스
Adobe Dreamweaver 또는 다른 웹 디자인 소프트웨어를 사용하든 경험이 풍부한 웹 디자이너는 온라인 리소스를 참조하여 자신의 기술을 따라 잡고 웹 사이트에 특별한 기능을 추가 할 수 있습니다. 이 목록을 통해 웹 디자인 프로젝트에 도움이되는 웹 사이트 및 온라인 리소스를 쉽게 찾을 수 있습니다.
오디오 및 동영상 호스팅 서비스:
-
YouTube
-
Vimeo
-
SoundCloud
-
블로깅 및 CMS 프로그램
-
-
Blogger
-
Joomla
-
MovableType
-
TypePad
-
Tumblr > 워드 프레스
-
소셜 미디어 공유 서비스
-
추가
-
-
로커츠 공유
-
트래픽보고 서비스:
-
Google 웹 로그 분석
-
-
Yahoo! 웹 분석
-
HubSpot
-
인기있는 웹 브라우저:
-
Apple 사파리
-
-
Google 크롬
-
Microsoft Internet Explorer
-
Mozilla Firefox
-
Opera
-
웹 브라우저 테스트 서비스:
-
Adobe 브라우저 실험실
-
-
BrowserShots
-
크로스 브라우저 테스팅
-
Spoon (이전 Xenocode)의 브라우저 샌드 박스
-
Dreamweaver, CSS 및 웹 디자인 리소스:
-
Dreamweaver 개발자 센터
-
-
DigitalFamily의 웹 디자인 교육. com
-
W3 HTML5 및 CSS3 리소스 변환
-
A List Apart
-
