網站架設筆記

【網站內容】

客戶想做的，為什麼會有這個網站、解決什麼問題、客群是誰？線下有什麼商品、有無異業結盟？
研究消費者行為的文章或論文
網站高度 百分百 設定/fb站外動態 管理你的站外動態

【網站架設】

OG：Open Graph
FAT32只能定址32位元，能一次容納的檔案大小有限，建議在Windows系統使用NTFS，在Mac用exFAT檔案系統格式。
style語法相檔於樣式，在style裡面可以用color、font等屬性。在color的值前面會產生該顏色的圖示，滑鼠移到上面會出現快顯視窗，裡面的MDN Reference按下去，可以跳到該網頁顯示這個語法可以的寫法供參考。

使用字型時，要確定該字型是對方電腦裡有的，而且是可以商業使用
google fonts裡可以找到許多免費商業用的字型，在該網站裡搜尋關鍵字noto(非方塊型豆腐字)。serif代表襯線字，有勾、撇、納；Sans serif，代表非襯線體
在head標籤裡使用style，可以讓使用者開啟網頁時，自動下載該字型到他的電腦裡，在其中url裡面加上http，告訴瀏覽器用什麼協定，可以加快電腦執行該語法速度
head裡有的屬性可以讓body裡的標籤套用，只要寫一次可以全部用，若要單獨使用和head裡不同的屬性，則可以另外再寫在body裡，瀏覽器會以最後讀到的為主。

iframe屬性

frameborder="0" 有的瀏覽器不認得，只認得CSS
style="border:0;" 給CSS看的
allowfullscreen=""
aria-hidden="false" 無障礙使用，false表示這個frame不在這個網頁，而是另一個網頁
tabindex="0" 無障礙使用，按1,2,3...可以啟用

架站軟體

Server

appserv(Windows)
apachefriends(Windows)
mamp (MAC)

網站輔助

wordpress.org

---

【VSCode】

在VSCode的html格式檔案裡按!+enter，可以自動產生html的基本架構。
Alt+Z切換自動換行 或 在檔案>喜好設定>設定 打開後搜尋 editor.wordWrap 設定為 "on"即可~
先在設定裡搜尋emmet，找到【啟用時，按下Tab鍵即可展開Emmet縮寫】，打勾寵，然後可以用快速編輯方法：輸入h${標題$}*6後按tab，其中h是html語法中的標記語法，也可以用其他語法代替；$類似萬用字元；{用來包含要顯示在網頁上的內容；*是乘以幾次；數字6是次數，也是$的階數，6等於是有6次，例如：h${標題$}*6

標題1

標題2

標題3

標題4

標題5

標題6

選取一段字按ctrl+?可以變為註解，再按一次可以取消註解
a>img按tab可以自動產生所有標籤 a*3>img按tab可以自動產生所有標籤3次 a>img*3按tab可以自動產生後面的標籤3次

---

【字型筆記】

部份公司提供的免費字型，可能會有只能使用1000次或字數的限制，使用前要先看清楚。
使用大公司的字型，在連結時下載速度比較快，提供觀看者較好的體驗。
看MIT License授權

---

【Google外掛】

font ninja、what font可以查網頁上使用的字型資訊。
QRCode方便產生QRCode
whatruns可以追蹤某個網站使用哪些外掛、變動和操作方式。

pagetrack

---

【版面配置】

視覺上下15度是最熱門的地方 RWD：Response web design，根據不同設備，同個網址的網站會顯示不同版型。 AWD：Adaptive web design，根據使用的設備，會導入到另一個版本網站，網址上通常就不一樣。 採用哪種方式必需跟客戶說清楚。 RWD可能會把廣告的位置放到不適當的地方，是問題 之一。 拿著手機看網頁，會因時因地會有不同的需求，網頁應考量這些設計。 網站分析時，也說明RWD、AWD如何選擇。 分析字型、顏色，並找其他用相同設定的網站是否也符合你分析的風格。 比起產品什麼時候賣的好；什麼時候賣不好，如何改善更重要。

---

【輔助軟體】

picpick截圖軟體
Geek Uninstaller，把軟體移除乾淨
QuickMark，可以把掃到的QRcode上傳到雲端。

專案工具Trello
直播軟體OBS
Adobe Comp

---

【社群媒體】

要找到自己的line QRCode網址，在自己的加入好友選項裡找到自己的QRCode，按分享，傳email或line給自己，可以取得連結。也可用一般QRCode掃瞄軟體，掃一下就會出現網址。 Android版，按邀請朋友，也可以看到連結網址。 FB IG Line@(business) Telegram(TG) Youtube(YT) TwiTTe TikTok Linedin

---

【Youtube】

影片網址 https://www.youtube.com/watch?v=vnpesk7jFrY
播放清單 https://www.youtube.com/watch?v=5J0Sjxudb68&list=PLv5BgIkjjA7Jw7175FKS-4Km05JD98Raz 頻道：當要從網頁上將使用者導到Youtube上，連結最好用頻道，讓使用者看到全部都是你的東西。 https://www.youtube.com/channel/UCidAQvy5xC8giBC1gVMPGJQ/playlists 分析字型、顏色，並找其他用相同設定的網站是否也符合你分析的風格。

---

【短網址】

picsee.io，在產生的短網址後面打上+號反追蹤，進入連結，可以看到來源網址(picsee)，而不是導入短網址對應到的真正網址。
商品一般用正方形圖片，才可以適應直放橫放。
找別人網站上的圖片alt怎麼下

---

【SEO】

用關鍵字找到的相關網站前5個，除了用這個關鍵字，還可以用什麼全新的關鍵字也可以找到這個網站。 文字雲、html5 cloud可以找出一段文章裡，最常出現的字順序
網頁上的任何按鈕、連結都要能被追蹤分析誰看過或按過。

【網頁圖片】

普類	GIF	JPG	PNG
去背	O	X	O
色彩	256	2的24次方	2的8或24次方
動畫	O	X	不建議
大小	小	較小(壓縮比)	適中
文字	O	X	O

5組關鍵字 bread 屑

【圖片資源】

Logo

launchaco
Autodraw
unDraw

Pinterest

網站外觀參考

dribbble
awwwards
Behance

【問題】

在Google不以手機版網頁為優先搜尋的前提下，AWD網頁只在PC版下廣告，當user用手機搜尋到PC版網頁時，再自動導到手機版網頁，這樣廣告是否只下在PC版就好？

多元連結