becoming a PowerSchool guru using HTML in PowerSchool Slide 2
Kathy Davies Lamar County System Information Manager 10 yrs at
Lamar County School System PowerSchool Admin since Jan. 2009 SASI
from 2002-2009 Ga PowerSchool Users Group Executive Committee
Co-Chair and Regions Committee Chair GaETC SIS Forums Rep Married
to Chad Physics Prof. @ Gordon College 5 dog-kids knitting fiend
(knittingnoodle on ravelry) there is never enough time to knit or
play fetch Slide 3 Our Outline BasicHTML PowerSchoolExtras Custom
Webpage Management Slide 4 Basic HTML tags and attributes and
elements, oh my! Slide 5 HTML HyperText Markup Language HTML is the
magic behind the web, the code that makes everything work. It is a
simple text language, so any text editor will work (not WordPad.)
HTML is made up of tags, elements and attributes. Basically, its
text that tells the browser what to make the page look like and
what to put on it. A Word About CSS CSS Cascading Style Sheets are
used heavily in PowerSchool to form the layout and appearance of
each page. We wont be editing any of those today, but youll see
class= and youll know its pointing to CSS. Slide 6 Tags Tags give
meaning to a section of text, telling the browser what to do with
it and how to display it. The first tag should always be the
doctype, so PowerSchool pages start with: Youd think this would be
enough, but, no, you have to reiterate so we know where the actual
html starts: Everything else Notice that there is an opening and a
closing tag on this one. Most tags have both. Inside the tags:
blahblah The Head section of a Web page holds the page title and
other information about the page but does not appear in the body of
the page. PowerSchool head sections contain a wealth of other data,
but what you need is mainly found on the templates they offer.
Slide 7 Titles Inside the head section, youll find: Page Title
Shown on Top of the Browser Window and Tabs This is the one section
of the PowerSchool header that youll need to edit. So we have:
Title of My Page Notice I havent closed the tag, yet. Well get
there. Slide 8 The next tag youll find is the Body tag: Lots of
text and pretty pictures. After youve closed the body tag, you can
close the HTML tag. At the bottom of most Web pages, youll find:
Because there really isnt much to say when youre done with the
page. So, we have: Title of Page Everything you see in the browser
window. The Basic Structure Now lets make it pretty. Slide 9
Attributes are like the adjectives of HTMLthey define the
properties or what the element should look like. Paragraphs: This
is a paragraph. This is a right justified paragraph. (also left,
justify, and center) Font attributes: size: text (1-6) color: text
face: Dont use too many different fonts; one or 2 should suffice.
weight: best used for a string of text because there are other
options for this one (100-900, 700 is bold) text Attributes Slide
10 Tags With No Attributes Certain tags have no attributes and are
usually used for a single word or short phrase. although this one
is sometimes used at the top and bottom of a section to indicate
that the entire section should be centered Bold or Strong text:
bold text or heavy text. Underlined text: text (not recommended for
use on a Web page) Italics or emphasized text: text or text text
Slide 11 Linking Text An anchor tag (a) is used to define a link,
but you also need to add something to the anchor tag the
destination of the link: Power Source Shows up as : Power
SourcePower Source Note the quotes around the URL. Slide 12 Self
Closing Tags This is mainly good practice and not absolutely
necessary, but I like to promote good practice. Line break: lines
are closer together than a paragraph ending. Note that the closing
bracket is preceded by a space and a forward slash. And the quotes
around the url. I snuck in that image tag. I am assuming you arent
going to add too many images right now, so we wont dwell on it.
Slide 13 PowerSchool HTML Extras wildcards, page inserts, and more
goodies Slide 14 PowerSchool Page Structure Admin Page Breakdown
[wc:commonscripts] [wc:admin_header_css] Start Page - UI Examples -
Admin Pages [wc:admin_navigation_css] This is the right side of
admin pageswhere most of your customizing will take place.
[wc:admin_footer_css] Style Sheets making websites sparkle!! Slide
15 PowerSchool Format Fun A lot of the formatting in PowerSchool is
already done through css, so you just need to know how to make them
work for you. PowerSchool uses a div tag, to create a small line
around the body of most pages, As long as you are between this and
at the bottom of the page, the following will work. Headers and
Lists have formatting that helps keep things consistent. Big, Bold
Text teeny, tiny text Lists work as expected in PowerSchool:
Ordered List First List Item Second List Item Unordered List First
List Item Second List Item Looks like: 1.First List Item 2.Second
List Item Looks like: First List Item Second List Item Slide 16
PowerSchool Submit Buttons [wc:admin_navigation_css] Submit Button:
Disabled Button Submit [wc:admin_footer_css] Slide 17 Tables You
find tables in many PowerSchool pages, so here are the basics;
Table Header Text in a cell Text in another cell Tables dont always
have a Header section, but the Rows and cells will always be there.
Again, PowerSchool has some built in formats you can take advantage
of. Slide 18 Tables in PowerSchool Link Description Admin Page
Descriptions Teacher Page Descriptions Forces the alternating
colors in the rows Puts color on header row Slide 19 Classes
PowerSchool uses the Class attribute to define particular looks for
various pages and elements on a page. For example: Slide 20 Inserts
X: codes, & Wildcards Inserts are commands that call up other
existing pages and display them as if they were part of the current
page. ~[x:insertfile;inserts/GA_SysRes.html] [wc:admin_header_css]
Start Page - UI Examples - Admin Pages [wc:admin_navigation_css]
Most of your page. [wc:admin_footer_css] Slide 21 More PowerSchool
HTML Help https://yourpowerschoolserver.com/admin/ui_examples/ HTML
Tutorials http://www.htmlcdetutorial.com and
http://www.w3schools.com/html/default.asphttp://www.htmlcdetutorial.com
http://www.w3schools.com/html/default.asp Free Text Editors Windows
Crimson Editor http://www.crimsoneditor.com
http://www.crimsoneditor.com - Mac Text Wrangler
http://www.barebones.com/products/textwrangler
http://www.barebones.com/products/textwrangler Lots of othersjust
Google it. Not so free - Dreamweaver Slide 22 Custom Webpage
Management putting it all together and making it work Slide 23 See
you at the Opening Session! Dont forget to Visit the Vendors!
Cookies at the break!
