Building A Website Using Dreamweaver Without Programming

1m ago
2 Views
0 Downloads
1.43 MB
11 Pages
Last View : 1d ago
Last Download : n/a
Upload by : Casen Newsome
Transcription

ApplicationNoteBuilding a Website Using Dreamweaverwithout ProgrammingNan XiaMSU ECE 480 Team 511/16/2012

Table of ContentsAbstract. 3Introduction and Background. 3Keywords. 3Procedure. 41 Install Adobe Dreamweaver. 42 How Dreamweaver works. 43 Use Free Website Template. 64 Build Own website. 8Conclusion. 112

ABSTRACTThis application note is intended to guide a novice web designer on how to useAdobe Dreamweaver to build a website without programming. For novices, it isimpossible for them to learn all the languages of the web programming codesand well use them. Dreamweaver is multiscreen which can visualize thewebsite design while editing it. It is best for new web designers to learn theweb design while they are building it. It is a very friendly used program fromAdobe.INTRODUCTION AND BACKGROUNDAdobe Dreamweaver CS6 web design software provides an intuitive visualinterface for making and editing HTML websites and mobile apps. Use newFluid Grid Layout designed for cross-platform compatibility to create adaptivelayouts. Review designs with the enhanced Multiscreen preview beforepublishing.Dreamweaver is a web design software for both professional web designerand novice. For professional web designers, they can program every line ofthe web codes like most of the web design software. However, novices canalso design a beautiful website like they are editing a word document. It is veryfriendly web design software for new web designers.For this application note, there are two ways for novice to build a nice website:1. Download the website template from the free web template website.2. Build the website using "design view" on the Dreamweaver.KeywordsCode view:Code window for professional web designer to grogram thewebsite.Design view: Website window for visualize the actual website and able toedit text and images.Web template: Finished website format without input text and images bythird party.3

Properties:Change the font, paragraph, styles, and link the web page.PROCEDURE1 Install Adobe DreamweaverThis section's main focus is to download and install the software whileactivating a account. Old days, the Adobe Dreamweaver is abouthundreds of dollars. It is expensive for college students to purchase it onlyfor one semester use. Now, on the Adobe website, there are three optionsto activate the software: One-year plan, Monthly plan, and free 30-day trail.It depends on how long the software we are planning to use. Basically wewill choose 30-day trail.1.1 Download the Dreamweaver software from the Adobe html which is freedownload.1.2 Install the software. When at the activate step, there are threeoptions to activate. Choose "Free 30-day Trail". Then sign up anaccount.1.3 Also, we can sign up an free trail account from the website.2 How Dreamweaver WorksThis section will briefly describe the basic functions of the Dreamweaver,including some useful tools for building a website.2.1 Here is the main window for the Dreamweaver (Figure 1). As it shows,there are two separate windows. The First one on the left is "CodeView" which is for professional web designer to program the code ofwebsite. On the right side, there is "Design View". It is "What you seeis what you get". The advantage of the "Design View" is we can editthe actual web page by click each part for making changes directly onthe page. It is unnecessary to write the code for building a website.4

For example, if we click the "HOME" navigation bar on the web page(shown below on the "Design View"), the code of the bar ishighlighted (shown below on the "Code view"). It is really friendly toedit web page without go through the whole code.Figure 12.2 Below the two main windows, there is the "Properties" section (Figure2). It is a very useful tool. It is used for editing the appearance of thewebsite.For "HTML" part, it is used for changing the format of the web page,linking to other websites or documents. It is easy to link the text orimages by click the image or highlight the text. Type the websiteaddress or select the right image and document from the right filefolder.For "CSS" part, it is used for editing the content part such as font,size, color, and paragraph. Even we don't know the language forthem, we can still edit the content. It is same as the Microsoft OfficeWord, very easy to use them.5

Figure 2To change the size of the images, drag the edge of the image willchange it. Also, we can click on the image, the "Properties" section willautomatically change (Figure 3). By typing the width and height willalso make the change of the images.Figure 3Over all, for new web designer, the Dreamweaver is more like the worddocument design. Design the website line by line, typing the maincontent, inserting the images and tables.3 Use Free website TemplateThis section is briefly talked about how to use the existing websitetemplate to build our own website. It is the fastest and easiest way to makea nice website.3.1 First, download the free website template from any third partywebsite such as http://www.freewebsitetemplates.com/. UseDreamweaver to open it (Figure 4). Before we editing this template,we need to have the website log, header, footer, and other necessaryimages.6

