当前位置: 首页 > 新闻中心 > 网页制作技术/21世纪高职高专新概念教材

网页制作技术/21世纪高职高专新概念教材

发布时间:2024-04-01 12:23:58

  1. 阐述网页设计与制作的基本原则与流程
  2. 网页设计与制作
  3. 网页设计与制作要学些什么?

一、阐述网页设计与制作的基本原则与流程

你可以到网上去搜一下“flash路上” 不管是在信誉还是在口碑都是无话可说的 而且请的老师都是目前国内在职资深设计师,都是对国内这个行业的动态比较熟悉的·教会学员的也是最实用的东西!教学模式采用视频教程+在线讲解+作业批改+实战!四个部分的!基本操作部分一般会录制好视频,方便你反复看!在线讲解主要是讲重点,难点,知识总结!然后布置作业,有问题可以随时问老师,做完了作业可以随时交给老师批改!学习flash互动设计套餐班的学员会分配订单让他做!积累实战经验~而且订单佣金全额返还学员哦~!

二、网页设计与制作

一、认识dreamweaver

--网页设计与制作教学案例分析报告

【教材分析】

在学习《网页的设计与制作》之前,学生已初步掌握了网络信息的搜索、浏览和下载,以及电子邮件的使用等内容。因此,学生已经具备了获取信息的能力,但多数学生对网站网页的了解也仅仅只停留在这种简单的操作层面上。本节教学中通过网页、网站基本概念的了解,让学生理解网页的基本元素构成和经常使用的构件,了解超文本标记语言html,通过对网页制作工具的比较学习,了解不同常用网页制作工具的特点,为下一节的学习打下基础。

【学情分析】

在学习本单元之前,学生已初步具备获取信息的能力,他们学习了网络基础知识,掌握了网络信息的浏览、搜索和下载以及电子邮件的收发、文件传输等技能。学生希望自己能制作网页,并将网页发布在internet上。因此学生对本单元学习的兴趣很大。学生在学习本单元前已经学过word应用软件的使用方法,并掌握一定的文字输入、图片的编辑、表格的插入等技巧,这对于本单元的学习非常有利。

【教学目标】

1.知识与技能

(1)了解网页、网站的基本概念,理解网页的基本元素。

(2)了解基本的网页制作软件的界面和特点。

(3)了解网站的地址标识——url,超文本标记语言html, 了解超文本传输协议http。

2.过程与方法

(1)通过对一个网站网页的分析,了解网页、网站的基本概念,理解网页的基本元素。

(2)通过教师的演示和讲解,初步了解基本的网页制作工具软件的界面和特点。

3.情感态度与价值观

(1)培养学生严谨求实的学习态度。

(2)培养学生学习中勇于探索、崇尚科学的意志和品德。

【重点难点】

重点:网页的基本元素

难点:网页的基本元素,构件

【设计思想】

同学们喜欢上网,但是有一部分学生不能区分网站和网页,在设计时,我首先与语文学科整合,结合语文教材内容,播放《再别康桥》flash动画朗读版,以此来创设快乐课堂学习情境,进而引入徐志摩文学网,让学生思考网站和网页有什么联系?引出本节课的主题,以提高学生的学习兴趣和求知欲望。当学生对网站与网页有了一定的认识之后,引导同学们自主去探究发现构成网页的基本元素有哪些?有什么作用?接着组织学生继续讨论、交流网页中除了三种基本元素外,还有哪些经常使用的构件?然后引导学生查看网页的源文件,从而顺利引导到对dreamweaver网页制作软件的了解,为本章后面的知识学习作铺垫。

【教学流程】

教学环节 教师活动设计

创设情境,激发学生的学习兴趣 引入课题

幻灯显示《再别康桥》flash动画朗读版,指出诗很美,作者笔下的康桥更是让人向往,激发学生的求知欲。

引导学生进入徐志摩文学网http://www.zhs2008.com ,对url、http作一定的解释。现在大家看到的是什么?(进入到徐志摩文学网页面让学生回答)引出本节课的主题“网站和网页”,让大家思考网站与网页有什么联系?

1、从美学角度出发,创设快乐课堂学习情境

2、与语文学科整合,结合语文教材《再别康桥》,引入徐志摩文学网

3、学生明确本节课的学习主题内容

自主合作探究 网页的基本元素 教师提问:在徐志摩文学网中,各位同学是否发现了神往已久的康桥,除此之外,还发现了什么?

学生活动:用发现法去找出有关康桥风景欣赏中的任一张图片,再别康桥的诗和徐志摩简介网页.

