Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver...

Chapter 1

Getting Started With

Dreamweaver

Explore 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 CC Workspace


Menu bar

Property inspector

Status bar

Document window

Document toolbar

Related Files toolbar

Workspace switcher

Insert panel

Drag the panel border up or down to resize Insert 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 eight categories of buttons:– Common– Structure– Media– Form

─ jQuery Mobile─ jQuery UI─ Templates─ Favorites


• The Document toolbar contains buttons and drop-down menus you can use to:– Change the current work mode– Preview web pages– Add a title– Use 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 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 window, lets you view and change the properties (characteristics) of a selected object.


• The Status bar is located above the Property Inspector.

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

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

Explore the Dreamweaver WorkspaceActive panel tab

Double-click to collapse or expand panel group

Collapse to Icons button

Panels in a panel group


Docking a panel group

Blue drop zone appears as a horizontal line

Panel group being docked


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

• 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

Document toolbar

Coding toolbar

Your panel arrangement may differ


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

View a Web Page and Use Help

• 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, sounds, and movies.


Social networking links

Search text box

Banner

Links to main pages in the website

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

• The Help feature in Dreamweaver CC is based on Adobe Air technology.

Plan and Set Up a Website

• 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


• 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 (continued):– 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, and it will be used to store all the pages or HTML files for the site.

• A subfolder 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.

• The Files panel is the panel you use to manage 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 Apple 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.

Add a Folder and Pages

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

• You can create a folder called assets to store all non-HTML files, such as images or sound files.

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

Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver...

Documents

Transcript of Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver...