CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)
280,9bin280,9 bin izleme
Yayın tarihi 21 nis 201221 nis 2012
{"pages":{"search":{"query":"Çisilsel+Tasarım","originalQuery":"Çisilsel+Tasarım","serpid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","parentReqid":"","serpItems":[{"id":"11756533187323041002-0-0","type":"videoSnippet","props":{"videoId":"11756533187323041002"},"curPage":0}],"filters":{},"serpFooter":{"linksGroups":[{"type":"geo","links":[{"label":"Columbus","title":"Columbus","url":"//yandex.com.tr/tune/geo/","logNode":{"name":"region"},"target":"_self","a11yLabel":"Bölgeniz Columbus","needRetpath":true}]},{"type":"help","links":[{"label":"Bize ulaşın","url":"https://yandex.com.tr/support/video/troubleshooting.html","logNode":{"name":"feedback"},"needRetpath":true},{"label":"Yardım","url":"https://yandex.com.tr/support/video/","logNode":{"name":"help"},"needRetpath":true}]},{"type":"settings","links":[{"label":"Ayarlar","url":"https://yandex.com.tr/tune/search/","target":"_self","logNode":{"name":"settings"},"needRetpath":true}]},{"type":"company","links":[{"label":"Şirket hakkında","url":"//yandex.com.tr/company/","logNode":{"name":"about"},"target":"_blank"},{"label":"Kullanım lisansı","url":"//yandex.com.tr/legal/termsofuse/","logNode":{"name":"license"},"target":"_blank"},{"label":"Gizlilik Politikası","url":"//yandex.com.tr/legal/confidential/","logNode":{"name":"confidential"},"target":"_blank"}],"a11yHidden":true}],"hasExtralinks":true},"currentPage":0,"prevPageToLoad":-1,"nextPageToLoad":1,"isTranslationsFilterEnabled":false,"isTranslationsDistributionEnabled":false,"isTranslationsDistributionOnboardingEnabled":false,"isFeedbackModalVisible":false,"viewerData":{},"prevention":{},"hasNextPage":false,"rightSerpItems":[{"type":"direct","id":"search-list-right","props":{"advRsyaActivateParams":{"pcodeParams":{"blockId":"R-I-8843654-1","renderTo":"search-list-right-0-R-I-8843654-1","pageNumber":0,"grab":"dMOHaXNpbHNlbCtUYXNhcsSxbQo=","darkTheme":false,"lazyLoad":false,"extParams":{"reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","ui":"desktop","yuid":"4482623731751264357"}}},"isAdult":false,"position":0,"placement":"search-list-right"},"curPage":0}],"quasarData":{"title":""},"isAdultQuery":false,"errorList":[],"layout":"list","retpath":"https%3A%2F%2Fgs.yandex.com.tr%2Fvideo%2Fpreview%2F11756533187323041002%3Fnomisspell%3D1%26noreask%3D1%26text%3D%25C3%2587isilsel%252BTasar%25C4%25B1m"},"main":{"_isInitial":true,"snippets":[],"serpFooter":{"linksGroups":[]},"isLoggedIn":false}},"internal":{"nonce":"2277527643352993917105","expFlags":{"video_depot_viewer":1,"video_instream_player_yaru_loader":1,"video_skeleton_doc_update":1,"velocity_delay_drawer":1,"video_instream_disable_hosts":"dzen.ru,ok.ru,vk.com,video.mail.ru","video_search_toggle_with_text":1,"video_single_vh_unmute":1,"video_update_d2d_after_clickout":1,"video_viewer_desktop_hide_tabs":1,"velocity_disable_suspense":1,"video_viewer_desktop_smart_layout":1,"dark_theme_desktop":"cookie","distr_splashscreen_on":1,"video_instream_player_config":{"vmapScenarioId":119,"category":2,"impId":7,"partnerId":2216089},"video_font_yandex_sans":1,"video_adv_new_show_rules":1,"video_resource_loader":1,"video_adv_config_desktop":{"before-player":{"regular":{"default":"R-I-2120168-1"}}},"video_nohost_full_filter_onboarding_enable":1,"video_skeleton_direct_under_player_update":1,"video_instream_player_config_porno":{"vmapScenarioId":119,"category":3,"impId":4,"partnerId":1988486},"video_vh_player_js":0,"video_dzc":1,"video_masthead_ratio":"180,4","video_searchdata_scheme":1,"video_adv_serp_right_fixed_screens":3,"video_single_vh_iframe":1,"velocity_delay_metrika":1,"video_viewer_desktop_visible_header":1,"video_partner_label":1,"video_direct_render_in_viewport":1,"video_skeleton_instream_update":1,"video_resource_loader_load_timeout":6000,"int_tr":1,"video_viewer_catch_sandbox_early_inits":1,"int_newstr_header_tab":1,"mmui_extended_escape_scheme":"searchdata.clips.0.authorname","spok":"id","video_search_grid_direct_repeat":6,"video_direct_config_desktop_search":"search-grid-row:R-I-48058-718:R-I-474674-109,search-grid-head:R-I-2120168-7","init_meta":{"enable-yabs-distr":1,"ask-user-purchase-history":1,"use-src-videoquickp":1,"enable-begemot":1,"enable_masthead":1,"use-src-videop":1,"use-src-videoquickp_misspell":1,"enable_blackbox_multisession":1,"begemot-enable-cancelled-misspell-rtmr":1,"enable_video_iron_fetcher":1,"use-related-only":1,"ask-yandex-io-devices":1,"use-images-device-setup":1,"use-src-imagesp":1,"images-apphost-collections-front":1,"enable_aab_apphost":1,"graph-is-video-search":1,"use-src-imagesp_misspell":1,"use-src-imagesultrap":1,"use-video-apphost-pre-templates":1,"use-src-videop_misspell":1,"use-video-apphost-post-templates":1,"use-src-imagesquickp":1,"enable_video_carousels":"1","restrict-max-docs":"1000","use-images-region-setup":1,"use-post-auto2":1,"use-images-settings-setup":1,"use-src-ugc_favorites":1,"video_vitrina_disable":"0","use-images-user-setup":1,"use-video-pre-search-data":1,"begemot-no-suggest-history":1},"video_depot_viewer_masthead_ssr_only":1,"video_skeleton_direct_organic_update":1,"video_blender":1,"video_search_grid_enable":0,"video_depot_viewer_legacy_counters":1,"video_search_grid_direct_start":3,"video_instream_players_yaru_enable":1,"video_adv_new_show_rules_docs_count":1,"beauty_header_futuris_tab":9,"video_redirect_plug":2,"distr_popup_on":1,"video_disable_serp_dzc":1,"video_direct_pos_id":"R-I-48058-73","dark_theme_desktop_default_pref":"system","video_search_toggle_enable":1,"video_viewer_desktop_blocks":1,"velocity_split_hydration":4,"video_duration_counter_new_format":1,"video_force_grid_on_premordie":1,"video_nohost_full_filter":1,"distr_pcode_off":1,"video_baobab_blockstat":1,"video_thumb_poster_full":1,"video_scrollpages":2,"video_serp_desktop_block_design":1,"video_nohost_youtube_filter":0,"video_viewer_fix_open_player":1,"video_direct_pos":5,"video_direct_viewport_margin_desktop":700},"slots":["1303458,0,24;1296367,0,45;1305891,0,74;1298359,0,10;1299634,0,26;1152684,0,79;1304782,0,82;1288801,0,95;1306225,0,23;1294096,0,31;1300861,0,81;1284066,0,26;1282204,0,53;1294039,0,12;1299272,0,8;1298500,0,82;1296799,0,45;1305723,0,84;1302609,0,9;1301472,0,79;1289139,0,25;1304811,0,95;241534,0,49;260562,0,57;1306147,0,3;1305216,0,66;1292657,0,82;1298284,0,54;1306310,0,62;1300528,0,75;1296145,0,71;1297911,0,87;151171,0,72;1230682,0,92;1281084,0,78;287509,0,70;1299576,0,84;1299588,0,12;1254397,0,60;1288011,0,75;681841,0,10;1300433,0,56"],"isYandexNet":false,"platform":"desktop","isEnLogo":true,"retpath":"https%3A%2F%2Fgs.yandex.com.tr%2Fvideo%2Fpreview%2F11756533187323041002%3Fnomisspell%3D1%26noreask%3D1%26text%3D%25C3%2587isilsel%252BTasar%25C4%25B1m","mordaUrl":"//yandex.com.tr/","videoSearchUrl":"https://gs.yandex.com.tr/video/search?nomisspell=1&noreask=1&text=%C3%87isilsel%2BTasar%C4%B1m","settingsUrl":"https://yandex.com.tr/tune/search/","helpUrl":"https://yandex.com.tr/support/video/","legalUrl":"//legal.yandex.com.tr/termsofuse/","feedbackUrl":"https://yandex.com.tr/support/video/troubleshooting.html","basename":"/video","currentPageName":"previewShort","isYandexApp":false,"isYandexAppAndroid":false,"isYandexAppIos":false,"isAnyYaBro":false,"isAndroid":false,"isHamster":false,"serpid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","backUrl":"//ya.ru","url":"https://gs.yandex.com.tr/video/preview/11756533187323041002?nomisspell=1&noreask=1&text=%C3%87isilsel%2BTasar%C4%B1m","isIntegrationTest":false,"isEndToEndTest":false,"shouldDropLogs":false,"seo":{"url":"https://gs.yandex.com.tr/video/preview/11756533187323041002?nomisspell=1&noreask=1&text=%C3%87isilsel%2BTasar%C4%B1m","title":"CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)","description":"Detaylı Bilgi İçin: Mehmet Selçuk Batal (batalms@gmail.com) Eğitim Dosyaları: https://www.mehmetbata...","image":"http://avatars.mds.yandex.net/get-vthumb/1011597/7fd85fad23b336702ed3a1a61cd69db7/800x450","imageSecureUrl":"https://avatars.mds.yandex.net/get-vthumb/1011597/7fd85fad23b336702ed3a1a61cd69db7/800x450","video":"https://video-preview.s3.yandex.net/SU41SAAAAAA.mp4","videoType":"video/mp4","imageWidth":800,"imageHeight":450,"type":"video"},"isEmbedded":false,"isPumpkin":false,"quasarCsrfToken":"yff3312fc12fbc3b553a6b9ad0bf6407d","reportFeedbackBaseProps":{"initEmail":"","metaFields":{"userAgent":"Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)","userTestids":"1303458,1296367,1305891,1298359,1299634,1152684,1304782,1288801,1306225,1294096,1300861,1284066,1282204,1294039,1299272,1298500,1296799,1305723,1302609,1301472,1289139,1304811,241534,260562,1306147,1305216,1292657,1298284,1306310,1300528,1296145,1297911,151171,1230682,1281084,287509,1299576,1299588,1254397,1288011,681841,1300433","queryText":"Çisilsel+Tasarım","reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","userRegionName":"","userRegionId":"function() {\n return this._region.id;\n }","yandexuid":"4482623731751264357","uid":"0","isChildAccount":false}},"userTestids":"191768,238743,246500,253288,265553,270072,277807,274239,294077,278842,299121,313103,331010,338398,378416,359879,415420,644350,652605,645301,679708,689693,690449,696466,696473,722746,740796,776165,771230,781521,790415,801982,851450,886706,883477,900639,931367,937268,969063,935488,945314,989988,982463,991363,990185,1015567,1011895,1035320,1033956,1035241,1036046,1087297,1089355,1060131,1099741,1071879,1078818,1077703,1116602,1045814,1131637,1144233,1151726,1152703,1156933,1174275,1173000,1167408,1202006,1194718,1221235,1228280,1233754,1239596,1225386,1236230,1227266,1226860,1279793,1279825,1246754,1277457,1281110,1301266,1276447,1289213,1288208,1303458,1298359,1294096,241534,260562","regionId":20815,"isYaRu":false,"shouldUnmountSearchPageInViewer":false,"videoGlobalContext":{"platform":"desktop","isPumpkin":false,"language":"tr","user_time":{"epoch":"1751264367","tz":"America/Louisville","to_iso":"2025-06-30T02:19:27-0400","__is_plain":1},"isQuasarEnabled":false,"isHermione":false,"shouldStubImages":true,"enableVideoPreviewInHermione":false,"reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","tld":"com.tr","isEmbedded":false,"shouldDailyClickoutDzenInSerp":false,"shouldDailyClickoutDzenInViewer":true,"shouldDisableWebp":false,"removeLinkPrefix":"/video","shouldUseHighresPreview":true,"shouldCutSnippetTitle":true,"shouldShowPlusBadge":true,"reportFeedbackBaseProps":{"initEmail":"","metaFields":{"userAgent":"Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)","userTestids":"1303458,1296367,1305891,1298359,1299634,1152684,1304782,1288801,1306225,1294096,1300861,1284066,1282204,1294039,1299272,1298500,1296799,1305723,1302609,1301472,1289139,1304811,241534,260562,1306147,1305216,1292657,1298284,1306310,1300528,1296145,1297911,151171,1230682,1281084,287509,1299576,1299588,1254397,1288011,681841,1300433","queryText":"Çisilsel+Tasarım","reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","userRegionName":"","userRegionId":"function() {\n return this._region.id;\n }","yandexuid":"4482623731751264357","uid":"0","isChildAccount":false}},"deviceDetect":{"OSFamily":"Unknown","isTV":0,"x64":0,"GoogleToolBarVersion":"","MultiTouch":0,"BrowserBase":"","YandexBarVersion":"","isTablet":0,"YandexBar":0,"hasWebOmni":0,"isTouch":0,"hasYandexCamera":0,"isMobile":0,"DeviceKeyboard":"","device":"desktop","TurboAppPlatformVersion":"","historySupport":0,"BrowserShellVersion":"","DeviceVendor":"","isBrowser":0,"hasFlash":0,"MailRuSputnikVersion":"","isSameSiteSupported":0,"BrowserBaseVersion":"","BrowserVersionRaw":"","hasWebVert":0,"DeviceId":"","error":"","MailRuAgent":0,"ScreenWidth":0,"inAppBrowser":0,"hasHTML5":0,"isEmulator":0,"J2ME":0,"MailRuAgentVersion":"","BrowserEngineVersionRaw":"537.36","isRobot":1,"__is_plain":1,"BrowserEngineVersion":"0537.0036","BrowserName":"","DeviceModel":"","BrowserEngine":"WebKit","DeviceName":"","OSVersionRaw":"","OSName":"","GoogleToolBar":0,"ScreenSize":"","isTurboApp":0,"MailRuSputnik":0,"YaBuildName":"","isWAP":0,"PreferMobile":0,"DesktopMode":0,"BrowserVersion":"","BitsPerPixel":0,"BrowserShell":"","YaGUI":"","isBeta":0,"OSVersion":"","ScreenHeight":0},"nonce":"2277527643352993917105","disableDoc2DocHostLink":true,"shouldHideChannelLink":true,"enableSlowBufferingAlert":false,"enableSlowBufferingAlertDedup":false,"userConnectionRtt":162,"wideOverlay":false,"visibleHeader":true,"hideTabs":true,"animated":false,"isServiceLikeViewer":false,"smartDesktopLayout":true,"isAdvDisabled":false,"shouldShowVideoPlaylistPane":false,"isVideoTranslationSupported":false,"isSummaryDisabled":false,"isPlainHeader":false,"shouldRenderBroSummaryApiContainer":false,"shouldDropLogs":false,"shouldUseBeacon":false,"hasAdBlock":false,"isVerificationMarkDisabled":false,"shouldPlayNonStopForExternal":false,"forceSlowBufferingAlert":false},"shouldShowAdvId":false,"isAdultQuery":false,"classQueryIsPornoWebScore":0.0008613072569,"showSensitive":false,"shouldReplaceHref":false},"user":{"tld":"com.tr","isEuDomain":false,"login":"","passportId":"","isLoggedIn":false,"locationName":"Columbus","isFamily":false,"yandexuid":"4482623731751264357","ugcCsrfToken":"","family":1,"isChild":false},"config":{"skinMode":"system","skin":"light","version":"releases/frontend/video/v1.1618.0#010bc7bb1339e45d9fa498dd5f90620fd9658c43","isGridSupported":false,"advConfig":{"under-player":{"regular":{"default":"R-I-48058-725","mail":"R-A-13411721-6"},"adult":{"default":"R-I-474674-114","mail":"R-A-13426421-6"}},"under-player-lite":{"regular":{"default":"R-I-48058-728"},"adult":{"default":"R-I-474674-103"}},"under-player-old":{"regular":{"default":"R-I-48058-725","mail":"R-A-13411721-6"},"adult":{"default":"R-I-474674-114","mail":"R-A-13426421-6"}},"video-list":{"regular":{"default":"R-I-48058-708","mail":"R-A-13411721-2"},"adult":{"default":"R-I-474674-101","mail":"R-A-13426421-2"}},"search-list":{"regular":{"default":"R-I-48058-715","mail":"R-A-13411721-3"},"adult":{"default":"R-I-474674-108","mail":"R-A-13426421-3"}},"search-grid-row":{"regular":{"default":"R-I-48058-718","mail":"R-A-13411721-4"},"adult":{"default":"R-I-474674-109","mail":"R-A-13426421-4"}},"search-grid-head":{"regular":{"default":"R-I-2120168-7"}},"search-list-right":{"regular":{"default":"R-I-8843654-1"}},"before-player-old":{"regular":{"default":"R-I-2120168-1"}},"before-player":{"regular":{"default":"R-I-2120168-1"}}},"isSkinInitedOnClient":false},"counters":{"params":{"useBeacon":false,"clickHost":"gs.yandex.com.tr/clck","pid":197},"dict":{"viewer":"2921","user":"538","info":"1275","sources":"1500","select":"775","close":"486","open":"842","source":"186","link":"513","click":"882","tech":"690","player":"1242","change":"719","summary":"3410","init":"1309","item":"22","button":"440","shown":"3780","copy":"1276","text":"232","load":"1724","fallback":"2010","channel":"1345","hide":"1656"}},"clips":{"items":{"11756533187323041002":{"videoId":"11756533187323041002","docid":"34-5-8-ZA4834941139A59E2","description":"Detaylı Bilgi İçin: Mehmet Selçuk Batal (batalms@gmail.com) Eğitim Dosyaları: https://www.mehmetbatal.com/egitim/cs... Kullanılan Tema: Zalatta Ltd. Program Adı: Adobe Dreamweaver...","preview":{"posterSrc":"//avatars.mds.yandex.net/get-vthumb/1011597/7fd85fad23b336702ed3a1a61cd69db7/564x318_1","videoSrc":"https://video-preview.s3.yandex.net/SU41SAAAAAA.mp4","videoType":"video/mp4"},"target":"_self","position":"0","reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","summary":{"isFull":true,"fullTextUrl":"/video/result?ask_summarization=1&numdoc=1&noreask=1&nomisspell=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=videoid:11756533187323041002","teaser":[{"list":{"type":"unordered","items":["Bu video, bir eğitmen tarafından sunulan, Dreamweaver programında CSS kullanarak web sayfası tasarımı yapma sürecini adım adım gösteren kapsamlı bir eğitim içeriğidir.","Video, web sayfası tasarımının temel aşamalarını kapsamaktadır: yeni HTML sayfası oluşturma, CSS stilleri tanımlama, logo ve menü oluşturma, yatay menü düzenleme, içerik bölümlerini yan yana yerleştirme, footer oluşturma ve linklerin biçimlendirilmesi. Eğitmen, insert paneli, properties paneli ve CSS styles panelini kullanarak, div etiketleri, float özelliği, margin, padding, border ve border-radius gibi CSS özellikleriyle sayfa yapısını adım adım oluşturuyor.","Eğitim boyunca, web sayfasının üst kısmından başlayarak alt kısmına kadar tüm bölümler (header, content, footer) detaylı olarak ele alınmakta ve her adımda tarayıcıda test edilerek sayfanın son haline bakılmaktadır. Ayrıca, CSS3 ile gelen \"border-radius\" özelliğinin kullanımı ve resimlere link verme gibi modern web tasarım teknikleri de gösterilmektedir."]},"endTime":3884,"title":"Dreamweaver ile CSS Kullanarak Web Sayfası Tasarımı Eğitimi","beginTime":0}],"fullResult":[{"index":0,"title":"CSS ile Web Sayfası Oluşturma Giriş","list":{"type":"unordered","items":["Bu eğitimde CSS ile web sayfası oluşturma konusu öğretilmektedir.","Hazırlanacak sayfanın arka planında bir resim bulunacak ve ana içerik beyaz zemin üzerine yer alacaktır.","Ana içerik alanında logo, menü, banner, çizgi ve üç adet yan yana kutu bulunacaktır."]},"beginTime":0,"endTime":41,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=0&ask_summarization=1"},{"index":1,"title":"Dreamweaver'da Yeni Sayfa Oluşturma","list":{"type":"unordered","items":["Dreamweaver programında File menüsünden New seçeneği ile yeni bir HTML dökümanı oluşturulur.","Sayfa kaydedildikten sonra title seçeneği ile pencere başlığı \"CSS ile web sayfası oluşturma\" olarak değiştirilir.","CSS ile web sayfası oluştururken insert paneli, properties paneli ve CSS styles paneli üç ana panel kullanılır."]},"beginTime":41,"endTime":129,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=41&ask_summarization=1"},{"index":2,"title":"CSS Stil Dosyası Oluşturma","list":{"type":"unordered","items":["Body etiketi için yeni CSS kuralı tanımlanırken \"base on your selection\" seçeneği ve \"new style sheet file\" seçeneği seçilir.","Stil dosyası kaydedilirken dosya adı \"style\" olarak verilir.","Body etiketi için zemin resmi eklenir ve \"repeat\" seçeneği ile hem yatayda hem dikeyde tekrar etmesi sağlanır."]},"beginTime":129,"endTime":225,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=129&ask_summarization=1"},{"index":3,"title":"Ana İçerik Alanı Oluşturma","list":{"type":"unordered","items":["Insert panelinden \"Insert div tag\" ile yeni bir div etiketi eklenir ve id'si \"container\" olarak belirlenir.","Div id'si Türkçe karakter içeremez ve birden fazla kelime içeriyorsa boşluk yerine alt çizgi veya çizgi kullanılmalıdır.","Container div için CSS kuralı tanımlandığında, genişlik 980 piksel, yükseklik auto, arka plan rengi beyaz olarak ayarlanır."]},"beginTime":225,"endTime":347,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=225&ask_summarization=1"},{"index":4,"title":"Div Özelliklerini Düzenleme","list":{"type":"unordered","items":["Div'in sayfanın ortasında görüntülenmesi için sağdan ve soldan marjin değeri \"auto\" olarak ayarlanır.","İçeriklerin div'in içinde belirli boşluklarda yer alması için padding değeri 10 piksel olarak belirlenir.","Div'e çerçeve eklemek için border kategorisinde style \"solid\", width 1 piksel ve color gri olarak ayarlanır."]},"beginTime":347,"endTime":456,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=347&ask_summarization=1"},{"index":5,"title":"Üst Kısım ve Menü Oluşturma","list":{"type":"unordered","items":["Üst kısımda logo ve menü alanı için önce \"header\" div'i oluşturulur ve genişlik 980 piksel, yükseklik 150 piksel olarak ayarlanır.","Logo alanı için \"logo\" div'i oluşturulur, genişlik 189 piksel, yükseklik 150 piksel olarak belirlenir ve logo resmi eklenir.","Menü alanı için \"menu\" div'i oluşturulur, genişlik 790 piksel, yükseklik 40 piksel olarak ayarlanır ve arka plan resmi eklenir."]},"beginTime":456,"endTime":687,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=456&ask_summarization=1"},{"index":6,"title":"Div'leri Yan Yana Yerleştirme","list":{"type":"unordered","items":["Div'leri yan yana yerleştirmek için float (akış) değeri kullanılır.","Logo ve menü div'leri yan yana gelmesi için her ikisinin de float değeri \"left\" olarak ayarlanır.","Birden fazla div'in yan yana gelmesi için tüm div'lerin float değeri mutlaka belirlenmelidir."]},"beginTime":687,"endTime":756,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=687&ask_summarization=1"},{"index":7,"title":"Menü Oluşturma ve Düzenleme","list":{"type":"unordered","items":["Menü div'i logoya tam olarak ortalanacak şekilde yukarıdan 55 piksel aşağıda konumlandırılıyor.","Menü, properties panelindeki \"anordlist\" seçeneği ile sırasız liste olarak oluşturuluyor.","Menü elemanları (kurumsal, menü, şubeler, z kafe, medya, franchising, iletişim) oluşturulup her birine bağlantı veriliyor."]},"beginTime":765,"endTime":923,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=765&ask_summarization=1"},{"index":8,"title":"CSS Biçimlendirmeleri","list":{"type":"unordered","items":["Menü elemanlarının iç ve dış boşlukları sıfırlanıyor ve liste elemanlarının başındaki simgeler kaldırılıyor.","A etiketleri için genişlik (110 piksel), yükseklik (40 piksel) belirleniyor ve float özelliği ile yan yana yerleştiriliyor.","Yazı tipi biçimlendirmeleri yapılıyor: alt çizgiler kaldırılıyor, yazı rengi yeşil, üzerine geldiğinde koyu yeşil oluyor ve yazı tipi kalın (bold) yapılıyor."]},"beginTime":923,"endTime":1124,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=923&ask_summarization=1"},{"index":9,"title":"Menü Hizalama ve Hover Efekti","list":{"type":"unordered","items":["Menü (ul etiketi) soldan 20 piksel içeride konumlandırılıyor ve yazılar yatay olarak ortalanıyor.","Menü elemanlarının dikeyde de ortalanması için satır yüksekliği (line height) kutunun yüksekliğiyle aynı (40 piksel) yapılıyor.","Menü elemanlarına hover efekti ekleniyor: üzerine geldiğinde yazı rengi siyah oluyor."]},"beginTime":1124,"endTime":1297,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1124&ask_summarization=1"},{"index":10,"title":"Clear Div ve Banner Ekleme","list":{"type":"unordered","items":["Flot kullanıldıktan sonra clear div eklenmesi gerekiyor, bu sayede akış temizleniyor.","Header div'in ardından clear div ekleniyor ve clear özelliği \"both\" olarak ayarlanıyor.","Banner alanı için yeni bir div oluşturuluyor, genişlik 980 piksel, yükseklik 303 piksel olarak belirleniyor ve içine resim ekleniyor."]},"beginTime":1297,"endTime":1469,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1297&ask_summarization=1"},{"index":11,"title":"Gölgeli Resim Ekleme","list":{"type":"unordered","items":["Orijinal görüntüde resmin altında gölge ve boşluk bulunuyor, sayfamızda henüz gölge yok.","Banner dibine çift tıklanarak box kategorisinden margin top değeri 10 piksel olarak ayarlanıyor.","Gölge resmi background kategorisinden eklendiği ve background position y değerine bottom seçildiği zaman resmin altına yerleştiriliyor."]},"beginTime":1476,"endTime":1600,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1476&ask_summarization=1"},{"index":12,"title":"Gölgeli Alanı Düzenleme","list":{"type":"unordered","items":["Gölgeli alanın görünmesi için banner divine girip box kategorisinden padding bottom değerine 12 piksel vererek div'in yüksekliğini artırıyoruz.","Tarayıcı test simgesine tıklandığında logonun altında boşluk ve banner resmin altında gölge resminin geldiğini görüyoruz."]},"beginTime":1600,"endTime":1669,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1600&ask_summarization=1"},{"index":13,"title":"Çizgi Alanı Ekleme","list":{"type":"unordered","items":["Insert panelinden insert div tag seçeneği ile yeni bir div ekleniyor ve ismi \"divider\" olarak belirleniyor.","Box kategorisinden div'in genişliği 980 piksel, yüksekliği 26 piksel olarak ayarlanıyor.","Div'in üst ve altına 10 piksel boşluk verilerek diğer resimlerle birbirine yapışmaması sağlanıyor."]},"beginTime":1669,"endTime":1810,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1669&ask_summarization=1"},{"index":14,"title":"Yan Yana Kutular Oluşturma","list":{"type":"unordered","items":["Üç adet yan yana kutu için önce bunları kapsayan bir \"content\" div'i oluşturuluyor.","Content div'inin genişliği 980 piksel, yüksekliği 200 piksel olarak belirleniyor.","İçerisine \"content left\" isimli div ekleniyor, genişliği 300 piksel, yüksekliği 200 piksel olarak ayarlanıyor."]},"beginTime":1810,"endTime":2025,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1810&ask_summarization=1"},{"index":15,"title":"Div'in Düzenlenmesi","list":{"type":"unordered","items":["Content left div'inin çerçevesi için border kategorisinden çizgi tipi solid, kalınlık 1 piksel ve gri renk seçiliyor.","Arka plan rengi açık renk olarak belirleniyor.","Çerçeve eklenmesi sonucu div'in yüksekliği 2 piksel arttığı için, div'in yüksekliği 2 piksel azaltılarak yerine oturtuluyor."]},"beginTime":2025,"endTime":2126,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2025&ask_summarization=1"},{"index":16,"title":"Div Etiketleri Oluşturma","list":{"type":"unordered","items":["\"Insert div tag\" komutuyla yeni div etiketleri oluşturuluyor ve \"after tag\" seçeneğiyle hangi etiketten sonra ekleneceği belirleniyor.","İlk div etiketi \"count left\", ikinci div etiketi \"count center\" olarak adlandırılıyor ve CSS kuralları tanımlanıyor.","Üçüncü div etiketi \"count right\" olarak adlandırılıyor ve CSS kuralları ile genişlik ve yükseklik değerleri atanıyor."]},"beginTime":2128,"endTime":2246,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2128&ask_summarization=1"},{"index":17,"title":"Div'leri Yan Yana Getirme","list":{"type":"unordered","items":["Div'lerin alt alta gelmesinin sebebi, div'lerin varsayılan olarak her birinin bir satıra denk gelmesi.","Div'leri yan yana getirmek için her üç div'in \"float\" (akış) değerini \"left\" olarak ayarlamak gerekiyor.","Div'ler yan yana geldikten sonra, ortadaki div'e \"margin\" değeri verilerek sol ve sağdan 20 piksel boşluk oluşturuluyor."]},"beginTime":2246,"endTime":2370,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2246&ask_summarization=1"},{"index":18,"title":"Div'lerin Boyut ve Konum Ayarları","list":{"type":"unordered","items":["Üç div'in genişliklerinin toplamı ve aralara verilen boşlukların toplamı, toplam alan genişliğini veriyor.","Eğer div'lerin toplam genişliği alan genişliğinden fazlaysa, son div alt satıra düşer.","Content right div'ının genişliği 341 piksel yapıldığında sığmadığı için alt satıra düşüyor, sonra tekrar 340 piksel'e düşürülüyor."]},"beginTime":2370,"endTime":2433,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2370&ask_summarization=1"},{"index":19,"title":"İçerik Ekleme ve Düzenleme","list":{"type":"unordered","items":["Content right div'ına \"franchising\" isimli resim ekleniyor, count center div'ına \"ürün\" isimli resim ekleniyor.","Content left div'ına haber başlığı ve özeti yazısı ekleniyor.","Yazıların boyutu 14 piksel'e ayarlanıyor ve \"justify\" seçeneğiyle her iki yana yaslanıyor."]},"beginTime":2433,"endTime":2703,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2433&ask_summarization=1"},{"index":20,"title":"Başlık Biçimlendirmesi","list":{"type":"unordered","items":["Haber başlığı altına kesik çizgiler eklemek için başlığın \"border\" özelliği kullanılıyor.","Başlık için ön tanımlı bir başlık formatı (heading) seçiliyor.","Başlığın font size'ı 14 piksel'e ayarlanıyor ve rengi değiştiriliyor."]},"beginTime":2703,"endTime":2761,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2703&ask_summarization=1"},{"index":21,"title":"HTML Etiketlerinin Biçimlendirilmesi","list":{"type":"unordered","items":["Headingler (h1'den h6'ya kadar) ve sıralı/sırasız listelerin (ul ve ol) varsayılan padding ve marjin değerleri vardır, bunları sıfırlamak veya kendimize göre biçimlendirmek gerekir.","Padding (iç boşluk) ve marjin (dış boşluk) değerleri vererek etiketlerin boşlukları ayarlanabilir."]},"beginTime":2778,"endTime":2813,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2778&ask_summarization=1"},{"index":22,"title":"Border Özelliklerinin Ayarlanması","list":{"type":"unordered","items":["Border (çerçeve) özelliği \"same for all\" seçeneği kaldırılarak sadece alt çizgi için ayarlanabilir.","Border stilini (none, dotted, dashed, solid, double), genişliğini (width) ve rengini (color) ayarlayabilirsiniz.","Border oluşturmak için style, width ve color değerlerinden herhangi biri eksikse çerçeve oluşturulmaz."]},"beginTime":2813,"endTime":2907,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2813&ask_summarization=1"},{"index":23,"title":"Padding ve Temizleme Div'i","list":{"type":"unordered","items":["Border yazıya yapışık görünüyor ise, padding-bottom değeri ayarlanarak (örneğin 5 piksel) çizgi yazıdan uzaklaştırılabilir.","Float özelliğini kullandığımız için clear div (temizleme div'i) oluşturmak gerekir.","Clear div için box kategorisinde clear both seçeneği kullanılır, bu her yöndeki float'ları temizler."]},"beginTime":2907,"endTime":3052,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2907&ask_summarization=1"},{"index":24,"title":"Footer Div'i Oluşturma","list":{"type":"unordered","items":["Footer div'i oluşturmak için insert > live tag seçeneği kullanılır ve clear content div'inden sonra yerleştirilir.","Footer div'inin genişliği 980 piksel, yüksekliği 30 piksel olarak ayarlanır.","Yazı özellikleri için font size 12 piksel, rengi koyu gri ve font weight bold (kalın) olarak belirlenir."]},"beginTime":3052,"endTime":3156,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3052&ask_summarization=1"},{"index":25,"title":"İçerik Ortalama ve Düzenleme","list":{"type":"unordered","items":["Yazı div'inin içerisinde ortalamak için line-height değerini div'in yüksekliğiyle aynı (30 piksel) yapmak gerekir.","Divider div'inin altına 20 piksel boşluk eklemek için margin-bottom değeri ayarlanır.","Footer div'inin üstten 10 piksel boşluk eklemek için margin-top değeri ayarlanır."]},"beginTime":3156,"endTime":3267,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3156&ask_summarization=1"},{"index":26,"title":"CSS ile Köşe Yuvarlatma","list":{"type":"unordered","items":["CSS3 ile gelen önemli bir özellik olan köşe yuvarlatma özelliği kullanılıyor.","\"count left\" isimli div'in köşelerine \"border-radius: 5px;\" değeri verilerek yuvarlatma işlemi yapılıyor.","Ana içerik div'i için \"border-radius: 10px;\" değeri verilerek daha fazla yuvarlatma uygulanıyor."]},"beginTime":3269,"endTime":3448,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3269&ask_summarization=1"},{"index":27,"title":"Resimlere ve Yazıya Link Verme","list":{"type":"unordered","items":["Resimlere link vermek için properties panelindeki link seçeneğine açılacak sayfanın adresi yazılıyor.","Harici bir web sayfasına link verildiğinde \"target\" seçeneğinden \"blank\" seçilerek yeni sayfada açılması sağlanıyor.","Yazıya link verildiğinde varsayılan olarak mavi renk ve alt çizgi alıyor, bunu CSS ile biçimlendirerek koyu gri renk ve alt çizgisiz hale getiriyoruz."]},"beginTime":3448,"endTime":60,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3448&ask_summarization=1"},{"index":28,"title":"Link Üzerine Gelindiğinde Değişiklikler","list":{"type":"unordered","items":["Link üzerine gelindiğinde değişiklik yapmak için CSS'de \"a:hover\" seçeneği kullanılıyor.","\"a:hover\" seçeneğine rengi kırmızı olarak ayarlanarak link üzerine geldiğinde renk değişmesi sağlanıyor.","Link üzerine geldiğinde el işareti çıkması ve ipucu satırı görüntülenmesi sağlanıyor."]},"beginTime":60,"endTime":143,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=60&ask_summarization=1"},{"index":29,"title":"Sayfa Yapısı Özeti","list":{"type":"unordered","items":["Sayfaya arka plan resmi eklenmiş, beyaz bir div eklenerek içeriği düzenlenmiş.","Header div'i oluşturulmuş, logoyu ve menü div'i yan yana getirmek için \"float: left\" kullanılmış.","Banner div'i eklenmiş, içine resim yerleştirilmiş ve gölge efekti uygulanmış.","İçerik bölümü için üç div yan yana getirilmiş, köşeleri yuvarlatılmış ve zemin rengi değiştirilmiş.","Food alanı oluşturulmuş, içine link eklenmiş ve link üzerine gelindiğinde değişiklikler yapılmış."]},"beginTime":143,"endTime":3864,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=143&ask_summarization=1"}],"linkTemplate":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=%%timestamp%%&ask_summarization=1"},"isAdultDoc":false,"relatedParams":{"text":"CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)","related_orig_text":"Çisilsel+Tasarım","related_porno":false,"related_short":true,"related_less_3m_off":true,"client":"d2d","no_cnt":1,"related_src":"serp","related":"{\"porno\":false,\"vfp\":1,\"orig_text\":\"Çisilsel+Tasarım\",\"url\":\"http:\\/\\/www.youtube.com\\/watch?v=9yHR_JFBnqY\",\"src\":\"serp\",\"rvb\":\"EhYKFDExNzU2NTMzMTg3MzIzMDQxMDAyGhYKFDExNzU2NTMzMTg3MzIzMDQxMDAyWhQxMTc1NjUzMzE4NzMyMzA0MTAwMmq9DBIBMBgAIkUaMQAKKmhoZGx3eXRoeHN5amRrbGRoaFVDUWhtdHJveVNXdldlR2hMbFZnSjNvURICABIqEMIPDxoPPxOsHoIEJAGABCsqiwEQARp4gf_y-P_9AwD49_MNBwf8AQcBB_r4__8A7Qn_BggAAAAH-wgB-wEAAPvy9v7_AAAA__L_-Pj-AQAGBf37-wAAAAz6-fz-AAAA-fr1Df8AAAD8_AoEA_8AAAz-_QEAAAAABg4ADf4AAAAD_PEFAAAAAPTr-AUAAAAAIAAtlD7eOzgTQAlITlACKoQCEAAa8AFuDev-2QoTAcjlBwDk-eUAgSIK_kcu_wBXBu4BG-wwAPcM-wDv8OYAOR8bAOMQM_8f5_z_xv8NAcDxEAAQCNsA6xzzACPbCgAyG_T_DN_8_8_49P795wIAvwcIAScLAP3K69X9AAsABOj8BQEfDu0BEAr2AQsY5QML7_P9JPsABiIYFP4H5h_7I-vt_x0zHADB6w4B_t73BPX37wLjH9sBDBAA_ufj8P8kCwcN7iHzA9Pu-PgNCf8J9ez-_PkV2_0QFO77KFLzDSYt9wXnJBb4AQUDCuUI--8G-fD9yvMA_iIP6wMJOvv_7uIFAOQE_wMgAC3_IR07OBNACUhhUAIqzwcQABrAB6cgv74tk8Y8KRAsvf0cGTwrupq8OzNiOy6pn70DC7u8U_BvvD9zRj4O7jO9lvl9O7Pwdb7H0Ja8RWRAOT0pcz6UwOa79XIOPQcJ8b1woWG8js2Ou79rq7wnsgE8KV36PECKOj0sE1k8LngMvSC0Lj4TLyq9vahdPExUz70R7sS8w8RVPPj5hD25dho7eo8OuyWPjD36Rx88MhZSPeYDQj72PU-9RwEBu9C35b1otmY9TarwOrHh6b00XC69rBJ2POGE-LwrDaE8ihmGugJ-HT6tORs9WbX1vFVoQD4xd9I83myYvIwFL73LNku9cLrhupV75ryx6Cw9dKA9vH7FCr5PIAy9okbfO5FryT2titC9mpSCPB7Sqb0W8s46XjKpPL4_FL1g_WS9j6m7PAl8bz0mYwa9SVlQvG_KprxZYq88YqylPGkStj0lIdG9d1dqO3qJ1rxmWWY93kyWPAm70Tscts0973pEvDg8g72TuD295duxvD_jAj4FGQG886FVPM8DDj3feTi9Sw-3OxJbm73EYg89GSkIPOC82L13YYC9Pn0CvGMvnz0m_6M9uGI1vF6ZPD2ThGm82wCHvNtSx7zk0Jw9EobguiEeiT2grmk9QDgZPH-ZubtcQnm9s64XvNpqQL2xfwm8VIupOciSrr0Nuu87r_AJvE8EsbzgGFk5ePHZu8CQerwg0QS-jRIWuqsvsb13-8e8pS2puOx9pD1Yy509vs64uovD2b0VCsc8yvweOtScPD2zzJc9jLDOuGE2IT7vrg49XoAUuIEKQj0P1RA8Yc0zuF74XL2Ngrs8psFaN8HSELz9ky48vauLOS2lOD3MGcC8B-mMOSCYkz02gw274hrzOboQm72VJ8C9DtEfORGTC71biIQ8EP_KOFAQxjyADlO9G4E1ucPdk7vaBLO932EMuf6wSjzEIBW96bEHNw9SJrxg7s26QlgnOPPLAD02CpS9WejoOMvtYrtOrYg8wMO8txe-eT1_VK49OTHVOOAbHLxOtQa-Y2-tuFjciT2XfS09D2ghtW6mAr7o24I8B9nxuOaKpz2cFQE-eWQjN5incz23as28DvYZuO4d2jwcGbW8n5Rst5XXJTxiEWM9ZAfAOBIykDzEgzw9isWjN4kvbry0x8u9PPuFOMikdbxy7yu8oIHxtz32zrx9H8497BZ1OM6O1D1Gvww9OiwSuOoHdT1kjFq53-FEt3lc1Dye6zs9TpSbOBt31DzTJ2M9pTSguJ4s0DyI1f89Xn7oNyg1qrwz3CC9FZJMNiAAOBNACUhtUAEqcxAAGmAl_wAju_z52-YKBB4jAfIx-vf1Baf3__CyAKZvsgv1EPybBSsAJxUGAZwAAAAhHxL3KwAIfurE4N3AROuB6Rj5Hl4D_eMAVBIMRw06DwBC7SD-MvkA3i7LMFC8708mGu8gAC2QWxI7OBNACUhvUAIwCTgBSgBSCQgPEJICGAAwAWAAaAA,\"}","related_url":"http://www.youtube.com/watch?v=9yHR_JFBnqY","parent-reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","related_vfp":1,"relatedVideo":"yes"},"cwidth":1210,"cheight":720,"cratio":1.68055,"dups":["11756533187323041002"],"episode":0,"season":0,"isEmbedOnly":false,"greenHost":"YouTube","hasTranslation":true,"contentTypeId":null}},"dups":{"11756533187323041002":{"videoId":"11756533187323041002","title":"CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)","cleanTitle":"CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)","host":{"title":"YouTube","href":"http://www.youtube.com/v/9yHR_JFBnqY","playerUri":"\u003ciframe src=\"//www.youtube.com/embed/9yHR_JFBnqY?enablejsapi=1&wmode=opaque\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"1\" allow=\"autoplay; fullscreen; accelerometer; gyroscope; picture-in-picture\" aria-label=\"Video\">\u003c/iframe>","playerId":"youtube","providerName":"youtube.com","sourceHost":"www.youtube.com","name":"youtube.com","secondPart":{"type":"CHANNEL","id":"d3d3LnlvdXR1YmUuY29tO1VDUWhtdHJveVNXdldlR2hMbFZnSjNvUQ==","name":"Mehmet Selçuk Batal","isVerified":false,"subscribersCount":0,"url":"/video/search?channelId=d3d3LnlvdXR1YmUuY29tO1VDUWhtdHJveVNXdldlR2hMbFZnSjNvUQ%3D%3D&how=tm&text=Mehmet+Sel%C3%A7uk+Batal","origUrl":"http://www.youtube.com/@msbatal","a11yText":"Mehmet Selçuk Batal. "},"faviconUrl":"//favicon.yandex.net/favicon/v2/http%3A%2F%2Fyoutube.com?color=255%2C255%2C255%2C0&size=32&stub=1"},"duration":{"value":3884,"text":"1:04:44","a11yText":"Süre 1 saat 4 dakika 44 saniye"},"views":{"text":"280,9bin","shouldShowInSnippet":true,"a11yText":"280,9 bin izleme","totalViews":280926},"date":"21 nis 2012","modifyTime":1334966400000,"isExternal":false,"shouldShowQuasar":false,"player":{"embedUrl":"https://www.youtube.com/embed/9yHR_JFBnqY?autoplay=1&enablejsapi=1&wmode=opaque","playerId":"youtube","videoUrl":"http://www.youtube.com/watch?v=9yHR_JFBnqY","reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","duration":3884},"parentClipId":"11756533187323041002","href":"/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m","rawHref":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m","isEmbedOnly":false}}},"viewer":{"_isInitial":false,"clips":{"items":{"11756533187323041002":{"videoId":"11756533187323041002","docid":"34-5-8-ZA4834941139A59E2","description":"Detaylı Bilgi İçin: Mehmet Selçuk Batal (batalms@gmail.com) Eğitim Dosyaları: https://www.mehmetbatal.com/egitim/cs... Kullanılan Tema: Zalatta Ltd. Program Adı: Adobe Dreamweaver...","preview":{"posterSrc":"//avatars.mds.yandex.net/get-vthumb/1011597/7fd85fad23b336702ed3a1a61cd69db7/564x318_1","videoSrc":"https://video-preview.s3.yandex.net/SU41SAAAAAA.mp4","videoType":"video/mp4"},"target":"_self","position":"0","reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","summary":{"isFull":true,"fullTextUrl":"/video/result?ask_summarization=1&numdoc=1&noreask=1&nomisspell=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=videoid:11756533187323041002","teaser":[{"list":{"type":"unordered","items":["Bu video, bir eğitmen tarafından sunulan, Dreamweaver programında CSS kullanarak web sayfası tasarımı yapma sürecini adım adım gösteren kapsamlı bir eğitim içeriğidir.","Video, web sayfası tasarımının temel aşamalarını kapsamaktadır: yeni HTML sayfası oluşturma, CSS stilleri tanımlama, logo ve menü oluşturma, yatay menü düzenleme, içerik bölümlerini yan yana yerleştirme, footer oluşturma ve linklerin biçimlendirilmesi. Eğitmen, insert paneli, properties paneli ve CSS styles panelini kullanarak, div etiketleri, float özelliği, margin, padding, border ve border-radius gibi CSS özellikleriyle sayfa yapısını adım adım oluşturuyor.","Eğitim boyunca, web sayfasının üst kısmından başlayarak alt kısmına kadar tüm bölümler (header, content, footer) detaylı olarak ele alınmakta ve her adımda tarayıcıda test edilerek sayfanın son haline bakılmaktadır. Ayrıca, CSS3 ile gelen \"border-radius\" özelliğinin kullanımı ve resimlere link verme gibi modern web tasarım teknikleri de gösterilmektedir."]},"endTime":3884,"title":"Dreamweaver ile CSS Kullanarak Web Sayfası Tasarımı Eğitimi","beginTime":0}],"fullResult":[{"index":0,"title":"CSS ile Web Sayfası Oluşturma Giriş","list":{"type":"unordered","items":["Bu eğitimde CSS ile web sayfası oluşturma konusu öğretilmektedir.","Hazırlanacak sayfanın arka planında bir resim bulunacak ve ana içerik beyaz zemin üzerine yer alacaktır.","Ana içerik alanında logo, menü, banner, çizgi ve üç adet yan yana kutu bulunacaktır."]},"beginTime":0,"endTime":41,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=0&ask_summarization=1"},{"index":1,"title":"Dreamweaver'da Yeni Sayfa Oluşturma","list":{"type":"unordered","items":["Dreamweaver programında File menüsünden New seçeneği ile yeni bir HTML dökümanı oluşturulur.","Sayfa kaydedildikten sonra title seçeneği ile pencere başlığı \"CSS ile web sayfası oluşturma\" olarak değiştirilir.","CSS ile web sayfası oluştururken insert paneli, properties paneli ve CSS styles paneli üç ana panel kullanılır."]},"beginTime":41,"endTime":129,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=41&ask_summarization=1"},{"index":2,"title":"CSS Stil Dosyası Oluşturma","list":{"type":"unordered","items":["Body etiketi için yeni CSS kuralı tanımlanırken \"base on your selection\" seçeneği ve \"new style sheet file\" seçeneği seçilir.","Stil dosyası kaydedilirken dosya adı \"style\" olarak verilir.","Body etiketi için zemin resmi eklenir ve \"repeat\" seçeneği ile hem yatayda hem dikeyde tekrar etmesi sağlanır."]},"beginTime":129,"endTime":225,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=129&ask_summarization=1"},{"index":3,"title":"Ana İçerik Alanı Oluşturma","list":{"type":"unordered","items":["Insert panelinden \"Insert div tag\" ile yeni bir div etiketi eklenir ve id'si \"container\" olarak belirlenir.","Div id'si Türkçe karakter içeremez ve birden fazla kelime içeriyorsa boşluk yerine alt çizgi veya çizgi kullanılmalıdır.","Container div için CSS kuralı tanımlandığında, genişlik 980 piksel, yükseklik auto, arka plan rengi beyaz olarak ayarlanır."]},"beginTime":225,"endTime":347,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=225&ask_summarization=1"},{"index":4,"title":"Div Özelliklerini Düzenleme","list":{"type":"unordered","items":["Div'in sayfanın ortasında görüntülenmesi için sağdan ve soldan marjin değeri \"auto\" olarak ayarlanır.","İçeriklerin div'in içinde belirli boşluklarda yer alması için padding değeri 10 piksel olarak belirlenir.","Div'e çerçeve eklemek için border kategorisinde style \"solid\", width 1 piksel ve color gri olarak ayarlanır."]},"beginTime":347,"endTime":456,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=347&ask_summarization=1"},{"index":5,"title":"Üst Kısım ve Menü Oluşturma","list":{"type":"unordered","items":["Üst kısımda logo ve menü alanı için önce \"header\" div'i oluşturulur ve genişlik 980 piksel, yükseklik 150 piksel olarak ayarlanır.","Logo alanı için \"logo\" div'i oluşturulur, genişlik 189 piksel, yükseklik 150 piksel olarak belirlenir ve logo resmi eklenir.","Menü alanı için \"menu\" div'i oluşturulur, genişlik 790 piksel, yükseklik 40 piksel olarak ayarlanır ve arka plan resmi eklenir."]},"beginTime":456,"endTime":687,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=456&ask_summarization=1"},{"index":6,"title":"Div'leri Yan Yana Yerleştirme","list":{"type":"unordered","items":["Div'leri yan yana yerleştirmek için float (akış) değeri kullanılır.","Logo ve menü div'leri yan yana gelmesi için her ikisinin de float değeri \"left\" olarak ayarlanır.","Birden fazla div'in yan yana gelmesi için tüm div'lerin float değeri mutlaka belirlenmelidir."]},"beginTime":687,"endTime":756,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=687&ask_summarization=1"},{"index":7,"title":"Menü Oluşturma ve Düzenleme","list":{"type":"unordered","items":["Menü div'i logoya tam olarak ortalanacak şekilde yukarıdan 55 piksel aşağıda konumlandırılıyor.","Menü, properties panelindeki \"anordlist\" seçeneği ile sırasız liste olarak oluşturuluyor.","Menü elemanları (kurumsal, menü, şubeler, z kafe, medya, franchising, iletişim) oluşturulup her birine bağlantı veriliyor."]},"beginTime":765,"endTime":923,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=765&ask_summarization=1"},{"index":8,"title":"CSS Biçimlendirmeleri","list":{"type":"unordered","items":["Menü elemanlarının iç ve dış boşlukları sıfırlanıyor ve liste elemanlarının başındaki simgeler kaldırılıyor.","A etiketleri için genişlik (110 piksel), yükseklik (40 piksel) belirleniyor ve float özelliği ile yan yana yerleştiriliyor.","Yazı tipi biçimlendirmeleri yapılıyor: alt çizgiler kaldırılıyor, yazı rengi yeşil, üzerine geldiğinde koyu yeşil oluyor ve yazı tipi kalın (bold) yapılıyor."]},"beginTime":923,"endTime":1124,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=923&ask_summarization=1"},{"index":9,"title":"Menü Hizalama ve Hover Efekti","list":{"type":"unordered","items":["Menü (ul etiketi) soldan 20 piksel içeride konumlandırılıyor ve yazılar yatay olarak ortalanıyor.","Menü elemanlarının dikeyde de ortalanması için satır yüksekliği (line height) kutunun yüksekliğiyle aynı (40 piksel) yapılıyor.","Menü elemanlarına hover efekti ekleniyor: üzerine geldiğinde yazı rengi siyah oluyor."]},"beginTime":1124,"endTime":1297,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1124&ask_summarization=1"},{"index":10,"title":"Clear Div ve Banner Ekleme","list":{"type":"unordered","items":["Flot kullanıldıktan sonra clear div eklenmesi gerekiyor, bu sayede akış temizleniyor.","Header div'in ardından clear div ekleniyor ve clear özelliği \"both\" olarak ayarlanıyor.","Banner alanı için yeni bir div oluşturuluyor, genişlik 980 piksel, yükseklik 303 piksel olarak belirleniyor ve içine resim ekleniyor."]},"beginTime":1297,"endTime":1469,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1297&ask_summarization=1"},{"index":11,"title":"Gölgeli Resim Ekleme","list":{"type":"unordered","items":["Orijinal görüntüde resmin altında gölge ve boşluk bulunuyor, sayfamızda henüz gölge yok.","Banner dibine çift tıklanarak box kategorisinden margin top değeri 10 piksel olarak ayarlanıyor.","Gölge resmi background kategorisinden eklendiği ve background position y değerine bottom seçildiği zaman resmin altına yerleştiriliyor."]},"beginTime":1476,"endTime":1600,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1476&ask_summarization=1"},{"index":12,"title":"Gölgeli Alanı Düzenleme","list":{"type":"unordered","items":["Gölgeli alanın görünmesi için banner divine girip box kategorisinden padding bottom değerine 12 piksel vererek div'in yüksekliğini artırıyoruz.","Tarayıcı test simgesine tıklandığında logonun altında boşluk ve banner resmin altında gölge resminin geldiğini görüyoruz."]},"beginTime":1600,"endTime":1669,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1600&ask_summarization=1"},{"index":13,"title":"Çizgi Alanı Ekleme","list":{"type":"unordered","items":["Insert panelinden insert div tag seçeneği ile yeni bir div ekleniyor ve ismi \"divider\" olarak belirleniyor.","Box kategorisinden div'in genişliği 980 piksel, yüksekliği 26 piksel olarak ayarlanıyor.","Div'in üst ve altına 10 piksel boşluk verilerek diğer resimlerle birbirine yapışmaması sağlanıyor."]},"beginTime":1669,"endTime":1810,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1669&ask_summarization=1"},{"index":14,"title":"Yan Yana Kutular Oluşturma","list":{"type":"unordered","items":["Üç adet yan yana kutu için önce bunları kapsayan bir \"content\" div'i oluşturuluyor.","Content div'inin genişliği 980 piksel, yüksekliği 200 piksel olarak belirleniyor.","İçerisine \"content left\" isimli div ekleniyor, genişliği 300 piksel, yüksekliği 200 piksel olarak ayarlanıyor."]},"beginTime":1810,"endTime":2025,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=1810&ask_summarization=1"},{"index":15,"title":"Div'in Düzenlenmesi","list":{"type":"unordered","items":["Content left div'inin çerçevesi için border kategorisinden çizgi tipi solid, kalınlık 1 piksel ve gri renk seçiliyor.","Arka plan rengi açık renk olarak belirleniyor.","Çerçeve eklenmesi sonucu div'in yüksekliği 2 piksel arttığı için, div'in yüksekliği 2 piksel azaltılarak yerine oturtuluyor."]},"beginTime":2025,"endTime":2126,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2025&ask_summarization=1"},{"index":16,"title":"Div Etiketleri Oluşturma","list":{"type":"unordered","items":["\"Insert div tag\" komutuyla yeni div etiketleri oluşturuluyor ve \"after tag\" seçeneğiyle hangi etiketten sonra ekleneceği belirleniyor.","İlk div etiketi \"count left\", ikinci div etiketi \"count center\" olarak adlandırılıyor ve CSS kuralları tanımlanıyor.","Üçüncü div etiketi \"count right\" olarak adlandırılıyor ve CSS kuralları ile genişlik ve yükseklik değerleri atanıyor."]},"beginTime":2128,"endTime":2246,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2128&ask_summarization=1"},{"index":17,"title":"Div'leri Yan Yana Getirme","list":{"type":"unordered","items":["Div'lerin alt alta gelmesinin sebebi, div'lerin varsayılan olarak her birinin bir satıra denk gelmesi.","Div'leri yan yana getirmek için her üç div'in \"float\" (akış) değerini \"left\" olarak ayarlamak gerekiyor.","Div'ler yan yana geldikten sonra, ortadaki div'e \"margin\" değeri verilerek sol ve sağdan 20 piksel boşluk oluşturuluyor."]},"beginTime":2246,"endTime":2370,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2246&ask_summarization=1"},{"index":18,"title":"Div'lerin Boyut ve Konum Ayarları","list":{"type":"unordered","items":["Üç div'in genişliklerinin toplamı ve aralara verilen boşlukların toplamı, toplam alan genişliğini veriyor.","Eğer div'lerin toplam genişliği alan genişliğinden fazlaysa, son div alt satıra düşer.","Content right div'ının genişliği 341 piksel yapıldığında sığmadığı için alt satıra düşüyor, sonra tekrar 340 piksel'e düşürülüyor."]},"beginTime":2370,"endTime":2433,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2370&ask_summarization=1"},{"index":19,"title":"İçerik Ekleme ve Düzenleme","list":{"type":"unordered","items":["Content right div'ına \"franchising\" isimli resim ekleniyor, count center div'ına \"ürün\" isimli resim ekleniyor.","Content left div'ına haber başlığı ve özeti yazısı ekleniyor.","Yazıların boyutu 14 piksel'e ayarlanıyor ve \"justify\" seçeneğiyle her iki yana yaslanıyor."]},"beginTime":2433,"endTime":2703,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2433&ask_summarization=1"},{"index":20,"title":"Başlık Biçimlendirmesi","list":{"type":"unordered","items":["Haber başlığı altına kesik çizgiler eklemek için başlığın \"border\" özelliği kullanılıyor.","Başlık için ön tanımlı bir başlık formatı (heading) seçiliyor.","Başlığın font size'ı 14 piksel'e ayarlanıyor ve rengi değiştiriliyor."]},"beginTime":2703,"endTime":2761,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2703&ask_summarization=1"},{"index":21,"title":"HTML Etiketlerinin Biçimlendirilmesi","list":{"type":"unordered","items":["Headingler (h1'den h6'ya kadar) ve sıralı/sırasız listelerin (ul ve ol) varsayılan padding ve marjin değerleri vardır, bunları sıfırlamak veya kendimize göre biçimlendirmek gerekir.","Padding (iç boşluk) ve marjin (dış boşluk) değerleri vererek etiketlerin boşlukları ayarlanabilir."]},"beginTime":2778,"endTime":2813,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2778&ask_summarization=1"},{"index":22,"title":"Border Özelliklerinin Ayarlanması","list":{"type":"unordered","items":["Border (çerçeve) özelliği \"same for all\" seçeneği kaldırılarak sadece alt çizgi için ayarlanabilir.","Border stilini (none, dotted, dashed, solid, double), genişliğini (width) ve rengini (color) ayarlayabilirsiniz.","Border oluşturmak için style, width ve color değerlerinden herhangi biri eksikse çerçeve oluşturulmaz."]},"beginTime":2813,"endTime":2907,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2813&ask_summarization=1"},{"index":23,"title":"Padding ve Temizleme Div'i","list":{"type":"unordered","items":["Border yazıya yapışık görünüyor ise, padding-bottom değeri ayarlanarak (örneğin 5 piksel) çizgi yazıdan uzaklaştırılabilir.","Float özelliğini kullandığımız için clear div (temizleme div'i) oluşturmak gerekir.","Clear div için box kategorisinde clear both seçeneği kullanılır, bu her yöndeki float'ları temizler."]},"beginTime":2907,"endTime":3052,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=2907&ask_summarization=1"},{"index":24,"title":"Footer Div'i Oluşturma","list":{"type":"unordered","items":["Footer div'i oluşturmak için insert > live tag seçeneği kullanılır ve clear content div'inden sonra yerleştirilir.","Footer div'inin genişliği 980 piksel, yüksekliği 30 piksel olarak ayarlanır.","Yazı özellikleri için font size 12 piksel, rengi koyu gri ve font weight bold (kalın) olarak belirlenir."]},"beginTime":3052,"endTime":3156,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3052&ask_summarization=1"},{"index":25,"title":"İçerik Ortalama ve Düzenleme","list":{"type":"unordered","items":["Yazı div'inin içerisinde ortalamak için line-height değerini div'in yüksekliğiyle aynı (30 piksel) yapmak gerekir.","Divider div'inin altına 20 piksel boşluk eklemek için margin-bottom değeri ayarlanır.","Footer div'inin üstten 10 piksel boşluk eklemek için margin-top değeri ayarlanır."]},"beginTime":3156,"endTime":3267,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3156&ask_summarization=1"},{"index":26,"title":"CSS ile Köşe Yuvarlatma","list":{"type":"unordered","items":["CSS3 ile gelen önemli bir özellik olan köşe yuvarlatma özelliği kullanılıyor.","\"count left\" isimli div'in köşelerine \"border-radius: 5px;\" değeri verilerek yuvarlatma işlemi yapılıyor.","Ana içerik div'i için \"border-radius: 10px;\" değeri verilerek daha fazla yuvarlatma uygulanıyor."]},"beginTime":3269,"endTime":3448,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3269&ask_summarization=1"},{"index":27,"title":"Resimlere ve Yazıya Link Verme","list":{"type":"unordered","items":["Resimlere link vermek için properties panelindeki link seçeneğine açılacak sayfanın adresi yazılıyor.","Harici bir web sayfasına link verildiğinde \"target\" seçeneğinden \"blank\" seçilerek yeni sayfada açılması sağlanıyor.","Yazıya link verildiğinde varsayılan olarak mavi renk ve alt çizgi alıyor, bunu CSS ile biçimlendirerek koyu gri renk ve alt çizgisiz hale getiriyoruz."]},"beginTime":3448,"endTime":60,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=3448&ask_summarization=1"},{"index":28,"title":"Link Üzerine Gelindiğinde Değişiklikler","list":{"type":"unordered","items":["Link üzerine gelindiğinde değişiklik yapmak için CSS'de \"a:hover\" seçeneği kullanılıyor.","\"a:hover\" seçeneğine rengi kırmızı olarak ayarlanarak link üzerine geldiğinde renk değişmesi sağlanıyor.","Link üzerine geldiğinde el işareti çıkması ve ipucu satırı görüntülenmesi sağlanıyor."]},"beginTime":60,"endTime":143,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=60&ask_summarization=1"},{"index":29,"title":"Sayfa Yapısı Özeti","list":{"type":"unordered","items":["Sayfaya arka plan resmi eklenmiş, beyaz bir div eklenerek içeriği düzenlenmiş.","Header div'i oluşturulmuş, logoyu ve menü div'i yan yana getirmek için \"float: left\" kullanılmış.","Banner div'i eklenmiş, içine resim yerleştirilmiş ve gölge efekti uygulanmış.","İçerik bölümü için üç div yan yana getirilmiş, köşeleri yuvarlatılmış ve zemin rengi değiştirilmiş.","Food alanı oluşturulmuş, içine link eklenmiş ve link üzerine gelindiğinde değişiklikler yapılmış."]},"beginTime":143,"endTime":3864,"href":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=143&ask_summarization=1"}],"linkTemplate":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m&t=%%timestamp%%&ask_summarization=1"},"isAdultDoc":false,"relatedParams":{"text":"CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)","related_orig_text":"Çisilsel+Tasarım","related_porno":false,"related_short":true,"related_less_3m_off":true,"client":"d2d","no_cnt":1,"related_src":"serp","related":"{\"porno\":false,\"vfp\":1,\"orig_text\":\"Çisilsel+Tasarım\",\"url\":\"http:\\/\\/www.youtube.com\\/watch?v=9yHR_JFBnqY\",\"src\":\"serp\",\"rvb\":\"EhYKFDExNzU2NTMzMTg3MzIzMDQxMDAyGhYKFDExNzU2NTMzMTg3MzIzMDQxMDAyWhQxMTc1NjUzMzE4NzMyMzA0MTAwMmq9DBIBMBgAIkUaMQAKKmhoZGx3eXRoeHN5amRrbGRoaFVDUWhtdHJveVNXdldlR2hMbFZnSjNvURICABIqEMIPDxoPPxOsHoIEJAGABCsqiwEQARp4gf_y-P_9AwD49_MNBwf8AQcBB_r4__8A7Qn_BggAAAAH-wgB-wEAAPvy9v7_AAAA__L_-Pj-AQAGBf37-wAAAAz6-fz-AAAA-fr1Df8AAAD8_AoEA_8AAAz-_QEAAAAABg4ADf4AAAAD_PEFAAAAAPTr-AUAAAAAIAAtlD7eOzgTQAlITlACKoQCEAAa8AFuDev-2QoTAcjlBwDk-eUAgSIK_kcu_wBXBu4BG-wwAPcM-wDv8OYAOR8bAOMQM_8f5_z_xv8NAcDxEAAQCNsA6xzzACPbCgAyG_T_DN_8_8_49P795wIAvwcIAScLAP3K69X9AAsABOj8BQEfDu0BEAr2AQsY5QML7_P9JPsABiIYFP4H5h_7I-vt_x0zHADB6w4B_t73BPX37wLjH9sBDBAA_ufj8P8kCwcN7iHzA9Pu-PgNCf8J9ez-_PkV2_0QFO77KFLzDSYt9wXnJBb4AQUDCuUI--8G-fD9yvMA_iIP6wMJOvv_7uIFAOQE_wMgAC3_IR07OBNACUhhUAIqzwcQABrAB6cgv74tk8Y8KRAsvf0cGTwrupq8OzNiOy6pn70DC7u8U_BvvD9zRj4O7jO9lvl9O7Pwdb7H0Ja8RWRAOT0pcz6UwOa79XIOPQcJ8b1woWG8js2Ou79rq7wnsgE8KV36PECKOj0sE1k8LngMvSC0Lj4TLyq9vahdPExUz70R7sS8w8RVPPj5hD25dho7eo8OuyWPjD36Rx88MhZSPeYDQj72PU-9RwEBu9C35b1otmY9TarwOrHh6b00XC69rBJ2POGE-LwrDaE8ihmGugJ-HT6tORs9WbX1vFVoQD4xd9I83myYvIwFL73LNku9cLrhupV75ryx6Cw9dKA9vH7FCr5PIAy9okbfO5FryT2titC9mpSCPB7Sqb0W8s46XjKpPL4_FL1g_WS9j6m7PAl8bz0mYwa9SVlQvG_KprxZYq88YqylPGkStj0lIdG9d1dqO3qJ1rxmWWY93kyWPAm70Tscts0973pEvDg8g72TuD295duxvD_jAj4FGQG886FVPM8DDj3feTi9Sw-3OxJbm73EYg89GSkIPOC82L13YYC9Pn0CvGMvnz0m_6M9uGI1vF6ZPD2ThGm82wCHvNtSx7zk0Jw9EobguiEeiT2grmk9QDgZPH-ZubtcQnm9s64XvNpqQL2xfwm8VIupOciSrr0Nuu87r_AJvE8EsbzgGFk5ePHZu8CQerwg0QS-jRIWuqsvsb13-8e8pS2puOx9pD1Yy509vs64uovD2b0VCsc8yvweOtScPD2zzJc9jLDOuGE2IT7vrg49XoAUuIEKQj0P1RA8Yc0zuF74XL2Ngrs8psFaN8HSELz9ky48vauLOS2lOD3MGcC8B-mMOSCYkz02gw274hrzOboQm72VJ8C9DtEfORGTC71biIQ8EP_KOFAQxjyADlO9G4E1ucPdk7vaBLO932EMuf6wSjzEIBW96bEHNw9SJrxg7s26QlgnOPPLAD02CpS9WejoOMvtYrtOrYg8wMO8txe-eT1_VK49OTHVOOAbHLxOtQa-Y2-tuFjciT2XfS09D2ghtW6mAr7o24I8B9nxuOaKpz2cFQE-eWQjN5incz23as28DvYZuO4d2jwcGbW8n5Rst5XXJTxiEWM9ZAfAOBIykDzEgzw9isWjN4kvbry0x8u9PPuFOMikdbxy7yu8oIHxtz32zrx9H8497BZ1OM6O1D1Gvww9OiwSuOoHdT1kjFq53-FEt3lc1Dye6zs9TpSbOBt31DzTJ2M9pTSguJ4s0DyI1f89Xn7oNyg1qrwz3CC9FZJMNiAAOBNACUhtUAEqcxAAGmAl_wAju_z52-YKBB4jAfIx-vf1Baf3__CyAKZvsgv1EPybBSsAJxUGAZwAAAAhHxL3KwAIfurE4N3AROuB6Rj5Hl4D_eMAVBIMRw06DwBC7SD-MvkA3i7LMFC8708mGu8gAC2QWxI7OBNACUhvUAIwCTgBSgBSCQgPEJICGAAwAWAAaAA,\"}","related_url":"http://www.youtube.com/watch?v=9yHR_JFBnqY","parent-reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","related_vfp":1,"relatedVideo":"yes"},"cwidth":1210,"cheight":720,"cratio":1.68055,"dups":["11756533187323041002"],"episode":0,"season":0,"isEmbedOnly":false,"greenHost":"YouTube","hasTranslation":true,"contentTypeId":null}},"dups":{"11756533187323041002":{"videoId":"11756533187323041002","title":"CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)","cleanTitle":"CSS İle Web Sayfası Tasarımı - Web Tasarım Dersleri (Dreamweaver)","host":{"title":"YouTube","href":"http://www.youtube.com/v/9yHR_JFBnqY","playerUri":"\u003ciframe src=\"//www.youtube.com/embed/9yHR_JFBnqY?enablejsapi=1&wmode=opaque\" frameborder=\"0\" scrolling=\"no\" allowfullscreen=\"1\" allow=\"autoplay; fullscreen; accelerometer; gyroscope; picture-in-picture\" aria-label=\"Video\">\u003c/iframe>","playerId":"youtube","providerName":"youtube.com","sourceHost":"www.youtube.com","name":"youtube.com","secondPart":{"type":"CHANNEL","id":"d3d3LnlvdXR1YmUuY29tO1VDUWhtdHJveVNXdldlR2hMbFZnSjNvUQ==","name":"Mehmet Selçuk Batal","isVerified":false,"subscribersCount":0,"url":"/video/search?channelId=d3d3LnlvdXR1YmUuY29tO1VDUWhtdHJveVNXdldlR2hMbFZnSjNvUQ%3D%3D&how=tm&text=Mehmet+Sel%C3%A7uk+Batal","origUrl":"http://www.youtube.com/@msbatal","a11yText":"Mehmet Selçuk Batal. "},"faviconUrl":"//favicon.yandex.net/favicon/v2/http%3A%2F%2Fyoutube.com?color=255%2C255%2C255%2C0&size=32&stub=1"},"duration":{"value":3884,"text":"1:04:44","a11yText":"Süre 1 saat 4 dakika 44 saniye"},"views":{"text":"280,9bin","shouldShowInSnippet":true,"a11yText":"280,9 bin izleme","totalViews":280926},"date":"21 nis 2012","modifyTime":1334966400000,"isExternal":false,"shouldShowQuasar":false,"player":{"embedUrl":"https://www.youtube.com/embed/9yHR_JFBnqY?autoplay=1&enablejsapi=1&wmode=opaque","playerId":"youtube","videoUrl":"http://www.youtube.com/watch?v=9yHR_JFBnqY","reqid":"1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL","duration":3884},"parentClipId":"11756533187323041002","href":"/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m","rawHref":"/video/preview/11756533187323041002?nomisspell=1&noreask=1&parent-reqid=1751264367201760-17227752764335299391-balancer-l7leveler-kubr-yp-klg-105-BAL&text=%C3%87isilsel%2BTasar%C4%B1m","isEmbedOnly":false}},"loadingStatus":"None"},"internal":{"videoId":"11756533187323041002","sandboxEventPrefix":"sandbox:","sandboxVersion":"0x37b97f62901","isHermione":false,"isEmbedded":false,"from":"yavideo","service":"ya-video","hbPeriod":30,"rknWarnHosts":[""],"table":"video_tech","nonce":"2277527643352993917105","errorList":[],"isAdultAdv":false,"isImportantCommonAdv":false,"shouldShowAdvId":false,"advConfig":{"under-player":{"regular":{"default":"R-I-48058-725","mail":"R-A-13411721-6"},"adult":{"default":"R-I-474674-114","mail":"R-A-13426421-6"}},"under-player-lite":{"regular":{"default":"R-I-48058-728"},"adult":{"default":"R-I-474674-103"}},"under-player-old":{"regular":{"default":"R-I-48058-725","mail":"R-A-13411721-6"},"adult":{"default":"R-I-474674-114","mail":"R-A-13426421-6"}},"video-list":{"regular":{"default":"R-I-48058-708","mail":"R-A-13411721-2"},"adult":{"default":"R-I-474674-101","mail":"R-A-13426421-2"}},"search-list":{"regular":{"default":"R-I-48058-715","mail":"R-A-13411721-3"},"adult":{"default":"R-I-474674-108","mail":"R-A-13426421-3"}},"search-grid-row":{"regular":{"default":"R-I-48058-718","mail":"R-A-13411721-4"},"adult":{"default":"R-I-474674-109","mail":"R-A-13426421-4"}},"search-grid-head":{"regular":{"default":"R-I-2120168-7"}},"search-list-right":{"regular":{"default":"R-I-8843654-1"}},"before-player-old":{"regular":{"default":"R-I-2120168-1"}},"before-player":{"regular":{"default":"R-I-2120168-1"}}},"shouldValidateSandbox":false,"isSSROnlyMastheadEnabled":true,"query":"Çisilsel+Tasarım","queryUriEscaped":"%C3%87isilsel%2BTasar%C4%B1m"},"playbackQueue":{"currentIndex":0,"items":[{"type":"VIDEO","videoId":"11756533187323041002","source":"serp","selectEvent":"click"}]},"related":{"items":[],"pages":[],"loadingStatus":"None","nextPageNum":0,"ncrnd":0}}}