网站设计与网页制作基础指南_第1页
网站设计与网页制作基础指南_第2页
网站设计与网页制作基础指南_第3页
网站设计与网页制作基础指南_第4页
网站设计与网页制作基础指南_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网站设计与网页制作基础指南TOC\o"1-2"\h\u4506第一章网站设计与网页制作概述 2127251.1网站设计与网页制作基本概念 2300831.2网站类型与设计原则 3111141.3网页制作流程 331920第二章HTML基础 428392.1HTML概述 419612.2常用HTML标签 4203072.3HTML文档结构 5251262.4HTML表单与表格 518025第三章CSS样式表 6299113.1CSS概述 69213.2CSS选择器 6179573.3CSS盒模型 6151673.4CSS布局 718981第四章JavaScript基础 796044.1JavaScript概述 7171874.2基本语法与数据类型 7172184.2.1基本语法 7162264.2.2数据类型 8325684.3函数与事件处理 8261214.3.1函数 8137714.3.2事件处理 852084.4DOM操作 9163574.4.1获取元素 955244.4.2修改元素内容 9168174.4.3修改元素样式 921328第五章网页布局与设计 9174715.1网页布局原理 922995.2常用布局方法 1064955.3网页配色与字体设计 1073855.4网页交互设计 1117198第六章网页设计与制作工具 1145636.1HTML编辑器 1195136.2CSS预处理器 12247746.3JavaScript框架与库 12129986.4网页设计插件与工具 1215664第七章响应式网页设计 13122567.1响应式设计概述 13103587.2媒体查询与布局 13310977.3响应式图片与视频 1441107.4响应式设计最佳实践 1516803第八章网页优化与SEO 15221048.1网页优化概述 15162678.2网页功能优化 15253278.2.1压缩资源文件 1574178.2.2利用浏览器缓存 15324298.2.3图片优化 15298958.2.4网络请求优化 1683898.2.5代码优化 1646378.3搜索引擎优化 16157608.3.1关键词优化 16241778.3.2内容优化 16279218.3.3外链优化 1673218.3.4内链优化 16118288.3.5移动端优化 16167638.4网站安全与维护 16300298.4.1数据备份 16325348.4.2防止SQL注入 16264788.4.3防止跨站脚本攻击 16319958.4.4更新软件和插件 16290648.4.5监控网站运行状态 1720851第九章网页制作实例 1785639.1静态网页制作实例 17104619.1.1实例背景 1762249.1.2实例步骤 17135889.2动态网页制作实例 19268509.2.1实例背景 1932859.2.2实例步骤 1925169.3移动端网页制作实例 2290859.3.1实例背景 227739.3.2实例步骤 229209.4网站项目实战 25302829.4.1实战背景 2528479.4.2实战步骤 2526452第十章网站设计与网页制作发展趋势 25775610.1网页设计趋势 2591110.2网页制作技术发展 261188910.3网络安全与隐私保护 262924210.4未来网页设计与制作方向 26第一章网站设计与网页制作概述1.1网站设计与网页制作基本概念网站设计与网页制作是现代网络技术中不可或缺的两个环节。网站设计（WebDesign）指的是在互联网环境中，针对特定目标群体，通过视觉设计、用户界面设计、用户体验设计等方法，创建出具有吸引力和实用性的网站。而网页制作（WebDevelopment）则是指利用HTML、CSS、JavaScript等编程语言和技术，将网站设计转化为可在网络浏览器中查看的实际网页。网站设计关注的是网站的整体布局、色彩搭配、字体选择以及用户交互等方面，旨在提高网站的可用性和美观度。网页制作则侧重于网站的技术实现，包括页面结构的构建、功能的实现以及与后端系统的集成。1.2网站类型与设计原则网站类型多种多样，根据其功能、内容和目标用户的不同，可以分为以下几类：商业网站：旨在推广产品或服务，实现商业盈利。企业网站：用于展示企业形象、介绍企业文化和业务范围。教育网站：提供教育资源，支持在线学习和教育交流。网站：发布信息，提供公共服务。个人网站：展示个人才华、兴趣或生活点滴。在进行网站设计时，应遵循以下原则：用户体验优先：保证网站易于导航、内容清晰，用户能够快速找到所需信息。响应式设计：网站应能够适应不同设备和屏幕尺寸，提供良好的用户体验。视觉一致性：网站的整体风格、色彩和字体应保持一致，增强品牌识别度。可访问性：网站应遵守无障碍设计原则，保证所有用户，包括残障人士，都能够使用。1.3网页制作流程网页制作流程通常包括以下几个阶段：需求分析：了解客户需求，确定网站的目标、功能和内容。网站规划：根据需求分析结果，制定网站结构、页面布局和内容框架。设计稿制作：利用图形设计软件，如Photoshop或Sketch，制作网站的视觉设计稿。前端开发：根据设计稿，使用HTML、CSS和JavaScript等技术，编写网页代码。后端开发：根据功能需求，开发网站的后端逻辑，如数据库管理、用户认证等。测试与调试：对网站进行全面的测试，保证其功能正常运行，无错误或漏洞。上线与维护：将网站部署到服务器，进行上线，同时定期进行内容更新和技术维护。通过以上流程，可以保证网站设计与网页制作的质量和效率，满足用户和客户的需求。第二章HTML基础2.1HTML概述HTML（HyperTextMarkupLanguage，超文本标记语言）是一种用于创建和展示万维网网页的标准标记语言。它通过一系列标记标签（Markuptags）来定义网页内容的结构和布局。HTML是构成万维网的核心语言之一，与CSS（层叠样式表）和JavaScript共同协作，为用户提供丰富多彩的网络体验。HTML的发展经历了多个版本，从HTML1.0到HTML5，每个版本都在功能和功能上有所提升。HTML5是目前最新的标准，它提供了更多的功能，如对多媒体的原生支持、更丰富的API等。2.2常用HTML标签HTML标签是HTML文档的基本构成单元，用于标识网页中的不同元素。以下是一些常用的HTML标签：``：根标签，表示整个HTML文档。`<head>`：头部标签，包含元数据、样式和脚本等。``：标题标签，定义网页的标题。`<body>`：主体标签，包含网页的所有可见内容。`<h1>``<h6>`：标题标签，分别表示一级到六级标题。`<p>`：段落标签，用于定义文本段落。`<a>`：标签，用于创建超。`<img>`：图像标签，用于嵌入图像。`<div>`：分区标签，用于对页面进行分区。`<span>`：行内标签，用于对文本进行局部修饰。2.3HTML文档结构一个标准的HTML文档通常包括以下几个部分：`<!DOCTYPE>`：文档类型声明，用于告诉浏览器使用哪个HTML版本。``：根元素，包裹整个HTML文档。`<head>`：头部元素，包含文档的元数据、样式和脚本。``：定义文档的标题。`<meta>`：定义文档的元数据，如字符编码、页面描述等。`<link>`：外部样式表。`<script>`：嵌入或JavaScript脚本。`<body>`：主体元素，包含所有可见的网页内容。`<header>`、`<footer>`、`<main>`、`<section>`等：结构化标签，用于定义页面的不同部分。2.4HTML表单与表格HTML表单和表格是网页设计中常用的元素，用于收集用户输入和展示数据。表单（Form）：用于用户输入数据，与服务器进行交互。`<form>`：表单标签，定义表单的起点和终点。`<input>`：输入标签，用于创建不同类型的用户输入控件，如文本框、单选按钮、复选框等。`<textarea>`：文本区域标签，用于创建多行文本输入。`<select>`和`<option>`：下拉列表标签，用于创建下拉列表。表格（Table）：用于以表格形式展示数据。`<table>`：表格标签，定义表格的起点和终点。`<tr>`：表格行标签，定义表格的一行。`<th>`：表格头标签，定义表头单元格。`<td>`：表格数据标签，定义表格中的单元格。通过合理使用这些标签，可以构建出功能丰富、结构清晰的HTML文档。第三章CSS样式表3.1CSS概述CSS（CascadingStyleSheets，层叠样式表）是一种用于描述HTML或XML文档样式的样式表语言。CSS的主要作用是分离文档的结构和表现，使得网页的布局和外观可以独立于内容进行设计和调整。CSS在网页设计中占据着举足轻重的地位，它能够使网页更加美观、易于维护，并提高浏览器的渲染效率。CSS由规则集组成，每个规则集包含选择器和一组属性。选择器用于定位HTML元素，属性则定义了元素的样式。CSS规则可以通过内联、内部和外部三种方式应用于HTML文档。3.2CSS选择器CSS选择器是用于定位HTML元素的关键部分，它决定了CSS规则应用于哪些元素。以下是几种常见的CSS选择器：（1）元素选择器：直接使用HTML元素的名称作为选择器，如`p`、`h1`等。（2）类选择器：使用类属性（`class`）的值作为选择器，如`.example`。（3）ID选择器：使用ID属性（`id`）的值作为选择器，如`unique`。（4）属性选择器：根据元素的属性和属性值进行选择，如`[type="text"]`。（5）伪类选择器：根据元素的特定状态进行选择，如`:hover`、`:focus`等。（6）组合选择器：将多个选择器组合在一起，如`p.example`、`.exampleunique`等。3.3CSS盒模型CSS盒模型是用于描述HTML元素在页面中的布局和定位的一种模型。每个HTML元素都可以被视为一个矩形盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。（1）内容（content）：元素中实际显示的内容，如文本、图片等。（2）内边距（padding）：元素内容与边框之间的空白区域。（3）边框（border）：围绕元素内容和内边距的边框线。（4）外边距（margin）：元素边框与其他元素之间的空白区域。通过调整盒模型的各个属性，可以实现元素的定位、间距和布局效果。3.4CSS布局CSS布局是指使用CSS技术对网页中的元素进行定位和排列的过程。以下是几种常见的CSS布局方法：（1）浮动布局：通过设置元素的`float`属性，使其脱离文档流，并根据浮动方向排列。（2）定位布局：使用`position`属性对元素进行定位，包括绝对定位（`absolute`）、相对定位（`relative`）和固定定位（`fixed`）等。（3）表格布局：将元素放入表格中，通过表格的行列属性进行布局。（4）Flex布局：一种更为灵活的布局方式，通过`display:flex`属性将容器设置为Flex容器，然后使用Flex属性对子元素进行布局。（5）Grid布局：CSSGrid布局是一种基于网格的二维布局方法，通过`display:grid`属性将容器设置为Grid容器，然后使用Grid属性对子元素进行布局。通过合理运用这些CSS布局方法，可以创建出多种多样的网页布局效果，满足不同场景的需求。第四章JavaScript基础4.1JavaScript概述JavaScript是一种轻量级的编程语言，它是一种解释型、基于对象的脚本语言，被广泛应用于网页开发中，以实现网页的动态效果和交互功能。JavaScript由BrendanEich在1995年设计，最初被命名为LiveScript。随后，为了与Java语言区分，将其更名为JavaScript。JavaScript能够在浏览器中运行，与HTML和CSS共同构成现代网页开发的三驾马车。4.2基本语法与数据类型4.2.1基本语法JavaScript的基本语法包括变量声明、数据类型、运算符、控制结构等。下面简要介绍这些基本语法元素。（1）变量声明：使用var、let或const关键字声明变量，如：javascriptvarx=10;lety=20;constz=30;（2）数据类型：JavaScript中的数据类型分为基本数据类型和引用数据类型。基本数据类型包括：Undefined、Null、Boolean、Number、String和Symbol。引用数据类型主要是Object。（3）运算符：JavaScript中的运算符包括算术运算符、比较运算符、逻辑运算符等。（4）控制结构：JavaScript中的控制结构包括条件语句、循环语句等。4.2.2数据类型（1）Undefined：未定义，表示变量未初始化。（2）Null：空值，表示故意赋予变量一个空值。（3）Boolean：布尔值，包括true和false。（4）Number：数字，包括整数、浮点数、NaN（NotaNumber）和Infinity。（5）String：字符串，表示文本。（6）Symbol：符号，表示唯一的、不可变的数据类型。4.3函数与事件处理4.3.1函数函数是JavaScript中实现代码复用的基本单元。使用function关键字定义函数，如：javascriptfunctiongreet(name){console.log("Hello,"name"!");}调用函数时，使用函数名和括号，如：javascriptgreet("Alice");4.3.2事件处理事件处理是指对用户在网页上的操作（如、按键等）做出响应。JavaScript中，可以使用addEventListener方法为元素添加事件监听器，如：javascriptdocument.getElementById("myButton").addEventListener("click",function(){alert("Buttonclicked!");});4.4DOM操作DOM（DocumentObjectModel）是指文档对象模型，它提供了一个标准化的方法来访问和操作网页中的文档结构。下面简要介绍DOM操作的基本方法。4.4.1获取元素（1）通过ID获取元素：使用getElementById方法。javascriptvarelement=document.getElementById("myElement");（2）通过类名获取元素：使用getElementsByClassName方法。javascriptvarelements=document.getElementsByClassName("myClass");（3）通过标签名获取元素：使用getElementsByTagName方法。javascriptvarelements=document.getElementsByTagName("div");4.4.2修改元素内容使用innerText属性或textContent属性修改元素内容。javascriptelement.innerText="Newcontent";4.4.3修改元素样式使用style属性修改元素样式。javascriptelement.style.color="red";第五章网页布局与设计5.1网页布局原理网页布局是网页设计中的重要环节，其基本原理在于如何合理地组织网页中的各种元素，包括文字、图片、视频等，以达到既美观又实用的效果。在进行网页布局设计时，应遵循以下原则：（1）整体性原则：网页布局应具有整体性，使页面元素协调一致，形成统一的视觉风格。（2）对比原则：通过对比手法，突出页面中的重要元素，提高页面视觉效果。（3）对称原则：在布局中运用对称手法，使页面元素分布均匀，增加美感。（4）简洁原则：避免页面过于复杂，尽量简化布局，提高页面加载速度。（5）易用性原则：布局设计应考虑用户使用习惯，提高页面易用性。5.2常用布局方法以下是几种常用的网页布局方法：（1）网格布局：将页面划分为一系列等宽的网格，将元素放置在网格中，实现整齐有序的布局。（2）通栏布局：将页面分为头部、主体、尾部三个部分，各部分宽度一致，适用于宽度固定的页面。（3）流体布局：根据浏览器窗口宽度自动调整页面布局，使页面在不同设备上都能保持良好的显示效果。（4）响应式布局：通过媒体查询等技术，使页面在不同设备上具有不同的布局方式，以适应不同设备的显示需求。（5）弹性布局：使用弹性盒模型（Flexbox）进行布局，使元素在不同屏幕尺寸下自动调整大小和位置。5.3网页配色与字体设计网页配色与字体设计是网页设计中不可忽视的两个方面，以下是一些建议：（1）配色：（1）选择主色调：根据网站主题和内容，选择一种主色调，使页面具有统一的视觉风格。（2）辅助色彩：在主色调的基础上，选择一到两种辅助色彩，用于突出重要元素或增加层次感。（3）色彩搭配：避免使用过多颜色，保持页面简洁。同时注意色彩搭配的和谐，避免产生视觉疲劳。（2）字体设计：（1）选择合适的字体：根据网站内容和使用场景，选择合适的字体，如黑体、宋体、楷体等。（2）字体大小：根据用户阅读习惯，设置合适的字体大小，一般为1416px。（3）行间距和段落间距：适当调整行间距和段落间距，使文本更加易读。5.4网页交互设计网页交互设计是指网页与用户之间的交互方式，以下是一些建议：（1）导航设计：设计清晰的导航菜单，使用户能够快速找到所需内容。（2）表单设计：简化表单填写过程，减少用户输入负担，提高表单提交成功率。（3）动画效果：适当使用动画效果，增加页面趣味性，提高用户体验。（4）反馈机制：及时给用户反馈，如加载动画、提示信息等，提高用户满意度。（5）交互逻辑：设计合理的交互逻辑，使页面交互符合用户预期，避免产生困惑。第六章网页设计与制作工具在网页设计与制作过程中，使用合适的工具能够极大地提高工作效率和设计质量。以下是一些常用的网页设计与制作工具的介绍。6.1HTML编辑器HTML编辑器是网页设计的基础工具，用于编写和编辑HTML代码。以下是一些流行的HTML编辑器：Notepad：这是一款免费的文本和编辑器，支持多种编程语言，包括HTML、CSS和JavaScript。它具有语法高亮、代码折叠和自动完成等功能，非常适合初学者和专业人士。VisualStudioCode：由微软开发的免费、开编辑器，支持多种编程语言。它提供了丰富的插件和扩展，能够帮助开发者更高效地编写代码。SublimeText：这是一款轻量级、跨平台的文本编辑器，同样支持多种编程语言。它的界面简洁，功能强大，如“多行编辑”和“代码片段”等，能够提升开发效率。6.2CSS预处理器CSS预处理器能够扩展CSS的功能，使开发者能够编写更结构化和更易于维护的代码。以下是一些常用的CSS预处理器：Sass：一款功能强大的CSS预处理器，它使用`.scss`文件扩展名，支持变量、嵌套、混合、函数等功能，能够提高CSS代码的可维护性和复用性。Less：与Sass类似，Less也是一款CSS预处理器，它使用`.less`文件扩展名，语法简洁，易于上手，同样支持变量、嵌套、混合等功能。Stylus：Stylus是一种基于Sass的CSS预处理器，它使用`.styl`文件扩展名，语法更加灵活，支持多种编程语言特性，如条件语句和循环等。6.3JavaScript框架与库JavaScript框架与库能够简化前端开发流程，提供一系列工具和组件，以下是一些流行的JavaScript框架与库：jQuery：一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档的遍历、事件处理、动画和Ajax交互等操作。React：由Facebook开发的前端JavaScript库，用于构建用户界面，特别是单页应用程序。它使用组件化的开发方式，提高了代码的可维护性和可复用性。Vue.js：一个渐进式JavaScript框架，易于上手，能够帮助开发者构建复杂的前端应用程序。它提供了响应式数据绑定和组合视图组件的功能。6.4网页设计插件与工具网页设计插件与工具能够帮助设计师更高效地完成设计任务，以下是一些常用的工具：Photoshop：AdobePhotoshop是图形设计领域的行业标准，它提供了强大的图像编辑功能，适用于网页设计的视觉效果制作。Sketch：一款专为Mac用户设计的矢量图形编辑器，它提供了丰富的设计工具和插件，适合网页和移动应用程序的界面设计。Bootstrap：一个基于HTML、CSS和JavaScript的前端框架，它提供了一套预定义的CSS样式和组件，可以帮助设计师快速构建响应式网页。通过上述工具的使用，网页设计师和开发者能够更加高效地完成网页设计与制作任务，提升工作质量和效率。第七章响应式网页设计7.1响应式设计概述移动设备的普及，响应式网页设计已成为现代网站设计的重要环节。响应式设计旨在通过一种灵活的布局方式，使网站能够适应各种屏幕尺寸和分辨率。这种设计方法不仅提高了用户体验，还减少了开发成本。响应式设计主要涵盖以下几个方面：（1）灵活的布局：使用百分比、em、rem等相对单位代替固定单位，使布局能够适应不同屏幕尺寸。（2）媒体查询：通过CSS媒体查询检测设备特性，为不同设备提供特定的样式。（3）可伸缩的图片和视频：保证图片和视频在不同屏幕尺寸下能够自动缩放。7.2媒体查询与布局媒体查询是响应式设计中的核心概念，它允许我们根据设备特性（如屏幕宽度、分辨率等）应用不同的CSS样式。以下是一些常见的媒体查询示例：（1）针对不同屏幕宽度的布局：cssmedia(maxwidth:768px){/适应平板设备的布局/}media(maxwidth:480px){/适应手机设备的布局/}（2）针对横竖屏切换的布局：cssmedia(orientation:landscape){/横屏布局/}media(orientation:portrait){/竖屏布局/}（3）针对不同设备类型的布局：cssmedia(devicewidth:768px){/适应iPad布局/}media(devicewidth:1024px){/适应桌面布局/}7.3响应式图片与视频在响应式设计中，图片和视频的适应性问题尤为重要。以下是一些处理响应式图片和视频的方法：（1）使用CSS的`maxwidth`和`height`属性使图片自适应容器大小：cssimg{maxwidth:100%;height:auto;}（2）使用HTML的`<picture>`元素为不同屏幕尺寸提供不同大小的图片：<picture><sourcemedia="(minwidth:1200px)"srcset="large.jpg"><sourcemedia="(minwidth:768px)"srcset="medium.jpg"><imgsrc="small.jpg"alt="描述"></picture>（3）对于视频，可以使用HTML的`<video>`元素并结合`<source>`元素为不同设备提供不同分辨率的视频：<videocontrols><sourcesrc="large.mp4"type="video/mp4"media="(minwidth:1200px)"><sourcesrc="medium.mp4"type="video/mp4"media="(minwidth:768px)"><sourcesrc="small.mp4"type="video/mp4">您的浏览器不支持视频标签。</video>7.4响应式设计最佳实践为了实现更优质的响应式设计，以下是一些最佳实践：（1）采用移动优先的设计策略，优先考虑移动设备用户的体验。（2）使用流体网格布局，保证布局在不同屏幕尺寸下保持一致。（3）充分利用CSS媒体查询，为不同设备提供合适的样式。（4）对图片和视频进行优化，保证在不同设备上都能高效加载。（5）保持代码的可维护性，避免过度复杂的设计。（6）进行多设备测试，保证网站在各类设备上都能正常显示。第八章网页优化与SEO8.1网页优化概述互联网的快速发展，用户对网站的要求越来越高。为了提高用户体验和网站在搜索引擎中的排名，网页优化成为了网站建设的重要环节。网页优化主要包括对网页内容、结构和功能的优化，其目的在于提高网页的加载速度、可读性和可维护性，从而为用户提供更好的浏览体验。8.2网页功能优化网页功能优化是提高用户体验的关键因素之一。以下为几种常见的网页功能优化方法：8.2.1压缩资源文件对CSS、JavaScript和HTML文件进行压缩，减少文件大小，提高加载速度。8.2.2利用浏览器缓存通过设置HTTP缓存头，使浏览器缓存已加载的资源，减少重复加载。8.2.3图片优化对网站图片进行压缩，减小文件大小，同时保持图片质量。8.2.4网络请求优化合并CSS、JavaScript文件，减少HTTP请求次数，提高加载速度。8.2.5代码优化优化JavaScript和CSS代码，避免不必要的重复和冗余，提高代码执行效率。8.3搜索引擎优化搜索引擎优化（SEO）是提高网站在搜索引擎中排名的重要手段。以下为几种常见的搜索引擎优化方法：8.3.1关键词优化合理设置网站标题、描述和关键词，使网页内容与关键词相关。8.3.2内容优化提高网站内容质量，增加有价值的信息，保持内容更新。8.3.3外链优化增加高质量的外部，提高网站权威性。8.3.4内链优化合理设置网站内部，提高网站结构的合理性。8.3.5移动端优化针对移动端用户，优化网站布局、功能和交互，提高移动端用户体验。8.4网站安全与维护网站安全与维护是保证网站稳定运行的重要环节。以下为几种常见的网站安全与维护措施：8.4.1数据备份定期备份网站数据，以防数据丢失或损坏。8.4.2防止SQL注入对用户输入进行过滤和验证，防止SQL注入攻击。8.4.3防止跨站脚本攻击对用户输入进行过滤和编码，防止跨站脚本攻击。8.4.4更新软件和插件定期更新网站软件和插件，修复已知漏洞。8.4.5监控网站运行状态通过监控工具，实时了解网站运行状态，及时发觉并解决问题。通过以上措施，可以提高网站的安全性和稳定性，为用户提供更好的浏览体验。第九章网页制作实例9.1静态网页制作实例9.1.1实例背景本节将通过一个简单的静态网页制作实例，介绍如何使用HTML、CSS和JavaScript实现一个个人博客页面。页面包含标题、文章内容、侧边栏等基本元素。9.1.2实例步骤（1）创建HTML文件创建一个名为index.的文件，并在其中编写以下代码：<!DOCTYPE><lang="zhCN"><head><metacharset="UTF8"><metaname="viewport"content="width=devicewidth,initialscale=1.0">个人博客</><linkrel="stylesheet"href="styles.css"></head><body><header><h1>个人博客</h1></header><main><article><h2>文章标题</h2><p>文章内容</p></article><aside><h3>侧边栏标题</h3><ul><li><ahref="">1</a></li><li><ahref="">2</a></li><li><ahref="">3</a></li></ul></aside></main><footer><p>版权所有©2023</p></footer></body></>（2）创建CSS文件接着，创建一个名为styles.css的文件，并在其中编写以下代码：cssbody{fontfamily:Arial,sansserif;margin:0;padding:0;}header,main,footer{padding:20px;}header{backgroundcolor:4CAF50;color:white;}main{display:flex;flexwrap:wrap;}article{flex:1;marginright:20px;}aside{flex:1;}footer{backgroundcolor:333;color:white;textalign:center;}（3）创建JavaScript文件创建一个名为script.js的文件，并在其中编写以下代码：javascript//在此处添加JavaScript代码9.2动态网页制作实例9.2.1实例背景本节将通过一个简单的动态网页制作实例，介绍如何使用HTML、CSS、JavaScript以及后端技术（如Node.js）实现一个在线留言板。9.2.2实例步骤（1）创建HTML文件创建一个名为message_board.的文件，并在其中编写以下代码：<!DOCTYPE><lang="zhCN"><head><metacharset="UTF8"><metaname="viewport"content="width=devicewidth,initialscale=1.0">在线留言板</><linkrel="stylesheet"href="styles.css"></head><body><header><h1>在线留言板</h1></header><main><formid="messageform"><inputtype="text"id="username"placeholder="请输入您的用户名"><textareaid="message"placeholder="请输入您的留言内容"></textarea><buttontype="submit">提交留言</button></form><ulid="messagelist"><!留言列表></ul></main><footer><p>版权所有©2023</p></footer><scriptsrc="script.js"></script></body></>（2）创建CSS文件创建一个名为styles.css的文件，并在其中编写以下代码：css/代码与9.1节实例中的CSS文件相同/（3）创建JavaScript文件创建一个名为script.js的文件，并在其中编写以下代码：javascriptdocument.addEventListener('DOMContentLoaded',function(){constmessageForm=document.getElementById('messageform');constmessageList=document.getElementById('messagelist');messageForm.addEventListener('submit',function(event){event.preventDefault();constusername=document.getElementById('username').value;constmessage=document.getElementById('message').value;//发送请求到服务器，保存留言fetch('/savemessage',{method:'POST',headers:{'ContentType':'application/json'},body:JSON.stringify({username,message)}).then(response=>response.json()).then(data=>{if(data.success){//清空表单document.getElementById('username').value='';document.getElementById('message').value='';//添加留言到列表constlistItem=document.createElement('li');listItem.textContent=`${username}:${message}`;messageList.appendChild(listItem);}});});});9.3移动端网页制作实例9.3.1实例背景本节将通过一个简单的移动端网页制作实例，介绍如何使用HTML、CSS和JavaScript实现一个移动端新闻列表页面。9.3.2实例步骤（1）创建HTML文件创建一个名为news_list.的文件，并在其中编写以下代码：<!DOCTYPE><lang="zhCN"><head><metacharset="UTF8"><metaname="viewport"content="width=devicewidth,initialscale=1.0">移动端新闻列表</><linkrel="stylesheet"href="styles.css"></head><body><header><h1>新闻列表</h1></header><main><ulid="newslist"><!新闻列表></ul></main><footer><p>版权所有©2023</p></footer><scriptsrc="script.js"></script></body></>（2）创建CSS文件创建一个名为styles.css的文件，并在其中编写以下代码：css/代码与9.1节实例中的CSS文件相同，但需要添加移动端样式/body{fontfamily:Arial,sansserif;margin:0;padding:0;}header,main,footer{padding:10px;}header{backgroundcolor:4CAF50;color:white;}main{padding:010px;}newslist{liststyle:none;padding:0;}newslistli{padding:10px;borderbottom:1pxsolidddd;}footer{backgroundcolor:333;color:white;textalign:center;}media(maxwidth:600px){header,main,footer{padding:5px;}}（3）创建JavaScript文件创建一个名为script.js的文件，并在其中编写以下代码

人人文库> 全部分类> 办公材料 > 办公文档

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论