期末大作业!静态html网页设计制作|宫崎骏网页,一共5个页面,HTML+css+...
页面规划：首页：展示宫崎骏动画的精华内容，包括动态轮播图展示动画封面或精彩瞬间，实现页面跳转链接到各个子页面，并嵌入视频播放功能，增加用户互动性。同时，设置一键返回顶部按钮，提升用户体验。动画介绍页面：详细介绍宫崎骏的各部动画作品，包括剧情简介、角色介绍、制作背景等。
页面静态化有什么好处
页面静态化有以下多方面的好处：提高页面加载速度：静态页面不涉及服务器端的动态处理，可以直接从服务器传输到用户浏览器，从而显著提高页面加载速度。降低服务器负载：静态页面无需服务器进行计算和动态生成，因此可以减少服务器的CPU和内存使用，有效降低服务器负载。
总之，静态化页面不仅可以提升访问速度，同时也有利于提升用户体验。在后台体现访问脱离数据库，减轻了数据库的访问压力。虽然静态化可以提升程序性能，但是它并不是提升性能的根本原因，就像电脑一样，只有高端cup、显卡以及内存是远远不够的，还要看电脑整体的性能。
页面静态化也就是说，将动态的网页地址（如asp、aspx、php、JSP）全部修改成静态的网页地址（html）。如把index.PHP修改成index.html、show.php？id=改成show.html？id=。这样做的好处是让百度蜘蛛能够更好的读懂你页面的内容，让网页能得到更好展示。让页面的加载速度更加快了，也减少了服务器的压力。
页面静态化技术是一种有效的网站优化手段。通过对网站的静态化处理，可以减少很多动态页面的运行次数，从而减轻了服务器的压力，提升了网站的性能和响应速度。同时，静态化还可以让搜索引擎更好地抓取网站内容，提高网站的排名和流量，对于网站seo也有很大的帮助。
可以看出静态页面会使网站更加稳定，增加网站的信任度。网页静态化有利于提高速度 SEO网站优化的一个很重要的因素就是网站打开速度的快慢，打开速度越快，SEO优化效果越好，众所周知动态页面打开都是要调用数据库内容，这样就影响了网站速度，而静态页面则不用，减少了环节，提高了网站反映速度。
而纯html静态页面就没有那么多要求，无论什么样的web环境放置后均可以正常运行。而且单单从成本上考量，静态网站不需要语言支持、不需要数据库支持，其网站空间采购费用也要稍低一些。静态化网站更加安全可靠 是的，这个毋庸置疑，纯静态化的html网页会更加安全。
怎样制作简单的静态的网页设计
设计网页画面：首先，需要明确你想要制作的静态网页的主题和风格，然后设计网页的整体布局和页面元素。收集素材：根据设计需求，从网上收集相关的图片、图标、按钮等素材，或者使用PS等工具自己制作。HTML基础 HTML文件结构：每个HTML文件都以html标签开始和结束，内部包含head和body两部分。
内容设计：遵循“先简单后复杂”的原则，先设计出简单的内容，比如文字、图片等，然后再添加更复杂的内容，如视频、动画等。这样做的好处是，在出现问题时更容易修改。
新建一个txt文本文档，先不要急着修改文件后缀名，有基础的朋友手动输入HTML代码，不会也没有关系，百度搜索“网页HTML代码”。
在viewportMETA标签上设置width=320，页面的各个元素也采用px作为单位。通过用JS动态修改标签的initial-scale使得页面等比缩放，从而刚好占满整个屏幕。（见前端开发-webApp变革之rem）（2）设在viewportmeta标签上设置contentwidth=640，user-scalable=no，页面的各个元素也采用px作为单位。
选择并安装合适的软件：根据你的需求和技能水平，选择合适的静态网页制作软件并安装。设计和制作网页：使用所选软件创建并设计你的静态网页，包括布局、样式、内容等。测试网页：在本地环境中测试你的网页，确保其在不同浏览器和设备上都能正常显示和功能。
静态网页设计
1、设计网页画面：首先，需要明确你想要制作的静态网页的主题和风格，然后设计网页的整体布局和页面元素。收集素材：根据设计需求，从网上收集相关的图片、图标、按钮等素材，或者使用PS等工具自己制作。HTML基础 HTML文件结构：每个HTML文件都以html标签开始和结束，内部包含head和body两部分。
2、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。
3、静态页面利于网站优化，动态页面侧重互动和用户体验。从网站浏览者的角度来看，无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。所以，企业在做网站的时候一定要结合企业的本质和浏览者的一个兴趣来选择了。
4、静态页面设计是指网页设计中的基础形式，它指的是只包含HTML、CSS和JavaScript等基本网页技术的网页设计。以下是对静态页面设计的详细解释： 内容固定 静态页面的内容在网页加载时就已经完全确定，不会根据用户的操作或浏览器的行为而变化。这意味着用户每次访问该页面时，看到的内容都是一致的。
5、在网站设计时，可以通过静态页面的设计或者通过cdn的方式实现加速，在速度方面也是一项优点。需要尤其说明的是，优异的制作网站企业不胜枚举。然而倘若结合已经发表的网站数量和质量看，很明显一线城市的制作网站公司要可信很多。
6、HTML，全称Hyper Text Markup Language，是一种静态网页设计语言，它能够定义网页的结构和内容，使得浏览器能够正确解析和展示页面。因此，HTML文件的扩展名通常是.htm或.html。
静态网页设计制作中的布局模式
布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。
二分布局：将网页分为左右两个部分，通常左边是导航栏或目录，右边是主要内容。三分布局：将网页分为左、中、右三个部分，可以分别用于导航、内容和侧边栏等功能。T型布局：页面顶部为横条网站标志和广告条，下方左侧为导航菜单，右侧显示主要内容。
在设计方法上，静态布局通常采用居中布局，所有样式使用绝对宽度和高度（px）定义，设计一个固定的布局。当屏幕尺寸发生变化时，页面内容会被隐藏，用户需要使用横向和纵向滚动条来查看被遮挡的内容。自适应布局则利用@media媒体查询，根据不同设备和屏幕尺寸切换不同的样式。
主要的布局方式有表格布局、层布局和框架布局。其中表格布局借助表 格实现页面布局，把对表格的约束直接书写在 HTML 中的 Table 代码中；层布局是利用 div+CSS 文档实现布局，由于在层布局中，对层格式的定义可以集中在 CSS 文档中，使得 网页的编码效率高，是当前主流的布局方式。
企业网站建设为什么要做静态
静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。
网站在采用动态的时候可以根据需要存在静态页面，这样能更好的提高网站的性能。有些页面就可以采用静态的形式展现；静态内容是网页的基础组成，动态技术不是整个网页全部动态制作，而是在内容需要经常更新的地方用代码实现动态。
静态网站由于不需要页面生成过程，是从服务器端直接发送静态页面给浏览器，其速度自然会快很多。但是基于现实的原因，一些网站做好之后常年累月的不更新内容也不现实。
”；网页内容一旦发布到网站服务器上，无论用户是否访问，其内容都将保存在服务器上，每个网页都是独立的文件；静态网页内容相对稳定，易于被搜索引擎检索；静态网页缺乏数据库支持，网站制作和维护工作量较大，当信息量大时，完全依赖静态网页制作较为困难；静态网页的交互性有限，在功能方面有较大限制。
