Presentation on theme: " Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia."— Presentation transcript:
Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia files, and scripts to your Web pages › Create Web sites that adhere to Web standards › Create Cascading Style Sheets to format and lay out your pages › Manage your Web site › Publish you Web Site
Web page- text file, usually written in a language called HTML. HTML- (Hypertext Markup Language)- code that references formats, images, and other multimedia files. Web Site- collection of related Web pages, linked together Web browser- software that interprets HTML code and displays it as the text and images you see on a Web page. › Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari
WYSIWYG (pronounced WEZ-EE-WIG) › What You See Is What You Get Allows you to see what you page will look like in a browser as you build it Allows you to create Web pages without knowing any HTML code.
Web Standards- guidelines for creating a web page. › Just like when writing papers you have to follow grammar and spelling, you have to follow HTML codes to create a website. › If an HTML code is incorrect the website will not work.
Cascading Style Sheets (CSS), often just called style sheets › CSS are rules that describe the presentation and visual design of a page, including fonts, colors, and often the layout and positioning of elements on a page.
Expression Web organizes the files to ensure you keep track of: › HTML files, › CSS files, › Images and multimedia files, › Scripts, › Hyperlink files
Web server- computer connected to the Internet that stores Web pages and other Web content and displays it to a Web browser. Publish- copying your Web pages and related files from your computer to a Web server. (Starting Expression Web- Page 4)
Title Bar- appears at the very top of the program window › Shows the title of the current Web site (if a site is open) or Web page (if only a page is open) Menu Bar- located under the title bar › Includes all Expression Web commands organized into menu such as File and Edit
Common Toolbar- located under the menu bar, provides access to common tasks in Expression Web › Tasks Include: creating a new page, saving and opening files, and common text formatting options.
Task panes- small, resizable windows that provide access to tools for specific tasks. › They appear on either side of the Expression Web window › Four task panes are displayed by default: Folder List- Top Left Tag Properties- bottom left Toolbox- top right Apply Styles- bottom right Many task panes have more than one tab.
Editing Window- large area under the Common Toolbar where you do most of your design work. A tab appears at the top of the editing window to indicate the Web Page open. › If you open additional web pages, additional tabs appear
Quick Tab Selector Bar- located just below the tag area › Allows you to easily select and edit specific HTML tags on your Web page Different view options are located on Bottom left corner › Show Design View, Show Split View, Show Code View
Status Bar- located along the bottom of the program window. › Provides helpful information such as: Current location of the insertion point Instructions for getting help Current settings › For the page currently working on: Indicated file size Page dimensions Which versions of HTML & CSS are being used
TITLE BAR MENU BAR QUICK TAG SELECTOR BAR WEB PAGE TAB STATUS BAR EDITING WINDOW TASK PANES COMMON TOOLBAR
Web pages and Web sites can be viewed in the browser They may not always look the same in a browser, we need to preview to be sure. › (Steps on page 8)
Viewing Options › Design View- shows what a page will look like when viewed in a browser. › Code View- displays the HTML code that the page is written in › Split View- combination of design and code view Task panes appear in all views and can be opened, closed, expanded, collapsed, and rearranged › (page 10)
When designing a site you will be using different elements. You can use the Visual Aids to help you separate the elements so you do not need to use Code View. › (Page 12)
Getting Help- Page 14 Printing and Closing a Page and Exiting Expression Web – Page 16 Complete Concept Review- Page 18-19 Complete Skills Review- Page 19-20 Real-Life Challenge- page 21