ಟ್ಯುಟೋರಿಯಲ್: ಅಡೋಬ್ ಫೋಟೋಶಾಪ್ನೊಂದಿಗೆ ವೆಬ್ ಪುಟವನ್ನು ಹೇಗೆ ಲೇ Layout ಟ್ ಮಾಡುವುದು

ಕೋಡ್ ಅನ್ನು ನಮೂದಿಸದೆ ಅಥವಾ ಸ್ಪರ್ಶಿಸದೆ ವೆಬ್ ಪುಟಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಸರಳ ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕ ರೀತಿಯಲ್ಲಿ ಕೆಲಸ ಮಾಡಲು ಹಲವಾರು ಬಗೆಯ ಸಾಧನಗಳಿವೆ. ಅವು ಅಸಂಖ್ಯಾತ, ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಂದ ಪ್ರಸ್ತಾಪಿಸಲ್ಪಟ್ಟವು (ಅಡೋಬ್ ಡ್ರೀಮ್ವೇವರ್ ಒಂದು ಉದಾಹರಣೆಯಾಗಿದೆ) ಅಥವಾ ನೇರವಾಗಿ ವಿಕ್ಸ್‌ನಂತಹ ಆನ್‌ಲೈನ್ ಪ್ಲಾಟ್‌ಫಾರ್ಮ್‌ಗಳಿಂದ. ಆದಾಗ್ಯೂ, ವೆಬ್ ಡಿಸೈನರ್‌ಗೆ, ಹಸ್ತಚಾಲಿತ ಕಾರ್ಯವಿಧಾನಗಳನ್ನು ತಿಳಿದುಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ. ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಲ್ಯಾಂಡಿಂಗ್ ಪುಟಗಳ ವಿನ್ಯಾಸಕ್ಕೆ HTML5 ಮತ್ತು CSS ಮೂಲಭೂತ ಆಧಾರ ಸ್ತಂಭಗಳಾಗಿವೆ.

ಆದಾಗ್ಯೂ, ನೀವು ನಿರೀಕ್ಷಿಸುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ, ನೀವು ಇಂಡೆಸಿನ್ ಅಥವಾ ನಂತಹ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ತಿರುಗಬೇಕಾಗುತ್ತದೆ ಅಡೋಬ್ ಫೋಟೋಶಾಪ್ ನಿಮ್ಮ ವಿನ್ಯಾಸದ ಕೆಲಸಕ್ಕೆ ಪೂರಕವಾಗಿ ಮತ್ತು ಅವರಿಗೆ ಪರಿಪೂರ್ಣವಾದ ಮುಕ್ತಾಯವನ್ನು ನೀಡಲು. ಇಂದು ನಾವು ಈ ವ್ಯಾಪಕ ಟ್ಯುಟೋರಿಯಲ್ ನಲ್ಲಿ ನೋಡುತ್ತೇವೆ, ಅಡೋಬ್ ಫೋಟೋಶಾಪ್ ಬಳಸಿ ವೆಬ್ ಪುಟವನ್ನು ನಾವು ಹೇಗೆ ಲೇ layout ಟ್ ಮಾಡಬಹುದು. ಈ ಮೊದಲ ಭಾಗದಲ್ಲಿ ನಾವು ಫೋಟೋಶಾಪ್‌ನಿಂದ ಅಭಿವೃದ್ಧಿಪಡಿಸಬೇಕಾದ ಕೆಲಸದಲ್ಲಿ ಉಳಿಯುತ್ತೇವೆ, ಆದರೂ ಮುಂದಿನ ಕಂತುಗಳಲ್ಲಿ ನಾವು ಈ ಕಾರ್ಯವನ್ನು ಈಗಾಗಲೇ HTML ಕೋಡ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು ಎಂಬುದನ್ನು ನೋಡುತ್ತೇವೆ.

ನಮ್ಮ ವೈರ್‌ಫ್ರೇಮ್‌ನ ವಿನ್ಯಾಸದಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ

ವೆಬ್ ಪುಟದ ವಿನ್ಯಾಸ ಮತ್ತು ವಿನ್ಯಾಸದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಲು, ಮೂಲ ಅಂಶಗಳು ಏನೆಂದು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ನಾವು ಪ್ರಾರಂಭಿಸುವುದು ಬಹಳ ಮುಖ್ಯ, ಇದು ಅಸ್ಥಿಪಂಜರ. ಈ ರಚನೆಯು ಎಲ್ಲಾ ವಿಷಯವನ್ನು (ಪಠ್ಯ ಅಥವಾ ಮಲ್ಟಿಮೀಡಿಯಾ ಆಗಿರಲಿ) ಹಿಡಿದಿಡಲು ಬೆಂಬಲವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ನಮ್ಮ ಪುಟವನ್ನು ರೂಪಿಸುವ ಪ್ರತಿಯೊಂದು ವಿಭಾಗಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ ನಾವು ಅವುಗಳ ಮೇಲೆ ಸಂಪೂರ್ಣ ನಿಖರತೆಯೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ ಮತ್ತು ಸಾಧ್ಯವಾದಷ್ಟು ನಿಖರವಾದ ದೃಶ್ಯ ವಿನ್ಯಾಸವನ್ನು ಒದಗಿಸುತ್ತೇವೆ.

ನಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಹೊಂದಿರುವ ಆಯಾಮಗಳನ್ನು ನಾವು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ ಪೆಟ್ಟಿಗೆಯ ಅಥವಾ ಪೂರ್ಣ ಅಗಲ. ಪೆಟ್ಟಿಗೆಯ ವೆಬ್ ಪುಟವು ಸಣ್ಣ ಪಾತ್ರೆಯೊಳಗೆ ಇರುತ್ತದೆ ಮತ್ತು ಆದ್ದರಿಂದ ಅದರ ಸುತ್ತಲೂ ಸ್ಥಳಾವಕಾಶ ಕಾಣಿಸುತ್ತದೆ. ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ, ಪುಟವನ್ನು ಪುನರುತ್ಪಾದಿಸುವ ಸಾಧನದ ಸಂಪೂರ್ಣ ಪರದೆಯನ್ನು ಪೂರ್ಣ ಬುದ್ಧಿವಂತ ವೆಬ್ ಆಕ್ರಮಿಸುತ್ತದೆ. ಒಂದು ವಿಧಾನ ಅಥವಾ ಇನ್ನೊಂದರ ನಡುವೆ ಆಯ್ಕೆ ಮಾಡುವುದು ಕೇವಲ ಶೈಲೀಕೃತ ಪ್ರಶ್ನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯಿಸುತ್ತದೆ ಮತ್ತು ನಾವು ಕೆಲಸ ಮಾಡುತ್ತಿರುವ ಯೋಜನೆಯ ಅಗತ್ಯತೆಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ನಾವು ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಪೆಟ್ಟಿಗೆಯ ಮೋಡ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತೇವೆ, ಆದ್ದರಿಂದ ಇದು ಬ್ರೌಸರ್ ಒದಗಿಸಿದ ಎಲ್ಲಾ ಜಾಗವನ್ನು ಆಕ್ರಮಿಸುವುದಿಲ್ಲ.

