Minggu, 26 Desember 2010

Unit 2. The Dreamweaver Interface

Posted by Andra pratama 21.20, under | No comments

Unit 2. The Dreamweaver Interface (I)

We're going to see which are the basic elements of Dreamweaver 8: screen, bars, panels, etc, also we will learn to know how to differentiate between each one of them. We'll learn how they are called, where they are and what they are used for. We'll also see how to obtain help, in case that at some moment we don't know how to continue working.

When we know all this we'll be ready to begin to create web Pages.

The initial screen

When we start Dreamweaver an initial screen appears like this one, we're going to look at its fundamental components.

We will list the names of the different elements so it will be easier to understand the rest of the course. The screen that is next (and in general all those of this course) does possibly not coincide exactly with what you see in your computer, since each user can decide what elements they want to see at every moment, as we'll see ahead.

The tool bars

Title bar

The title bar contains the name of the program (Marcromedia Dreamweaver 8) and the name of the document we are working with, between parenthesis you can see the name of the file format this file is codified. At the end on the right are the buttons to minimize, maximize/restore and close the program.

Menu bar

The menu bar contains Dreamweaver operations, grouped in drop down menus. When we click on Insert, for example, we'll see the operations related to the different elements that can be inserted in Dreamweaver.

Many of the operations can be done from these menus, but sometimes it's preferable (or compulsory) to do them from the panels.

The Standard ToolBar

The standard toolbar contains icons to execute some of the most habitual operations immediatelly, like Open

, Save

, etc.

The document toolbar

The document toolbar contains icons to execute some other habitual operations that the standard toolbar doesn't include. These operations are for example changing the view of the document, preview, etc.

The status bar

The status bar shows us in every moment the HTML tag we are in (in the image, as we are in a blank document, we are directly on the <body> tag). We also can swich between the selection, drag and zoom modes using the three buttons on the right. You can select the zoom which you want to view the Design View selecting a percentage or just tipying it on the percentage textbox (the default is 100%).

Panels and Inspectors

Dreamweaver uses floating windows similar to the toolbar ones, these are known as panels or inspectors. The difference between panel and inspector is that, in general, the appearance and options of an inspector changes depending on the selected object.

Through the Window option on the menu bar, it's possible to show or to hide each one of the panels or inspectors. We're going to look at the most important ones.

The Properties inspector

The Properties inspector shows and allows us to modify the more frequent properties that are used in the selected elements. For example, when we select element a text it will show the type of font, the alignment, whether it's in italic or bold, etc.

Clicking on the button

you can unfold more options. This button is in the bottom-right corner.

It will surely be the tool that you are going to use most in Dreamweaver.

The insert toolbar or panel of objects.

The insert toolbar or panel of objects allows you to insert elements in a document without having to use the menu. The elements are classified according to their category: tables, text, forms, etc.

It's possible to configure this panel so that the icons of the objects are shown as buttons (in the previous image), as names, or both simultaneously.

Tutor 2

Document views

You can change the view of the document through the document toolbar.

Design View

The Design view allows you to work with the visual editor. It's the default view of Dreamweaver and the one that is used most of the time.

The code View

The Code view is used to be able to work totally in code programming mode. It doesn't allow you to directly have a visual reference of how the document is being shown according to the way the code is modified.

The Split view

The Split view allows you to divide the window in two zones. The top area shows the source code, and the bottom, the visual editor. When a change is made in one of the zones, this change is applied directly on the other.

The Help Guide

Through the Help menu you can:

Go to the help dialog which is very similar to the one of Windows, where you can search by subject, index, or content. You can select the Using Dreamweaver option or press F1.

Open tutorials (Getting Started and Tutorials option).

Open the Reference panel in which you will find the syntax and the description of HTML tags.

Go to the Dreamweaver Support Center in the Macromedia Web.

Go to the Macromedia Online Forums.

Wisata Danau Ranau

Posted by Andra pratama 21.12, under | 1 comment

Danau Ranau merupakan danau terbesar dan terindah di Sumatera Selatan yang terletak di kecamatan Banding Agung Kabupaten UKO Selatan (dahulu masuk dalam wilayah Kabupaten Ogan Komering Ulu). Berjarak sekitar 342 km dari kota palembang, 130 km dari kota Baturaja, dan 50 kilometer dari Muara Dua, ibu kota OKU Selatan, dengan jarak tempuh dengan mobil sekitar 7 jam dari kota Palembang. Sementara dari Bandar Lampung, danau ini bisa ditempuh melalui Bukit Kemuning dan Liwa. Secara geografis, danau ini terletak di perbatasan Kabupaten OKU Selatan Propinsi Sumatera Selatan dan Kabupaten Lampung Barat Propinsi Lampung.

Danau Ranau yang mempunyai luas sekitar 8×16 km dengan latar belakang gunung Seminung (ketinggian ± 1.880 m dpl), dikelilingi oleh bukit dan lembah. Pada malam hari udara sejuk dan pada siang hari cerah suhu berkisar antara 20° – 26° Celsius. Terletak pada posisi 4°51’45? bujur selatan dan 103°55’50? bujur timur.

