IP486F11A

From CourseWiki

(Redirected from IP486)
Jump to: navigation, search

Microsoft Expression Web

Course Description

In this hands-on course you focus on using Microsoft Expression Web to create feature-rich websites that are standards compliant. You learn how to create modern user interfaces, generate CSS layouts to manipulate position, sizing, margins and padding, perform cross-browser testing, and use the Search Engine Optimization (SEO) checker tool to improve search engine ranking.

Duration: 12 hours (4 evening sessions)

Register for this course

Theoretical Objectives

You will learn concepts and terminology related to web site development, and understand where these are used in the context of Expression Web 4 Some of the high level concepts covered in this course:
  • What is Expression Web 4?
  • Where it fits in with other products
  • What's new in the latest release
  • Expression Web 4 User Interface
  • Setting Options for your workspace
  • Setup for HTML 5 and CSS 3 Draft
  • The Design Surface
  • Panels and Workspaces
    • Stylesheets
    • Code View
    • Snapshots
    • Snippets
  • Create a website
  • Master Layouts (different approaches)
    • CSS Layouts from Templates
    • Dynamic Web Templates
    • Master Pages
  • SuperPreview
  • Site View Reports
  • Search Engine Optimization Reports

Practical Objectives

You will learn how to create standards compliant web sites and recognize the application of the concepts shown in the Theoretical Objectives. (left panel on this page).

Prerequisites

Prior experience in creating websites, HTML, CSS or visual design is an asset but is not required.

Knowledge of the following will be helpful

  • Cascading Style Sheets (CSS) for styling page elements
  • CSS for page layout
  • XHTML / HTML

Access to the internet is required to complete assignments.

Coming Soon
Courses coming

Follow JimUBC on Twitter for latest course updates
Follow JimUBC on Twitter for latest course updates


Microsoft Expression Web

Coming Soon
Courses coming

Follow JimUBC on Twitter for latest course updates
Follow JimUBC on Twitter for latest course updates

Contents

In this hands-on course you focus on using Microsoft Expression Web to create feature-rich websites that are standards compliant. You learn how to create modern user interfaces, generate CSS layouts to manipulate position, sizing, margins and padding, perform cross-browser testing, and use the Search Engine Optimization (SEO) checker tool to improve search engine ranking.


Duration: 12 hours (four evenings)

Register for this course

Note the session content schedule is subject to change.
The main topics and general order will remain, but what is covered in each session may vary from what is shown here.


Search the Expression Web Course Demo site
Loading



Session One

Course Overview / Introduction

In this hands-on course you focus on using Microsoft Expression Web to create feature-rich websites that are standards compliant. You learn how to create modern user interfaces, generate CSS layouts to manipulate position, sizing, margins and padding, perform cross-browser testing, and use the Search Engine Optimization (SEO) checker tool to improve search engine ranking.


Skills Required

What skills do I need in order to use Expression Web? Do I need to be a professional Web designer? Absolutely not. However, in order to be productive with Expression Web, you must possess the skills used in modern Web design.

The following skills are required in order to use Microsoft Expression Web.

  • Cascading Style Sheets (CSS) for styling page elements
  • CSS for page layout
  • XHTML / HTML

In addition to these core skills, you may also need to possess the following.

  • JavaScript knowledge when using scripting for menus, dynamic page design, etc.
  • ASP.NET or PHP knowledge for interacting with databases, implementing forms, using membership features for a login system, etc.
  • Knowledge of Internet Information Services (IIS) configuration if using IIS instead of the Microsoft Expression Development Server.

Source [1]

What is Expression Web

Image:Expression Web.png

Media:Expression Web.mmap

Environment / Setup

Expression Web


Mind Map

Tools | Options

Windows Live Account

or an email address where you can receive confirmation of your account for SuperPreview



CSS

Discussion: Inline styles or Stylesheets

  • Formatting toolbar creates inline styles
  • CSS
  • Mode Auto or Mode Manual (see bottom right side of status bar)
  • Turn on Standard toolbar
  • Turn off Common toolbar
  • Turn off Formatting toolbar to avoid inadvertently creating auto-generated styles
You can set preferences to determine whether new styles that Microsoft Expression Web generates while in Auto style application mode are inline or use a class or element selector. You can also use the style application preferences to set other options that affect Expression Web in both Auto and Manual modes.


Sample Text / Snippets

Expression Web 4 Snippets


Connection to the test server

Start with Site | Import

1 Site | Import Site (Start the Import Site Wizard)

Location: ftp://dotnet.tech.ubc.ca

Directory: ew4/ip486__ (01 or 02 or 03). I will give you your number in class.

uncheck Use Passive FTP

2 Login to connect to server
ip486__ __

User name: ip486 __ (01 or 02 or 03). I will give you your number in class.

Password: is the same as the User Name ip486__

3 Local copy location:
ip486__ __

Set the last part after the last forward slash to same as your username. (e.g. IP48601)

4 Create the local copy
confirm the correct path ending in ip486__ __

Yes, create it.

5 Finish

Finish

6 Window Firewall

Windows Firewall may ask for your permission.

Allow access.

View a page from Site View

1 View a page from Site View
2 Enter the URL

http://dotnet.tech.ubc.ca/ew4/ip486__ (your number) 


Hardware Setup

Two or more monitors - very very helpful

  • Design surface
  • Snapshot
  • SuperPreview

Wiki Page

You will create a wiki page under your name, and from this page you will have links to any notes or assignment work that you do for your courses.



Creating New Pages

This is an introduction to creating simple web pages. We will explore several different ways to create pages but we will start with very simple examples.

Previewing Pages

  • In a browser
    • In multiple browsers
  • Snapshot Panel (Panel | Snapshot)
  • SuperPreview (Toolbar | SuperPreview Tool or File | Display in SuperPreview)


Session Two

  1. Review assignments - Group Discussion
  2. Overview of Session Two mind map
  3. Code Snippets


Course Examples site

Introducing the Expression Web course examples web site

We will discuss this briefly and then move on through the material below.

Expression Web Features to Notice

  • Open as php, html, css etc. (Folder list, right click on file, open-as)
  • HTML Entities (in code view type ampersand (&) )
  • Code View: Right-click options
  • Quick Tag Editor
  • Cassini Web Server

Layers

Panels | Layers (bottom right by default)

A layer is a container in a web page that can hold page elements, such as text and graphics. You can overlap, nest, and show or hide layers on a page. Layers can be used to create web page layouts and, when combined with Behaviors, to create animations and fly-out menus. Layers can be viewed in browsers that support HTML 3.2 and later (for instance, Microsoft Internet Explorer 4.0 or later).

A layer is defined in Microsoft Expression Web as a set of <div> tags (representing the div HTML element) whose position property is set to either relative or absolute. The default layer that is generated by Expression Web contains an inline CSS that positions the layer absolutely, and sets the dimensions of the layer, its z-index value, and assigns the layer a unique ID.

After adding a layer to a web page, you can modify these properties and add new properties to the layer by using the layer and CSS features in Expression Web. You can create layers using the Layers panel, the Insert menu, or the Toolbox panel.


Using the Toolbox (HTML)

Expression Web Toolbox HTML Tools

See: Toolbox Tools on Sample Site

CSS

CSS Page Layout Example

  • File | New | Page | CSS Layout


  1. On the File menu, click New.

  2. In the New dialog box, on the Page tab, click CSS Layouts.

    When you click the name of a CSS layout on the right, a preview of the associated layout appears. In the preview image, columns that have a fixed width appear dark gray with a solid horizontal line spanning their middle. Columns that change size according to the width of the browser window appear light gray and have a dotted line with arrows at both ends spanning their middle.

  3. Select the CSS layout you want, and then click OK. Expression Web generates an HTML file and a linked cascading style sheet that contains the style rules that control the layout.

To change the appearance of an element in your page layout, and to set its default font properties, select the element you want to change. In either the Apply Styles panel or the CSS Properties panel, right-click the active style and select Modify Style.

Reference Adding CSS Layout pages

Image:EW4CSSLayout1.jpg
Image:EW4CSSLayout2.jpg
Image:EW4CSSLayout3.jpg
Image:EW4CSSLayout4.jpg


CSS Box Model

Image:CSSBoxModel.gif

The width property defines the actual area that the content will fit inside, and padding, border, and margin amounts are added on outside of the width. (You can see that a width of 100% with padding and border values would be problematic... so watch your values carefully!)

