2018 년 Flash 웹 사이트 재구성

Sep 13, 2025

어떻게

1999 년 웹 스튜디오 1.0을 사용하여 첫 번째 웹 사이트를 만들었습니다. Web Studio는 그래픽 사용자 인터페이스였습니다. 새로운 것을 만들 수있었습니다 [삼] 방문 페이지

요소를 드래그 앤 드롭합니다. 그런 다음 무료 도메인을 설정하고 지오 시티와 voila로 호스팅합니다! 나는 웹 사이트를 보냈다. 2004 년으로 빨리 앞으로 나아가고 싶었고, 많은 다른 사람들과 마찬가지로 밴드 웹 사이트를 만들기 위해 출발했습니다.

[삼] 12 일반적인 자바 스크립트 질문에 대한 답변

그 이후로 많은 것이 바뀌 었습니다. 이 기사에서는 메모리 차선을 이끌어 내고 오늘 웹에 동일한 사이트를 재창조 할 것입니다.

파일을 가져옵니다 이 자습서의 경우.

I built my first website in 1999 — 나는 1999 년에 첫 번째 웹 사이트를 만들었습니다

그래서 시작하자! 첫째, 일반적으로 모든 새로운 프로젝트는 MKD가 GINF로 시작합니다. 나를 알고있는 사람들을 위해 어떤 시점에서 나는 당신에게 dotfiles를 언급했을 것입니다. Dotfiles는 단순히 점으로 시작하는 파일입니다 (실제로 그 연결을 만드는 데 놀랍도록 오랜 시간이 걸렸습니다!) 여러 가지 목적으로 사용할 수 있습니다. 내가 좋아하는 dotfiles 중 두 가지는 .aliasas와. functions입니다. 내가 정교하게하자.

bash에서는 mkdir 명령을 사용하여 새 디렉토리를 만들 수 있습니다. 그런 다음 방금 만든 디렉토리로 디렉토리 CD를 변경해야합니다. 내. 기능 파일에 코드를 사용하면 MKD를 실행할 수 있습니다. 이렇게하면 새 디렉토리뿐만 아니라 해당 디렉토리로 변경되었습니다. 이것은 처음에는 과도한 것처럼 보일지 모르지만, 나는이 마이크로 이기기를 좋아합니다. 시간이 지남에 따라, 특히이 명령을 하루에 여러 번 실행하는 경우 곧 많은 시간 동안 많은 시간을 추가합니다.

 # 새 디렉토리를 만드고 입력하십시오.
함수 mkd () {
    mkdir -p "$ @"& amp; & amp; CD "$ _";
}

다음 명령은 Git에 익숙한 경우 간단히 Git INIT입니다. 이는 프로젝트를 버전 제어 할 수 있습니다. 쇼핑 목록에도 Git을 많이 사용하십시오! 따라서 매번 Git을 입력 해야하는 대신 Git을 다시 추가해야합니다. Alias G = "Git"을 다시 추가하면 좋고 작은 시간 절약이 있습니다.

요즘에는 다양한 프레임 워크와 기술의 대리점이 있습니다. 이 프로젝트의 경우, 나는 일을 간단하게 유지하고 싶다. 나는 HTML, CSS를 사용하고 자바 스크립트를 뿌리는 경우. 먼저 기본 HTML 마크 업을 만드겠습니다. 하지만 기다려! 잠시 동안 멈추고 생각해 봅시다.

The 2advanced.com site heavily inspired me to learn Flash — 2Advanced.com 사이트는 Flash를 배우도록 저에게 영감을주었습니다

때로는 개발자가 프로젝트에 대해 슈퍼 흥분하고 즉시 균열을 얻고 키보드가 코드를 작성하기 위해 직진 할 수 있습니다. 그러나 나는 이것이 가장 좋은 방법이 아니라는 종종 발견된다는 것을 알게됩니다. 나는 프로젝트를 먼저 염두에두고 개요를 얻는 것을 좋아합니다. 이렇게하고 전체 프로젝트에 대한 훨씬 더 명확한 비전을 갖는 것이 훨씬 더 나은 의사 결정을 내릴 수 있습니다. 예를 들어, 내가 코드에 똑바로 나오면, 나는 다시 돌아가야하고 리팩터를 가게해야한다는 문제가 발생할 수 있습니다. 이 접근 방식에는 몇 가지 다른 결과가 있습니다. 첫째, 코드를 완전히 삭제하고 다시 시작해야 할 수도 있습니다. 둘째,이 패션에서 계속해서 나는 '스파게티 코드'로 끝나면 미래에, 디버그, 디버그 및 성능 손실을 초래할 수 있습니다. 셋째, 때로는 괜찮아지고 더 나은 코드로 끝나지 만 첫 번째와 두 번째 결과가 훨씬 더 일반적이라고 말하는 경향이 있습니다.

