1. Web development with SharePoint, HTML & CSS
Danny Puype
Trainer & Developer

2. 1.Intro

3. The world of web development
Internet / Extranet / Intranet
3 pillars
Html / Xml / XHtml - standards
CSS
Javascripting, jQuery, spry
Dynamic web development
Browser compatibility
Code standards & compliancy
Coding and development tools – evolution

4. Web Site planning Graphics Content structure Navigation
Aims and functionality
Visitor
Technology
Browsers
Language
Meta communication
.../...

5. Typical Procedure
Take inspiration - from internet / intranet sites / colleagues / …
Plan on paper - Target browsers / Design / Target public / Aims
Prepare Structure - File structure / Content structure / Design
Configure - Environment
Create first set of pages (# versions)
Feedback & Decisions
Production process
Upload for & feedback from test user group
Correction phase & final uploads

6. 2.Getting started

7. Interface Basics
Toolbars: e.g. code view, positioning, masters, style, tables
Startpage & starter page templates
Task Panes: overview, manage, reset
Code view/ design view / split view
File Manager
Visual aids / Ruler / Grid
Tag selector
Status bar
Application Options
Page Editor Options

8. Defining a Local Site Site definition
Site settings
Remote website
Website reports
Use of Files Panel & defining file types
Managing sites
Folder structure
Import files
Previewing files
Uploading and FTP

9. Working with Code Code hints Code colouring Code toolbar
Code rewriting
Code formatting
Comments

10. Creating new pages New Document dialog box Page properties Title
Encoding
DTD
Page Properties
Head properties
Saving and recently used documents

11. 3. Adding Content

12. Adding Text Typing & coding Import Text Files/Word/Excel files
Pasting / Pasting Html
Cleaning Word HTML
special characters
Search and replace

13. Controlling Document Structure
Block tags
<h1> - <p> - <ul> - <ol> - <dl> - <div> - <blockquote> - <pre>
Inline tags
<span> - <br> - <em> - <strong>
Indentation & white space
CSS related

14. Formatting Text Fonts, <font> tag and font properties CSS
White space
About colours
Web safe colour palette
Set colour scheme
Search and Replace

15. Adding Images Formats: gif / jpg / png Inserting images
image path
accessibility
Image Properties
Resolution

16. Adding basic links insert / modify link paths
Adding Links & links on images
absolute links, relative links and target
Bookmarks

17. Adding lists
Ordered
Unordered
Definition

18. 4. CSS

19. CSS: what? why? how? Cascasing Style Sheets Scripting Language
Rules and declarations
stylename {property:value; property:value; ...}
linked with (x)HTML
Separation of Content layer & Formatting/Layout
Browsers & "specs" (specific instructions proposed by W3C)

20. The range of CSS selectors
Tag selectors : p {} - 1
Class selectors : .info {} - 10
ID selectors : #header {} – 100
More advanced selectors
Pseudo-class selectors: a:hover {}
Descendant (contextual) selectors: #header ul {}
Combined (grouped) selectors: h1, h2, h3 {}
Child selectors: #content > p {}
Adjacent (sibling) selectors: h1 + p {}
Attribute selectors: a[title]

21. 3 main principles
Cascading
Inheritance
Specificity

22. Media types
All
Screen
Print
Handheld
Speech

23. Formatting with CSS Creating Selectors
Text characteristics, font faces, font sizes, white space, units
Creating Tag, Class, ID Selectors
Creating a New Style Sheet & Attaching External Style Sheets
Editing Style Sheets
Cascading Order and Inheritance of Styles
Advanced aspects
Advanced Selectors : Pseudo-element / Combined / Pseudo-class
Embedded style selectors

24. Specific CSS interface features
Apply & Manage styles panels
Style and style application toolbars
CSS properties panel
Code hints & colouring
Properties pane
Creating and editing selectors
Tag selector

25. 5. More Graphics & Multimedia

26. Working with graphics CSS Editing Images Inserting an image map
Styling images
Hover effects
Editing Images
Inserting an image map
Images and Navigation

27. Inserting Flash

28. 6. Navigation

29. Navigation aspects Understanding Site Navigation
Linking to Named Anchors
Lists and nav menus with CSS
Creating a Navigation Bar with Javascript
dummy links : #, javascript();

30. 7. Design / Layout

31. Different techniques Working with tables Working with layers Frames
CSS approaches

32. Positioning with CSS Understanding layout The Boxmodel Layout models
Floating model
Positioning model
Design models
fixed
liquid
elastic

33. Using AP Layers Creating layers / properties / AP layer panel
Hiding and Showing Layers

34. 8. Tables

35. Tables Working with Tables Formatting tables with CSS Inserting tables
Table managament
Selecting
Splitting & merging
Formatting tables with CSS

36. 9. Forms

37. Creating Forms Understanding how forms work
HTML tags and attributes
Form objects and properties
Form Processing: post and get
Inserting of different elements
Text fields
Check boxes and Radio buttons
Buttons

38. Finetuning Forms Formatting with CSS
Browser inconsistencies
Adding functionality with javascript
Form validation

39. 10. Testing, uploading & maintenance

40. Testing Your Site Validation Browser compatibility & inconsistencies
XHTML
CSS
Browser compatibility & inconsistencies
Further Checking
Accessibility
Broken links
Spelling
Browser window sizes
Reports

41. Managing & Uploading Maintaining Files Uploading
rename / move / copy
integrated file browser
Uploading
connection and viewing remote site
uploading, put / downloading, get
dependent files
FTP log
Optimisation for search engines

42. Good coding practices Semantic (X)HTML & CSS Avoid inline CSS
Use meaningful names
Concentrate on purpose
Use less known or misunderstood HTML-attributes like alt="", summary="", title=""
Avoid divitis
Avoid inline CSS
The MOSE approach
Structure & comment CSS
Validate
Carefully consider measurements: px, em; %