Source: Learning CSS


  • Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border - A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding - Clears an area around the content. The padding is affected by the background color of the box
  • Content - The content of the box, where text and images appear


Source: CSS Box Model


Start by creating a new page using a CSS layout. Header, Nav, Two Columns, Footer


Demo page

#header

1 Block

Centering the text
Image:CSSID0102.png
2 Background
Setting the background colour
Image:CSSID0103.png
3 Box
Centering this div on the page
Image:CSSID0104.png
4 Position
Image:CSSID0105.png
5 Layout
Making sure that nothing floats on either side of this div
Image:CSSID0106.png

#middleBlock

There is very little in this div as it serves only as a container so we can centre it on the page.

It contains #nav #content

1 Box
Centering the div on the page
Image:CSSID0107.png
2 Position

Setting the Width
Image:CSSID0108.png

#nav

1 Background
Setting the background colour
Image:CSSID0110.png
2 Box

Setting left margin to 0
Image:CSSID0111.png
3 Position
Setting width. This is just for navigation links and does not need to be very wide.
Image:CSSID0112.png
4 Layout
Float left within #middleBlock
Image:CSSID0113.png

#content

There is very little in this div as it serves only as a container for #content1 and #content2.


1 Background
Setting the background colour
Image:CSSID0109.png

#content1, #content2

This is where the real page content appears. These are two identical divs.

1 Border
A nice slim border
Image:CSSID0114.png
2 Border Radius
CSS-3 feature to make the corners rounded
Image:CSSID0115.png
3 Box
Padding and margins
Image:CSSID0116.png
4 Position
Width 325 leaves room for padding, margins, borders
Image:CSSID0117.png
5 Layout
Float left
Image:CSSID0118.png

#footer

Simple version if you combined #header and #footer

Setting the height
Image:CSSID0124.png

or you could do it separately especially if there were going to be more differences.

1 Block

Centering the text
Image:CSSID0119.png
2 Background
Setting the background colour
Image:CSSID0120.png
3 Box
Centering this div on the page
Image:CSSID0121.png
4 Position
Image:CSSID0122.png
5 Layout
Making sure that nothing floats on either side of this div
Image:CSSID0123.png

Source Code


<style type="text/css">
#header, #footer  {
	width: 800px;
	background-color: #EFF5E2;
	margin-right: auto;
	margin-left: auto;
	clear: both;
	text-align: center;
	height: 100px;
}
#middleBlock {
	margin-right: auto;
	margin-left: auto;
	width: 800px;
}
 
#content {
	background-color: #EFF5E2;}
 
#content1, #content2 {
	border: thin solid #000000;
	border-radius: 10px;
	padding: 5px;
	margin: 5px;
	float: left;
	width: 325px;
}
/*#content2 {
	padding: 5px;
	margin: 5px;
 
	float: left;
	width: 330px;
}
*/
#nav {
	float: left;
	margin-left: 0px;
	width: 100px;
	background-color: #EFF5E2;
}
/*#footer {
	background-color: #EFF5E2;
	margin-right: auto;
	margin-left: auto;
	width: 800px;
	text-align: center;
	clear:both;
}
*/
 
#footer {
	height:25px;
}





CSS in Design View Revisited

Discussion: Inline styles or Stylesheets

  • Formatting toolbar creates inline styles
  • CSS
  • Mode Auto or Mode Manual (see bottom right side of status bar)
  • Turn on Standard toolbar
  • Turn on Common toolbar
  • Turn off Formatting toolbar to avoid inadvertently creating auto-generated styles
You can set preferences to determine whether new styles that Microsoft Expression Web generates while in Auto style application mode are inline or use a class or element selector. You can also use the style application preferences to set other options that affect Expression Web in both Auto and Manual modes.


Multiple Pages with Common Layout

Let's talk about several approaches to creating standardized web pages that are relatively easy to maintain. The same basic idea applies: You create on thing upon which one or more others can be based. If you change the original, the changes are reflected in the pages that are based on it.

CSS+HTML, Dynamic Web Templates, ASP.NET Master Pages
CSS+HTML, Dynamic Web Templates, ASP.NET Master Pages











Live image to use in lecture

CSS Page Layouts

See CSS Page Layout Example above for detailed example.

