大学信息技术基础教程课件 第5章 信息的展示 5.3 网页制作基础_第1页
大学信息技术基础教程课件 第5章 信息的展示 5.3 网页制作基础_第2页
大学信息技术基础教程课件 第5章 信息的展示 5.3 网页制作基础_第3页
大学信息技术基础教程课件 第5章 信息的展示 5.3 网页制作基础_第4页
大学信息技术基础教程课件 第5章 信息的展示 5.3 网页制作基础_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

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

文档简介

5.3网页制作基础目录页contents网页制作基本概念1表格5HTML语言2多媒体对象6网站的建立与管理3表单7网页制作4综合练习81ONE网页制作基本概念网站网站是具有共同主题的网页集合，是网页的有机结合体，存在于特定计算机地址中，供浏览者通过地址访问网页网页是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公司开发的网页设计软件，该软件提供了可视化的网页开发环境，具有“所见即所得”的功能，是网页设计领域中使用用户较多，应用较广，功能较强的一款应用软件。【注】本教材后续介绍均使用DreamweaverCC2018版本。Dreamweaver的工作窗口主要由菜单栏、文档工具栏、文档窗口、浮动面板等组成，如图5-3-5所示，整体布局显得紧凑、合理、高效，这为设计和制作网页提供了很大便利。Dreamweaver简介界面介绍菜单栏文档工具栏浮动面板通用工具栏

文档窗口状态栏

属性面板

