TOPIC: INTRODUCTION TO WEB PAGE DESIGN USING DREAMWEAVER CS3 Lesson 1 – Fundamentals of Web Page  Defining World Wide Web  Explaining what is a web page  Defining and explaining HTML  Discussing the structure of a web page  Creating a simple web page

 The Internet is all the computers in the world which are connected under Internet rules. The World Wide Web is only one part of the Internet. Other parts include , IRC chat, USENET, FTP and so on.

 The World Wide Web is a collection of all web pages and web sites in all the domains.  A domain is the name of one specific area on the World Wide Web, with a main address which usually looks like "  Each domain can hold one web site or many web sites.

 A web site is a collection of web pages (though it is possible for a web site to have only one page).  A web page is one part of a web site. The main web page of a web site is called the home page.

Web Site Basics Web Sites  A web site is a collection of all of the text, graphic images, links, sounds, and other elements that make up a presence on the web. Each individual document is called a web page. Web sites have three basic components: A home page - The home page is the top-most page in the web site.  Local and remotely stored web pages linked to the home page. Content - Content includes text, graphic images, and sounds. Home Pages  A web site's home page is the first page that users see when they access a web site. It creates the first impression for users and sets the tone for organization and content in the site. Home pages usually contain a header at the top that gives the name of the source for the site. Some headers are very simple and contain only text, while others have designs that incorporate graphic images.

LINKS AND CONTENT Links Users access local and remotely stored web pages linked to the web page by clicking on links. Links can:  Take users to other web pages at the same site.  Move users to other web pages at different sites.  Jump the cursor to another place on the same page.  Cause a file to be downloaded or copied from the web site to the users computer.  Connect the user to other Internet resources, such as . Content The content is the substance of a web site. It can take many forms, including:  Text documents  Graphic images  Sounds  Downloadable movie clips  Links to other related sites

Creating Web Pages HTML  Hypertext Markup Language (HTML) is the primary authoring language used to create documents for web pages. An HTML file includes text and HTML markup elements that identify sections such as headings, paragraphs, graphics, and lists.  The HTML markup elements ( called tags ) determine how these elements are displayed in browsers.tags )  Browsers interpret the HTML markup elements and display the results while hiding the HTML markup tags.  Web site designers may use web design software programs that add HTML markup tags automatically, so the user does not have to know how to write HTML markup tags.

Software There are generally five types of software tools that can be used to create web pages:  Word processors - Many word processors will allow users to save documents as HTML files and insert HTML coding automatically when the document is saved. (Examples: Microsoft Word, Corel WordPerfect)  WYSIWYG (What you see is what you get) editors - These editors are similar to word processors and do all of the HTML coding for you. (Examples: Microsoft FrontPage)  HTML editors - These editors allow users to paste HTML tags into text by clicking their mouse.  Conversion tools - Conversion tools convert files created with other software programs to HTML format.  Hybrid tools - Hybrid tools allow users to manage entire web sites. Users can create and edit web pages while monitoring the usage of the site.

Steps in Creating a Web Page  Determine the purpose.  Establish goals.  Identify objectives.  Plan the content  Write text and enter it into a word processor or web-page creation program.  Organize content.  Layout the web page.  Add graphic images.  Proofread for spelling errors, grammatical errors, and inconsistencies in content and layout.  View the web page off-line with a preview browser (this is an option that is available in software for HTML documents)  Make any needed adjustments and corrections.  Use FTP (file transfer protocol) to move the files to the web site host.  Test the web page using different browsers (Internet Explorer and Netscape) to access it from the Internet.  Refine and update as needed.

Types of Web Pages There are basically six types of web pages.  News sites - News sites contain stories and articles related to current events, life, money, sports, and weather.  Business and marketing sites - Business and marketing sites contain information that promotes or sells products or services.  Advocacy sites - Advocacy sites promote causes, opinions, and ideas in order to attempt to convince the reader of the validity of this point of view.  Personal sites - Personal sites are posted by private individuals for their own purposes.  Web portal - Web portals provide a variety of Internet services such as search engines, news, reference tools, personal web pages, newsgroups, calendars, and chat rooms.  Educational sites - Educational sites are provided for various educational purposes.

Posting Web Sites - Technical Issues Web Servers  Web servers are computers that store web sites and make them accessible to the Internet.  They are continually connected to the Internet 24 hours per day. Most large companies, educational institutions, and organizations have their own web servers.  Most small companies and individuals pay a fee to post their web sites on web servers owned by Internet-related companies, such as Internet service providers, who sell web server space to the public.  Cost normally is based on the maximum web server space allotted for the web site.  Some sites on the Internet provide a limited amount of free web server space to anyone who wishes to post web pages on their site. These companies make money by selling advertising that appears on every web page posted on their servers.

Web server  A computer that delivers (serves up) Web pages. Every Web server has an IP address and possibly a domain name.computerWeb pagesIP addressdomain name  For example, if you enter the URL in your browser, this sends a request to the server whose domain name is pcwebopedia.com.URL browser  The server then fetches the page named index.html and sends it to your browser.  Any computer can be turned into a Web server by installing server software and connecting the machine to the Internet. There are many Web server software applications, including public domain software from NCSA and Apache, and commercial packages from Microsoft, Netscape and otherssoftwareInternet MicrosoftNetscape

Dreamweaver CS3  one of the most versatile Web-editing programs.

Defining a Site  Dreamweaver's site management features are very powerful; however, in order to take advantage of the features, you must first establish a site. The following instructions explain this process. If you work on multiple computers, this process may need to be repeated on each computer.  Establishing a site involves naming the site and its folders or files. Managing a Dreamweaver site enables you to organize, share, and transfer files to the Web. For more information on understanding these different types of sites, see Local and Remote Sites: An Overview. Local and Remote Sites: An Overview. 1. Open Dreamweaver 2. From the Site menu, select New Site... The Site Definition for Unnamed Site 1 dialog box appears.

