单元1 网页设计与制作综述
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
13
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
1. IP地址 IP地址由32位二进制数组成。IP地址是在Internet网络中为每一台主机分配的惟一标 识，例如，某台主机的IP地址是00001010 01000001 01010111 11011100，但是这样 的IP地址太难记忆，为了便于阅读理解，通常把32位二进制数分成4个字节段，每 字节段8位用小数点将它们隔开，把每一字节段数都转换成相应的十进制数，称为 点分十进制数。例如，上述主机IP地址用点分十进制数表示为10.65.87.220。
• 静态网页：指用HTML语言编写的网页，网页文件后缀名一般为.htm或html。 • 动态网页：这类网页使用ASP、PHP、JSP和ASP.NET等程序生成，可以与浏览者进行
交互，也称交互式网页，例如，收集浏览者填写的表单信息（用户名和密码等）。
20
任务1-2：认识网页和网站
任务1-2-2：认识网页的基本组成元素
1．文本 2．图像 3．超级链接 4．动画 5．表单 6．音频和视频
动画 表单 文本超级链接
图像超级链接 图像
21
任务1-2：认识网页和网站
任务1-2-3：认识网站
网站概念 网站（Website）是用于展示特定内容的相关网页的集合。网站中的各个网页通常由 超级链接关联起来，形成一个主题鲜明、风格一致的Web站点。网站中的网页结构 性较强，组织比较严密，通常都有一个主页，包括网站Logo、Banner（横幅广告） 和导航栏等内容。目前，各级政府，公司和单位基本上都拥有自己的网站，利用网 站进行信息发布和宣传等。
16
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
2.域名系统 例如，中国建设银行的域名ccb.com组成，如图1-3所示。
主机名.二级域名.顶级域名
www.ccb.com
商业机构 中国建设银行 主机名
17
任务1-1：认识Internet
任务1-1-3：认识统一资源定位器URL
（3）浏览器是指可以显示网页服务器或者文件系统的HTML（Hyper Text Markup Language，超文本标记语言）文件内容，并让用户与这些文件交互的一 种软件。
11
任务1-1：认识Internet 同步练习
请谈谈您对万维网的认识，它有哪些特点？
12
任务1-1：认识Internet
24
任务1-3：初识网页设计
任务1-3-1：了解网页设计基本原则
1．明确网站目标和用户需求 2．主题鲜明 3．注重布局设计 4．避免滥用技术 5．更新维护
25
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
1．设计风格定位 风格即网站的特点，指的是浏览者对网站内容和形式的直观感受，所透露出来的是 设计者的文化品位。所以网站设计风格定位主要从3方面考虑。 （1）确保网页界面有较强的一致性，使网站形成统一的风格界面，这里的一致性 包括字体、标题、图像、背景颜色和注脚等。 （2）确保网页界面美观、简洁，易于访问。 （3）合理安排网页元素，要让访问者在浏览网页过程中体验到视觉的秩序感、节 奏感和新奇感。避免动画过多，文字字体不一致，按钮风格不统一等问题。
纪律与要求
不得迟到早退、缺课逃课 不得携带食物进入机房，注意保持机房卫生 未经老师允许不得随意进出机房 上课不要说话、睡觉、玩手机 每次下课后，每班留下两名学生打扫机房卫生
考核方式
考评 方式
考评 实施
考评 标准
素质考评 20分
过程考评（项目考评） 日常考评 40 分
考勤与纪律
19
任务1-2：认识网页和网站
任务1-2-1：网页的定义和分类的认识
1 .网页按位置分类
• 主页：是指网站的主要导航页面，一般是进入网站时打开的第一个页面，也称为首页
，通常首页的文件名为index.html或者default.html；
• 内页：是指与主页相链接的页面，也就是网站的内部页面。
2．网页按表现形式分类
课程简介
1.课程说明：本课程详细介绍XHTML基本语法、Dreamweaver CS6操作技能、CSS基 本知识，以及网页布局的工作流程，配合多种商业案例精粹的训练，有效 地促进了学生网页设计与制作技能的提升。
2.课程要求：要求学生熟练掌握网页制作工具，能自行设计各种网页。具备网站的建立、 规划、管理、发布的相关技术及网页制作的操作技能，能独立设计WEB站点。
的动作频率也不能太大，否则可能会适得其反。
27
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
（2）Banner
Banner即网站中的横幅广告，Banner文件大小应控制在5KB-50KB左右。Banner图像
清晰，颜色搭配和谐统一，字体醒目，像素合适，对于网站来说，具有画龙点睛的
作用。
用户想要浏览服务器上的某一信息资源时，就是通过统一资源定位器(Uniform Resource
Locator，URL)来惟一指定的。URL是一个指定因特网或内联网服务器中目标位置的格式
化字符串。也就是说，通过URL可访问Internet上任何一台主机或者主机上的文件和文件
夹。
URL一般格式如下：
<URL的访问方法>://<主机域名或IP地址>[:<端口号>][/<路径>][/<文档>]
目录
8
学习任务
了解Internet基础知识 掌握网页和网站的基本概念 熟悉网页基本组成元素 理解网页设计的概念 了解网站建设的基本流程 初步认识Adobe Dreamweaver CS6网页制作工具 学会创建、打开、编辑和关闭一个网页文档 对网页设计与制作有一个初步宏观整体认识
9
案例宏观展示引入
23
任务1-2：认识网页和网站
任务1-2-3：认识网站
3 .专业网站 这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。 如榕树下网站（http://www.rongshuxia.com）即是一个专业文学网站。 4 .职能网站 职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属 于这类网站，较有名的电子商务网站有阿里巴巴（http://china.alibaba.com）和当当 网上书店（http://www.dangdang.com）等。
26
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
2．网页基本元素的设计原则 一个完整的网站都有Logo、Banner、文本、图像、导航栏和按钮等网页元素，这些 元素被称为网页的基本元素。 （1）Logo Logo即网站的标志，其制作要点如下： • Logo的位置通常位于网页的左上角，需保证Logo醒目，让浏览者第一眼看到。 • 站点的Logo虽然有动态的，但不是所有的站点都适宜用动态Logo，且动态Logo
默认文档，也称为主页（Home Page）。
18
任务1-2：认识网页和网站
任务1-2-1：网页的定义和分类的认识
上网时浏览的一个个页面就是网页 （Webpage），网页又称为Web页， 其中的图像、文字、超级链接等是 构成网页的基本元素，是Internet展 示信息的一种形式。如图1-4所示为 中关村在线网站的首页。
22
任务1-2：认识网页和网站
任务1-2-3：认识网站
按网站内容可将网站分为4种类型：门户网站、个人网站、专业网站和职能网站。 1 .门户网站 这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、 新闻和娱乐等方方面面的内容，具有论坛、搜索等功能。现在国内较著名的门户网 站有搜狐（http://www.sohu.com）、网易（http://www.163.com）等。 2 .个人网站 个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等 都是非常有个性的。如阮一峰的个人网站（http://www.ruanyifeng.com/home.html）。
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
（4）图像 图像是网页中不可或缺的元素，使用图像时除了美观外，还应考虑它对网页下载速 度的影响。在选择图片时应注意以下3点： • 图像应采用淡色系列的背景，能与主题分离的用浅色标志或文字背景。 • 图像的主题要清晰可见，所表达的含义要简单明了。 • 图像中的文字要求清晰可辨，不可出现朦胧、辨识不清的情况。
14
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
1. IP地址 常用的IP地址有A类IP地址、B类IP地址和C类IP地址。IP地址是两级层次结构，包 括网络地址和主机地址，如图1-2所示。
15
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
平日作业与上机
全勤满分，缺勤扣分
根据作业完成数量及质量评分
注：造成设备损坏或人身伤害的项目计0分。
期末考评 （卷面考评）
40分
期末考试
根据考试成绩进行 评分
ቤተ መጻሕፍቲ ባይዱ
Dreamweaver CS6 网页设计与制作实用教程
单元1 网页设计与制作综述
单元1 网页设计与制作综述
7
CONTENTS
任务1-1：认识Internet 任务1-2：认识网页和网站 任务1-3：初识网页设计 任务1-4：认识网页制作常用工具 任务1-5：网站建设基本流程 任务1-6：我的第一个网页
任务1-1-2：认识IP地址和Internet域名
与Internet相连的任何一台计算机（称为主机）都有惟一的一个网络地址，简称为IP （Internet Protocol）地址。在Internet中域名通过域名系统（Domain Name System， DNS）解析为IP地址，为站点访问浏览提供方便，也便于用户记忆站点。
10
任务1-1：认识Internet
任务1-1-1：认识万维网和浏览器
（1）万维网（World Wide Web，WWW）是因特网的主要部分，也可以简称为 Web、3W等，它是基于“超文本”的信息查询和信息发布的系统。
（2）超文本传输协议（HTTP，Hypertext Transfer Protocol）是一种网络上传输 信息的协议，专门用于传输万维网中的信息资源。
Dreamweaver CS6 网页设计与制作实用教程
单元1 网页设计与制作综述
课程简介
1
课程的地位与作用
网络专业专业课程 掌握网页制作所涉及的技术、规范和软件 了解平面设计知识，提高美学素养 为后续的web程序设计类课程奠定基础 主要面向岗位：网页设计师、网站编辑、网站程序员、Web程序员
2.域名系统 由于IP地址是数字标识，使用时难以记忆，因此在IP地址的基础上又发展出一种符 号化的地址方案，来代替数字型的IP地址。 例如，承德石油高等专科学校域名为cdpc.edu.cn，Web服务器的IP地址210.31.208.1 对应的域名为www.cdpc.edu.cn。 域名的结构由标号序列组成，各标号分别代表不同级别的域名，各标号之间用点隔 开，即 主机名.…….四级域名.三级域名.二级域名.顶级域名
（3）文本
网页中最主要的元素就是文本，文本内容对网页的整体表现起着决定作用。编辑文
本时需注意以下3点：
• 文本的颜色需要能够明显地与背景区别开来，让浏览者能清楚地查看文本。
• 每行文字最好为20～30个汉字的长度，并注意段落的区分和缩进，以便于阅读。
• 同版面文本样式不宜过多，最好在3种以内。
28
• URL的访问方式：指的是访问使用的协议，可以是HTTP、FTP等。
• 端口：每种访问协议都有默认的端口号，通常省略。例如，访问网页文默认端口是80。
• 路径：是文档在主机上的相对存储位置。
• 文档：是具体的网页文件。例如：http://www.cdpc.edu.cn/index.html，其中index.html为
3.学习方法：听讲、理解、阅读、记忆、鉴赏、实践。 4.参考教材： (1)《Dreamweaver CS6网页制作》（大型互动多媒体教学演示+海量实例案例+实例 素材+全彩印刷）， 清华大学出版社 (2)《Dreamweaver CS6网站设计与开发实战》，清华大学出版社
课程的特点
软件操作难度不大，但设计作品难度极高 实践环节众多，要重视动手操作 要有宽广的知识面、一定的审美能力 注重平时的观察和经验积累 目标：或能设计作品，或能熟练操作 答疑时间，课代表
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
1. IP地址 IP地址由32位二进制数组成。IP地址是在Internet网络中为每一台主机分配的惟一标 识，例如，某台主机的IP地址是00001010 01000001 01010111 11011100，但是这样 的IP地址太难记忆，为了便于阅读理解，通常把32位二进制数分成4个字节段，每 字节段8位用小数点将它们隔开，把每一字节段数都转换成相应的十进制数，称为 点分十进制数。例如，上述主机IP地址用点分十进制数表示为10.65.87.220。
• 静态网页：指用HTML语言编写的网页，网页文件后缀名一般为.htm或html。 • 动态网页：这类网页使用ASP、PHP、JSP和ASP.NET等程序生成，可以与浏览者进行
交互，也称交互式网页，例如，收集浏览者填写的表单信息（用户名和密码等）。
20
任务1-2：认识网页和网站
任务1-2-2：认识网页的基本组成元素
1．文本 2．图像 3．超级链接 4．动画 5．表单 6．音频和视频
动画 表单 文本超级链接
图像超级链接 图像
21
任务1-2：认识网页和网站
任务1-2-3：认识网站
网站概念 网站（Website）是用于展示特定内容的相关网页的集合。网站中的各个网页通常由 超级链接关联起来，形成一个主题鲜明、风格一致的Web站点。网站中的网页结构 性较强，组织比较严密，通常都有一个主页，包括网站Logo、Banner（横幅广告） 和导航栏等内容。目前，各级政府，公司和单位基本上都拥有自己的网站，利用网 站进行信息发布和宣传等。
16
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
2.域名系统 例如，中国建设银行的域名ccb.com组成，如图1-3所示。
主机名.二级域名.顶级域名
www.ccb.com
商业机构 中国建设银行 主机名
17
任务1-1：认识Internet
任务1-1-3：认识统一资源定位器URL
（3）浏览器是指可以显示网页服务器或者文件系统的HTML（Hyper Text Markup Language，超文本标记语言）文件内容，并让用户与这些文件交互的一 种软件。
11
任务1-1：认识Internet 同步练习
请谈谈您对万维网的认识，它有哪些特点？
12
任务1-1：认识Internet
24
任务1-3：初识网页设计
任务1-3-1：了解网页设计基本原则
1．明确网站目标和用户需求 2．主题鲜明 3．注重布局设计 4．避免滥用技术 5．更新维护
25
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
1．设计风格定位 风格即网站的特点，指的是浏览者对网站内容和形式的直观感受，所透露出来的是 设计者的文化品位。所以网站设计风格定位主要从3方面考虑。 （1）确保网页界面有较强的一致性，使网站形成统一的风格界面，这里的一致性 包括字体、标题、图像、背景颜色和注脚等。 （2）确保网页界面美观、简洁，易于访问。 （3）合理安排网页元素，要让访问者在浏览网页过程中体验到视觉的秩序感、节 奏感和新奇感。避免动画过多，文字字体不一致，按钮风格不统一等问题。
纪律与要求
不得迟到早退、缺课逃课 不得携带食物进入机房，注意保持机房卫生 未经老师允许不得随意进出机房 上课不要说话、睡觉、玩手机 每次下课后，每班留下两名学生打扫机房卫生
考核方式
考评 方式
考评 实施
考评 标准
素质考评 20分
过程考评（项目考评） 日常考评 40 分
考勤与纪律
19
任务1-2：认识网页和网站
任务1-2-1：网页的定义和分类的认识
1 .网页按位置分类
• 主页：是指网站的主要导航页面，一般是进入网站时打开的第一个页面，也称为首页
，通常首页的文件名为index.html或者default.html；
• 内页：是指与主页相链接的页面，也就是网站的内部页面。
2．网页按表现形式分类
课程简介
1.课程说明：本课程详细介绍XHTML基本语法、Dreamweaver CS6操作技能、CSS基 本知识，以及网页布局的工作流程，配合多种商业案例精粹的训练，有效 地促进了学生网页设计与制作技能的提升。
2.课程要求：要求学生熟练掌握网页制作工具，能自行设计各种网页。具备网站的建立、 规划、管理、发布的相关技术及网页制作的操作技能，能独立设计WEB站点。
的动作频率也不能太大，否则可能会适得其反。
27
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
（2）Banner
Banner即网站中的横幅广告，Banner文件大小应控制在5KB-50KB左右。Banner图像
清晰，颜色搭配和谐统一，字体醒目，像素合适，对于网站来说，具有画龙点睛的
作用。
用户想要浏览服务器上的某一信息资源时，就是通过统一资源定位器(Uniform Resource
Locator，URL)来惟一指定的。URL是一个指定因特网或内联网服务器中目标位置的格式
化字符串。也就是说，通过URL可访问Internet上任何一台主机或者主机上的文件和文件
夹。
URL一般格式如下：
<URL的访问方法>://<主机域名或IP地址>[:<端口号>][/<路径>][/<文档>]
目录
8
学习任务
了解Internet基础知识 掌握网页和网站的基本概念 熟悉网页基本组成元素 理解网页设计的概念 了解网站建设的基本流程 初步认识Adobe Dreamweaver CS6网页制作工具 学会创建、打开、编辑和关闭一个网页文档 对网页设计与制作有一个初步宏观整体认识
9
案例宏观展示引入
23
任务1-2：认识网页和网站
任务1-2-3：认识网站
3 .专业网站 这类网站具有很强的专业性，通常只涉及某一个领域，内容专业。 如榕树下网站（http://www.rongshuxia.com）即是一个专业文学网站。 4 .职能网站 职能网站具有专门的功能，如政府职能网站等。目前逐渐兴起的电子商务网站也属 于这类网站，较有名的电子商务网站有阿里巴巴（http://china.alibaba.com）和当当 网上书店（http://www.dangdang.com）等。
26
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
2．网页基本元素的设计原则 一个完整的网站都有Logo、Banner、文本、图像、导航栏和按钮等网页元素，这些 元素被称为网页的基本元素。 （1）Logo Logo即网站的标志，其制作要点如下： • Logo的位置通常位于网页的左上角，需保证Logo醒目，让浏览者第一眼看到。 • 站点的Logo虽然有动态的，但不是所有的站点都适宜用动态Logo，且动态Logo
默认文档，也称为主页（Home Page）。
18
任务1-2：认识网页和网站
任务1-2-1：网页的定义和分类的认识
上网时浏览的一个个页面就是网页 （Webpage），网页又称为Web页， 其中的图像、文字、超级链接等是 构成网页的基本元素，是Internet展 示信息的一种形式。如图1-4所示为 中关村在线网站的首页。
22
任务1-2：认识网页和网站
任务1-2-3：认识网站
按网站内容可将网站分为4种类型：门户网站、个人网站、专业网站和职能网站。 1 .门户网站 这类网站是一种综合性网站，涉及领域非常广泛，包含文学、音乐、影视、体育、 新闻和娱乐等方方面面的内容，具有论坛、搜索等功能。现在国内较著名的门户网 站有搜狐（http://www.sohu.com）、网易（http://www.163.com）等。 2 .个人网站 个人网站具有较强个性化，是以个人名义开发创建的网站，其内容、样式、风格等 都是非常有个性的。如阮一峰的个人网站（http://www.ruanyifeng.com/home.html）。
任务1-3：初识网页设计
任务1-3-2：初识网页设计风格
（4）图像 图像是网页中不可或缺的元素，使用图像时除了美观外，还应考虑它对网页下载速 度的影响。在选择图片时应注意以下3点： • 图像应采用淡色系列的背景，能与主题分离的用浅色标志或文字背景。 • 图像的主题要清晰可见，所表达的含义要简单明了。 • 图像中的文字要求清晰可辨，不可出现朦胧、辨识不清的情况。
14
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
1. IP地址 常用的IP地址有A类IP地址、B类IP地址和C类IP地址。IP地址是两级层次结构，包 括网络地址和主机地址，如图1-2所示。
15
任务1-1：认识Internet
任务1-1-2：认识IP地址和Internet域名
平日作业与上机
全勤满分，缺勤扣分
根据作业完成数量及质量评分
注：造成设备损坏或人身伤害的项目计0分。
期末考评 （卷面考评）
40分
期末考试
根据考试成绩进行 评分
ቤተ መጻሕፍቲ ባይዱ
Dreamweaver CS6 网页设计与制作实用教程
单元1 网页设计与制作综述
单元1 网页设计与制作综述
7
CONTENTS
任务1-1：认识Internet 任务1-2：认识网页和网站 任务1-3：初识网页设计 任务1-4：认识网页制作常用工具 任务1-5：网站建设基本流程 任务1-6：我的第一个网页
任务1-1-2：认识IP地址和Internet域名
与Internet相连的任何一台计算机（称为主机）都有惟一的一个网络地址，简称为IP （Internet Protocol）地址。在Internet中域名通过域名系统（Domain Name System， DNS）解析为IP地址，为站点访问浏览提供方便，也便于用户记忆站点。
10
任务1-1：认识Internet
任务1-1-1：认识万维网和浏览器
（1）万维网（World Wide Web，WWW）是因特网的主要部分，也可以简称为 Web、3W等，它是基于“超文本”的信息查询和信息发布的系统。
（2）超文本传输协议（HTTP，Hypertext Transfer Protocol）是一种网络上传输 信息的协议，专门用于传输万维网中的信息资源。
Dreamweaver CS6 网页设计与制作实用教程
单元1 网页设计与制作综述
课程简介
1
课程的地位与作用
网络专业专业课程 掌握网页制作所涉及的技术、规范和软件 了解平面设计知识，提高美学素养 为后续的web程序设计类课程奠定基础 主要面向岗位：网页设计师、网站编辑、网站程序员、Web程序员
2.域名系统 由于IP地址是数字标识，使用时难以记忆，因此在IP地址的基础上又发展出一种符 号化的地址方案，来代替数字型的IP地址。 例如，承德石油高等专科学校域名为cdpc.edu.cn，Web服务器的IP地址210.31.208.1 对应的域名为www.cdpc.edu.cn。 域名的结构由标号序列组成，各标号分别代表不同级别的域名，各标号之间用点隔 开，即 主机名.…….四级域名.三级域名.二级域名.顶级域名
（3）文本
网页中最主要的元素就是文本，文本内容对网页的整体表现起着决定作用。编辑文
本时需注意以下3点：
• 文本的颜色需要能够明显地与背景区别开来，让浏览者能清楚地查看文本。
• 每行文字最好为20～30个汉字的长度，并注意段落的区分和缩进，以便于阅读。
• 同版面文本样式不宜过多，最好在3种以内。
28
• URL的访问方式：指的是访问使用的协议，可以是HTTP、FTP等。
• 端口：每种访问协议都有默认的端口号，通常省略。例如，访问网页文默认端口是80。
• 路径：是文档在主机上的相对存储位置。
• 文档：是具体的网页文件。例如：http://www.cdpc.edu.cn/index.html，其中index.html为
3.学习方法：听讲、理解、阅读、记忆、鉴赏、实践。 4.参考教材： (1)《Dreamweaver CS6网页制作》（大型互动多媒体教学演示+海量实例案例+实例 素材+全彩印刷）， 清华大学出版社 (2)《Dreamweaver CS6网站设计与开发实战》，清华大学出版社
课程的特点
软件操作难度不大，但设计作品难度极高 实践环节众多，要重视动手操作 要有宽广的知识面、一定的审美能力 注重平时的观察和经验积累 目标：或能设计作品，或能熟练操作 答疑时间，课代表