标签选择器网站的建立与管理创建“学生社团网站”站点，设置站点参数，构建“images”和“TXT”文件夹，新建“index.html”网页文件站点建立在Dreamweaver中执行“站点”|“新建站点”，管理站点文件和文件夹，维护站点结构和内容更新站点管理根据“中华传统文化”学生社团网站的规划，利用Dreamweaver创建网站站点，要求站点中包含“images”和“TXT”两个文件夹以及“index.html”网页文件。步骤如下：（1）在C盘上新建一个文件夹，命名为“学生社团网站”。（2）在Dreamweaver中，执行“站点”︱“新建站点”菜单命令。在弹出的“站点设置对象”窗口中设置参数（3）在Dreamweaver的“文件”面板中，选择新建的站点，在该站点中新建两个文件夹，分别命名为“images”和“TXT”。（4）在Dreamweaver的“文件”面板中，选择新建的站点，在该站点中新建一个网页文件，命名为“index.html”。（5）最终网站的站点结构如图5-3-7所示，电脑硬盘中也会建立相应的文件夹和文件。【范例5-3-3】创建学生社团网站站点4ONE网页制作在Dreamweaver中，创建网页文件的方法有以下两种：在网站站点中新建扩展名为html的文件，即创建了一个网页文件。执行“文件”|“新建”菜单命令，在弹出的“新建文档”对话框中选择新建文档类型为“HTML”，点击“创建”按钮，即可完成网页的创建。如当前网页有内容被编辑但未被保存，其文件名的右上角会出现“*”标记，网页保存后，该标记会消失。保存网页文件的方法有以下两种：执行“文件”|“保存”菜单命令，如该文件是第一次保存，会弹出“另存为”对话框，设置路径、文件名和保存类型等，点击“保存”按钮，即可完成网页的保存。一般默认的保存路径是当前站点所指向的文件夹，即站点文件夹，默认的扩展名为“.html”。如该文件非第一次保存，执行“文件”|“保存”菜单命令后，会直接保存网页内容，不再弹出对话框。使用快捷键<Ctrl>+<S>。网页的创建和保存网页的预览设计者可通过浏览器预览网页，按<F12>键或使用"文件"→"实时预览"→"InternetExplorer"菜单命令。所见即所得，浏览器中显示的与文档窗口中基本相同网页属性的设置设置网页属性可调整默认字体、大小、背景颜色等，实现页面一致性。通过“文件”|“页面属性”命令打开对话框进行设置网页制作：超链接的使用文本的编辑在Dreamweaver中，文本的编辑和其他字处理系统（例如：Word、WPS等）较为相似，同时，还可以通过属性面板来设置文本的字体、字号、颜色等属性。在属性面板中有两个选项卡，“HTML”选项卡和“CSS”选项卡。在“HTML”选项卡中可设置文本的一些基本属性，例如，加粗、倾斜、超链接等。如需要进一步设置当前对象的属性，例如，字体、大小等，则需要在“CSS”选项卡中进行设置。在“CSS”选项卡中可设置文本的属性，需要新建CSS样式才能进行属性设置，故在设置时需在“目标规则”中选择“新内联样式”。超链接的创建方式在Dreamweaver中创建，鼠标悬停变手形，点击跳转至指定网页，文本样式变化提示链接存在文本超链接允许一幅图像含多个链接，特定区域点击跳转，Dreamweaver功能支持复杂交互图像热点超链接网页内置，点击自动启动默认邮件程序，简化用户发送邮件流程电子邮件超链接超链接的使用超链接是网页中最常见的对象，能够实现页面与页面之间的跳转，有机地将网站中的各个页面联系起来。超链接有两部分组成，即源和目标。超链接中有超链接的一端称为超链接源（响应鼠标单击操作的图像或文本等），跳转到的网页或文件等称为超链接目标。网页中的超链接按照链接路径的不同，可以分为绝对路径和相对路径两种。水平线水平线用于分割网页内容，划分不同区域，使信息分类更清晰。通过插入菜单或设置属性面板可调整其样式和属性日期Dreamweaver允许用户插入可自动更新的日期对象，以便在文档保存时保持日期的最新状态不换行空格在Dreamweaver中插入不换行空格，可使用“插入”|“HTML”|“不换行空格”命令，快捷键是【Ctrl】+【Shift】+【Space】换行符在Dreamweaver中按Enter产生新段落，若需换行不换段，可使用“插入”|“HTML”|“字符”|“换行符”或按<Shift+Enter>其他网页对象的使用特殊符号除了一般文本以外，有时还需要在网页中插入特殊符号，例如，注册商标符号®、版权符号©、英镑符号£等。【范例5-3-4】创建“联系我们”网页按下列要求操作创建网页。步骤如下：（1）在“中华传统文化”学生社团网站的站点中新建一个网页文件，命名为“联系我们.html”。（2）打开该网页，设置网页的标题为“联系信息”。（3）在“页面属性”中设置网页的文本颜色为“#0099CC”（蓝色），链接颜色为“#998877”（褐色），已访问链接颜色为“#993366”（紫色）。（4）将素材“文字素材.txt”复制到网站站点下的“TXT”文件夹中，并将其中的文字粘贴到网页中。（5）选中文字“联系我们”，在“属性”面板中，将其格式设置为“标题1”，粗体、宋体，颜色为“#D97D97”（粉色），居中对齐。【范例5-3-4】创建“联系我们”网页按下列要求操作，创建网页。步骤如下：（6）在第一行下方插入水平线，颜色为“#D97D97”（粉色），宽度为800像素，高度为3像素。操作方法为：选择水平线，单击“属性”面板最右侧的“快速标签编辑器”图标按钮，在弹出的“编辑标签”对话框中输入设置颜色的代码。默认情况下，会出现代码“<hr>”，将鼠标光标定位在字母“r”的后面，输入空格和字母“c”，软件会出现代码列表供用户选择，如图5-3-14所示。在代码列表中选择“color”，“编辑标签”文本框中会出现“<hrcolor="">”代码，在双引号中间输入颜色代码即可。【注】Dreamweaver文档窗口不会显示水平线的颜色设置效果，用户需要保存文档后在浏览器中才能看到设置的彩色水平线；或者切换到Dreamweaver的“实时视图”，查看所设置的颜色效果。【范例5-3-4】创建“联系我们”网页按下列要求操作，创建网页。步骤如下：（7） 将网页正文的文本均设置为居中对齐。（8） 设置文本“abc@”为邮件链接，链接邮箱为abc@。在“属性”面板中，打开“页面属性/链接（CSS）”对话框，将链接颜色设置为“#998877”（褐色），已访问链接颜色设置为“#993366”（紫色）。（9） 在最后一行的文本“版权所有”后插入一个版权符号，并将颜色设置为“#CC0000”（红色）。（10） 在最后一行文本的最后插入8个不换行空格，然后再插入日期，要求星期格式为“星期*”，“日期格式”为“****年*月*日”，“时间格式”为“**:**”，储存时自动更新。5ONE表格表格是常用的网页布局工具，表格在网页中不仅仅可以用来排列数据，还可以对网页中的图像、文本等对象进行定位，使得网页条理清晰，整齐有序表格是行和列的组合，单元格可包含各种对象，如文本、数字或图像。边框、边距、间距是表格的样式元素表格简介通过"插入"菜单选择"Table"，设置好表格属性后点击"确定"，即可在网页中创建表格表格的创建在“属性”面板中，可编辑表格的行、列数、宽度、边框，以及单元格的宽度、高度、对齐方式和颜色等属性表格的编辑按住鼠标左键拖拽表格边线，可调整表格或单元格大小，表格内单元格大小会相应改变调整表格与单元格大小选中单元格区域，使用菜单或属性面板合并单元格图标，合并为单个单元格表格合并表格的结构调整要插入或删除行/列，选中目标行/列，然后通过“编辑”|“表格”菜单选择“插入行”/“删除行”或“插入列”/“删除列”命令插入与删除行或列停留在目标单元格，使用菜单或属性面板拆分单元格图标，设置参数后拆分单元格表格拆分【范例5-3-5】创建学生社团主页按下列要求操作创建网页。步骤如下：（1）打开“中华传统文化”学生社团网站的站点中的“index.html”网页文件。（2）插入一个4行3列的表格，表格宽度为800像素，边框、间距和边距均为0像素，表格居中对齐。（3）合并第一行所有单元格。将第二行的每个单元格均拆分成两列。6ONE多媒体对象多媒体对象范围比较广，包括图像、动画、音频、视频等，在网页中使用这些对象会使网页增色不少将鼠标光标停留在需要插入视频的位置，执行“插入”︱“HTML”︱“HTML5Video”菜单命令，网页中会出现一个视频的占位符，选中该占位符，可在“属性”面板中设置其属性。将鼠标光标停留在需要插入该图像的位置，执行“插入”︱“HTML”︱“鼠标经过图像”菜单命令，弹出对话框，通过该对话框设置相应属性后点击“确定”按钮，即可插入一个鼠标经过图像。将鼠标光标停留在需插入图像的位置，执行“插入”︱“Image”菜单命令，弹出“选择图像源文件”对话框，通过该对话框选择相应的图像，点击“确定”按钮即可完成图像的插入。图像鼠标经过图像

