Using Dreamweaver to Create Page Layouts

Size: px
Start display at page:

Download "Using Dreamweaver to Create Page Layouts"

Transcription

1 Using Dreamweaver to Create Page Layouts with Cascading Style Sheets (CSS) What are Cascading Style Sheets? Each cascading style sheet is a set of rules that provides consistent formatting or a single Web page or an entire Web site. HTML provides the structure of each page, and CSS controls the appearance of each structured element, such as colors, fonts, and layout. With CSS, the same HTML page can appear dramatically different with different style sheets. The CSS Zen Garden demonstrates this beautifully: Kinds of Style Sheets Each Web browser applies its own style sheet to the documents it displays. These are called BROWSER DE- FAULT STYLE SHEETS. Unfortunately, these differ from browser to browser, which is why the same HTML page looks different on different browsers. In most modern browsers, USER STYLE SHEETS allow users to apply their own style sheet. User style sheets allow you to set styles on page elements so that they are easier for you to read and use, regardless of what the Web page designer intended. AUTHOR STYLE SHEETS are the ones you will be making in Dreamweaver for this class. CSS can be used to present different styles for different purposes, generally called RENDERING METHODS, and in Dreamweaver called STYLE REN- DERING. In this way you can change the appearance of your page for handheld media such as smart phones, for printing (viewed on screen in print preview), for screen projection, for viewing on a color computer screen (the default), for TTY for text telephone for the hearing impaired, or for display on a low-resolution television. Advantages of CSS-Based layouts Reduce HTML file size thereby speeding up page loading Provide many more formatting options than straight HTML Facilitate document consistency of appearance Meet industry standards Challenges of CSS-Based Layouts Formatting options can be difficult to visualize (Dreamweaver CC to the rescue) Using Dreamweaver to Create Page Layouts with CSS Page 1

2 The Anatomy of a CSS Rule Each rule has two main parts and two subparts. h1 { font-weight: bold;} h1 is the SELECTOR, which identifies the tag the rule selects. The rest of the rule, { font-weight: bold;}, is the DECLARATION, which states what happens when the rule is applied. Each declaration has two sub-elements, the PROPERTY, such as font-weight, and the VALUE of the property, bold here, which specifies what the property is set to. A single rule can contain multiple declarations, such as p {color:red; font-size:12px; line-height:15px;}. These are enclosed by curly braces into the declaration block. Notice the lack of spaces and quotes in CSS rules, and that the declarations are separated with semicolons, even at the end. You can also group selectors, such as h1, h2, h3 { font-weight: bold;}. A comma and a space separates each selector. The Location of CSS Rules CSS rules (styles) can appear in multiple locations. INLINE STYLES use the style attribute inside of a tag. These rules are the most specific. INTERNAL STYLES or HEADER STYLES are placed in the head of an HTML document. EXTERNAL STYLES are placed in a separate.css file, and linked in the head of the HTML document. The Cascade When a browser displays a Web page, it has to sort out the CSS rules coming from the browser, the user, and the various author style sheets to figure out how to display the page. Sometimes these rules conflict, meaning that different rules are telling the same element or property what it should look like. The CASCADE determines which rule(s) will be applied to the document. Browser styles have the lowest priority, meaning that they only apply when not defined by another style. User styles override browser styles. Author styles have the highest priority, and override the other two. Within author styles, external styles have the lowest priority, internal or heading styles are next, and finally internal styles have the very highest priority. Specificity of selectors CSS specificity (a system that gives different weight to particular kinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade where items with higher priorities override properties that have lower priorities. IDs have the highest precedence, then classes, and finally tag (type) selectors. Page 2 Jeffrey Diamond 2013

3 Selector calculations are calculated as follows: Add 0, 1, 0, 0 for each ID attribute in the selector. Add 0, 0, 1, 0 for each class, attribute selector, and pseudoclass. Add 0, 0, 0, 1 for each HTML element or pseudo-element. Add 1, 0, 0, 0 for each inline style but you probably won t be using inline styles. For those of you who want to know more, or to review what you already know, here is a well thought out PowerPoint slide show that I used as an outline for this topic: Creating Styles in Dreamweaver Dreamweaver CS6 streamlines the process of style creation and modification, and in most cases writes clean, standard CSS code. You can make and edit rules in a variety of ways Dreamweaver. To begin with, let s use the Property Inspector to examine the difference between a tag and a style, and create a simple style. Create a Simple Style using the Property Inspector 1. Create a new HTML document, and set your display to split view to view both the Design and the Code. 2. Click inside the Design pane and type I am an apple and I am red. 3. In the HTML tab of the Property Inspector, highlight the word red and then click the bold button. Dreamweaver bolds the red in Design view, and surrounds it with the <strong> tag in Code view. 4. Highlight the word apple, click the CSS tab in the Property Inspector, click the color box on its right side, and sample a red color. Dreamweaver automatically opens the New CSS Rule dialog box, and guesses contextually that you want to define a new class for use in a variety of elements. 5. Type red for your selector name, leave this document only alone and click OK. Using Dreamweaver to Create Page Layouts with CSS Page 3

4 The new rule is an internal style. Dreamweaver added the new CSS rule into the head of my document. Use the HTML tab of the Property Inspector to apply the rule: 1. In Design View, type a second sentence, I am a rose and I am also red. 2. Highlight the word rose. 3. In the HTML (not the CSS) tab, press the arrow to the right of the Class menu to view the classes available for this document and chose red. Notice that Dreamweaver even gives a preview in the style name of the style s appearance. 4. Here is the document in code and design view. It sure beats hand coding!! Kinds of CSS Selectors This first example was a simple one. It gets more powerful but also more complicated, as Dreamweaver lets you define and edit four kinds of selectors. Type Dreamweaver calls these Tag selectors. These selectors are assigned to specific HTML tags, such as <h1>. Class Class selectors can apply to many different elements on a page; they are not associated with any html tag but are instead applied on an as-need basis. Each class selector must have a unique name, beginning with a period (.). Dreamweaver will add the initial period if you forget to type it You can add a class, or change from one to another from either the Property Inspector, or by right click the tag in the Tag Selector, and choosing Set Class plus the class you want to apply. Either of these techniques will only let you apply a single class. The Tag Inspector panel and Code View permit you to apply multiple classes to the same element. ID Examples of ID selectors are Div or anchor tags. IDs begin with a hash mark (#). The ID selector differs from the class selector in that it can only be applied once in any given page. An ID selector carries more weight than a class selector; it is more specific. Page 4 Jeffrey Diamond 2013

5 Compound or Contextual Selectors These selectors apply formatting to tags and classes when they appear in a specific combination. Pseudo-classes (a:hover) and pseudo-elements (p:first line) style according to their positions or roles in the document. The compound part is preceded by a colon. Descendent selectors are specific, such as an <h1> tag within a specific Div. A space separates the ID and its descendent, such as #footer h1. Groups apply the same set of rules to several selectors. Groups are comma separated lists such as h1, h2, h3... Use the CSS Rule Definition Dialog Box The CSS tab of the Property Inspector only lets you set parameters for a few basic attributes: The Edit Rule button, which more accurately should be named the Create/Change Rule button, displays the CSS Rule Definition dialog box, with a lot more settings. Create a More Complex Style using the CSS Rule Definition Dialog Box 1. Select I am a rose and I am also red. but not its surrounding <p> tags, and copy and paste the sentence several times to make a multi-lined paragraph. 2. Click the <p> tag in the tag selector, and copy and paste the paragraph including its tags, to make two multiline paragraphs as shown here. Depending on the size of your document window, your lines may not wrap as neatly as mine. 3. Choose your selector type. a. With Targeted Rule set to <New CSS Rule>, click the Edit Rule button to display the New CSS Rule dialog box. By default, Dreamweaver assumes you want to define a class. b. Click the arrow to the right of Class (can apply to any HTML element), and choose Tag (redefines an HTML element). 4. Choose your selector name. Since your selection is within a <p> tag, Dreamweaver assumes you want to redefine a <p> tag. Since that is correct, you don t need to change anything here. 5. Be sure that your rule is going to the correct location. This document only, the default here, is correct because you have not attached an external style sheet to the document, and since the <p> tag Using Dreamweaver to Create Page Layouts with CSS Page 5

6 is a block level element, it cannot be inline. 6. Click OK to open the CSS Rule Definition dialog box. 7. This dialog box, like so many in Dreamweaver is divided into two panes, categories on the left, and settings for the highlighted category on the right. On your own, examine the properties in each of the eight categories. Not all categories apply to every element. Type Category The Type category groups many but not all of the properties that affect the appearance of your type. Explore them on your own, noting that you can click the Apply button to view the effects of your property settings right in the Design view of your document. Font family will override the fonts chosen in your page properties with whatever you choose here wherever your document contains a <p> tag, as will font size. Font size can be specified in a variety of different measurement schemes. If you click the menu in the left-most box, the preset numbers shown represent pixels, followed by some relative sizes. Because pixels do not scale well, and the relative sizes such as small are not very precise, it is best to avoid one of these presets. Once you type anything into the font size box, you can then set your measurement scheme from the menu to the right. I like to size my type in EMs because if the user wants to enlarge the type, the browser will permit it, whereas some browsers cannot resize type in pixels. If your <body> text is set to %, as recommended, then 1 em will preserve that size. A property less than 1 em, such as.9 em, will make it slightly smaller, and a value more than 1 em, like 1.2 em will enlarge the type size. Classically, an em (pronounced emm) is a typographer s unit of horizontal spacing and is a sliding (relative) measure. One em is a distance equal to the text size. In 10 pixel type, an em is 10 pixels; in 18 pixel type it is 18 pixels. Thus 1em of padding is proportionately the same in any text size. How to size text using ems: Font style can be normal, italic, or oblique. Line height determines the amount of space between each line of a paragraph. This is definitely a property to experiment with. With small paragraph type, a bit of extra line space can make the type much easier to read. I also set my line height in ems. 1 em will make your lines quite close together, while 1.3 ems will increase the white space between lines. Experiment with different numbers, and click Apply with each to see its effect. Page 6 Jeffrey Diamond 2013

7 I am not a big fan of Text decoration except in very special cases. However, I have used it to eliminate the default underlining in some link states. AVOID BLINK. Font weight applies a relative or specific amount of boldface to the font. Normal = 400; Bold = 700. Personally, I don t see a lot of variation with the numeric font weights, and I stick with Normal or Bold. Font variant switches between Normal and Small Caps. Text-transform can be used to capitalize the first letter of each word in the style, or to set the text to all uppercase or all lowercase. (Too bad they are not all in the same menu.) Color lets you pick from the Web safe swatches. But, here is a nice trick. If you want your type to use a color from a graphic, you can use the eyedropper outside the swatches palette to sample colors from the Design view of your page, such as from an image your page contains. Background Category Not only can you specify colors and images for an entire page in Page Properties, but you can also specify them for individual elements. Creative designers use this capability to make very effective pages with little graphical overhead. CSS Zen Garden has many examples. Block Category The Block category defines spacing and alignment. Word Spacing sets the spacing between words. Letter Spacing increases (positive value) or decreases (negative value) the space between letters or characters. When I specify Letter Spacing, I do it in ems, in small increments. Vertical Align specifies the vertical alignment of the applied element. Often you can t see its effects unless you preview in a browser. Text Align sets horizontal alignment of block elements, just like the alignment buttons. Text Indent specifies how much the first line of text indents (zero if unspecified). A negative value may be used to create an outdent, but not all browsers support it. Whitespace has three options: Normal collapses white space Pre handles it as if the text were enclosed in pre tags, respecting all white space, including spaces, tabs, and returns Nowrap specifies that the text only wraps when encountering a <br> tag. Display specifies whether an element is displayed and if so how it is displayed. It has a lot of advanced options. Leave it blank unless you know what you are doing. Using Dreamweaver to Create Page Layouts with CSS Page 7

8 Be careful with None, which hides the element to which it is assigned. Typically, None is used for specialized style sheets, to turn off elements you don t want the viewer to print. Box Category The Box category is used to control the placement of block level elements on the page. I find I spend more time in this category than any of the others, as I move elements around to locations I like. Width and Height determine the width and height of the element. If you make a container div (more on div s coming up), setting its width to a set number of pixels as shown here and then setting the right and left margins to auto will center the container horizontally on your page, which many people find attractive. Float specifies how other elements, such as text, AP Divs, tables and so on, will float around the element: Left, Right, or None (the default). A floated element moves to the left or right side of the containing element. You can Clear Left, Right, Both, or None. When you Clear Both, using the box model, it makes the chosen element appear below any floated elements above it. For example, you would clear the footer, not the sidebar above it, to make the footer appear beneath the main content and the sidebar it contains. Padding sets the amount of space between the content of an element and its border (or margin if there is no border). Uncheck Same For All to set the padding for individual sides of the element, as shown above. Margin sets the amount of space between the border of an element (or the padding if there is no border) and another element. Here is a quick explanation of the difference between Padding and Margin settings: com/2006/12/margin-vs-padding-css-properties.html While we are on the subject of padding and margins, let s take a quick detour to the Page Properties dialog box. Each browser sets margins in its Browser Style Sheet, and sometimes these margins can interfere with those you define. So, if you are going to customize the padding and/or margins of any of your styles, it is a good idea to zero out any browser-defined margins in Page Properties. However, once you do this, you will need to specify at least margins in your block elements assuming you want space between them. Page 8 Jeffrey Diamond 2013

9 Border Category The Border category lets you place variously formatted borders on the top, right, bottom, and left sides of selectors. Uncheck the default Same for all to style each side differently. Watch this quick video, recorded in CS3 but still relevant, that shows how to define a class that used the Border category to make picture frames around a series of images: List Category List-style-type lets you specify the bullet symbol (disc, circle, or square) you want to use for unordered lists, or the numbering system (lower-roman, upper-roman, lower-alpha, or upper-alpha) for ordered lists. Unordered lists with none specified are often used to style navigation bars. List-style-image lets you use your own graphic in place of one of the simple bullets. StyleGala has a collection of 200 bullets you can download and use, or you can design your own: List-style-position provides two options, inside above, and outside below. Positioning Category Typically used with <div> tags to control page layout, the Positioning properties are both powerful and complicated. This will be covered in future classes. Extensions and Transitions Category These categories will be covered in future classes. Components of CSS Layouts <div> elements create the page structure (in boxes) CSS rules define the dimensions and format of key page elements to make the page both functional and attractive Using Dreamweaver to Create Page Layouts with CSS Page 9

10 XHTML Containers <div> tags are block elements. Block tags provide visual structure and stack on top of each other on the page. The end of a block tag moves the next tab below the current one. <span> tags are inline Inline tags do not interrupt the flow of text; they do not force a new line. Inline tags cannot contain block level tags. Neither tag affects the document appearance or presentation until they are styled. DIVs vs. IDs and Classes IDs and classes are CSS rules, while DIVs are HTML tags. You put the IDs and classes inside the DIVs to format these page divisions. div id vs div class source: First difference IDs are to be used only once in your html layout. Classes can be used multiple times. Generally IDs are used for the main elements of the page, such as header, main content, sidebar, footer, etc. Classes are used for elements that will appear several times on your page, but can not be covered by standard html elements. For example menus. The easy way to remember which one of the two should be used only once to think of how many people are out there with your id card number. Second difference IDs have priority over classes. So, if an element has both an ID and a class, the ID will take over. Another way of saying this is that ID selectors have more SPECIFICITY than plain tags or classes. The CSS Styles Panel 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. (Dreamweaver Help) To view the CSS Styles panel, do one of the following: Choose Window > CSS Styles. Choose one of the built in workspaces that includes the CSS Styles panel. Double click the CSS Styles tab in Classic or Designer mode. Page 10 Jeffrey Diamond 2013

11 In Designer Compact, click the CSS icon. It toggles to hide and reveal. Windows only, the keyboard shortcut is Shift+F11. CSS Panel Tabs The top tab switches between Current and All modes. The CSS Styles panel in All mode lists all rules from the applied style sheets of whatever page you have open and provides an easy way to view and edit each of their properties in the lower half of the panel. All lists all the rules, regardless of what is selected in the document window. You can click on any one of them to view its properties. Embedded styles are displayed with a <style> tag. You cannot edit inline styles in ALL mode. All is good for CSS newbies. In All mode, when you click on a given style, its properties show up in the Properties tab beneath the All Rules tab. All is not document-selection dependent. Current shows just the rules that apply to the current selection. In Current mode, the top Summary for Selection tab shows all the defined properties that apply to that selection. The About/Rules tab can either show the cascade, or it can display information. Use the two buttons on the right to switch between the two tabs. In Cascade view, if you hover over the rule, its information will appear along with numeric specificity, to determine which rule takes precedence. Properties with lines through them are not defined in the chosen rule. CURRENT mode is more powerful and more complex. You can edit in line styles in CURRENT mode, and you can see information for a selected property, as well as the cascade for the selected tag. Current mode also shows all CSS rules but for the page and also shows the different impact of the cascade on the area that has been selected. By select a specific property, you can view its information and where it is used. By hovering over a rule, you can view its specificity. These details make Current mode Using Dreamweaver to Create Page Layouts with CSS Page 11

12 the more complex mode. Its ability to select any of properties or any selector and view the relevant style information makes it the more powerful mode. The Middle or Rules Tab This tab alternates between showing the cascade for the currently selected region of the document, and providing more information about that rule. The Properties Tab Here you can view and edit Rules. If a rule has a line through it, that means that the property is not an inheritable property. A PROPERTY IS NOT THE SAME AS A RULE. A style sheet is made up of a number of rules, each of which contains a number of properties, each of which has its own value. When in All mode, the CSS Styles panel displayed the rules present in the applied style sheets. When in Current mode, the panel displays the properties present on the selected piece of content only. The bottom of the Properties Tab has three buttons that set how the properties are displayed. According to Dreamweaver Help: Category View divides the Dreamweaver-supported CSS properties into eight categories: font, background, block, border, box, list, positioning, and extensions. Each category s properties are contained in a list that you expand or collapse by clicking the Plus (+) button next to the category name. Set properties appear (in blue) at the top of the list. List View displays all of the Dreamweaver-supported CSS properties in alphabetical order. Set properties appear (in blue) at the top of the list. Set Properties view displays only those properties that have been set. Set Properties view is the default view. The bottom of the CSS Styles panel also contains these buttons: Attach Style Sheet opens a dialog box to choose and link an existing external style sheet to the currently active document. You can also use this dialog box to import embedded styles from another HTML document to your active document. New CSS Rule opens that dialog box, which you already accessed from the CSS tag of the Properties Inspector. Edit Style opens the CSS Rule Definition for the active style. Be careful here. Dreamweaver opens the style that it thinks is active, but Page 12 Jeffrey Diamond 2013

13 it may not be what you want. It is a good idea to select the desired element in the Tag Selector, when editing a tag. To edit a non-tag selector, set the Styles panel to Show All, highlight the desired style, and then click the Edit Style button. The Delete button will either delete a rule or a property, depending on what is highlighted in the Styles panel. The Code Navigator The Code Navigator is useful for viewing the CSS of a given element, and then jumping right to it in the code, but its indicator is most annoying. The indicator seems to appear in the previous place selected, with a delay, and you can t move it around when it covers up things. You can disable the indicator by clicking its indicator to reveal the Code Navigator window, and then clicking Disable in its lower right corner. Unfortunately, the Code Navigator cannot be resized, but it is useful. 1. Command + Option + Click or Ctrl + Alt Click on something to reveal the Code Navigator. (Command Option N for Navigator does the same thing.) 2. Click on one of the styles to see its properties. 3. Click a property to navigate right to it in code wherever its style lives. If in Design view, your view will change to Split view. External Style Sheets You can use File > New to make a new, blank.css document. Typically, that is not how I work. Instead, I start out by designing an individual page, with my styles kept internally in the head of my document. Then, when I am ready to make a second page in my site using the same styles, I move my internal styles to their own external style sheet. (See page of our textbook for specifics.) Once I do that, I typically edit my styles or define new ones ONLY in the external style sheet, and avoid internal styles unless I define a style that is specific to only the current page, and not to the site as a whole. It is critical to work this way to avoid style confusion, such as unintentionally having an <h1> style defined both externally and internally. Using Dreamweaver to Create Page Layouts with CSS Page 13

Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS

Introducing Cascading Style Sheets. Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Introducing Cascading Style Sheets Cascading Style Sheet Basics Creating Styles Using Styles Manipulating Styles Text Formatting with CSS Cascading Style Sheet Basics CSS has many benefits: The pages look

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

1 of 7 11/12/2009 9:29 AM

1 of 7 11/12/2009 9:29 AM 1 of 7 11/12/2009 9:29 AM Home Beginner Tutorials First Website Guide HTML Tutorial CSS Tutorial XML Tutorial Web Host Guide SQL Tutorial Advanced Tutorials Javascript Tutorial PHP Tutorial MySQL Tutorial

More information

Table of Contents Chapter 9. Working with Cascading Style Sheets ... 1

Table of Contents Chapter 9. Working with Cascading Style Sheets ... 1 Table of Contents Chapter 9.... 1 Introduction... 1 Introducing Cascading Style Sheets... 2 Create CSS Styles... 2 Attribute Styles... 2 Style Types... 3 Creating a Web Page with a CSS Layout... 4 Create

More information

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 3 Cascading Style Sheets (CSS) Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you

More information

Getting Started with Eric Meyer's CSS Sculptor 1.0

Getting Started with Eric Meyer's CSS Sculptor 1.0 Getting Started with Eric Meyer's CSS Sculptor 1.0 Eric Meyer s CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly

More information

BIM222 Internet Programming

BIM222 Internet Programming BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements

More information

Creating a Website: Advanced Dreamweaver

Creating a Website: Advanced Dreamweaver Creating a Website: Advanced Dreamweaver Optimizing the Workspace for Accessible Page Design 1. Choose Edit > Preferences [Windows] or Dreamweaver > Preferences [Macintosh]. The Preferences dialog box

More information

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links

Using Dreamweaver CC. Logo. 4 Creating a Template. Page Heading. Page content in this area. About Us Gallery Ordering Contact Us Links Using Dreamweaver CC 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

Appendix D CSS Properties and Values

Appendix D CSS Properties and Values HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by

More information

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC CSS Text & Font Properties 1 text-indent - sets amount of indentation for first line of text value: length measurement inherit default: 0 applies to: block-level elements and table cells inherits: yes

More information

Dreamweaver Basics Outline

Dreamweaver Basics Outline Dreamweaver Basics Outline The Interface Toolbar Status Bar Property Inspector Insert Toolbar Right Palette Modify Page Properties File Structure Define Site Building Our Webpage Working with Tables Working

More information

Taking Fireworks Template and Applying it to Dreamweaver

Taking Fireworks Template and Applying it to Dreamweaver Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 Using Dreamweaver CS6 4 Creating a Template Now that the main page of our website is complete, we need to create the rest of the pages. Each of them will have a layout that follows the plan shown below.

More information

CSS THE M\SS1NG MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo

CSS THE M\SS1NG MANUAL. David Sawyer McFarland. POGUE PRESS O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo CSS THE M\SS1NG MANUAL David Sawyer McFarland POGUE PRESS" O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction xiii I Part One: CSS

More information

3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets

3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets 3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers

More information

- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations

- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations 3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers

More information

Class 3 Page 1. Using DW tools to learn CSS. Intro to Web Design using Dreamweaver (VBUS 010) Instructor: Robert Lee

Class 3 Page 1. Using DW tools to learn CSS. Intro to Web Design using Dreamweaver (VBUS 010) Instructor: Robert Lee Class 3 Page 1 Using DW tools to learn CSS Dreaweaver provides a way for beginners to learn CSS. Here s how: After a page is set up, you might want to style the . Like setting up font-family, or

More information

Microsoft Word 2003 for Windows, Part 2

Microsoft Word 2003 for Windows, Part 2 Microsoft Word 2003 for Windows, Part 2 In this workshop, the following Word 2003 features will be covered: Creating and using Tables Formatting text using Styles Using MailMerge Arranging text in Columns

More information

Getting Started with CSS Sculptor 3

Getting Started with CSS Sculptor 3 Getting Started with CSS Sculptor 3 With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, padding, background images and more. Additionally, you can use

More information

Adobe Dreamweaver CS5/6: Learning the Tools

Adobe Dreamweaver CS5/6: Learning the Tools Adobe Dreamweaver CS5/6: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)

More information

How to lay out a web page with CSS

How to lay out a web page with CSS Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style

More information

GIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST

GIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple

More information

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles

Using Dreamweaver. 6 Styles in Websites. 1. Linked or Imported Stylesheets. 2. Embedded Styles. 3. Inline Styles Using Dreamweaver 6 So far these exercises have deliberately avoided using HTML s formatting options such as the FONT tag. This is because the basic formatting available in HTML has been made largely redundant

More information

How to set up a local root folder and site structure

How to set up a local root folder and site structure Activity 2.1 guide How to set up a local root folder and site structure The first thing to do when creating a new website with Adobe Dreamweaver CS3 is to define a site and identify a root folder where

More information

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3)

CS Multimedia and Communications. Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) CS 1033 Multimedia and Communications Lab 06: Webpage Tables and Image Links (Website Design part 3 of 3) REMEMBER TO BRING YOUR MEMORY STICK TO EVERY LAB! Table Properties Reference Guide The Property

More information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of

More information

Interactive Design 1 ART263/Advanced Design for the Web ART220 Gregory Eckler. Interactive Design/Advanced Design for the Web CSS Terminology

Interactive Design 1 ART263/Advanced Design for the Web ART220 Gregory Eckler. Interactive Design/Advanced Design for the Web CSS Terminology Interactive Design/Advanced Design for the Web CSS Terminology Define CSS Type Pproperties Font: Sets the font family (or series of families) for the style. Browsers display text in the first font in the

More information

Word Tutorial 3. Creating a Multiple- Page Report COMPREHENSIVE

Word Tutorial 3. Creating a Multiple- Page Report COMPREHENSIVE Word Tutorial 3 Creating a Multiple- Page Report COMPREHENSIVE Objectives Format headings with Quick Styles Insert a manual page break Create and edit a table Sort rows in a table Modify a table s structure

More information

Reading 2.2 Cascading Style Sheets

Reading 2.2 Cascading Style Sheets Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing

More information

AppleWorks Tips & Tricks

AppleWorks Tips & Tricks DEFAULT FONT Did you know you can set the font and size that AppleWorks will use when you open it on your computer? You can set the font and size that you want your students to use on your classroom computers.

More information

Title and Modify Page Properties

Title and Modify Page Properties Dreamweaver After cropping out all of the pieces from Photoshop we are ready to begin putting the pieces back together in Dreamweaver. If we were to layout all of the pieces on a table we would have graphics

More information

The first time you open Word

The first time you open Word Microsoft Word 2010 The first time you open Word When you open Word, you see two things, or main parts: The ribbon, which sits above the document, and includes a set of buttons and commands that you use

More information

Using Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles

Using Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format

More information

Symbols INDEX. !important rule, rule, , 146, , rule,

Symbols INDEX. !important rule, rule, , 146, , rule, Symbols!important rule, 209 @import rule, 140-144, 146, 155-156, 157 @media rule, 155-156 A element. See anchors abbr attribute, 36-37 element, 87, 90-91 absolute positioning, 177, 178, 182,

More information

WORD XP/2002 USER GUIDE. Task- Formatting a Document in Word 2002

WORD XP/2002 USER GUIDE. Task- Formatting a Document in Word 2002 University of Arizona Information Commons Training Page 1 of 21 WORD XP/2002 USER GUIDE Task- Formatting a Document in Word 2002 OBJECTIVES: At the end of this course students will have a basic understanding

More information

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors

More information

Microsoft Office Word. Part1

Microsoft Office Word. Part1 Microsoft Office 2010 - Word Part1 1 Table of Contents What is Microsoft Word?... 4 Creating a document... 5 Toolbar... 6 Typing in MS Word Text Area... 7 Cut, Copy and Paste Text... 9 Paste Preview...

More information

CSc 337 LECTURE 3: CSS

CSc 337 LECTURE 3: CSS CSc 337 LECTURE 3: CSS The bad way to produce styles welcome to Greasy Joe's. You will never, ever, ever beat our

More information

EECS1012. Net-centric Introduction to Computing. Lecture 3: CSS for Styling

EECS1012. Net-centric Introduction to Computing. Lecture 3: CSS for Styling EECS1012 Net-centric Introduction to Computing Lecture 3: CSS for Styling Acknowledgements Contents are adapted from web lectures for Web Programming Step by Step, by M. Stepp, J. Miller, and V. Kirst.

More information

Adobe Dreamweaver CS4

Adobe Dreamweaver CS4 Adobe Dreamweaver CS4 About Dreamweaver Whether creating simple blog pages complex web sites, Dreamweaver provides users with a powerful set of web-design tools necessary f the task. Its userfriendly interface

More information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 3 Configuring Color and Text with CSS Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links

More information

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

Dreamweaver Basics Workshop

Dreamweaver Basics Workshop Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What

More information

Introduction to Dreamweaver CS3

Introduction to Dreamweaver CS3 TUTORIAL 2 Introduction to Dreamweaver CS3 In Tutorial 2 you will create a sample site while you practice the following skills with Adobe Dreamweaver CS3: Creating pages based on a built-in CSS page layout

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents

- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents 3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS3 is on its way - CSSs provide the means to control and change presentation of HTML documents - CSS is not

More information

Using CSS in Web Site Design

Using CSS in Web Site Design Question 1: What are some of the main CSS commands I should memorize? Answer 1: The most important part of understanding the CSS language is learning the basic structure and syntax so you can use the language

More information

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets What are Style Sheets CSS: Cascading Style Sheets Representation and Management of Data on the Internet, CS Department, Hebrew University, 2007 A style sheet is a mechanism that allows to specify how HTML

More information

Rich Text Editor Quick Reference

Rich Text Editor Quick Reference Rich Text Editor Quick Reference Introduction Using the rich text editor is similar to using a word processing application such as Microsoft Word. After data is typed into the editing area it can be formatted

More information

Understanding Word Processing

Understanding Word Processing Understanding Word Processing 3.0 Introduction In this chapter you are going to learn how to create a simple memo or note or a complex and complicated multi column business document using word processing

More information

How to use CSS text styles

How to use CSS text styles How to use CSS text styles Web typography is an important creative tool web designers use to express style and emotion that enhances the goal and overall message of a website. Image-based text gives you

More information

Karlen Communications Importing/Exporting Styles in Word. Karen McCall, M.Ed.

Karlen Communications Importing/Exporting Styles in Word. Karen McCall, M.Ed. Karlen Communications Importing/Exporting Styles in Word Karen McCall, M.Ed. Table of Contents Introduction... 3 Resume Reading... 3 Clearing Formatting... 4 Cut, Copy and Paste Settings... 5 Smart Paste

More information

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100 Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!

More information

HTML and CSS a further introduction

HTML and CSS a further introduction HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few

More information

8a. Cascading Style Sheet

8a. Cascading Style Sheet INFS 2150 Introduction to Web Development 8a. Cascading Style Sheet 1 Objectives Concepts of cascading style sheets (CSS). 3 ways of using CSS: inline styles, embedded styles, and external style sheet.

More information

Using Dreamweaver CS6

Using Dreamweaver CS6 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just

More information

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS

INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS cristina gena dipartimento di informatica cgena@di.unito.it http://www.di.unito.it/~cgena/ materiale e info sul corso http://www.di.unito.it/~cgena/teaching.html

More information

Karlen Communications Track Changes and Comments in Word. Karen McCall, M.Ed.

Karlen Communications Track Changes and Comments in Word. Karen McCall, M.Ed. Karlen Communications Track Changes and Comments in Word Karen McCall, M.Ed. Table of Contents Introduction... 3 Track Changes... 3 Track Changes Options... 4 The Revisions Pane... 10 Accepting and Rejecting

More information

Dreamweaver CS6. Level 1. Topics Workspaces Basic HTML Basic CSS

Dreamweaver CS6. Level 1. Topics Workspaces Basic HTML Basic CSS Level 1 Topics Workspaces Basic HTML Basic CSS Tour the Workspace The arrangement of panels and menus you use to interact with a document is called the workspace. Much of Illustrator is customizable: you

More information

Creating Web Pages with SeaMonkey Composer

Creating Web Pages with SeaMonkey Composer 1 of 26 6/13/2011 11:26 PM Creating Web Pages with SeaMonkey Composer SeaMonkey Composer lets you create your own web pages and publish them on the web. You don't have to know HTML to use Composer; it

More information

Understanding PowerPoint s Text Capabilities

