Web development with SharePoint, HTML & CSS Danny Puype Trainer & Developer danny@puype.com

1.Intro

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

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

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

2.Getting started

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

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

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

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

3. Adding Content

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

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

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

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

Adding basic links insert / modify link paths Adding E-mail Links & links on images absolute links, relative links and target Bookmarks

Adding lists Ordered Unordered Definition

4. CSS

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)

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]

3 main principles Cascading Inheritance Specificity

Media types All Screen Print Handheld Speech

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

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

5. More Graphics & Multimedia

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

Inserting Flash

6. Navigation

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

7. Design / Layout

Different techniques Working with tables Working with layers Frames CSS approaches

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

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

8. Tables

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

9. Forms

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

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

10. Testing, uploading & maintenance

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

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

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; %