이 프로젝트는 상당히 작습니다. 집, 뉴스, 공연, 미디어, 앨범, 링크 및 공통 부품의 몇 페이지가 있습니다 : 헤더, 탐색, 타이 포 그래피 콘텐츠, 목록, 이미지, 비디오. 2004 년 플래시 사이트를 원래 구축 할 때 사물은 테스트 측면에서 훨씬 간단했습니다. 사이트는 마우스와 키보드가있는 데스크톱 컴퓨터에서 플래시 용 플래시로 빌드되었습니다. 요즘 모바일 및 태블릿 인터넷 사용량은 데스크톱 컴퓨터보다 일반적 이며이 트렌드는 계속 증가하고 있습니다.

이 사이트를 볼 수있는 사람을 더 잘 경험하기 위해 프로젝트 시작시 몇 가지 사항을 고려하여 모바일 첫 번째 전략을 사용할 것입니다. 그렇게하기 위해 다시 한 번 코드를 작성하기 전에 나는 좋은 구식 펜과 종이를 나갈 것입니다. 첫째, 나는 sitemap을 쓸어 들인다. 그렇게함으로써 내가 생각할 수있는 몇 가지 주요 영역이 있습니다. 예를 들어, 내 원본 사이트는 각 밴드의 앨범마다 다른 페이지로 구성되어 있습니다. 그 당시에는 세 개의 앨범이 있고 멋지게 멋지게 적합합니다. 이제 그들은 훨씬 더 그리고 잠재적으로 오기 때문에 이미 내 마음 속에 있습니다. 사이트를 더욱 미래의 증거로 만드는 방법에 대해 생각하고 있습니다 (오래되었지만 oo는 Dan Cederholm 's입니다. 방탄 웹 디자인 짐마자

이제 SiteMap과 페이지의 머리에 대략적인 아이디어가 있으면 다음 위로 가동식 와이어 프레임을 만드는 것입니다. 이전의 경험에서 많은 반응 형 사이트를 구축하는 모바일에는 흥미로운 디자인 과제, 즉 탐색을 만드는 방법, 여전히 사람들이 사이트의 주요 내용을 볼 수 있습니다. 나는 우리가 햄버거 메뉴 접근 방식을 사랑하고 싫어하는 디자인의 디자인 결과와 함께 갈 것입니다. 그러나 나는 약간의 비꼬는 것을 추가 할 것입니다. 원래의 작품은 표준 버거 메뉴 아이콘이 아니라 새들을 사용하고 메뉴를 활성화하고 메뉴가 활성인지 여부를 나타내는 방법으로 날개를 열고 닫을 수있는 새 아트웍을 사용할 것입니다.

Flash tree navigation in Adobe Animate CC 2018 — Adobe Animate CC 2018의 플래시 트리 탐색

내 마음 속에있는 것들이 이제 사람들이 사이트 주위를 탐색 할 수있는 방법에 대한 아이디어로 모양을 시작합니다. 나는 이제 페이지 자체가 어떻게 보이는지 생각할 것입니다. 홈페이지로 시작하여 타이포그래피 콘텐츠를 사용하여 상당히 간단합니다. 다음으로, 뉴스 - 다시 타이 포 그래피 콘텐츠, 잠재적으로 이미지, 그리고 나이가 많은 게시물을 보려면 몇 가지 탐색. GIGS - 티켓을 구매하기위한 링크가있는 다가오는 공연 목록. 미디어의 경우 이전 사이트를 되돌아 보며 '이미지'와 '비디오'를 두 개의 다른 섹션으로 보냈지 만 여기서는 개선을위한 공간이 있고 '미디어'로 통합 할 여지가 있습니다. 앨범, 아, 예 앨범 - 이제는 이런 종류의 일을하는 곳입니다. 앨범 페이지에는 활판 인쇄 및 이미지가 있으며 이전 게시물을 볼 수있는 일종의 탐색이 필요합니다. 익숙한 소리? 뉴스 페이지와 동일한 구조처럼 많이 들립니다! 이 최상위 수준의 개요를 보면서 나는 더 세분화 된 구성 요소에서 일을보고 생각할 수 있습니다. [삼] 원자 설계

브래드 프 로스트의 작품에 익숙한 경우 수준.

이제 사이트가 작은 장치 및 재사용 가능한 요소에서 작동하는 방식에 대한 아이디어가 있으며, 더 큰 장치로 프로세스를 반복 할 시간입니다. 사이트가 상당히 간단하고 이미 모바일 용으로 만들어진 와이어 프레임이 있으므로 상당히 유사한 디바이스가 이제는 여분의 방을 가지고 있으므로 콘텐츠 영역을 넓힐 수 있으며 측면 탐색도 포함 할 수 있습니다.

측면 네비게이션은 내가 가장 흥분하는 오프셋에서부터 사이트의 비트입니다. 밴드의 원래 작품에서 영감을 얻는데, 나는 잎이있는 나무 실루엣으로 탐색을지었습니다. 각 잎은 사이트의 다른 페이지에 연결된 버튼이었습니다. 또한 스크롤하여 잎에서 멀리 떨어져서 잎이 움직일 것이고 땅에 떨어질 것입니다. 플래시는이 훌륭했습니다. 트위닝이라고 불 렸습니다. 타임 라인의 인터페이스에서 하나의 키 프레임에서 요소를 설정할 수 있으며 타임 라인을 따라 다른 키 프레임을 만들고 요소의 경로를 추가 할 수 있습니다. 떨어지는 잎의 경로, 기간 및 속도를 변화시키면서 일을 조금 더 복용하고, 나는 내가 매우 기뻐했던 것과 함께 끝났습니다.

하지만 이제는 플래시를 사용하지 않으므로 어떻게해야합니까? 꽤 자주 Codepen 또는 JS Bin으로 이동합니다. Codepen 및 JS Bin은 귀하가 신속하게 코드 및 저장할 수있는 온라인 서비스입니다. 나는 더 많은 디자인 LED로 Codepen을 보는 경향이 있으며, JS Bin은 자바 스크립트가 초점을 맞 춥니 다. 이 프로젝트의 경우 코드 쌍을 사용하여 몇 가지 이유로 트리 탐색을 만듭니다. 첫째, 사이트의 주요 모바일 버전을 구축하기 시작하고 실제로이 작업을 수행하면 MVP를 끝낼 수 있습니다. 멋진 리프 탐색 및 애니메이션을 추가하여 만들 수있는 사이트의 향상된 기능이 있지만 생산하는 데 더 오래 걸릴 것입니다. 트리 탐색을위한 코드 핀에서 일하는 이점은 주 사이트 및 코드베이스와 격리 된 것을 의미합니다. 일들이 완성 된 것으로 까다로운 경우, 내가있는 곳을 저장하고 주요 사이트 빌드로 계속해서 탐색 할 수 있습니다. 때때로 나는 문제를 벗어나거나 심지어 그것에 자고있는 것을 발견하면, 잠재 의식이 그것에 대해 생각하고 있습니다. 그런 다음 문제를 다시 돌아 오면 해결책을 제공합니다.

Svgs! 나는 svgs를 좋아합니다. 이전에 Flash에서는 Illustrator에서 잎재 자산을 꺼 냈습니다. 놀랍게도 나는 아직도 원래 작품으로 일하는 CD를 가지고 있으며 그것을 열 수있었습니다. 요즘 나는 스케치를 사용하며 파일을 열 때 훌륭한 일을했습니다. 나는 이제 잎 자산을 SVG로 수출 할 준비가되어 있습니다. 왜 svgs? 많은 이유가 있습니다. 망막 장치에서 JPG를 사용하거나 GIF를 사용하는 경우, 더 큰 자산을 공급해야합니다. 그렇지 않으면 흐리게 보일 것입니다. 또한 SVGS를 사용하면 CSS를 사용할 수 있습니다. 이것은 훌륭하고 다른 이미지 자산을 만드는 것이 아니라 약간의 CSS를 사용하여 SVG의 색을 변경하기 만하면됩니다. 즉, 유지하기가 쉽고 보너스로 더 많은 성능이 있습니다. 당신이 svgs에 익숙하지 않다면 나는 그들을 읽는 것이 좋고, 내 좋은 친구의 놀라운 일을 강력하게 추천하고, Sara Soueidan. ...에

Mobile first, responsive navigation menu — 모바일 첫째, 응답 성 탐색 메뉴

이제 나무와 잎 자산으로 추가 할 마지막 일은 애니메이션입니다. 내가 이것에 의해 취할 수있는 몇 가지 접근법이 있습니다. 하나는 내가 한 원래 플래시 경로 트위스트에 사실을 유지하는 것입니다. 이는 경로를 복제하고 SVG를 사용하고 잠재적으로 추가로 SVG가 경로 및 AnimateMotion으로 작업을 수행합니다. 나는 향수의 향수의 관점 에서이 생각을 훨씬 좋아하지만, CSS는 수년 동안 많은 것을 왔으며, 우리는 이제 우리가 처분 할 수 있도록 변형하고 번역했습니다. 그래서 이것은 또 다른 접근법 일 수 있습니다. 더 나아가 일을 더 멀리, 낙하 잎을 무작위로 무작위로하는 자바 스크립트를 추가 할 수도 있습니다.

두 옵션 모두 좋지만 CSS-LED 경로를 더 많이 흔들리고 있습니다. 여기에 코드 펜을 사용하는 또 다른 이점은 빠르게 가고 하나의 접근 방식을 시도 할 수 있습니다. 내가 원래 생각했던 것보다 더 복잡하다는 것이 밝혀 지거나, 오른쪽으로 느끼지 않는다는 것을 낭비하지 않으면, 나는 작은 시간 낭비로 또 다른 접근법을 시도 할 수 있습니다. 사실 이것은 훌륭한 아이디어로 밝혀졌습니다! 나는 여전히 옵션을보고 있습니다. 최종 결과를 위해 GitHub의 프로젝트를 참조하십시오.

이제 트리 탐색을 사용하여 모바일 첫 번째 접근 방식으로 돌아가서 탐색을 구축했습니다. Sass에 익숙하다면 변수가 발생할 가능성이 높습니다. 그러나 변수가 이제 CSS에서 사용할 수 있음을 알고 계셨습니까? 그들은 가지고있다 꽤 괜찮은 브라우저 지원 크롬, 가장자리, 사파리 및 삼성 인터넷에도! 기본 CSS에 보관하고 여분의 종속성의 필요성을 피하려고하는 것처럼, 이것은 훌륭한 뉴스입니다. 그렇다면 어떻게 이것을 구현할 것입니까? 스타일 시트 맨 위에는 내 변수를 선언합니다.

 : 루트 {
  - 그레이 : #ccc;
  - Red : # FB0F0C;
  - 그리드 크기 : 10px;
}

이제 그들이 선언되었으므로, 나는 그들을 부를 수 있으므로 신체 배경색을 설정하는 것처럼 보일 것입니다.

 몸체 {
  배경 : var (- 회색);
}

이것을 더욱 차지하고 그리드 정렬, 공백, 수직 리듬을 돕기 위해, 당신은 또한 눈금 크기 변수를 정의했을 수도 있습니다. 변수는 Calc와 매우 잘 작동하며 이와 같은 조금만 보입니다.

 // 표준 변수가 사용되는 경우 10px를 출력합니다.
패딩 탑 : VAR (- 그리드 크기);

// 가변 유닛을 2만큼 곱하기 위해 CALC를 추가하여 출력 20px를 출력합니다.
패딩 - 하단 : Calc (var (- grid-size) * 2);

모바일 탐색 스타일이 완료되면 숨기고 표시를위한 기능을 해결 해 보겠습니다. 토글 버튼의 경우 레이블 태그를 적용한 다음 NAV 태그에서 입력을 추가합니다.

& lt; 헤더 클래스 = "헤더"& gt;
  & lt; h1 class = "header_title"& gt; 밴드 웹 사이트 & lt; / h1 & gt;
  & lt; h2 class = "header_currentPage"& gt; 가정 & lt; / h2 & gt;
  & lt; label for = "mobilenav_toggle"클래스 = "mobileNav_toggle"& gt; 토글 & lt; / label & gt;
& lt; / header & gt;

& lav 클래스 = "MobileNav"& gt;
  & lt; 입력 유형 = "확인란"id = "mobileNav_toggle"역할 = "버튼"& gt;
  & lt; UL 클래스 = "mobilenav_list"& gt;
    & lt; li class = "mobilenav_listitem"& gt; & lt; a class = "mobileNav_listitemlink"href = "#"& gt; & lt; / li & gt;
    & lt; li class = "mobilenav_listitem"& gt; & lt; a class = "mobilenav_listitemlink"href = "#"& gt; & lt; / li & gt;
    & lt; li class = "mobileNav_ListItem"& gt; & lt; a class = "mobilenav_lististemlink"href = "#"& gt; portfolio. & lt; / li & gt;
    & lt; li class = "mobilenav_listitem"& gt; & lt; a class = "mobileNav_listItemLink"href = "#"& gt; & lt; / li & gt;
    & lt; li class = "mobileNav_ListItem"& gt; & lt; a class = "mobileNav_listitemlink"href = "#"& gt; 접촉 & lt; / li & gt;
  & lt; / ul & gt;
& lt; / nav & gt;

다음 CSS를 사용하여 탐색 메뉴를 표시하고 숨길 수 있습니다. 헤더의 레이블을 원하기 때문에 ~ AKA Tilde 또는 (U + 007e)를 사용할 수 있으므로 첫 번째 요소가 즉시 성공하지 못합니다.

 #mobileNav_toggle [type = 체크 박스] {
  디스플레이 : 없음;
}

