Transcript tag bar
Chapter 1 Getting Started With Dreamweaver 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 Exploring the Dreamweaver Workspace Menu bar Insert panel Document window Files panel Dreamweaver CS6 Workspace Exploring 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. Exploring the Dreamweaver Workspace • The Insert panel, sometimes called the Insert bar, includes nine categories of buttons: – Common – Layout – Forms – Data – Spry Exploring the Dreamweaver Workspace • The Insert panel, sometimes called the Insert bar, includes nine categories of buttons: – jQuery Mobile – InContext Editing – Text – Favorites Exploring the Dreamweaver Workspace • 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 Exploring 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. Exploring the Dreamweaver Workspace • 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. Exploring the Dreamweaver Workspace • 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. Exploring the Dreamweaver Workspace • 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. Exploring the Dreamweaver Workspace • The Status bar is located below the Document window. • The tag selector shows the HTML tags used at the insertion point location. Exploring 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. Exploring the Dreamweaver Workspace Panels in panel group Displaying a panel group Exploring the Dreamweaver Workspace • A View is a particular way of displaying page content. • A dock is a collection of panels or panel groups. Exploring the Dreamweaver Workspace Docking a panel group Exploring the Dreamweaver Workspace • 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. Exploring the Dreamweaver Workspace Coding toolbar Code view for new document Exploring 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. Exploring the Dreamweaver Workspace • 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. Viewing a Web Page and Using Help • 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 Viewing a Web Page and Using 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. Viewing a Web Page and Using 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. Viewing a Web Page and Using 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. Viewing a Web Page and Using 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 the attractive and engaging images, interactive elements, video, or animations. Viewing a Web Page and Using Help • Adobe AIR is an Adobe product used for developing content that can be delivered with a browser or a desktop application. Planning and Setting 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 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? Planning and Setting Up a Website • 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? Planning and Setting 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. Planning and Setting 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, 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. Planning and Setting 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. • Files panel is the panel you use to mage your website’s files and folders. Planning and Setting 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 Safari. Planning and Setting 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. Planning and Setting 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. Adding 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. • 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.