Student Learning Outcomes:

1. Identify the purpose of XHTML and CSS.
2.Use Expression Web to Create a web site and a web page
3. Navigate the Expression Web Workspace
4. Change views in the Edition window
5. Position, close and open task panes
6. Describe the function of the status bar
7. Create a new web site

Parts of Expression Studio 2
Expression Blend: video, vector art, animation, 3D content
Expression Design: graphic art, illustration
Expression Media: manages media files
Expression Encorder: videos
Expression web: Web development


 

Important Points:
1. A network is two or more computers that are connected together to share data.
2. A network server (host) is a computer that hold and distributes data across the network.
3. A client is a personal computer (PC) that is connect to the internet and obtains data from a network server.
4. The internet is a client/server structure.
5. An internet service provider (ISP) provides a connection to the internet.
6. A web site is a set of related web pages.
7. A web server is a computer on the internet that stores web pages(host).
8. A web site can have sub webs.
9. Hyperlinks are pictures, objects, or text that when click on take you to another place in the current web page (internal hyperlink also called a bookmark), to another web page in the same web site, or to another web site.
10. A web browser (Internet Explorer or Netscape) is a program that displays the content of a Web page.
11. Portability refers to the ability of software to run on many computers in other words a portable program is hardware independent.
12. X Hypertext Markup Language (XHTML) is a portable display language that is use for web pages.
13. A disk base web allows you to work with web page on your local hard drive.
14. A server base web uses web server software that is installed on a server or a client.
15. Uniform Resource Locator is the area in the browser that the address of the web site is entered.
16. Most web address begin with http://, some begin with ftp:// which are file transfer sites.
17. The home page is the first page displayed at a web site. The name of a home page will be index.htm or index.asp (active server page) or index.aspx (active server page .net framework) or default.htm or default.asp or default.aspx.
18. When you type in a URL such as http://www.solano.cc.ca.us/ which is called the domain name, it is immediately resolved into the Internet Protocol (IP) address of 172.16.37.99.
19. Web Master is the web site development team leader
23. A static web page is a page that cannot be changed or interacted with.
24. A interactive or dynamic web page does not already exist a file, but is created interactively with the user.
25. A expression web component is a prewritten program that carries out a particular processing function.
26. Search component is used to create a search page that accepts a user's request and then searches the pages in a web site to find matching web pages.
27. A form contains form objects, such as text boxes and check boxes, into which users input the requested information.
28. FrontPage server extensions are a set of programs and scripts that support Expression Web  and allow a web browser to send and receive web page that are processed by a server.
29. Expression Web  views:

a. Page - use to create, edit, and format the content of a web page.
b. Folders - Use to view, create, delete, copy, and move folders in the open web site.
c. Reports - Use to analyze, summarize, and produce various types of reports about a web site.
d. Navigation - use to create or display a web site's navigational structure.
e. Hyperlinks - use to examine graphically the hyperlinks between web pages in a web site.
f. Remote Web Sites - used to publish a web site to another location and to synchronize copies of the web site stored in different locations.
f. Tasks - use to maintain a list of the tasks required to complete a web site.

30. A repeated hyperlink is one that has multiple links to the same target.
31. XHTML tags are enclosed in angle brackets <>.
32. Most tags are two-sided requiring the opening tag and a closing tag.
33. Some tags are one-sided requiring only an opening tab. The browser stops applying the formatting indicated by the one-sided tab when it encounters a new line.
34. Nested tags appear inside of each other. The browser first process the outer tag, then the inner tag.
35. Many tags require one or more attributes, or properties, which specify additional information about the tag.
36. XHTML code can be written in notepad, word pad and word. In word pad and word the file must be save as a text file.
37. The help facility essentially has the program book on the computer.
38. Quick Tab Selector toolbar show the the html code were the cursor is residing.
39. Web folder is a window folder that is configured to store a Web site.
40. Developing a web site includes the following activities:

a. Define the goal and purpose of the web site
b. Determine and prepare the web site's contents
c. Design the web site
d. Build the web site
e. Test the web site

41. Primary intent: What is the purpose of the web site?
42. Short and long-term goals.
43. Iintended audience:
44. What are the objectives of the web site?
45. What data do you need to create your web pages?
46. What specific results are you seeking?
47. How will you connect the web page in you web site?
48. Know and adheree to the stated goals for the site as you decide how to present its information.
49. Include components that download quickly.
50. Make the site visually appealing.
51. Organize your content into groups of related information.
52. Include appropriate navigation options, including a hyperlink in every page that returns you to the home page.
53. Expression Web includes a variety of templates and Wizards that you can use to create a new web site or page They are:

New Template

New Page Template

 

New web site templates

New Page ASP.net

New Page  CSS layouts

New Page Template, Style Sheets

