File:  [mozdev] / cascades / www / screenshots.html
Revision 1.6: download - view: text, annotated - select for diffs - revision graph
Fri May 17 08:42:49 2002 UTC (15 years, 5 months ago) by glazman
Branches: MAIN
CVS tags: HEAD
grrr... bad named anchor

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
 <!-- MAIN CONTENT -->
  <title></title>
</head>
  <body>
 
<h5 class="page-header">Screenshots</h5>
 
<ol>
  <li><a href="#firstDemo">First demo made with CaScadeS</a></li>
  <li><a href="#droppedDemo">Dropped Initial demo</a></li>
  <li><a href="#bordersDemo">Block borders demo</a></li>
  <li><a href="#csspDemo">CSS Positioning</a><br>
  </li>
</ol>
 
<h3>First demo of CaScadeS :<br>
 </h3>
    
<table cellpadding="2" cellspacing="2" border="1" width="100%">
    <tbody>
     <tr>
       <td valign="top" width="25%"><a name="firstDemo"></a><a
 href="screenshots/i1.gif">Creation        of a simple document</a></td>
      <td valign="top">I just launched Composer and made a very simple document. 
       It contains a div carrying class "mainDiv", itself containing an h1 
and        a p.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i2.gif">Open   
    the stylesheet editor</a><br>
      </td>
      <td valign="top">The stylesheet editor is a modal dialog presenting 
on the        left all the stylesheets and rules attached to the document, 
and on the        right the information or properties specified by a sheet/rule. 
The dialog        also contains button allowing to create/move/remove external 
stylesheets,        embedded stylesheets, imported stylesheets, style rules, 
and at-media at-rules.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i3.gif">Attach 
      an external stylesheet to the document</a><br>
      </td>
      <td valign="top">I have just clicked on the "Link elt." button and
I am about        to attach an external stylesheet for media "screen" to
the document. It        is also possible to attach alternate stylesheets
that the browser will propose        to the user under View &gt; Use Stylesheet.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i5.gif">The    
   stylesheet is now attached to the document</a><br>
      </td>
      <td valign="top">The external stylesheet is added to the list of stylesheets. 
       Clicking on the item unfolds the list of rules specified by the sheet. 
All        items are in italic because they are external to the document and
cannot        be modified.<br>
        The right part of the dialog shows the intrinsic data of the stylesheet. 
       <br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i6.gif">The    
   "disable stylesheet" button</a></td>
      <td valign="top">Please notice the "disable stylesheet" that allows 
to disable        the application of the sheet w/o unloading it. It is then 
very easy to see        the difference between a document with a given sheet 
and without.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i7.gif">See    
   a CSS rule</a><br>
      </td>
      <td valign="top">I have selected a CSS rule and the right part of the 
dialog        shows me the intrinsinc data of the rule<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i8.gif">See    
   what background defines a rule</a><br>
      </td>
      <td valign="top">This rule defines a grey uniform background for the 
