Modul pelatihan website english

0 copy TIM WEBSITE UNY 2014

MODUL PENGEMBANGAN WEBSITE UNIVERSITAS NEGERI YOGYAKARTA (Web Fakultas Program Pascasarjana amp Lembaga Versi Inggris)


STRUKTUR WEBSITE


No Tipe Konten Letak Block Role

1 Header Logo - Webmaster UNY

2 Main Menu - Admin

3 Header Slideshow Slideshow Admin

4 Link Banner Slideshow Admin

5 News Letter First Sidebar Admin

6 Other News First Sidebar Admin

7 News Content Admin

8 Search Second Sidebar Admin

9 Announcements Second Sidebar Admin

10 Event Second Sidebar Admin

11 Gallery Second Sidebar Admin

12 link menu amp Contact Us Footer Admin

Alamat akses login admin

httpen[nama fakultas]unyaciduser

Masukkan username amp password


Tampilan setelah admin login

Untuk menambahkan konten webmaster UNY menyediakan menu di sisi kanan (second sidebar) untuk

mempermudah akses admin


MENAMBAHKAN KONTEN

1 Add Page (halaman)

Page atau halaman digunakan untuk menuliskan konten yang akan ditautkan dengan menu Misal

halaman profil visi-misi struktur organisasi dll

A Title (Judul Halaman)

Judul halaman harus diisi judul halaman merupakan nama dari halaman yang akan

dibuat dan dipublikasikan

B Body (Isi Konten)

Isian konten ditulis pada kolom body pada kolom ini tersedia fitur edit yang familiar

seperti pada micosoft office


Untuk menambahkan gambar dapat menggunakan fitur ldquoimagerdquo

Kemudian klik ldquoBrowse Serverrdquo

Klik ldquouploadrdquo


Klik ldquobrowserdquo dan pilih gambar yang akan diunggah

Kemudian klik ldquouploadrdquo

Klik ldquoinsert filerdquo


Klik ldquoOKrdquo

C Attach File (unggah lampiran)

Digunakan jika konten membutuhnkan lampiran file file yang diijinkan adalah dengan

format doc docx pdf rar zip xls xlsx dengan ukuran file maksimal satu kali upload 2 MB


2 Add News (Berita)

Digunakan untuk mempublikasikan berita kegiatan-kegiatan yang sudah dilaksanakan atau

prestasi yang diperoleh

A Title (Judul Berita)

Title harus diisi karena merupakan judul dari berita yang akan dipublikasikan

B Image (Gambar Berita)

Pada konten berita sudah tersedia menu image (unggah gambar) gambar yang diijinkan

untuk diunggah adalah yang memiliki format png gif jpg jpeg dengan maksimal ukuran

file 500 kb

Catatan pada konten berita cukup 1 gambar saja yang di unggah tidak perlu

menambahkan gambar pada kolom body (isi berita) hal ini berpengaruh pada tampilan

halaman depan website

C Body (Isi Berita)

Deskripsi lengkap berita dituliskan pada kolom body pada kolom ini tersedia fitur edit

yang familiar seperti pada micosoft office


D Tags

Digunakan untuk pengelompokan jenis berita misal untuk prestasi mahasiswa di tulis

dengan tags ldquoachievementrdquo untuk kegiatan seminar ditulis dengan tags ldquoconferencerdquo

dan pengelompokan kegiatan-kegiatan lainnya Tags bisa ditulis lebih dari 1 jenis tag

Tampilan Berita di halaman depan

Tampilan Tags


3 Add Announcement (Pengumuman)

Digunakan untuk menambahkan konten pengumuman seperti informasi akademik jadwal kuliah

dll

A Announcement Title (Judul Pengumuman)

Announcement Title harus diisi karena merupakan judul dari pengumuman yang akan

dipublikasikan

B Detail Announcement (detail pengumuman)]

Detail Announcement berisikan keterangan lengkap pengumuman yang akan

dipublikasikan Pada kolom ini tersedia fitur edit yang familiar seperti pada micosoft

office

C Attachment (unggah lampiran)

Digunakan untuk melampirkan file sebagai penunjang informasi pada pengumuman

yang akan dipublish


4 Add Event

A Name of Event (Nama Kegiatan)

Name of Event harus diisi karena merupakan nama dari events yang akan dipublikasikan

B Date Events (Tanggal Kegiatan)

Tanggal dituliskan sesuai contoh tanggal kegiatan akan tampil pada halaman depan

(pada block events)

Tampilan date event di halaman depan


C Detail Event (Detail Kegiatan)

