网页制作(第一章网页制作基础)

合集下载

《网页设计基础》PPT课件

《网页设计基础》PPT课件

1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构

-
1
设计网页版式
2
确定网站结构


制作阶段
制作网页元素


插入元件与排版
作 流
上传网站

后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1.静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage

网页制作基础

网页制作基础

常见网站由域名(domain name 俗称网址或 域名)、网站源程序和网站空间三部分构成。

域名俗称网址; 网站源程序则放在网站空间里面,表现为网站前 台和网站后台; 网站空间由专门的独立服务器或租用的虚拟主机 承担。

2. 网站分类

根据网站所用编程语言分类:例如asp网站、 php网站、jsp网站、Asp. net网站等; 根据网站的用途分类:例如门户网站(综合网 站)、行业网站、娱乐网站等; 根据网站的功能分类:例如单一网站(企业网 站)、多功能网站(网络商城)等;
常见的Web浏览器软件有:IE、Firefox、 Opera和Netcape等。 不同Web浏览器软件所支持的网页格式有所区 别,所以WWW服务器提供网页信息时,要考虑客 户端软件的支持情况。
1.2.4 W3C
W3C是英文 World Wide Web Consortium 的缩写,中文意思是W3C理事会或万维网联盟。 W3C于1994年10月在麻省理工学院计算机科学实 验室成立。创建者是万维网的发明者Tim BernersLee。 W3C组织是对网络标准制定的一个非赢利组织, 像HTML、XHTML、CSS、XML的标准就是由 W3C来定制。
HTML是一种规范,一种标准,它通过标记符 号来标记要显示的网页中的各个部分。网页文件本 身是一种文本文件,通过在文本文件中添加标记符, 可以告诉浏览器如何显示其中的内容(如:文字如 何处理,画面如何安排,图片如何显示等)。
浏览器按顺序阅读网页文件,然后根据标记符 解释和显示其标记的内容,对书写出错的标记将不 指出其错误,且不停止其解释执行过程,编制者只 能通过显示效果来分析出错原因和出错部位。但需 要注意的是,对于不同的浏览器,对同一标记符可 能会有不完全相同的解释,因而可能会有不同的显 示效果。

网页制作基础知识

网页制作基础知识

4.制作工具的选择
可使用FrontPage、DreamWeaver等网页制作软件。在本案例中,将使用 DreamWeaver MX进行“网页制作学习园地”网站的创建。
1.2 理论知识
1.2.1 HTML语言
在Web的发展历史中,HTML技术是优秀而核心的Web技术之一。目前计算机上包含互 联网在内的大部分应用程序在交互操作上的核心原理都来自于HTML的链接设计思想。
<h#>...</h#> <b>...</b> <i>...</i> <u>...</u> <sup>...</sup> <sub>...</sub> <tt>...</tt> <cite>...</cite>
<em>...</em>
<address>...</address> <strong>...</strong> <pre>...</pre>
<font size=" ">
<font face=" ">
<font color=" ">
设置文字的颜色
2 . 文本样式标记
文本样式标记用于设置网页中文字格式化为特殊的形式,如加粗、倾斜等。
文本样式标记如下表:
标 记 说 明
定义标题级别,黑体字显示。"#"=1~6。<h1>显示的字号最大、<h6>最小。 设置粗体字 设置斜体字 设置下划线 设置文本为上标格式 设置文本为下标格式 设置打字机风格字体的文本 以引用或参考的形式格式化文本,通常显示为斜体。

《网页设计与制作》教案

《网页设计与制作》教案

