Adobe Dreamweaver Notes
Table of Contents
Adobe Dreamweaver
Adobe Dreamweaver Notes:- Terms and Definitions
Web page – a web page is a document file just like a text file. It can be edited with Notepad, WordPad, or any text editor. The main difference between a web page and a regular text file is that a web page is formatted with HTML tags. This HTML formatting is what you see when you switch your web page from the Design view to the Code view.
Website – a website is a collection of web pages that are usually linked together with hyperlinks.
Hyperlink or Link – a section of text or image that appears coloured and/or underlined on a web page that, when clicked, will take you to another web page.
HTML – a hypertext markup language consisting of tags. HTML tells the web browser how to display the
content of your web page.
Web server – a computer or host for your website that makes your site publicly available on the web.
Web Browser – an application or program that is installed on your computer that allows you to view web pages on the Internet (i.e. Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari).
Adobe Dreamweaver Notes
Index Page – The index page is the main page of your website, also called homepage. This is the first page that people will see when they visit your site. When you create the index page you must save it as index.html.
Note: index.html must be spelled with all lower case letters.
Put, Publish, or FTP– To send or upload your web page(s) to your account on the web server.
Web Address – a URL (Uniform Resource Locator) is the text you type into the address bar of your web browser to access a web page.
Template – Dreamweaver allows you to save a webpage as a template. You can add editable regions to the template. Then you create web pages from the template. When you edit the template and save the changes, Dreamweaver updates all of the pages that are created from the template. Anything that you add to the template appears on every web page that is created from that template.
Adobe Dreamweaver Notes
File Name Conventions
When naming your files, always use lowercase letters and avoid using spaces. For example, if building a page for course overviews, it would be best to name “course_overview.html” the file instead of “Course Overview.html”.
The rules for file naming are:
- Avoid uppercase letters
- No spaces
- Separate words with hyphens or underscores
- Main page is index.html
- Use shorter names
- No special characters such as question marks, exclamation points, dollar signs, symbols, etc.
- No punctuation
- Do not use numbers as the initial character
The Dreamweaver Environment
Dreamweaver is an application that helps you to create, edit, and manage web pages and websites.
Dreamweaver provides you with a WYSIWYG (what you see is what you get) editing environment. In other words, while editing your page, it looks like it will when viewed by a web browser. It also lets you easily switch over to see and edit the HTML code of your web page if you so desire. Dreamweaver also provides a publishing tool that helps you easily manage your files both locally and on your web server.
Switching to Standard View
By default, Dreamweaver will begin in Developer view. For easier layout, we can switch it to standard view.
Document Toolbar
The Document toolbar is displayed once you begin work on a new document/template and allows you to access the different views while working on your web page. There are four working views: Code, Split, Design, and Live.
- The Code view shows any source code for the page.
- The Split view displays both the code and the design views on the screen.
- The Design view shows the WYSIWYG page.
- The Live view displays a rendered view of how the page would like in a browser.
Panels
Panels are sections of Dreamweaver that help you monitor and modify your work. The four panels that we will use the most are the Properties panel, the Files panel, the Insert panel, and the CSS Designer panel.
- The Properties panel shows all the properties that can be set for the selected item(s).
- The Files panel allows you to easily open our local files for editing and put or get your files to and from the server.
- The Insert panel lets you insert objects, such as images, tables, and media files.
- The CSS Designer panel is a CSS Property Inspector that lets you visually create CSS styles, files, and set properties, along with media queries.
Note: If the properties panel is not displayed, you can enable it by selecting Properties from the Window tab on the Menu Bar.
Adobe Dreamweaver Notes
Defining A Site
You must define a site for each new website you create. A site in Dreamweaver is a collection of files and folders (web pages, images, etc.) on your personal computer, and a link to your web space on the Internet.
Designing Your Site
It is always a good idea to take a little time to think about your website design before creating the first page. Design work will save time, especially if you anticipate a large site with many pages.
CSS Styles
A CSS (Cascading Style Sheet) is used to customize how your webpage is displayed (e.g. font type, colour, size, etc.). Your webpage will reference this information when it displays the content to visitors of your site.
Editable Region
An editable region will be an area of your site template that will allow for information to be entered. This will typically be where the content of each one of your pages will go.
Images to A Web Page
Many different types of graphic file formats exist, but three graphic file formats are generally used in web pages—GIF, JPEG, and PNG. GIF and JPEG file formats are the best supported and can be viewed in most browsers.
It is recommended to save any images for your website to a subfolder within your local site folder
called Images. When the web server looks for the images to display on your site, it will easily be able to find them in your images subfolder.
Adobe Dreamweaver Notes
Alternative Text to Images
Alternative Text should be added to your images for the benefit of screen readers, search engines, and for anyone with images turned off on their browser.
Hyperlinks to A Web Page
A hyperlink is text that will request that another web page be loaded and displayed in the browser window. A hyperlink starts as simple text and is then converted to a link using the properties panel.
There are two basic types of hyperlinks:
- Internal – An internal hyperlink is a link that points to a web page from the same website (e.g. within your own website).
- External – An external hyperlink is a link that points to a web page from another website (e.g. a website outside your own website).
Anchor Links to A Web Page
Named anchors are a link to a specific section of a page. Anchor links are frequently used for table of contents and for frequently asked questions. In our example, we will add a Return to Top of Page link to make it convenient to go back all the way up with a single-click.