ನಮ್ಮ ವೈರ್‌ಫ್ರೇಮ್ ರಚಿಸಲು, ನಾವು ಮೊದಲು ಮಾಡಬೇಕಾಗಿರುವುದು ಅಡೋಬ್ ಫೋಟೋಶಾಪ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಮೂದಿಸಿ ಮತ್ತು ನಮ್ಮ ಪುಟವನ್ನು ಹೊಂದಲು ನಾವು ಬಯಸುವ ಆಯಾಮಗಳನ್ನು ಸೇರಿಸುವುದು. ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ನಮ್ಮ ಪುಟವು 1280 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಗಲವಾಗಿರುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಅಂತಿಮ ಗಮ್ಯಸ್ಥಾನ ಅಥವಾ ನಮ್ಮ ಪುಟವನ್ನು ಪುನರುತ್ಪಾದಿಸಲು ನಾವು ಬಯಸುವ ಸಾಧನವನ್ನು ಅವಲಂಬಿಸಿ ಗಾತ್ರದ ಸಮಸ್ಯೆ ಬದಲಾಗಬಹುದು. ವೆಬ್ ವಿನ್ಯಾಸವು ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಬೇಕಾದರೆ ಅದು ಇರಬೇಕು ಎಂಬುದರಲ್ಲಿ ಸಂದೇಹವಿಲ್ಲ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಮತ್ತು ಇದು ಮಾರುಕಟ್ಟೆಯಲ್ಲಿನ ಎಲ್ಲಾ ಸಾಧನಗಳಿಗೆ ಹೊಂದಿಕೊಳ್ಳಬೇಕು. ಆದಾಗ್ಯೂ, ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಡೆಸ್ಕ್‌ಟಾಪ್ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಸಂತಾನೋತ್ಪತ್ತಿ ಮಾಡಲು ಹೊರಟಿರುವ ಮೂಲಮಾದರಿಯನ್ನು ರಚಿಸಲು ಕೆಲಸ ಮಾಡಲಿದ್ದೇವೆ. ಹಾಗಿದ್ದರೂ, ಸ್ಪಂದಿಸುವ ಸಮಸ್ಯೆಯನ್ನು ನಂತರ ಚರ್ಚಿಸಲಾಗುವುದು, ಇದೀಗ, ಈ ಉದಾಹರಣೆಯಲ್ಲಿ ಕೆಲಸ ಮಾಡಲು ಪರದೆಯ ಆಯಾಮಗಳ ಕ್ರಮಾನುಗತವಾಗಿದೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಅಡೋಬ್ ಫೋಟೋಶಾಪ್‌ನಲ್ಲಿ ಲ್ಯಾಂಡಿಂಗ್ ಪುಟದ ವಿನ್ಯಾಸವನ್ನು ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಅದನ್ನು HTML5 ಮತ್ತು CSS3 ಗೆ ಸ್ಥಳಾಂತರಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ. ಫೋಟೋಶಾಪ್‌ನಲ್ಲಿ ರಚಿಸಲಾದ ವಿನ್ಯಾಸವನ್ನು ಬಳಕೆದಾರರ ಚಲನೆಗಳಿಗೆ ಸ್ಪಂದಿಸುವಂತಹ ಬಳಸಬಹುದಾದ ಮತ್ತು ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ವಿನ್ಯಾಸವಾಗಿ ಪರಿವರ್ತಿಸುವುದು ಈ ಪುಟ್ಟ ಅಭ್ಯಾಸದ ಉದ್ದೇಶವಾಗಿದೆ.

ಮೊಬೈಲ್ ಫೋನ್‌ಗಳಿಗೆ ಮಾಪನಗಳು

ಐಫೋನ್ 4 ಮತ್ತು 4 ಎಸ್: 320 x 480

ಐಫೋನ್ 5 ಮತ್ತು 5 ಎಸ್: 320 x 568

ಐಫೋನ್ 6: 375 x 667

ಐಫೋನ್ 6+: 414 x 736

ನೆಕ್ಸಸ್ 4: 384 x 598

ನೆಕ್ಸಸ್ 5: 360 x 598

ಗ್ಯಾಲಕ್ಸಿ ಎಸ್ 3, ಎಸ್ 4, ಎಸ್ 5: 360 ಎಕ್ಸ್ 640

ಹೆಚ್ಟಿಸಿ ಒನ್: 360 ಎಕ್ಸ್ 640

ಮಾತ್ರೆಗಳ ಅಳತೆಗಳು

ಐಪ್ಯಾಡ್ ಎಲ್ಲಾ ಮಾದರಿಗಳು ಮತ್ತು ಐಪ್ಯಾಡ್ ಮಿನಿ: 1024 x 768

ಗ್ಯಾಲಕ್ಸಿ ಟ್ಯಾಬ್ 2 ಮತ್ತು 3 (7.0 ಇಂಚುಗಳು): 600 x 1024

ಗ್ಯಾಲಕ್ಸಿ ಟ್ಯಾಬ್ 2 ಮತ್ತು 3 (10.1 ಇಂಚುಗಳು): 800 x 1280

ನೆಕ್ಸಸ್ 7: 603 x 966

ನೆಕ್ಸಸ್ 10: 800 x 1280

ಮೈಕ್ರೋಸಾಫ್ಟ್ ಸರ್ಫೇಸ್ W8 RT: 768 x 1366

ಮೈಕ್ರೋಸಾಫ್ಟ್ ಸರ್ಫೇಸ್ ಡಬ್ಲ್ಯು 8 ಪ್ರೊ: 720 x 1280

ಡೆಸ್ಕ್‌ಟಾಪ್ ಕಂಪ್ಯೂಟರ್‌ಗಳಿಗೆ ಮಾಪನಗಳು

