iT邦幫忙

網頁設計相關文章
共有 823 則文章

技術 網站設計達成目標轉換的關鍵因素及技巧

好的網站應該要有直覺性網站版面配置與迅速的網頁載入速度,需要具備好的使用者體驗,進而提升SEO關鍵字排名。隨著時代演進,網站設計經歷了五個世代的變革,並逐漸注...

技術 打造SEO優化網站的起步秘訣:建置網站架構指南

你想要一個可以用的網站還是想要一個可以排名的SEO網站,為企業品牌帶來實質的效益呢?在建立官網前,你可以想想建網站的目的是什麼?而架設SEO網站需要用什麼方式進...

鐵人賽 SideProject30 DAY 30

技術 Day30. 結語、心得

喔耶!終於可以脫離苦海了!!今天就是我的鐵人賽最後一天2023/10/15 一定要好好記錄起來! 雖說報名鐵人賽的初衷只是因為教授的要求,但在想要寫什麼主題的時...

鐵人賽 Modern Web DAY 29

技術 【Day29】Flask請求 & 表單實作

昨日了解完Flask的安裝至頁面跳轉、動態生成等內容後,今天我們要更深入介紹Flask的請求和表單製作! Flask請求 在學習請求前,我們要先了解HTTP方...

鐵人賽 SideProject30 DAY 29

技術 Day29. Git版控工具(三) Vercel 網站部署

網站製作完成後,最後就只剩下「部署」啦!通常要將網站上架到網路上,擁有一個屬於自己的網址,是需要額外費用的,但最近很熱門的Vercel提供免費網站部署服務,讓有...

鐵人賽 Modern Web DAY 28

技術 【Day28】Flask基本架構

在大概摸索Python的基本語法和函式修飾器後,我們今天終於可以回歸正題 —— 使用Python架設一個輕量級的網頁後端伺服器! 我們今天要接觸的東西名為Fla...

鐵人賽 SideProject30 DAY 27

技術 Day27. Git版控工具(一) Git介紹

網站製作完成後,有兩件事還需要做,那就是「部署」、「維護」,這兩項都很需要版本控制工具的協助,就先來談談Git這個版控工具吧!當在自己的本機製作、設計時,因為更...

鐵人賽 SideProject30 DAY 26

技術 Day26. 網站開發過程(八) 互動設計、添加微互動

倒數五篇,也是網站開發的最後一篇,今天要來聊聊互動設計、微互動。現在的網站除了RWD是不可或缺的之外,在網站中添加各種互動設計也是重要趨勢,小的可以是文字、區塊...

鐵人賽 Modern Web DAY 25

技術 【Day25】淺談 React.js(4)公共元件 & 頁面跳轉 Router

在碰到純前端的大專案時,專案內有許多頁面是必然的。都是在同個專案,當頁面跳轉時,想必也都會使用到相同的元件。但是,在創建新頁面時,我們不僅要複製多個元件,甚至是...

鐵人賽 SideProject30 DAY 25

技術 Day25. 網站開發過程(七) 常用JS套件(2)

今天會接下去推薦幾個好用的JS套件,但跟昨天不太一樣的是,今天推薦的套件都是很需要讀文件,比較進階需要設定比較多內容的套件,但只要有依文件製作就能呈現很多種變化...

鐵人賽 Modern Web DAY 24

技術 【Day24】淺談 React.js(3)React useState & useEffect

介紹完React的動態生成後,本篇將帶您進入到React Hook的領域。 甚麼是React hook?簡單來說,它是一種React的函數,可以讓您在無需使用c...

鐵人賽 SideProject30 DAY 24

技術 Day24. 網站開發過程(六) 常用JS套件(1)

接下來兩天推薦幾個好用的JS套件,有時候想要的設計不是可以短時間寫成的功能,這時候搭配使用適合的套件,能減少開發時間,大大提升效率,也能讓網站更豐富喔!Day3...

鐵人賽 Modern Web DAY 25

技術 Day25 有料的 CSS 漢堡選單

我們今天要來做幾份漢堡選單。 原理和 Day14 今天我想來點… 純 CSS 的開關 一樣,都是用 input 的 checkbox 來儲存狀態好讓其他元素可...

鐵人賽 Modern Web DAY 23

技術 【Day23】淺談 React.js(2)React動態生成

在上一天中,我們了解到React中的元件構成和基礎語法,今天,我們要一同探索的是 ── 更便捷的生成語法! 動態生成 在介紹jQuery的篇章中我們曾提過,我...

鐵人賽 SideProject30 DAY 23

技術 Day23. 網站開發過程(五) RWD製作

今天要談實際用CSS調整實現RWD製作。再開始聊RWD製作前,可以先回去複習前面這兩部分,有很大的關聯~Day13-16. 切版前知識-CSSDay17-18....

鐵人賽 SideProject30 DAY 22

技術 Day22. 網站開發過程(四) Bootstrap應用、變化