Dynamic Web Templates

  1. Create an html page
  2. Save it as a Dynamic Web Template
  3. In Design View, right click and add Editable Regions
  4. Save the file
  5. Create new pages based on the Digital Web Template

Reference: Controlling page layout with Dynamic Web Templates

Master Pages

  1. Create a Master Page
  2. Create a new page from a Master Page.


Overview

ASP.NET master pages enable you to create a consistent layout for the pages in your application. A single master page defines the look and feel and standard behavior that you want for all of the pages (or a group of pages) in your application. You can then create individual content pages that contain the content you want to display. When users request the content pages, they merge with the master page to produce output that combines the layout of the master page with the content from the content page.

Master pages and Dynamic Web Templates

Both master pages and Dynamic Web Templates allow you to create a consistent layout that can easily be updated in all the pages in your site. If you are working with ASP.NET files, use master pages to define a consistent look with shared content across pages. If you are working with HTML files, use Dynamic Web Templates.

Master Pages Dynamic Web Templates

Use with .aspx files

Use with .htm or .html files

Master content and page content are merged on the server when the page is requested

Template content exists in all pages based on the template and must be updated in all pages whenever the template is updated

Individual page content must be between <asp:contentplaceholder> and </asp:contentplaceholder> tags

Individual page content must be between <!-- #BeginEditable --> and <! #EndEditable --> tags

Navigation with .NET

In a .NET Master Page

  • Tree View
  • SiteMapPath
  • Menu

You will need a Web.sitemap like this.


<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
	<siteMapNode url="~/default.aspx" title="Home"  description="Home page for this sub site" >
		<siteMapNode url="/CourseWiki/index.php?title=IP486" title="Course home page"  description="Course Home page on wiki site" />
		<siteMapNode url="~/CSSLayoutsTemplatesMasterPages.aspx" title="CSS Layouts Templates &amp; Master Pages"  
			description="Overview of Layouts, Templates, Master Pages" >
 
		<siteMapNode url="http://dotnet.tech.ubc.ca/CourseWiki/index.php?title=IP486_CSSDemo01" title="CSS Layouts on Course site"  description="CSS Layouts" >
			<siteMapNode url="~/headnav2columnsfooter0.htm" title="CSS Layout 1"  description="CSS Layout 1" />
			<siteMapNode url="~/headnav2columnsfooter.htm" title="CSS Layout 2"  description="CSS Layout 2" />	
		</siteMapNode>
 
		<siteMapNode url="~/DynamicWebTemplates.aspx" title="Dynamic Web Templates"  description="Dynamic Web Templates" >
			<siteMapNode url="~/PageFromDWT01.htm" title="DWT Page .htm"  description="Dynamic Web Templates" />
			<siteMapNode url="~/PageFromDWT01.aspx" title="DWT Page .aspx"  description="Dynamic Web Templates" />
		</siteMapNode>
 
 
		<siteMapNode url="~/MasterPage.htm" title="Master Page"  description="Master Page" />
		</siteMapNode>
 
		<siteMapNode url="" title="AJAX"  description="AJAX: Asynchronous JavaScript and XML" >
				<siteMapNode url="~/AjaxDemo01.aspx" title="AJAX Demo 1"  description="Drop Down List" />
		</siteMapNode>
 
		<siteMapNode url="" title="Resources"  description="Resources" />
		<siteMapNode url="/CourseWiki/index.php?title=IP486_Code_Snippets" title="Code Snippets"  description="Code Snippets" />
		<siteMapNode url="" title=""  description="" />
 
	</siteMapNode>
</siteMap>



Assignment

Session Three

Overview

live mindmap

Setup the Environment

  • Sample Site <<< connect to the site and create a shortcut on the Windows Task Bar
    • Create icon on Task Bar
  • FTP connection to test server
    • Server: ftp://dotnet.tech.ubc.ca
    • Path: ew4/ip486__
  • Publishing location: http://dotnet.tech.ubc.ca/ew4/ip486__

Connection to the test server

IP486 Connection to Test Server

Multiple Pages with Common Layout

Review notes for Multiple Pages with Common Layout


Master Pages

  • Revisit and finish discussion of this topic from last week
  • What happened (why did the last demo fail)
    • It was a server problem - the folder was not set up as an application.

Cascading Style Sheets


Using the Tools

Turn on Visual Aids

