只要在 http://placehold.it 後面加上想要的圖片大小 即可以產生向右邊那樣的灰色樣圖
方便你再調整網站版面時快速去看到效果
2016年11月17日 星期四
2016年9月22日 星期四
[文字編輯器]Sublime Text好用套件-Emmet
手動安裝可參考 ：https://www.minwt.com/webdesign-dev/html/11624.html
這邊使用的是sublime2
安裝步驟
1.下載Sublime Text https://www.sublimetext.com/3
2.安裝Package Control
2-1開啟sublime 並開啟Console (位置在最上方的view > Show Console
可以看到下方出現console
Sublime Text 2
import urllib2,os,hashlib; h = '261dd1222b4693ce6d4f85f9c827ac06' + '6d5ab8ebdd020086947172a8a1356bb6'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')2-3 重開
3.安裝Emmet
3-1 開啟package controller (Sublime Text2 > perferences >Package Control)
或快捷鍵(command+shift+p)
3-2 選擇 Package Control:Install Package
選擇第一個( 並非我途中所顯示的那個，因為我已經安裝所以不會顯示)
這個才是正確的Emmet (youtube 截圖 from :https://www.youtube.com/watch?v=8n923UBjV9w)
3-4重開 ！！完成
再來是操作 ，在sublime 開啟 html檔案，以下是簡易的教學影片
輸入 .[class name] 後，按鍵盤的Tab鍵 即可變成
<div class="[class name]"></div>
幫你省下許多時間
更多外掛介紹及教學
http://www.slideshare.net/banPrint/sublime-text-51689543
2016年8月17日 星期三
[Raspberry Pi]安裝PHP網頁伺服器-part1
1.
2.
3.
4.
此教學為遵照柯博文老師的Raspberry Pi超炫專案與完全實戰 之學習紀錄。
2.
3.
4.
此教學為遵照柯博文老師的Raspberry Pi超炫專案與完全實戰 之學習紀錄。
安裝
使用以下三行，先更新系統，在下載apache2和設定php5的指令sudo apt-get update
sudo apt-get upgrade
sudo apt-get install apache2 php5 libapache2-mod-php5
2016年7月12日 星期二
[Html]快速轉移到同頁面特定位置
Link Within a Page
This is helpful if you have long pages, want to give your visitors a link to the top of the current page, or link to any area on any page.
How To Link to a Specific Spot on a Page
Want to give your website visitors a shortcut to a specific spot on a page? Or maybe add a link back to the top so they can get back to your navigation menu or any other area within the page? Targeting within a page is really easy and there's 2 ways to do this, here's how.
The XHTML Compliant Way to Link Within a Page
If you don't know what XHTML compliant means, don't worry it just means that it will help your pages validate as XHTML Strict, the old way won't pass. This method is just as easy as the older link jump and when you continue getting better at designing you will probably be glad you did it this way in the first place (no messy editing later).
1) Name the Target
Choose the exact spot you want to send your link to, choose and element near it (a div, header tag, paragraph.. whatever as long as it's in the right spot), add id="something", you can call them anything you like as long as the names are the same in the link and the target ID and preferably no spaces (spaces change to %20 in the address bar and look a tad messy).
Choose the exact spot you want to send your link to, choose and element near it (a div, header tag, paragraph.. whatever as long as it's in the right spot), add id="something", you can call them anything you like as long as the names are the same in the link and the target ID and preferably no spaces (spaces change to %20 in the address bar and look a tad messy).
An example would look like this:
The content of your div here.
<div id="whatever-you-want-to-call-it">The content of your div here.
</div>
2) Link To Your Anchor Target
To link to your anchor simply use:
To link to your anchor simply use:
<a href="#whatever-you-want-to-call-it">Link Text Here</a>
or if it's on another page:
<a href="pagename.html#whatever-you-want-to-call-it">Link Text Here</a>The Old Way
This way of jumping to a spot within a page is not as good an idea for a few reasons. The "name" attribute has been depreciated for XHTML, and using tags you already have on your page like <h1>, <p> or any other places you can add id's will leave you less clutter on your page. (ie, you can use them for css styles, javascript and a lot more. And yup, if you happen to already have a something styled on your page using ID, linking to it works just fine.)
With that said, just in case for some reason you want to try the other way, here it is. As with the linking method above, you can call it anything you'd like, try not to use spaces though (they look rather messy in an address bar).
1) Naming the Target
Choose a spot on the page you want to link to and make an anchor by making a link mostly as usual but instead of "href" add "name" inside it.
Choose a spot on the page you want to link to and make an anchor by making a link mostly as usual but instead of "href" add "name" inside it.
Here's an example:
<a name="whatever-you-want-to-call-it">something here so you don't have an empty tag</a>
2) Linking to your new jump spot
This step is the same as above:
This step is the same as above:
<a href="#whatever-you-want-to-call-it">Link Text Here</a>
See, either way you choose to link within the page it's fast, easy and can be very helpful to your visitors.
訂閱：
文章 (Atom)