视频【范例5-3-6】编辑学生社团主页按下列要求操作创建网页。步骤如下：（1）打开“中华传统文化”学生社团网站的站点中的“index.html”网页文件，设置网页标题为““中华传统文化”学生社团主页”。（2）将素材“建筑1.png”、“建筑2.png”、“社名.jpg”和“学生社团介绍.mp4”复制到网站站点下的“images”文件夹中。（3）在第一行中插入“社名.jpg”图像文件，设置图像宽度为800像素。（4）在第二行的单元格中分别输入文本“社团信息”、“传统文化展示”、“学习资源”、“信息服务”、“社交交流”和“联系我们”，文字居中对齐，行高50像素，背景颜色为灰色（#E9E9E9），设置文本“联系我们”的超链接为“联系我们.html”网页文件。【范例5-3-6】编辑学生社团主页按下列要求操作创建网页。步骤如下：（5）在第三行第一列的单元格中插入鼠标经过图像，原始图像为“建筑1.png”，鼠标经过图像为“建筑2.png”，设置图像宽度为200像素。（6）在第三行第三列的单元格中插入“学生社团介绍.mp4”视频文件，设置视频宽度为200像素，单元格对齐方式为水平右对齐。7ONE表单表单简介Dreamweaver可以创建带有文本框、密码框、隐藏域、文本区域、复选框、单选按钮以及其它对象的表单。在实现与用户交互中，表单是必不可少的，例如，用户注册、在线申请、调查问卷等。通过表单，用户可以把信息从客户端递交到服务器端，再由服务器端的脚本或者应用程序来进行相应的处理，从而实现站点的交互功能。在Dreamweaver中创建表单，将鼠标光标停留在需要插入表单的位置，然后，执行“插入”|“表单”|“表单”菜单命令，即可生成一个表单区域，即红色虚线框区域，之后创建的所有表单对象都必须放置在该红色虚线框内。01接受文本类型的信息，默认情况下，文本是单行形式，文本区域是多行形式。02可为用户提供选择的按钮，每个按钮都有自己的名称，Dreamweaver按照名称分组，当名称相同时即为同一组。单选按钮组内只能选一个，复选框可多选，互不影响03为用户提供选择的下拉列表，用户可在列表内选择所需要的选项。04为用户提供上传文件的功能，它包括一个文本域和一个“浏览”按钮，用户可以在文本域输入所要上传的文件的路径和文件名，也可以通过“浏览”按钮定位和选择所需的文件。05可将表单信息提交到服务器端，或者重置该表单。常用的表单按钮有“提交”按钮和“重置”按钮。“提交”按钮可将表单内的信息递交到服务器端，“重置”按钮可将表单内的已填写的信息恢复至默认设置。文本/文本区域单选与复选按钮选择文件按钮表单对象与属性【范例5-3-7】创建“调查问卷”表单按下列要求操作创建表单。步骤如下：（1）打开“中华传统文化”学生社团网站的站点中的“index.html”网页文件。（2）设置第三行第二列单元格的对齐方式为水平居中对齐，并在其中插入一个表

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论