1 / 19

Microsoft Expression: Web Design

Microsoft Expression: Web Design . Unit A. Understanding Web Design Software. 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

anevay
Download Presentation

Microsoft Expression: Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Microsoft Expression: Web Design Unit A

  2. Understanding Web Design Software • 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

  3. Create Web pages & Websites • 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

  4. See what your site will look like as you design it • 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.

  5. Create Web sites that adhere to Web Standards • 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.

  6. Create Cascading Style Sheets • 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.

  7. Managing the Web site • Expression Web organizes the files to ensure you keep track of: • HTML files, • CSS files, • Images and multimedia files, • Scripts, • Hyperlink files

  8. Publish your Web site • 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)

  9. Expression Web Workspace • 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

  10. Expression Web Workspace • 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.

  11. Expression Web Workspace • 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.

  12. Expression Web Workspace • 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

  13. Expression Web Workspace • 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

  14. Expression Web Workspace • 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

  15. TITLE BAR QUICK TAG SELECTOR BAR COMMON TOOLBAR MENU BAR TASK PANES WEB PAGE TAB EDITING WINDOW STATUS BAR

  16. Opening a Web Page & Previewing it in a Browser • 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)

  17. Working with Views & Task Panes • 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)

  18. Viewing Web Page Elements by Visual Aids • 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)

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

More Related