3. In the What would you like to name your site? text box, type the name of your site and click NEXT NOTE: This name is for your reference and will not be used by others. 4. For Do you want to work with a server technology...? select No, I do no want to use a server technology and click NEXT

5. For How do you want to work with your files during development? select Edit directly on server using local network

6. To locate the folder in which the files for your site are stored, click BROWSE FOR FILE The Choose local root folder for site Unnamed Site 1: dialog box appears. 7. Locate and select the folder where your web files are stored NOTE: If the files do not yet exist, create and select an empty folder. 8. Click SELECT 9. Click NEXT 10. OPTIONAL: To establish an HTTP address to the live area,  Select the Advanced tab  In the Category section, select Local Info  In the HTTP address text box, type the domain of your site EXAMPLE:  Click OK The site is defined. NOTE: If you have relative links to other pages on the UW-Eau Claire server, you will want to establish an HTTP address to the live area so that those links show as working. 11. Click DONE NOTE: If opening an existing site, the Scanning all files in site dialog box appears and shows the progress of the opening site.

Getting Started with Dreamweaver This document will provide you with the basic information needed to get started using Dreamweaver.  Opening Dreamweaver Opening Dreamweaver  Creating a New Web Page Creating a New Web Page  Adding or Modifying a Title Adding or Modifying a Title  Saving a Web Page Saving a Web Page  Exiting Dreamweaver Exiting Dreamweaver

Opening Dreamweaver  To open Dreamweaver, use the following instructions. Then proceed to learn how to create and modify a document. NOTES: These instructions are for on-campus computers only. Locations may vary depending on computer set- up.

1. From the Start menu, select All Programs » Adobe Design Premium CS3 » Adobe Dreamweaver CS3 The Dreamweaver CS3 opening menu appears.

2. Make the appropriate selection HINTS: To create a blank web page, select HTML To create a blank external style sheet, select CSS To manage an existing site or define a new one, select Dreamweaver Site... These are the three most common selections made from the Dreamweaver CS3 menu.

Creating a New Web Page  There are two options to choose from when creating a new, blank web page in Dreamweaver while the program is running.

Creating a New Web Page: Toolbar Option  When you are working on a Dreamweaver document, it is sometimes necessary to open a new document. Since the New button is only visible on the Standard toolbar, you must have at least one document open to use the toolbar option. 1. From the Standard toolbar, click NEW The New Document dialog box appears. NOTE: If the Standard toolbar is not visible, from the View menu, select Toolbars » Standard

Creating a New Web Page: Toolbar Option

2. From the Category list, select Blank Page 3. From the Page Type list, select HTML OR To use a blank template, select HTML template 4. Click CREATE

Creating a New Web Page: Menu Option 1. From the File menu, select New... OR Press [Ctrl] + [N] The New Document dialog box appears

Creating a New Web Page: Menu Option 2. From the Category list, select Blank Page 3. From the Page Type list, select HTML OR To use a blank template, select HTML template 4. Click CREATE

Adding or Modifying a Title  The title of a page is used by search engines to locate pages and to identify bookmarks; therefore, it is important to have a descriptive title.  If you are developing pages for a course, you may want to include the course number and UWEC along with a description of the page (e.g., Syllabus, English 110, UWEC).

Adding or Modifying a Title: Toolbar Option 1. From the Document toolbar, in the Title text box, type an appropriate title NOTE: If the Document toolbar is not visible, from the View menu, select Toolbars » Document 2. Press [Enter]

Adding or Modifying a Title: Properties Pane 1. If the Head Content toolbar is not visible, from the View menu select Head Content OR Press [Ctrl] + [Shift] + [H] 2. From the Head Content toolbar, click TITLE The Title Properties pane will open.

3. In Title Properties pane, in the Title text box, type an appropriate title 4. To set the title, click anywhere in the page

Saving a Web Page  To save a web page, you must give the page a filename. The filename is the name of the page as it appears in your operating system.  Web pages require an.htm or.html file extension.  This is essential for the web browser to identify your page as an HTML file.  For more information, refer to Naming Files and Understanding URL's in the UW-Eau Claire Web Development Tools series.Naming Files and Understanding URL's 1. From the File menu, select Save As... OR Press [Ctrl] + [Shift] + [S] The Save As dialog box appears.

2. If necessary, change the location where the file will be saved 3. In the File name text box, type the filename The filename must have an.htm or.html extension EXAMPLE: mydoc.html 4. Click SAVE

Naming Files  No caps.  No spaces between words.  No special characters (except dashes and underscores).

Exiting Dreamweaver 1. When you are done using Dreamweaver, simply exit the program. If you have not saved recently, you may be prompted to save before closing. 2. From the File menu, select Exit OR Click the X in the upper right corner A prompt might appear asking if you want to save. 3. Click YES, NO, or CANCEL

 HTTP is a request/response standard of a client and a server. clientserver  A client is the end-user, the server is the web site.web site  The client making a HTTP request—using a web browser, spider, or other end-user tool— is referred to as the user agent. web browserspideruser agent  The responding server—which stores or creates resources such as HTML files and images—is called the origin server.HTML  In between the user agent and origin server may be several intermediaries, such as proxies, gateways, and tunnels. proxiesgatewaystunnels

 HTTP is not constrained to using TCP/IP and its supporting layers, although this is its most popular application on the Internet.TCP/IP  Indeed HTTP can be "implemented on top of any other protocol on the Internet, or on other networks."  HTTP only presumes a reliable transport; any protocol that provides such guarantees can be used.