Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate.

Size: px

Start display at page:

Download "Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate."

Jessica McKenzie
6 years ago
Views:

Creating web pages using CSS and Dreamweaver CS3 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language.

1 Creating web pages using CSS and Dreamweaver CS3 Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL. CSS can be used locally by the readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braillebased, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. The content above came from Cascading in the Cascading Style Sheets refers to how browsers interpret your style sheet. There are 3 types of CSS scripts, Embedded, External (linked), and InLine. In the following lesson we're going to talk about embedded CSS scripting Let's take a look at what CSS looks like in Dreamweaver using the "Embedded" coding which is the styles are within the html code and not separate. To do this go to File > New > choose > blank page - HTML document - layout - none > Create

Next let's look at the Property Inspector to see how CSS can be set up using it.

Choose the Background color palette by left clicking on it and choose blue for color which is #000099. Choose the OK button to close the dialog.

Click here for more information. Next select the Code view to see what was created by Dreamweaver.

2 Next let's look at the Property Inspector to see how CSS can be set up using it. To set up Embedded CSS select the Page Properties button to access the page dialog or choose Modify > Page Properties. Choose the Background color palette by left clicking on it and choose blue for color which is # Choose the OK button to close the dialog. If you were trying to decide on a background color and wanted to see the color then choose > Apply, then the dialog box won't close on you. What does all the settings mean? Click here for more information. Next select the Code view to see what was created by Dreamweaver. Without knowing any CSS scripting you just created your first code or you've been creating it without realizing it. See below; <style type="text/css"> the opening tag identifies what the code type is and what formatting will take place for this page only to the closing tag </style> for the browser to know how to display the page. The body tag is telling the browser what color the background is to be, notice also that this is all located within the <head> tags </head>. body { background-color: #000099;

make up a rule. The Property identifies what to change, such as in this example "color," and Value instructs the browser in this case which color and in this example that would be the color blue.

3 Working with CSS isn't so bad and if you've been creating web pages before you've been using CSS. Want to know more - CSS Specifications - Cascading Part of Style Sheets Style Sheet Anatomy Example of a simple CSS rule; The Selector (element) and the Declaration block (what's between brackets) make up a rule. The Property identifies what to change, such as in this example "color," and Value instructs the browser in this case which color and in this example that would be the color blue. Let's create a New HTML document and look at other ways that Dreamweaver can add CSS to your page. Go to New > Blank Page > HTML > Layout - scroll down to - 3 columns absolutely positioned, header > DocType - leave the default > XHTML 1.0 and Layout CSS underneath leave default > Add to Head > select Create button.

4 This is what the page looks like. To see how the page is made you need to look at the code view, to do this select the Code button. Let's look at how dreamweaver builds a page using CSS.