54. Use spell checker.
55. There are two way of making a link bar.
a. a user-defined link bar in which you enter tex, format it, and create hyperlink.
56. Formatting is the process of changing the appearance of text in a web page.
57. Headings - h1 to h6 to can be reach with the style list or typed directly in code
58. Centering text is done by clicking on the formatting toolbar center button.
59. Special characters are reach by insert, symbol.
60. Text color use the font color button.
61. Format painter allows you to apply existing format to other text. One click allows the format to be applied to one object, two click allow the format to be applied to multiple objects.
62. Background color can be done with format, background. bgcolor="RRGGBB" hex codes
62a. Web Safe colors refer to the 216 colors that are supported by all browsers.
62c. RGB REDGREENBLUE is used to specify the hexadecimal number for red, green, blue when using other than the 16 colors that can be specified by name.

Aqua black 000000 blue 0000ff fuschia f0c00a
gray green 008000 lime 00ff00 maroon 800000
navy olive 808000 purple 800080 red ff0000
silver teal 008080 white ffffff yellow ffff00

63. Background picture which appears behind the web page text format, background, background picture.
64. GIF - graphic interchange format and JPG - Joint Photographic Experts Group are two types of pictures used in web sites.
65. Alternative text is a descriptive message that identifies a picture in a web page. Alt-text is required for ADA 508 compliance. Right click picture, click picture properties, click the general tab, type in the text box in the alternative section.
66. Horizontal Line HR is inserted with insert, horizontal line. The height, width, and color can be changed.
67. Background sound - WAV - standard format on personal computers: MIDI - Musical Instrument Digital Interface - used for synthesizers and sound cards. WAV is better quality. Right click the page, go to page properties, select backgrond sound.
68. Marquee (web component) is a text box that display a scrolling message. Out of style now.
69. META tags include text that identifies how the developer wants to add the web site to a search engine. description and key words are the most often created meta tags.
70. An index is a database stores information about specific web sites.
71. The head section is where the meta tags are placed
72. layout of Expression Web
        a. Task panes---ŕReset Workspace Layou
         b. View-ŕToolbarsŕCommon
73.
Components of work space
      a.
 Menu ba
        b.  Common toolbar Aspects of the common toolbar: Combines the most common features of the Formatting and Standard toolbars
         c. Status bar
         d. Editing window
          e. Task panes
74.  Create a new web page. Click  New Document on Common Toolbarŕopens a new web page

  Tags: (see tag placement p. 12)

75. Start <HTML>tag: follows DOCTYPE and contains all the rest of the document, whether visible to browsers or not. The whole document is contained between Start<HTML> and end </HTML tags

2. Start <head> and end </head> contains title of web page, some CSS code and some HTML code to indentify document to browser

3. Start <title> and end </title> contains everything in the title bar

4. Start <body> and end </body> tags contain all the content of the web page that appears in the browser

 Working with Task Panes

Vocabulary:

Task panes

Tag properties task pane: shows all the ways you can modify a HTML tag at the current location of the insertion point. Has two sub tabs: Tag properties specifies HTML changes, CSS properties specifies CSS changes.

Toolbox task panes: groups the commonly used HTML tags

Apply styles task pane: to create and modify styles

Manage styles task pane: to organize and move CSS styles.

Operation: To position and close a task pane:

                Task pane can be clicked and dragged anywhere in the editing window

Using the Status Bar

Status bar is located at the bottom of the workspace

Elements of the status bar

1.     Visual aids – used to display white space and padding which are usually not  seen

2.     style application – usually in Auto

3.     Download statistics – indicates the size of the page in bytes

4.     Rendering mode – usually in Standard – indicates that standard HTML/CSS code is in use

5.     Page size – the page size in pixels. This has no effect on how the page appears in the browser. Page size can be set to any value

6.     Schema indicator – notes that EW is using XHTML currently

7.     CSS indicator – notes that EW is using CSS 2.1

Creating a web site

1.     The home page for most web sites is named default.htm or index.htm

2.     File names should be lowercase, have no punctuation except the underscore character and should begin with a letter, not a number

3.     File names should be not more than 8 characters, with no spaces

4.     Always close all other pages before starting a new page, otherwise open pages will be added to the new web page.

5.     Pick a storage location for the new web site

6.     Click Open. A text box opens

7.     In the text box, type the name of the new web site

8.     close text box

 Changing the page properties (to give the web page a title and other identifying information)

1.     In design view, right click anywhere in the page. A  dialog box appears

2.     pick Page Properties

3.     click General

4.     Enter a title in the title box

5.     in the Page Description box, enter a description and/or your name and date

6.     close the dialog box

 Saving the File

 1.     All EW files have the extension  .htm

2.     To save, as usual for Window, or press Ctrl+S

3.     In file menu, specify save as

4.     type  nameoffile.htm

5.     Note icon of pencil writing on paper before the open file in folders list; indicates that the file is open

6.     Once file has been saved, it can be viewed in browser

7.     Use F12 key or preview from file menu



 

Best Practices:
1. Home Page: KISS - Keep it simple stupid - reality check - 95% of internet users still do not have broadband (greater then 100mb download per sec) and work with 33kb to 50kb dial up access. You may be impressed with the number and quality of the graphics, but the user out there is not going to wait more then 5 seconds on the average for your home page to load. Additionally, you may be impressed with purple on black however if the user eyes can not read your text it will not be read. On the other had if you just want to make your web site confusing, non informative and frustrating to the user then by all means waste your time. The home page like any good essay should state the purpose of the web site, how to contact you and the contents of the site.