Digunakan untuk menuliskan detail pelaksanaan kegiatan semisal Nama kegiatan

tempat waktu kegiatan dll

5 Add News Letter

Digunakan sebagai media publikasi berupa bulletin atau majalah Pada konten ini file tidak di

unggah langsung kedalam website melainkan diunggah ke website httpissuucom kemudian

disematkan (embed) ke konten

A Title (Judul)

Title harus diisi karena merupakan judul dari News Letter yang akan dipublikasikan

B Body (isi)

Body diisikan kode embed dari httpissuucom

Pertama-tama buatlah akun issuucom kemudian unggah file newsletter pada website

tersebut

Setelah file terunggah maka klik ldquosharerdquo


Kemudian klik ldquoembedrdquo

Copy kode embed

Kemudian paste ke kolom body dengan menekan tombol ldquosourcerdquo terlebih dahulu

Rubah ukuran ldquowidthrdquo amp ldquoheightrdquo menjadi 195x200 pixels

Tampilan News Letter di halaman depan


6 Add Link Banner

A Title (Judul)

Title harus diisi karena merupakan judul dari Link Banner yang akan dipublikasikan

B Link Image

Merupakan gambar yang akan digunakan sebagai tautan (link) ke alamat (URL) tautan Jenis

File yang diijinkan untuk diunggah adalah png gif jpg jpeg dengan maksimal ukuran file 500

Kb

Cara unggah link image

Klik ldquobrowserdquo kemudian pilih file gambar yang akan diunggah



Isikan link URL Link bisa dituliskan alamat tautan yang sudah ada

7 Add Slideshow

Slideshow hanya tampil di halaman depan website selain penunjang tampilan website slideshow

dapat berisi gambar pengumuman atau informasi kegiatan Slideshow juga dapat dijadikan

sebagai tautan gambar

A Title (Judul)

Title harus diisi karena merupakan judul dari slideshow yang akan dipublikasikan

B Image Slideshow

Jenis File yang diijinkan untuk diunggah adalah png gif jpg jpeg dengan maksimal ukuran file

1 MB Gambar slideshow ini akan otomatis menyesuaikan ukuran yang sudah diatur oleh

sistem ukuran gambar slideshow yang disarankan 1036x320 pixels


8 Add Gallery

A Gallery Title (Judul)

Gallery Title harus diisi karena merupakan judul album dari galeri yang akan dipublikasikan

B Gallery Type

Terdapat 2 jenis galeri yaitu galeri foto dan galeri video Jika dipilih ldquophotordquo maka akan

muncul menu untuk mengunggah foto dan jika memilih type ldquovideordquo maka akan muncul

kolom isian url video

1) Gallery Type ldquoPhotordquo

Jenis File yang diijinkan untuk diunggah adalah png gif jpg jpeg dengan maksimal ukuran

file 1 MB Jumlah gambar yang diunggah tidak dibatasi


2) Gallery Type ldquovideordquo

Untuk menambahkan video pada gallery tidak perlu dengan menuliskan kode embed dari

sumber video melainkan cukup menuliskan URL alamat video yang akan ditambahkan

kedalam konten gallery


PENGEMBANGAN WEBSITE LANJUT

1 MENU

Menu merupakan tombol tautan (link) untuk menuju ke halaman website atau website lain

Untuk menuju ke menu pertama-tama klik ldquostructurerdquo

Klik ldquomenusrdquo

Tampilan pengaturan menu


A Menambahkan link menu

Sebagai contoh menambahkan link pada ldquomain menurdquo maka klik tombol ldquolist linkrdquo

Maka akan tampil link menu keseluruhan pada ldquomain menurdquo

Kemudian klik ldquoAdd Linkrdquo

Isikan nama menu dan pada kolom ldquoPathrdquo isikan URL halaman atau website yang akan

ditautkan


Setelah di ldquosaverdquo maka menu baru yang sudah dibuat akan muncul dibagian paling bawah

untuk merubah urutannya cukup dengan menggeser urutan dengan menekan klik kiri

mouse pada tanda ldquo+rdquo kemudian digeser sesuai urutan yang diinginkan jika sudah sesuai

klik ldquosave configurationrdquo

B Membuat Title Menu Baru

Digunakan untuk membuat menu tambahan yang akan dimunculkan pada footer atau

sidebar dari website

Untuk menambahkannya klik ldquoAdd Menurdquo

Isikan ldquotitlerdquo dari menu yang akan dibuat kemudian klik ldquosaverdquo

Kemudian tambahkan link menu seperti pada contoh ldquoA Menambahkan link menurdquo


untuk memunculkannya pada ldquofooterrdquo yaitu dengan melakukan setting ldquoblockrdquo

Contoh Menu Footer

C Membuat Sub Menu

Caranya dengan menggeser (drag) menu yang sudah ada dengan posisi dibawah menu

utama dan digeser kekanan

Untuk membuat sub menu pada menu utama dibuat ldquoshow as expandedrdquo terlebih dahulu

Seperti pada contoh gambar berikut

Pada menu utama di klik ldquoeditrdquo

Kemudian centang kolom ldquoshow as expandedrdquo

Sub menu

Menu utama


2 BLOCK

Block digunakan untuk mengatur letak (region) masing-masing konten menu pada website

Tampilan ldquoBlockrdquo

Untuk melihat letak region block dapat dilihat dengan menekan ldquoDemonstrate block regions (ysu

Responsive Theme)rdquo


Tampilan letak region pada block

Block yang tidak aktif akan berada pada posisi ldquononerdquo untuk merubahnya bisa digeser (drag) atau

memilih region yang sesuai untuk memasang konten

3 CONTENT TYPE

Merupakan jenis konten website sebagai contoh News Announcement Event merupakan

jenis ldquocontent typerdquo


Tampilan Pengaturan ldquocontent typerdquo

Untuk membuat konten baru klik ldquoadd content typerdquo

Sebagai contoh menambahkan konten Announcement

Isikan nama konten yang akan dibuat

isikan Title field label atau judul


Pada pengaturan komentar klik ldquoclosedrdquo dan ldquodisabledrdquo

Setelah selesai klik ldquosave and add fieldsrdquo

Tambahkan fields sesuai kebutuhan isian konten

4 VIEW

Digunakan untuk membuat block amp page yang dapat diatur secara custom


Untuk menambah view klik ldquo Add New Viewrdquo

Isikan nama view yang akan dibuat kemudian memilih jenis view yang akan dibuat sebagai block page

atau keduanya

Kemudian view secara custom dapat diatur dengan memilih format field yang akan dimunculkan content

type dan pengaturan jumlah konten yang akan dimunculkan


Selamat mencobahellip


STRUKTUR WEBSITE




2 Main Menu - Admin



















MENAMBAHKAN KONTEN







B Body (Isi Konten)












Klik ldquoOKrdquo





2 Add News (Berita)








file 500 kb




C Body (Isi Berita)




D Tags





Tampilan Tags




dll



dipublikasikan




office



yang akan dipublish


4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya








2 Main Menu - Admin



















MENAMBAHKAN KONTEN







B Body (Isi Konten)












Klik ldquoOKrdquo





2 Add News (Berita)








file 500 kb




C Body (Isi Berita)




D Tags





Tampilan Tags




dll



dipublikasikan




office



yang akan dipublish


4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya










MENAMBAHKAN KONTEN







B Body (Isi Konten)












Klik ldquoOKrdquo





2 Add News (Berita)








file 500 kb




C Body (Isi Berita)




D Tags





Tampilan Tags




dll



dipublikasikan




office



yang akan dipublish


4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya














Klik ldquoOKrdquo





2 Add News (Berita)








file 500 kb




C Body (Isi Berita)




D Tags





Tampilan Tags




dll



dipublikasikan




office



yang akan dipublish


4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya






2 Add News (Berita)








file 500 kb




C Body (Isi Berita)




D Tags





Tampilan Tags




dll



dipublikasikan




office



yang akan dipublish


4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya






D Tags





Tampilan Tags




dll



dipublikasikan




office



yang akan dipublish


4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya








dll



dipublikasikan




office



yang akan dipublish


4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya






4 Add Event





(pada block events)






5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya









5 Add News Letter




A Title (Judul)


B Body (isi)



tersebut




Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya







Copy kode embed





6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya






6 Add Link Banner

A Title (Judul)


B Link Image



Kb






7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya








7 Add Slideshow




A Title (Judul)


B Image Slideshow





8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya






8 Add Gallery



B Gallery Type














1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya












1 MENU











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya











ditautkan














Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya


















Contoh Menu Footer

C Membuat Sub Menu







Sub menu

Menu utama


2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya






2 BLOCK









3 CONTENT TYPE













4 VIEW





atau keduanya









3 CONTENT TYPE













4 VIEW





atau keduanya















4 VIEW





atau keduanya








atau keduanya





Modul pelatihan website english

Documents

Transcript of Modul pelatihan website english