网站与网页有什么联系?学生讨论之后,教师总结:网站包含多个网页,通过超链接把不同的页面链接起来。构成网页的基本元素有文字、图形和超链接。网页中常见的图象有jpg和gif。网站的首页即为主页。

学生活动

在桌面上新建一个以自己号次命名的文件夹,进入徐志摩文学网完成以下任务

课堂任务一,触摸网页的基本三要素:

1、 要求下载康桥风景欣赏中的任一张图片,文件名改为kq

2、保存«再别康桥»这首诗,复制,粘贴到word文档中,文件名改为zbkq

3、要求下载徐志摩简介网页

网页揭秘刚才我们了解了网页的基本元素、构件,这些不但美化了网页,还丰富了网页内容,增强了网页功能。下面让我们来看一看网页究竟是怎样组织的。以课堂在线网站为例,选择滚动字幕,点击“查看”菜单中的“源文件”命令。

教师总结:网页中包含的文字、图像、超链接和表格等基本元素及构件是由超文本标记语言(hypertext markup language,简称html)进行描述的。html是一种超文本标记语言,由网络浏览器解释执行,最后将解释结果显示出来。 几乎所有的网页都是用超文本标记语言编写的,下面就让我们利用记事本来体验一下。

网页制作工具比较1、用html语言制作网页,让学生对照老师的任务提示,观察一下一个简单的html网页文件的浏览结果变化。

(提示学生选择“查看”菜单中的“源文件”命令进行修改。)<html>

<head>

<title>我的个人主页</title>

</head>

<body>

<font size="3" color="#ff0000">

欢迎大家光临!</font>

</body>

</html>2、用网页制作工具软件制作网页 在“文件”菜单中用使用frontpage编辑上述网页,比较两者特点。

教师总结:除了dreamweaver之外,还有比较专业的网页制作工具frontpage,一般我们使用dreamweaver进行网页制作。

1、学生听、看老师讲解和演示,并思考。2、学生操作实践学生任务:将size="3"改为size="6",color="#ff0000"改为color="#000000",观察其变化。

学生

练习 本节课涉及到的基本概念较多,考虑到前面已经有过文字小结,因此,这里改用选择题的形式来帮助学生整理和巩固。

学生完成“课堂在线——网站和网页”中的“课堂练习”。 教师巡回检查,个别辅导有困难的学生。

学生操作练习,完成课堂练习。

“在线批改”可以让学生及时纠错,并据此判断学生是否掌握本节课的内容。

交流与评价 每位同学学习完本课,并完成实践过程之后对自己的学习情况进行自我评价,完成“课堂在线——网站和网页”中的“交流评价”。指导学生进行自我评价,并根据反馈的结果适当点评。

学生自评,通过大屏幕实时显示评价结果,教师可以及时地点评学生的学习情况。

本课

小结 本节课主要讲了网站和网页的基本内容,网页的基本元素、构件及网页制作工具等。

学生对本节课的内容知识进行回忆小结

根据本节课的学习内容,要求学生设计一幅个人网站的主页。

思考、设计,为下面的课做准备

学习

拓展 拓展网页构件的使用,让学生根据表单的信息进行注册,查询,通过输入、查询等功能来激发学生的学习兴趣,让学生更能理解学过的数据库管理有关知识。 学生注册信息、查询信息

【小结板书】

三、网页设计与制作要学些什么?

1,网站前台:软件photoshop+flash+dreaweaver

要掌握。脚本语言javascript,html,css

要会修改和编辑。

2,如果是考证的话,可以考电子商务师或软考电子商务设计师。

3,如果从事网站后台:php,c#,mysql必需掌握,有此语法和c++类似。

具体培训要求如下:

no.1

网页设计基础课

网站的发布条件,网站的ci形象设计,规划网站的栏目与版块,规划网站的目录结构和链接结构,制作页面效果图,制作flash动画,切图,制作静态web页面,添加程序,发布web站点,推广和维护

no.2

photoshop图形图像处理软件培训

图像处理基础知识,颜色模式、色彩基本常识,色相对比、色彩搭配技巧,菜单栏,工具箱,工具选项栏,调板,画面窗口

no.3

flash动画设计软件培训

舞台,时间轴,图层,“属性”面板,动画设计原理与欣赏,“颜色”和“样本”面板,“库”面板,定义首选参数,新建和保存文档,测试影片,发布和导出影片,动画设计原理与欣赏

no.4

dreamweaver网页制作软件培训

站点目录的搭建,常用快捷键,插入动画

插入图片

