All Articles Dreamweaver
드림위버 튜토리얼 파트 2에서 CSS를 학습 교실 규칙 만들기
Geoff Blake on Tue, February 15th | 0 comments
In Part One of our look at using CSS in Dreamweaver, I provided a rundown on a few key fundamentals, such as what styles are, how they work, what style sheets are. Remember, a style (also called a "ru

에서는 드림위버에서 CSS를 이용하여 우리의 모양 부 , 난 그런 스타일이 무엇인지와 같은 몇 가지 주요 기본에 대해 설명해을 제공, 그들은 작동 방법, 스타일 시트는 무엇입니까. 기억, 스타일 (또한 "규칙")를 단순히 형식 속성의 모음입니다, 그리고 스타일 시트는 스타일의 목록입니다.

Also in Part One, we discussed how to create Redefined HTML Elements, a CSS rule type. Recall that we weren't creating anything new per se, we were simply redefining what was already present on our page. This not only means that you don't have to apply your formatting manually to any content (since your content already exists on your page), but also that you're changing all instances of the HTML element that you've redefined. Now, you may not want that -- you may not want to redefine all paragraphs, for example; maybe only the first paragraph. And this is where class rules come into play.

With class rules, we name and create the rule completely from scratch, then go and apply the formatting where ever it's needed on our page. If you're familiar with styles from other applications, like Word, Pages, InDesign, and Quark, then you're already familiar with how class rules work.

테이블, divs, 제목, 본문, 수평 규칙, 목록 ... 작품 : 정말 좋은 건, 우리가 수업 모든 HTML 요소에 규칙을 적용할 수있다는 것입니다! 이것은 우리가 우리의 페이지 및 서식 통제를 얻을 수 있습니다. 그러니 수업 규칙을 만드는 살펴 보자, 우리는 그것을 적용하는 방법에 대해 설명하실 수 있습니다.

수업 규칙을 만드는 방법은 다음과 같습니다 ...

단계 - 1

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

단계 - 2

나타나는 새 CSS 규칙 대화 상자에서 다운 메뉴 선택 유형 드롭에서 (모든 HTML 요소에 적용할 수있는) 클래스를 선택합니다.

단계 - 3

새 클래스 규칙에 대한 이름을 선택 이름 필드에 입력합니다.

우리가 본질적으로 처음부터 수업 규칙을 작성하기 때문에, 우리는 우리가 원하는대로 이름을,하지만 클래스 규칙 이름에 공백이나 특수 문자를 사용하지 않도록하실 수 있습니다. 당신은 그래픽을 제어하는 클래스 규칙을 작성하는 경우 예를 들어, 귀하의 규칙 "ImageController"또는 이름이 있습니다 "PictureFixerUpper을." 당신은 사이드바를 만드는 경우 다음 규칙 "사이드바를."이름 이름 '은 그들을 그러나 당신처럼, 그리고 유용하고 의미있는 이름을 사용!

단계 - 4

대화 상자의 하단에, 당신이 내부 스타일 시트 "이 전용 문서"또는 외부 스타일 시트 "새 스타일 시트 파일"에 귀하의 규칙을 저장할 것인지 결정합니다.

단계 - 5

In the CSS Rule Definition dialog box, go nuts and have some fun setting some CSS properties. The properties that you decide to use really depend on what it is you want your new class rule to do. Here are a few ideas to consider: If you're controlling images, you might want to apply a border, a margin, and perhaps a float setting. If you're creating a sidebar for some text, head for the Type category and possibly the Block category. Maybe throw on a background color and some padding too. Again, it really depends on what you have in mind, what you want to create, and how you want it to look.
When you're done, click OK.

새 규칙의 CSS 스타일 패널의 상단에 나타납니다. 규칙의 이름이 기간 / 전체 중지에 의해 진행 이것도 확인할 수 있습니다. 클래스 규칙 이름은 항상 시대에 의해 진행되어야하며 당신이 (우리가 3 단계에서 다시 한 등) 규칙 이름을 지정하면 하나를 바꿔주지 않으면, 그때 드림위버는 자동으로 기간을 스틱 것입니다.

당신이 수업 규칙을 만들었습니다 이제, 당신의 페이지에 걸쳐 그것을 적용하는 시간이야. HTML 요소를 재정 달리로서, 이전에 언급한 클래스 규칙은 문서에 수동으로 적용해야합니다. 당신도 블록 수준 또는 인라인 HTML 요소, 규칙을 적용하는 방법에 따라, 당신은 페이지에 다른 결과를 얻을 수 있습니다. 이제이 작업을 수행하는 몇 가지 방법을 살펴 봅시다.

블록 수준의 HTML 요소에 서식을 적용하는 방법은 다음과 같습니다

단계 - 6

페이지에서, 당신이 포맷하려는 개체에 대한 단일 클릭합니다. 그것이 제목 또는 포맷하려는 단락의 경우 예를 들어, 그냥 텍스트에 커서를 놓습니다. 그것은 테이블, 사업부, 또는 이미지의 경우, 개체를 선택했는지 확인하십시오. 때때로, 하단 왼쪽 모서리에있는 상태 표시줄에있는 태그 선택기를 사용하면 이러한 큰 요소를 선택하려 할 때 유용합니다. 당신은 형식하려는 뭐든간에, 여기서 아이디어를 선택하는 것입니다.

단계 - 7

속성 검사기에서 클래스 메뉴에서 클래스 규칙을 선택합니다. 이것은 선택한 개체에 클래스 규칙을 적용합니다. 태그 선택기는 이제 선택한 HTML 요소뿐 아니라 클래스 규칙의 이름, 기간별로 진행을 나타냅니다 것을 확인할 수 있습니다. 예를 들어, . 우리가 코드보기에서이 예제를보고있다면, 그것은 이런식으로 생겼는데 :

. Notice that the rule name in code is not proceeded by a period.


That's how to apply formatting to a block level element. Let's see what happens if we try selecting text instead of simply clicking inside it.

Here's how to apply formatting to an inline element. It's only slightly different, but let's give it a try.

단계 - 8

Rather than single-clicking within some text, try selecting a word, phrase, or sentence. If you're coming from the print world, this is the equivalent to character formatting (as opposed to paragraph formatting).

단계 - 9

마찬가지로 전에 속성 검사기에서 수업 규칙을 선택합니다. 차이점은 이제 선택한 단어 또는 문장만을 포맷 도착한다는 것입니다. 태그 선택을 확인하고 그것은 무슨 일인지 말씀 드리죠. 이제 읽습니다 기간 및 수업 규칙의 이름 다음에, 예를 들어 . 코드보기에서는 읽을 것이다 . A는 인라인 요소입니다. 당신이 볼 수 있듯이, 같은 HTML 속성 (클래스) 사용 및 구문은 정확히이 이전과 동일하지만, 우리는 우리의 페이지에 대한 매우 다른 결과를 얻을 수 있습니다.

알고 그리고뿐만 아니라 방법 수업 규칙을 만들뿐만 아니라, 그것을 적용하는 두 가지 방법이 정말 멋져 보이는 사이트를 구축하고 개발하는 능력을 향상시킬 것입니다, 이해. 해피 stylin!

과 CSS에 대해 깊이 CSS를 탐색 .

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: