Posts
I’ve prepared this post to those people who want to do basic web designing using Adobe Dreamweaver. Before they click on Dreamweaver icon to do some basic web designing, they should go through following things and acquire better knowledge in
Internet
HTML
Web Browsers
Web Standards
What is Dreamweaver
Dreamweaver is web editor. It has features for both the beginning and advanced web page creator. Dreamweaver integrates many aspects of Web development, including page creation, site management, and web server tools, giving the user a good perspective of an entire web site. Dreamweaver also supports JavaScript and Cascading Style Sheets, along with other advanced functions.
Some of the elements that Dreamweaver offers:
Site Management – An integrated file transfer client and visual site map allow site navigation, file linking, and uploading/synchronization of your site.
Template – Templates allow users to quickly edit all common elements, such as navigation bars, throughout a whole site.
Cascading Style Sheets – CSS allow users to quickly change the appearance of text elements throughout the site.
JavaScript Behaviors – Dreamweaver behaviors are JavaScripts that you can apply without having to deal with the necessary code.Each of these elements are discussed below.
Step 1: organize your site’s file structure
An example
keep all files in one folder, inside that folder separate files according to its nature eg for images make images folder.
Step 2 : Defining a Site in Dreamweaver
Dreamweaver is a tool to create websites. So the first thing you have to do is define a site. This helps Dreamweaver to organize the files used in this site.
Step 1 : Create a folder on your hard disk and name it. You can copy in a few images or files if you want.
Step 2 : Click on Site>Manage Sites>New. The following window will appear where you can enter the site details under the category Local Info.
Site Name – Type in your site name here
Local Root Folder – This is where all the files for the site are stored, the one which you created earlier. Browse for this folder and click on select.
Refresh local file list automatically – It’s good to keep this option checked so that any new images or files added to your site will be refreshed automatically and you can access it.
HTTP Address – Enter your site url here so that Dreamweaver can check your links
Enable Cache – This will be default checked. Next click OK. Another screen will be displayed with your site name in the list. Click done.
Step 3 : Now Dreamweaver displays the folder contents in the Files panel on the right side. The files are well organized now and Dreamweaver knows where to search for files. Now you are ready to start developing web pages.
Dreamweaver Layout
Dreamweaver allows you to insert objects and change their attributes with the floating panels and menu commands. Dreamweaver for Windows also has the option to have fixed panels instead of floating panels. Once objects have been inserted on the page, they appear as they will when the web page is published online.
Once you start Dreamweaver, you may see a blank Web page with 3 floating panels:
Insert Panel: By default, this is the top menu bar on both PC and Macintosh. It has graphical buttons or icons for objects that can be inserted into a web page. These include images, tables and applets. You can select different types of objects from the tabs at the top of the panel. The Common list is the default.
Properties Panel: By default, this panel is below your web page. It looks like a Word processor formatting toolbar. When you choose an element on the Web page, you can adjust its properties here. You can toggle the advanced properties by clicking the small white arrow in the lower right corner of the panel.
Result/Answer Panel: By default, this panel appears at the bottom of listed panels on the right. If it does not automatically appear, click on the arrow next to Answers to maximize the panel. You can quickly access the Dreamweaver tutorials and other information here.
All of Dreamweaver’s panels can be moved, or opened and closed via the Window menu.
Examine the contents of Dreamweaver’s drop down menus. Experiment with moving the panel’s around by dragging them by their title bars. On a Windows PC, you can close a panel by clicking on the drop-down menu on the top right to “Close Panel Group”; on a Macintosh you can click on the red dot in the upper left corner. To reopen panels, choose Window on the menu bar of the blank Web page. The first 3 options are the basic floating panels that are available. Checked items are the ones currently open.
Step 4 :Creating first page
Before you decide create a page you should consider what kinda of page that will be, following are the type of the page available. Many things are different from one another
1. Table Based Layout Website
2. DIV/ CSS/ Tableless Layout Based Website
3. Website with Server Side Includes
To create new page from dream weaver
Go to file >>new
then
Choose HTML create and save your file according to the name. For home/main first page of the website, it is good idea to give it a name like index.htm or index.html
0 comments:
Post a Comment