Upload
des
View
224
Download
0
Embed Size (px)
Citation preview
Now we bring you…
客製化網頁與joomla結合應用
主講者:Ring / A.J
Des13.com
鼎益盛網頁設計有限公司
Joomla! CMS管理系統
網頁視覺設計
Flash視覺動畫
CIS平面形象設計
Blog 部落格行銷
經營項目:
自我介紹
SEO 網站優化及關鍵字行銷
電子商務網站
專業主機代理
1
講題大綱: 一.自我介紹 二.css+div介紹 案例分享:純css做的網站,如花蓮縣消防局和i-tale.. 三.國外joomla模板介紹 四.joomla結合客製化網頁設計 案例分享:賽德克麻辣火鍋.自動小園丁.新勝裕號... 五.以花蓮縣消防局為實例介紹joomla版面layout
CSS +DIV 2 什麼是
HTML
網頁內文的資料以
文字編排的方式標示與構成
= 網頁語法
CSS Cascading Style Sheets
1996年由致力推動網頁技術標準化的團體
-- W3C (World Wide Web Consortium)
發表了CSS第一版
= 階層式樣式表
DIV
定義特定範圍,將資訊做視覺化
的分類,讓人一看就能了解的重
要工具,是網頁版面設計的基礎
= 區塊要素
DIV in CSS in HTML
表格式設計:
使用多重TABLE語法
組成複雜的巢狀表格
DIV = 區塊要素
CSS的優勢及必要性:
實施SEO(搜尋引擎最佳化)
符合網頁標準規格
提高可維護性
確保無障礙網頁設計
減輕網路負荷
CSS+DIV 案例分享
CSS與JOOMLA樣板(TEMPLATE)的關係
JOOMLA 典型的樣板架構
Index.php
也就是整體的版面配置
Template.css
定義整體外觀的字型、邊距、標題、
圖像邊框以及項目清單樣式等…
css –
包含所有*.css檔案
joomla+CSS+DIV 案例分享
JOOMLA 3 國外模板介紹
rockettheme.com
templatemonster.com
joomlart.com
JOOMLA
4 結合客製化網頁設計
實際案例分享
客戶自己畫的草圖…
完成的網站 - seediq.com.tw
客製訂購表單 - seediq.com.tw
客製訂購表單 後台 - seediq.com.tw
頂茗創意茶坊 - www.topprootea.com
新勝裕號 www.mame.tw
joomla版面layout 實例:花蓮縣消防局 5
版面確定
確認版面區塊
版面確定
確認版面區塊
Index.php
導入css檔案
Joomla自訂標籤
<jdoc:include type="[類型]" name="[名稱]" />
Index.css
Joomla 後台安裝樣版