body        of my document<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i9.gif">Another
       rule</a><br>
      </td>
      <td valign="top">This rule specifies a lot of declarations<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i10.gif">See   
    what text and font it defines</a><br>
      </td>
      <td valign="top">This rule specifies a right alignment (and a silver 
background        but that's not shown in this tabpanel)<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i11.gif">Let's 
      create an embedded stylesheet</a><br>
      </td>
      <td valign="top">I have clicked on the "Style elt." button and am about 
to        add a STYLE element to the document.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i12.gif">Add   
    a rule to the new sheet</a><br>
      </td>
      <td valign="top">The stylesheet is created, let's add a rule applying 
to all        h1 elements<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i13.gif">Specifying 
       color</a><br>
      </td>
      <td valign="top">Specifying blue text color for all h1 elements<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i14.gif">The   
    text tabpanel for this rule</a><br>
      </td>
      <td valign="top">This rule specifies blue, bold, italic, right-aligned 
text,        in "Georgia" font (or the default serif font is Georgia is not 
available        on the system) of size 18 points ; &nbsp;the text is also 
underlined and overlined.        A preview is available. Please note that 
the editor's session behind is        immediately updated.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i15.gif">Let's 
      create another rule</a><br>
      </td>
      <td valign="top">I want to create another rule for the body of my document<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i16.gif">Specify 
       a background</a><br>
      </td>
      <td valign="top">I want the body of my document to be white with a
tiled background        image that does not scroll when I scroll the document's 
content in the viewport.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i17.gif">A     
  last rule</a><br>
      </td>
      <td valign="top">I also want the subtitle of my document to have its 
own style.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i18.gif">Specifying 
       text/font data</a><br>
      </td>
      <td valign="top">My subtitle's text is centered, in black colour, uses 
a smaller        font than the normal text and uses font Arial, or Helvetica 
if Arial is        not available, or sans-serif is none is available.<br>
      </td>
    </tr>
    <tr>
       <td valign="top" width="25%"><a href="screenshots/i19.gif">The   
    end result</a><br>
      </td>
      <td valign="top">Finally, I have added two stylesheets to my document 
in one        minute and its look is now absolutely different even if I did 
not change        any bit of the contents of its body.<br>
      </td>
    </tr>
       
  </tbody>   
</table>
   
<h3>&nbsp;Dropped Initial demo :<br>
 </h3>
 
<table cellpadding="2" cellspacing="2" border="1" width="100%">
   <tbody>
     <tr>
       <td valign="top" width="25%"><a name="droppedDemo"></a><a
 href="screenshots/Image1.gif">Creation of a simple paragraph</a><br>
       </td>
       <td valign="top"> I have launched Composer and created a long paragraph 
of text<br>
       </td>
     </tr>
     <tr>
       <td valign="top" width="25%"><a href="screenshots/Image2.gif">menu 
selection</a><br>
       </td>
       <td valign="top">I want to create a Dropped Initial and select the 
corresponding menu entry<br>
       </td>
     </tr>
     <tr>
       <td valign="top"><a href="screenshots/Image3.gif">defining text effects</a><br>
       </td>
       <td valign="top">it opens a properties dialog and I select Chevara 
font in 32pt, white color over a violet background<br>
       </td>
     </tr>
     <tr>
       <td valign="top"><a href="screenshots/Image4.gif">result</a><br>
       </td>
       <td valign="top">done ! But I am not pleased with the result and I 
want to remove this Dropped Initial, so I select the corresponding menu entry. 
Of course if I choose Edit instead of Remove, I can edit the previous settings 
and change them.<br>
       </td>
     </tr>
     <tr>
       <td valign="top"><a href="screenshots/Image5.gif">back to original 
state</a><br>
       </td>
       <td valign="top">we're back to the initial state, all the technical 
stuff behind this text effect has been removed and you don't even know what 
it did<br>
       </td>
     </tr>
   
  </tbody> 
</table>
 
<h3>Block borders demo :</h3>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
  <tbody>
    <tr>
      <td valign="top" width="25%"><a name="bordersDemo"></a><a
 href="screenshots/demo3-1.gif">Creation of a simple document</a><br>
      </td>
      <td valign="top">I have launched Composer and created 3 paragraphs
; the caret is in the second one<br>
      </td>
    </tr>
    <tr>
      <td valign="top" width="25%"><a href="screenshots/demo3-2.gif">menu
selection</a><br>
      </td>
      <td valign="top">I want to add borders to the paragraph containing
the caret<br>
      </td>
    </tr>
    <tr>
      <td valign="top"><a href="screenshots/demo3-3.gif">borders dialog</a><br>
      </td>
      <td valign="top">The borders dialog, in fact a part of the global CSS
editor's dialog, is now visible ; of course, if the paragraph already has
borders, the definitions are visible<br>
      </td>
    </tr>
    <tr>
      <td valign="top"><a href="screenshots/demo3-4.gif">specifying borders</a><br>
      </td>
      <td valign="top">I want blue thick inset top and bottom borders and
thin red solid left and right borders<br>
      </td>
    </tr>
    <tr>
      <td valign="top"><a href="screenshots/demo3-5.gif">result</a><br>
      </td>
      <td valign="top">done !<br>
      </td>
    </tr>
  </tbody>
</table>
<h3>CSS Positioning !!!</h3>
<table cellpadding="2" cellspacing="2" border="1" width="100%">
  <tbody> 
  <tr> 
    <td valign="top" width="25%"><a name="csspDemo"></a><a
 href="screenshots/demo41.gif">Creation of a simple document</a><br>
    </td>
    <td valign="top"> 
      <p>I have launched Composer and created 2 paragraphs.<br>
        The firts paragraph contains a large number of anchors (each word is an 
        individual anchor here), and the second one is blah blah, supposedly a 
        long text.</p>
    </td>
  </tr>
  <tr> 
    <td valign="top" width="25%"><a href="screenshots/demo42.gif">BODY's styles</a><br>
    </td>
    <td valign="top">Adding a background to the document<br>
    </td>
  </tr>
  <tr> 
    <td valign="top"><a href="screenshots/demo43.gif">table of contents</a></td>
    <td valign="top">Positioning the list of anchors and giving it a border<br>
    </td>
  </tr>
  <tr> 
    <td valign="top"><a href="screenshots/demo44.gif">TOC entries</a><br>
    </td>
    <td valign="top">Specifying that all A elements in the list of anchors should 
      be treated as blocks<br>
    </td>
  </tr>
  <tr> 
    <td valign="top"><a href="screenshots/demo45.gif">blah blah's styles</a><br>
    </td>
    <td valign="top"> 
      <p>Positioning the blah blah and adding a dropped initial</p>
    </td>
  </tr>
  <tr>
    <td valign="top"><a href="screenshots/demo46.gif">result</a></td>
    <td valign="top">done !</td>
  </tr>
  </tbody> 
</table>
<h3><br>
</h3>
</body>
</html>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>