Image:ew4VisualAids1.png

Image:ew4VisualAids2.png

Using the Toolbox (HTML)

Forms
  • Workshop using the Toolbox Form controls

You will build a form in a web page like this: http://dotnet.tech.ubc.ca/ew4/ip48699/EWForm1.htm

Set the Action to "http://dotnet.tech.ubc.ca/ew4/ew4formhandler.aspx" and the method to "post"


Search Engine Optimization

  • Workshop - running SEO Reports

See: Search Engine Optimization

Assignment 3

Session Four

Reflecting on Session Three

  • What happened with SiteMapPath? Why wouldn't it appear on the page when we added it.
    • The page we created was not in the site map (Web.Sitemap) so SiteMapPath couldn't display.

Image:EW4SessionFourOverview.jpg

Session 4 MindMap

ASP.NET Controls

Please see Expression Web course examples web site

Working with Data

Please see Expression Web course examples web site

Using jQuery

Please see Expression Web course examples web site


Login Controls

Password protected access to your site.

To password protect content using the ASP.NET Login controls in Expression Web

  1. Add a login page to your website.
  2. Configure ASP.NET to use Forms authentication. See: Accessing the .NET WebAdmin when using Expression Web and the Cassini Development Server
  3. (Optional) Add users if necessary and create user roles (groups of users)
  4. (Optional) Add access rules to let ASP.NET know what content different users and/or roles are allowed to access in the website.


Accessing the .NET WebAdmin when using Expression Web and the Cassini Development Server

Image:EwASPNETWebSiteAdministrationTool.png


  • Start button 'cmd' enter
  • Change directory to C:\Program Files\Microsoft Expression\Web 4\WebDesigner.
  • type this in (double click to select, then copy):

expression.devserver /port:65000 /path:C:\Windows\Microsoft.NET\Framework\v4.0.30319\ASP.NETWebAdminFiles /vpath:/asp.netwebadminfiles </source>

  • in a browser go to:
    http://localhost:65000/asp.netwebadminfiles/default.aspx?applicationPhysicalPath=C:\Users\Student\Documents\My Web Sites\ip48699\&applicationUrl=/ip48699

Note: if you are doing this somewhere other than the lab at UBC, you will have to change Student to your username.



Reference

Adapted from Password Protecting Content with ASP.NET in Expression Web



Working with Data

Using jQuery

Assignment 4

Sample Files

Optional Reading

Visual Studio / Visual Web Developer 2010


Assignments

Assignment 1

To be completed before Monday October 24, 2011 If you do not already have Expression Web 4 installed get the Microsoft Expression Web 4 Trial — 90 day free trial

Verify that you have Expression Web 4 Service Pack 2 installed.

Check your settings and set them so that they match the ones we discussed above (Environment / Setup )

Review any notes you saved in your wiki page. If you have logged in, then your username will appear near the top right of this page. You can click your name and that will take you to your wiki page.



Assignment 2

To be completed before Monday October 31, 2011


In your wiki page, please post a link to the Expression Web website that you are building as you go through this course.

That site can be hosted on our course server ( http://dotnet.tech.ubc.ca/ew4/ip486__ ) as given to you last week, or it can be on a server elsewhere.

  1. Create a CSS stylesheet that has at least four areas (e.g. header, navigation, content, footer)
    • Create an html page that uses stylesheet above.
  2. Create a Dynamic Web Template that has at least four areas (e.g. header, navigation, content, footer)
    • Create two html pages that that are based on the Dynamic Web Template above
    • Modify the Dynamic Web Template and check that the modifications appear in the html pages
  3. Create a .NET master page
    • Create two .aspx pages that that are based on the Dynamic Web Template above
    • Add some form of navigation to the .NET Master Page
    • Check that the navigation is working in your .aspx pages


Assignment 3

To be completed before Monday November 7, 2011 (your part, then add comments)


Create a web form on your site like this: sample form

I'd recommend doing it as an .aspx (ASP.NET) page so you can try the validations.

Please use my form handler page for testing.

If you do your form as an html page then

If you do your form as an ASP.NET page then in the button




Assignment 4

To be completed before Monday November 14, 2011

Class discussion about Expression Web


Troubleshooting


Related Downloads

Online Resources




    [[Category:IP486F11A]]

    Personal tools