《网页设计与制作》教案第一章:网页设计基础1.1 教学目标让学生了解网页设计的基本概念和原则让学生掌握网页设计的流程和方法1.2 教学内容网页设计的概念和定义网页设计的原则和要素网页设计的流程和方法1.3 教学方法讲授法:讲解网页设计的概念和原则实践法:学生动手实践设计简单的网页1.4 教学评价学生能回答出网页设计的概念和定义学生能理解并运用网页设计的原则和要素学生能独立完成简单的网页设计第二章:HTML与CSS基础2.1 教学目标让学生了解HTML和CSS的基本概念和作用让学生掌握HTML和CSS的基本语法和用法2.2 教学内容HTML的基本概念和语法CSS的基本概念和语法HTML和CSS的综合应用2.3 教学方法讲授法:讲解HTML和CSS的基本概念和语法实践法:学生动手实践编写HTML和CSS代码2.4 教学评价学生能回答出HTML和CSS的基本概念和作用学生能理解并运用HTML和CSS的基本语法和用法学生能独立完成简单的HTML和CSS代码编写第三章:网页布局与排版3.1 教学目标让学生了解网页布局和排版的基本原则和方法让学生掌握使用HTML和CSS进行网页布局和排版的技术3.2 教学内容网页布局的基本原则和方法网页排版的基本原则和方法使用HTML和CSS进行网页布局和排版的技术3.3 教学方法讲授法:讲解网页布局和排版的基本原则和方法实践法:学生动手实践进行网页布局和排版3.4 教学评价学生能回答出网页布局和排版的基本原则和方法学生能理解并运用HTML和CSS进行网页布局和排版的技术学生能独立完成具有良好布局和排版的网页设计第四章:网页动画与交互4.1 教学目标让学生了解网页动画和交互的基本概念和原理让学生掌握使用HTML和CSS实现网页动画和交互的技术4.2 教学内容网页动画的基本概念和原理网页交互的基本概念和原理使用HTML和CSS实现网页动画和交互的技术4.3 教学方法讲授法:讲解网页动画和交互的基本概念和原理实践法:学生动手实践实现网页动画和交互4.4 教学评价学生能回答出网页动画和交互的基本概念和原理学生能理解并运用HTML和CSS实现网页动画和交互的技术学生能独立完成具有动画和交互功能的网页设计第五章:网页优化与推广5.1 教学目标让学生了解网页优化和推广的基本概念和方法让学生掌握使用SEO和网络营销技术进行网页优化和推广的技巧5.2 教学内容网页优化的基本概念和方法网页推广的基本概念和方法使用SEO和网络营销技术进行网页优化和推广的技巧5.3 教学方法讲授法:讲解网页优化和推广的基本概念和方法实践法:学生动手实践进行网页优化和推广5.4 教学评价学生能回答出网页优化和推广的基本概念和方法学生能理解并运用SEO和网络营销技术进行网页优化和推广的技巧学生能独立完成具有优化和推广功能的网页设计第六章:网页图像处理与多媒体应用6.1 教学目标让学生了解网页图像处理的基本概念和工具让学生掌握网页图像处理和多媒体应用的技术6.2 教学内容网页图像处理的基本概念和工具(如Photoshop、Fireworks等)多媒体元素在网页中的应用(如音频、视频等)图像和多媒体的HTML和CSS标记6.3 教学方法讲授法:讲解网页图像处理的基本概念和工具实践法:学生动手实践进行网页图像处理和多媒体应用6.4 教学评价学生能回答出网页图像处理的基本概念和工具学生能理解并运用网页图像处理和多媒体应用的技术学生能独立完成具有图像和多媒体应用的网页设计第七章:网页编程技术7.1 教学目标让学生了解网页编程的基本概念和语言让学生掌握常用的网页编程技术和框架7.2 教学内容网页编程的基本概念和语言(如JavaScript、jQuery等)常用的网页编程技术和框架(如Bootstrap、React等)编程实践和项目案例7.3 教学方法讲授法:讲解网页编程的基本概念和语言实践法:学生动手实践进行网页编程和技术应用7.4 教学评价学生能回答出网页编程的基本概念和语言学生能理解并运用常用的网页编程技术和框架学生能独立完成编程实践和项目案例第八章:移动网页设计与制作8.1 教学目标让学生了解移动网页设计的基本概念和原则让学生掌握移动网页设计与制作的技术和工具8.2 教学内容移动网页设计的基本概念和原则移动网页设计与制作的技术和工具(如Responsive Design、Adobe Edge Mobile等)移动网页设计的实践和案例分析8.3 教学方法讲授法:讲解移动网页设计的基本概念和原则实践法:学生动手实践进行移动网页设计与制作8.4 教学评价学生能回答出移动网页设计的基本概念和原则学生能理解并运用移动网页设计与制作的技术和工具学生能独立完成移动网页设计与制作的项目案例第九章:网页项目实战与团队协作9.1 教学目标让学生了解网页项目实战的基本流程和方法让学生掌握团队协作的基本技巧和工具9.2 教学内容网页项目实战的基本流程和方法团队协作的基本技巧和工具(如Git、Project Management Software等)项目案例分析和实战演练9.3 教学方法讲授法:讲解网页项目实战的基本流程和方法实践法:学生分组进行项目实战和团队协作9.4 教学评价学生能回答出网页项目实战的基本流程和方法学生能理解并运用团队协作的基本技巧和工具学生能独立完成项目实战和团队协作的任务第十章:网页设计与制作的未来趋势10.1 教学目标让学生了解网页设计与制作的未来趋势和发展方向让学生掌握前沿技术和创新思维的方法10.2 教学内容网页设计与制作的未来趋势和发展方向(如VR/AR、等)前沿技术和创新思维的方法(如Blockchn、Design Thinking等)创新项目和案例分析10.3 教学方法讲授法:讲解网页设计与制作的未来趋势和发展方向实践法:学生进行创新项目和思维训练10.4 教学评价学生能回答出网页设计与制作的未来趋势和发展方向学生能理解并运用前沿技术和创新思维的方法学生能独立完成创新项目和案例分析重点和难点解析重点环节一:网页设计的概念和原则重点关注学生对网页设计的基本理解,以及如何运用设计原则进行网页创作。