#mobileNav_toggle [type = 확인란] : 확인 ~ .mobilenav_list {
  디스플레이 : 블록;
}

모바일 탐색이 완료되면 일부를 구현할 시간입니다. [삼] 반응 형 웹 디자인

...에 사이트의 주요 내용을 추가 한 다음 크롬 개발자 도구에서 응답 성보기를 사용하여 트리 탐색을 적절하게 보관할 수있는 충분한 공간이있을 때까지 뷰포트 너비를 늘릴 수 있습니다. 이것은 600px이며,이를 위해 우리는 미디어 쿼리를 사용할 수 있습니다.

 .TreenAV {
  디스플레이 : 없음;
}

@media 화면 및 (최소 너비 : 600px) {
  .treenav {
    디스플레이 : 블록;
  }
}

거의 다 왔어! 마지막으로 나무 탐색이 주요 내용을 옆에 앉아서 FlexBox를 사용하려고합니다.

 .Container {
  디스플레이 : 플렉스;
}

.treenav {
  디스플레이 : 없음;
  최소 폭 : 140px;
}

이제 트리 탐색은 콘텐츠가 동일하고 오른쪽에 앉아있는 것으로 100 % 높이를 차지합니다. 즉, 콘텐츠가 얼마나 오래되기를 바라지 않아서 트리 탐색 밑에는 결코 흐르지 않습니다. FlexBox에 대해 더 알고 싶다면 체크 아웃하는 것이 좋습니다. flexbox.io. 하나와 유일한 wes bos. 그것이 할 수있는 것이 많습니다!