今天會藉由昨天提到的幾個元件,實際舉範例來說明該如何應用、變化,我個人覺得在腦海中想好畫面最後完成的樣子很重要,我自己習慣的方式是利用VSCode預覽模式,嘗試...

鐵人賽 Modern Web DAY 22

技術 【Day22】淺談 React.js(1)React基本構成 & 語法

在上一篇的教學中,我們成功建立了一個React的專案。建立完畢後,會發現我們的檔案資料夾突然多了好多沒看過的東西: 慘了,完全看不懂——沒關係!接下來將帶您認...

鐵人賽 SideProject30 DAY 21

技術 Day21. 網站開發過程(三) Bootstrap常用元件:Collapse、Accordion、Modal、Navbar

昨天說到Bootstrap的基本內容,Bootstrap很好用的其中一點就是結合了許多前端會使用的元素,製作成元件讓我們可以直接取用,今天會來講講Bootstr...

鐵人賽 Modern Web DAY 21

技術 【Day21】前端框架淺談&React環境

在寫了數個的純前端的專案後,我們會發現,每個專案幾乎都會寫到一樣的東西。為了方便,從以前的專案copy一些元件套用在新的專案上是常有的事,但又要因應新專案而反覆...

鐵人賽 SideProject30 DAY 20

技術 Day20. 網站開發過程(二) Bootstrap介紹、常用語法

不敢相信,我完成2/3的鐵人賽了!接下來也要加油!今天開始是一系列的Bootstrap內容,會從最基本的觀念開始,並推薦常用元件及應用、變化。前面的天數我們談到...

鐵人賽 Modern Web DAY 19

技術 【Day19】常見切版應用(3-1)頁頂Header實作

在介紹完了前兩日的可滑動選單與彈跳視窗後,今天我們將要進入 ── 頁頂Header的實作。 header的詳細作用和規劃在我們的前導:《網頁的基礎設計理論》已有...

鐵人賽 SideProject30 DAY 18

技術 Day18. 切版前知識(八) 響應式網頁(RWD) 大小版畫面規劃

網頁大小版要怎麼規劃呢?在設計稿階段,因為過去工作的關係,比較習慣提桌機版及手機版兩個尺寸。但進入切版階段後,就必須實現每個尺寸下畫面都是符合需求的,所以我會利...

鐵人賽 SideProject30 DAY 17

技術 Day17. 切版前知識(七) 響應式網頁(RWD) 介紹

今天要來說說RWD響應式網頁,應該大部分的人都有聽過或知道RWD這個名稱,他是現在網頁設計趨勢最基本需要具備的設計原則,幾乎可以說近年來的網站都會實現RWD或大...

鐵人賽 Modern Web DAY 16

技術 【Day16】Github介紹:讓大家看到你的網頁!

在前面14天中,我們一同學習,並且大概了解如何做一個網站了。而今天!我將帶您了解GitHub,並將您所製作的網站,透過存放在GitHub內,散播出去,讓更多人看...

鐵人賽 SideProject30 DAY 16

技術 Day16. 切版前知識(六) CSS動畫 Animation

今天是CSS最後一章,最後來講講CSS動畫,運用CSS能夠製作一些基本的動畫,讓畫面更有趣!除了前面說過的transition屬性能利用過渡效果呈現簡單的小動畫...

鐵人賽 SideProject30 DAY 15

技術 Day15. 切版前知識(五) CSS偽元素 ::before、::after

嗨~今天是第15天!終於一半啦!!!今天要來談談CSS的偽元素,有了偽元素讓元素能添加更多效果、變化,網頁設計也能更多樣,是很常用的設定之一。前面的天數有談到:...

鐵人賽 Modern Web DAY 15

技術 【Day15】專題實作:簡易計算機

前些日子呢,我們一同學習了許多有關網頁三件套 —— HTML、CSS、JS的內容。納在本日的篇章中,我將帶著您使用這幾日所學,來實作出一個計算機的應用! 完成效...

鐵人賽 Modern Web DAY 14

技術 【Day14】Javascript物件設計!我所知道的物件導向。

本篇,我們要提到的是程式語言中,非常重要的概念 —— 物件導向。 聽著好像很複雜,其實我們現實生活都充滿了物件導向的概念。淺顯一點地解釋,便是把細小的東西以「物...

鐵人賽 SideProject30 DAY 13

技術 Day13. 切版前知識(三) CSS介紹、選擇器、常用屬性

嗨~從今天開始是一系列的CSS內容,前一章說到瀏覽器會讀取HTML轉譯成視覺化網頁,並搭配CSS、JavaScript使用。CSS負責網頁呈現的樣式、外觀,Ja...

鐵人賽 Modern Web DAY 13

技術 【Day13】讓網頁動起來(3)使用GSAP設計動畫!

上網衝浪是現代人人具備的技能,您是否曾在某些商業網站看過一些炫酷異常的動畫?就拿Apple(台灣)的官網來舉例,隨便點選進入它們任意商品的頁面,往下滑動,便會有...