All Articles Dreamweaver
드림위버 튜토리얼 파트 1에서 CSS를 학습 : HTML 요소를 재정의
Geoff Blake on Tue, February 8th | 0 comments
Learning how to work with CSS is absolutely critical to building contemporary websites. It's one of those things that we, as designers, have to hunker down and learn at some point. And even after you

CSS로 작업하는 방법을 배우는 것은 현대적인 웹사이트를 구축하기 위해 절대적으로 중요합니다. 우리가, 디자이너로, 아래로 쭈그리고 앉는 및 일부 시점에서 배워야 할 것들 중 하나입니다. 그리고 당신이 기초를 마스터 후에도 성장하고 확장하는 공간이 있단 말야. 당신은 새로운 속성이나 방법에 구체적인 결과를 달성하기 위해에 대해 배울 수 있습니다, 그리고 당신은 린 (Lean) '로 CSS를 유지하는 기술을 발견 N 가능한 의미할 수 있습니다.

In this tutorial post, we'll be taking a look at the fundamentals of working with CSS in Dreamweaver. You'll learn about two primary rule types, how to create them, and how to begin applying them throughout your site.

스타일이 작동하는 방법 이해

우선, 내가 당신을 물어 봐야, 당신은 다른 응용 프로그램의 일부에서 스타일에 대해 알고 계십니까? InDesign은 스타일을 가지고, 일러스트 레이터는 스타일을 가지고 있습니다 ... 도대체에도 Microsoft Word에서 스타일을하고 있습니다. 스타일은 단순히 서식 옵션 모음입니다. 예를 들어, 우리는 "강조"라는 스타일을 수도 있으며 강조 이내에 우리는 글꼴, 크기 및 색상을 설정했습니다. 이 시점에서, 우리는 문서 전체에 중점을 적용하실 수 있습니다, 물론, 어디는 우리가 그것을 사용, 우리는 사용되고있는 같은 글꼴, 크기 및 색상을거야. 우리가 돌​​아가서 원래의 강조 스타일로 변경할 경우도 그것이 우리의 문서에 사용되고 어디 다음 서식 즉시 업데이 트됩니다.

이 스타일은 전통적인 작동 방법입니다. 하지만, CSS는 더욱 좋은 생각이 걸립니다. 또는 귀하의 사이트의 모든 페이지에 - 대신 CSS로, 한 페이지 내에서 스타일 작업을보다가 페이지 그룹에 규칙의 집합을 적용할 수 있습니다. 규칙 중 하나를 수정, 그 변화는 당신이 "파일을 전체 사이트에 걸쳐 파급 선택할 수 있으므로 빨리

이제는 파워!

우리는 나아가 몇 가지 다른 빠른 지점 전에. 첫째, 용어 "스타일"과 용어는 "규칙"드림위버와 CSS에서 교환하는 데 사용됩니다. 때로는 드림위버는 사용할 용어 "스타일"및 기타 시간 사용 "규칙을." 많은 새로운 사용자는 이것과 가정 드림위버의 서로 다른 두 가지 이야기로 혼란스러워. 그것은하지 않습니다! 스타일과 규칙 같은거다.

둘째, 규칙 목록이 스타일 시트라고도합니다. 스타일 시트는 어느 특정 HTML 페이지 (이것은 내부 스타일 시트라고 함) 내에 위치해 있거나 페이지 이외의 별도의 파일 (외부 스타일 시트라고도 함)로 저장할 수 있습니다. 거기 당신은 스타일 시트로 할 수있는 멋진 것들이 있으며, 우리는 훨씬 더 상세하게 그들에 대해 이야기 드림위버 CS5 101 : 핵심 드림위버 CS5 .

이제 스타일의 작동과 작업 스타일 시트가 다의 감각을 얼마나 이해하는 것이, 우리가 작동할 수있는 CSS 스타일의 두 가지 기본 유형을 논의해야합니다 : HTML 요소 및 클래스 규칙을 재정의. 각각은 매우 강력하고, 구체적인 사용이 있습니다. 어디 보자.

에 봐 HTML 요소를 재정의

자, 주소를 먼저 HTML 요소를 재정의. 그들이 할 것은 일반, 재미 HTML을 가지고 코드 몇 라인 21 세기에 석기 시대에서 드래그하기 때문에이 스타일의 가장 좋아하는 유형입니다. 그리고 고맙게도 우리,​​ 드림위버 우리가하지 않으면, 우리는 코드를 볼 필요 없어, 전 무거운 일을 할거야.

