Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu.

Slides:



Advertisements
Similar presentations
Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
1 Web Design ITM 2010 Tutorial 3 Prepared by Wang Shiyu.
CPSC 203 Introduction to Computers Tutorial 59 & 64 By Jie (Jeff) Gao.
Hypertext Markup Language. Platform: - Independent  This means it can be interpreted on any computer regardless of the hardware or operating system.
About This Course... FrontPage 2000 Foundations. Course Pre-Qualifications This course assumes that you are familiar with using a Web browser and are.
HTML Introduction HTML
ETT 429 Spring 2007 Web Design I.
1 Chapter 11 Developing Custom Help. 11 Chapter Objectives Use HTML to create customized Help topics for an application Use the HTML Help Workshop to.
Microsoft Office XP Illustrated Introductory, Enhanced Office Applications with Internet Explorer Integrating.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
Chapter 19 – Macromedia Dreamweaver MX 2004
With Alex Conger – President of Webmajik.com FrontPage 2002 Level I (Intro & Training) FrontPage 2002 Level I (Intro & Training)
Designing a Classroom Web Site Using NVU Beginning Level.
CPSC 203 Introduction to Computers Lab 39, 40 By Jie (Jeff) Gao.
 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.
Exploring Microsoft Office XP - Microsoft Word 2002 Chapter 61 Exploring Microsoft Word Chapter 6 Creating a Home Page and Web Site By Robert T. Grauer.
Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?
 2001 Deitel & Associates, Inc. All rights reserved. 1 Chapter 12 – Microsoft FrontPage Express Outline 12.1Introduction 12.2Microsoft FrontPage Express.
Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.
Chapter 3 Dreamweaver: Part I The Web Warrior Guide to Web Design Technologies.
INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.
NetTech Solutions Working with Web Elements Lesson 6.
10 Adding Interactivity to a Web Site Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common.
FrontPage Introduction Presented by: Audrey Marshall for Interactive Multimedia Design.
WB_FrontPage_How To CS3505. Front Page 4 Microsoft Web Page Authoring tool 4 Available to students at no charge see helpdesk 4 Provides support for building.
1 Macromedia Dreamweaver Outline Introduction Macromedia Dreamweaver Text Styles Images and Links Symbols and Lines Tables Forms Scripting in Dreamweaver.
Website Development with Dreamweaver
ADOBE WEAVER WEB DESIGN. START THE DW 2 WORKSPACE LAYOUT Application Bar Document Toolbar Document Window Workspace Switcher Property Inspector GroupPanel.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Welcome to CMPE003 Personal Computer Concepts: Hardware and Software Winter 2003 UC Santa Cruz Instructor: Guy Cox.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Copyright 2006 South-Western/Thomson Learning Chapter 17 Creating and Linking Web Pages.
JAOIT 8.  Dreamweaver is a program for creating web pages and managing websites without having to type HTML code.  WYSIWYG – What you see is what you.
Understanding a Web Web page is a single page containing text and graphics that has been labeled with the appropriate HTML coding for the.
Fall 2005 Using FrontPage to Enhance Blackboard - Darek Sady1 Using FrontPage to Enhance Blackboard 1.Introduction 2.Starting FrontPage 3.Creating Documents.
Fourth R Inc.1 WELCOME TO MICROSOFT OFFICE FRONTPAGE 2003 INTRODUCTORY COURSE.
Chapter 13. Applets and HTML HTML Applets Computer Programming with JAVA.
XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 1 1 Microsoft Office FrontPage 2003 Tutorial 1 – Creating a Web Site.
Introduction to web development and HTML MGMT 230 LAB.
Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Exploring Microsoft Microsoft FrontPage Chapter 21 Exploring Microsoft FrontPage 2002 Chapter 1 Creating a Home Page: Introduction to MS FrontPage.
Microsoft FrontPage 2003 Illustrated Complete Working on the Web Site’s Hyperlinks and Appearance.
Chapter 8 HTML Editors. Copyright © 2006 Pearson Addison-Wesley. All rights reserved. 8-2 Text Editors Text editors don't have word processing features.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Writing Your Own Web Page: Using HTML and FrontPage Chapter 10.
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Dreamweaver Tips & Basics Presented by Laban Toose ICT Specialist Sunbury Heights Primary School.
Chapter 28. Copyright 2003, Paradigm Publishing Inc. CHAPTER 28 BACKNEXTEND 28-2 LINKS TO OBJECTIVES Table Calculations Table Properties Fields in a Table.
Learning Aim C.  Creating web pages involves many considerations.  In this section we will look at the different software tools you can use and how.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
Creating Web Pages in Word. Sharing Office Files Online Many Web pages are created using the HTML programming language. Web page editors are software.
Computer Fundamentals Desktop Publishing & Web Design MSCH 233 Lecture 9.
Section 10.1 Define scripting
Objective % Select and utilize tools to design and develop websites.
Creating Dynamic Web Pages with FrontPage Barry Sosinsky Valda Hilley
Chapter 1 Introduction to HTML.
With Microsoft FrontPage 2000
Objective % Select and utilize tools to design and develop websites.
Section 10.1 YOU WILL LEARN TO… Define scripting
Creating a Successful Web Presence
Introduction of FrontPage
Introduction to HTML Simple facts yet crucial to beginning of study in fundamentals of web page design!
Web Page Design CIS 300.
Presentation transcript:

Web Design ITM 2010 Tutorial 1 Prepared by Wang Shiyu

A good web site  Brief theme  Good structure (easy to navigate)  Small size(easy to load)

Commercial tools  Microsoft FrontPages –Simple. WYSIWYG, Easy to learn  Macromedia Dreamweaver –Powerful fully featured extensible WYSIWYG editor with site management and support for 3 rd party tags (ASP…)

Microsoft FrontPage  Menu for changing text styles. –Header tags –List tags –Alignment  Menu for creating tables, forms, frames, etc.  Menu for inserting images, hyperlinks with http, mailto, https, etc.

Microsoft FrontPage (Con’t)  Not much support for script languages  Include tag which is only supported by Microsoft Internet Explorer –Text inside Marquee element scrolls slowly across screen –Have to type in complete script in JavaScript or VBScript

Microsoft FrontPage (Con’t)  Other support features –DHTML effect –Page transitions –Hover Button –Banner Ad Manager

Microsoft FrontPage (Con’t)  Microsoft FrontPage window –Similar to Microsoft Word Component Alignment options Create List Insert Indent Insert Table Insert Image Insert Hyperlink Text Styles

HTML Introduction  What is HTML? HTML stands for HyperText Markup Language. It describe the contents and appearance of pages on the World Wide Web. It use pairs of opening and closing tags to describe each element on a Web page

For example, code school describes a link(URL) on the page. The tag indicates the beginning of link and indicates the end of the link. If you design pages in FrontPage, you don‘t need to know any HTML or DHTML; because it is a WYSIWYG( 所見即所得 ) design tool that can automatically generate the HTML code. What is HTML?

HTML Introduction Hello World This is the test Click me

HTML Introduction (Con’t) … …

HTML Introduction (Con’t) Note: You are recommended to put all files which are linked to your web such as image, web, music into the same folder. In another word, they can belong to separate sub- folder, but this folder must belong to the same root. In this way,you can move your work easily

Form page in normal tab

View HTML code

Get help from FrontPage

Begin to design web page  Create a blank page  Using Frame

Page properties  Background –background picture –background sound  Link properties –hyperlink color –hyperlink rollover

Page properties

Add image

 Picture properties  Picture link