Further web design: Cascading Style Sheets Practical workbook
|
|
|
- Lionel Farmer
- 8 years ago
- Views:
Transcription
1 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 exercises you should be able to: attach an external style sheet understand how style sheets can be used to control visual presentation edit existing style sheets create your own style sheets University of Bristol Information Services document web-15
2 Document information Course files This document and any associated practice files (if needed) are available on the web. To find these, go to and in the Keyword box, type the document code given in brackets at the top of this page. Related documentation Other related documents are available from the web at: Further web design: Cascading Style Sheets (Feb 11) 2010 University of Bristol. All rights reserved.
3 Introduction Cascading Style Sheets (CSS) has gradually replaced - and supplemented - HTML formatting as a standard method of presentation. One key feature is the separation of semantic mark up from visual presentation, resulting in cleaner, more accessible code. Prerequisites This document assumes that you are familiar with the use of a computer keyboard and mouse, Microsoft Windows software including file management, and a web browser. You should also be able to create simple web pages using a text editor and be able to transfer files to a web server, having attended a relevant course, e.g. Creating standards-compliant Web pages in XHTML (code CC1WPC).
4 Contents Document information Task 1 Customising HTML-KIT... 2 Task 2 Introducing style sheets... 5 Task 3 Creating a simple style sheet... 7 Task 4 The Box Model Task 5 Introducing classes Task 6 Applying classes to links Task 7 Additional link styling using pseudo classes Task 8 Using IDs for positioning Task 9 Adding a skip navigation link Task 10 Creating a nested box Task 11 Background images Task 12 Additional tasks: Creating new divisions and applying style to multiple pages Appendix A Online CSS resources... 21
5 Task 1 Customising HTML-KIT Objectives Comments To open and customise HTML-Kit to produce XHTML-compliant documents. In accordance with University Web guidelines, it is important to code pages to XHTML 1.0 standards. 1.1 Open HTML-Kit and close additional panels. Go to Start / Programs / HTML-Kit and select the launch icon You should see the HTML-Kit start screen with Open File wizard embedded within it (Figure 1). Figure 1 - HTML-Kit default interface showing Open file wizard In the Open file wizard (see Figure 1), select Cancel to close the box. Close the Workspace and Message window by clicking the close buttons (see Figure 2 and Figure 3). Figure 2 - closing the workspace Figure 3 - closing the message window 2
6 1.2 Set the default template to XHTML; On the menu bar, go to Edit / Preferences and select the tab labelled Startup from the Preferences dialogue box. Working in the box shown in Figure 4, make sure the Insert following text into new documents: checkbox shown is ticked, delete the default text, and replace with the following which can be inserted by clicking on the button labelled Import From File (see Figure 4) and selecting file C:\Training\WWW\Web design 2\template.txt <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <title>untitled Document</title> </head> <body> </body> </html> Figure 4 - default text for new documents 1.3 Select the File types tab and change the default extension from htm to html (see Figure 5). Figure 5 - setting default file extension 1.4 Select the Editor tab and, working in the Word Wrap Options area, check the box labelled Wrap at column, leaving the following boxes with their default values: column set to 0 (auto-wrap), and the other boxes, labelled Show wrap column and Mark wrapped lines checked (see Figure 6). 3
7 Figure 6 - setting word wrap options 1.5 Select the Help tab and uncheck the box labelled Display after (idle time in miliseconds), to disable the Tags Reminder (see Figure 7). Figure 7 - disabling Tags Reminder If you find the Tags Reminder feature useful, you can re-enable it. It works by predicting your code as you begin to type. If you choose to enable it, it is important that the Use XML format box is checked. 1.6 Select the Auto Complete tab and make sure the box labelled Enable Auto Complete is unchecked (see Figure 8) Figure 8 - disabling Auto Complete The Auto Compete option, although useful during the initial construction of a page, can result in the addition of unwanted code during subsequent editing. Click the button labelled OK, at the bottom of the Preferences dialogue box. 4
8 Task 2 Introducing style sheets Objectives Comments To examine a document before and after the attachment of a style sheet. Older browsers such as Netscape 4.* do not support all style sheet code. Recommended browsers include Internet Explorer 5.0 and above, and Firefox. 2.1 Open Mozilla Firefox and enter the following URL: Press the <Ctrl + n> keys to open a new browser window and enter the URL above. 2.3 Open each Joe Bloggs s home page link in a separate window (see Figure 9 and Figure 10). Figure 9 - Joe Bloggs's home page without style sheet 5
9 Figure 10 - Joe Bloggs's home page with style sheet attached 2.4 Examine each page, noting as many differences as possible. The purpose of style sheets is to separate the (semantically-structured) content of web pages from the presentation. This results in much cleaner code than were the visual styling embedded within the HTML, and enables a consistent look and feel to be applied across a website. 6
10 Task 3 Creating a simple style sheet Objectives Comments To create a basic style sheet to redefine several HTML elements (tags). A style sheet can, alternatively, be embedded in the head of an HTML document. This course concentrates on using an external style sheet linked to multiple pages. 3.1 Open file index.html in HTML-Kit: Go to File / Open File. Browse to folder: C:\Training\WWW\Web Design 2, and select index.html. 3.2 Preview your index page: Click the Preview in default browser icon Close the browser by clicking the 3.3 Return to HTML-Kit and open a blank style sheet: Go to File / New. Select Blank Style Sheet from the three options. on the Toolbar. icon at the top-right of the browser. 3.4 Type the following code into your new document window: body {font-family: Arial, Helvetica, sans-serif; color: #069; background-color: #FFFFCC; margin-top: 0;} This sets the default for the body of the document i.e. the whole of the visible page. All tags nested within the body will inherit these properties and values, unless they are set to be more specific. the use of space and line breaks in the CSS. This is purely aesthetic and is ignored by the browser. When colour codes comprise three pairs of identical characters, they can be truncated, for example: # becomes #069. The margin-top property is used to ensure browser compatibility by overriding the top margin applied by some browsers by default. 3.5 Select File / Save As, and save as joebloggs.css in folder: C:\Training\WWW\Web Design Return to file index.html and add the following code, shown in bold, to the head of the document: <title>joe Bloggs: Welcome!</title> <link href="joebloggs.css" rel="stylesheet" type="text/css" /> </head> 3.7 Save your file: File / Save, and reload/refresh your browser to update your index.html file. You will notice that a new style has been applied throughout your page. 3.8 Return to joebloggs.css in HTML-Kit and examine the code. 7
11 You will notice that the file comprises nothing but the HTML body element alongside a pair of curly brackets containing the descriptive information. CSS is always structured as follows: selector {property: value;} selector is, in this case, synonymous with HTML element, e.g. h1. The distinction will be explained later. Property has the same meaning as attribute: font or font-family being an example. This is always followed by a colon (:) Value refers to the value to which a property is set, e.g., the colour red or a size of 60px. It is followed by a semi-colon. In this case, the body element has been defined as having a cream (#FFFFCC) background, with dark turquoise (#069) text. The font-family property list fonts in order of preference. If possible, a browser will display any text in Arial. If the end user does not have this font installed on their computer, the browser will instruct it to search for Helvetica. If neither of these can be found, the default sans-serif font will be displayed. 3.9 Add the following, shown in bold, to style sheet joebloggs.css: body {font-family: Arial, Helvetica, sans-serif; color: #069; background-color: #FFFFCC; margin-top: 0;} h1 {margin-top: 8px; font-size: 190%;} h2 {color: #ED8D6D; font-size: 120%;} h3 {color: #069; font-size: 105%; border: 1px solid #069; margin-bottom: 8px; padding: 2px;} In this case the properties: border-width, border-style and border-color have been replaced by the border shorthand property Save file joebloggs.css, return to your browser and reload/refresh your index.html file, noting any changes (there are no <h3> elements on the index page) Browse to folder: C:\Training\WWW\Web Design 2, open file aboutme.html, and attach the style sheet joebloggs.css (see task 3.6). Save the file aboutme.html Return to your browser and select the About me link on your index page. the consistency of style across the two pages Using the example shown in the body element, change the font in one of the headers. Font families include: serif (e.g., Times New Roman, Times, serif) sans-serif (e.g., Arial, Helvetica, sans-serif) monospace (e.g., "Courier New", Courier, monospace) 8
12 Save your style sheet and refresh the webpage in your browser with each change. Quotes are used where font names comprise more than one word the colours, represented by hexadecimal codes. Try changing the colours of elements, making sure the foreground (text) and background colours sit well together and there is sufficient contrast. For assistance with colour codes, look at the following page: Looking at the CSS code in task 3.9, you may have noticed that the h1, h2 and h3 selectors have no font specified, but when viewing the document, all instances are rendered as sans-serif (Arial in our case). This is an example of inheritance or acquisition. HTML elements have what is known as a parent/child relationship. The <body> element acts as a parent to elements within it, and so, unless specified otherwise, all elements below the body tag will inherit many of its values Add comments to your style sheet. Browsers will ignore content placed between /* and */. This technique is a good way to divide a style sheet into sections and give instructions or tips to other parties. Add the following to your style sheet, where indicated in bold: /* Sets defaults font, colours and background for whole page */ body {font-family: Arial, Helvetica, sans-serif; color: #069; background-color: #FFFFCC;} /* Styles specific to headings */ h1 {margin-top: 8px; font-size: 190%;} h2 {color: #ED8D6D; font-size: 120%;} h3 {color: #079FE5; font-size: 105%; border: 1px solid #079fe5; margin-bottom: 8px; padding: 2px;} the use of percentages to modify font size. Using fixed font sizes removes the user s ability to control text size via the view menu in some browsers, and is therefore considered an accessibility issue. 9
13 Task 4 The Box Model Objectives Comments To understand the Box Model. CSS treats all content as though contained within a box (cf. table cell). 4.1 Look at the code within your style sheet, focussing on the properties margin, border and padding. CSS treats content as though contained within a box. Box properties bear a close relationship to the table attributes specified in many applications: a border can be added, margins defined to indent the whole box, padding added around content, and a background colour and/or image added (see Figure 11). Figure 11 - the box model 4.2 Identify some of the box properties of your style sheet and make a few changes. Supported border styles include double, dashed, dotted and solid (the default). how CSS can be truncated, e.g. border colour, thickness and style expressed in one shorthand property. On the other hand properties can be split into sub-properties (denoted by the hyphen). For example, note in your style sheet how the margin property for h1 and h2 is limited to: margin-top and margin-bottom respectively. Using simply margin with one value, (e.g. margin: 8px;) would apply the same value to each side. Expressing four values would apply one to each side in turn, starting at the top, and working round clockwise, for example: margin: 4px 8px 8px 4px; 10
14 Task 5 Introducing classes Objectives Comments To examine and define CSS classes. Classes can be defined to apply styling to one specific element, any element, or to span inline content. 5.1 The main problem associated with the simple redefinition of elements style is inflexibility. For example, how can a document contain both blue and red h2 headers if the style sheet defines them all as red? The way to achieve this is through the use of classes, to categorise elements or span content within a block. A class is a user-defined style, for example:.undergrad {color: #009900;} Notice how the class name begins with a dot; this is mandatory. The author will give the class a name appropriate to the content it is styling in this case, a reference to undergraduate students. The function of the class, in this case, is to turn content green. Classes can be written and applied in three ways: to any element, as shown above; to a specific element, in which case the class would be written as: h2.undergrad {color: #009900;} spanning inline portions of content, e.g. individual words or sentences within a paragraph, header etc. Classes are then applied within the HTML, in the following ways: Applied to whole block-level elements (p, h1 etc.): <h1 class="subhead">joe Bloggs: Welcome </h1> Applied inline, across content within blocks, using the span element: <h1>joe Bloggs: <span class="subhead">welcome</span></h1> Add the following to the bottom of your joebloggs.css file and save it:.subhead {color: #ED8D6D;}.leftpic {margin-right: 16px; float: left;} 5.2 Open your HTML-Kit window containing your index.html document. 5.3 Apply the classes to your code where indicated in bold: <h1>joe Bloggs: <span class="subhead">welcome</span> </h1> <h2>5th June 2006</h2> <img class="leftpic" src="images/joe-key.jpg" height="120" width="87 alt="joe Bloggs computer key" /> The float property embeds objects within following content. To stop floating at a given point, the clear property is used. This is explained in Task
15 Task 6 Applying classes to links Objectives Comments To apply a CSS class to each link state Link classes are applied directly to the <a> tag: <a class="navlinks" href=" 6.1 Add the following to the bottom of your style sheet:.navlinks {background-color: #FFF; color: #079FE5; text-decoration: none; padding: 2px 4px 2px 4px; font-size: 85%; border-top: 1px solid #EEE; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #EEE; margin: 4px 0;} margin values expressed as 4px 0. This is shorthand for 4px 0 4px 0. The padding values in this example could also be truncated to 2px 4px. 6.2 Working in your index.html document, apply the class to each of the <a> tags, shown below in bold. <li>home >></li> <li><a class="navlinks" href="news.html">news</a></li> <li><a class="navlinks" href="aboutme.html">about me</a></li> <li><a class="navlinks" href="contact.html">contact me</a></li> <li><a class="navlinks" href="links.html">links</a></li> 6.3 Save, then refresh/reload your page in your browser, noting changes. 6.4 Add the following, shown in bold, to your style sheet to set a consistent button size..navlinks {display: block; width: 7em; background-color: #FFF; color: #079FE5; text-decoration: none; The display: block; value sets inline elements in their own block, where they would otherwise be just part of a block (e.g. a couple of words within a paragraph). When elements are displayed inline, the size of the content determines the width. For this reason, a width cannot be attributed to an inline elements unless displayed as a block (or floated, which does not apply in this case). Also note the use of em as a unit of measurement. Any dimension expressed in em will resize according to text size in the browser s view: text size menu option. A typical use is to enable boxes to expand or contract to accommodate text displayed at different sizes. 6.5 Add a style for the currently selected link (i.e. the current page). Add the following CSS to your style sheet: 12
16 .currentlink {display: block; width: 7em; background-color: #FFF; color: #ED8D6D; padding: 2px 4px 2px 4px; font-size: 85%; border-top: 1px solid #EEE; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #EEE; margin: 4px 0; font-weight: bold;} 6.6 Span it across the text in the first list item, as shown in bold below: <li><span class="currentlink" >Home >></span></li> <li><a class="navlinks" href="news.html">news</a></li> 6.7 Save your style sheet, and then refresh/reload your page index.html in your browser, noting changes. 13
17 Task 7 Additional link styling using pseudo classes Objectives Comments To apply styling to specific link states. Pseudo classes differ from standard CSS classes in that the browser applies them automatically. Links have four states: link (as yet unvisited), visited (detected via the browser history), hover (a mouse is currently pointing at the link) and active (a mouse is currently clicking the link). Styles for each can be set as follows a:link {property:value;} a:visited {property:value;} a:hover {property:value;} a:active {property:value;}. These are examples of Pseudo Classes, so-named because, unlike CSS classes, which are applied manually in the HTML, the browser itself decides when they should be applied. It is important to express link states in the correct order to ensure properties are overridden correctly when hovering and clicking. 7.1 Add the following to the bottom of your style sheet: a:hover {text-decoration: none;} This modifies the style for all links, removing the underline when the mouse hovers over to link. 7.2 Apply a :hover pseudo class unique to your navigation links, by adding the following to the bottom of your style sheet a.navlinks:hover {background-color: #FFF3E5;} 7.3 Save, refresh and view the changes in your page. Run your mouse over the links in your navigation bar to see the hover effect. To consolidate the code added in tasks Task 6 and Task 7, the properties and values common to a.navlinks and.currentlink could be combined to read as follows (note the values unique to each class are subsequently listed separately): a.navlinks,.currentlink {display: block; width: 7em; background-color: #FFF; text-decoration: none; padding: 2px 4px 2px 4px; font-size: 85%; border-top: 1px solid #EEE; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 1px solid #EEE; margin: 4px 0px; } a.navlinks {color: #079FE5;} a.navlinks:hover {background-color: #FFF3E5;}.currentlink {color: #ED8D6D; font-weight: bold;} 14
18 Task 8 Using IDs for positioning Objectives Comments To investigate the use of IDs and use CSS to position content within a web page. IDs work in a similar way to classes, but can only be applied once in a page, as their function is to define specific sections of a page, e.g. a navigation bar or banner, to create a template applied across a site. 8.1 Split your index page into definable divisions using the <div> </div> tags: Add the following, shown in bold, to your file index.html to define the main content area of your page. <div id="maincontent"> <h1>joe Bloggs: <span class="subhead">welcome</span> </h1> <h2>5th June 2006</h2> Close the division just above the body of the document: </div> </body> Repeat the process to define your navigation bar and then save your file: <div id="navlist"> <ul> <li><span class="currentlink">home >></li> <li><a class="navlinks" href="news.html">news</a></li> <li><a class="navlinks" href="aboutme.html">about me</a></li> <li><a class="navlinks" href="contact.html">contact me</a></li> <li><a class="navlinks" href="links.html">links</a></li> </ul> </div> The <div> tag performs the function of a generic block level tag (h1, p etc are all referred to as block level or structural elements). Unlike a paragraph or header, a div has no specific function, semantic meaning or properties. It is used within CSS to divide web pages into discrete sections. 8.2 Add the following to the bottom of your style sheet: #maincontent {margin-top: 110px; margin-left: 12em; margin-right: 20px; margin-bottom: 0;} 8.3 Save your file joebloggs.css. An ID begins with a hash (#), rather like the dot employed by a class. The main difference between the two is that whereas a class can be applied any number of times within a page, an ID defines a specific portion of a page. 15
19 CSS can be used to position elements within a page. Add the following to your style sheet and save it: #navlist {position: absolute; top: 110px; left: 8px;} #navlist ul {margin-top: 0; margin-left: 0; padding-left: 40px;} #navlist li {list-style-type: none;} Elements can be nested within ids. The example above styles a division (div) called navlist, and any list (ul) and list items (li) contained within it. #navlist ul and #navlist li are examples of descendent or contextual selectors. also the padding and margin values applied to the ul selector; these have both been specified to ensure browser consistency: some apply a default margin whereas some set default padding. 8.4 Refresh your index.html document in your browser. the property position: absolute. This enables us to position elements exactly where we want them to appear on the page. The top and left properties set the position, relative to the body of the document (see exception below). that now this content has been removed from the HTML flow (the order in which the page was written), the main content moves up to occupy the space now vacant in the flow. There are four type of position: absolute, relative, fixed and static. Relative positioning moves content by offsetting it from its current position (i.e. not relative to the body). Fixed positioning is similar to absolute, but positioned content does not scroll with the rest of the page, appearing stuck to the screen. Static positioning is used to return otherwise-positioned content to its place in the HTML flow. If a parent block is set to position:relative, child elements can be positioned absolutely within it. 16
20 Task 9 Adding a skip navigation link Objectives Comments To add a hidden bookmark within the web page to enable screen-reader to skip past a navigation bar to the main page content. This exercise demonstrates how to use the CSS display property to hide page content from visual browsers The id attributed to the <div> maincontent has multiple uses: in the previous exercise it was used for styling. Here we will also be using it as a bookmark to create a link within a webpage. 9.1 Open file index.html in HTML-Kit 9.2 Add the following code, shown in bold, just above the navigation bar. <div id="navskip"><a href="#maincontent">skip navigation</a></div> <div id="navlist"> <ul> <li> <span class="currentlink">home >></span></li> <li><a class="navlinks" href="news.html">news</a></li> <li><a class="navlinks" href="aboutme.html">about me</a></li> <li><a class="navlinks" href="contact.html">contact me</a></li> <li><a class="navlinks" href="links.html">links</a></li> </ul> </div> <div id="maincontent"> <h1>joe Bloggs: <span class="subhead">welcome</span></h1> 9.3 Save and preview in a browser, noting the link that appears at the top of the page. This is to enable users of assistive technology (e.g. screen-readers) to jump directly to the main page content, bypassing content - notably navigation - that is repeated on every page. 9.4 Apply the same code to your page aboutme.html 9.5 Add the following to the bottom of your style sheet /* Hides skip navigation link */ #navskip {display: none;} 9.6 Save your style sheet and open/refresh one of your webpages. that the skip navigation link disappears; not only is it invisible, but the space it occupies is also removed from the page. 17
21 Task 10 Creating a nested box Objectives Comments To create a new division, nested within another. This task also covers clearing floated elements Add the following to your index page and save it. <div id="newsbox" style="clear: left;"> <h2>latest news: </h2> <ul> <li><a href="news.html">news item 1 </a></li> <li><a href="news.html">news item 2 </a></li> <li><a href="news.html">news item 3</a></li> </ul> </div> Add the corresponding CSS to your style sheet and save it. #newsbox {margin-top: 40px; padding: 0; border: 1px solid #ED8D6D;} #newsbox h2 {font-size: 110%; margin-top: 0px; margin-right: 0px; padding-left: 4px; color: #FFF; background-color: #ED8D6D;} #newsbox li {list-style-type: square; list-style-position: outside; color: #069;} This example uses the html style attribute to contain CSS: <div id="newsbox" style="clear: left;"> This technique is know as inline styling should only be used for one-offs, where deemed appropriate. In this case, an instruction is given to skip any left-floated objects and begin a new block underneath. The clear property can have values: left, right, both (or none, used to override any acquired clearing value). also the property list-style-position. This has a value of inside or outside, and positions bullets inside or outside the content (i.e. text within the list item). To ensure content does not wrap under the bullet points when the list item runs on to more than one line, it should be set to outside. Browser defaults vary. 18
22 Task 11 Background images Objectives Comments To apply fixed and scrolling background images to elements of a web page. The use of background images for decoration via CSS helps keeps HTML code clean, and does not interfere structurally with page accessibility. However, it is important to ensure background images do not impair page visibility Add a static watermark to the top left of your home page: Add the following, shown in bold, to the body element in your style sheet and save it. the background colour change to #FFF. body {font-family: Arial, Helvetica, sans-serif; color: #006699; background-color: #FFF; background-image: url(images/bodyback.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: 30px 0;} Refresh your index page noting changes. Using the value fixed for background-attachment sets the image as static wallpaper. To make the image scroll with the page, use the value scroll. The background-repeat property sets the image tiling: repeat-x tiles the image horizontally, repeat-y tiles vertically and no-repeat will set the image to be displayed only once. The background-position property sets the position of the image horizontally and vertically, relative to the containing div. Values include top, left, center and right. Alternatively, explicit positions can be used to offset the image from its default position of left top, in this case a 30px left indent and no offset at the top ( 0 and top are essentially the same) Add a background image to frame your main content area: Add the corresponding CSS to your style sheet and save it, before refreshing your index.html page in your browser. #maincontent {margin-top: 110px; margin-left: 12em; margin-right: 20px; margin-bottom: 0px; background: transparent url(images/mainbg.gif) left top scroll no-repeat;} The code controlling the background can be truncated to one all-encompassing background shorthand property. The value transparent will allow the background of parent (the body in this case) to show through. To render the main content section opaque it should be set to a colour value (e.g. #FFF) Add padding to the main content area to position it correctly within the background image, by adding the following to the bottom of your #maincontent CSS: background: #FFF url(images/mainbg.gif) left top scroll no-repeat;} padding: 16px 24px 0 28px; 19
23 Task 12 Additional tasks: Creating new divisions and applying style to multiple pages Objectives Comments To finish applying changes to a second web page and create a division to apply. These exercises use techniques covered in previous exercises Update your About Me page. Return to your aboutme.html file in HTML-Kit. Apply the subhead class to the h1 to match the index page (see task 5.3). Apply the navlist and maincontent <div>s along with corresponding ids (see tasks 7.1 and 7.2). Apply the navlinks and currentlink classes (see tasks 6.2 and 6.5) Float the image laptop.jpg to the right of the text: Create a class.rightpic to float images to the right and add a left-hand margin (c.f..leftpic in task 5.1). Apply class.rightpic to the image laptop.jpg 12.3 Create a footer for copyright and credits. Using the techniques covered in previous exercises, create your own id and apply it to the following division at the bottom of each page (an example will be available). <div> 2006 Joe Bloggs</div> 20
24 Appendix A Online CSS resources CSS Zen Garden: downloadable CSS examples with emphasis on background images W3 Schools CSS Tutorial and reference W3C CSS Validator Firefox Web Developer toolbar HTML Kit 292 download page 21
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
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
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 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
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
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,
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
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
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
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
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...
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,
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
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,
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 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
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
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
{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:
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
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
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
Web Design and Development ACS-1809. Chapter 9. Page Structure
Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a
Make a Joomla Template in 5 Easy Steps A Beginners Guide
Make a Joomla Template in 5 Easy Steps A Beginners Guide By Gary Reid http://clubtvk.com Copyright 2006 Gary Reid. All Rights Reserved. No part of this book may be used or reproduced in any manner whatsoever
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
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
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
Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence
Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.
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
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
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
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
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
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
IAS Web Development using Dreamweaver CS4
IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute
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
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
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
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
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
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,
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
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA
JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK
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
USER GUIDE. Unit 4: Schoolwires Editor. Chapter 1: Editor
USER GUIDE Unit 4: Schoolwires Chapter 1: Schoolwires Centricity Version 4.2 TABLE OF CONTENTS Introduction... 1 Audience and Objectives... 1 Getting Started... 1 How the Works... 2 Technical Requirements...
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
CHAPTER 10. When you complete this chapter, you will be able to:
Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables
Edline Manual Design Guide Version: November 2011
a Blackboard company Edline Manual Design Guide Version: November 2011 Copyright Statements: Edline software is a trademark of Edline, a Blackboard company. Copyright 2011-2012. Microsoft Windows names
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
Your Blueprint websites Content Management System (CMS).
Your Blueprint websites Content Management System (CMS). Your Blueprint website comes with its own content management system (CMS) so that you can make your site your own. It is simple to use and allows
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development
Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate
CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
The Training Floor s. Webmaster s. Bible
The Training Floor s Webmaster s Bible Host... 4 Login for WordPress... 4 Making Mistakes... 4 Email... 4 Retrieving Email... 5 Setting up Email on phones or computer... 5 Editing Pages... 5 Creating Email
Content Management System
OIT Training and Documentation Services Content Management System End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2009 CONTENTS 1.
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?
Edline Manual Design Guide Version: September 2011
Edline Manual Design Guide Version: September 2011 Copyright Statements: Edline software is a trademark of Edline. Copyright 2011. Microsoft Windows names and logos are registered trademarks of the Microsoft
Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.
Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.au Index Advanced Features... 3 1 Integrating Third Party Content...
Personal Portfolios on Blackboard
Personal Portfolios on Blackboard This handout has four parts: 1. Creating Personal Portfolios p. 2-11 2. Creating Personal Artifacts p. 12-17 3. Sharing Personal Portfolios p. 18-22 4. Downloading Personal
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
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
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
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
<?xml version= 1.0?> <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.
dhtml
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
Getting Started with KompoZer
Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files
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
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
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
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
RHYTHMYX USER MANUAL EDITING WEB PAGES
RHYTHMYX USER MANUAL EDITING WEB PAGES Rhythmyx Content Management Server... 1 Content Explorer Window... 2 Display Options... 3 Editing an Existing Web Page... 4 Creating a Generic Content Item -- a Web
How To Create A Campaign On Facebook.Com
Seriously powerful email marketing, made easy Table of Contents DOTMAILER QUICK START GUIDE... 3 Main Screen... 4 Getting Started... 6 STEP 1: CAMPAIGN SETTINGS... 7 STEP 2: CAMPAIGN CONTENT... 8 Editing
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
Click on the links below to find the appropriate place in the document
Index Click on the links below to find the appropriate place in the document Masthead Masthead is the large line of colour at the top of the Service Manager Screen. The Masthead also includes; The Customer
Smartphones and tablets: If you have a data plan, use the SMTP server setting for the company that provides this service.
ARTSPHERE USER MANUAL Hosting for versions 5.0 and 5.1 The hosting control panel is where your website is located. We refer to this as the cpanel. To access the cpanel add /cpanel to your domain name (for
Advanced Editor User s Guide
Advanced Editor 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
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.
Create Your own Company s Design Theme
Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)
Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux
SiteBuilder 2.1 Manual
SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can
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
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
UHR Training Services Student Manual
UHR Training Services Student Manual October 2012 1 Logging in to CareWorks Clicking the copyright symbol on the bottom left of the footer takes you to the sign-in screen and then to the control panel.
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
Introduction 3. Getting Familiar With Presence Builder... 4. Creating and Editing Websites 6
Contents Introduction 3 Getting Familiar With Presence Builder... 4 Creating and Editing Websites 6 Importing Sites from SiteBuilder 4.5... 7 Editing Websites... 9 Structure: Pages and Navigation... 9
Fast track to HTML & CSS 101 (Web Design)
Fast track to HTML & CSS 101 (Web Design) Level: Introduction Duration: 5 Days Time: 9:30 AM - 4:30 PM Cost: 997.00 Overview Fast Track your HTML and CSS Skills HTML and CSS are the very fundamentals of
Cascade Server. End User Training Guide. OIT Training and Documentation Services OIT TRAINING AND DOCUMENTATION. oittraining@uta.
OIT Training and Documentation Services Cascade Server End User Training Guide OIT TRAINING AND DOCUMENTATION oittraining@uta.edu http://www.uta.edu/oit/cs/training/index.php 2013 CONTENTS 1. Introduction
LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview
Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and
How To Write A Cq5 Authoring Manual On An Ubuntu Cq 5.2.2 (Windows) (Windows 5) (Mac) (Apple) (Amd) (Powerbook) (Html) (Web) (Font
Adobe CQ5 Authoring Basics Print Manual SFU s Content Management System SFU IT Services CMS Team ABSTRACT A summary of CQ5 Authoring Basics including: Setup and Login, CQ Interface Tour, Versioning, Uploading
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
Using Microsoft Word. Working With Objects
Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects
Brock University Content Management System Training Guide
Brock University Content Management System Training Guide Table of Contents Brock University Content Management System Training Guide...1 Logging In...2 User Permissions...3 Content Editors...3 Section
Mastering the JangoMail EditLive HTML Editor
JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop
collab.virginia.edu UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series collab-support@virginia.edu
UVACOLLAB ECLPS: BUILDING COURSE PORTALS UVaCollab User Guide Series collab-support@virginia.edu Revised 4/28/2014 CONTENTS The eclps Overview... 3 Objectives... 3 Adding the Syllabus or Lessons Tool to
Create a Poster Using Publisher
Contents 1. Introduction 1. Starting Publisher 2. Create a Poster Template 5. Aligning your images and text 7. Apply a background 12. Add text to your poster 14. Add pictures to your poster 17. Add graphs
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
Dreamweaver CS3 THE MISSING MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo
Dreamweaver CS3 THE MISSING MANUAL David Sawyer McFarland POGUE PRESS" O'REILLY 8 Beijing Cambridge Farnham Koln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction 1 Part
Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.
28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML
RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide
RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and
Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6
Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration
Have you seen the new TAMUG websites?
4 For all Cascade Management System request for PUBLISHING please email cms@tamug.edu for the quickest response. For all Cascade Management System request for QUESTIONS or COMMENTS please email cascadeusers@tamug.edu