第一章网页制作基础

第一章网页制作基础

Page
23
1.2.3 其他网页制作相关技术(续)
使用 DHTML 技术,可使网页设计者创建出能够与用 户交互并包含动态内容的页面。实际上,DHTML 使 网页设计者可以动态操纵网页上的所有元素——甚至 是在这些页面被装载以后。利用 DHTML,网页设计 者可以动态地隐藏或显示内容、修改样式定义、激活 元素以及为元素定位等。 DHTML 技术是一种非常实用的网页设计技术,目前 早已广泛地应用到了各类大大小小的网站中,成为高 水平网页必不可少的组成部分。
Page
31
1.3.2 素材处理工具(续)
媒体处理软件主要有 Flash、音频处理软件和视 频处理软件等。
Flash 是目前最流行的一种 Web 矢量动画软件, Flash 图形是压缩的矢量图形,采用了网络流式媒体技 术,可以在网上迅速传输;同时由于矢量图形不会因 为缩放而导致影像失真,因此在 Web 上有广泛的应用。 常用的音频处理软件有 Audition、GoldWave 等,常 用的视频处理软件有 Premiere、AfterEffect等。
从网络通信技术的角度看,Internet 是一个以 TCP/IP 网络协议连接各个国家、各个地区、各 个机构的计算机网络的数据通信网。 从信息资源的角度看,Internet 是一个集各个部 门、各个领域的各种信息资源为一体,供网上用 户共享的信息资源网。
Page
4
1.1.1 Internet 与 www ( 续 )
CSS(Cascading Style Sheet,层叠样式表)技 术是一种格式化网页的标准方式,它扩展了 HTML 的功能,使网页设计者能够以更有效的方式设臵网 页格式。
Page 20
1.2.2例

网页制作课后练习

网页制作课后练习

《网页制作》课后练习第一章网页制作基础判断正误(1)HTML标记符一般不区分大小写。

(对)(2)网站就是一个链接的页面集合。

(对)(3)将网页上传到Internet时通常采用FTP方式。

(对)(4)所有的HTML标记符都包括开始标记符和结束标记符。

(错)选择题(单选)(1)WWW是的意思。

答案:BA.网页B.万维网C.浏览器D.超文本传输协议(2)在网页中显示特殊字符,如果要输入“<”,应使用_________。

答案:D A.lt; B.&Lt; C.&lt D.&lt;(3)浏览器是一种_________。

答案:BA.系统程序B.客户端程序C.服务器端程序D.编程工具填空题(1)如果要为网页指定黑色的背景颜色,应使用以下html语句:<body > 答案:bgcolor="black"(2)网页的扩展名通常是:答案:.htm或.html(3)要为网页添加背景音乐,应使用标记符。

