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:
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.