ಸಣ್ಣ ಪರದೆಗಳು (ಉದಾಹರಣೆಗೆ ನೆಟ್‌ಬುಕ್‌ಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ): 1024 x 600

ಮಧ್ಯಮ ಪರದೆಗಳು: 1280 x 720/1280 x 800

ದೊಡ್ಡ ಪರದೆಗಳು: 1400 ಪಿಕ್ಸೆಲ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ಅಗಲ, ಉದಾಹರಣೆಗೆ 1400 x 900 ಅಥವಾ 1600 x 1200.

ನಮ್ಮ ವೆಬ್ ಮೋಕ್‌ಅಪ್‌ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ವಿತರಿಸಲು ಮತ್ತು ವಿಭಾಗಗಳನ್ನು ನಿಯೋಜಿಸಲು ಪ್ರಾರಂಭಿಸಲು, ಓದಬಲ್ಲ ಮತ್ತು ಸುಮಧುರ ಮುಕ್ತಾಯವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಅನುಪಾತಗಳನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಮೇಲಿನ ಮೆನು ವೀಕ್ಷಣೆಯಲ್ಲಿ ನೀವು ಕಂಡುಕೊಳ್ಳಬಹುದಾದ ನಿಯಮಗಳು ಮತ್ತು ಮಾರ್ಗದರ್ಶಿ ಆಯ್ಕೆಗಳನ್ನು ನೀವು ಬಳಸುವುದು ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ. ಪ್ರಮಾಣಾನುಗುಣವಾಗಿ ಮತ್ತು ನಿಖರವಾಗಿ ಕೆಲಸ ಮಾಡಲು, ನಾವು ಶೇಕಡಾವಾರು ಕೆಲಸ ಮಾಡುವುದು ಉತ್ತಮ. ವಿಭಾಗದ ವಿಧಾನವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ನಾವು ವೀಕ್ಷಣೆ ಮೆನುವಿನ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿ ನಂತರ «ಹೊಸ ಮಾರ್ಗದರ್ಶಿ option ಆಯ್ಕೆಯ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುತ್ತೇವೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ನಾಲ್ಕು ಲಂಬ ವಿಭಾಗಗಳನ್ನು 25% ನಲ್ಲಿ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ನಮ್ಮ ಚಿತ್ರಗಳನ್ನು ಅಡಿಟಿಪ್ಪಣಿ ಮತ್ತು ನಮ್ಮ ಲೋಗೋದ ಚಿತ್ರವನ್ನು ಹೆಡರ್ ನಲ್ಲಿ ಇರಿಸಲು ನಾವು ಅವುಗಳನ್ನು ಉಲ್ಲೇಖವಾಗಿ ತೆಗೆದುಕೊಳ್ಳುತ್ತೇವೆ.

ನಮ್ಮನ್ನು ಆಕ್ರಮಿಸಿಕೊಳ್ಳುವ ಪ್ರತಿಯೊಂದು ಪ್ರದೇಶಗಳನ್ನು ಗೊತ್ತುಪಡಿಸಲು ಒಂದು ಕೋಡ್ ಇದೆ ಮಾದರಿ ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದೂ ಹೊಂದಿರುವ ಕಾರ್ಯ. ಉದಾಹರಣೆಗೆ, ಚಿತ್ರವು ಆಕ್ರಮಿಸಿಕೊಳ್ಳುವ ಪ್ರದೇಶವನ್ನು ಸೂಚಿಸಲು, ನಾವು ಒಂದು ರೀತಿಯ ಶಿಲುಬೆಯೊಂದಿಗೆ ಆಯತಗಳನ್ನು ರಚಿಸುತ್ತೇವೆ. ನಾವು ಒಂದು ನಿರ್ದಿಷ್ಟ ಪ್ರದೇಶದಲ್ಲಿ ವೀಡಿಯೊಗಳನ್ನು ಸೇರಿಸಲು ಬಯಸುತ್ತೇವೆ ಎಂದು ಸೂಚಿಸಲು, ನಾವು ನಮ್ಮ ಪಾತ್ರೆಯೊಳಗೆ ಆಟದ ಚಿಹ್ನೆಯನ್ನು ಸೇರಿಸುತ್ತೇವೆ. ಈ ಮೊದಲ ಉದಾಹರಣೆಯಲ್ಲಿ ನಾವು ಚಿತ್ರಗಳೊಂದಿಗೆ ಮಾತ್ರ ಕೆಲಸ ಮಾಡಲಿದ್ದೇವೆ, ಮೇಲಿನ ಕ್ಯಾಪ್ಚರ್‌ನಲ್ಲಿ ನೀವು ಆ ಪ್ರದೇಶವನ್ನು ನೋಡಬಹುದು ಲೋಗೋ ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಿಂದ.

ಇದು ನಮ್ಮ ಅಂತಿಮ ಫಲಿತಾಂಶವಾಗಿರುತ್ತದೆ ವೈರ್ಫ್ರೇಮ್. ನಾವು ನೋಡುವಂತೆ, ಇದನ್ನು ಚಿತ್ರದಿಂದ ಕೂಡಿದ ಹೆಡರ್ ಆಗಿ ವಿಂಗಡಿಸಲಾಗಿದೆ, ಇದರಲ್ಲಿ ಲೋಗೋ ಕಂಡುಬರುತ್ತದೆ ಮತ್ತು ಇದು ಮುಖಪುಟಕ್ಕೆ ಎರಡು ಟ್ಯಾಬ್‌ಗಳು, ಸರ್ಚ್ ಎಂಜಿನ್ ಮತ್ತು ಹುಡುಕಾಟ ಪೆಟ್ಟಿಗೆಯಲ್ಲಿ ನಾಲ್ಕು ಗುಂಡಿಗಳೊಂದಿಗೆ ಲಿಂಕ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಈಗಾಗಲೇ ದೇಹದೊಳಗೆ, ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿರುವ ವಿಷಯದ ಪ್ರಕಾರವನ್ನು ವರ್ಗೀಕರಿಸುವ ವಿಭಜಿಸುವ ಪಟ್ಟಿಯಿಂದ ಕೂಡಿದ ಸೈಡ್ ಬಾರ್ ಮತ್ತು ವರ್ಗಗಳ ಸರಣಿಯನ್ನು ನಾವು ಸೇರಿಸಿದ್ದೇವೆ. ನಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ಇರುವ ನಮೂದುಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಸಂಖ್ಯೆಯೊಂದಿಗಿನ ಮತ್ತೊಂದು ವಿಭಾಗ, ಮತ್ತು ಅಂತಿಮವಾಗಿ ನಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ಹೆಚ್ಚು ಪ್ರತಿನಿಧಿಸುವ ಮೆಟಾ ಟ್ಯಾಗ್‌ಗಳು ಅಥವಾ ಲೇಬಲ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಪಟ್ಟಿ.

