1.1规划“佳美馨装饰”网站结构（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）

2024-08-10
| 21页
| 128人阅读
| 24人下载
普通

内容正文：

Dreamweaver 网页设计立体化教程（微课版）（Dreamweaver CC 2020） 项目一 网页设计基础 1 目录 Contents 任务一 规划“佳美馨装饰”网站结构 任务二 创建“佳美馨装饰”站点 实训一 规划“中国皮影”网站 实训二 创建“中国皮影”站点 2 随着人们生活水平的不断提高，人们希望自己的居住环境更加健康、美观，这使得装饰行业得到快速发展，对装饰网站的设计需求也日益增多。 一、任务描述 （一）任务背景 （1）了解网页设计相关的基本概念、常用术语和网页的构成要素。 （2）了解网页制作常用的软件及相关的语言。 （3）了解网站开发流程、网页设计内容和网页设计原则的相关知识。 （二）任务目标 3 二、相关知识 （一）网站、网页、主页的概念 网 站 是 指 在Internet中 根 据 一 定 规 则， 使 用HTML等脚本语言设计的用于展示特定内容的相关网页集合。 网 站 主页 网页 网页是Internet中的页面，在浏览器的地址栏中输入网站地址，访问该网站后打开的页面就是网页。网页是构成网站的基本元素，按表现形式可分为静态网页和动态网页两种类型。 主页也被称为首页或起始页，是用户进入网站后看到的第一个页面。大多数主页的文件名为index、detault、main加后缀名。 4 二、相关知识 （二）网页设计常用术语 1 Internet 2 WWW 3 浏览器 4 URL 5 IP地址 6 域名 7 FTP 8 发布 9 客户机和服务器 5 二、相关知识 （三）网页的构成要素 文本和图像是构成网页最基本的两个元素。除此之外，构成网页的元素还包括Logo、导航、动画、超链接、视频等 网页中的元素 6 二、相关知识 （四）常用网页制作软件 在制作网页的过程中需要使用多种软件，如图像处理软件——Photoshop、动画制作软件——Animate、网页编辑软件——Dreamweaver等。 Photoshop简称PS，是由Adobe公司开发和发行的图像处理软件。Photoshop集平面设计、网页制作、广告创意、图像输入与输出于一体，深受广大平面设计人员和网页美工设计师的喜爱。 1．图像处理软件——Photoshop Photoshop CC 2020的操作界面 7 二、相关知识 （四）常用网页制作软件 Animate是Adobe公司推出的专业二维动画制作软件，其前身为大名鼎鼎的Flash。由于新的网页动画制作技术——HTML5的兴起，Adobe公司对Flash进行了很多改进，并更名为Animate，它除了可以制作原有的以ActionScript 3.0为脚本的SWF格式的动画外，还新增了以JavaScript为脚本的HTML5 Canvas和WebGL格式的动画。 2．动画制作软件——Animate Animate CC 2020 的操作界面 8 二、相关知识 （四）常用网页制作软件 Dreamweaver是Adobe公司开发的集网页制作和网站管理于一体的网页代码编辑器，也是针对专业网页设计师开发的视觉化网页开发工具，利用它可以轻松地制作出跨越平台限制和浏览器限制的网页。Dreamweaver最大的特点是能够快速创建各种静态、动态网页，除此之外，它还是出色的网站管理、维护软件。 3．网页编辑软件——Dreamweaver Dreamweaver CC 2020的操作界面 9 二、相关知识 （五）HTML HTML是一种标记语言，它通过标签来标记要显示在网页中的内容。HTML的语法非常简单功能强大，它支持嵌入不同格式的文件，包括图像、音频、视频、动画、表单和超链接等，这也是HTML能在互联网中流行的原因之一。HTML的主要特点如下。 1．HTML的概念 HTML的内核采用超集方式，用户编写代码更加灵活、方便。 简易性 平台无关性 可扩展性 HTML提供了很广泛的扩展性支持来为HTML文档增添语义化的支持。 为了使同一个HTML文档在不同标准的浏览器中都能显示相同的效果，HTML使用了统一的标准。 10 二、相关知识 （五）HTML 2．HTML编辑软件 使用Windows操作系统自带的记事本或写字板都可以编写HTML，需要以.htm或.html作为扩展名保存HTML文档，方便浏览器直接运行。 基本文本、文档编辑软件 这类软件能大大提高开发效率，使制作者在短时间内制作出网页，这种类型的软件主要有国产软件网页作坊和HotDog等。 “半所见即所得”软件 这类软件是使用较广泛的编辑软件，用户即使完全不懂HTML的知识也可以制作出网页，这类软件主要有Dreamweaver和Amaya等； 基本文本、文档编辑软件 11 二、相关知识 （五）HTML 3．HTML文档构成 HTML文档构成非常简单，在浏览器中打开一个index.html文档。在网页空白处单击鼠标右键，选择 “查看网页源代码”命令（不同浏览器命令名称会有所不同），查看网页的源代码。 在浏览中打开HTML文档 查看HTML源代码 12 二、相关知识 （五）HTML 3．HTML文档构成 每个网页对应一个HTML文档，HTML文档用标签来描述，标签是由尖括号包围的关键词，如<html>，且一般成对出现，如<html>和</html>，第一个标签是开始标签，第二个标签是结束标签。标准的HTML文档一般都具有基本的结构。除了HTML文档的开始标签<html>与结束标签</html>外，还包括头部（head）和主体（body）。 HTML 文档的结构 常见的标签及其示例 13 二、相关知识 （六）HTML5 1．HTML5的新标签 导航索引标签<nav>有助于规划页面结构，从而便于网页设计人员设计网页，也便于更好地为用户提供导航索引服务。 导航索引标签 视频和音频标签用于添加视频和音频文件，包括<video>和<audio>标签等。 视频和音频标签 文 档 结 构 标 签 包 括<header>、<footer>、<dialog>、<aside> 和<figure>标签等，都可以用于对网页进行布局分块。 文 档 结 构 标 签 HTML5中的文本和格式标签与其他版本HTML中的基本相同，只是删除了<u>、<font>、<center>和<strike>标签。 文本和格式标签 HTML5与其他版本HTML相比，在表单元素标签中添加了更多的输入对象，如在<input type="">中添加了如电子邮件、日期、URL和颜色等输入对象。 表单元素标签 14 二、相关知识 （六）HTML5 2．HTML5的新特点 全新且合理的标签主要用于处理多媒体对象的绑定情况，在HTML5中，则有单独的视频和音频标签。 全新且合理的标签 浏览器中的真正程序 Canvas对象 Canvas对象主要为浏览器带来了直接绘制矢量图的功能，直接在浏览器中显示图像和动画。 HTML5在浏览器中提供了API，可实现在浏览器内编辑、拖放对象和各种图形用户界面的功能。 本地数据库 HTML5通过内嵌一个本地SQL数据库，增加了交互式搜索、缓存和索引功能。 15 二、相关知识 （七）JavaScript 1．JavaScript的特点 在网页中使用JavaScript，可以与HTML一起实现在一个网页页面中链接多个对象，实现交互功能，并且JavaScript是通过嵌入或被调用到标准的HTML来使用的，弥补了HTML的缺陷。 JavaScript是一种比较简单的编程语言，无须单独编译解释，在预览网页时可以直接读取脚本执行指令。JavaScript使用简单、方便、运行速度快，适用于开发简单应用。 16 二、相关知识 （七）JavaScript 2．JavaScript的引用及位置 在Dreamweaver中，JavaScript的脚本可通过<script>标签引用。如果需要重复使用某段JavaScript的脚本，则可将这段脚本存为一个单独的文件，其扩展名为.js。要引用该脚本文件时，只需使用src属性即可。 JavaScript脚本的引用 JavaScript脚本文件的引用 17 二、相关知识 （八）网站开发流程 下图所示为网站开发流程图，从中可看出网站开发流程主要分为需求分析阶段、实现阶段和发布阶段。 网站开发流程图 18 二、相关知识 （九）网页设计内容 确定网站背景和定位 确定网站背景是指在网站规划前，先对网站环境进行调查分析。网站定位是指在调查的基础上进行进一步规划，一般是根据调查结果确定网站的服务对象和内容。 网站目标是指为网站建设提供总的框架大纲、网站需要实现的功能等。 网站的内容与形象是网站最吸引浏览者的因素，与内容相比，多变的形象设计，具有更加丰富的表现效果。 网站推广是网页设计过程中必不可少的环节，一个优秀的网站，尤其是商业网站，有效的市场推广是其成功的关键因素之一。 确定网站目标 内容与形象规划 网站推广 19 二、相关知识 （十）网页设计原则 内容与形式的统一 好的信息内容应当具有编辑合理性与形式的统一性，形式是为内容服务的，而内容需要通过美观的形式才能吸引浏览者的关注。 风格定位准确 网站的风格对网页设计具有决定性的作用，网站风格包括内容风格和设计风格。内容风格主要体现在文本的展现方法和表达方法上，设计风格则体现在构图和排版上。 结合CIS进行设计 企业识别系统是企业、团体在形象上的整体设计，包括企业理念识别、企业行为识别、企业视觉识别，VI是CIS中的视觉传达系统，对企业形象在各种环境下的应用进行了合理规定。 20 三、任务实施 在制作网站前，需要先对网站进行准确定位，明确网站的主题与类型，然后规划网站的栏目、网站草图、站点结构。下面以“佳美馨装饰”网站为例，介绍网站的前期策划与内容组织。 网站首页结构 网站文件层次结构图 21 $$

资源预览图

1.1规划“佳美馨装饰”网站结构（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
1
1.1规划“佳美馨装饰”网站结构（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
2
1.1规划“佳美馨装饰”网站结构（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
3
1.1规划“佳美馨装饰”网站结构（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
4
1.1规划“佳美馨装饰”网站结构（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
5
1.1规划“佳美馨装饰”网站结构（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）
6
所属专辑
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。