前端设计与开发 课件 模块1 Web基础知识

模块1Web基础知识“寻找家乡记忆”网站制作准备任务1.1任务描述家乡是梦想出发的地方，情系家乡沉淀依恋，是当代学子寄托乡愁、找寻鼓舞力量的地方。家乡的一声乡音、一弯明月、美景、名人古迹等无不承载着在外学子的乡源情怀。通过整理素材，了解家乡的文化历史，厚植乡源情怀；通过制作网页，将家乡厚重历史挖掘和宣传相结合，以专业系家乡情源。任务分析在创建“寻找家乡记忆”网站之前，首先要对网页、网站及网页的基本构成元素有所了解，然后选择并安装一款适合的网页开发工具、掌握网站的建设流程，最后建立站点并根据需要创建目录、整理素材。相关知识网页和网站是两个相关但不同的概念，网站就是网页的集合。也就是说，网站的设计者先把整个网站的结构规划好，再依据结构制作出不同的网页，并让网页间彼此相连，这种完整的结构就称为“网站”。1.1.1认识网页网页基础概念01网页定义网页是互联网上由HTML等语言编写的页面，经浏览器编译展示信息，含文字、图像、动画等元素02首页功能首页是网站的门面，负责导航和展示最新消息，引导浏览者快速找到感兴趣的主题并跳转至详细内容1.1.2网页与网站静态网页与动态网页内容固定，需手动更新HTML，维护困难，信息更新慢静态网页内容视觉动态如.GIF动画，无交互，功能限制大，搜索引擎友好静态网页动态效果无数据库支持，信息量大时维护困难，交互性差静态网页维护动态网页的特点01动态网页定义服务器根据用户请求生成内容，与数据库交互，使用ASP、JSP、PHP等技术02动态网页特点基于数据库，减少维护，实现用户注册、登录等功能，按需生成页面网页是网站的组成部分，网站由多个网页集合而成，如新浪网含新闻、财经等多板块，每个板块有多网页网页是单一页面，网站是多个网页的集合，网站有整体结构和导航，网页则侧重内容展示，二者在规模和功能上存在差异网页是展示网站内容和功能的页面，由HTML、CSS、JavaScript等语言编写，可包含文章、图片、音频或视频等元素网页展示信息、播放多媒体，还提供交互功能如在线购物、用户认证。网站是这些网页的集合，包含丰富媒体资源和后台技术，构成互联网应用生态系统网页与网站基础网页与网站区别内容功能网页是独立的HTML文件或网址部分，网站是多个相关联网页的整体，彼此可相互链接独立性1.1.3网页的基本构成元素网页包含了许多元素，内容丰富，引人入胜，其基本构成元素包括文本、图像、多媒体、超链接等1.文本网页主要通过文字传达信息，可设置字体、字号、颜色等属性改变文本视觉效果2.图像图像可以用来丰富网页的内容，提高用户体验。通过插入图片，可以让网页更加生动、直观，让用户更容易理解网页的内容。同时，图片也可以用来美化网页，让网页看起来更加吸引人。在网页中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的图像文件。多媒体是计算机结合声音、图像、视频等信息载体的交互技术，网页中的多媒体常指音频和视频功能3.多媒体超链接是网页中指向其他网页或位置的链接关系，按路径可分为内部、锚点和外部链接4.超链接1.1.4网站建设流程在建设网站之前应该有一个整体的规划和目标。在规划好网页的大概结构后，就可以着手设计页面了。因此，前期策划对网站的运作至关重要。在规划一个网站时，可以使用网站制作流程图，先把每个页面的内容大致列出来1.分析客户需求明确网站目标，与客户沟通网站主题，是制作网站前的关键步骤2.规划站点01网站规划结构采用树形目录结构，如家乡记忆网站，规划家乡简介、美食、风景、人物等一级目录，每个最低级模块对应一个网页，包含文字、图片、动画等元素02文件存放方式每个一级模块对应一个文件夹，下设图片、动画等子文件夹，共用部分单独存放，便于管理和使用3.搜集素材搜集素材是创建网站的关键步骤，包括图片、文字、音频、视频和动画，它们能丰富网站内容，吸引浏览者4.页面设计根据客户需求和品牌形象创建页面布局，考虑颜色方案、图像元素和交互元素，确保设计符合网站受众喜好常见网页布局形式包括“厂”字型、清晰主次，适合企业二级页面；“口”字型，布局紧凑信息丰富；“同”字型，适用于大型网站首页；“海报”型，吸引人但下载慢；“三”字型，视觉冲击强；“框架”型，结构清晰一目了然前端页面开发完成后，程序员进行后台程序开发，依据设计师和前端工程师的成果编写代码5.程序开发网站发布后需持续维护和更新，以确保运行顺畅和内容的新鲜度，吸引并保持用户访问7.后期维护及更新完成网页设计后，需进行功能性测试、完整性测试和安全性测试，以确保所有链接正常工作，并兼容各种设备和浏览器6.测试网站1.1.5网页的设计基础1.网页设计的基本原则网站内容应合理分类，便于访问者快速定位，提升用户体验分类合理网站设计需围绕明确主题，所有页面紧扣目的，确保内容聚焦主题明确首页设计至关重要，直接影响第一印象，需精心布局吸引访问者首页设计互动性良好及时更新和维护避免滥用技术图像应用技巧良好互动性增强用户参与感，设计应响应用户操作，提升网站吸引力恰当使用图像可美化网页，注意图像大小与格式，优化加载速度技术应服务于内容，避免过度使用导致用户反感，保持页面简洁定期更新网站内容，保持信息新鲜，吸引并留住访问者2.网页设计的色彩搭配01色彩原理颜色源于光的折射，网页色彩以RGB为主，非彩色为黑、白、灰，色彩变化产生数百万种色相02网页色彩搭配技巧统一色彩调整透明度或饱和度，使用对比色丰富页面，选用一个色系或黑色搭配彩色，避免色彩过多，确保对比度3.网页设计要点整体布局干净整洁，条理清晰，避免过多色彩与动画，确保浏览舒适信息价值提供有价值内容，如资讯、娱乐或联系方式，吸引并留住浏览者下载速度主页打开速度关键，控制图像大小，确保快速加载，提升用户体验文字可读性使用通用字体，如宋体、微软雅黑，确保正文易读，特殊字体限标题导航清晰采用超文本或图片链接，放置左侧，底部设简单导航，便于浏览操作1.HTML5概述HTML是互联网上编写网页的主要语言，它是纯文本类型的，允许通过文本编辑器查看和编辑源代码HTML简介01网页浏览器主要负责解释HTML代码，将文字转化为丰富多彩的页面。精简高效的HTML源代码对网页显示速度至关重要浏览器与HTML02HTML是通过简洁的语法创建超文本链接和多媒体信息的解释型语言，浏览器在打开网页时动态生成效果HTML的工作原理03任务规划HTML（HypertextMarkupLanguage，超文本标记语言）是Internet上用于编写网页的主要语言。HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。可以用任何文本编辑器（如Windows系统中的“记事本”程序）打开，查看其中的HTML源代码。查看网页内容必须使用网页浏览器，浏览器的主要作用就是解释超文本文件中的代码，将单调乏味的代码显示为丰富多彩的内容。HTML的语法非常简单，它采用简洁明了的语法命令，通过对各种标记、元素、属性、对象等进行设置，建立图形、音频、视频等多媒体信息及其他超文本的链接。1.HTML5概述2.常用开发工具及安装VSCode是一款由微软公司开发的免费、开源的跨平台代码编辑器。它在软件开发和编程任务中广受欢迎，提供了丰富的功能和灵活的扩展性。VisualStudioCode01WebStorm是一款由JetBrains公司开发的集成开发环境（IDE），主要用于前端开发。WebStorm02HBuilderX是一款基于Eclipse的HTML5开发工具，它支持多种前端框架和语言，如Vue.js、React、TypeScript等。HBuilder03SublimeText是轻量级代码编辑器，支持多平台，具备友好界面和丰富插件，可自定义设置，提高编码效率SublimeText04VSCode下载从VSCode官网上下载VSCode安装包HBuliderX安装右击该安装包，在弹出的快捷菜单中选择“以管理员身份运行”命令，打开“安装-MicrosoftVisualStudioCode”窗口，开始安装。任务实施1.站点的创建和素材的整理可以通过站点对网站的相关页面及各类素材进行统一管理，还可以借助站点管理实现将文件上传到网页服务器中。2.网页文档的创建与保存网页文档的创建网页文档的保存单击主菜单内的“文件”菜单中的“保存”命令，或者按Ctrl+S组合键，即可保存网页文档。在通常情况下，第一次保存文件时，VSCode会自动将文件保存在与当前工作区相关的文件夹中。3.网站的运行LiveServer是一个具有实时加载功能的小型服务器，可以实现自动刷新，也就是文件重新编辑、保存后可以即时看到最