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. Files Panel The files panel is another panel that is used frequently.
It lists all the web files such as web pages, graphic, flash and so on files. It is a quick way to open Web pages that you will need to work on. Work with files in the Files panel You can open or rename files; add, move, or delete files; or refresh the Files panel after you make changes.
For Dreamweaver sites, you can also determine which files on either the local or remote site have been updated since the last time they were transferred. Create a file or folder Dreamweaver will create the new file or folder inside the currently selected folder, or in the same folder as the currently selected file. Enter a name for the new file or folder. Press Enter. Delete a file or folder 1. Type the new name over the existing name.
Move a file or folder 1. Refresh the Files panel to see the file or folder in its new location. Insert panel overview The Insert panel contains buttons for creating and inserting objects such as tables, images, and links. The Insert panel is organized in the following categories: The Common category Lets you create and insert the most commonly used objects, such as images and tables.
The Layout category Lets you insert tables, table elements, div tags, frames, and Spry widgets. You can also choose two views for tables: Standard default and Expanded Tables. The Data category Lets you insert Spry data objects as well as other dynamic elements like recordsets, repeated regions, and record insertion and update forms.
The Spry category Contains buttons for building Spry pages, including Spry data objects and widgets. The Favorites category Lets you group and organize the Insert panel buttons you use the most in one common place. Unlike other panels in Dreamweaver, you can drag the Insert panel out of its default dock position and drop it into a horizontal position at the top of the Document window. When you do so, it changes from a panel to a toolbar though you cannot hide and display it in the same way as other toolbars.
The options in the Properties panel change according to the current selection. For example, when text is selected, the text Properties panel appears with tools available for applying formats and adjusting text alignment.
Using Status Bar To work efficiently in Dreamweaver you need information about the active document. To create your own workspace, manipulate the panels and toolbars to your liking. Panel Customization You can float the various panels by dragging them onto the page. In the Panels Group you can collapse all the panels to icons by clicking the two arrows to the right at the top of the panel group.
By saving your workspace you will be able to easily access it at the top of the workspace list for quick reference at a later time.
Changing Workspaces If at any time you would like to change workspaces, you can easily do so by clicking the drop down next to the search in the upper right hand corner and choosing your desired workspace environment.
To better utilize the Dreamweaver workspaces, examine how you use Dreamweaver and what panels you continually open and close. This will help you develop a Dreamweaver workspace that suits your needs so that you can perform tasks more effectively.
Page titles are one of the key elements used by search engines to index websites. In the Title field of the Document toolbar, select the placeholder text, Untitled Document. Type the desired title and press Enter. To change these settings, you will want to highlight the text you want to edit and then go to the Property Inspector window. On the new page, click to set a blinking insertion point. You can press Enter 2. Type your text. Inserting Images To insert an image on a page: 1.
Click in the desired location to place the picture. In the Assets Panel, locate and click the picture and then click insert at the bottom of the Assets panel. Navigate to the desired folder, select the file, and click OK. You can then specify the image properties by utilizing the Property Inspector.
Click to place the insertion point for the new table. Click the Insert menu, and then click Table. Select a position for a header area in the table: None, Left, Top, Both. Click Ok. On Web pages, lists are indispensable for presenting groups of items such as links, company services, or a series of instructions.
HTML offers formatting options for three basic categories of lists. Click within the document where you want to insert the Ordered list, or select a group of text that you want to convert into a list.
Click the Window menu, and then click Properties to display the Properties panel. Click the Ordered List button in the Properties panel. To add items to the list, type an item, and then press Enter. Note: You can create a nested or indented list. A nested list is a list that contains another list. Select the items you want to nest, click the Indent button in the Properties panel, or click the Format menu, and then click Indent. Create Unordered List 1.
Click within the document where you want to insert the Unordered list, or select a group of text that you want to convert into a list. Click the Unordered List button in the Properties panel.
Dreamweaver inserts a default round bullet into the document. Working with Links You can have hyperlinks, email links and anchor links on your page. A hyperlink is a reference an address to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc.
An email link is a link that will open up the individuals default email client and fill in the email address field. Click the "OK" button to dismiss this box as well. Finally, publish your web page using "Site Synchronize Sitewide".
Or at least, it doesn't in the version I'm using. When you click the "Preview" button while synchronizing, you should be able to see your PDF file in the list of files that Dreamweaver thinks it needs to upload.
If you don't know what I'm talking about here, it means you really need to read the main Dreamweaver tutorial series. You should now test the modified web page in your browser. Load the web page that you modified earlier in your web browser. Click the link to the PDF file. If you have installed a PDF plugin in your browser often the default if you have installed a PDF reader , the browser will open the file within its window.
If not, or if you've disabled the plugin or set your browser to prompt , your web browser will offer to save the PDF file. If any of these cases occurs, it means your web page and PDF file were correctly published. You have now successfully published and linked to a PDF file using Dreamweaver.
All rights reserved. Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard. This article is copyrighted.
Please do not reproduce or distribute this article in whole or part, in any form. To link to this page from your website, simply cut and paste the following code to your web page.
This page was last updated on 27 February Search This Site. Link to Us. Site Map. Getting Started. Web Design. Search Engines.
0コメント