网页设计与制作代码介绍-网页设计和制作概述

一

网页和网站的概念2

Web原理 3 网站规划与设计 4 网站开发工作流程 5 撰写网站方案要点 6 常用网页制作软件 7 实战训练 第一章 网页设计与制作概述 1.1.1 网页、网站和首页

网页（WebPage）是存储在网络服务器上供客户端客户浏览的文件，可以在互联网上传播。 网页是按照网页文档规范编写的一个或多个文件。 这种格式的文件是由超文本标记语言创建的，可以将文本、图片、声音和其他多媒体文件组合在一起。 这些文件保存在特定计算机上。 在特定目录中。 几乎所有的网页都包含链接，可以方便地跳转到其他相关网页或相关网站。 网站由一组相关的 HTML 文件和存储在 Web 服务器上的其他文件组成。 当客户访问网站时，网站中总是首先打开一个页面。 该页面称为主页或主页（通常为index.html或default.html）。 1.1

网页和网站的概念 1.1.2 静态网页和动态网页 根据Web服务器响应方式的不同网页设计与制作代码介绍吉祥物设计，网页可以分为静态网页和动态网页。 静态网页是指客户端浏览器向WWW服务器发送URL请求。 服务器搜索所需的超文本文件吉祥物，不进行处理，直接下载到客户端。 客户端运行的页面是预先准备好并存储在服务器中的网页。 。 其页面内容仅使用原理性的HTML代码，静态网页一般采用纯HTML/CSS语言编写。

1.1

网页和网站的概念 1.1.2 静态网页和动态网页 根据Web服务器响应方式的不同网页设计与制作代码介绍，网页可以分为静态网页和动态网页。 静态网页是指客户端浏览器向Web服务器发送URL请求。 服务器搜索所需的超文本文件，不进行处理，直接下载到客户端。 在客户端操作的页面是预先准备好并存储在服务器中的网页。 。

1.1

网页和网站的概念 1.1.2 静态网页和动态网页 动态网页是指必须经过应用服务器处理后才交给Web 服务器发送给客户端显示的网页文件。 根据所使用的应用程序服务器，此类网页具有不同的文件扩展名。 可以是hph、jsp、asp等。 动态网页技术根据程序运行的区域分为客户端动态技术和服务器端动态技术。 客户端动态技术不需要与服务器交互，实现动态功能的代码往往以脚本语言的形式直接嵌入网页中。 服务器发送给浏览者后，网页直接响应客户在客户端浏览器上的操作。 常见的客户端动态技术包括 JavaScript、ActiveX 和 Flash。

1.1

网页和网站的概念 1.2.1 Web原则的概念 WEB原则并不是某一个原则，而是一系列原则的集合。 网页主要由三部分组成： 结构（Structure） 构建原则 语言包括： XML、目的 简单来说，建立Web原则的目的是：为大多数网站客户提供最大的利益； 确保任何网站文件能够长期有效； 简化代码，降低构建成本； 使网站更易于使用并适应更多不同的客户和更多的网络设备； 当浏览器版本更新或新的网络交互设备出现时，确保所有应用程序能够继续正确执行。 1.2 Web 原则 1.2.3 采用 Web 原则的优点

1、客户端的优点：文件下载和页面显示速度更快； 内容可以被更多的客户访问（涉及盲人、弱视、色盲等残疾人士）； 内容可以被更广泛的设备访问（涉及屏幕阅读器、手持设备、搜索机器人等）； 客户可以根据风格选择定制属于自己的显示界面； 所有页面都可以提供适合打印的版本。 1.2 Web原理 1.2.3 采用Web原理的优点 2、服务器端的优点： 代码和组件少，更容易维护； 带宽要求更低（代码更简单），成本更低； 更容易被搜索引擎搜索到； 为方便起见进行修订； 提供印刷版本而不复制内容。 1.2Web原理

在建设网站之前，需要对网站进行一系列的分析和设计，然后根据分析的结果提出合理的建设方案。 这就是网站的规划和设计。 网站的规划设计一般应遵循以下三个原则：最大程度地满足客户需求； 最有效地利用资源； 使用方便、界面友好、运行高效； 常规的规划设计措施一般包括以下三种：自上而下、自下而上、不断增加的设计措施。 1.3 网站规划设计

经典的 Web 开发工作流程涉及以下阶段。 1）规划站点：涉及建立站点的策略或目的，制定站点将面对的客户以及站点的数据需求。 2) 设置开发环境：包括选择Web应用程序服务器并使用Dreamweaver网页创建软件定义的站点和数据源。 3）规划页面设计和布局：包括使用绘图工具创建页面和界面模型，并使用Dreamweaver和FrontPage进行页面布局。 4) 创建内容资源：涉及使用 Fireworks、Photoshop 和 Flash 创建图像、视频等。 5) 组装、测试和部署站点：涉及使用 Dreamweaver 格式化文本、编译资源以及测试将站点发布到的代码服务器。 6) 维护站点：涉及使用 Dreamweaver 来保持内容更新。 1.4 网站开发工作流程补充案例：暨南大学网站结构 1.4 网站开发工作流程

网站策划书应尽可能涵盖网站策划的各个方面，行文必须科学、仔细、实事求是。 本文以最常见的企业网站为例，介绍了撰写网站方案的要点。 1. 前期调研分析 2. 网站功能定位 3. 网站技术方案 4. 网站内容策划 5. 网页设计 6． 网站维护 7. 网站测试 8. 网站公告推广 9. 网站设计进度表 10. 费用明细 1.5 网站方案撰写要点 1.6 常用网页制作软件 1.6.1 网页制作工具 网页制作工具分为两类：“视觉”和“非视觉”。 “可视化”网页编辑器的优点是直观、易用、易学。 在其中创建网页与在Word中编辑相同。 缺点是很难准确地达到与浏览器相同的显示效果。 “非可视化”的网页编辑器是用HTML代码设计的，因此控制精确，但工作效率太低。 1.Dreamweaver2. 首页 3. AdobeGoLive4。 主页5. VisualStudio2023/20231.6 常用网页制作软件 1.6.2 网页图形图像处理工具 使用网页图形图像处理工具来设计和处理适合网页的图形图像。 1. 烟花2． Photoshop3． CorelDRAW1.6常用网页制作软件 1.6.3 网页动画制作及特效工具 随着网络速度的提高，动画效果越来越多地应用于网页中。 这些动态展示的画面不仅吸引了观众的注意力，也给原本平淡的画面增添了不少活力。

1. 闪存 2. UleadGIFAnimator1.6常用网页制作软件 1.6.4 网页上传工具 制作好的网页必须上传到提供主页空间的服务器上才能被浏览者访问。 上传工具选择是否合适，会影响网站更新和维护的效率。 1.可爱FTP2. FlashFXP3。 飞跃FTP4。 其他上传工具 (1) UploadNow! 上传工具 (2) WS-FTP上传工具 Dreamweaver软件本身也具有上传网页的功能。 1.6 常用网页制作软件 1.6.5 网页设计工具发展趋势 2023 年 4 月 18 日，全球著名应用软件公司 Adob​​e 以 34 亿美元收购 Macromedia。 此次收购代表了多媒体行业的整合。 随着Adobe对Macromedia的全新整合，势必会推出更加强大的图形网页应用软件，为图形处理和网页制作开辟新的空间。 目前网页制作中的HTML代码和图片是分开制作的，需要美术师和网页制作人员共同协作。 不过，随着两家公司的合并，很有可能会推出新的软件，实现图片和网页的一体化操作。 ，提高网页制作效率。 此外，未来Fireworks和ImageReady的地位也很可能被已经强大的Photoshop和Flash所取代。 实训一：“爱家食品”网站设计 【培训概要】 设计“爱家食品”网站结构。 【实战展示】网站的导航栏，读者可以根据导航栏绘制网站的栏目结构图。 1.7

实践训练 1． 简要描述网页、网站和主页之间的异同。 2. Web 原理的三个主要部分是什么？ 分别解释一下它们的含义。 3、简述网站开发的工作流程。 4.简述如何写网站方案？ 5、常用的网页制作工具有哪些？ 他们各自有什么特点？ 1.8 练习