中职《网页制作项目实训教程》课件-项目2 制作包含图片与超链接的网页
合集下载
国家中职骨干教师培训课程网页制作
1
Part 1 网页设计根底
1
WWW基础
2
网页与网站概论
3
IIS配置管理
Part 1 网页设计基础
学习重点、难点
1
学习重点
WWW工作 原理
2
2
学习难点
IIS配置
Part 1 网页设计基础
返回
3
WWW根底
WWW〔World Wide Web,万维网〕是基于Internet的一 种界面友好，用于检索和浏览链接到Internet效劳器上 的有关内容。它利用超文本〔Hypertext〕、超媒体〔 Hypermidia〕等技术，使用户通过浏览器〔如IE， FireFox〕可以方便地检索远程效劳器上的文本、图形 、声音以及视频文件。
Part 1 网页设计基础
9
WWW根底
❖ 常见WWW术语〔概念〕 ❖传输控制制协议〔TCP，transmission control
protocol) TCP/IP网络体系结构传输层的一咱协议，用以提 供可靠的数据传输。?计算机科学技术名词? 〔1994已公布〕12.199。
Part 1 网页设计基础
Part 1 网页设计基础
19
网页设计与网站开发概论
❖ 网站常用功能 ❖ 信息发布：企业/事业单位网站/ ❖ 信息效劳：信息查询效劳：、 ❖ 业务运营：学校信息系统：学籍管理/成绩查询/校
园卡效劳 ❖ 电子商务：电信话费查询/网上购物平台〔e-buy〕
Part 1 网页设计基础
20
网页设计与网站开发概论
Part 1 网页设计基础
Part 1 网页设计基础
12
WWW根底
❖ 常见WWW术语〔概念〕 ❖ 端口〔port〕
Part 1 网页设计根底
1
WWW基础
2
网页与网站概论
3
IIS配置管理
Part 1 网页设计基础
学习重点、难点
1
学习重点
WWW工作 原理
2
2
学习难点
IIS配置
Part 1 网页设计基础
返回
3
WWW根底
WWW〔World Wide Web,万维网〕是基于Internet的一 种界面友好，用于检索和浏览链接到Internet效劳器上 的有关内容。它利用超文本〔Hypertext〕、超媒体〔 Hypermidia〕等技术，使用户通过浏览器〔如IE， FireFox〕可以方便地检索远程效劳器上的文本、图形 、声音以及视频文件。
Part 1 网页设计基础
9
WWW根底
❖ 常见WWW术语〔概念〕 ❖传输控制制协议〔TCP，transmission control
protocol) TCP/IP网络体系结构传输层的一咱协议，用以提 供可靠的数据传输。?计算机科学技术名词? 〔1994已公布〕12.199。
Part 1 网页设计基础
Part 1 网页设计基础
19
网页设计与网站开发概论
❖ 网站常用功能 ❖ 信息发布：企业/事业单位网站/ ❖ 信息效劳：信息查询效劳：、 ❖ 业务运营：学校信息系统：学籍管理/成绩查询/校
园卡效劳 ❖ 电子商务：电信话费查询/网上购物平台〔e-buy〕
Part 1 网页设计基础
20
网页设计与网站开发概论
Part 1 网页设计基础
Part 1 网页设计基础
12
WWW根底
❖ 常见WWW术语〔概念〕 ❖ 端口〔port〕
中职《网页制作项目实训教程》教案-项目1 网页设计制作入门
________________________________网页制作项目实训教程 ______________________________________________________________广东省×××职业技术学校学科教案本Teaching Plan20 年———20 年学年度 学期The (1st/2na)Semester of the Academic Year from 20 to 20学校（School ）学科（Subject ） 年级（Grade ）教师（Teacher ）注意：①按住Ctrl 键后单击每个任务即可跳转到对应的教案 ②单击按钮可返回目录 ③页面设置参数为： 纸张：B5 页边距左：1.5 页边距右：1.5《网页制作项目实训教程》目录项目1 网页设计制作入门任务1活动1 创建与修改站点 活动2 制作第一个网页文档 任务2活动1 制作诗词赏析页面活动2 对诗词赏析页面进行简单排版 任务3活动1 制作树形菜单 活动2 制作在线考试试卷教学课题任务1 活动1 创建与修改站点课题类型理论+实作课时安排2上课时间教学目标1.了解Dreamweaver CS6的工作界面2.掌握站点的创建与编辑操作教学重点1、2教学难点2辅助资源课件、多媒体、网络复习引入1.你上网浏览过网页吗？2.你觉得网页由哪些元素构成？3.你知道的网页制作工具有哪些？教学手段教学过程师生互动活动设计课件讨论实作一、教师布置活动要求1、创建一个名称为“项目1”的本地站点，站点文件夹为D盘。
2、修改“项目1”站点文件夹为桌面上的“Task1-1”文件夹。
二、师生讨论学习新知识1、启动Dreamweaver CS6软件双击桌面上的Dreamweaver CS6图标，启动软件，如下图所示。
布置任务：让学生明确本次课的内容提问或讨论：DW的工作界面与PS有何异同课件举例讨论课件实作2、Dreamweaver CS6工作界面介绍在“欢迎界面”中单击“新建”栏下的“HTML”按钮，新建一个HTML网页文件，进入新的窗口界面。
(中职)cs6网页设计与实训课件整套课件完整版ppt教学教程最全电子讲义教案(最新)后缀
项目一 Dreamweaver-CS6入门
任务一 了解Dreamweaver CS6
知识一 Dreamweaver CS6 简介
✓ Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可
视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计 软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页 三剑客”。
任务二 创建站点
操作一 创建本地站点
使用Dream weaver CS3的向导来进行站点的创建步骤如下 1、选择“站点”菜单项，弹出下拉菜单。 2、单击“新建站点”命令，出现“站点设置对象”的第一个界面， 要求为站点输入一个名称。
任务二 创建站点
操作一 创建本地站点
3、单击“保存”按钮，完成本地站点的创建，执行“窗 口—>文件”命令，打开“文件”面板，在面板中显现刚刚 创建的本地站点
✓ 合理分配文档资源：按栏目内容建立子目录，目录的层次不要超过
3层，不同的对象放在不同的文件夹中。
✓ 尽量使用意义明确的目录；例如可以用Flash、Dhtml、Javascript
来建立目录，也可以用1、2、3建立目录，但更便于记忆和管理显 然是前者。
任务一 了解Dreamweaver CS6
知识五 信息的收集与整理
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
1．“属性”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
2．“插入”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作三 面板及面板的基本操作
1．面板介绍
任务一 了解Dreamweaver CS6
知识一 Dreamweaver CS6 简介
✓ Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可
视化编辑界面，用于制作并编辑网站和移动应用程序的网页设计 软件。在业界通常将Dreamweaver、Flash、Fireworks称为“网页 三剑客”。
任务二 创建站点
操作一 创建本地站点
使用Dream weaver CS3的向导来进行站点的创建步骤如下 1、选择“站点”菜单项，弹出下拉菜单。 2、单击“新建站点”命令，出现“站点设置对象”的第一个界面， 要求为站点输入一个名称。
任务二 创建站点
操作一 创建本地站点
3、单击“保存”按钮，完成本地站点的创建，执行“窗 口—>文件”命令，打开“文件”面板，在面板中显现刚刚 创建的本地站点
✓ 合理分配文档资源：按栏目内容建立子目录，目录的层次不要超过
3层，不同的对象放在不同的文件夹中。
✓ 尽量使用意义明确的目录；例如可以用Flash、Dhtml、Javascript
来建立目录，也可以用1、2、3建立目录，但更便于记忆和管理显 然是前者。
任务一 了解Dreamweaver CS6
知识五 信息的收集与整理
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
1．“属性”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作二 认识“属性”栏和“插入”栏
2．“插入”栏
任务三 熟悉Dreamweaver CS6 的工作界面
操作三 面板及面板的基本操作
1．面板介绍
中职网页设计与制作课件第2章_HTML简介
2.2排版标记—文字风格标记
标记名称
b i u
标记功能
文字加粗 文字倾斜 文字加下划线
标记使用格式
<b>文字</b> <i>文字</i> <u>文字</u>
strike
sup sub
文字加删除线
文字为上标 文字为下标
<strike>文字</strike>
<sup>文字</sup> <sub>文字</sub>
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记
页面刷新举例： <html> <head> <meta http-equiv="refresh" content="20;URL="> <title>我的网页</title> </head> <body> Hello！网页设计的学习现在开始啦！ </body> </html>
2.1 HTML文档的基本结构—标记和属性
⑵ meta标记 页面刷新 格式如下： <meta http-equiv="refresh" content="数 值;URL=文件名或网址"> 其中： content属性中的“数值”代表刷新网页延迟的时 间，单位是秒；“文件名或网址”为刷新时要链 接到的文件或网址。当缺少URL项时，浏览器将 刷新当前网页。
2.1 HTML文档的基本结构—标记和属性
2．标记的属性 在标记中使用的参数称为标记的属性。一个标记 可以有多个属性，每个属性都有对应的属性值。 例如： <p align="center"> 其中： “align”是标记<p>的属性，“center”是属性 “align”的值。
中职《网页制作》课程教案2章
3.（2）创建本地站点：①打开Dreamweaver CS6，选择菜单栏中的“站点”|“新建站点”。②站点名称输入“myfootball”,选择本地站点文件夹路径，为站点指定站点根文件夹。③选择左侧“高级设置”下的“本地信息”，设置默认图像文件夹路径，并讲解该窗口中其他选项的含义。④单击“保存”、“完成”。
教学
重点
与难点
重点
编辑首页文件。
难点
对站点结构的理解。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
师生互动
1.回顾上节课所学知识，导入本节内容。
2.制作我的足球网主页。实现步骤：（1）规划站点：①在D盘新建文件夹myfootball作为网站根目录。②将“我与足球”、“足球新闻”、“足球明星”的内容分别存放在根目录下的aboutme、news、photo文件夹里。③素材图像存放于根目录下images文件夹中。
6.⑧合并第三行，在“属性”面板中设置“水平”为“居中对齐”。输入“本网站最后更新时间”，选择菜单栏上的“插入”|“日期”命令，勾选“存储时自动更新”复选框，单击“确定”。继续输入版权信息内容。⑨制作栏目链接，有2种方法。⑩将“标题”改为“我的足球网”。按F12看效果。
7.对本节课内容进行归纳总结。
（4）具有良好的软件应用能力。
教学
重点
与
难点
重点
（1）规划站点。（2）用表格布局。
难点
（1）规划站点。（2）用表格布局。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
教学
重点
与难点
重点
编辑首页文件。
难点
对站点结构的理解。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
师生互动
1.回顾上节课所学知识，导入本节内容。
2.制作我的足球网主页。实现步骤：（1）规划站点：①在D盘新建文件夹myfootball作为网站根目录。②将“我与足球”、“足球新闻”、“足球明星”的内容分别存放在根目录下的aboutme、news、photo文件夹里。③素材图像存放于根目录下images文件夹中。
6.⑧合并第三行，在“属性”面板中设置“水平”为“居中对齐”。输入“本网站最后更新时间”，选择菜单栏上的“插入”|“日期”命令，勾选“存储时自动更新”复选框，单击“确定”。继续输入版权信息内容。⑨制作栏目链接，有2种方法。⑩将“标题”改为“我的足球网”。按F12看效果。
7.对本节课内容进行归纳总结。
（4）具有良好的软件应用能力。
教学
重点
与
难点
重点
（1）规划站点。（2）用表格布局。
难点
（1）规划站点。（2）用表格布局。
媒体教具(或主要工具材料等)
课本、PPT、素材和Dreamweaver CS6
教学过程
修改栏（时间分配）
教 学 内 容
教学课件：《网页设计与制作》(中职)
• 商务网站规划报告的格式一般包括封面、 目录、前言、正文和附录。其中，正文是 整个报告的核心，主要内容包括：市场分 析，网站目的及定位，网站技术解决方案，
思考与练习
• 1. 福德皮具公司是一家皮具加工生产性企 业，产品以外销为主。随着公司业务的飞 速发展，规模急剧扩大。现在需要建设公 司网站，以更好地树立公司形象，宣传公 司产品，方便快捷地与客户保持沟通和联 系。本次网站建设重点：
1.2.7 配色
• 2）非彩色和彩色的搭配 （1）非彩色的搭配 （2）彩色的搭配 色彩千变万化，彩色的 搭配是研究的重点。依 然需要学习一些色彩的 知识。将色彩按“红→黄 →绿→蓝→红”依次过渡 渐变，就可以得到一个
（1）设计公司网站首页，树立公司美好的 网上形象；
（2）全面展示公司产品，多层次多角度地 介绍产品的信息。
思考与练习
• 2. 某人准备建立一个信息网站，希望通过 有价值的信息吸引点击率，再通过访问量 争取到网络广告发布收益。应该如何定位 网站主题、内容？网站的目标市场定位在 哪些人群？
• 3. 分析Dell电脑的网站定位。 • 4. 网站规划的内容包括哪些？ • 5. 电子商务网站规划报告的内容包括哪些？
1.2.6 网页设计布局
• 设计首页的第一步是设计版面布局。就象 传统的报刊杂志编辑一样，将网页看作一 张报纸、一本杂志来进行排版布局。版面 指的是浏览器看到的完整的一个页面（可 以包含框架和层）。布局就是以最适合浏 览的方式将图片和文字排放在页面的不同 位置。版面布局一般的步骤如下：
（1）画出草案。 （2）粗略布局。 （3）定案。
你认为哪部分最为重要？
1.2 网站设计流程
• 任务导入 • 学习目标 • 任务实施 • 知识拓展 • 思考与练习
思考与练习
• 1. 福德皮具公司是一家皮具加工生产性企 业，产品以外销为主。随着公司业务的飞 速发展，规模急剧扩大。现在需要建设公 司网站，以更好地树立公司形象，宣传公 司产品，方便快捷地与客户保持沟通和联 系。本次网站建设重点：
1.2.7 配色
• 2）非彩色和彩色的搭配 （1）非彩色的搭配 （2）彩色的搭配 色彩千变万化，彩色的 搭配是研究的重点。依 然需要学习一些色彩的 知识。将色彩按“红→黄 →绿→蓝→红”依次过渡 渐变，就可以得到一个
（1）设计公司网站首页，树立公司美好的 网上形象；
（2）全面展示公司产品，多层次多角度地 介绍产品的信息。
思考与练习
• 2. 某人准备建立一个信息网站，希望通过 有价值的信息吸引点击率，再通过访问量 争取到网络广告发布收益。应该如何定位 网站主题、内容？网站的目标市场定位在 哪些人群？
• 3. 分析Dell电脑的网站定位。 • 4. 网站规划的内容包括哪些？ • 5. 电子商务网站规划报告的内容包括哪些？
1.2.6 网页设计布局
• 设计首页的第一步是设计版面布局。就象 传统的报刊杂志编辑一样，将网页看作一 张报纸、一本杂志来进行排版布局。版面 指的是浏览器看到的完整的一个页面（可 以包含框架和层）。布局就是以最适合浏 览的方式将图片和文字排放在页面的不同 位置。版面布局一般的步骤如下：
（1）画出草案。 （2）粗略布局。 （3）定案。
你认为哪部分最为重要？
1.2 网站设计流程
• 任务导入 • 学习目标 • 任务实施 • 知识拓展 • 思考与练习
中职一年级网页设计与制作第二章_活动2_ 制作网站的主页_第二课时
活动2 制作网站的主页第二课时
目 录
3、用表格安排页面布局
2、新建网页
1、认识网页和主页
5、小组展示成果
4、插入网站标题，配插图
CONTENTS
认识网页和主页
01
PART ONE
（1）、主页是整个网站的窗口，通过这个窗口可以把网站的内容和特色很好地展现出来，因此要把主页制作得活泼鲜明、整齐美观，这样可以引起浏览者进一步浏览网站中其他网页的兴趣。（2）、主页( homepage)通常是进入一个网站时看到的第一个网页，一般用 index.htm作为文件名。（3）、网页是可以用浏览器看到的一个个页面。网页文件的扩展名一般是“htm”或“html”。
FrontPage中新建网页的三种方法
02
PART ONE
方法一：启动Frontpage,其实就正在新建一个网页
方法二：启动FrontPage程序，单击工具栏中的“新建”按钮。
方法三：启动FrontPage程序，单击工具栏中的“文件”按钮。
用表格安排页面布局
03
PART ONE
1、打开FrontPage，并新建一个页面。我这里就建立一个HTML文件。
05
PART TWO
谢谢观看！
2、网页新建成功修改网页的“Title”标签，这是最基本的，以ntPage布局，最简单的就是用表格安排页面布局。要搞清楚的就是表格要有的列数和行数。使用表格，把整个页面分成很多个区域，可以方便灵活地把文字、图像等素材定位在表格中相对独立的区择“插入”--“图片”--“来自文件”，选择图片并插入到你想放入的单元格里。也可以直接点击工具栏的图片按钮来插入
步骤2：选择文件--打开，打开网页文件，如（c:\ks\frontpage\lqzjj.htm）打开后，适当调整标题的大小，并保存到站点中的文件夹里
目 录
3、用表格安排页面布局
2、新建网页
1、认识网页和主页
5、小组展示成果
4、插入网站标题，配插图
CONTENTS
认识网页和主页
01
PART ONE
（1）、主页是整个网站的窗口，通过这个窗口可以把网站的内容和特色很好地展现出来，因此要把主页制作得活泼鲜明、整齐美观，这样可以引起浏览者进一步浏览网站中其他网页的兴趣。（2）、主页( homepage)通常是进入一个网站时看到的第一个网页，一般用 index.htm作为文件名。（3）、网页是可以用浏览器看到的一个个页面。网页文件的扩展名一般是“htm”或“html”。
FrontPage中新建网页的三种方法
02
PART ONE
方法一：启动Frontpage,其实就正在新建一个网页
方法二：启动FrontPage程序，单击工具栏中的“新建”按钮。
方法三：启动FrontPage程序，单击工具栏中的“文件”按钮。
用表格安排页面布局
03
PART ONE
1、打开FrontPage，并新建一个页面。我这里就建立一个HTML文件。
05
PART TWO
谢谢观看！
2、网页新建成功修改网页的“Title”标签，这是最基本的，以ntPage布局，最简单的就是用表格安排页面布局。要搞清楚的就是表格要有的列数和行数。使用表格，把整个页面分成很多个区域，可以方便灵活地把文字、图像等素材定位在表格中相对独立的区择“插入”--“图片”--“来自文件”，选择图片并插入到你想放入的单元格里。也可以直接点击工具栏的图片按钮来插入
步骤2：选择文件--打开，打开网页文件，如（c:\ks\frontpage\lqzjj.htm）打开后，适当调整标题的大小，并保存到站点中的文件夹里
(中职中专)网页设计与制作完整版课件汇总全书电子教案(最新)
第一章商务网站概述—客户需求分析—网站栏目规划
2、网页的逻辑结构
网页的基础 网页的条理 网页的显示 网页的互动
第一章商务网站概述—客户需求分析—网站栏目规划
• 文字
3、网页组成元素
• 背景音乐
• 图片
• 视频
• 动画
• 表单
• 脚本程序
第一章商务网站概述—客户需求分析—网站栏目规划
三、网页风格
第二章项 目 概 述—网页风格设计—草图绘制
学习内容
项目概述
任务1：网页风格设计
任务2：草图绘制
第二章项 目 概 述—网页风格设计—草图绘制
任务一、网页风格设计
【任务说明】 风格设计的重点是版面布局、颜色的使用
和搭配、文字和图片的编排等。要完成这一任务，可以从 分析比较同类网站入手，以快速形成初步的设计方案。
第一章商务网站概述—客户需求分析—网站栏目规划
二、网站栏目的策划
网站栏目的策划，首先要考虑网站的定位、网站的方 向是什么。当确定了一个方向后，就可以围绕这个方向去 搜集相关资料、寻找相关文章，并整理为相应的栏目。
在确定网站栏目结构时，既要考虑网站栏目的层次结 构，还应设计好网站栏目的链接结构。
第一章商务网站概述—客户需求分析—网站栏目规划
网页风格就相当于网页的外衣，是指网页设计 时使用的文字、颜色、布局等的组合搭配给人带来 的视觉印象。
要点：
商务网页并不是纯粹的艺术设计作品，应围绕准 确表达商务诉求、能被大多数浏览者接受和理解来确 定页面风格。
第一章商务网站概述—客户需求分析—网站栏目规划
特点： 大幅用
图，且画面 精美，颜色 鲜艳，文字 样式及图片 排版活泼、 优美。
第二章项 目 概 述—网页风格设计—草图绘制
2、网页的逻辑结构
网页的基础 网页的条理 网页的显示 网页的互动
第一章商务网站概述—客户需求分析—网站栏目规划
• 文字
3、网页组成元素
• 背景音乐
• 图片
• 视频
• 动画
• 表单
• 脚本程序
第一章商务网站概述—客户需求分析—网站栏目规划
三、网页风格
第二章项 目 概 述—网页风格设计—草图绘制
学习内容
项目概述
任务1：网页风格设计
任务2：草图绘制
第二章项 目 概 述—网页风格设计—草图绘制
任务一、网页风格设计
【任务说明】 风格设计的重点是版面布局、颜色的使用
和搭配、文字和图片的编排等。要完成这一任务，可以从 分析比较同类网站入手，以快速形成初步的设计方案。
第一章商务网站概述—客户需求分析—网站栏目规划
二、网站栏目的策划
网站栏目的策划，首先要考虑网站的定位、网站的方 向是什么。当确定了一个方向后，就可以围绕这个方向去 搜集相关资料、寻找相关文章，并整理为相应的栏目。
在确定网站栏目结构时，既要考虑网站栏目的层次结 构，还应设计好网站栏目的链接结构。
第一章商务网站概述—客户需求分析—网站栏目规划
网页风格就相当于网页的外衣，是指网页设计 时使用的文字、颜色、布局等的组合搭配给人带来 的视觉印象。
要点：
商务网页并不是纯粹的艺术设计作品，应围绕准 确表达商务诉求、能被大多数浏览者接受和理解来确 定页面风格。
第一章商务网站概述—客户需求分析—网站栏目规划
特点： 大幅用
图，且画面 精美，颜色 鲜艳，文字 样式及图片 排版活泼、 优美。
第二章项 目 概 述—网页风格设计—草图绘制