答案:BGSOUND(4)BODY的属性用于设置未被访问过的超链接的颜色。

答案:link简答题(1)简要说明HTML 的基本工作原理。

综合题(1)编写一个能够显示背景图案并能播放背景音乐的网页。

(2)编写一个显示为如图所示的页面。

第二章文本与超链接判断正误(1)用H1标记符修饰的文字通常比用H6标记符修饰的要小(错)。

(2)B标记符表示用粗体显示所包括的文字。

(对)(3)使用FONT 标记符的size 属性可以指定字体的大小。

(对)(4)OL和LI标记符结合,可以创建无序列表,UL和LI 标记符结合可以创建有序列表。

(错)(5)在网页中创建超链接,其中URL 可以是相对地址或绝对地址。

(对)选择题(单选)(1)以下关于FONT标记符的说法中,错误的是:答案:D A.可以使用color 属性指定文字颜色。

B.可以使用size 属性指定文字大小(也就是字号)。

C.指定字号时可以使用1~7 的数字。

第一章网页基础

第一章网页基础

1.1.3静态网页与动态网页 1.1.3静态网页与动态网页
2. 动态网页 动态网页使用ASP、PHP和CGI等程序生成,动态网页中的某些脚本 只能在Web服务器上运行,而静态网页中的任何脚本都不能在Web 服务上运行。当Web服务器接收到对静态网页的请求时,服务器将 Web 该页发送到请求浏览器,而不进一步的处理。当Web服务器接收到 对动态网页的请求时,它将做出不同的反映:服务器根据URL携带 的参数通过应用服务软件(如IIS等)运行服务器端程序,产生的结 果页面再返回客户端。应用服务软件与Web服务器软件一并安装、 运行在同一台计算机上。
1.2 网站的基本结构
• 1.2.2 动态网站的层次结构 • Web服务器上存在许多HTML文件,用户可以使用浏览器通过HTTP 协议来访问并显示这些超文本页面。但是HTML文件仅仅是静态的网 页,不能动态更新,为了能动态访问网上的数据库资源,达到交互式 的访问的目的,Web服务器中包括了CGI(公共网关接口),提供了 与网上数据库资源连接的可能性。中间件可以实现Web服务器与数据 库资源的连接。对于嵌入了数据库访问检索项的网页,中间件可以将 检索项转换成SQL语句访问数据库,并将所需的数据库资源解释成浏 览器可以解释的HTML页面供用户浏览。数据库资源可以经局域网或 广域网与Web服务器连接。 • 另外,从站点的文件目录层次来看,网站内文件组织的第一层是站点 文件夹,可以看成是站点的根目录;将网站内容分类后,放在站点文 件夹下面的子目录,称为第二层;每个分类内容下面还有细节内容可 以放在第二层目录的下面,称为第三层。网站的目录结构设计主要考 虑是否方便浏览者进行浏览,这需要网站的设计者对网站的内容在整 体上进行规划。一般中小型的网站的层次不超过三层,层次过于复杂 容易使浏览者不易查找到想要浏览的内容。

网页设计与制作案例教程电子教案课件

网页设计与制作案例教程电子教案课件

