[切版] 問題紀錄 - 1

Published on:

要切出如圖片的版

  • 問題:

    1. 版形切不出來。一開始切了三欄,在左右欄又各切了一個div區塊放圖片並設定float。結果沒有成功。
    2. 嘗試老師給的方式後,版型切出來了,但設定得部分有出錯。
      3.下圖是我計算的方式,不知道哪裡出錯了
      4.即使text-decoration 已經設none,超連結的底線還是會出現
  • 錯誤排除方式:

    1. 自己嘗試的方式:改成切成五欄,但是還是失敗。
    2. 群組詢問後,老師給的方式:先三欄,左右兩欄內,再各自做三列,接著每一列內分兩欄。
    3. 更改box_left的寬度後,就成功了。但不知道原因。
  • 原因:

    1. 應該是一開始只在左右欄切一個div,忘記給另一邊也要區域。因為沒給div的是title跟p,所以即使設定了float,放圖片的dv仍會排在下面,所以沒有成功。

[筆記]網頁美妝師 - CSS

Published on:
  • 選取器:找到誰去做設定/更改的意思
    • p vs .p 是不一樣的
    • 選標籤 直接打 ex p
    • 選class(類別) 要加. Ex .sp
  • 優先權
    • 選取器(同等級)一樣的情況,順序後面的會覆蓋前面
    • id>類別class>標籤tag
  • 共用的地方用tag / 特殊化的用class
    • 一個標籤可以有很多class,不同的class用空白做區隔 -<p class="男 短褲 短髮">
    • 要選男 短髮時 .男.短髮 (串起來的是同一個物件)
    • 越詳細越明確的優先權越高 (.男.短髮 > .男)
    • 空間的概念(切版常用到)
    • 在AA裡面的strong (用空白)
      • 指定某一個東西的子層 ,AA是父層 strong是子層
    • 路徑
    • 同一個資料夾裡的檔案 直接打名字img src='lego.png'
    • 不同資料夾裡的檔案 打資料夾在打名字img src='pic/lego.png'
    • A資料夾裡找B資料夾的檔案 img src='../b/xx.jpg
    • 出一個資料夾../ 要再出去就在一次../會變成../../資料夾/檔案
    • 從網頁位置找其他檔案 (相對路徑)
    • 從網址找到檔案(絕對路徑)
  • Font-weight
    • bold仿粗體 / 字體本身沒有粗體 用軟體計算的方式讓她加粗 /
    • 粗體有100~900區分 每100為單位
  • Font-family 字體
    • 如果對方電腦沒有這個字體,用逗號做區隔 使用第二個
    • 字體分兩大類 有襯線字 vs 無襯線字sans-serif (會抓系統內建的預設的)
    • 字體名稱中間有空白用單引號來圈起來
  • text-decoration
    • none會讓原本有底線的消失
  • Line-height
    • 當沒有特別指定時,line-height (行高)在瀏覽器的原始預設值為 1.0 ~ 1.2 倍,但如果想要讓瀏覽者在閱讀文字上面感到更舒適的話,通常比較多人會設定在 1.4 ~ 1.8 倍之間。
    • 有襯線字 1.4
    • 無襯線字 1.8
  • text-indent
    • 文字首行縮排的意思
    • 要加單位
  • 單位
    • em ->一個字母的寬度
    • 一個字大小預設是16px
    • %
  • 註解
    • CSS
    • /裡面放解釋/
    • HTML
    • <!— 註解—!>
  • float 浮動
    • 可以讓不同div做橫排
  • div(division) 區域
    • 用class做區域的分別
    • 正常情況下會在直排 ,區塊級(block)的元素
  • 區塊尺寸的控制
    • 高度通常不設定,因為內容太多會自動撐高
    • 寬度設定
    • Padding :內容物跟邊邊的距離
    • Margin: 物件跟物件之間的距離
    • 一個物件 區分為
    • 1.佔據空間
    • 2.可見範圍
      • width(內容物的寬度) + padding(內距) + border(邊匡)
      • 人的肉體+ 衣服跟肉體的空隙 +衣服的厚度