5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled Document</title> <style type="text/css"> <!-- body { font: 100% Verdana, Arial, Helvetica, sans-serif; background: #666666; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ color: #000000;.thrColAbsHdr #container { position: relative; /* adding position: relative allows you to position the two sidebars relative to this container */ width: 780px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ background: #FFFFFF; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ border: 1px solid #000000; text-align: left; /* this overrides the text-align: center on the body element. */ /* Tips for absolutely positioned sidebars with header and footer: 1. Absolutely positioned (AP) elements must be given a top and side value, either right or left. (As a default, if no top value is given, the AP element will begin directly after the last element in the source order of the page. This means, if the sidebars are first element in the #container in the document's source order, they will appear at the top of the #container even without being given a top value. However, if they are moved later in the source order for any reason, they'll need a top value to appear where you desire. 2. Absolutely positioned (AP) elements are taken out of the flow of the document. This means the elements around them don't know they exist and don't account for them when taking up their proper space on the page. Thus, an AP div should only be used as a side column if you are sure the middle #maincontent div will always contain the most content. If either sidebar were to contain more content, that sidebar would run over the bottom of the parent div, and in this case the footer as well, and the sidebar would not appear to be contained. 3. If the above mentioned requirements are met, absolutely positioned sidebars can be an easy way to control the source order of the document. 4. If the source order is changed, the top value should be equal to the height of the header since this will cause the columns to visually meet the header. */.thrcolabshdr #header { height: 60px; /* if you're changing the source order of the columns, you'll may want to use a height on the header so that you can give the columns a predictable top value */ background: #DDDDDD; padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */.thrcolabshdr #header h1 { margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between

6 divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */ padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */.thrcolabshdr #sidebar1 { position: absolute; top: 60px; left: 0; width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */.thrcolabshdr #sidebar2 { position: absolute; top: 60px; right: 0; width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */ background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */ padding: 15px 10px 15px 20px; /* padding keeps the content of the div away from the edges */.thrcolabshdr #maincontent { margin: 0 200px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. */ padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */.thrcolabshdr #footer { padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */ background:#dddddd;.thrcolabshdr #footer p { margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space

7 between divs */ padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ float: right; margin-left: 8px;.fltlft { /* this class can be used to float an element left in your page */ float: left; margin-right: 8px; --> </style></head> <body class="thrcolabshdr"> <div id="container"> <div id="header"> <h1>header</h1> </div> <div id="sidebar1"> <h3>sidebar1 Content</h3> <p>the background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #maincontent div if it will always contain more content. </p> <p>donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p> </div> <div id="sidebar2"> <h3>sidebar2 Content</h3> <p>the background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #maincontent div if it will always contain more content. </p> <p>donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p> </div> <div id="maincontent"> <h1> Main Content </h1> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p> <h2>h2 level heading </h2> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> </html> Creating CSS and linking external CSS Now that we've seen Dreamweaver create CSS for us let's use the tools that Dreamweaver has to create

8 your first CSS web page from scratch. In this tutorial we'll create an External Style Sheet that we'll link too. Go to File > New > Layout <none> DocType (XHTML 1.0 Transitional) > Create Next before we start creating our web page we need to look at the CSS panel and how it works. To find the CSS panel go to Window > CSS Styles. The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or all of the rules and properties that are available to the document (All mode). A toggle button at the top of panel lets you switch between the two modes. The CSS Styles panel also lets you modify CSS properties in both All and Current mode.

Located at the bottom left of the CSS panel are 3 different types of

that rule only, The second is - Show List View - is every possible

would recommend for you when you're first learning how to use CSS

First thing to do is select the link below and copy (Save Picture As)

9 Located at the bottom left of the CSS panel are 3 different types of CSS views, the first is - Show only set Properties --> which is for that rule only, The second is - Show List View - is every possible properties available, and the third is - Show Category View - this I would recommend for you when you're first learning how to use CSS properties. Okay it time to get started on the new web page. First thing to do is select the link below and copy (Save Picture As) the images to your image folder. Click here to get images for your web page project.

Let's get started, first make sure your in Design View.

Starting from the left and moving to the right count five in and you'll find the Insert Div Tag icon.

Once the icon is selected a Insert Div Tag dialog box will open, choose or type in the following information

10 Let's get started, first make sure your in Design View. Then select the Common tab if you don't have it selected already. Starting from the left and moving to the right count five in and you'll find the Insert Div Tag icon. We're going to insert a div tag into the web page. Once the icon is selected a Insert Div Tag dialog box will open, choose or type in the following information that's below. Dreamweaver will add text into you div tag so it's easy to recognize it. This is where the Title image is going to be located in this div tag. With the text selected in the div tag go to Insert > Image. In the Image source dialog choose > divtitle.jpg file from your image folder.

Next the Image Tag Accessibility Attributes dialog will open, add in the Alternate text area " Title image " Welcome to Canada", then select the OK button.

Let's say someone that can't see well is using software to assisst them in reading web pages to give them information, also when you drag your cursor over the

If you don't add the Accessibility Attributes to an image then the software can only tell the user the name of the image name and nothing else.

11 Next the Image Tag Accessibility Attributes dialog will open, add in the Alternate text area " Title image " Welcome to Canada", then select the OK button. So what is this Accessibility Attributes? Let's say someone that can't see well is using software to assisst them in reading web pages to give them information, also when you drag your cursor over the image you'll get a popup of the text that you added. If the text on the web page isn't in a table then the software can read the information to them. If you don't add the Accessibility Attributes to an image then the software can only tell the user the name of the image name and nothing else. So the Alternate text will give the user this "Title image " Welcome to Canada." By law everyone is suppose to create web pages that are accessible to all. But as we all know that isn't the case and this is why CSS is so important for all of us to learn. If your text is still there in the div tag just select it and delete it.

The image is located in the div1 tag but we haven't created any code yet to tell the div tag where we would like to place it.

12 Take a look at the Code view to see what Dreamweaver created for us. Notice in the body tag you'll see the div tag with a class name that we added " titlebar", the div id is "div1", and the inserted image. The image is located in the div1 tag but we haven't created any code yet to tell the div tag where we would like to place it. To do this left click your cursor at the end of the Title tag in the header and then select the "Enter key" to create a return. Add the text in the red highlighted area below to your code, it has to be exact to work. Next we need to create a background color to do this go to Modify > Page Properties or Properties Inspector > Page Properties button. In the Page Properties dialog choose the Background color text box and type # which is a dark green color. Also look in the code after closing the page properties dialog and notice that the background tag was added to the Style tag.

13 Notice that the image has a curved corners and the color matches the background color. Now lets create another div tag to add an image to the left side of the web page. Select the Insert Div Tag add the following information. icon and

To fix this first we need to know the height of the title image to do this select the title image and in the Properties

14 In this div tag go to Insert > Image > select from your image folder > leftsideimage.jpg to insert it into the div tag. Once you do this it should look like the example below. So we have a problem the new image is on top of the title image. To fix this first we need to know the height of the title image to do this select the title image and in the Properties Inspector will give us that information which is 200 px. We need this to know the css information to be added to the second div tag.

Select the Code View, then copy the.titlebar and all the code that goes with it. Next after the closing curly bracket > paste the code and change the class name to.leftsideimage.

Next paste the same code again after the closing curly bracket again of the leftsideimage selector and rename this selector to.

15 Select the Code View, then copy the.titlebar and all the code that goes with it. Next after the closing curly bracket > paste the code and change the class name to.leftsideimage. Now to fix the overlapping image change the top setting to 200 pixels. Next paste the same code again after the closing curly bracket again of the leftsideimage selector and rename this selector to.canada_1 > top: 200px > left:356px, then a return which will give you a popup menu and select background > then color > and white for the color. This will be div tag 3 so you going to add another div tag to the code to put this all together. This is what the page should look like so far. F12 is the short cut key to view the page in a browser.

16 Yes it's really the end. :)

Faculty Web Pages: Editing the Template Prepared by Tamara Fudge, June 2008

Faculty Web Pages: Editing the Template Prepared by Tamara Fudge, June 2008 FacWeb 1 The following shows the contents of the FacWeb.txt document, with instructions for replacing certain items with your