1 / 20

Introduction to Dreamweaver: Creating your own website (1)

Introduction to Dreamweaver: Creating your own website (1). Getting started. World Wide Web Very large number of websites Linked electronically Accessible from any networked computer using a web browser. Web Pages are simply files. Stored (saved) on a “web server”

percy
Download Presentation

Introduction to Dreamweaver: Creating your own website (1)

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. Introduction to Dreamweaver:Creating your own website (1)

  2. Getting started • World Wide Web • Very large number of websites • Linked electronically • Accessible from any networked computer using a web browser

  3. Web Pages are simply files • Stored (saved) on a “web server” • Written in a special “code” or language • With a unique “web address”

  4. Why Dreamweaver? • Works (and looks) like Word Processing • Translates file into “code” for you

  5. What you’ll learn this time • Set up your own webpage • Planning your website • What is Dreamweaver • Where to get help • Exploring the Dreamweaver Work Area • How to set Up a Website • Web Page Layout

  6. Set up your own webpage • Open IE, and login to https://mydoc.polyu.edu.hk/modules/login.php • Setup myweb if this is the first time you login. • Clink access myweb, a new window will come out. • Store your webpage documents into it. • Open a new IE page, type http://www.acad.polyu.edu.hk/~07900xxxx/. Now you can see your webpage.

  7. Planning your website • Define the purpose • Define the audience • Define the content • How many pages? • General design • Color scheme • Who will maintain it • Show family photos • Mostly family • Some text and old photos • 6 for starters • Photo album • Sepia Tones • Me

  8. What Is Dreamweaver? • the most popular professional web creation tool • a complete web development environment and Hypertext Markup Language (HTML) editor • a dynamic web page development tool • a website management tool

  9. Getting Help • select Help, Dreamweaver Help (or use the standard help shortcut key, F1) • Dreamweaver FAQ (www.dwfaq.com) • Dreamweaver Fever (dreamweaverfever.com) • Adobe's Dreamweaver Developer Center (www.adobe.com/devnet/dreamweaver) • Adobe's Dreamweaver Support Center (www.adobe.com/support/dreamweaver)

  10. Exploring the Dreamweaver Work Area • The Welcome Screen • Turn on and off the Welcome screen in the General category of Dreamweaver preferences. • The Dreamweaver workspace contains the Document window along with integrated panels.

  11. Exploring the Dreamweaver Work Area • The Menu Bar • The File and Edit menus contain commands that are common to many applications, plus a few Dreamweaver-specific ones. • The View menu houses commands to turn interface elements on and off. • The Insert and Modify menus give you control over inserting objects and changing their attributes.

  12. Exploring the Dreamweaver Work Area • The Menu Bar • All the commands necessary to change text elements are in the Text menu. The Commands menu has commands to clean up HTML, optimize images, and format and sort tables. Powerful stuff! • The Site menu commands help you manage an entire website. The Window menu commands help you manage the Dreamweaver panels and inspectors. • The Help menu gives you access to Dreamweaver's extensive help system.

  13. Exploring the Dreamweaver Work Area • The Insert Bar • The insert bar drop-down menu displays a list of the categories and the Show as Tabs command, which enables you to display a tabbed insert bar. • In Tabs mode, the insert bar categories appear as tabs across the top of the bar .

  14. Exploring the Dreamweaver Work Area • The Document Toolbar • The Document toolbar contains commands you commonly apply to web pages when editing in Dreamweaver..

  15. Exploring the Dreamweaver Work Area • The Status Bar • The status bar contains tools that help you get information about a web page. • The Window Size menu resizes the screen, approximating how the page will look at different screen resolutions.

  16. Exploring the Dreamweaver Work Area • Panels and Inspectors • Expand and collapse panel groups using the expander arrow. • The Collapse buttons collapse and expand the panel group area and the Property inspector area so that you have more room for the Document window. • The Property inspector displays text properties when text is selected. • The Property inspector displays image properties when an image is selected.

  17. Exploring the Dreamweaver Work Area • Context Menus • The context menu for tables gives you quick access to many table commands. • the context menu that pops up when you right-click a table.

  18. Setting Up a Website • A website (alternatively, web site or Web site) is a collection of Web pages, images, videos or other digital assets. • A Web page is a document, typically written in HTML • Defining a site gives you a home base to work from.

  19. Setting Up a Website • The Basic tab contains the Site Definition Wizard that walks you through the site definition. • The Advanced tab contains all the site properties. • The Files panel enables you to change sites and open web pages. You can add files and folders in it also. • You can organize your website into images and other directories as you like.

  20. Exercises • According to the tutorial, build a website. • Be more familiar with the Layout of Dreamweaver.

More Related