Dreamweaver is a great program for building and designing websites in an intuitive way. But you may feel frustrated when you first open Dreamweaver. This program has so many features that you don’t know what they are for?
This 8-part tutorial series is a translation from the Adobe team guide. They are designed to help you build a simple but elegant website in Dreamweaver CC 2015, including a guide to the site definition process (Website definition is a page or collection of pages on the World Wide Web, contains specific information provided by a person or an entity and retrieves the URL), constructs the structure in HTML (Hypertext Markup Language), adds text and images, styles the page with CSS ( Cascading Style Sheets).
Note: You do not need to have any previous experience with Dreamweaver. However, a general knowledge of Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS), will help with many topics in this series. HTML and CSS are both open web standards and there are many resources available to learn about them.
How to create a website with Dreamweaver CC (part 1)
- What will you build
- Set up workspace for Dreamweaver
- Set up a website in Dreamweaver
- Define Local Site Folder for the Bayside Beat website
- Name files and folders in a web page
- Save assets into Creative Cloud Library
- Create working sites
What will you build
Get started by downloading the sample files and see the completed project.
1. Download the sample file here.
2. These files are compressed as a single ZIP file. Extract files to a convenient location, such as the desktop.
On Mac OS X, click the downloaded ZIP file in Finder to automatically extract the files.
On Windows, right-click on the downloaded ZIP file and select Extract All from the context menu. Browse to the desired location to save the file, and then press Extract.
3. Inside the extracted files is a folder named bayside, contains 9 subfolders.
4. Open the folder part7 and drag index.html Go to the browser to view. The homepage of the completed project looks like this:
5. Resize the browser by dragging one of the side edges inwards. When the viewport is less than 700px, the layout will change from two columns to one column. Navigation bar is replaced with MENU on black background. The white text in the box on the image of the Golden Gate Bridge, has turned a dark pink and is now placed below the image, as follows:
6. Click MENU. Navigation menu will slide down smoothly on semi-transparent black background.
7. Click MENU once again. Navigation menu slides up and disappears from view.
8. Open the navigation menu again and click on SIGHTS to see the second page.
That’s what you will build with Dreamweaver CC 2015 throughout this series. In the process, you will learn how to do the following:
- Define a website in Dreamweaver.
- Building the structure of a website with HTML5 elements.
- Use the DOM panel to search for elements already on the page and add new elements.
- Add text and images to the page.
- Download and resample images from Creative Cloud Library.
- Style the page with Dreamweaver’s CSS Designer
- Create a second website in a similar fashion.
- Control different layouts with the Visual Media Queries bar.
- Upload the completed page to an online web server.
At the same time, you will also know the most important parts of the Dreamweaver user interface.
This is an in-depth guide, so you should spend a lot of time brooding. Each section is divided into several sections to explain what to do and why. Relax after each section to make sure you have enough time to understand and remember the various techniques introduced therein.
Note: This tutorial series was written for Dreamweaver CC 2015.2 and uses many features not available in older versions of the program. Although older versions of Dreamweaver are likely to build a similar site, you should use Dreamweaver CC 2015.2 for this tutorial. If you have not signed up for Creative Cloud, you can use the free trial.
Set up workspace for Dreamweaver
Before starting work, move on to the workspace Thiết kế. This will give you access to all the main control panels needed for this tutorial. On Windows, the fastest way to do this is to use Workspace Switcher (Workspace converter) at the top right of the screen.
On Mac OS X, by default, the Workspace Switcher is in the same location, but if you’re off Application Frame, it will be on the left. If you turned it off Application Bar, Workspace Switcher will be hidden. Another way to choose a workspace is to enter Window> Workspace Layout> Design.
Set up a website in Dreamweaver
A common mistake for beginners is to start working right on the web pages in Dreamweaver without defining the site. This results in links to images and style sheets pointing to a location on the local computer. Everything works fine until you upload the website to the remote server. Then you discover all your links are broken and need to be fixed. Avoid this unfortunate mistake by always defining the site. This is a quick and easy task.
In Dreamweaver, a website that organizes all documents on the local computer that are linked to the site and allows you to track, as well as maintain links, manage files, and transfer the site’s files to the server. web. A typical Dreamweaver website has at least two parts:
- Local Folder: This is a working directory, usually a directory on the hard drive. Dreamweaver calls this directory the original website.
- Remote Folder: This is where you store the files on a computer that is running the web server. A web server is usually (but not always) a computer that makes your site publicly available on the web.
Tips: If you plan on working on some websites, you should create a folder on your local hard drive to store them. On Mac OS X, the folder Home Included a directory named Sites. On Windows, set up the folder named Sites at the top level of the drive C. Although the screenshots for this series were made on Windows, the method is the same for Mac OS X (besides the keyboard shortcuts and some buttons that will be mentioned later).
Define Local Site Folder for the Bayside Beat website
All you need to start working is to name the site and let Dreamweaver know where you want to store the files on the local computer. You do not need to identify Remote Folder until you are ready to upload your website to an online web server on the Internet.
1. Open Dreamweaver and select Site> New Site. Dialog box Site Setup will appear.
2. In the school Site Name, import Bayside Responsive as the name of the site. The name is used internally by Dreamweaver to identify the site. This name may or may not have spaces.
3. Click the folder icon next to the field Local Site Folder to browse and select a directory Bayside from the sample files you downloaded earlier. Dialog box Site Setup This should now look like the image below, despite the file path for Local Site Folder will depend on where you copied the folder bayside on the hard drive.
4. Expand Advanced Settings in the left column of the dialog box Site Setup and choose Local Info.
5. Click the folder icon to the right of the field Default Images to open the dialog box Choose Image Folder.
6. Click New Folder (in Windows, New Folder located at the top of the dialog box; on a Mac, it’s at the bottom). Name the new folder image, select and press Select Folder (Windows) or Choose (Mac). Dialog box Site Setup would look like this:
7. Leave the other options at their default values. No need to insert values for Web URL because we are using related links Document.
8. Click Save.
Dashboard Files in Dreamweaver now shows the new local root for the current page. List of files in control panel Files acts as a file manager, allowing you to copy, delete, move and open files just like on the desktop.
You have now defined the Local Site Folder for the Bayside Beat website. This is a place to keep local copies of websites on your computer. You have also specified the default directory to store images. This tells Dreamweaver to automatically copy the images to that directory when you import the images from outside the site’s root directory.
Name files and folders in a web page
- File and folder names in web pages will never contain spaces or any of the following characters: / ?% *: | ”<>.
- Although other special characters are allowed, it is generally advisable to restrict the use of Roman numerals, dashes and underscores.
- Most file and directory names end up as part of a website’s URL, so keep them short but make sense. Long URLs are hard for users to remember and type into the browser on mobile devices.
- Most web sites are hosted on Linux servers, case-sensitive. Use all lowercase letters for file and folder names to avoid the problem of not finding a file.
Save assets into Creative Cloud Library
Images and color palettes for this project are stored online in the Creative Cloud Library. The Creative Cloud Library makes images available everywhere and is especially useful when collaborating with others. For example, one person may be responsible for creating visual assets, while you are responsible for building the actual site. Check out the online documentation to learn more about using the Creative Cloud Library in Dreamweaver.
You need to save assets in a shared library into a separate library.
1. Use assets in Bayside Beat Libary.
2. Click Save to Creative Cloud at the top right of the browser screen and save the shared asset to the Bayside library, if you haven’t already done so.
3. Select the Bayside library in the Dreamweaver CC Libraries panel. You will see 4 images and 6 color patterns as follows:
Create working sites
Let’s start by creating two HTML pages for the site.
1. If the Dreamweaver welcome screen is displayed, click the HTML in the section Create New, or choose File> New from the main menu. Dialog box New Document will open.
7. Window Document (or Live View) is completely empty, but the basic HTML structure is revealed in Code View.
Line 1 declares the document type (doctype), telling the browser this is an HTML file.
HTML is a tag-based language. Tags are surrounded by curly braces. Most tags come in pairs, closing tags are indicated by forward slashes, after the opening parentheses.
The entire page is nested within a pair of tags (on lines 2 and 10). PartLines 2 – 6 contain information for the browser. All content of the page is located between the tags open and close.
In most cases, Dreamweaver generates all the code needed for you as you work with the intuitive interface and dialog. But you need to be careful if you copy and paste code from elsewhere. An HTML page has only a head and a body. If the content doesn’t display in Live View or the browser, the most likely reason is that you’ve pasted it outside the body.
8. Save the file by selecting File> Save or use keyboard shortcuts
S (Windows) or
9. In the dialog box Save As, make sure you are in the Bayside’s Local Site Folder, giving the file a name index.html and click Save.
The file is currently listed in the control panel Files and the tab in the upper left of the window Document show the file name.
Tips: You can always access Local Site Folder of the current site by clicking the Site Root button at the bottom of the dialog Save As.
10. Create a new HTML file. The welcome screen is no longer displayed, so you need to use the menu option File> New to open the dialog box New Document or press
N (Windows) or
11. Select the same options as in previous step 2, but this time leave the field blank Title, then press Create.
12. Save the file in the root directory of the webpage sights.html.
13. In Split View, value between tags
This is what will be displayed in the browser tab or title bar and is also selected by the search engines. Leaving this value unchanged is a common mistake for beginners.
There are two ways to change this value:
Go into the code and change manually, make sure you leave the HTML tags open and closed.
Use the tool Property Inspector by Dreamweaver.
14. Property Inspector is the large horizontal control panel at the bottom of the window Document in the Design workspace. If necessary, click the tab Properties to make the Property Inspector appear (initially, it is hidden behind the control panel Output).
15. Replace Untitled Document in schools Document Title equal Bayside Beat: Sightseeing. Note that nothing changes in the basic HTML as you type. To confirm the change, press the key
Return. Value in the field Document Title replace Untitled Document in the HTML code on line 5.
16. Save sights.html.
Although Dreamweaver creates HTML markup for you, it’s best to keep it Split View Open when working with web pages. Split View allows you to verify that the changes you have made are correct. That does not mean that Dreamweaver is not reliable. Except in extraordinary circumstances, Dreamweaver will do exactly what you asked for. But it is important to know where you are in the document. If the insertion point is in the wrong position, new code will be added. If you are not careful, you may encounter a mess that is hard to find. The DOM dashboard, which will be used in the next part of this tutorial series, also plays a very important role in tracking page structure.
Tips: If you want to see the code below along with the visual representation of the page, select View> Split Vertically. To revert to split window Document horizontally, select the same option again. Menu View Also lets you choose Live View on which side. Drag the divider bar Code and Live View to adjust their relative sizes. Dreamweaver remembers automatic settings.
You have now completed defining your site and created two blank sites. You can start adding content to them by following Part 2: Adding and formatting text content.
Hope you are succesful.