Looking for:
Adobe dreamweaver cs4 tutorial pdf free download
First, you need to decide what you want to put on your website: images, buttons, videos, PDF documents, PowerPoint presentations, etc. For the technically inclined, the HTML and CSS code that it creates for your website will validate correctly. Overall Goals of this Tutorial. But you’ll frequently interact with four main groups of windows: the document window, the application bar, the Property inspector, and panel groups. Note. The.
ADOBE DREAMWEAVER CS4 TUTORIAL – [PDF Document]
There are also templates and CSS style sheets that you can use to quickly build a site or add functions like forms and e-commerce functions. The coding on the page uses a color scheme, which helps keep everything organized so you can quickly find any code mistakes. Responsive design: Design and code your websites with a Responsive design so it will properly display on smaller tablets and smartphone screens.
There is a preview option that will allow you to change the screen size, so you can see exactly how the published page will look on any device. Click-to-edit in live view: One of the newest features in Dreamweaver makes it easy to make edits and view in real-time how it would look once the page is published. Compatible with Adobe products: Adobe makes it easy to integrate other Creative Cloud apps with Dreamweaver.
You can seamlessly include images from Photoshop and Illustrator , and video files from Premiere Pro to your web design. Not only that, but Dreamweaver can extract the elements from a Photoshop design and recreate it for your web page.
You can download a free 7-day trial of Adobe Dreamweaver. Dreamweaver is compatible with most third-party site-building tools. This means that you can build, design, and edit pages for websites hosted on WordPress, Joomla, Drupal, and more. You can also create a Git repository for tracking any changes that you make to a custom CMS. WizCase is an independent review site. We are reader-supported so we may receive a commission when you buy through links on our site.
You do not pay extra for anything you buy on our site — our commission comes directly from the product owner. Support WizCase to help us guarantee honest and unbiased advice.
Share our site to support us! Please type an email. For example, if you have bought a domain called “example. If you’re creating a company website, enter your company name instead. Don’t worry too much about this field: it’s merely for your own personal reference in case you create many websites and need to distinguish between them. The words typed here won’t appear on your site. For the purpose of this tutorial, I will assume that you have typed “Example Company” into the box.
However, there’s no need for you to use this name just because you’re following this tutorial. Use your site’s real name. If you have bought the domain “example. Once you’ve finished entering the above two fields, click the “Next” button at the bottom of the window.
In the next screen that appears, accept the default “No, I do not want to use a server technology” and click the “Next” button again. The next window that appears lets you to control where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved.
You will be taught how to publish those files to your web host in a later step. You should always keep a copy of your website on your own computer. If you don’t know what to do here, just accept the default and click “Next”. When the window with the question “How do you connect to your remote server? You will change this later when you publish your site, but for now, selecting “None” allows you to quickly get started with your site with minimum fuss.
Click the “Next” button. Now that you have provided Dreamweaver with the basic information needed for it to manage your website, you will now create your first web page. For the purpose of this tutorial, we will create a two-column web page. By 2 columns, I mean that the page will have two vertical columns. This is a popular layout among many websites because it is both space-efficient and familiar to users and as a result of that, user-friendly.
One of the columns is usually used to hold the site’s logo and navigation menu while the other column the main content. For example, if you were to look at any of thesitewizard.
Click “File New If you remember what I said earlier, this means to click the “File” menu, followed by the “New A window with the title “New Document” will appear.
In the Layout column of the window, locate the line that says “2 column liquid, left sidebar, header and footer”. Select that item by clicking it once. Now glance at the rightmost side of the same window and look for the item “Layout CSS”. It should be somewhere near the bottom of the window. Click the drop-down box and select “Create New File”. This causes Dreamweaver to place information controlling the appearance of your web page called “CSS” in a separate file.
We want this because all the pages on your site will share the same basic layout, and having such information contained in a single file saves disk space, bandwidth and speeds up the loading of your web page if your visitors load multiple pages of your website. Accept the default name and location by clicking the “Save” button.
Once you’ve done that, Dreamweaver will proceed to create a 2 column web page with some dummy content typed in. Dreamweaver CS4 displays a slightly different screen layout depending on how large your monitor resolution is.
If your screen resolution is large, Dreamweaver may start up in what it calls the “Split” mode, that is, it may show the underlying “raw” code of your web page in the top half of the window the “Code” portion , and the visually pleasing version the “Design” portion in the bottom half.
If your screen is smaller, Dreamweaver will simply start up in “Design” mode, where only the visually pleasing version is displayed. To standardize the appearance of the Dreamweaver window, for the sake of this tutorial, please click “View Design” from the menu if you’re in the “Split” mode.
If you’re not sure which mode you’re in, just click “View Design” anyway; no harm will come from doing it. This switches the layout to “Design” mode, where only your web page, as it appears in a browser, is shown. Don’t worry. If at any time, you feel nostalgic for the original “Split” layout, just use “View Code and Design” from the menu to get it back. Note, however, that all the steps in this tutorial, as well as the screenshots, assume that you are in the “Design” mode, so if you don’t switch, you might get confused later when the screen doesn’t appear the way I describe it.
Before you proceed to replacing the “lorem ipsum dolor sit amet” text currently used as filler material, it’s important to understand the basic theory behind what you’ll be doing. This first page that you’ll be designing will be your website’s “Home” page. The home page is the main page of your site. It is the page your visitors see when they go to your site by simply typing your domain name in their browser. For example, if your domain name is “example. Since the home page functions almost like the front door of your website or as close to a front door as a website can have , it should contain some information about what your site is about, as well as links to important pages or sections of your website.
Some webmasters also use this space to welcome their visitors and give a short description about what they can hope to see on the site. For example, a company website that sells products or services should have a home page that gives visitors an idea of its products and services, as well as point visitors to individual product description pages where they can find more information about the product and place an order.
Even if your site is a personal website, you will still want your main page to give visitors an idea of what to expect on your site, and to link to other pages or at least the main sections on your site.
For this tutorial, I will supply example text for a fictitious company called “Example Company”, selling fictitious products. I strongly recommend that you use your own text instead of slavishly copying my supplied dummy text.
Similarly, if you’re making a personal website, and have named your website after you, such as “Shakespeare’s Website”, substitute that name in places where I use “Example Company”. The same goes for the actual content. Let’s take a look at the default two column web page generated by Dreamweaver.
There is a horizontal bar stretching across the top part of your page labelled “Header”. This is where you will place the visible name of your website. Under the header are two columns. The narrow left column, called the “sidebar” in Dreamweaver, is where you will eventually place your navigation menu.
The wide right column, currently entitled “Main Content” is where you will place the bulk of your web page’s content. Directly above “Header”, in the part of the window that belongs to Dreamweaver rather than your web page, you should be able to see a section that says “Title:” followed by a field that currently contains “Untitled Document”. This field is the text that the search engines will show as being the title of your web page when it displays the results of a search.
It is also the text shown by a web browser in the title bar of the browser window when it displays your page. Click somewhere in the word “Untitled”, and use the delete or backspace key to remove the existing text. In its place, type the name of your website. Note that this title field is an internal field. The web browser does not display it in the body visible portion of your web page. As mentioned above, the field is only shown in the title bar of the browser window itself.
If you’re not sure what I’m talking about, look at the browser window of this tutorial now. Don’t use the scroll bar nor scroll to the top in any way. Just glance upwards at the top edge of the browser window. I placed those words into the title field for this page when I created it. Although it doesn’t show in the body of a web page, it is still an integral part of the page, so you should not leave it set as “Untitled Document”.
Now we move on to the visible portion of your web page. Begin by replacing the word “Header” with the name of your website. As before, you can do this simply by clicking somewhere in the word “Header”. A blinking text cursor will appear. This text cursor behaves exactly the way the cursor behaves in a normal word processing program like Office or Word. You can move it with your arrow keys as well as use the DEL and backspace keys to delete characters. Use the delete or backspace key to remove the existing word and enter your site’s name instead.
For example, replace “Header” with “Example Company” if that’s the name of your site. Once you’ve figured out the above, it’s a trivial matter to replace the “Main Content” section of the web page with your real content. As before, click somewhere in the words “Main Content”, delete the existing text and replace with some appropriate content. Once you’re done with replacing the “Main Content” header, proceed to replace the “Lorem ipsum dolor” etc gibberish.
Just click somewhere in the top line, delete them, and type your own words. Typing and editing of text in Dreamweaver works more or less the same as it does under a wordprocessor. The “H2 level heading” subtitle is there merely to show you that you can have subtitles in your documents as well.
Replace it, along with the text below with whatever you want. If you are really at a loss as to what to type, you can use the following example text, either literally or as a model. However, it’s best to write something relevant to your website so that you don’t have to go back and re-edit it later.
Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples. Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs. Don’t change anything in the left column sidebar.
You will be adding a navigation menu to this section in later chapters, so just leave it unchanged for now. Scroll down to the bottom of the page and locate the horizontal bar labelled “Footer”. Replace the word “Footer” with anything you like. Many webmasters place a copyright notice in this section. Once you’re satisfied with your web page, save it by clicking “File Save As A dialog box will appear. Type “index.
Do not use any other name. Files with the name “index. Before we move on to polishing the page up so that it looks at least half-way decent, you will need to publish the page to your web host. That is to say, you will now learn how to transfer your web page and its associated files to your web host so that the page becomes “live” on the Internet.
Although you are probably embarrassed to do this at this point, because the page is incomplete, there is actually no cause for worry. If you have not advertised your website’s address “URL” to anyone, no one will ever know your site exists. As a result, this early version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. Neither will the search engines even know your site exists.
As you will discover over time, it’s not that easy to get visitors. The main reason that we’re publishing your page at this time is that you can get familiar with all the major stages in the design of a web page: that is, creating a web page involves not only crafting the page, but it also involves getting the page from your computer onto your web host’s computer.
Once you get this hurdle out of the way, you will have mastered what is one of the largest technical challenge a newcomer is likely to face. Don’t let this scare you, though; it’s actually quite easy! Note that you should not skip this step if you want to follow this Dreamweaver CS4 tutorial series. All my subsequent chapters will assume that you have already done this step. If you miss out this step, some of the things described in the next few chapters may not work the way they are supposed to.
Start up the Site Manager again. This can be done by clicking “Site Manage Sites A dialog box entitled “Manage Sites” should open, with your website’s name highlighted in the box in the main part of the window.
If it’s not highlighted, click the name to highlight it. Then click the “Edit The Site Manager wizard that you encountered earlier in this chapter will pop up. Click the “Next” button until you arrive at the screen with the message “How do you connect to your remote server? In the first part of this tutorial, you selected “None” for this answer. You will now have to change this to the actual values that you will need in order to publish your web page. In the drop down box for the question, select “FTP”.
When you do so, the blank section underneath will be populated with a number of additional questions. Essentially, you will need to enter the information that your web host provided you when you first signed up for a web hosting account.
Web hosts typically send you a lengthy list of details about your account when you first sign up.