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 Explore the Dreamweaver 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

Explore the Dreamweaver Workspace 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.

Explore the Dreamweaver Workspace The Insert panel, sometimes called the Insert bar, includes eight categories of buttons: –Common –Structure –Media –Form ─ jQuery Mobile ─ jQuery UI ─ Templates ─ Favorites

Explore the Dreamweaver Workspace 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

Explore the Dreamweaver Workspace 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.

Explore the Dreamweaver Workspace 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.

Explore the Dreamweaver Workspace 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.

Explore the Dreamweaver Workspace The Status bar is located above the Property Inspector. The tag selector shows the HTML tags used at the insertion point location.

Explore the Dreamweaver Workspace 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 Workspace Active panel tab Double-click to collapse or expand panel group Collapse to Icons button Panels in a panel group

Explore the Dreamweaver Workspace Docking a panel group Blue drop zone appears as a horizontal line Panel group being docked

Explore the Dreamweaver Workspace 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.

Explore the Dreamweaver Workspace Code view for new document Document toolbar Coding toolbar Your panel arrangement may differ

Explore the Dreamweaver Workspace 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.

View a Web Page and Use Help Web pages can be very simple and designed primarily with text, or they can be media-rich with images, sounds, and movies.

View a Web Page and Use Help Social networking links Search text box Banner Links to main pages in the website Common web page elements

View a Web Page and Use Help 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.

View a Web Page and Use Help 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.

View a Web Page and Use Help 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.

View a Web Page and Use Help 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.

View a Web Page and Use Help 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

Plan and Set 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?

Plan and Set Up a Website 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?

Plan and Set Up a Website 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.

Plan and Set Up a Website 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.

Plan and Set Up a Website 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.

Plan and Set Up a Website 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.

Plan and Set Up a Website 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.

Plan and Set Up a Website 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.