Dreamweaver Exercise

In Exercise 5, I was responsible for further developing a website through Dreamweaver.  The layout was already determined for this site from the start.  I had to work through it to create new CSS rules while using the CSS Styles panel.  I was responsible for creating new rules for visual aspects that were in the menu bar, the header and footer, along with creating the hyperlinks. 

This assignment required me to attach an existing external style sheet to my page.  To do this I had to go to the CSS Styles panel where I selected all of the preexisting rules, then moved the rules to a new style sheet.  From there I found my root folder and saved the new style sheet.

In addition to the previous mentioned tasks, I was also instructed to apply existing CSS class to page elements.  From our textbook, “Adobe Dreamweaver CS6,” I learned to do this by clicking on the element needed and then modifying the style in the Class Menu from the Property inspector.

When making a website it is also important to keep different media types in mind. Style sheets need to be created for all types of media in order to make the site visible to users from any device.  The size of smart phones, tablets, desktops, etc all differ greatly.  Also, it is important to create pages that will print while using little ink.

Advertisements

Adding and Structuring Text

It is possible to pull text over to Dreamweaver from Word. There are a few ways to do this.  One way is to go to edit, then preferences, then to copy/past and then choose the preferred options, and it will allow you to place the text in the desired region of your project. You can also do this by importing a Word document, which is integrated with Adobe Suite to your project (This does not work with Mac, only PC).  You would simply go to file, import, and Word document, or you could drag and drop the file to the workplace.

To add structure to your text it is easiest to work in split view so you can see the coding and the preview at the same time.  By clicking inside the desired text you wish to change, it will allow your focus the shift to that area.  Use the properties inspector to edit the format, color, text, size, etc.

Using lists on a website will “allow us to group related content together and structure that content in a way that denotes importance, rank or similarity (Williamson, Ch. 4).”  Dreamweaver allows lists consisting of ordered, unordered and definition.  The HTML properties allow you to create an ordered or unordered list.  The list properties box will allow you to change attributes within the list.

A definition list is not as common as the other lists, but they are an important type as well.  The definition lists consist of DL tag, DT tag, and DD tag.  The order for this list matters.  To get to the definition list, you go to: format, list and then definition list.

Dreamweaver also has a feature called the quick tag editor.  The quick tag editor will give you code hinting which will help you get the edits quickly even in the design view. Quick tag editor can insert HTML, modify HTML and add attributes.

Creating New Documents

Creating a webpage is the next step after creating the site.  To create a new document you have to choose a page type, layout and document type.  To set up the document preferences, you would open preferences, new document and then choose the correct drop boxes for the following:  default document, default extension, default document type, default encoding, and unicode normalization form.  The default document type tells which version you are using.  The default encoding is usually set in UTF8, which is the Standard English speaking setup.

Accessibility by all users whether they are using browsers, screen readers, and/or mobile devices are very important to the site.  In some instances it is the law to provide full accessibility, Section 508 American with Disabilities Act that states that “any website paid for with federal funds need to meet a certain standard accessibility guideline.”  In preferences under accessibility, Dreamweaver prompts users for accessibility information.  It is important to make sure your site meets accessible codes.

Dreamweaver offers many starter pages for beginners or for people who wish to use an already made layout.  To get to this function, go to new, black page, HTML, then choose the desired layout.  These layouts render with most browsers.   Using templates will give beginners a good starting point to work with and to seek more information. The starter pages can be edited within the layout but are limited.

Site Control

Understanding the basic site structure in Dreamweaver is essential to creating a website.  Dreamweaver is different to many other related programs because it focuses on the management of the website.  The basic site structure is the collection of the files and folders.  The root folder is the main folder or point for Dreamweaver.  All connecting pages from the main page will connect under the root folder.

When naming your files it is important to follow the rules from James Williamson.  These rules are as followed:

  • Do not use spaces
  • Shorten the file name
  • Avoid special character and punctuation
  • Avoid uppercase letters
  • Be consistent with file extensions

When starting a new project, you must first define a new site.  There are multiple ways to do this.  You can create this in the welcome screen by clicking new site, then naming and rooting it from the location on your computer.

After you have a new site created, it is important to manage and organize your files and folders accurately.  Managing your files and folders will be done through the files panel.  When making edits to the files and folders, it is best to do so in that panel to avoid redirecting issues in Dreamweaver.

After the folders and files are created for the site, you can upload and download the site to a local or remote server.  To upload to a remote server, you must go to site setup, then to server where you can define as many servers as you want.  Then click the plus sign, name the server and fill in the appropriate information for the following prompted boxes.  Website files can be uploaded to both the server and local server.  The files can easily be transferred from one another.

The author makes note that it is very important to test the website in as many browsers as possible.  To preview the website in other browsers, go to preferences and then click a browser to test or add a browser if the one you want is not listed.  You can also set a primary and secondary browser to your preference.  Previewing in multiple browsers will allow you to notice if you have issues in only the browser or within your own coding.  Using BrowserLab will also allow you to see a screen shot in other browsers.

In the managing sites panel, things such as delete, duplicate, rename, edit, and import the business catalyst site.

The Dreamweaver Interface

dwCs5LogoDreamweaver is a program that will allow users to develop websites. The first video titled Dreamweaver “CS6 Essential Training” by James Williamson goes over the basics on how to use and familiarize oneself with Dreamweaver.

When Dreamweaver first opens, the welcome screen will pop up, which is Dreamweaver’s home page.  It allows you to open a new or recent project.  It will allow you to open different types of layouts as well as give you options to explore more information about Dreamweaver.  This program can be used with both Mac and PC, but there are slight differences.

Within Dreamweaver there are multiple panels.  Panels are able to be opened or closed depending on the users preferences.  To open a panel, one must go to the window drop down box and then simply select the panel they wish to use.  Once the panel is open, you can double click the top of the box to either expand/un-expand it, you can drag it to relocate the panel, or you can close the group/box.

Dreamweaver has many different presets, which makes it easy to switch between workspaces.  Workspaces can be personalized with different panels and toolbars, all of which can be organized in any way.

One important toolbar is called the Application Toolbar.  This allows quick access to different features.  Some features include layout (code, split, design), workspaces, search field (help menu), site, and extension manager (widgets, plug-ins).

The Document Toolbar allows you to choose different views and to preview the page. With this toolbar you can open different view and sizes of the webpage.

The Property Inspector allows you to edit the content.  If you go into the Properties Toolbar you can make edits to the HTML and CSS.  In HTML you can control the HTML elements, and in the CSS you can create and edit existing styles.

The Insert Panel allows for quick ways to edit/add content without going into the coding view.  This panel is also referred to the object panel.  Tabs within this panel change depending on the type of project you are working on.

This group of short videos explores the basic of Dreamweaver.