Menurut legenda yang ada, danau ini tercipta dari gempa besar dan letusan vulkanik dari gunung berapi yang membuat cekungan besar. Sungai besar yang sebelumnya mengalir di kaki gunung berapi itu kemudian menjadi sumber air utama yang mengisi cekungan/belahan itu. Dan lama-kelamaan lubang besar itu penuh dengan air. Kemudian di sekeliling danau baru itu mulai ditumbuhi berbagai tanaman, di antaranya tumbuhan semak yang oleh warga setempat disebut ranau. Maka danau itu pun dinamakanlah Danau Ranau. Sisa gunung api itu kini menjadi Gunung Seminung yang berdiri kokoh di tepi danau berair jernih tersebut.

Pada sisi lain di kaki gunung Seminung terdapat sumber air panas alam yang keluar dari dasar danau. Di sekitar danau ini juga dapat ditemui air terjun Subik. Tempat lain yang menarik untuk dikunjungi adalah Pulau Marisa yang terletak tidak jauh dari air panas.

Kami, satu rombongan, menyempatkan menginap di wisma VARITA Pusri yang terletak di tepi danau Ranau ini. Tempat yang strategis untuk menikmati keindahan danau ini. Sayangnya, pengelolaan danau Ranau sebagai aset pariwisata dirasa sangat kurang. Beberapa infrastruktur pendukung, seperti akses jalan dan listrik, belum memadai.

Baca selengkapnya »

Unit 15. HTML and Dreamweaver (III)

Posted by Andra pratama 16.45, under | No comments

Unit 15. HTML and Dreamweaver (I)

We will now learn some of the advantages that Dreamweaver offers us at the time of working with HTML code, and not just in the graphic editor of the design view.

It's not about learning HTML language, it's just knowing how to readjust the code directly in Dreamweaver.

Tags

We already know HTML language is based on tags which mark each web site element from start to end.

Tags are based on writing the same command betwwen "<" and ">" symbols. The first tag means start, and the second one in which we include the "/" symbol, indicates the end and it is called the end tag.

Tags have attributes that allow the defining of the element's characteristics on which they act, including certain codes inside the tag.

For example, a paragraph is inserted between  and  tags, but you can change its predefined charateristics as they can be aligned to the right. To do this, instead of introducing the text in the paragraph between the previous labels, it must be inserted between  and  tags.

Also there are some elements that don't need an end tag. For example, a Shift+ENTER inside HTML code, is equivalent to a   tag.

Dreamweaver automatically inserts the necessary tags to build the site, with its appearance and content defined in the graphic editor, but also offers other ways to work directly with the code.

Code inspector

You already know that Dreamwever offers you the possibility of working with three views: Design view, Code view and Split view (Code and Design).

All these views are directly applied to the file window.

But there is a panel that allows the viewing of the code independently from the applied view in the file. This panel is called the Code inspector and can be opened through the Window menu. If the Code inspector option isn't in the menu, it may be found in the Others option. You can also open the Code inspector by pressing F10.

The Code inspector shows the HTML code the same way as Code view and Split view (Code and Design) do, but it can be better working with this panel as it can be placed in any part of the screen.

Unit 15. HTML and Dreamweaver (II)

The Tag hint list

Dreamweaver gives you the opportunity to work directly on the HTML code to complete the labels while they are being introduced. This happens in Code inspector and in Code views.

Let's imagine that we want to introduce into our site a link to the teacherClick site and we wanted it to be opened in a new window. In this case we have to introduce a <a href="http://www.teacherclick.com">click here to visit teacherClick </a> tag, and we would obtain the following link:

click here to visit teacherClik

Let's see how completing tags works through this example.

Tags are completed from left to right, so we have to first insert the < symbol.

After writing this symbol, Dreamweaver shows a list with all the commands that can be after it. To select one of them you have to click twice on it, or select it by pressing the RETURN key.

In this case we have to choose a, and then the list will be cleared. Now in the code we have

After <a you need to introduce a blank space. Now there will be another element list to include, which will be written after a, the label attributes.

We must select href.

Once selected, the code will be

The cursor will then be between double quotes, and a new list here well be displayed so you can select the type of link to insert.

In this case the link has to be the HTTP type, but a (FILE) link, a (MAILTO) link, or any of the list can also be inserted. We need to select http://

Instead of ending the tag with the > symbol, we have to first indicate that the link has to be opened in a new window. For this, we need to introduce a new space.

In the new list we have to select target. The code will be like this:

Now the cursor will be betrween double quotes, and a list will appear where you can choose the link destiny.

We want the link to open in a new window, so we have to select _blank.

After introducing the > symbol to end the label, the link end will be automatically inserted at the end on the link, which means that </a> will be inserted, and we'll have

We can now complete the label with the link and text address, and it'll be like this:

<a href="http://www.teacherclick.com">click here to visit teacherClick</a>

Code errors

Through the graphic editor it's possible to see if there are any errors in the HTML code, such as an incomplete tag.

In case of this kind of error, the code fragment will stand out in yellow in the design window.

This allows us to notice the line where the error is.

Another way of detecting errors in our site is through the Check Browser support menu, located in the toolbar.

If our site doesn't have any errors, the menu icon will appear like this

, while if we have errors, we will see this

To see our site errors, unfold a menu and select the Show all errors option.

Next will open the panel with the errors.

In this list the error priority is represented by an icon, the globe indicates an informative message (indicates an incompatible code with the browser but with no visible effect).

The exclamation sign icon with the red background indicates an error (indicates that it may be a visible critical error in certain browsers, and some parts of the site may be missing).

The exclamation sign icon with a yellow background indicates a warning (indicates a part of the code that will not be able to be correctly seen in certain browsers, but won't cause any critical viewing problems).

Next we have the file and the line number where the error is found, with a description.

Sometimes the description is a text that can't be completely seen. To see it just click on the More info

button.

As you know, different browsers and their many versions are responsible for the error or not, so we should verify this by selecting the many browsers versions we think are most commonly used.

To make Dreamweaver verify the selected browsers, we need to unfold the Check Browser support menu and then select the Settings... option. You'll see a Target browsers dialog window, where we will select the browsers that we want to verify, and the minimum version in the drop-down list to the right of the browser name.

Unit 15. HTML and Dreamweaver (III)

Find and replace

Sometimes we want to search a web site for all the pages with certain texts, labels, or parts of these elements. We might want to replace them because we need to work in these elements and don't remember which ones they were, or because we want to replace some labels with others.

Let's imagine an existing web site, where the majority of the pages have text that makes reference to the site's name from the start.

For example, all the pages could start with DogsCats, and it is for sure that that phrase isn't in any other part of the site apart from the start. Now let's imagine that a cat and a dog image have been created, and you want to replace the DogsCats text for the image in all the pages.

In this case it is not necessary to open all the pages that contain the text one by one, and neither to modify the pages to replace the text for the image one by one. To perform this task it is easier using the Find and replace tool.

You can open it through the Edit menu, and then selecting the Find and replace option, or by pressing Ctrl+F.

Through Find in you can specify whether it's going to be looked for in the actual file, in the entire site, or only in the selected site files (previously selected).

Through Search you can specify whether the text needs to be looked for (in the desgin window), or in the HTML code (font code).

Next to the Find option list, there is a text window in which you need to indicate the text or the code you want to look for.

In Replace you must specify the text or the code you want to replace the text or code found with.

The replacement can be made in various ways, but always through the right buttons. To search one by one for the files that contain the code or text needed, and once found to replace them when you need, use the buttons Find Next and Replace.

If you want to find all the files that contain the text or code, or to replace all of them, use the Find All and Replace All buttons.

When you use the Find Next option, a page with the coinciding text is opened, highlighting the font in the list near to the code line in which it is. This way we can decide the changes we want to make one by one. When we are sure about the replacements we want we just need to click on Replace, or if we don't want to make any changes we just need to click on Find Next again.

When we use the Find All option, the Find and replace window closes and a new panel like the one to the right is opened. Here are all the files in which the text coincides with the searched text or code.

By clicking on the

button, the Find and replace window is opened. From this window we can replace from the found files, one by one with the Replace button, or directly replace all found files, by selecting the Replace All option.

In the panel, when any file has been changed, it will appear again in the list near a green circle, which indicates that it has been previously replaced.

We can make errors when we search, or replace text or error codes. You have to be very careful when you use this tool, because it's not possible to undo the changes done to the closed files with the find and replace option.

In the previous example, the person wants to search for the DogCats text, and replace it with an image. In this particular case, what you want is to replace the text with an image, so in Find we couldn't choose the Text option, we would have to select Source code.

In Replace the complete HTML label would have to be specified to insert the image. In this case the label would be <img scr="images/logo_animals.gif">, knowing the image is called logo_animals.gif and is found inside the site in the images folder.

Cara Membuat Teks Berjalan dan Berkedip di Blog WordPress, Blogspot, Joomla dan Blog Yang Lain

Mungkin file tutorial ini sudah tak asing lagi bagi para peblogger yang sudah malang melintang dalam menjelajah dan mengubek-ubek blognya. Tapi mungkin juga ada yang belum tahu mengenai tutorial sederhana tentang cara membuat teks berjalan dan berkedip pada blog wordpress, blogspot, joomla ataupun pada blog dengan css yang lain.

Cara ini juga berlaku pada website dengan design sendiri yang berformat html. Teks berjalan dan berkedip pada bahasa html disebut dengan marquee behavior. Nah, kalau teman-teman mencari arti kata marquee di kamus, maka artinya akan lain yaitu “tenda besar”. Pastinya nggak nyambung kan..

Tidak panjang lebar, berikut tutorial cara membuat teks berjalan dan berkedip pada blog wordpress, joomla, blogspot, dan blog yang lain :

1. Marquee 1.0.0