ವಿಷಯ ಪ್ರದೇಶದಲ್ಲಿ, ಒಳಗೊಂಡಿರುವ ವಿಭಾಗದಿಂದ ಇದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ ಸ್ವಯಂ ನಿರ್ವಹಿಸಬಹುದಾದ ವಿಷಯ, ನಮ್ಮ ಲೇಖನಗಳ ವಿಷಯವನ್ನು ನಾವು ಕಾಣುತ್ತೇವೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಬ್ರೆಡ್ ತುಂಡುಗಳು ಅಥವಾ ಬ್ರೆಡ್ ಕ್ರಂಬ್ಸ್ (ಇದು ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಸಾವಯವ ರಚನೆ, ಲೇಖನದ ಶೀರ್ಷಿಕೆ, ಮೆಟಾಡೇಟಾ, ಪಠ್ಯದ ಅಂಗವಾಗಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಅದರೊಳಗೆ ಚಿತ್ರವನ್ನು ಸೇರಿಸಲಾಗಿದೆ.

ಅಡಿಟಿಪ್ಪಣಿಯಾಗಿ ನಾವು ನಾಲ್ಕು ಪುಟಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ ಅದು ನಮ್ಮ ಪುಟದ ಇತರ ಪ್ರದೇಶಗಳಿಗೆ ಲಿಂಕ್ ಆಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಇಲ್ಲಿ ನಾವು ಲೋಗೊಗಳು ಅಥವಾ ಇತರ ಆಸಕ್ತಿದಾಯಕ ವಿಭಾಗಗಳನ್ನು ಸೇರಿಸಬಹುದು. ವಾಸ್ತವದಲ್ಲಿ, ಈ ಪ್ರದೇಶವು ಹೆಚ್ಚು ಇಷ್ಟವಾಗುತ್ತದೆ ಪ್ರಿಫೂಟರ್, ಬಳಕೆಯ ನೀತಿ, ಕಾನೂನು ಸೂಚನೆ ಮತ್ತು ಹಕ್ಕುಸ್ವಾಮ್ಯದೊಂದಿಗೆ ಅಡಿಟಿಪ್ಪಣಿ ಸ್ವಲ್ಪ ಮುಂದೆ ಹೋಗುತ್ತದೆ.

ನಮ್ಮ ಪುಟದ ಮೂಲ ರಚನೆ ಅಥವಾ ಅಸ್ಥಿಪಂಜರವನ್ನು ನಾವು ವ್ಯಾಖ್ಯಾನಿಸಿದ ನಂತರ, ನಾವು ಮುಂದಿನ ಹಂತಕ್ಕೆ ಹೋಗಬೇಕಾಗುತ್ತದೆ. ಇದು ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಪ್ರತಿಯೊಂದು ಕ್ಷೇತ್ರಗಳ ಸರಿಯಾದ ವಿನ್ಯಾಸವನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಬೇರೆ ರೀತಿಯಲ್ಲಿ ಹೇಳುವುದಾದರೆ, ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಅಂತಿಮವಾಗಿ ಸೇರಿಸಲಾಗುವ ವಿಷಯದೊಂದಿಗೆ ನಾವು ಈ ಪ್ರತಿಯೊಂದು ಪ್ರದೇಶಗಳನ್ನು "ಭರ್ತಿ" ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ. ವೈರ್‌ಫ್ರೇಮ್‌ನಲ್ಲಿ ಕೆಲಸ ಮಾಡುವ ಮೊದಲು ನಾವು ಈ ಅಂಶಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಬಾರದು ಎಂದು ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ ಏಕೆಂದರೆ ಈ ಕ್ರಮದಲ್ಲಿ ನಾವು ಇದನ್ನು ಮಾಡಿದರೆ, ನಾವು ನಂತರ ಅವುಗಳ ಪ್ರಮಾಣವನ್ನು ಮಾರ್ಪಡಿಸಬೇಕಾಗುತ್ತದೆ. ನಮ್ಮ ಚಿತ್ರಗಳನ್ನು ವಿರೂಪಗೊಳಿಸುವ ಅಪಾಯವನ್ನು ನಾವು ನಡೆಸುತ್ತೇವೆ ಮತ್ತು ಪ್ರತಿಯೊಂದು ಅಂಶಗಳ ವಿನ್ಯಾಸವನ್ನು ಮತ್ತೆ ಮಾಡಬೇಕಾಗಿರುವುದು ಸಮಯ ವ್ಯರ್ಥ ಅಥವಾ ಕಡಿಮೆ ಗುಣಮಟ್ಟದ ಫಲಿತಾಂಶವಾಗಿ ಪರಿಣಮಿಸುತ್ತದೆ.

ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ವಿನ್ಯಾಸವು ತುಂಬಾ ಸರಳವಾಗಿರುತ್ತದೆ. ನಾವು ಬಳಸುತ್ತೇವೆ ವಸ್ತು ವಿನ್ಯಾಸ ನಿಯಮಗಳು, ಈ ಅಭ್ಯಾಸವನ್ನು ಉದಾಹರಿಸಲು ನಾವು Google ಲೋಗೊವನ್ನು ಬಳಸಲಿದ್ದೇವೆ. ಈ ಟ್ಯುಟೋರಿಯಲ್ ನ ಉದ್ದೇಶ ತಾಂತ್ರಿಕ ಜ್ಞಾನವನ್ನು ವಿವರಿಸುವುದು ಎಂದು ನಾನು ಸ್ಪಷ್ಟಪಡಿಸಬೇಕು, ಆದ್ದರಿಂದ ಈ ಸಂದರ್ಭದಲ್ಲಿ ಸೌಂದರ್ಯದ ಫಲಿತಾಂಶವು ಅಪ್ರಸ್ತುತವಾಗುತ್ತದೆ. ನೀವು ನೋಡುವಂತೆ, ನಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ನಾವು ಈ ಹಿಂದೆ ನಿರ್ಧರಿಸಿದ ಎಲ್ಲಾ ಕ್ಷೇತ್ರಗಳೊಂದಿಗೆ ನಾವು ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ಜಾಗವನ್ನು ತುಂಬುತ್ತಿದ್ದೇವೆ. ಆದಾಗ್ಯೂ, ನಾವು ಕೊನೆಯ ಗಳಿಗೆಯಲ್ಲಿ ಸಣ್ಣ ಮಾರ್ಪಾಡು ಮಾಡಿದ್ದೇವೆ. ನೀವು ಗಮನಿಸಿರಬಹುದಾದಂತೆ, ನಮ್ಮ ಲೋಗೋದ ಗಾತ್ರವನ್ನು ನಾವು ಗಣನೀಯವಾಗಿ ಕಡಿಮೆ ಮಾಡಿದ್ದೇವೆ ಮತ್ತು ಮೇಲಿನ ಮೆನುವಿನೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸಂಪರ್ಕಿಸುವ ಕೆಳಗಿನ ಹೆಡರ್ ಪ್ರದೇಶದಲ್ಲಿ ನಾವು ವಿಭಜಿಸುವ ರೇಖೆಯನ್ನು ಸೇರಿಸಿದ್ದೇವೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಸಂಪನ್ಮೂಲ ಬ್ಯಾಂಕಿನಿಂದ ಗುಂಡಿಗಳು ಮತ್ತು ವಸ್ತುಗಳನ್ನು ಬಳಸಿದ್ದೇವೆ. ವಿನ್ಯಾಸಕರಾಗಿ ನಾವು ಅವುಗಳನ್ನು ನಾವೇ ವಿನ್ಯಾಸಗೊಳಿಸಬಹುದು, (ವಿಶೇಷವಾಗಿ ಬ್ರಾಂಡ್ ಇಮೇಜ್ ಅಥವಾ ಲೋಗೊ ಪ್ರಸ್ತುತಪಡಿಸಿದ ಟಾನಿಕ್ ಅನ್ನು ಹೋಲುವಂತೆ ನಾವು ಬಯಸಿದರೆ ಈ ಆಯ್ಕೆಯನ್ನು ಶಿಫಾರಸು ಮಾಡಲಾಗುತ್ತದೆ).

ಈ ಉದಾಹರಣೆಯನ್ನು ತಿಳಿಸಲು ನಾವು ಎರಡು ವಿಭಿನ್ನ ಹಂತಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಲಿದ್ದೇವೆ ಎಂಬುದನ್ನು ನಾವು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ. ಒಂದೆಡೆ, ನಾವು ವಸ್ತುಗಳ ಮೇಲೆ ಕೆಲಸ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಮತ್ತೊಂದೆಡೆ ವೆಬ್‌ಸೈಟ್‌ನ ನೋಟ. ಅಂದರೆ, ಒಂದು ಕಡೆ ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಅಸ್ಥಿಪಂಜರದಲ್ಲಿ ಮತ್ತು ಇನ್ನೊಂದೆಡೆ ಎಲ್ಲದರಲ್ಲೂ ಈ ಅಸ್ಥಿಪಂಜರವು ಬೆಂಬಲಿಸುವ ತೇಲುವ ಅಂಶಗಳು. ನಮ್ಮ ಸೈಡ್‌ಬಾರ್ ಆಕ್ರಮಿಸಿಕೊಳ್ಳುವ ಪ್ರದೇಶ, ಪ್ರಿಫೂಟರ್ ಅಥವಾ ದೇಹದಿಂದ ಹೆಡರ್ ಅನ್ನು ವಿಭಜಿಸುವ ಡಿವೈಡಿಂಗ್ ಬಾರ್‌ನಂತಹ ಎಲ್ಲೂ ತೇಲುವ ಪ್ರದೇಶಗಳಿಲ್ಲ ಎಂಬುದನ್ನು ನೀವು ಗಮನಿಸಬಹುದು.

1, 2, 3 ಮತ್ತು 4 ರಚನೆಗಳು ಇದರ ಭಾಗವಾಗಿರುತ್ತವೆ ಹಿನ್ನೆಲೆ ನಮ್ಮ ವೆಬ್ ಪುಟದ, ಆದ್ದರಿಂದ ವಾಸ್ತವದಲ್ಲಿ ಅಡೋಬ್ ಫೋಟೋಶಾಪ್‌ನಿಂದ ರಫ್ತು ಮಾಡುವುದು ನಮಗೆ ಅನಿವಾರ್ಯವಲ್ಲ, ನಾವು ಅದನ್ನು ಮಾಡಬಹುದಾದರೂ, ಅದು ಅಗತ್ಯವಿಲ್ಲ. ಅದು ಬಂದಾಗ ಚಪ್ಪಟೆ ಬಣ್ಣಗಳು (ಫ್ಲಾಟ್ ವಿನ್ಯಾಸ ಮತ್ತು ವಸ್ತು ವಿನ್ಯಾಸದ ಅಗತ್ಯ ಲಕ್ಷಣಗಳಲ್ಲಿ ಒಂದಾದ ಅವುಗಳನ್ನು ಸಿಎಸ್ಎಸ್ ಸ್ಟೈಲ್‌ಶೀಟ್ ಬಳಸಿ ಕೋಡ್ ಮೂಲಕ ಸಂಪೂರ್ಣವಾಗಿ ಅನ್ವಯಿಸಬಹುದು). ಆದಾಗ್ಯೂ, ನಮ್ಮ HTML ಕೋಡ್‌ನಲ್ಲಿ ನಂತರದ ಸೇರ್ಪಡೆಗಾಗಿ ಉಳಿದ ಅಂಶಗಳನ್ನು ಉಳಿಸಬೇಕು. ಈ ಸಣ್ಣ ರೇಖಾಚಿತ್ರದಲ್ಲಿ ನಾವು ಪುಟದ ಹಿನ್ನೆಲೆಗೆ ಸೇರಿದ ಪ್ರದೇಶಗಳನ್ನು ಸಹ ಪುನರುತ್ಪಾದಿಸಿದ್ದೇವೆ ಇದರಿಂದ ನಮ್ಮ ಸೈಟ್‌ನ ಅಂತಿಮ ನೋಟ ಏನೆಂಬುದರ ಬಗ್ಗೆ ನಮಗೆ ಸ್ಪಷ್ಟವಾದ ಕಲ್ಪನೆ ಇದೆ.

ನೀವು ಅರಿತುಕೊಳ್ಳಲು ಸಾಧ್ಯವಾಗುವಂತೆ, ಅಡೋಬ್ ಫೋಟೋಶಾಪ್‌ನಲ್ಲಿ ಈ ಯೋಜನೆಯನ್ನು ರಚಿಸುವ ಅರ್ಥವು ಪ್ರತಿಯೊಂದು ಅಂಶದ ನೈಜ ಆಯಾಮವನ್ನು ಪಡೆಯುವುದು ಮತ್ತು ಪ್ರತಿ ಅಂಶದ ವ್ಯವಸ್ಥೆ ಮತ್ತು ರಚನೆಯನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುವುದು. ಸಹಜವಾಗಿ, ಪ್ರಕ್ರಿಯೆಯ ಈ ಹಂತದಲ್ಲಿ ಪಠ್ಯ ವಿಷಯಕ್ಕೆ ಯಾವುದೇ ಸ್ಥಾನವಿಲ್ಲ ನಮ್ಮ ಕೋಡ್ ಸಂಪಾದಕದಿಂದ ಸರಬರಾಜು ಮಾಡಲಾಗಿದೆ. ಈ ಅಭ್ಯಾಸದಲ್ಲಿ, ನಾವು ಗುಂಡಿಗಳು ಮತ್ತು ಸ್ಥಿರ ಅಂಶಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಲಿದ್ದೇವೆ ಎಂದು ನಾವು ಗಮನಸೆಳೆಯಬೇಕು, ಆದರೂ ಸಾಮಾನ್ಯವಾಗಿ ಇವುಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬೂಟ್‌ಸ್ಟ್ರಾಪ್‌ನಂತಹ ಚೌಕಟ್ಟುಗಳಿಂದ ಅಥವಾ ನೇರವಾಗಿ jquery ನಿಂದ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.

ನಮ್ಮ ವೆಬ್ ಪುಟವನ್ನು ರೂಪಿಸುವ ಪ್ರತಿಯೊಂದು ಅಂಶಗಳನ್ನು ನಾವು ರಚಿಸಿದ ನಂತರ, ಅವುಗಳನ್ನು ರಫ್ತು ಮಾಡಲು ಮತ್ತು ಅವುಗಳನ್ನು HTML ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್‌ನಲ್ಲಿರುವ ಚಿತ್ರಗಳ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಉಳಿಸಲು ಪ್ರಾರಂಭಿಸುವ ಸಮಯ. ನಿಮ್ಮ ವೈರ್‌ಫ್ರೇಮ್‌ನಿಂದ ರಫ್ತು ಮಾಡಲು ನೀವು ಬಳಸಿಕೊಳ್ಳುವುದು ಬಹಳ ಮುಖ್ಯ, ಏಕೆಂದರೆ ಅಸ್ಥಿಪಂಜರದ ಸಂರಚನೆಯ ಆಧಾರದ ಮೇಲೆ ನೀವು ಕೆಲವು ಮೂಲ ಅಂಶಗಳನ್ನು ಮಾರ್ಪಡಿಸುವ ಅಗತ್ಯವಿರುತ್ತದೆ. (ಉದಾಹರಣೆಗೆ, ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು ಮೂಲ ಗುಂಡಿಗಳ ಗಾತ್ರ, ಲೋಗೋ ಮತ್ತು ಸಂಯೋಜನೆಯ ಭಾಗವಾಗಿರುವ ಹೆಚ್ಚಿನ ಅಂಶಗಳನ್ನು ಕಡಿಮೆ ಪ್ರದೇಶದಲ್ಲಿನ ಚಿತ್ರಗಳನ್ನು ಬದಲಾಯಿಸಿದ್ದೇವೆ).

ಯಾವುದೇ ವಸ್ತುವನ್ನು ಅವುಗಳ ಆಯಾಮಗಳೊಂದಿಗೆ ಮತ್ತು ನಿಖರವಾದ ರೀತಿಯಲ್ಲಿ ಉಳಿಸಲು ಸ್ವತಂತ್ರವಾಗಿ ಉಳಿಸಲು ನಾವು ಕಲಿಯುವುದು ಬಹಳ ಮುಖ್ಯ. ಯಾವುದೇ ದೋಷ, ಎಷ್ಟೇ ಕಡಿಮೆ ಇದ್ದರೂ, ನಿಮ್ಮ ವೆಬ್ ಪುಟದ ಭಾಗವಾಗಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ಪ್ರಭಾವಿಸಬಹುದು. ಅವು ಪರಸ್ಪರ ಸಂಬಂಧ ಹೊಂದಿವೆ ಮತ್ತು ಪರಿಪೂರ್ಣ ಆಯಾಮಗಳನ್ನು ಹೊಂದಿರಬೇಕು ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ, ಇದರಿಂದಾಗಿ ಅವುಗಳನ್ನು ಅಂತಿಮ ವೆಬ್‌ನಲ್ಲಿ HTML ನಿಂದ ನಮೂದಿಸಬಹುದು. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ನಾವು ಈ ಕೆಳಗಿನ ಅಂಶಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಕತ್ತರಿಸಿ ಉಳಿಸಬೇಕಾಗುತ್ತದೆ:

• ನಮ್ಮ ಲಾಂ .ನ.
• ಎಲ್ಲಾ ಗುಂಡಿಗಳು (ಮುಖ್ಯ ಮೆನು ಮತ್ತು ಉಳಿದ ಭಾಗ).
• ಎಲ್ಲಾ ಚಿತ್ರಗಳು.

ನಾವು ಇದನ್ನು ಹಲವು ವಿಧಗಳಲ್ಲಿ ಮಾಡಬಹುದು ಮತ್ತು ಬಹುಶಃ ನಿಮಗೆ ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾದ ಪರ್ಯಾಯವನ್ನು ನೀವು ಕಾಣಬಹುದು. ಆದರೆ ನೀವು ಈ ರೀತಿಯ ವಿನ್ಯಾಸವನ್ನು ಮಾಡಲು ಹೊರಟಿರುವುದು ಇದೇ ಮೊದಲು, ನೀವು ಈ ಕೆಳಗಿನ ಸಲಹೆಗಳನ್ನು ಅನುಸರಿಸಲು ನಾನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ.

• ಮೊದಲಿಗೆ, ನಮ್ಮ ವೈರ್‌ಫ್ರೇಮ್ ಅನ್ನು ಒಳಗೊಂಡಿರುವ ಪಿಎಸ್‌ಡಿ ಫೈಲ್ ಇರುವ ಫೋಲ್ಡರ್‌ಗೆ ನೀವು ಹೋಗಬೇಕು ಮತ್ತು ನೀವು ರಫ್ತು ಮಾಡಲು ಹೊರಟಿರುವ ಅಂಶಗಳಂತೆ ಅದನ್ನು ನಕಲು ಮಾಡಿ. ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಮೂಲದಿಂದ 12 ಪ್ರತಿಗಳನ್ನು ರಚಿಸಿದ್ದೇವೆ ಮತ್ತು ಅವುಗಳನ್ನು ಒಂದೇ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಉಳಿಸಿದ್ದೇವೆ. ಮುಂದೆ, ನೀವು ಪ್ರತಿಯೊಂದು ಪ್ರತಿಗಳನ್ನು ಮರುಹೆಸರಿಸುತ್ತೀರಿ ಮತ್ತು ಅವುಗಳಲ್ಲಿ ಪ್ರತಿಯೊಂದೂ ಅದರಲ್ಲಿರುವ ಅಂಶದ ಹೆಸರನ್ನು ನಿಯೋಜಿಸುತ್ತೀರಿ. ನಮ್ಮ 12 ಪ್ರತಿಗಳನ್ನು ಮರುಹೆಸರಿಸಲಾಗುವುದು: ಲೋಗೋ, ಮೆನು ಬಟನ್ 1, ಮೆನು ಬಟನ್ 2, ಸರ್ಚ್ ಬಾರ್, ಮೇಲಿನ ಬಟನ್ 1, ಮೇಲಿನ ಬಟನ್ 2, ಮೇಲಿನ ಬಟನ್ 3 ಮತ್ತು ಮೇಲಿನ ಬಟನ್ 4. ಉಳಿದ ನಾಲ್ಕು ಎಂದು ಮರುಹೆಸರಿಸಲಾಗುವುದು: ಚಿತ್ರ 1, ಚಿತ್ರ 2, ಚಿತ್ರ 3 ಮತ್ತು ಚಿತ್ರ 4.
• ಇದನ್ನು ಮಾಡಿದ ನಂತರ ನಾವು ಲೋಗೋ ಹೆಸರಿನೊಂದಿಗೆ ಫೈಲ್ ಅನ್ನು ತೆರೆಯುತ್ತೇವೆ.
• ನಾವು ನಮ್ಮ ಲೇಯರ್ ಪ್ಯಾಲೆಟ್‌ಗೆ ಹೋಗಿ ನಮ್ಮ ಲೋಗೊವನ್ನು ಹೊಂದಿರುವ ಲೇಯರ್ ಅನ್ನು ಪತ್ತೆ ಮಾಡುತ್ತೇವೆ. ನಂತರ ನಾವು ಒತ್ತುತ್ತೇವೆ Ctrl / Cmd ನಾವು ಹೇಳಿದ ಪದರದ ಥಂಬ್‌ನೇಲ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವಾಗ. ಈ ರೀತಿಯಾಗಿ ಲೋಗೋವನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಆಯ್ಕೆ ಮಾಡಲಾಗುತ್ತದೆ.
• ಮುಂದಿನ ಹಂತವು ಫೋಟೋಶಾಪ್‌ಗೆ ಹೇಳುವುದು ಆ ಲೋಗೋವನ್ನು ನಿಖರವಾದ ರೀತಿಯಲ್ಲಿ ಕತ್ತರಿಸಬೇಕೆಂದು ನಾವು ಬಯಸುತ್ತೇವೆ. ಇದಕ್ಕಾಗಿ ನಾವು ಕೀ ಅಥವಾ ಆಜ್ಞೆಯಿಂದ ಕ್ರಾಪಿಂಗ್ ಟೂಲ್‌ಗೆ ಮಾತ್ರ ಕರೆ ಮಾಡಬೇಕಾಗುತ್ತದೆ C.
• ನಾವು ಇದನ್ನು ಮಾಡಿದ ನಂತರ ನಾವು ಕಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸಲು ನಮ್ಮ ಎಂಟರ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡುತ್ತೇವೆ.
• ಈಗ ನಾವು ಸೇವ್ ಹೇಗೆ ಕ್ಲಿಕ್ ಮಾಡಲು ಮೇಲಿನ ಫೈಲ್ ಮೆನುಗೆ ಹೋಗುತ್ತೇವೆ. ನಾವು ಹೆಸರನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತೇವೆ, ಅದು ಈ ಸಂದರ್ಭದಲ್ಲಿ «ಲೋಗೋ be ಆಗಿರುತ್ತದೆ ಮತ್ತು ನಾವು ಸ್ವರೂಪವನ್ನು ನಿಯೋಜಿಸುತ್ತೇವೆ PNG ಸೇರಿಸಲಾಗಿದೆ, ವೆಬ್‌ನಲ್ಲಿ ಉತ್ತಮ ಗುಣಮಟ್ಟವನ್ನು ನೀಡುವ ಫೈಲ್ ಆಗಿರುವುದರಿಂದ.
• ನಾವು ಎಲ್ಲಾ ಪ್ರತಿಗಳು ಮತ್ತು ಅಂಶಗಳೊಂದಿಗೆ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪುನರಾವರ್ತಿಸುತ್ತೇವೆ. ನೀವು ಟ್ರಿಮ್ ಮಾಡಿದಾಗ, ನಮ್ಮ ಪ್ಯಾಲೆಟ್‌ನಲ್ಲಿ ಉಳಿದ ಪದರಗಳಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ ಅಗೋಚರ ಅಥವಾ ತೆಗೆದುಹಾಕಲಾಗಿದೆ. ಈ ರೀತಿಯಾಗಿ ನಾವು ಪ್ರತಿ ಅಂಶವನ್ನು ಪಾರದರ್ಶಕ ಹಿನ್ನೆಲೆಯೊಂದಿಗೆ ಉಳಿಸಬಹುದು.

ಈ ಸಂದರ್ಭದಲ್ಲಿ ನಾವು ಲೇಯರ್‌ಗಳ ಪ್ಯಾಲೆಟ್‌ನಿಂದ ನಮ್ಮ ಮೆನು ಬಟನ್ 2 ಅನ್ನು ಆಯ್ಕೆ ಮಾಡುತ್ತಿದ್ದೇವೆ. ನಮ್ಮ ಬಟನ್‌ನ ಮಿತಿಗಳನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೇಗೆ ಆರಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನೀವು ಸ್ಕ್ರೀನ್‌ಶಾಟ್‌ನಲ್ಲಿ ನೋಡಬಹುದು.

ಸಿ ಕೀಲಿಯಿಂದ ನಾವು ಬೆಳೆ ಸಾಧನವನ್ನು ಆಯ್ಕೆ ಮಾಡಿದ ನಂತರ, ನಮ್ಮ ಕ್ಯಾನ್ವಾಸ್ ಅನ್ನು ನಮ್ಮ ಗುಂಡಿಯ ಆಯಾಮಗಳಿಗೆ ಮಾತ್ರ ಕಡಿಮೆ ಮಾಡಲಾಗುತ್ತದೆ.

ನಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಭಾಗವಾಗಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ಒಂದೊಂದಾಗಿ ಉಳಿಸುವ ಸಮಯ ಮತ್ತು ಅವುಗಳನ್ನು ಚಿತ್ರಗಳ ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಸೇರಿಸುವ ಸಮಯ ಮತ್ತು ನಾವು ನಂತರ ಬಳಸುತ್ತೇವೆ. ನಾವು ನಮ್ಮ ಕೋಡ್‌ನಿಂದ ಕರೆಗಳನ್ನು ಮಾಡುತ್ತೇವೆ ಮತ್ತು ನಾವು ನಮ್ಮ ವಿನ್ಯಾಸದೊಂದಿಗೆ ಮುಂದುವರಿಯುತ್ತೇವೆ ಆದರೆ ಇಂದಿನಿಂದ ನಮ್ಮ ಕೋಡ್ ಸಂಪಾದಕದಿಂದ.

ವೆಬ್ ಪುಟವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲು ಹಲವು ಸಾಧನಗಳು ಮತ್ತು ಪರ್ಯಾಯಗಳು ಇದ್ದರೂ ಮತ್ತು ಅದು ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಅರ್ಥಗರ್ಭಿತವಾಗಿಸುತ್ತದೆ, ನಾವು ಇದನ್ನು ಮಾಡಲು ಕಲಿಯುವುದು ಬಹಳ ಮುಖ್ಯ ಕೈಪಿಡಿ. ಈ ರೀತಿಯಲ್ಲಿ ವೆಬ್ ಪುಟದ ವಿನ್ಯಾಸದ ಹಿಂದಿನ ಮೂಲಭೂತ ಅಂಶಗಳು ಯಾವುವು ಎಂದು ನಾವು ಕಲಿಯುತ್ತೇವೆ.

ಸಾರಾಂಶ:

1. ವಿನ್ಯಾಸ ರಚನೆ ನೀವು ರವಾನಿಸಲು ಬಯಸುವ ವಿಷಯ ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ನೀವು ರಚಿಸಬೇಕಾದ ವಿಭಾಗಗಳಿಗೆ ವಿಶೇಷ ಗಮನ ನೀಡುವ ವೆಬ್‌ಸೈಟ್.
2. ನಿಮ್ಮ ಅಸ್ಥಿಪಂಜರದ ಮೇಲೆ ಕೆಲಸ ಮಾಡಿ ಅಥವಾ ವೈರ್ಫ್ರೇಮ್ ಅಡೋಬ್ ಫೋಟೋಶಾಪ್ನಿಂದ ವಿಷಯಗಳು ಯಾವ ಪ್ರದೇಶಗಳಲ್ಲಿ ಗೋಚರಿಸುತ್ತವೆ ಮತ್ತು ಅವುಗಳ ಸ್ವರೂಪವನ್ನು ಸೂಚಿಸುತ್ತದೆ.
3. ನೀವು ಈ ಹಿಂದೆ ಅಭಿವೃದ್ಧಿಪಡಿಸಿದ ಕ್ರಮಗಳು ಮತ್ತು ಬ್ರ್ಯಾಂಡ್‌ಗಳನ್ನು ಅವಲಂಬಿಸಿ, ಪ್ರಾರಂಭಿಸಿ ವಿನ್ಯಾಸ ವೆಬ್ನ ಮೇಲ್ಮೈ. ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ಒಳಗೊಂಡಿದೆ (ತೇಲುವ ಮತ್ತು ಸ್ಥಿರ ಎರಡೂ). ಅನುಗುಣವಾದ ಗುಂಡಿಗಳು, ಲೋಗೊ ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಮರೆಯಬೇಡಿ.
4. ಯೋಜನೆಯ ಭಾಗವಾಗಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ಒಂದೊಂದಾಗಿ ಕತ್ತರಿಸಿ. ಅವರು ಸರಿಯಾದ ಕ್ರಮಗಳನ್ನು ಹೊಂದಿದ್ದಾರೆ ಮತ್ತು ನಂತರ ಅವರು ನಿಮಗೆ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
5. ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ಸ್ವರೂಪದಲ್ಲಿ ಉಳಿಸಿ PNG ಸೇರಿಸಲಾಗಿದೆ ಪ್ರಾಜೆಕ್ಟ್ ಫೋಲ್ಡರ್ ಒಳಗೆ ಚಿತ್ರಗಳ ಫೋಲ್ಡರ್ನಲ್ಲಿ ಎಚ್ಟಿಎಮ್ಎಲ್.
6. ಈ ಯೋಜನೆಯು ವೆಬ್ ವಿಂಡೋಗೆ output ಟ್‌ಪುಟ್ ಹೊಂದಿರುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ ಆದ್ದರಿಂದ ನೀವು ಬಣ್ಣ ಮೋಡ್ ಅನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಂಡು ಅನ್ವಯಿಸುವುದು ಬಹಳ ಮುಖ್ಯ RGB.
7. ನೀವು ಕೆಲಸಕ್ಕೆ ಹೋಗುವ ಮೊದಲು ನೀವು ಮೆಚ್ಚುವ ಇತರ ವೆಬ್ ಪುಟಗಳಿಂದ ಸ್ಫೂರ್ತಿ ಪಡೆಯಿರಿ ಮತ್ತು ನಿಮ್ಮ ತಂಡದ ಸದಸ್ಯರೊಂದಿಗೆ ಇದನ್ನು ಚರ್ಚಿಸಲು ಮರೆಯಬೇಡಿ. ಒಂದು ವೇಳೆ ಇದು ಕ್ಲೈಂಟ್‌ಗಾಗಿ ಒಂದು ಯೋಜನೆಯಾಗಿದ್ದರೆ, ಅದಕ್ಕೆ ಅಂಟಿಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸಿ ಬ್ರೀಫಿಂಗ್ ಸಾಧ್ಯವಾದಷ್ಟು.