插入视频,表格布局,表单制作,div+css,html,网页交互式特效

no.5

毕业设计

结合之前所学习到的软件知识,要求学员能独立设计网页,编写前端网页代码;

网页三剑客培训课程详解

第一阶段:photoshop

图形图像处理-软件入门与进阶

软件入门与进阶

第一节

ps

cs3概论与工作界面

图像处理基础知识,颜色模式、色彩基本常识,色相对比、色彩搭配技巧,菜单栏,工具箱,工具选项栏,调板,画面窗口

第二节

ps

cs3

基本操作入门

新建文件,打开文件,存储文件,使用标尺、参考线和网格,字体安装

第三节

ps

cs3

选取图像

选区的基础知识,使用选框工具,使用套索工具,使用魔棒工具,选区的相加、相减和交叉

第四节

ps

cs3

图像处理

图像的模式,图像和画布的大小,旋转画布和裁剪图像,调整色阶,调整曲线,调整色彩平衡,调整色相/饱和度,调整亮度/对比度,复制、粘贴、移动图像

第五节

ps

cs3

使用绘图与图像编辑工具

画笔工具,图章工具,填充工具

第六节

ps

cs3

案例教学一

绘制卡通人物并上色,熟悉快捷键

第七节

ps

cs3

使用绘图与图像编辑工具

画笔工具,图章工具,填充工具

第八节

使用路径

形状工具,路径面板,钢笔工具,制作路径文字

第九节

ps

cs3

使用绘图与图像编辑工具

画笔工具,图章工具,填充工具

第十节

ps

cs3

案例教学一

绘制卡通人物并上色,熟悉快捷键

第十一节

ps

cs3

使用绘图与图像编辑工具

画笔工具,图章工具,填充工具

第十二节

ps

cs3

案例教学一

绘制卡通人物并上色,熟悉快捷键

第二阶段:photoshop

图形图像处理-软件提高

软件提高

第十三节

通道

通道使用原理,通道使用技巧

第十四节

通道综合运用

扣婚纱图片,扣复杂图像

第十五节

滤镜工具的操作

滤镜工具的操作

第十六节

滤镜的使用案例

滤镜的使用案例

第十七节

案例教学四

滤镜和通道的混合使用

第十八节

案例教学五

利用位图和混合模式制作创意电脑桌面

第十九节

制作gif动画

动画面板,动画制作原理,简单的qq表情图片头像制作

第二十节

制作gif动画

制作创意广告条,用广告图做gif动画

第二十一节

制作区域框和分隔线

制作区域框,制作分隔线,制作虚线

第二十二节

制作复杂边框

制作复杂边框

第二十三节

制作文字为主的按钮

制作背景,制作时尚渐变图案,添加文本

第二十四节

制作图文结合的按钮

制作背景,绘制图案,添加文本

第三阶段:photoshop

图形图像处理-综合实例

综合实例

第二十五节

网页设计布局规范与色彩平衡

网页设计布局规范与色彩平衡

第二十六节

网页设计草稿图

规划网站版面

网页设计草稿图

规划网站版面

第二十七节

设计网站标志

和确定基准色

设计网站标志

和确定基准色

第二十八节

设计企业营销型网站首页

i

设计企业营销型网站首页

i

第二十九节

设计企业营销型网站首页

设计企业营销型网站首页

第三十节

设计企业营销型网站首页Ⅲ

设计企业营销型网站首页Ⅲ

第三十一节

设计企业营销型网站内页模版

设计企业营销型网站内页模版

第三十二节

设计企业营销型网站末页模版

设计企业营销型网站末页模版

第三十三节

设计企业营销型网站新闻列表页

设计企业营销型网站新闻列表页

第三十四节

设计企业营销型网站产品列表页

设计企业营销型网站产品列表页

第三十五节

设计企业营销型网站表单登陆页

设计企业营销型网站表单登陆页

第三十六节

设计企业营销型网站水平广告条

设计企业营销型网站水平广告条

第三十七节

设计企业营销型网站对联广告

设计企业营销型网站对联广告

第三十八节

课程结束,小结,提交设计作品

课程结束,小结,提交设计作品

第一阶段:flash

动画设计-软件入门与进阶

软件入门与进阶

第一节

flash

cs3界面介绍

舞台,时间轴,图层,“属性”面板,动画设计原理与欣赏

第二节

flash

cs3

工具入门

“颜色”和“样本”面板,“库”面板,定义首选参数,新建和保存文档,测试影片,发布和导出影片,动画设计原理与欣赏

第三节

工具箱

i

