中职《网页制作项目实训教程》课件-项目2 制作包含图片与超链接的网页

格式：ppt
大小：2.38 MB
文档页数：34

下载文档原格式

国家中职骨干教师培训课程网页制作

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〕

中职《网页制作项目实训教程》教案-项目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．面板介绍

中职网页设计与制作课件第2章_HTML简介

2.2排版标记—文字风格标记
标记名称
b i u
标记功能
文字加粗文字倾斜文字加下划线
标记使用格式
文字 文字 文字
strike
sup sub
文字加删除线
文字为上标文字为下标
<strike>文字</strike>
文字 文字
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．标记的属性在标记中使用的参数称为标记的属性。一个标记可以有多个属性，每个属性都有对应的属性值。例如： 其中： “align”是标记的属性，“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
教学过程
修改栏（时间分配）
教学内容

教学课件：《网页设计与制作》(中职)

• 商务网站规划报告的格式一般包括封面、目录、前言、正文和附录。其中，正文是整个报告的核心，主要内容包括：市场分析，网站目的及定位，网站技术解决方案，
思考与练习
• 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）打开后，适当调整标题的大小，并保存到站点中的文件夹里

(中职中专)网页设计与制作完整版课件汇总全书电子教案(最新)

第一章商务网站概述—客户需求分析—网站栏目规划
2、网页的逻辑结构
网页的基础网页的条理网页的显示网页的互动
第一章商务网站概述—客户需求分析—网站栏目规划
• 文字
3、网页组成元素
• 背景音乐
• 图片
• 视频
• 动画
• 表单
• 脚本程序
第一章商务网站概述—客户需求分析—网站栏目规划
三、网页风格
第二章项目概述—网页风格设计—草图绘制
学习内容
项目概述
任务1：网页风格设计
任务2：草图绘制
第二章项目概述—网页风格设计—草图绘制
任务一、网页风格设计
【任务说明】风格设计的重点是版面布局、颜色的使用
和搭配、文字和图片的编排等。要完成这一任务，可以从分析比较同类网站入手，以快速形成初步的设计方案。
第一章商务网站概述—客户需求分析—网站栏目规划
二、网站栏目的策划
网站栏目的策划，首先要考虑网站的定位、网站的方向是什么。当确定了一个方向后，就可以围绕这个方向去搜集相关资料、寻找相关文章，并整理为相应的栏目。
在确定网站栏目结构时，既要考虑网站栏目的层次结构，还应设计好网站栏目的链接结构。
第一章商务网站概述—客户需求分析—网站栏目规划
网页风格就相当于网页的外衣，是指网页设计时使用的文字、颜色、布局等的组合搭配给人带来的视觉印象。
要点：
商务网页并不是纯粹的艺术设计作品，应围绕准确表达商务诉求、能被大多数浏览者接受和理解来确定页面风格。
第一章商务网站概述—客户需求分析—网站栏目规划
特点：大幅用
图，且画面精美，颜色鲜艳，文字样式及图片排版活泼、优美。
第二章项目概述—网页风格设计—草图绘制

网页制作教程-PPT课件

菜单栏插入栏
2. 网页的类型
• 动态网页是在发送到浏览器之前由应用程序服务器自定义的网页。动态网页要在经过服务器的修改后才被发送到请求它的浏览器。网页发生更改的特性便是称其为动态的原因。
“文档”工具栏
面板组
“文档”窗口状态栏 “属性”面板
动态网页的工作流程 11
11
子任务1
3. 组成页面的元素
可以通过“文件”->“在浏览器中预览”->iexplore运行。直接单击“F12”运行。点击“文档”工具栏中的快捷按钮运行。
27
27
小结与作业
bvtc
静态网页与动态网页 Html基本概念网页设计与制作的基本流程 Dreamweaver CS3工作界面如何创建本地站点并进行管理对页面属性进行设置代码文件头“title”标记的设置如何运行网页文件上机实验1
bvtc
网页的基本操作与站点管理
不要将所有文件都放在根目录下，这样做会使文件管理混乱，上传速度慢。按栏目内容建立子目录。次要栏目视情况而定。对于需要经常更新的栏目可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，可以合并放在一个统一的目录下。所有程序一般都放在特定目录中，所有需要下载的内容也最好放在一个子目录下。在每个主目录下都建立独立的images目录，。为每一个栏目建立一个独立的images目录是最方便管理的。而根目录下的 images目录只是用来放首页和一些次要栏目的图片。注意：目录的层次不要太深，不要使用中文目录，不要使用过长的目录名，目录要做到“见名之义”等。
二、网站的制作期:使用Dreamweaver制作首页及分页。三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。

网页制作与实训ppt完整版PPT幻灯片教学教程最全电子讲义教案(最新)

<tr align="center"> <td>拜仁慕尼黑</td><td>德国</td><td>4</td> </tr>
</table>
</body>
</html>
1.7 图片标签
图像标记：<img src="图片存储位置与名称">
网页与图片a.jpg在同一目录下： <img src="a.jpg">
</HTML>
运行结果
1.3 段落标签
为段落标签，我是一段文字 align属性，段落的对齐方式，较为常
用的有left、center、right：例：
我是居左的文字 
1.3 段落标签（续）
<HTML>
<HEAD> <TITLE>学习HTML</TITLE>
1.6 表格标签
对于整张表格，<table>标签常用的属性有以下几个： ✓bordercolor：表格边框的颜色，默认为黑色 ✓cellpadding：单元格内容与单元格边界的距离 ✓cellspacing：单元格的边框与表格边框之间的宽度
课后作业：
P20 三、操作题（表格内容可以换成自己喜欢的）
在网页文档所在目录的子目录(images)下： <img src="images/whu.jpg">
在网页文档所在目录的上层目录下： <img src="../whu.jpg">

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。