Cascading Style Sheets Written by: Steven D. Anderson, Ph.D.
|
|
|
- Kerrie Elliott
- 7 years ago
- Views:
Transcription
1 Cascading Style Sheets Written by: Steven D. Anderson, Ph.D. Resources WestCIV Complete Style Guide: Tizag.com: Tizag.com CSS Reference: Inline Style Sheets Internal, External and Inline Style Sheets * Style information goes around text, much like the old-fashioned <FONT> tags * Like the old <FONT> tags, the style only applies to that text * This is the weakest implementation of style sheets * Most commonly used when using layers (<DIV> tag). (More on that later). * Create a new file in Dreamweaver and call it cssinline.html * In Code View, insert the text below cssinline.html <span style="color: red; font-family: 'Arial,Helvetica', sans-serif "> This text is styled in red with Arrial or Helvetica font, if available.</span> * Save the file cssinline.html and check it in a browser. Internal Style Sheets * Also called an Embedded Style Sheet * Style information goes in the <HEAD> section of the document * Styles are available to use on other text in this document * Styles ARE NOT available for use in other documents * Create a new file in Dreamweaver and call it cssinternal.html * In Code View, insert the text on the left below <html> <head> <title>style Sheets </title> <style type="text/css">.large24 { cssinternal.html This specifies the style information for.large24
2 font-size: 24px; </style> </head> <span class="large24">this text is styled as part of an Internal Style Sheet.</span> </html> This calls on the large24 style for the selected text * Save the file cssinternal.html and check it in a browser. External Style Sheets The External CSS File * An external file holds the style information (i.e. stylesheet.css) * The HTML file just contains a link to that style sheet * The styles contained in the external style sheet can be used by all of the files on your site * In Notepad (PC) or SimpleText (Mac), create a new file called stylesheet.css. - Save it in the same folder as your other HTML files for this lesson. * Insert the text below stylesheet.css.large24 { font-size: 24px; * Save the file stylesheet.css The HTML File * Create a new file in Dreamweaver and call it cssexternal.html * In Code View, insert the text on the left below <html> <head> <title>style Sheets</title> <link href="stylesheet.css" rel="stylesheet" type="text/css"> </head> <body> <span class="large24">this text is styled as part of an External Style Sheet.</span> cssexternal.html This connects the HTML file to the CSS file This calls on the large24 style from the external style sheet
3 </html> * Save the file cssexternal.html and check it in a browser. Why are they Called Cascading? * A web page gets it style information in the following order of priority: 1). Inline: (Overrides Internal and External) 2). Internal: (Overrides External) 3). External * You can specify styles that will apply to all of the pages on your site in an External Style Sheet, and then override them with Internal or Inline Styles when you need to make exceptions to those styles. Kinds of Styles *** NOTE: For these examples, we ll use an Internal Style Sheet, placing the CSS in the <HEAD> section of the document Redefining an HTML Tag * So far we ve been applying the kind of CSS style we ll cover in #2 below, a Class. * Another powerful way to use CSS is to re-define a tag * If the style information get removed, the tag goes back to normal * It maintains the tags original properties, i.e. an <H3> tag always puts a paragraph-like break after it * Create a new file in Dreamweaver and call it redefinetag.html * In Code View, insert the text on the left below <html> <head> <title>style Sheets </title> <style type="text/css"> h3 { font-size: 24px; font-weight: bold; h4 { font-size: 18px; font-weight: bold; </style> redefinetag.html This specifies the style information for the tags <H3> and <H4>
4 </head> <H3>This is H3 Text</H3> <H4>This is H4 Text </H4> </html> This calls on the <H3> style This calls on the <H4> style * Save the file redefinetag.html and check it in a browser. Class * Starts with a period (i.e..large24) * You get to name your own style * There are two ways to apply: 1. Tags - Tag maintains its original properties, but ADDS properties to the tag 2. Selections of Text - Creates a <span> tag 1. Class Applied to a Tag * We will apply the large24 class to the <P> tag * Create a new file in Dreamweaver and call it classtag.html * In Code View, insert the text on the left below <html> <head> <title>style Sheets </title> <style type="text/css">.large24 { font-size: 24px; </style> </head> <p class="large24">this style is applied to the entire tag.</p> </html> classtag.html This specifies the style information for.large24 This calls on the large24 style for the selected <P> tag * Save the file classtag.html and check it in a browser. * We could have more than one class of <P>. Another paragraph could use a different style. 2. Class Applied to a Selection of Text: <span> * We will apply the large24 class to selected text
5 * Create a new file in Dreamweaver and call it classselection.html * In Code View, insert the text on the left below classselection.html <html> <head> <title>style Sheets </title> <style type="text/css">.large24 { font-size: 24px; </style> </head> <p>this style is applied <span class="large24">only to a selection of text</span> within this paragraph.</p> </html> * Save the file classselection.html and check it in a browser. Advanced CSS Selectors * There are 4 ways to utilize Advanced CSS Selectors: 1. Groups of Tags 2. Contextual Selectors 3. Link Pseudo Class Selectors 4. IDs This specifies the style information for.large24 This calls on the large24 style for the selected text 1. Groups of Tags * We will apply the blue color to <H1>, <H2>, <H3> and <H4> tags. * We will allow <H4> to additionally have a Courier font. * We do this in cases where we want multiple tags to have the same properties and don t want to have to specify them in each style rule. * Create a new file in Dreamweaver and call it selectorsgroup.html * In Code View, insert the text on the left below <html> <head> <title>style Sheets </title> <style type="text/css"> h1, h2, h3, h4 { color: blue; selectorsgroup.html This specifies the style information for <H1>, <H2>, <H3> and <H4> tags ** NOTE: Tags are separated by a COMMA
6 h4 { font-family: Courier, Courier New; </style> </head> <H3>This is H3 Text</H3> <H4>This is H4 Text </H4> </html> Both <H3> and <H4> will be blue <H4> will also have a Courier font face * Save the file selectorsgroup.html and check it in a browser. 2. Contextual Selectors * Used when you want to style a particular combination of tags in a certain order * We will apply a green color and Courier text whenever a <TD> is followed by a link <A HREF> - This example shows a way to make links within a table look different from other links. * Create a new file in Dreamweaver and call it selectorscontextual.html * In Code View, insert the text on the left below selectorscontextual.html <html> <head> <title>style Sheets </title> <style type="text/css"> td a { color: #00CC00; font-family: "Courier New", Courier, mono; </style> </head> <table width="100%" border="1"> <tr> <td> <a href="about.html">here is a link</a> </td> </tr> </table> </html> This specifies the style rules for a situation where a <TD> is followed by a link ** NOTE: Tags are separated by a SPACE Here is <TD> followed by a link *** NOTE: The tags must be used in this order. If we had specified instead bold followed by italic, the tags would have to be <B><I>Text here</b></i>, not <I><B>Text here<b></i> * Save the file selectorscontextual.html and check it in a browser.
7 3a. Link Pseudo Class Selectors (Redefining Links) * Allows you to redefine the <a> tag. * Allows a rollover effect with a:hover * Create a new file in Dreamweaver and call it selectorspseudo1.html * In Code View, insert the text on the left below <html> <head> <title>style Sheets </title> <style type="text/css"> a:link { font-size: 12px; color: #0000FF; text-decoration: none; a:visited { font-size: 12px; color: #4444FF; text-decoration: none; a:hover { font-size: 12px; color: #0000FF; text-decoration: underline; a:active { font-size: 12px; color: #4444FF; text-decoration: none; </style> </head> <a href="about.html">click here</a> </html> selectorspseudo1.html * Save the file selectorspseudo1.html and check it in a browser. This specifies the style information for a links, visited links, active links and for when the mouse hovers over a link. Tags must be in this order: - link - visited - hover - active A standard link 3b. Link Pseudo Class Selectors (Different Links for Different Purposes) * Allows you to create different types of links for different purposes * Using the file selectorpseudo1.html, re-save it as selectorspseudo2.html
8 * In Code View, add the text in orange below <html> <head> <title>style Sheets </title> <style type="text/css"> a:link { font-size: 12px; color: #0000FF; text-decoration: none; a:visited { font-size: 12px; color: #4444FF; text-decoration: none; a:hover { font-size: 12px; color: #0000FF; text-decoration: underline; a:active { font-size: 12px; color: #4444FF; text-decoration: none; a.lesson:link { font-family: Courier, Courier New; font-size: 11px; color: #00DD00; font-weight: bold; text-decoration: none; a.lesson:visited { font-family: Courier, Courier New; font-size: 11px; color: #00DD00; font-weight: bold; text-decoration: none; a.lesson:hover { font-family: Courier, Courier New; font-size: 11px; selectorspseudo2.html This section specifies styles for another type of link we ll call lesson
9 color: #00AA00; font-weight: bold; text-decoration: underline; a.lesson:active { font-family: Courier, Courier New; font-size: 11px; color: #00DD00; font-weight: bold; text-decoration: underline; </style> </head> <a href="about.html">here is the regular link</a><br /> <a class ="lesson" href="about.html">here is a different type of link</a> </html> The standard link The different type of link * Save the file selectorspseudo2.html and check it in a browser. 4. IDs * Starts with a pound sign (i.e..#header) * Used to identify objects on a page * Can only be used once on a page * Often used to ID layers or images so they can be tracked * Create a new file in Dreamweaver and call it selectorsid.html * In Code View, insert the text on the left below selectorsid.html <html> <head> <title>style Sheets </title> <style type="text/css"> #header { position: relative; visibility: visible; z-index: 1; background-color: #000000; color: #99FF99; </style> </head> <p id="header">this text can only be used once on this page.</p> This specifies the style information for the header ID Here is <P> with an ID of header
10 </html> *** This is mainly used for keeping track of layers. <DIV> (More on that to come) * Save the file selectorsid.html and check it in a browser. Setting up Dreamweaver MX 2004 for CSS * Dreamweaver MX 2004 automatically uses CSS for text, instead of the old-fashioned HTML font tags. * Create a new file in Dreamweaver and call it dwcsslesson1.html * Edit > Preferences > ( General category) - See what the Font and Size boxes look like in the Properties Inspector with it checked and unchecked. _X_ Use CSS instead of HTML tags Use CSS instead of HTML tags CSS in Dreamweaver MX 2004 Create Styles with an Internal Style Sheet (Using the Properties Inspector) * Create a new file in Dreamweaver and call it dwcssinternal.html * Type some text on the screen and select it with your mouse * Properties Inspector: Size > 24 - This creates a style called style1 - Rename this style by clicking on the drop-down arrow next to the Style box
11 - Call it large24 - You can now use this style on other text. * In Dreamweaver: Code View (Notice this CSS) <style type="text/css">.large24 {font-size: 24px </style> * Save the file dwcssinternal.html and check it in a browser. Create Styles with an Internal Style Sheet (Using the CSS Styles Tab) * Open the file dwcssinternal.html * Design Panel > CSS Styles tab * Click on the New CSS Style button * Give it the name.medium18 * Select the This document only box to make an Internal style sheet - Click OK
12 * Create the style as such - Click OK * Type some more text on the screen. * Properties Inspector > Style > Apply the new style.medium18 Editing the Style * Design Panel > CSS Styles tab - Click on the style you want to edit - Click on the Edit Style Sheet button Further Adjustments to the CSS * Design Panel > CSS Styles tab: Select the.medium18 style to adjust it. * Tag Inspector Panel > Relevant CSS tab
13 * Experiment with the settings and check the code in Code View. * Save the file dwcssinternal.html and check it in a browser. Create Styles with an External Style Sheet * Create a new file in Dreamweaver and call it dwcssexternal.html Creating or Attaching a New Style Sheet * Design Panel > CSS Styles tab * Click on the Attach Style Sheet button * File/URL: Type stylesheet.css * Add as: Link - Click OK
14 *** NOTE: To Attach an Existing Style Sheet * This allows us to create a new file, but attach a style sheet that we ll use for all of the pages on the site * Design Panel > CSS Styles tab * Click on the Attach Style Sheet button, then browse to the.css file you want to attach Creating a Style Using the External Style Sheet * Design Panel > CSS Styles tab * Click on the New CSS Style button * Use the setting below to use the External style sheet: * Create the.small12 style style using the following settings: - Font: Arial, Helvetica, sans-serif - Size: 12 * Create some text in the file dwcssexternal.html, select it, and apply the.small12 style * Save the file dwcssexternal.html and check it in a browser. Using Class in Dreamweaver *** For the next examples, we ll place the styles in an Internal Style Sheet * Recall that there are two ways to apply Class selectors: 1. Tags - Tag maintains its original properties, but ADDS properties to the tag 2. Selections of Text - Creates a <span> tag * Create a new file in Dreamweaver and call it dwcssclass.html * Click on the New CSS Style button - Selector Type: Class (as below)
15 * Create a style called.large24 using the following settings: - Font: Arial, Helvetica, sans-serif - Size: 24 - Weight: bold * Type a few lines of text, and create a paragraph break between each * Apply the.large24 style to both a tag and a selection of text, as below 1. Tags * Use the Tag Selector to select a <P> tag: - (Make sure the document window is maximized in order to see the Tag Selector ). * Apply the Large24 style: 2. Selections of Text <span> * Select some text on the screen: * Apply the Large24 style: <p class="large24">this is an example of applying CSS to an entire tag. In this case, all of the text is contained within the same paragraph. </p> <p>this is a CSS page. <span class="large24">this example shows how to apply CSS to a selection.</span> All of this text is part of the same paragraph. * Save the file dwcssclass.html and check it in a browser. Redefining Tags in Dreamweaver * Create a new file in Dreamweaver and call it dwcsstag.html * Click on the New CSS Style button - Selector Type: Tag (as below)
16 - The drop-down menu allows you to select tags, or you can type in your own. * Tag: Using the drop-down menu, select h6 - Click OK * Use the following settings: - Font-family: Arial, Helvetica, sans-serif - Font-size: 10px - Font-weight: bold * Create some text in the file dwcsstag.html, select it, and apply the.h6 * Save the file dwcsstag.html and check it in a browser. Advanced CSS Selectors in Dreamweaver * Recall that there are 4 ways to utilize Advanced CSS Selectors: 1. Groups of Tags 2. Contextual Selectors 3. Link Pseudo Class Selectors 4. IDs 1. Groups of Tags * Create a new file in Dreamweaver and call it dwcssgroup.html * Click on the New CSS Style button - Selector: (Use the values below) - Separate the tags with COMMAS - Selector Type: Advanced (IDs, contextual selectors, etc) (as below) - Click OK
17 * Use the following settings: - Font-family: Arial, Helvetica, sans-serif - Font-weight: bold - Color: #CC6600 * Create some text in the file dwcssgroup.html and apply the following tags.h1, h2, h3 and h4 * Note that all the headers take on the properties defined in the style, while maintaining the original header properties. * Save the file dwcssgroup.html and check it in a browser. 2. Contextual Selectors * Create a new file in Dreamweaver and call it dwcsscontext.html * Click on the New CSS Style button - Selector: (Use the values below) - Separate the tags with SPACES - Selector Type: Advanced (IDs, contextual selectors, etc) (as below) - Click OK * Use the following settings: - Font: Courier New, Courier, mono - Color: #339900; * Using the file dwcsscontext.html, create a table and place a link inside a table cell <td>.
18 * Save the file dwcsscontext.html and check it in a browser. 3a. Link Pseudo Class Selectors (Redefining Links) * Allows you to redefine the <a> tag, along with visited and active link colors * Allows a rollover effect with a:hover * Create a new file in Dreamweaver and call it dwcsspseudo.html * Click on the New CSS Style button - Selector: a:link - Selector Type: Advanced (IDs, contextual selectors, etc) (as below) - Click OK * Use the following settings: - Font-family: Arial, Helvetica, sans-serif - Font-size: 12px - Color: #0000FF - Text-decoration: none - Click OK * Repeat these steps for the following: a:visited font-size: 12px; color: #4444FF; text-decoration: none;
19 a:hover font-size: 12px; color: #0000FF; text-decoration: underline; a:active font-size: 12px; color: #4444FF; text-decoration: none; * Save the file dwcsspseudo.html and check it in a browser. Make sure you roll over the link. It should look like below: 3b. Link Pseudo Class Selectors (Different Links for Different Purposes) * Allows you to create different types of links for different purposes * Using the file dwcsspseudo.html, re-save it as dwcsspseudo2.html * Click on the New CSS Style button - Selector: a.lesson:link - Selector Type: Advanced (IDs, contextual selectors, etc) (as below)
20 - Click OK * Use the following settings: - Font-family: Courier New, Courier, mono - Font-size: 11px - Color: #00DD00 - Font-weight: bold - Text-decoration: none - Click OK * Repeat these steps for the following: a.lesson:visited font-family: Courier New, Courier, mono font-size: 11px color: #00DD00 font-weight: bold text-decoration: none a.lesson:hover font-family: Courier New, Courier, mono font-size: 11px color: #00AA00 font-weight: bold text-decoration: underline a.lesson:active font-family: Courier New, Courier, mono font-size: 11px color: #00DD00 font-weight: bold text-decoration: underline * Create a link on the page dwcsspseudo2.html * To apply the lesson style to the link, select the text and use the Properties Inspector as below:
21 * Save the file dwcsspseudo2.html and check it in a browser. You should have two different link styles. Make sure you roll over the links. They should look like below: 4. IDs * Starts with a pound sign (i.e..#header) * Used to identify objects on a page * Can only be used once on a page * Often used to ID layers or images so they can be tracked * Create a new file in Dreamweaver and call it dwcssid.html * Click on the New CSS Style button - Selector: (Use the values below) - Start the style with # (POUND SIGN). Call it #header - Selector Type: Advanced (IDs, contextual selectors, etc) (as below) - Click OK - Create the style by changing the font, size, weight and color
22 Applying the ID to a tag * Create some text on the file dwcssid.html * Using the Tag Selector, right click on the tag to select the #header ID * Save the file dwcssid.html and check it in a browser. Editing the CSS File vs. Using the Dreamweaver Panels * You may find it easier to make changes to the CSS file by simply opening the file and typing in changes of copying and pasting. * To open a stylesheet, just double-click on it in the CSS Styles panel
23 Creating Layers for Positioning CSS at Work (Sample Applications) * Create a new file in Dreamweaver and call it layers.html * Insert Bar > Draw Layer Icon: Draw a layer box in the upper left hand corner, as below * Click inside the Layer * Type some text for links in the box, as below: * Click on the Layers Handle to select it (see below) * Properties Inspector: Notice the name of the layer (Layer ID) is Layer 1 - You can change the layer name if you desire
24 * Draw another Layer and place the image called lab.jpg inside it: * Click on the edge of the layer and resize the layer using the layer handles * Finally, draw one more layer with some text
25 * Save the file layers.html and check it in a browser. Converting Layers to Tables and Tables to Layers * Modify > Convert > (Select the appropriate option) Positioning Using an External Style Sheet (Using ID) This allows you to create a layout that you can apple to every web page. And, if you need to make a change to the layout, you make it in the external file and it affects all the pages on your site. * Using the file layers.html, rename it layersexternal.html * Link the file layersexternal.html to an external style sheet file you call stylelayers.css * Once you have designed the Layer layout you want for your pages, find the following tag in the file layersexternal.html: <div id="layer1" style="position:absolute; left:13px; top:12px; width:184px; height:128px; z-index:1"> *** z-index:1 (This indicates the stacking order of multiple layers. Higher numbers are on top). * Copy and paste the text to stylelayers.css, and alter it as so: #Layer1 { position:absolute; left:13px; top:12px; width:184px; height:128px; z-index:1 * Replace the tag above in your layersexternal.html file with: <div id="layer1 > * With both files in Code View on your screen, change the position of the layer in layersexternal.html, and notice it changes the position information in stylelayers.css, as below
26 Show/Hide Layers Example 1: Example 2: In this lesson, we will start with only Layer 1 showing, and allow the user to show the other layers by clicking on the links in Layer 1. * Use the file called layers.html and rename it showhide.html * Design Panel > Layers Tab > * Layer 1: Select the Link 1 text (as below) * Properties Inspector: Place a pound sign in the Link field, as below
27 * Tag Inspector Panel > Behaviors Tab > Click on the + sign - Show-Hide Layers - Use the settings below: * Do the same series of steps for Link 2 with the following settings: - layer Layer1 - layer Layer2 (hide) - layer Layer3 (show) * Save the file showhide.html and check it in a browser. *** NOTE: You can also make the Layers appear onmouseover, instead of onclick. - Tag Inspector Panel > Behaviors Tab > Use the drop-down menu to change the setting, as below Image Float (Simple) Example: * Create a new file in Dreamweaver and call it imagefloat.html * Use the image lab.jpg
28 <style type="text/css"> #imgback { background: url("lab.jpg") no-repeat; height: 700px; #img { width: 168px; height: 116px; padding: 0; float: left; clear: left; </style> <table width="750"> <tr> <td> <div id="imgback"> <div id="img"></div> <p class="medtext">text that wraps around goes here. Notice that it nested inside the imgback div. </p> </div> </td> </tr> </table> imagefloat.html * Save the file imagefloat.html and check it in a browser. Background Image <DIV> that specifies width & height of the background image Background Image Empty < DIV> that specifies width & height of the background image. Image Float: Ragged Wrapping (Sandbagging) Example 1: (The red lines around it are just to show the empty <divs>) Example 2: * Create a new file in Dreamweaver and call it sandbagging.html * Use the image camerawomen.jpg STEP 1: Place the following into the head section of the document. STEP 2: Place the following into the body section of the document to make the background image shows up. sandbagging.html <style type="text/css"> #imgback { background: url("camerawomen.jpg") no-repeat; height: 132px; </style> <table width="750"> <tr> <td> <div id="imgback"> </div>
29 STEP 3: Draw each layer in Dreamweaver to conform to the variations in the image. </td> </tr> </table> STEP 4: In Dreamweaver, Code View : - Remove these: position:absolute; - Add these to the layer tags: padding:0; float: left; clear: left; STEP 5: - Cut and paste the layer tags (such as shown in STEP 4) into the head of the document in the <style> section. - Change the formatting to look like this STEP 6: Place the following text into the document between the tags in red. i.e.: Dreamweaver might create this: <div id="layer1" style="position:absolute; left:20px; top:46px; width:122px; height:16px; z-index:1; padding:0; float: left; clear: left"></div> #Layer1 { left:20px; top:46px; width:122px; height:16px; padding:0; float: left; clear: left; z-index:1 #Layer2 { left:10px; top:65px; width:141px; height:15px; padding:0; float: left; clear: left; z-index:2 #Layer3 { left:10px; top:84px; width:132px; height:17px; padding:0; float: left; clear: left; z-index:3 #Layer4 { left:10px; top:102px; width:137px; height:17px; padding:0; float: left; clear: left; z-index:4 #Layer5 { left:10px; top:121px; width:140px; height:19px; padding:0; float: left; clear: left; z-index:5 #Layer6 { left:10px; top:140px; width:145px; height:31px; padding:0; float: left; clear: left; z-index:6 <table width="750"> <tr> <td> <div id="imgback"> <div id="layer1"></div> <div id="layer2"></div>
30 * Save the file sandbagging.html and check it in a browser. <div id="layer3"></div> <div id="layer4"></div> <div id="layer5"></div> <div id="layer6"></div> <p>this is the text that will raggedly wrap around the background image etc. etc.</p> </div> </td> </tr> </table> **** THE SECTION THAT FOLLOWS IS UNDER DEVELOPMENT **** Drag Layers Timeline/Animation Dreamweaver Extensions Persistent Layers
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
Using Style Sheets for Consistency
Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
{color:blue; font-size: 12px;}
CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:
Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Microsoft Expression Web Quickstart Guide
Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,
Contents. Downloading the Data Files... 2. Centering Page Elements... 6
Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5
CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
Creating Web Pages with Dreamweaver CS 6 and CSS
Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding
Using an external style sheet with Dreamweaver (CS6)
Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
CST 150 Web Design I CSS Review - In-Class Lab
CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and
Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com
Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28
CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline
Introduction to Adobe Dreamweaver CC
Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of
Web Design with CSS and CSS3. Dr. Jan Stelovsky
Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
Further web design: Cascading Style Sheets Practical workbook
Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D
Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation
Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:
CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here
Outline of CSS: Cascading Style Sheets
Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles
CSS for Page Layout. Key Concepts
CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
Web Authoring CSS. www.fetac.ie. Module Descriptor
The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,
What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure
CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?
Creating a Resume Webpage with
Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume
Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature
Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you
Adobe Dreamweaver CC 14 Tutorial
Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008
How to Add a Transparent Flash FLV movie to your Web Page Tutorial by R. Berdan Oct 16 2008 To do this tutorial you will need Flash 8 or higher, Dreamweaver 8 or higher. You will also need some movie clips
Sage Accountants Business Cloud EasyEditor Quick Start Guide
Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing
TUTORIAL 4 Building a Navigation Bar with Fireworks
TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar
Digital Marketing EasyEditor Guide Dynamic
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
GUIDE TO CODE KILLER RESPONSIVE EMAILS
GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention
Code View User s Guide
Code View User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication
This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.
1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to
Google Docs Basics Website: http://etc.usf.edu/te/
Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google
Creating Web Pages With Dreamweaver MX 2004
Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic
Web layout guidelines for daughter sites of Scotland s Environment
Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment
Dreamweaver CS5. Module 1: Website Development
Dreamweaver CS5 Module 1: Website Development Dreamweaver CS5 Module 1: Website Development Last revised: October 29, 2010 Copyrights and Trademarks 2010 Nishikai Consulting, Helen Nishikai Oakland, CA
Garfield Public Schools Fine & Practical Arts Curriculum Web Design
Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and
JJY s Joomla 1.5 Template Design Tutorial:
JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding
Saving work in the CMS... 2. Edit an existing page... 2. Create a new page... 4. Create a side bar section... 4
CMS Editor How-To Saving work in the CMS... 2 Edit an existing page... 2 Create a new page... 4 Create a side bar section... 4 Upload an image and add to your page... 5 Add an existing image to a Page...
How To Use Dreamweaver With Your Computer Or Your Computer (Or Your Computer) Or Your Phone Or Tablet (Or A Computer)
ITS Training Introduction to Web Development with Dreamweaver In this Workshop In this workshop you will be introduced to HTML basics and using Dreamweaver to create and edit web files. You will learn
ITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style
ITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
Base template development guide
Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento
SharePoint Designer Tutorial
SharePoint Designer Tutorial Working with SharePoint Websites Mike Poole Chapter No. 7 "Displaying Data" In this package, you will find: A Biography of the author of the book A preview chapter from the
Adobe Illustrator CS6. Illustrating Innovative Web Design
Overview In this seminar, you will learn how to create a basic graphic in Illustrator, export that image for web use, and apply it as the background for a section of a web page. You will use both Adobe
HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design
Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s
General Electric Foundation Computer Center. FrontPage 2003: The Basics
General Electric Foundation Computer Center FrontPage 2003: The Basics September 30, 2004 Alternative Format Statement This publication is available in alternative media upon request. Statement of Non-discrimination
Website Editor User Guide
CONTENTS Minimum System Requirements... 3 Design Your Website... 3 Choosing your Theme... 4 Choosing your Header Style... 4-5 Website Content Editor... 6 Text Editor Toolbar features... 6 Main Menu Items...
USD WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT
WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT INFORMATION TECHNOLOGY SERVICES UNIVERSITY OF SAN DIEGO DEVELOPED BY JOY BRUNETTI BRUNETTI@SANDIEGO.EDU X8772 APRIL 2006 TABLE OF CONTENTS DREAMWEAVER CSS
Dreamweaver. Introduction to Editing Web Pages
Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel
Web Design and Databases WD: Class 7: HTML and CSS Part 3
Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML
Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots
Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
MS Word 2007 practical notes
MS Word 2007 practical notes Contents Opening Microsoft Word 2007 in the practical room... 4 Screen Layout... 4 The Microsoft Office Button... 4 The Ribbon... 5 Quick Access Toolbar... 5 Moving in the
Terminal 4 Site Manager User Guide. Need help? Call the ITD Lab, x7471
Need help? Call the ITD Lab, x7471 1 Contents Introduction... 2 Login to Terminal 4... 2 What is the Difference between a Section and Content... 2 The Interface Explained... 2 Modify Content... 3 Basic
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts
Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)
Slicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
Advanced Layer Popup Manual DMXzone Advanced Layer Popup Manual
Advanced Layer Popup Manual Page 1 of 42 Index Index... 2 About Advanced Layer Popup... 3 Features...3 Create a popup window with an image... 6 Introduction...6 Simple Layer Popup with an image...6 Applying
Style & Layout in the web: CSS and Bootstrap
Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) W3C standard for defining presentation of web documents (way documents are displayed or delivered to users typography, colours, layout etc) Presentation separated from content
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
SoftChalk. Level 1. University Information Technology Services. Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production
SoftChalk Level 1 University Information Technology Services Training, SoftChalk Level Outreach, 1 Learning Technologies and Video Production Page 1 of 49 Copyright 2013 KSU Department of University Information
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan
Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver
Joomla! 2.5.x Training Manual
Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials
Web Developer Jr - Newbie Course
Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance
MadCap Software. Import Guide. Flare 11
MadCap Software Import Guide Flare 11 Copyright 2015 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
Web design 2: creating web pages and site management using Dreamweaver MX
Web design 2: creating web pages and site management using Dreamweaver MX Practical workbook Aims and Learning Objectives When you have completed these exercises you should be able to: create and edit
CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types
CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining
<?xml version= 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.
dhtml
Excel Intermediate Session 2: Charts and Tables
Excel Intermediate Session 2: Charts and Tables Agenda 1. Introduction (10 minutes) 2. Tables and Ranges (5 minutes) 3. The Report Part 1: Creating and Manipulating Tables (45 min) 4. Charts and other
Contents. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
CSS - Cascading Style Sheets
CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
ADOBE DREAMWEAVER CS3 TUTORIAL
ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO
css href title software blog domain HTML div style address img h2 tag maintainingwebpages browser technology login network multimedia font-family
technology software href browser communication public login address img links social network HTML div style font-family url media h2 tag handbook: id domain TextEdit blog title PORT JERVIS CENTRAL SCHOOL
Word 2007: Basics Learning Guide
Word 2007: Basics Learning Guide Exploring Word At first glance, the new Word 2007 interface may seem a bit unsettling, with fat bands called Ribbons replacing cascading text menus and task bars. This
Requirements for Developing WebWorks Help
WebWorks Help 5.0 Originally introduced in 1998, WebWorks Help is an output format that allows online Help to be delivered on multiple platforms and browsers, which makes it easy to publish information
Creating Web Pages with Microsoft FrontPage
Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short
Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.
Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format
Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
Creating Your Personal Website
Creating Your Personal Website These instructions will show you how to create a personal webpage for CSULB students using Dreamweaver MX 2004. The page will consist of a title, background image, text,
Creating Accessible Documents in Word 2011 for Mac
Creating Accessible Documents in Word 2011 for Mac NOTE: Word 2011 for Mac does not offer an Accessibility Checker. After creating your document, you can double-check your work on a PC, to make sure your
Web Page Design (Master)
St. Michael-Albertville High School Teacher: Ben Rusin Web Page Design (Master) September 2014 CEQ: WHAT IS HTML CODING AND HOW IS IT USED TO CREATE WEB SITES? AND HOW CAN IT BE USED TO CREATE WEB SITES?
Website Builder Documentation
Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects
Mobile Web Site Style Guide
YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University
UNPAN Portal Content Management System (CMS) User Guide
UNPAN Portal Content Management System (CMS) User Guide www.unpan.org User Manual Version 1.0 260309 Page 1 of 36 Table of Contents A. UNPAN Sitemap... 3 B. DPADM Sitemap... 4 C. Introduction to UNPAN
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
Excel 2007: Basics Learning Guide
Excel 2007: Basics Learning Guide Exploring Excel At first glance, the new Excel 2007 interface may seem a bit unsettling, with fat bands called Ribbons replacing cascading text menus and task bars. This