[筆記]網站建築師 - HTML

Published on:
  • 什麼是HTML?
    超文件標示語言(英語:HyperText Markup Language,簡稱:HTML)
    是一種用於建立網頁的標準標示語言。
    網頁瀏覽器可以讀取HTML檔案,並轉換成視覺化網頁。
    HTML描述了一個網站的結構語意隨著線索的呈現,實際上html只是一種標記式語言而已。

    因為瀏覽器沒眼睛,是認文字去轉成網頁基本結構視覺化,所以網頁用文字去記述

  • 網頁的架構

<!doctype html>
<html>
    <head>
         <meta charset="UTF-8">
       <title>這是我的網頁 </title>
    </head>
    <body>
        網頁內容
    </body>
</html>  

  • DOCTYPE : 宣告此文件的html版本,需放在整體文件的最開頭。 會牽扯到HTML跟CSS的解讀方式。
  • body: 主內容,給人看的。
  • head:放該頁面的相關資訊,主要是給搜尋引擎看的,不是給人看的。
    • title: 跟SEO有關係 /如何讓網頁排在前面 /搜尋引擎會看/
    • Meta:瀏覽器由此判定此文件是用何種編碼方式。
    • 會放關鍵字 或 網站描述

  • 標籤
    1. h1~h5 標題標籤
      • h1是最重要的標題,其次則是h2,以此類推。
      • 不要被視覺(眼睛)矇騙,網頁看標籤而不是看顯示出來的字體大小來辨別重要性。
        • Ex:h1標籤是大的重要的 雖然文字看起來是最大的,但其實可以用別的方式讓字變小,但對瀏覽器來說h1標籤仍是最優先的。
    2. 清單標籤(有順序的差別)
      • 有序清單(ordered-list) ex:有SOP的料理步驟 (會影響網頁搜尋)
      • 無序清單(unordered-list) ex:購物車內的東西
      • 有序清單(ol) 會顯示12345 / 無序清單(ul)
    3. 強調標籤
      • strog標籤 ->強調這一塊 ->會顯示粗體
      • b標籤 ->沒有強調的功能,只有視覺的顯示粗體
      • em標籤-> 強調 ->顯示斜字
        • i標籤 ->沒有強調的功能,只有視覺的顯示斜體
      • storng的強調 > em的強調
    4. 超連結
      • a標籤 ->顯示是超連結用
        • href(參照) 是屬性 ,瀏覽器帶你到目的地
        • 開新視窗 用target 的屬性
        • 屬性跟屬性之間用空白間隔,屬性跟值之間不能用空白間隔
        • <a href="http://tw.yahoo.com" target="_blank">yahoo</a>
    5. 圖片標籤(img)
      • 網頁是純文字欓,無法直接丟給他圖片 -> 告訴網頁這是圖片 ->去哪裡抓這張圖
        <img src="https://lh6.googleusercontent.com/-8hF1HXdXYJU/AAAAAAAAAAI/AAAAAAAAjuU/-h954DPX_v8/s0-c-k-no-ns/photo.jpg" width="300" alt="樂高標誌">
      • src :圖片來源
        • 如果圖片來源在網路上,直接複製網址(絕對路徑)/ 從網頁位置找圖片在哪 (相對路徑)
      • width :設定圖片的寬
      • alt(altennate) : 圖片替代文字 1.如果圖片無法顯示的時候顯示的文字 2.搜尋引擎可以透過替代文字知道是什麼圖片 3.跟無障礙網頁有關 ex 視障朋友上網是用閱讀機等輔助設備,「唸」出來,讓視障朋友們了解網頁。而念圖片時會念這裡的文字
      • img標籤特別的地方 ,只有頭沒有尾(獨立標籤/自閉標籤)
    6. 獨立標籤(自閉標籤)
      • br 打斷 強迫換行標籤
    7. 表格
      • 表格結構
        • table 外框/ tr 列 / td列裡面的格子
        • 表頭 thead / 表身tbody -
        • 表格標題
        • caption 大表格標題 - th 表格內的標題 - scope col 欄標題 / Scope row 列標題