Understanding PowerPoint s Text Capabilities Page 1 of 14 Chapter 3: Working with Text In this chapter z Understanding PowerPoint s Text Capabilities z Adding Text z Formatting Text z Using Bullets z Using Numbered Lists z Checking Spelling and Style

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube {

.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube { .hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in;.tube { color: #996600; height: 3in; width: 12in; position: fixed; What is CSS? Cascading Style Sheets CSS is responsible

More information

Page Layout Using Tables

Page Layout Using Tables This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,

More information

Create a Web Page with Spry Navigation Bar. March 30, 2010

Create a Web Page with Spry Navigation Bar. March 30, 2010 Create a Web Page with Spry Navigation Bar March 30, 2010 Open a new web page by selecting File on the Menu bar, and pick Open. Select HTML as the page type and none from the layout list. Finally, we press

More information

Tutorial 3: Working with Cascading Style Sheets

Tutorial 3: Working with Cascading Style Sheets Tutorial 3: Working with Cascading Style Sheets College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology Objectives Review the history and concepts of CSS Explore

More information

CSE 154 LECTURE 3: MORE CSS

CSE 154 LECTURE 3: MORE CSS CSE 154 LECTURE 3: MORE CSS Cascading Style Sheets (CSS): ... ... HTML CSS describes the appearance and layout of information

More information

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What

More information

ORB Education Quality Teaching Resources

ORB Education Quality Teaching Resources These basic resources aim to keep things simple and avoid HTML and CSS completely, whilst helping familiarise students with what can be a daunting interface. The final websites will not demonstrate best

More information

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar with Dynamic Background Image WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR DYNAMIC BACKGROUND IMAGE Before you begin this tutorial, you will need

More information

Introduction to Web Tech and Programming

Introduction to Web Tech and Programming Introduction to Web Tech and Programming Cascading Style Sheets Designed to facilitate separation of content and presentation from a document Allows easy modification of style for an entire page or an

More information

Word Tips & Tricks. Status Bar. Add item to Status Bar To add an itme to the status bar, click on the item and a checkmark will display.

Word Tips & Tricks. Status Bar. Add item to Status Bar To add an itme to the status bar, click on the item and a checkmark will display. Status Bar The status bar is located on the bottom of the Microsoft Word window. The status bar displays information about the document such as the current page number, the word count in the document,

More information

SoftChalk 10. Level 1. University Information Technology Services. Learning Technologies, Training, Audiovisual, and Outreach

SoftChalk 10. Level 1. University Information Technology Services. Learning Technologies, Training, Audiovisual, and Outreach SoftChalk 10 Level 1 University Information Technology Services Learning Technologies, Training, Audiovisual, and Outreach Copyright 2018 KSU Division of University Information Technology Services This

More information

Animation and style sheets

Animation and style sheets L E S S O N 6 Animation and style sheets Lesson objectives To learn about animation and style sheets, you will: Suggested teaching time 35-40 minutes a b Animate text, outlines, and web pages with Dynamic

More information

< building websites with dreamweaver mx >

< building websites with dreamweaver mx > < building websites with dreamweaver mx > < plano isd instructional technology department > < copyright = 2002 > < building websites with dreamweaver mx > Dreamweaver MX is a powerful Web authoring tool.

More information

Tutorial 4: Creating Special Effects with CSS

Tutorial 4: Creating Special Effects with CSS Tutorial 4: Creating Special Effects with CSS College of Computing & Information Technology King Abdulaziz University CPCS-403 Internet Applications Programming Objectives Work with CSS selectors Create

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda

More information

Word for Research Writing I: Text and Structure

Word for Research Writing I: Text and Structure Word for Research Writing I: Text and Structure Last updated: 10/2017 Shari Hill Sweet dteditor@nd.edu or 631-7545 1. The Graduate School Template...1 1.1 Document structure... 1 1.1.1 Beware of Section

More information

Creating a Website in Schoolwires

Creating a Website in Schoolwires Creating a Website in Schoolwires Overview and Terminology... 2 Logging into Schoolwires... 2 Changing a password... 2 Navigating to an assigned section... 2 Accessing Site Manager... 2 Section Workspace

More information

TUTORIAL MADCAP FLARE Tripane and PDF

TUTORIAL MADCAP FLARE Tripane and PDF TUTORIAL MADCAP FLARE 2018 Tripane and PDF Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document

More information

INFORMATION TECHNOLOGY

INFORMATION TECHNOLOGY INFORMATION TECHNOLOGY PowerPoint Presentation Section Two: Formatting, Editing & Printing Section Two: Formatting, Editing & Printing By the end of this section you will be able to: Insert, Edit and Delete

More information

Computer Nashua Public Library Introduction to Microsoft Word 2010

Computer Nashua Public Library Introduction to Microsoft Word 2010 Microsoft Word is a word processing program you can use to write letters, resumes, reports, and more. Anything you can create with a typewriter, you can create with Word. You can make your documents more

More information

Excel Select a template category in the Office.com Templates section. 5. Click the Download button.

Excel Select a template category in the Office.com Templates section. 5. Click the Download button. Microsoft QUICK Excel 2010 Source Getting Started The Excel Window u v w z Creating a New Blank Workbook 2. Select New in the left pane. 3. Select the Blank workbook template in the Available Templates

More information

First Name Last Name CS-081 March 23, 2010 Midterm Exam

First Name Last Name CS-081 March 23, 2010 Midterm Exam First Name Last Name CS-081 March 23, 2010 Midterm Exam Instructions: For multiple choice questions, circle the letter of the one best choice unless the question explicitly states that it might have multiple

More information

Figure 1 Properties panel, HTML mode

Figure 1 Properties panel, HTML mode How to add text Adding text to a document To add text to a Dreamweaver document, you can type text directly in the Document window, or you can cut and paste text. You modify text by using the Properties

More information

Title bar: The top most bar in Word window that usually displays the document and software names.

Title bar: The top most bar in Word window that usually displays the document and software names. 1 MICROSOFT WORD Table of Contents LINC ONE Hiding Standard toolbar, Formatting toolbar, and Status bar: To hide the Standard toolbar, click View Toolbars on the Menu bar. Check off Standard. To hide the

More information

Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework

Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Presented by Roel Fermont 1 Today more than ever, Cascading Style Sheets (CSS) have a dominant place in online business. CSS

More information

Lesson 2 Quick Tour and Features

Lesson 2 Quick Tour and Features Lesson 2 Quick Tour and Features Objectives Students will format a document page. Students will use a spell-checker. Students will copy, cut, and paste text. Students will adjust paragraph indentations.

More information

LECTURE 08B: EXPLORING MS OFFICE WORD 2010

LECTURE 08B: EXPLORING MS OFFICE WORD 2010 LECTURE 08B: EXPLORING MS OFFICE WORD 2010 Insert Drop down This lecture is designed to prepare students for IC³ Certification STRUCTURED TASK 1. English Presentation Every student has Presentation to

More information

Creating your first website Part 4: Formatting your page with CSS

Creating your first website Part 4: Formatting your page with CSS Adobe - Developer Center : Creating your first website Part 4: Formatting your page... Page 1 of 23 Dreamweaver Article Creating your first website Part 4: Formatting your page with CSS Jon Varese Adobe

More information

What can Word 2013 do?

What can Word 2013 do? Mary Ann Wallner What can Word 2013 do? Provide the right tool for: Every aspect of document creation Desktop publishing Web publishing 2 Windows 7: Click Start Choose Microsoft Office > Microsoft Word

More information

USER GUIDE MADCAP FLARE Tables

USER GUIDE MADCAP FLARE Tables USER GUIDE MADCAP FLARE 2018 Tables Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is furnished

More information

Word for Research Writing I: Text and Structure

Word for Research Writing I: Text and Structure Word for Research Writing I: Text and Structure Last updated: 12/2017 Shari Hill Sweet dteditor@nd.edu or 631-7545 1. The Graduate School Template... 1 1.1 Document structure... 1 1.1.1 Beware of Section

More information

Chapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false.

Chapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false. Name Date Chapter 1 True/False Instructions: Circle T if the statement is true or F if the statement is false. T F 1. WYSIWYG stands for What You See Is What You Get. T F 2. The menu bar shows the application

More information

Website Development with HTML5, CSS and Bootstrap

Website Development with HTML5, CSS and Bootstrap Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on

More information

COSC 2206 Internet Tools. CSS Cascading Style Sheets

COSC 2206 Internet Tools. CSS Cascading Style Sheets COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it

More information