网页设计与制作案例教程-电子教案课件第一章:网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讲解网页设计的基本原则和设计流程1.2 网页布局与排版介绍网页布局的概念和重要性讲解常用的网页布局方法和技术演示实例:制作一个简单的网页布局第二章:HTML与CSS基础2.1 HTML基础介绍HTML的概念和作用讲解HTML的基本结构和常用标签演示实例:制作一个简单的网页2.2 CSS基础介绍CSS的概念和作用讲解CSS的基本语法和常用选择器演示实例:为网页添加样式和布局第三章:图像与多媒体处理3.1 图像处理介绍图像在网页设计中的作用和重要性讲解图像的基本格式和处理方法演示实例:制作一个简单的图像轮播效果3.2 多媒体处理介绍多媒体在网页设计中的应用讲解音频和视频的嵌入方法演示实例:在网页中添加音频和视频第四章:网页交互与动画4.1 交互设计基础介绍交互设计在网页设计中的作用和重要性讲解常用的交互设计技术和方法演示实例:制作一个简单的交互式导航菜单4.2 动画与过渡效果介绍动画在网页设计中的应用和重要性讲解CSS动画和过渡效果的语法和用法演示实例:制作一个简单的CSS动画效果第五章:响应式网页设计5.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解响应式网页设计的基本原则和方法5.2 媒体查询与网格系统讲解媒体查询的语法和用法讲解网格系统的概念和应用演示实例:制作一个响应式网页布局第六章:网页前端编程技术6.1 JavaScript基础介绍JavaScript的概念和作用讲解JavaScript的基本语法和常用语法演示实例:制作一个简单的网页交互效果6.2 jQuery库的使用介绍jQuery的概念和作用讲解jQuery的基本语法和常用方法演示实例:使用jQuery实现网页元素的动态效果第七章:网页后端技术7.1 PHP基础介绍PHP的概念和作用讲解PHP的基本语法和常用语法演示实例:制作一个简单的PHP网页7.2 MySQL数据库的使用介绍MySQL的概念和作用讲解MySQL的基本操作和常用SQL语句演示实例:使用MySQL存储和管理网页数据第八章:网页优化与性能提升8.1 网页优化概述介绍网页优化的重要性讲解网页优化的基本原则和方法8.2 提高网页性能讲解提高网页加载速度的方法讲解代码压缩和合并的技术演示实例:优化网页性能第九章:搜索引擎优化(SEO)9.1 SEO基础介绍SEO的概念和作用讲解SEO的基本原则和方法9.2 关键词研究和内容优化讲解关键词研究的方法和技巧讲解内容优化的重要性和方法演示实例:为一个网页进行SEO优化第十章:网页设计与制作的实战项目10.1 项目概述和需求分析介绍项目背景和目标分析项目需求和功能10.2 网页设计与制作流程讲解网页设计与制作的详细流程演示实例:完成一个实战项目的网页设计与制作第十一章:网页设计与制作工具11.1 网页编辑器与IDE介绍常用的网页编辑器和集成开发环境(IDE)讲解如何使用这些工具进行网页设计与制作11.2 图形设计软件介绍常用的图形设计软件及其在网页设计中的应用讲解如何使用这些工具进行网页图形设计第十二章:网页设计与制作实战技巧12.1 网页动画与特效讲解如何制作网页动画和特效演示实例:制作一个动态轮播图12.2 网页响应式设计讲解如何实现网页的响应式设计演示实例:制作一个响应式网页布局第十三章:网页安全性与维护13.1 网页安全性基础介绍网页安全性的重要性和常见安全问题讲解如何提高网页安全性13.2 网页维护与更新讲解如何进行网页的维护和更新演示实例:对一个网页进行维护和更新第十四章:网页设计与制作的案例分析14.1 案例一:企业官方网站设计分析企业官方网站的设计要求和特点讲解如何设计和制作企业官方网站14.2 案例二:电子商务网站设计分析电子商务网站的设计要求和特点讲解如何设计和制作电子商务网站第十五章:网页设计与制作的未来发展15.1 网页设计趋势与创新分析当前网页设计的趋势和创新方向讲解如何跟上网页设计的未来发展15.2 网页设计与制作的未来技术介绍未来可能影响网页设计与制作的技术讲解如何应对这些技术挑战和机遇重点和难点解析重点:1. 网页设计基础:理解网页设计原则、设计流程以及布局与排版的方法。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
www.***.com /china/index.html http://www.***.com /china/index.html
第一章
6.
网站设计概述
1.1 网络基础知识
域名 Internet域名是Internet上的一个服务器或 一个网络系统的名字,即网站的名称。在全世界 没有重复的域名。域名由若干个英文字母或数字 组成,由“.”分隔成几部分。如
第一章
网站设计概述
Logo
1.3 网页基本元素
导航栏
表单 Banner
图像链接
文本链接
第一章
1、文本
网站设计概述
1.3 网页基本元素
文本是最重要的信息载体与交流工具,网 页中的信息一般以文本为主。在网页中可以通过 字体、大小、颜色、底纹、边框等来设置文本的 属性。 对文本也可以设置链接页面,形成文本链接 元素。
— LAN : Local Area Network — MAN : Metropolitan Area Network
— WAN : Wide Area Network
第一章
网站设计概述
1.1 网络基础知识
2. WWW WWW是World Wide Web的缩写,又称3W或 Web,中文译名为“万维网”。它作为Internet 上的新一代用户界面,摒弃了以往纯文本方式的 信息交互手段,采用超文本(HyperText)方式。
例: /page1/index.html
第一章
网站设计概述
1.1 网络基础知识
② 相对路径URL:指Internet上的资源相对 于当前页面的(即正在访问的页面)的路径。通常 只包含文件夹名和文件名,有时只有文件名。
可以用相对URL指向位于与原文件在同一服务器 或同一文件夹中的文件。
3、超链接 超链接是网站的灵魂,从一个网页指向另 一个目的端的链接。 超链接可以是文本或者图片。
◆文本链接
◆图像链接
◆导航栏超链接
第一章
网站设计概述
1.3 网页基本元素
4、表单 表单是用来收集站点访问者信息的域集。 站点访问者填写表单的方式是输入文本、单 击单选按钮与复选框,以及从下拉菜单中选择选 项。在填写好表单之后,站点访问者便送出所输 入的数据,该数据就会根据所设置的表单处理程 序,以各种不同的方式进行处理。
2. Dreamweaver Dreamweaver 是Macromedia公司的一款“所 见即所得”的网页编辑工具,或称网页排版软件。
第一章
网站设计概述
1.2 网络制作相关软件
3. Flash Flash也是Macromedia公司的产品,是一款优 秀的网页动画开发软件。 ●Flash采用矢量图形技术,是交互式矢量图 和Web动画的标准。 ●Flash所创建的swf文件体积很小,可以以 插件的形式加入到网页中。
第一章
网站设计概述
● Fireworks可以在同一文本框里改变单个 字的颜色。同时,Fireworks 可以引用Photosho p的所有滤镜,并且可以直接将PSD格式图片导入。 ●Fireworks不仅可生成静态的图像,也可 轻松创作GIF小动画,还可生成包含HTML和 JavaScript代码的动态图像,甚至可以编辑 整幅网页。
第一章
网站设计概述
1.1 网络基础知识
各部分的含义如下: (1)通信协议:通信协议是URL所连接的网络服务性质。 最常用的是HTTP协议,它也是目前WWW中应用最广的协议。 ● HTTP 超文本传输协议 - 表示文件在WE上 - 表示文件在FTP服务
第一章
网站设计概述
1.1 网络基础知识
—— HTTP(Hypertext Transfer Protocol ) 超文本传输协议 —— FTP(File Transfer Protocol ) 文件传输协议 —— SMTP(Simple Mail Transfer Protocol ) 简单邮件传输协议 —— TELNET 远程网络访问协议
欧阳红巍 Happy_weni@
第一章
目 录
网站设计概述
1.1 网络基础知识
1.2 网络制作相关软件
1.3 网页基本元素
1.4 网站开发流程
1.5 网页设计的基本原则
1.6 网站设计相关语言
第一章
网站设计概述
1.1 网络基础知识
1. Internet Internet(国际互联网)是一个由各种不同类 型和规模的独立运行和管理的计算机网络组成的 全球范围的计算机网络,组成Internet的计算机 网络包括局域网(LAN)、城域网(MAN)以及大 规模的广域网(WAN)等。
网站设计概述
第一章
网站设计概述
第一章
网站设计概述
1.4 网站开发流程
2、网站形象及CI策划 ⑶ 设计网站的标准字体 “标准字体”是指用于标志、标题和主菜单的 特有字体。
一般网站默认字体是宋体。
第一章
网站设计概述
第一章
网站设计概述
第一章
网站设计概述
1.4 网站开发流程
2、网站形象及CI策划 ⑵ 确定网站的标准色彩 “标准色彩”是指体现网站形象和延伸内涵的 色彩。
●一个网站的标准色彩不超过3种。
●适合于网站标准色的颜色有:蓝、黄/橙
色及黑/白/灰色三大系列色。
第一章
网站设计概述
第一章
第一章
网站设计概述
1.3 网页基本元素
5、表格 表格是网页排版的灵魂,使用表格排版是网 页的主要制作形式。通过表格可以精确地控制各 网页元素在网页中的位置。
第一章
网站设计概述
1.3 网页基本元素
6、动画 动画是网页上最活跃的元素,通常制作优秀、 创意出众的动画是吸引浏览者的最有效的方法。 网页中的 Banner一般都是动画的形式。
第一章
网站设计概述
1.4 网站开发流程
1、确定网站主题和名称 ⑴ 确定网站主题需注意一下几点:
◇主题要小而精。 ◇题材最好是你自己擅长或者喜爱的内容。
◇题材不要太滥或者目标太高。
⑵ 确定网站名称
名称要正,要易记,要有特色。
第一章
网站设计概述
1.4 网站开发流程
2、定位网站形象和CI策划 ⑴ 网站的标志和LOGO:
FTP:// ftp .microsoft. com/
第一章
网站设计概述
1.1 网络基础知识
● FILE 资源是本地计算机上的文件
- 表示文件在您自己的局部系统或匿名服务器上 file:/// c: /temp/abc.html ● Mailto资源为电子邮件地址,通过 SMTP(Simple Mail Transfer Protocol )简单邮件传输协议访问。 mailto: jt747 @ (2)主机域名/IP地址:是指存放资源的服务器的域名 系统 (DNS) 主机名或 IP 地址。
第一章
网站设计概述
1.2 网络制作相关软件
4. Fireworks Fireworks也是Macromedia公司的产品,是 网页图形制作软件。 ● Fireworks以处理网页图片为特长,通过 它可以把图做得又小又漂亮。 ● Fireworks是基于屏幕的图像处理软件, 而不是基于出版印刷,所以它对可编辑图像的分 辨率要求不高。
CC
ss.txt h.exe rr.txt
f.txt
BB
所谓“相对路径”: 就是所需资 源相对于当前位置的路径。
第一章
网站设计概述
1.1 网络基础知识
◆绝对URL与相对URL的概念。
① 绝对URL:指明需要访问的信息或资源 的绝对位置。即使用完整的URL指向指定网页。
一般情况下,在指定外部Internet上资源时应使 用绝对URL。
IP 地 址 202.108.22.5 DNS 域 名
第一章
网站设计概述
1.1 网络基础知识
7. URL URL(Uniform/Universal Resource Locator) 是“统一资源定位器”的英文缩写。用于标识 www网中每个信息资源的位置。
通信协议://主机域名或IP地址/文件路径/文件名 URL由三部分组成: ● 协议类型 ● 主机名 ● 路径及文件名。
第一章
网站设计概述
1.1 网络基础知识
(3)路径及文件名:由零或多个“/”符号隔开的字符串, 一般用来表示主机上的一个目录或文件地址。
http: /// index.htm
通信 协议
域名/IP地址
202.195.208.4
路径及文件名
第一章
网站设计概述
1.1 网络基础知识
第一章
网站设计概述
第一章
网站设计概述
1.1 网络基础知识
8. 主页 网站的第一个网页,是进入一个网站的入口。 常见的名称有:default.html, index.html 等
主页中通常包含指向该站点中其他相关页面 或其他网站的超链接。
第一章
网站设计概述
1.2 网络制作相关软件
1. FrontPage FrontPage是Microsoft 出品的,是一个简单、 易用且功能强大的网页编辑工具。是一款设计网 页和管理网站的软件。
第一章
网站设计概述
1.3 网页基本元素
2、图像 在网页中既可以通过图像的形式表达主题, 也可以通过图像对网页起一个装饰作用,还可以 通过图像链接到目标网页。
用于网页中的图片一般为 JPG 格式和 GIF 格式,即以.jpg(或.jpeg)和.gif 为后缀的文件。
第一章
网站设计概述
1.3 网页基本元素
通信协议: 即超文本传输协议 Web服务器地址 即域名 服务器中文件的 路径 文件名
/intl/cn/file1.html
相关文档
最新文档