PIXNET Logo登入

馬米思個人紀錄站

跳到主文

紀錄有關網頁設計、電腦應用、電腦問題 Firefox,Win7,Adobe AI、PS、DW 相關新聞與資訊 提供網站專案規劃設計|美編行銷設計|繪畫軟體教學|生活攝影教學...等服務

部落格全站分類：生活綜合

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 4月 21 週四 201610:57

  • [重點整理]Effective Navigation Development 用CSS設計下拉式選單

教學影片：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">

(繼續閱讀...)
文章標籤

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

  • 個人分類：學習筆記
▲top
  • 4月 06 週三 201614:29

  • [重點整理]Unlock the Secret to the Lens Flare in Photoshop + English Note

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) 人氣(49)

  • 個人分類：學習筆記
▲top
  • 4月 03 週日 201622:40

  • [重點整理]Tutorials Video from "Envatotuts+" - Understanding the CSS Box Model

  • 2.4 Boxes and Columns - 
    https://webdesign.tutsplus.com/courses/understanding-the-css-box-model/lessons/boxes-and-columns

兩欄式設定
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 

(繼續閱讀...)
文章標籤

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

  • 個人分類：學習筆記
▲top
  • 4月 02 週六 201613:07

  • [重點整理]CSS疑問整理-一個簡單，響應式，流動式導覽教學

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

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

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>皆套用此規則*/       

 

 

(繼續閱讀...)
文章標籤

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

  • 個人分類：學習筆記
▲top
  • 4月 01 週五 201622:43

  • [軟體外掛]Brackets - Brackets-HTML-Templates外掛

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

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

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



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

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

 

(繼續閱讀...)
文章標籤

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

  • 個人分類：學習筆記
▲top
  • 4月 01 週五 201618:35

  • [軟體分享]即見即所得Brackets免費網頁編輯器

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

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

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

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

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

(繼續閱讀...)
文章標籤

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

  • 個人分類：學習筆記
▲top
  • 4月 01 週五 201616:47

  • [重點整理]RWD自適應的小技巧-別忘記Viewport Meta標籤

快捷提示：別忘記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; }

(繼續閱讀...)
文章標籤

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

  • 個人分類：學習筆記
▲top
  • 2月 21 週日 201612:35

  • [重點整理]CSS - How to master CSS 影片教學

div:selection{
color:black;
background-color:yellow;
}
div:first_letter{
font-size:36px
}
div:first-line{
font-size:24px;
color:green;
}
https://youtu.be/Vafp5xr_bxk?t=1h24m


div:first-child::first_letter{
font-size:36px
}
div:first-child::first-line{
font-size:24px;
color:green;
}
https://youtu.be/Vafp5xr_bxk?t=1h25m

Talking about pseudo class & pseudo elements :: detail
https://youtu.be/Vafp5xr_bxk?t=1h29m26s

Talking about text sizing, useing by rem & em,
tell you what's different between this two s
https://youtu.be/Vafp5xr_bxk?t=1h33m

  • rem https://youtu.be/Vafp5xr_bxk?t=1h36m
    1. - Based on the font size of the html elemnt(16px by default)
    2. 依照最前面的標籤html的字級設定，用rem轉換
  • em  https://youtu.be/Vafp5xr_bxk?t=1h39m20s
    1. - Based on the front size of the current elemnet
    2. 依照此標籤的父標籤的字級設定，用em轉換
  • ex 
    1. - Height of the font's lowercase x-height
  • ch
    1. - Width of the font's 0 (zero)character

Module Overview 
https://youtu.be/Vafp5xr_bxk?t=1h48m

範例一
https://youtu.be/Vafp5xr_bxk?t=1h57m30s
body{
width:500px;/*若未寫 則是取決與視窗大小*/
}
#header{
width:100%;/*此處的寬度取決於body*/
height:70px;
background-color:#000;
z-index:10;
position:fixed;/*keep top of the page*/
}
#header li{
display:inline;/*僅用來next to each other*/
}

CSS Box Model
https://youtu.be/Vafp5xr_bxk?t=2h4m14s

(繼續閱讀...)
文章標籤

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

  • 個人分類：CSS
▲top
  • 3月 30 週五 201218:17

  • [教學]DIV+CSS-浮動 基礎教學

DIV基礎教學_浮動_03 

DIV基礎教學_浮動_07

DIV基礎教學_浮動_10

DIV基礎教學_浮動_13

DIV基礎教學_浮動_23

(繼續閱讀...)
文章標籤

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

  • 個人分類：
▲top
  • 3月 30 週五 201217:23

  • [教學]影片轉GIF動畫教學

 影片轉GIF_03

影片轉GIF_06

影片轉GIF_09

影片轉GIF_13

影片轉GIF_16

(繼續閱讀...)
文章標籤

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

  • 個人分類：電腦技巧
▲top
12...6»

廣告點點樂特區

展覽資訊+活動訊息

近期文章

    文章分類

    toggle 軟硬體資訊 (4)
    • 我的電腦有問題 (4)
    • 電腦技巧 (5)
    • Firefox使用技巧 (3)
    • 整理資料 (1)
    toggle 網頁設計 (5)
    • 網站分享 (6)
    • CSS (7)
    • Javascript (6)
    • Flash教學 (1)
    • 學習筆記 (9)
    toggle 發牢騷特區 (2)
    • 其他 (3)
    • 抽獎活動 (1)
    toggle 美術設計 (3)
    • 節慶紀念 (2)
    • 隨手篇 (1)
    • 衣物設計 (1)
    toggle 旅遊記事 (1)
    • 旅遊 (4)
    toggle 事件記錄 (3)
    • 電影觀賞紀錄 (1)
    • 英文學習 (0)
    • 一份敘述 (2)
    • 未分類文章 (1)

    參觀人氣

    • 本日人氣：
    • 累積人氣：

    誰來我家