chapter 1 getting started with dreamweaver. exploring the dreamweaver workspace the dreamweaver...

Chapter 1

Getting Started WithDreamweaver

Exploring the Dreamweaver Workspace

• The Dreamweaver workspace is where you can find all the tools to create and maintain websites including:– Menus– Panels– Buttons– Inspectors– Panes

Dreamweaver CS6 Workspace

Menu bar

Insert panel

Document window

Files panel


• The Document window is the large area in the Dreamweaver program window where you create web pages.

• The Menu bar (also called the Application bar), located above the Document window, includes menu names, a Workspace switcher, and other application commands.


• The Insert panel, sometimes called the Insert bar, includes nine categories of buttons:– Common– Layout– Forms– Data– Spry


• The Insert panel, sometimes called the Insert bar, includes nine categories of buttons:– jQuery Mobile– InContext Editing– Text– Favorites


• The Document toolbar contains buttons and drop-down menus you can use to:– Change the current work mode– Check browser compatibility– Preview web pages– Debug web pages– Choose visual aids– View file management options


• Live view displays an open document as if you were viewing it in a browser.

• The Standard toolbar contains buttons you can use to execute frequently used commands that are also available on the File and Edit menus.


• The Style Rendering toolbar contains buttons that you can use to display data for different platforms, such as a cell phone or television.

• The Related Files toolbar is located below an open document’s filename tab and displays the names of any related files.


• Related files are files that are linked to a document and are necessary for the document to display and function correctly.

• The Coding toolbar contains buttons you can use when working directly in the code and is not visible unless you are in Code view.


• The Property inspector sometimes referred to as the Properties pane, located at the bottom of the Dreamweaver windows, lets you view and change the properties (characteristics) of a selected object.


• The Status bar is located below the Document window.

• The tag selector shows the HTML tags used at the insertion point location.


• The panel is a tabbed window that displays information on a particular topic or contains related commands.

• Panel groups are sets of related panels that are grouped together.


Panels in panel group Displaying a panel group


• A View is a particular way of displaying page content.

• A dock is a collection of panels or panel groups.


Docking a panel group


• Design view shows the page as it would appear in a browser and is primarily used for designing and creating a web page.

• Code view shows the underlying HTML code for the page; use this view to read or edit the underlying code.


Code view for new document

Coding toolbar


• Show Code and Design views is a combination of Code view and Design view.

• Show Code and Design views is the best view for debugging or correcting errors because you can immediately see how code modifications change the appearance of the page.


• The first web page that appears when users go to a website is called the home page.

• The home page sets the look and feel of the website and directs users to the rest of the pages in the site.


• Web pages can be very simple and designed primarily with text, or they can be media-rich with images, sound, and movies.

Viewing a Web Page and Using Help

Common web page elements


• Hyperlinks, also known as links, are images or text elements on a web page that users click to display another location on the page, another web page on the same website, or a web page on a different website.


• Images add visual interest to a web page.• Banners are images that appear across the top

or down the side of the screen that can incorporate a company’s logo contact information, and links to the other pages in the site.


• Menu bars, also called navigation bars, are bars that contain multiple links that are usually organized in rows or columns.

• An Image map is an image that has been divided into sections, each of which serves as a link.


• The navigation structure of the site refers to the way that menu bars and other internal links are used on your pages.

• Rich media content is a comprehensive term that refers to the attractive and engaging images, interactive elements, video, or animations.


• Adobe AIR is an Adobe product used for developing content that can be delivered with a browser or a desktop application.


• Planning a website is a complex process that requires careful planning including:– Developing a plan– Creating the basic structure– Creating the content– Testing– Modifying (if necessary)– Publishing

Planning and Setting Up a Website

• Website planning checklist:– Who is the target audience?– How can I tailor the site to reach the audience?– What are the goals for the site?– How will I gather the information?– What are my sources for media content?


• Website planning checklist:– What is my budget?– What is the timeline?– Who is on my project team?– How often should the site be updated?– Who will update the site?


• A wireframe, sometimes referred to a storyboard, is an illustration that represents every page in a website.

• The home page is called the parent page.• The pages linked below it are called child

pages.


• The local site folder (root folder) is a folder for the site with a descriptive name, such as the name of the company, will store all the pages or HTML files for the site.

• A sub folder in which you store all the files that are not pages such as images and sound files should be created and could be named assets or images.


• After you create the local site folder, you are ready to set up your site, using the Dreamweaver Site Setup dialog box.

• Files panel is the panel you use to mage your website’s files and folders.


• Once all the pages in your website are completed, you need to test the site to make sure all the links work.

• It is important to test your site using different browsers including the four most common browsers; Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, and Safari.


• Publishing a website refers to the process of transferring all the files for the site to a web server, a computer that is connected to the Internet with an IP (Internet Protocol) address, so that it is available for viewing on the Internet.


• Many Internet Service Providers (ISPs) provide space on their servers for customers to publish websites, and some commercial websites provide free space for their users.

• FTP (File Transfer Protocol) is the process of uploading and downloading files to and from a remote site.


• After you set up a website, you need to create folders to organize the files that will make up the site.

• Use this folder to store all non-HTML files, such as images or sound files.

• Then set it as the default location to store the website images.

Adding a Folder and Pages

chapter 1 getting started with dreamweaver. exploring the dreamweaver workspace the dreamweaver...

Documents

dreamweaver workspacethe

dreamweaver windows

dreamweaver workspacelive

dreamweaver workspacea

dreamweaver workspace

dreamweaver program

panel groupexploring

panel groups