公告版位

目前分類:學習筆記 (9)

瀏覽方式: 標題列表 簡短摘要

教學影片:Effective Navigation Development

重點語法整理:

置中範例:設定寬度,運用margin使其置中。
!!設置像素寬度,寬度即使縮小視窗也不會改變,
設置百分比寬度,寬度會隨著視窗大小作寬度的比例縮放。
.body-content {
    margin: 0 auto;
    width: 960px;
}

.body-content {
    margin: 0 auto;
    width: 70%;
}

雙class命名運用範例:在html的class以空白間隔開,可以設定雙class命名,方便用於css建立顏色規則
!!需用space空白鍵隔開
HTML
<ul class="subnav purple">

CSS/********** TEXT COLORS **********/
.purple{color: #b58afc;}

下拉式選單重點CSS範例
nav ul.main-nav > li{
    float: left;
    border-left: 1px solid #939393;
    border-right: 1px solid #000000;
    width: 158px;
    height: 57px;
    position: relative;
}
nav ul.main-nav > li > a{
    padding: 8px 6px;
    position: absolute;
    top: 0px;
    left: 0px;

    width: 148px;
    height: 41px;
}
nav ul.main-nav li ul.subnav{
    position: absolute;
    left: -9999px;
    top: 57px;

    background-color: #575757;
    padding: 5px 10px;
    width: 185px;
    border-top: 1px solid #353535;
}
nav ul.main-nav > li:hover ul.subnav{
/*control the subnav move into stage*/
    left: 0;
}

!!!!main-nav在父系設定relative是為了包覆裡面的子元素li>a的absolute讓連結範圍能完整呈現
!!!!在subnav裡面設定abosolute甚至將leftL-9999px;是為了讓下拉式選單隱藏在畫面中,此作法不會讓畫面出現卷軸
然後在nav ul.main-nav > li:hover ul.subnav 這規則中,將下拉式選單叫回畫面中。
 

vmaya 發表在 痞客邦 留言(0) 人氣()

Unlock the Secret to the Lens Flare in Photoshop


有時候當我們想幫照片加上鏡頭反光Len Flare時,會遇上一些限制
解決方法的整理筆記如下:
1.複製欲加上光源效果的現有圖層
2.點選 濾鏡Filter>光源效果Render > 鏡頭反光Len flare
3.新增一個空白圖層
4.填滿黑色
5.點選 濾鏡 > 重覆上個濾鏡 Ctrl+F
6.刪除剛剛為了建立動作5的複製的圖層(已經不需要了)
7.圖層效果 >覆蓋
8.你可以選擇是否更改透明度 Opacity
9.你可以選擇是否設立光源中心點,做旋轉縮放等光源位置移動
10.你可以選擇是否加上 濾鏡 > 高斯模糊Gaussian blur 來淡化光源銳利度 或是使用圖層遮色片Mask 
 
English Note
 

Lens flare 光源效果
attempt 試圖;嘗試 / [əˋtɛmpt]
length 尺寸的
contest 爭奪;與...競賽
I would respond to 作答,回答[+to] / [rɪˋspɑnd]
get over 克服
render 使得;使成為 / [在PS中,是指光源效果]
It's basically gonna say you can't do it, because the blank layer
destructive 破壞的;毀滅性的[+of / to] / [dɪˋstrʌktɪv]
hue 顏色;色彩; / [在PS中,是指色相]
exact 確切的,精確的 / [ɪgˋzækt]
screen [在PS中,是指圖層效果>覆蓋]
saturation 浸透; - [物/化]飽和 [在PS中,是指飽和度] / [͵sætʃəˋreʃən]
intrusive 侵入的,闖入的;打擾的;這裡指不協調的 / [ɪnˋtrusɪv]
episode (整個事情中的) 一個事件 / [ˋɛpə͵sod]
flirt with 一時想到,並非認真考慮 / [flɝt]
Gaussian blur 高斯模糊

see more tutorial from Phlearn Pro Photoshop
https://phlearn.com/product-category/pro-ph
otoshop-tutorials?utm_source=Episode&utm_medium=Description%20-%20Phlearn%20PRO&utm_campaign=Youtube

 

vmaya 發表在 痞客邦 留言(0) 人氣()

兩欄式設定
HTML
<section class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt velit ante, non laoreet est facilisis quis. Fusce eget massa nec magna suscipit finibus ut non lacus. Nam vel aliquam mi, eget rhoncus eros. In malesuada, erat quis accumsan rutrum, risus nunc vulputate ipsum, ut fringilla magna nisi non neque. </p>
</section>

CSS
.column{
      width:380px;
      padding:0 5px;
      float:left;
}
.column:first-of-type{
     margin-right:10px;
}

2.6 Inline Elements
使用 <span> 標籤的屬性,來設定padding,可運用使其內縮首行與擴張行尾。
此屬性與其他Element效果不同。
Examples of inline elements: <span><a><img>

2.7 Box-Sizing
https://webdesign.tutsplus.com/courses/understanding-the-css-box-model/lessons/box-sizing

更清晰的解釋請參考這個網址
http://zh-tw.learnlayout.com/box-sizing.html 

因為 box-sizing 算是個比較新的屬性,
所以你還應該還是要加上我之前在例子中使用的 -webkit- 和 -moz- 前綴(Prefixes),
這樣才能啟用特定瀏覽器實驗中的 CSS 特性。請記得該屬性從 IE8+ 之後就開始支援。

程式碼如下:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

但以上的屬性,並不會包覆margin,只會包覆padding與border的設定。

vmaya 發表在 痞客邦 留言(0) 人氣()

一個簡單,響應式,流動式導覽教學

簡單地說,是要先設計一個小屏幕的界面,然後才設計大屏幕的界面。

http://webdesign.tutsplus.com/zh-hant/articles/a-simple-responsive-mobile-first-navigation--webdesign-6074?ec_unit=dropdown-language
p,
ul {
    margin: 0 0 1.5em;
}
/*表示標籤<p>與<ul>皆套用此規則*/       

 

 

/*shorter clearfix http://nicolasgallagher.com/micro-clearfix-hack/*/
        header:before,
        header:after {
            content:"";
            display:table;
        }
         
        header:after {
            clear:both;
        }
         
        /* For IE 6/7 (trigger hasLayout) */
        header {
            zoom:1;
        }
/*表示標籤<header>上下包圍區塊套用此規則,只要設定這兩個屬性就可以讓高度自動撐開,也無須調整padding與margin,甚至是高度問題,after需設定clear:both*/ 

The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required.Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded”, which introduced the use of both the :before and :after pseudo-elements.
h1.logo a {
    color: #d8d8d8;
    text-decoration: none;

在這區塊,僅針對a去做text-decoration:none;的設定,便是為了將原本超連結時的底線去除。無須另外針對為連結狀態做屬性調整。

a.to_nav {
    float: right;
    color: #fff;
    background: #4e4e4e;
    text-decoration: none;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 22px;
    height: 22px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

在這裡是針對右側menu的按鈕,並做圓角矩形的設定,記得嗎? 
在這一塊的HTML中,教學中並未另外使用DIV進行包覆標籤,
而是直接採用 <a class="to_nav" href="#primary_nav">Menu</a>的方式來表現。

a.to_nav:hover,
a.to_nav:focus {
    color: #1c1c1c;
    background: #ccc;
}

 

另外針對hover與focus做美化的設定。

/*media queries*/
 
@media only screen and (min-width: 768px) {
 
}
當屏幕的寬度只少有768px時,這個 media query 會執行所有在內的樣式設定。注意當中的only是關鍵字,它將確保Internet Explorer 8能正常執行樣式設定。Media queries介紹,請點選此連結

首先,我們必須在 media query 或 css 的開端把它所屬的標籤(.wrapper)設為 position: relative。

只要菜單被設定為 position: absolute,我們需要刪除一些標籤的設定,把列表顯示為 display: inline 和刪除邊框和標籤的距離便可以。當然,不用修改之前定立的 hover 狀態。

有個"頂至"的鏈接 - 還需要嗎?

這樣我們就不用 media query 也能把它刪除:

文章標籤

vmaya 發表在 痞客邦 留言(0) 人氣()

用於省去開啟新檔案時,保留基礎的起始語法
下載 Brackets-HTML-Templates這套外掛
https://github.com/talmand/Brackets-HTML-Templates

打開Brackets這套軟體,點選右側的快捷圖示"擴充功能管理員"

在彈出視窗下方選擇由URL安裝或是直接將下載的ZIP拖拉至方形虛線框形中進行安裝



使用方法
1.必須先點選左側任一個別檔案(非資料夾)
2.上方 編輯>HTML Templates...

3.選擇樣板類別-開啟完成

 

vmaya 發表在 痞客邦 留言(0) 人氣()

這套軟體可自由切換至繁體中文

安裝完以後,也可以透過左側的index.html來學習基本功能

將滑鼠游標停留在html標籤上,按下快捷鍵ctrl+E 便可以立即查看相關的css規則

按下快捷鍵ESC就可以關閉CSS規格顯示視窗

按下快捷鍵 Ctrl + Alt + P 便可以即使預覽,或是按下右上角的閃電圖騰

當即時預覽功能在 HTML 檔案上啟用後,所有連結到的 CSS 檔案也都可以馬上編輯馬上生效。

不過,儲存修改過的 JavaScript 檔案時也會自動重新載入頁面。
我們正在努力讓即時預覽功能支援 JavaScript。
此外,即時預覽現在只能在 Google Chrome 上執行,我們希望將來能支援所有主流的瀏覽器。

也可以開啟強調游標所在行來增強操作性,
透過快捷鍵CTRL+F與CTRL+G來快速轉換到特定標籤與行段

不管在 CSS 或 HTML 中,只要將滑鼠游標移到任何色彩值或是漸變色上,Brackets 就會自動顯示預覽。
對圖片也同樣有用,在 Brackets 裡將滑鼠游標移到圖片連結上,就會自動顯示預覽縮圖。 開啟 CSS 快速編輯器,將滑鼠游標移到 CSS 上的任何一個色彩值上就能看到。 想要預覽漸變色,您也可以在 標籤上開啟 CSS 快速編輯器,移到隨便一個背景圖片 (background-image) 值就能看到。 要試圖片預覽,則是將游標移到前幾段提到的畫面擷圖上就能看到。

甚至 新版本中,也發展出與PSD能成功結合,預覽PSD中的資料,進行快速切版的功能
Extract for Brackets[但須先將PSD上傳]

軟體名稱:Brackets 軟體性質:免費 軟體語言:英文 支援平台:Win/MAC 軟體下載:http://brackets.io/

vmaya 發表在 痞客邦 留言(0) 人氣()

快捷提示:別忘記Viewport Meta標籤
http://webdesign.tutsplus.com/zh-hans/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972?ec_unit=dropdown-language
下列的值可以作為我們的默認設定模版:

< meta name = "viewport" content = "width=device-width, initial-scale=1" >

結論 流動式的網頁佈局設計不僅僅是給那些喜歡調整他們瀏覽器大小的人所用的,
它為的是能滿足不同設備,屏幕和分辨率的需要!當你在做流動式設計的時候,
加入viewport meta標籤,並且在CSS裡面設定@viewport的準則,你就萬事無憂了。

相似的viewport屬性在CSS裡用the @viewport rule進行定義而不是在HTML裡面

@viewport{ zoom: 1.0 ; width : device-width; }

或者,依照我們新的don't specify device width的方法,我們可以如下設置:

@viewport{ zoom: 1.0 ; width : extend-to-zoom; }
因為這個還沒有完全敲定,IE10要求使用有前綴的版本,看上去是這樣的:

@-ms-viewport{ width : extend-to-zoom; zoom: 1.0 ; }
這個是比metatag更為簡潔的方案。現在先嵌入在你的CSS裡面,
保證你的流動式佈局在IE10的”snap mode“裡正常工作,然後關注這個方案的動向。
這個是viewport以後的趨勢。 你可以從Tim Kadlec的文章中讀到更多IE10 Snap Mode and Responsive Design

This post is part of a series called Strange and Unusual HTML.

文章標籤

vmaya 發表在 痞客邦 留言(0) 人氣()

假如我需要把照片的影像尺寸縮小一點
可是我不會Photoshop,
那我的生活照怎麼辦呢?

有一個線上網站叫做JPEGmini

可以幫你做簡單的相片壓縮又不失真

http://www.jpegmini.com/main/shrink_photo 

線上壓縮圖片.jpg

我將這張原本為762Kb的圖壓縮成162KB 
 

vmaya 發表在 痞客邦 留言(0) 人氣()

移機er-webs讓我遇到滿多問題,有些地方也模糊不清,
所以我在er-webs端,先安裝了一個xoops,然後下載需要修改的兩個檔案來作比較。

STEP01.xoops.sql(資料庫匯出)
STEP02.mainfile.php

1.請先在er-webs新增一個資料庫localxoops201
2.將我安裝在localhost的xoops的資料庫匯出,我用owner的身分
3.用editplus打開xoops.sql這個檔案,


STEP01修改如下:
------------------------------------------------------------------------------------------------
A.
13行

-- 資料庫:xoops`



-- 資料庫: `使用者名稱_localxoops201`


B.
83.84.85行

INSERT INTO `xoops_banner` VALUES (1, 1, 0, 1, 0, 'http://localhost/xoops/images/banners/xoops_banner.gif', 'http://www.xoops.org/', 1008813250, 0, '');
INSERT INTO `xoops_banner` VALUES (2, 1, 0, 1, 0, 'http://localhost/xoops/images/banners/xoops_banner_2.gif', 'http://www.xoops.org/', 1008813250, 0, '');
INSERT INTO `xoops_banner` VALUES (3, 1, 0, 1, 0, 'http://localhost/xoops/images/banners/banner.swf', 'http://www.xoops.org/', 1008813250, 0, '');



INSERT INTO `xoops_banner` VALUES (1, 1, 0, 1, 0, 'http://mulanmind.er-webs.com/htdocs/localxoops201/images/banners/xoops_banner.gif', 'http://www.xoops.org/', 1008813250, 0, '');
INSERT INTO `xoops_banner` VALUES (2, 1, 0, 1, 0, 'http://mulanmind.er-webs.com/htdocs/localxoops201/images/banners/xoops_banner_2.gif', 'http://www.xoops.org/', 1008813250, 0, '');
INSERT INTO `xoops_banner` VALUES (3, 1, 0, 1, 0, 'http://mulanmind.er-webs.com/htdocs/localxoops201/images/banners/banner.swf', 'http://www.xoops.org/', 1008813250, 0, '');


C.
1220行

INSERT INTO `xoops_users` VALUES (1, '', 'admin', 'allem@gmail.com', 'http://localhost/xoops/', 'blank.gif', 1300025057, '', '', '', 1, '', '', '', '', '202cb962ac59075b964b07152d234b70', 0, 0, 7, 5, 'bcool_flex', 0.0, 1300462968, 'thread', 0, 1, 0, '', '', '', 0);



INSERT INTO `xoops_users` VALUES (1, '', 'admin', 'allem@gmail.com', 'http://mulanmind.er-webs.com/htdocs/localxoops201', 'blank.gif', 1300025057, '', '', '', 1, '', '', '', '', '202cb962ac59075b964b07152d234b70', 0, 0, 7, 5, 'bcool_flex', 0.0, 1300462968, 'thread', 0, 1, 0, '', '', '', 0);


D.
進入er-webs的後台,打開剛剛新增的資料庫localxoops201,全名為 你的使用者名稱_localxoops201
這部分的修改就完成拉!


STEP02.修改如下
用editplus打開mainfile.php這個檔案
-------------------------------------------------------------------------------------------------------------------------------------------
A.
33.34行

// Example: define('XOOPS_ROOT_PATH', 'C:/AppServ/www/xoops');
define('XOOPS_ROOT_PATH', 'C:/AppServ/www/xoops');



// Example: define('XOOPS_ROOT_PATH', '/home/vol12/er-webs.com/使用者名稱/htdocs/localxoops201');
define('XOOPS_ROOT_PATH', '/home/vol12/er-webs.com/使用者名稱/htdocs/localxoops201');


B.
38.39行

// Example: define('XOOPS_URL', 'http://localhost/xoops');
define('XOOPS_URL', 'http://localhost/xoops');



// Example: define('XOOPS_URL', 'mulanmind.er-webs.com/localxoops201');
define('XOOPS_URL', 'http://mulanmind.er-webs.com/localxoops201');


c.
62-84行

// Database
// Choose the database to be used
define('XOOPS_DB_TYPE', 'mysql');


// Table Prefix
// This prefix will be added to all new tables created to avoid name conflict in the database. If you are unsure, just use the default 'xoops'.
define('XOOPS_DB_PREFIX', 'xoops');


// Database Hostname
// Hostname of the database server. If you are unsure, 'localhost' works in most cases.
define('XOOPS_DB_HOST', 'localhost');


// Database Username
// Your database user account on the host
define('XOOPS_DB_USER', 'owner');


// Database Password
// Password for your database user account
define('XOOPS_DB_PASS', '12345');


// Database Name
// The name of database on the host. The installer will attempt to create the database if not exist
define('XOOPS_DB_NAME', 'xoops');



// Database
// Choose the database to be used
define('XOOPS_DB_TYPE', 'mysql');


// Table Prefix
// This prefix will be added to all new tables created to avoid name conflict in the database. If you are unsure, just use the default 'xoops'.
define('XOOPS_DB_PREFIX', 'xoops');


// Database Hostname
// Hostname of the database server. If you are unsure, 'localhost' works in most cases.
define('XOOPS_DB_HOST', 'MySQL 主機名稱');


// Database Username
// Your database user account on the host
define('XOOPS_DB_USER', '使用者名稱');


// Database Password
// Password for your database user account
define('XOOPS_DB_PASS', '使用者密碼');


// Database Name
// The name of database on the host. The installer will attempt to create the database if not exist
define('XOOPS_DB_NAME', '資料庫名稱全名');


上傳到er-webs你放置xoops檔案的資料夾中。完成拉!

vmaya 發表在 痞客邦 留言(0) 人氣()