HTML 요소를 재정의를 통해, 우리는 일반, 재미 HTML 요소를 복용하고 CSS의 통제를 받고 그들을 배치됩니다. 예를 들어, 테이블, 이미지, 제목, 단락 및 귀하의 페이지에 게재될 수있는 다른 거의 아무것도를 제어할 수 있습니다. 우리가 HTML 요소를 재정의하면 어떻게 기억하는 것이 중요하는 것은, 우리는 그 요소의 모든 발생을 조절하는거야. 예를 들어, CSS 규칙을 만드는 경우 재정의되는

, then all
elements on your page are now under the control of your CSS rule. If your redefined
rule resides in an external style sheet, then all tables across your entire site are now all controlled by a single CSS rule.

이다처럼 멋진, 그것은 당신이 원하는하지 않을 수 있습니다. 당신은 그들이 그랬던 것처럼 한 테이블을 제어하고 다른 남겨두고 가기를 원한다면? 그 수업 규칙 재생에 오는 곳이에요. 우리는 단지 약간 사람들을 들어가 있습니다. 지금은, 이제 HTML 태그를 재정의 빠른를 만들어 봅시다.

이 HTML 태그를 재정 만드는 방법은 다음과 같습니다

1 단계

CSS 스타일 패널의 아래쪽에서 새 CSS 규칙 아이콘을 클릭하십시오.

2 단계

나타나는 새 CSS 규칙 대화 상자에서 다운 메뉴 선택 유형 드롭에서 (재정의 HTML 요소) 태그를 선택합니다.

3 단계

선택 이름 필드에서 제어하고자하는 HTML 요소의 이름을 입력합니다.

당신이 요소 이름을 입력하면, 앵글 브래킷을 두십시오. 당신은 "통제하려고 즉, 경우에

," you'd simply type in "table."

오히려 요소의 이름을 입력하는 것보다, 당신은 선택 이름 필드의 오른쪽에있는 플라이 아웃 메뉴에서 선택할 수 있습니다.

4 단계

당신이 내부 스타일 시트 (전용이 문서) 또는 외부 스타일 시트 (새 스타일 시트 파일)에 새 규칙을 저장하려는 경우 대화 상자의 하단에있는 규칙 정의 풀다운 메뉴에서 선택합니다. 당신은 이미 귀하의 페이지에 연결된 외부 스타일 시트가있을 경우 또는, 당신의 이름을 선택하여 그곳을 저장하도록 선택할 수 있습니다.

확인을 클릭합니다.

5 단계

In the CSS Rule Definition dialog box that appears, begin applying the CSS formatting that you'd like to use for your new rule.


For example, if you're redefining a table, you may want to apply a background color, a font, margin settings, and so on. As you're working, click Apply in the CSS Rule Definition dialog box to preview your page. Any elements on your page that you've redefined using CSS will update.

6 단계

작업이 완료되면 확인을 누릅니다.

당신이 만드는 완료되면 사용자는 HTML 요소를 재정, 페이지에있는 HTML 요소의 모든 발생 지금은 당신이 CSS 규칙 정의 대화 상자에서 설정한 형식을 가지고 다니십시오. 아무것도에 서식을 적용할 필요는 이미 사용중인 뭔가를 재정의하기 때문에, 없습니다. 뿐만 아니라 다시 가서 길을 따라 언젠가는 당신의 페이지에 해당 HTML 요소를 삽입해야합니다, 그, 그것은 또한 CSS의 지배하에있을 것이다. 그것은 일을 매우 강력한 매우 효율적인 방법입니다.

이것은 단지 HTML 요소를 재정의 작업에 대한 간단한 소개이지만 그들은 웹 디자이너의 도구 상자의 그런 중요한 부분이야 왜 잘하면 당신이 볼 수 있습니다. 그들도, 작동 아주 쉽죠. 단지 10-20분위한 드림위버에서 그들과 함께 약간의 주위에 바이올린 그리고 당신이 그들과 속도까지 될 거예요.

자, 드림위버의 CSS에서 우리 모습을 계속 기대하고 우리가 수업 규칙 작업을 좀 봐 줄게 어디에 두 가지 기본 규칙 유형에 토론, 그래서 제 2 절 참여. 거기서 봐요!

2 부 기다릴 수없는 이유는 무엇입니까? 당신은 필요 없어! 고급 자습서가 곧 함께, 그 동안이 드림위버 자습서를 체크 아웃!

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: