Instalasi ekstensi SSI
Sebelum Anda mulai, berhenti Dreamweaver jika sedang berjalan. Selanjutnya, download file sampel. Uncompress file ZIP dan menyimpan folder bernama ssi_extension ke desktop Anda. Anda akan menentukan situs menggunakan folder ini contoh file sebagai folder lokal root situs.
Folder File sampel berisi dua file: layout.css dan Insert_SSI.zxp. File layout.css berisi gaya yang mengontrol tampilan dan posisi dari proyek sampel. The Insert_SSI.zxp adalah installer untuk perpanjangan SSI.
Buka folder dan double-klik file ekstensi Insert_SSI.zxp untuk meluncurkan layar instalasi. Ikuti instruksi pada layar untuk menyelesaikan proses instalasi.
Mengidentifikasi fitur baru yang ditambahkan oleh ekstensi SSI
Setelah menginstal ekstensi SSI, fitur-fitur baru berikut ditambahkan ke antarmuka Dreamweaver:
Insert Bar menampilkan kategori baru: SSI
Menu Insert menampilkan entri baru: Server-side Sertakan
Menu Perintah menampilkan item baru: Set SSI Nesting Tingkat ...
Informasi latar belakang
Versi saat ini dari Dreamweaver tersedia untuk diunduh pada Creative Cloud tidak termasuk item interface yang digunakan untuk memasukkan Server-Side Includes (SSIS). Setelah menginstal ekstensi SSI, Dreamweaver UI mencakup kemampuan untuk cepat memasukkan SSIS di halaman web, mengedit file SSI, dan halaman pratinjau yang berisi SSIS.
Secara default, Desain melihat di Dreamweaver MX 2004 (versi 7 dan di atas) hanya membuat file SSI yang secara langsung dimasukkan ke dalam halaman. Ketika menerjemahkan file SSI bersarang, Design view tidak dapat menampilkan konten yang ada dalam bersarang SSIS.
SSI ekstensi memecahkan masalah ini karena menerapkan penerjemah yang memungkinkan Design view untuk di tampilkan bersarang SSIS, sehingga lebih mudah untuk melihat desain penuh ketika mengedit proyek. Tingkat bersarang default yang digunakan oleh ekstensi SSI diatur ke 5.
Catatan: Dengan menginstal ekstensi SSI, Anda pada dasarnya mengesampingkan penerjemah SSI diinstal dengan versi terbaru dari Dreamweaver CS6. Jika Anda memilih untuk menghapus ekstensi SSI, Dreamweaver beralih ke menggunakan translator default lagi.
Membuat header halaman menggunakan fitur yang disertakan dalam ekstensi SSI
Setelah menginstal ekstensi SSI menggunakan Adobe Extension Manager, Anda dapat mengambil keuntungan dari kemampuan untuk memasukkan, mengedit, dan melihat file SSI bersarang.
Dalam contoh ini, Anda akan membuat header halaman navigasi situs sederhana. Header mencakup dua bagian bersarang yang berisi logo situs dan menu situs tingkat atas.
Mendefinisikan sebuah situs baru di Dreamweaver
Ikuti langkah-langkah untuk membuat situs baru dan mengatur folder root lokal:
Luncurkan Dreamweaver jika belum terbuka
Pilih Site> New Site untuk meluncurkan kotak dialog Site Setup.
Di Situs field Name, masukkan nama situs: tes SSI.
Klik ikon folder di sebelah kanan Lokal lapangan folder Site. Dalam Memilih Root Folder kotak dialog yang muncul, arahkan ke desktop Anda dan pilih folder bernama ssi_extension. Sementara folder yang dipilih, klik Pilih untuk menutup Pilih Root Folder kotak dialog.
Klik Simpan untuk menutup kotak dialog Site Setup.
Langkah berikutnya melibatkan membuat file SSI yang berisi navigasi situs dan menyimpan file dalam folder situs yang baru saja Anda didefinisikan.
Membuat halaman SHTML baru
Gunakan kotak dialog dokumen baru untuk membuat halaman baru yang akan berisi menu untuk situs.
Langkah berikutnya melibatkan membuat file SSI yang berisi navigasi situs dan menyimpan file dalam folder situs yang baru saja Anda didefinisikan.
Membuat halaman SHTML baru
Gunakan kotak dialog dokumen baru untuk membuat halaman baru yang akan berisi menu untuk situs.
Pilih File> New untuk membuka kotak dialog Document Baru.
Pilih opsi berikut dari kiri ke kanan:
Halaman Kosong> Halaman Type: HTML> Tata Letak: Tidak ada> DocType: HTML5
Klik Create untuk membuat file baru dan menutup kotak dialog Document Baru.
Klik Berpisah di bagian atas jendela dokumen untuk melihat kedua Kode melihat dan Desain tampilan secara bersamaan.
Pilih semua kode dalam tampilan Kode dan tekan Backspace / Hapus untuk menghapusnya.
Pilih File> Save dan menyimpan file sebagai nav.shtml dalam folder bernama ssi_extension pada desktop Anda.
Mengisi file SSI dengan menu yang menampilkan dalam header
Pada bagian ini, Anda akan mengedit file SSI menambahkan kode yang menciptakan navigasi situs.
Klik di tampilan Kode. Pilih Insert> Div untuk mengakses kotak dialog Insert Div.
Pilih File> Save dan menyimpan file sebagai nav.shtml dalam folder bernama ssi_extension pada desktop Anda.
Mengisi file SSI dengan menu yang menampilkan dalam header
Pada bagian ini, Anda akan mengedit file SSI menambahkan kode yang menciptakan navigasi situs.
Klik di tampilan Kode. Pilih Insert> Div untuk mengakses kotak dialog Insert Div.
Di bidang ID, masukkan nama ID untuk tag div: topnav, dan kemudian klik OK.
Pilih teks placeholder yang muncul antara pembukaan dan penutupan tag div. Sedangkan teks yang mengatakan: Konten untuk id "topnav" Goes Here dipilih, tekan Backspace / Hapus untuk menghapusnya. Hal ini membuat kursor Anda di antara tag pembukaan dan penutupan div.
Salin kode berikut di bawah ini dan paste pada titik penyisipan kursor Anda:
<Ul>
<Li class = "aktif"> <a href="index.html"> Rumah </a> </ li>
<Li> <a href="#"> Demo </a> </ li>
<Li> <a href="#"> kontak </a> </ li>
<Li> <a href="#"> Tentang Kami </a> </ li>
<Li class = "terakhir"> <a href="#"> A Long Link Teks </a> </ li>
</ Ul>
<Ul>
<Li class = "aktif"> <a href="index.html"> Rumah </a> </ li>
<Li> <a href="#"> Demo </a> </ li>
<Li> <a href="#"> kontak </a> </ li>
<Li> <a href="#"> Tentang Kami </a> </ li>
<Li class = "terakhir"> <a href="#"> A Long Link Teks </a> </ li>
</ Ul>
Pilih File> Save untuk menyimpan dokumen SHTML.
Membuat header SSI berkas
Bagian selanjutnya menjelaskan cara membuat header SSI berkas. Ini adalah file SSI yang akan link ke file SHTML bersarang dengan menu yang Anda buat pada langkah sebelumnya.
Membuat header SSI berkas
Bagian selanjutnya menjelaskan cara membuat header SSI berkas. Ini adalah file SSI yang akan link ke file SHTML bersarang dengan menu yang Anda buat pada langkah sebelumnya.
Pilih File> New untuk membuka kotak dialog Document Baru dan membuat halaman lain.
Pilih opsi berikut dari kiri ke kanan:
Halaman Kosong> Halaman Type: HTML> Tata Letak: Tidak ada> DocType: HTML5
Klik Create untuk membuat file baru dan menutup kotak dialog Document Baru.
Pilih semua kode dalam tampilan Kode dan tekan Backspace / Hapus untuk menghapusnya.
Pilih File> Save dan menyimpan file sebagai header.shtml dalam folder bernama ssi_extension, bersama file nav.shtml.
Pilih Insert> Div dan masukkan nama berikut di bidang ID: header. Klik OK.
Pilih teks placeholder antara pembukaan dan penutupan tag div. Tekan Backspace / Hapus untuk menghapus dan menempatkan kursor Anda di antara kedua tag div.
Masukkan div baru di dalam div header dengan ID: logo.
Pilih teks placeholder di antara tag pembukaan dan penutupan logo div. Tekan Backspace / Hapus untuk menghapusnya.
Pada titik ini, Anda telah membuat SSI file bernama header.shtml yang berisi div kontainer bernama header, dengan div kontainer bersarang di dalamnya bernama logo. Selanjutnya, Anda akan menambahkan konten ke div logo.
Pada titik ini, Anda telah membuat SSI file bernama header.shtml yang berisi div kontainer bernama header, dengan div kontainer bersarang di dalamnya bernama logo. Selanjutnya, Anda akan menambahkan konten ke div logo.
Copy kode berikut di bawah ini:
<h1><a href="#">Logo Title</a></h1>
<p>Tag line here</p>
<h1><a href="#">Logo Title</a></h1>
<p>Tag line here</p>
Pilih Insert> Server-Side Sertakan. Telusuri untuk memilih file nav.shtml. Baris kode berikut dimasukkan dalam div logo:
<!--#include file="nav.shtml" -->
After making these changes, the code looks like this:
<div id="header">
<div id="logo">
<h1><a href="#">Logo Title</a></h1>
<p>Tag line here</p>
</div>
<!--#include file="nav.shtml" -->
</div>
<!--#include file="nav.shtml" -->
After making these changes, the code looks like this:
<div id="header">
<div id="logo">
<h1><a href="#">Logo Title</a></h1>
<p>Tag line here</p>
</div>
<!--#include file="nav.shtml" -->
</div>
Pilih File> Save untuk menyimpan dokumen.
Selanjutnya, Anda akan membuat halaman indeks untuk situs sampel.
Selanjutnya, Anda akan membuat halaman indeks untuk situs sampel.
Buat halaman lain menggunakan pilihan ini pada kotak dialog New Document menggunakan opsi berikut dari kiri ke kanan:
Halaman Kosong> Halaman Type: HTML> Tata Letak: Tidak ada> DocType: HTML5
Klik Create.
Pilih File> Save dan menyimpan file sebagai index.html dalam folder bernama ssi_extension, bersama file nav.shtml.
Pilih Window> Styles CSS untuk membuka panel CSS Styles.
Klik tombol link di bagian bawah panel CSS Styles dan browse untuk memilih style sheet bernama layout.css yang ada di folder file sampel.
Pilih Insert> Server-Side Sertakan lalu browse untuk memilih file bernama header.shtml dalam folder file sampel.
Review desain dalam Design view.
Tampilan desain menampilkan header SSI file yang Anda dimasukkan langsung di halaman. Selain itu, karena kemampuan terjemahan canggih termasuk dalam ekstensi SSI, yang bersarang SSI konten (logo dan navigasi situs).
Tampilan desain menampilkan header SSI file yang Anda dimasukkan langsung di halaman. Selain itu, karena kemampuan terjemahan canggih termasuk dalam ekstensi SSI, yang bersarang SSI konten (logo dan navigasi situs).
Masalah tampilan file SSI bersarang
Setelah memasukkan file header.shtml ke halaman indeks di bagian sebelumnya, Anda akan melihat konten SSI bersarang yang ditambahkan ke halaman header.shtml muncul dalam Design view saat Anda bekerja.
Namun, jika Anda tidak melihat logo atau navigasi situs, ikuti langkah berikut:
Pilih File> Save All untuk menyimpan semua file yang sedang terbuka.
Keluar Dreamweaver.
Gunakan Windows Explorer atau Mac Finder untuk mencari folder konfigurasi untuk Dreamweaver di lokasi berikut (berdasarkan OS yang Anda jalankan):
Vista / Windows 7:
C: \ Users \ <username> \ AppData \ Roaming \ Adobe \ Dreamweaver CSx \ <bahasa> \ Konfigurasi
Windows XP:
C: \ Documents and Settings \ <username> \ Application Data \ Adobe \ Dreamweaver CSx \ <bahasa> \ Konfigurasi
Mac OS X:
Macintosh HD: <username>: Perpustakaan: Dukungan Aplikasi: Adobe: Dreamweaver CSx: <bahasa>: Konfigurasi
Cari dan menghapus file xxxxxxxxxxx.dat. Kosongkan Windows Recycle Bin atau Trash Mac. Luncurkan Ulang Dreamweaver dan buka file index.html.
Setelah menghapus file dat, file SSI bersarang yang terdiri dari bagian logo dan bagian navigasi situs ditampilkan dalam Design view.
Setelah menghapus file dat, file SSI bersarang yang terdiri dari bagian logo dan bagian navigasi situs ditampilkan dalam Design view.
Terima kasih telah membaca artikel tentang MENGGUNAKAN EKSTENSI SSI DI DREAMWEAVER UNTUK MEMBUAT HALAMAN HEADER di blog CARA MEMBUAT TERBAIK jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.