绘图模型,使用铅笔和刷子工具,使用线条和形状工具

第四节

工具箱

使用钢笔工具,使用选取和选区工具,定义边框和填充颜色

第五节

工具箱Ⅲ

定义渐变颜色,导入图像,设置和编辑位图,分离位图和将位图转换为矢量图,组合对象,处理对象

第六节

工具箱

创建文本,定义文本的属性,拼写设置,分离文本

第七节

图形元件与按钮元件的实例

图形元件与按钮元件的实例

第八节

影片剪辑和影片剪辑实例

影片剪辑和影片剪辑实例

第九节

时间轴

关键帧

空白关键帧

时间轴

关键帧

空白关键帧

第十节

创建补间动画

创建补间动画

第十一节

创建形状动画

创建形状动画

第十二节

创建形状动画

创建形状动画

第二阶段:flash

动画设计-软件高级应用

软件高级应用

第十三节

逐帧动画和引导线动画制作与实例

逐帧动画和引导线动画制作与实例

第十四节

使用声音

添加声音,控制声音的播放,压缩声音,补充工具:cooledit

pro

第十五节

遮罩动画

遮罩动画

第十六节

遮罩动画

遮罩动画

第十七节

制作网页logo

制作残影文字logo,制作滚动文字logo,补充工具

swish

mx

第十八节

制作banner

制作舞台banner,制作下雪banner,制作产品banner,文字特效swish

第十九节

制作导航条

制作垂直导航条,制作横向导航栏,制作含有二级菜单的导航条

第二十节

制作loading

制作loading的原理,制作百分比进度条的loading

第二十一节

制作loading

制作逐渐显示的loading,制作显示动画的loading

第二十二节

制作节日广告

制作背景动画,制作灯笼动画,制作爆竹动画

第二十三节

制作节日广告

制作文本动画,完成动画

第二十四节

制作产品广告

制作汽车动画,制作遮罩动画,完成动画

第一阶段:公共课

第一节

网页概论

网页概论

第二节

熟悉界面

站点目录的搭建,常用快捷键,插入动画

插入图片

插入视频

第三节

表格布局

表格布局,插入表格,表格美化,表格细边框和网页表格布局

第四节

表单

表单设计,插入文本框,插入文本域,下拉菜单,下拉列表

第五节

框架结构

用于做网站的利器,在网页中嵌套框架页面

第二阶段:dreamweaver网页制作-html

html

第六节

介绍html

语法

结构

书写标准

介绍html

语法

结构

书写标准

第七节

介绍常用html标签

介绍常用html标签

第八节

介绍

div

ul

li

ol

li

介绍

div

ul

li

ol

li

第九节

介绍

dl

dt

dd

介绍

dl

dt

dd

第十节

综合运用实例1

综合运用实例1

第十一节

综合运用实例2

综合运用实例2

第三阶段:dreamweaver网页制作-css

css

第十二节

介绍css

语法

结构

书写标准

类,id,标签选择器,使用规范

第十三节

介绍文本属性

文本布局,文字链接

第十四节

介绍背景属性

介绍背景属性

第十五节

介绍区块属性、边框属性

介绍区块属性、边框属性

第十六节

介绍方框属性

介绍方框属性

第十七节

介绍列表属性

1

介绍列表属性

1

第十八节

介绍列表属性

2

介绍列表属性

2

第十九节

定位属性

定位属性

第二十节

html

css

布局范例1

段落排版,图文混排

第二十一节

html

css

布局范例2

水平导航条,垂直导航条

第二十二节

html

css

布局范例3

一行一列布局,一行两列布局

第二十三节

html

css

布局范例4

多行多列混合排版

第二十四节

综合范例

1

综合范例

1

第二十五节

综合范例

2

综合范例

2

第四阶段:dreamweaver网页制作-js

网页特效

js

网页特效

第二十六节

介绍js语法

介绍js语法

第二十七节

介绍js语法

介绍js语法

第二十八节

介绍dw行为面板

1

介绍dw行为面板

1

第二十九节

介绍dw行为面板

2

表单的验证

介绍dw行为面板

2

表单的验证

第三十节

介绍下拉菜单

1

介绍下拉菜单

1

第三十一节

介绍下拉菜单

2

对联和qq咨询

介绍下拉菜单

2,对联和qq咨询

第三十二节

介绍焦点图

1

介绍焦点图

1

第三十三节

介绍焦点图

2

介绍焦点图

2

第三十四节

介绍滑动门

介绍滑动门

第三十五节

无缝循环滚动

站外下载js修改

无缝循环滚动

站外下载js修改