An example showing 'display: flex' preventing content from wrapping underneath the tree navigation — '디스플레이 : Flex'가 트리 탐색 아래에 포장에서 내용을 방지하는 예제를 보여주는 예제

그게 내가 그 순간에 시간이 많이 있지만이 프로젝트를 더 잘 만들기 위해 할 수있는 일이 여전히 많습니다. 질문이 있거나 기사를 좋아하는 경우 안녕하세요. 트위터에서 또는 통해 내 사이트 또는 Github에 대한 끌어 오기 요청을 보내주십시오!

이 기사는 원래 304 호에서 발표되었습니다 [삼] 그물

웹 디자이너 및 개발자를위한 세계 최고의 잡지. 여기 문제를 구입하십시오 또는 여기를 구독하십시오 ...에

관련 기사:

[삼] 슈퍼 패스트 CSS를위한 5 가지 팁

[삼] 자바 스크립트로 SVG 애니메이션

[삼] CSS 디스플레이 속성 이해

2018 년 Flash 웹 사이트 재구성

어떻게 - 가장 인기있는 기사

Adobe XD로 프로토 타입 빌드

일러스트 레이터에서 앱 아이콘을 만드는 방법

AR 앱을 만드는 방법

코를 그리는 법

생물 해부학을 마스터하는 방법

다리 도구 마스터

현실적인 3D 조명을위한 12 가지 팁

완벽한 책 표지를 디자인하는 방법

카테고리