By right click the "BREAD FACTORY" header, we choose "Edit Tag img ", we can change the image to what we want. Same stepsfor all the images on the website.For changing the navigation bar, we double click on the text. They willbe highlighted and changeable. Just typing the name, it will bechanged.Figure 43.2 For content (Figure 5), wipe out the original text, and type in the newcontent like we writing a paper. It is simple and friendly to edit the fontand paragraph by using the properties on the bottom. If we want toadd a image in the middle of the paragraph, by clicking "Insert - Image" on the menu bar, choose the right image and adjust the size,it will fit in the content nicely. there is no code we need to worry about.Any changes on the web page is visualized immediately.7

Figure 5Here are all the basic steps for editing the website template. It is simple andeasy. Also, It is useful to see the changes of the website while editing it. Eventhough we have no knowledge of the HTML language, we are still able to builda nice website.4 Build Own WebsiteThis section is intended to guide a novice web designer to build a simpleclean website in several steps.4.1 Before we start to build the website, we need to design the headerimage, foot image and several images navigation bars. There aremany ways to create them. Use Photoshop or Windows Paint, ordownload them from the third party on Internet. For the header andfooter images, the width should be same or close to the template'swidth. Also, the navigation menu should be individual image for eachbutton. It will be easier and faster to link their own web pages.Create a new blank template (Figure 6). There are many blanktemplates in the software with different number of columns. Usuallychoose "3 column liquid" is the standard template.8

Figure 64.2 Now, it is time to build the website. The principle of build a website isfrom the top to the bottom. The header should be always on the topof the web page. Insert the header image. The image will alwaysappear at the cursor's location (Figure 7). Press "Shift Enter" to goto next line.Figure 79

4.3 For second line, put all the navigation menu images in same line(Figure 8). It will automatically scrape together, and it will look likeone nice navigation bar.Figure 84.4 Move curser to the bottom of the web page, make sure leave someblank space for future content adding. Insert the footer image (Figure9). Save it for multiple copies for each navigation menu. Then click oneach of them. Link them by each other. The simple and clean websitetemplate is finished.Figure 910

4.5 Now, it is time to add the content. Adding content is extremely easy. Itis same as basic Microsoft Word features. It is also available tochange the front, color, size, and paragraph. Also, we can put sometables and charts in the content. Adding the document link also works(Figure 10).Figure 10Now, We are finish the whole website design. Save it, and we can preview it.For just those several steps, we have successfully built a nice website.CONCLUSIONAdobe Dreamweaver is a very friendly website editor for different kinds of webdesigners. Whether you are a novice or you have been programming for manyyears. It is fit for every level of the web designer. What you see is what you get.Also the code/design view is extremely good feature for editing the web page.It is also support third party template which will have thousands of freetemplates to use. Adobe Dreamweaver is a very successful web designsoftware. For these several years development, it becomes very powerful andfriendly software. For more information about how to use Dreamweaver,Google search will help you.11

also design a beautiful website like they are editing a word document. It is very friendly web design software for new web designers. For this application note, there are two ways for novice to build a nice website: 1. Download the website template from the free web template website. 2. Build the website using "design view" on the Dreamweaver .

Related Documents:

Get Dreamweaver And Other Tools Dreamweaver 8, CS3, CS4 or CS5 should be installed on your computer. Make sure you have Dreamweaver on your computer. The latest version from Adobe is Dreamweaver. You may obtain either Dreamweaver 8 or CS3 by going to the IS&T site ist.mit.edu

Dreamweaver bila dibandingkan dengan program sejanisnya ! Keunggulan Dreamweaver Dreamweaver mempunyai keunggulan dibandingan program sejenisnya antara lain : Dreamweaver mempunyai ruang kerja, fasilitas, dan kemampuan yang mampu meningkatkan produktifitas dan efektifitas dalam

Dreamweaver Domain 3 Keller Adobe CS5 ACA Certification Prep Dreamweaver Domain 4 Objectives Define a Dreamweaver site. Create, title, name, and save a web page. Add text to a web page. Insert images and apply alternative text on a web page. Link web content, using hyperlinks, e-mail links, and named anchors. 2

To Publish Your CS Website in Macromedia Dreamweaver CS3 This page contains instructions of how to start building your website and then publish it to the CS web server, www.cs.siu.edu, in Macromedia Dreamweaver CS3. 1. Select "Site Manage Sites ." from the menu

buka dengan menggunakan Dreamweaver 8. Atau di paling bawah ada Open yang dapat digunakan untuk membuka file yang lain. Create New Pada menu ini kita dapat memilih dokumen baru apa yang akan kita buat dengan menggunakan Dreamweaver 8. Ada banyak pilihan, diantaranya HTML, C

Getting Started with Dreamweaver CS6 Introduction Adobe Dreamweaver CS6 is the industry leading web devel-opment tool for building web sites and applications. It pro-vides a combination of visual layout tools, application development features, and code editing support, enabling developers and designers at every skill level to create visu-

Nov 06, 2015 · Using the Properties panel in Dreamweaver Follow the steps below, and Dreamweaver inserts the correct HTML code automatically. 1 In Dreamweaver, insert the SWF file into an HTML page. 2 Select the SWF file in the Design View. 3 In the Properties panel, choose Parameters. 4 For the Parameter,

Pour apprendre à utiliser Dreamweaver, co mmencez par lire ce guide de démarrage Bien démarrer avec Dreamweaver. Ensuite, consultez d’autres sources, telles que le système d’aide ou le centre de support Macromedia. Utilisation de ce guide Ce guide comprend plusieurs chapitres. Il est recommandé de les lire dans l’ordre suivant :

Familiarisez-vous avec les outils de création visuelle, de codage et de développement d' applications de Dreamweaver MX en créant un site Web simple mais fonctionnel. Cette partie du manuel contient les chapitres suivants : Chapitre 1, « Introduction » Chapitre 2, « Création de votre premier site Web dans Dreamweaver »

AVEC DREAMWEAVER Dreamweaver permet de réaliser a ussi bien une simple page Web qu’un site complet pouvant intégrer des bases de données, des pages XML, des scripts JavaScript, PHP ou encore ColdFusion. La création d’une page Web seule sera facilitée par l’utilisation des propriétés de création de page,

Premiers pas avec Dreamweaver . Bien que la fenêtre document de Dreamweaver offre une vue de la page telle peut apparaître dans un navigateur, il est préférable de visualiser celle-ci dans un ou plusieurs navigateurs afin de s’assurer du rendu de la page. On utilisera la commande Fichier Aperçu dans le navigateur (ou touche F12) .

Adobe Dreamweaver 10 5 Dreamweaver CS4 (Consolidated) 78 4 2 Dreamweaver CS4 Navigation, Planning, Web Design 101, Tables, Text, & Images 1087 . 1 2 Premiere Pro CS6 Getting Started 973 1 2 Premiere Pro CS6 Editing Projects 974 2 2 Premiere Pro CS6 Enhancing and Completing Projects 975 CIW Web Foundations Associate .

MODUL PRAKTIKUM PEMROGRAMAN WEB DENGAN MENGGUNAKAN MACROMEDIA DREAMWEAVER MX 2004 1. Untuk menjalankan dreamweaver klik Start- Program- Macromedia- Macromedia Dreamweaver MX2004 2. T

Dreamweaver Dreamweaver MX (MX 6, MX 7, MX 2004 dan MX 8) adalah suatu bentuk program editor web yang dibuat oleh Macromedia [7]. Dreamweaver MX dan 8 selain sebagai editor yang komplet juga dapat digunakan untuk membuat animasi sederhana yang berbentuk layer dengan ba

Because of problems concerning FileMaker's ODBC connectivity feature, FileMaker is not one of the natively supported databases when it comes to creating dynamic web applications in Dreamweaver. The following databases are natively supported by Dreamweaver: Microsoft Access Microsof

Dreamweaver Templates Templates enable web designers to control which page elements users--such as writers, graphic artists, or other web developers--can edit. One of the most powerful uses of templates is the ability to update multiple pages at

Dreamweaver CS4 2 This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site layout, insert images and text, create links, and how to upload your site to the Internet

2. GETTING STARTED CONT. The most important step you need to take every time you launch Dreamweaver CS4 is to define your Local Info. The local root folder is the name for the folder where you are storing all of your website’s contents. To define a site, follow these steps: 1. Click Site Manage Sites. 2. Click New Site. 3. Select the Site .

Ceco Building Carlisle Gulf States Mesco Building Metal Sales Inc. Morin Corporation M.B.C.I. Nucor Building Star Building U.S.A. Building Varco Pruden Wedgcore Inc. Building A&S Building System Inland Building Steelox Building Summit Building Stran Buildings Pascoe Building Steelite Buil

The American Revolution had both long-term origins and short-term causes. In this section, we will look broadly at some of the long-term political, intellectual, cultural, and economic developments in the eigh-teenth century that set the context for the crisis of the 1760s and 1770s. Between the Glorious Revolution of 1688 and the middle of the eigh- teenth century, Britain had largely failed .