大学信息技术基础教程课件 第5章 信息的展示 5.3 网页制作基础.pptxVIP

5.3网页制作基础

目录页contents网页制作基本概念1表格5HTML语言2多媒体对象6网站的建立与管理3表单7网页制作4综合练习8

1ONE网页制作基本概念

网站网站是具有共同主题的网页集合，是网页的有机结合体，存在于特定计算机地址中，供浏览者通过地址访问网页网页是HTML编写的文本文件，包含文字、表格、图像等元素，是磁盘上的文件，常以.htm、.html等扩展名存在主页主页是网站的起始页，展示主要信息并提供网站内部链接CSSCSS是用于控制网页元素样式和布局的语言，让内容呈现更加美观和个性化HTMLHTML是超文本标记语言，用于创建和设计网页，通过标记符指导浏览器展示内容网页制作基本概念

常用术语

网页编辑器01网页编辑器分类分为文本编辑器和所见即所得编辑器，前者需熟练HTML，后者通过鼠标操作，自动生成代码，如Dreamweaver02文本编辑器特点直接输入HTML标记，使用如记事本的文字处理软件，要求制作者熟练掌握HTML语言03所见即所得编辑器优势降低网页制作门槛，提高效率，用户通过鼠标操作，实时预览结果，自动生成HTML代码

网站建设的流程确定主题规划网站收集素材制作网页预览和测试网站申请域名和服务器上传和部署网站维护和更新网站宣传与推广网站

图像图像在网页设计中扮演重要角色，常用于标题、Logo、背景等，JPEG和GIF是最常用的格式表格网页中的表格可用于网页页面布局，从而使网页中的文字、图像等信息在指定的位置进行展示。

文本网页的主体以文本为主。在制作网页时，可以根据需要设置文本的字体、字号、颜色以及所需要的其他格式。

超链接超链接是网页中指向其他网页的地址，可指向本地或外部网站表单表单用于收集信息，主要功能是接收浏览器端输入，发送到服务器处理网页的基本元素多媒体对象网页可包含动画、声音、视频等多媒体元素，以及悬停按钮、Java控制、ActiveX控件等，从而使网页具有更丰富的信息传递信息。

网站愿景该网站愿景是：“中华传统文化”社团宣传网站的建设，将是社团传承与弘扬中华优秀传统文化的重要举措。我们相信，通过全体社员的共同努力，这个网站将成为连接过去与未来的桥梁，让更多人感受到传统文化的魅力与力量，共同书写中华传统文化的新篇章！网页规划利用AI技术帮忙生成一个网站规划，以百度“文心一言”为例（文心大模型3.5），我们可以提问“作为高校学生社团“中华传统文化”社的一员，拟为社团建立一个宣传网站，应该如何规划该网站？”，百度将给出一份详细的规划方案。【范例5-3-1】规划“中华传统文化”学生社团网站

2ONEHTML语言

HTML（HypertextMarkupLanguage）是超文本标记语言，HTML是最基本的Web网页开发语言，可以使用于各种操作平台。HTML网页使用HTML语言编写，该语言不区分大小写，不需要编译，由浏览器解释执行。HTML文件是一个纯文本文件，由标记语言编写，通常，标记用一对尖括号“”括起来，书写格式为：标记显示内容/标记。HTML语言

HTML网页的基本结构HTML文件由html开始，/html结束，包含HEAD和BODY两部分HTML文件结构概述创建网页.html，输入代码设置标题为学生社团网页，内容为中华传统文化，保存后用浏览器打开查看效果创建HTML网页示例head包含网页序言信息，不直接显示在浏览器中。title是网页标题，显示在浏览器标题栏，用于概括网页内容文件头（HEAD）解析body标签定义网页主体内容，用于编辑网页显示，其属性如bgcolor可设置背景色，text可设置文本颜色文件体（BODY）解析

步骤步骤如下：新建一个记事本文件，命名为“网页.html”。在该文件中输入代码。保存并关闭该文件，使用浏览器打开该文件。网页创建新建一个HTML网页，命名为“网页.html”，要求在网页的标题为“学生社团网页”，网页的内容为“中华传统文化”文本。【范例5-3-2】在网页中显示“中华传统文化”文本文件体显示一行文字网页结束文件头网页标题网页开始

3ONE网站的建立与管理

规划网站文件结构按文件类型规划，如文本、图片、媒体各占一文件夹，或按主题如“新闻”、“体育”等栏目创建文件夹，便于管理和查找站点根文件夹设立站点根文件夹相当于大文件夹，存放所有网站相关文件，通过规划的文件结构来组织内容文件管理方式方法一：按文件类型，如TXT、images、media等分设文件夹

方法二：按网页主题，如“新闻”、“体育”等建立栏目文件夹，便于对应栏目内容的管理与更新

Dreamweaver是Adobe公司开发的网页设计软件，该软件提供了可视化的网页开发环境，具有“所见即所得”的功能，是网页设计领域中使用用户较多，应用较广，功能较强的一款应用软件。【注】本教材后续介绍均使用Dre