Rails - Helper

Published on:

Helper是什麼

  • Helper是一種輔助方法,目的是將Ruby code帶入view當中,而不是單純的平舖直敘。 這點也是Rails分工的一環,model和 controller的method不能在view當中直接使用,只有helper method才行。

Helper和Helper method差在哪裡?

  • Helper是一個概念,而在Rails架構中helper自己有一個資料夾,我們可以在裡面定義helper method,定義完以後就可以在view當中使用。
  • Rails當中有提供很多內建的helper,只要是.erb結尾的檔案,都可以使用helper,包括html.erb、js.erb等等。
  • helper這個詞並不會使用於controller和model當中。



- 資料來源:http://motion-express.com/blog/20141025-rails-helper

unix指令 mv - 更改資料夾(檔案)名稱

Published on:

mv

  • mv 的意義為 move , 主要是將一檔案改名或換至另一個目錄

    • 三種格式:
      • mv f1 f2 : 將檔名為 f1 的檔案變更成檔名為 f2 的檔案。
      • mv dir1 dir2 : 將檔名為 dir1 的目錄變更成檔名為 dir2 的目錄。
      • mv f1 f2 f3 ... dir : 將檔案 f1 f2 f3 ... 都移至目錄 dir 裡面。
    • mv 的參數有兩個,-f 和 -i , 其中 -i 的意義與 cp 中的相同,均是 interactive 詢問之意。而 -f 為強迫( force ) , 就是不管有沒有同名的檔案,反正我就是要 搬過去,所有其他的參數遇到 -f 均會失效。


[錯誤紀錄] params 沒有設定,導致表格內容無法顯示

Published on:


  • 位置:Admin/appointments/index 網頁

  • 錯誤訊息:Appointment 後台表格的message 內容不會顯示出來,用rails c創建可以,但在網頁上表格填寫的卻不行。
    紅色框框是rails c 裡建立的, 黃色匡是在網頁上填寫表單後送出的

  • 原因:因為用rails c建立可以顯示,代表message的代碼部分是沒有錯誤的。
    但是為什麼在網頁上填寫卻不行呢? FORM SUBMIT後會送參數到controller篩選後再到view顯示。
    於是去檢查controller的params 有沒有設定到:message 。

  • 錯誤排除方式:將controller裡的def appointment_params 參數加上message

[錯誤紀錄] NoMethodError

Published on:


  • 位置:Admin/appointments/index 網頁

  • 錯誤訊息:undefined method strftime for nil:NilClass

  • 原因:由於在開發時,到後面才實作將加入 booking_time 的欄位,所以導致之前的資料完全沒有booking_time 的數值

  • 錯誤排除方式:進入rails c 把之前的資料給刪掉,重新創建一筆,就正常了

Appointment.destroy_all
Appointment.create(user_id:1,service_id:1,booking_name:"test",
  booking_phone:"1234",booking_time:"2017/05/12 16:10",booking_email:"11@test.com",message:"123")

[工具] RealtimeBoard 便利貼功能,視覺化溝通白板

Published on:

優點

  • 可以使用功能很多,也有提供模板可以用,除了網頁版也有app。只要有手機就可以用囉~超方便

    • 插入各種雲端服務的影音資料
    • 插入圖表、圖庫、模板
    • 新增各種筆記
    • 在圖片、文件上畫註解
    • 連結多個物件,繪製流程圖
    • 選擇多個物件、建立群組
    • 所有編輯自動儲存
    • 多人協同合作
    • 線上即時討論串
    • 重新組織看板
    • 放大縮小看板視野
  • 免費帳戶提供最多三個看板額度,每個看板可以邀請三位協作者,對小型團隊間的討論或許就能滿足需求

如何使用