PDA

View Full Version : htm and Dreamweaver cs4


Lou
03-07-2010, 05:54 PM
I hope someone can help me. I'm working on an assignment formy course dreamweaver cs4. I'm given two htm documents pre built. I hade to make an external style sheet. ( css). I did that. I can't seem to get me my htm files to work with css sheet. I'm told I have to add id and class seletors to my htm pages. I'm looking for help to get started so i get the idea on how it's done.

domedia
03-07-2010, 06:07 PM
It sounds like you're not familiar with CSS, am I right?

Adobe has a nice section that teaches you about CSS and Dreamweaver:
http://www.adobe.com/devnet/dreamweaver/css.html

Lou
03-07-2010, 06:13 PM
It sounds like you're not familiar with CSS, am I right?

Adobe has a nice section that teaches you about CSS and Dreamweaver:
http://www.adobe.com/devnet/dreamweaver/css.html
If I show you a htm page and my css page, wuld you be able to see where i'm going wrong?

DWcourse
03-07-2010, 06:36 PM
If I show you a htm page and my css page, wuld you be able to see where i'm going wrong?

Absolutely.

There are basically 4 types of CSS rules:

id: Begins with a # and applies automatically to an object with the id specified. In other words the style rule #dog would apply to a paragraph with id dog (<p id="dog"> or any other html object with that id. (however you should only have one object per page with a given id)

tag: Applies to all instances of the specified tag. The style rule div would apply to all divs on your page.

class: Begins with a period and must be specifically applied to an HTML object using the class attribute (ie, the style rule .dog would apply to both <p class="dog"> and <h1 class="dog">

Compound: Combines the above type into a highly specialized rule. For instance #dog p would apply only to paragraphs inside and object named dog.

Lou
03-07-2010, 06:44 PM
Absolutely.

There are basically 4 types of CSS rules:

id: Begins with a # and applies automatically to an object with the id specified. In other words the style rule #dog would apply to a paragraph with id dog (<p id="dog"> or any other html object with that id. (however you should only have one object per page with a given id)

tag: Applies to all instances of the specified tag. The style rule div would apply to all divs on your page.

class: Begins with a period and must be specifically applied to an HTML object using the class attribute (ie, the style rule .dog would apply to both <p class="dog"> and <h1 class="dog">

Compound: Combines the above type into a highly specialized rule. For instance #dog p would apply only to paragraphs inside and object named dog.





This is my html page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
<link href="styles.css" rel="stylesheet" type="screen, projection"/>
</style>

</head>
<body>
<table width="760" border="0" align="center" cellpadding="10" cellspacing="0">


<tr>

<td colspan="2">HOME SERVICES SAMPLES CONTACT</td>
</tr>

<tr>
<td colspan="2"><p>Red River Web Design Co.</p>WEB DESIGN YOU CAN TRUST!</td>
</tr>

<tr>
<td width="534" valign="top"><p>WELCOME </p>
<p>Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit. Anim id est laborum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum link dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td width="186" valign="top"><p>TESTIMONIALS </p>
<p>Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Joe Bloe </p></td>
</tr>
<tr>
<td colspan="2" align="center">Your name - Dreamweaver - Assignment 3</td>
</tr>
</table>
</body>
</html>



My External CSS file:

@charset "utf-8";
/* CSS Document */
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #ffffff;
background: #FAFAFA;
margin: 0px;
}
.navigation {
background: #ff9900;
padding-left: 50px;
}
.navigation-links {
font-size: 14px;
font-weight: bold;
color: #FFFFFF;
display: block;
float: left;
height: 50px;
padding-top: 50px;
padding-right: 30px;
padding-left: 30px;
}
.navigation-hover {
color: #ff9900;
text-decoration: underline;
background: #333333;
}
.header {
background: #ff9900;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 50px;
border: 1px dashed #333333;
}
.tagline {
font-size: 14px;
margin: 0px;
padding-left: 10px;
}
.content {
background: #333333;
padding: 20px 20px 20px 50px;
border-left: 3px solid #FF9900;
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 3px;
border-top-color: #FF9900;
border-right-color: #FF9900;
border-bottom-color: #FF9900;
}
.heading-1 {
font-size: 15pt;
color: #333333;
margin: 0px;
}
.heading-2 {
font-size: 15pt;
padding: 6px;
}
link {
font-weight: bold;
color: #ff9900;
text-decoration: none;
}
.link-hover {
text-decoration: underline;
}
.sidebar {
padding-top: 20px;
padding-right: 20px;
padding-left: 20px;
background: #cccccc;
color: #333333;
border-right: 3px solid #ff9900;
}
.m-footer {
line-height: 14px;
background: #ff9900;
padding-top: 20px;
padding-bottom: 20px;
}
.definition-title {
font-size: 11pt;
font-weight: bold;
color: #666666;
padding-bottom: 10px;
border-bottom: 1px solid #333333;
}
.definition-description {
padding: 10px 10px 20px;
}



Could you tell me if you see any errors. and give me an example on how I go about adding Id and Class selectors. Thank you very much for your help.

domedia
03-07-2010, 07:09 PM
Nothing in your CSS file relates to anything in your HTML file, right now.
Start adding classes or ID to elements you want to style in your HTML document, and then create those CSS rules in your CSS file.

DWcourse
03-07-2010, 07:10 PM
You have a number of style classes created but you haven't applied them to anything in the html document.

In CS4, in the HTML document, choose the HTML object that you want to apply the style class to and then, in the Properties Inspector, select the style you wish to apply from the Class menu.

Lou
03-07-2010, 07:24 PM
Do I put my ID or Class selector in my html before: for example Id or class goes here <td colspan="2"><p>Red River Web Design Co.</p>WEB DESIGN YOU CAN TRUST!</td>

DWcourse
03-07-2010, 07:37 PM
I don't mean to be harsh but, if this is for a class, didn't they discuss using and applying CSS style rules with you?

Corrosive
03-08-2010, 07:38 AM
Also why is a class telling you to use tables? :roll: