网页制作教程PPT课件.ppt
《网页制作教程PPT课件.ppt》由会员分享,可在线阅读,更多相关《网页制作教程PPT课件.ppt(65页珍藏版)》请在三一文库上搜索。
1、网页制作技术,课程定位与课程内容,(一)课程定位,信息技术基础、网页美术基础、平面图形图像处理,数据库应用技术、网页特效 、Web程序设计,网站建设,专业基础课程,是网站开发的基础课程。,企业网站开发,教学大纲、教材与教参,(一)教 学 大 纲 提 要,4学时: 任务一 网页基础 4学时: 任务二 表格及布局 4学时: 任务三 插入页面元素 12学时:任务四 框架与层 8学时: 任务五 网页美化与特效 8学时: 任务六 表单 4学时: 任务七 模板与库 30学时:实训,授课计划,教材特点: 1、本教材适合高职高专的网页设计与规划教学; 2、教材采用模块化教学、目标任务驱动、案例操作步骤、知识点
2、详解四层结构引导学生完成网页设计的每一环节。,机械工业出版社出版的高职高专教材Dreamweaver CS3网页设计案例教程,(二)教材,教学大纲、教材与教参,1、网页设计与制作人民邮电出版社 2、 网络资源,(三)教参,http:/,5,课程内容,模块,技能培养,素质提高,http:/,6,考核方式 1. 出勤:10% 2. 课堂表现(上课及上机实验):20% 3. 平时作业:20% 4. 阶段测试:10% 5. 考试成绩(实训):40% 作业上交(压缩包名称例:01 a),考核方式,任务一 网页基础,网页制作技术,主要内容,子任务1 初识网页与网页设计软件,一,子任务2 网页的基本操作与站
3、点管理,二,三,二,二,1. 网站与网页的关系 网页(web),即HTML文件,也就是网站上的某一个页面,它是一个纯文本文件,是向浏览者传递信息的载体。 构建网页的基本元素包括文本、图像和超链接,其他元素包括声音、动画、视频、表格、导航栏、表单等。 网站(Website),它是指在互联网上,根据一定的规则,使用HTML等工具制作的用于展示特定内容的相关网页集合,它建立在网络基础之上,以计算机、网络和通信技术为依托,通过一台或多台计算机向访问者提供服务。平时所说的访问某个站点,实际上访问的是提供这种服务的一台或多台计算机。,子任务1 初识网页与网页设计软件,http:/,10,一、网页与网站的相
4、关知识:,普通静态网页的工作流程,2. 网页的类型 普通静态网页 指在发送到浏览器之前不会被应用程序服务器修改的Web页。也就是说,当站点访问者请求该网页时,页面内容不会发生更改。,子任务1 初识网页与网页设计软件,http:/,11,2. 网页的类型 动态网页 是在发送到浏览器之前由应用程序服务器自定义的网页。动态网页要在经过服务器的修改后才被发送到请求它的浏览器。网页发生更改的特性便是称其为动态的原因。,动态网页的工作流程,子任务1 初识网页与网页设计软件,12,3. 组成页面的元素 文本网页中信息的主要表达方式。 图像常用的有三种格式:GIF、JPEG和PNG。 动画常见的包括两种:GI
5、F动画、Flash动画。 视频和音频种类很多,例如:AVI、RM、mp3等。 超级链接是在一个网站中的各网页之间进行跳转的媒介。 导航栏用于引导访问者浏览站点。 表格用于布局文本和图像以及其他的列表化数据和精确 控制各种网页元素在网页中出现的位置。 表单访问者与网站交互的桥梁。,子任务1 初识网页与网页设计软件,文本:文本是网页信息的主体,网页中的信息主要是以文本为主的。它能准确地表达信息的内容和含义。,子任务1 初识网页与网页设计软件,图像:图像在网页中具有提供信息、展示形象、美化网页、表达风格的作用。有了图像看到的的网页而丰富多彩。现在网络上使用的绝大多数图片和图像是gif、jpeg和pn
6、g文件格式。,子任务1 初识网页与网页设计软件,最常用和最简单的方式:用自己网站的英文名称采用不同的字体、字母的变形设计制作为网站的标志。,网站logo欣赏,新浪网,当当网,亿邮网,百度网,三星网,欧莱雅网,清华同方电脑网,子任务1 初识网页与网页设计软件,Banner是用于宣传站内某个栏目活动的广告,一般要求制作成动画形式,由于动画能够吸引更多注意力,将介绍性的内容简练的加在其中达到宣传的效果。,子任务1 初识网页与网页设计软件,表单是用来收集站点访问者信息的域集。,子任务1 初识网页与网页设计软件,表格是网页排版的灵魂,子任务1 初识网页与网页设计软件,框架是网页的一种组织形式,将相互关联
7、的多个网页的内容组织在一个浏览器窗口中显示。,子任务1 初识网页与网页设计软件,http:/,20,一、网站的规划期 1. 定位主题(题材和内容、网站名称等) 2. 资料搜集(文字信息、图像、动画、音频视频等) 3. 结构设计(设计网站的栏目及目录结构。注意不要将所有的文件都存放在根目录下;要按栏目内容建立子目录;要在每个主目录下都建立独立的图片目录;目录的层次不要太深。) 4. 形象设计(网站风格、标志、颜色、标准字体等) 5. 确定版面布局,设计首页及各分页 二、网站的制作期:使用Dreamweaver制作首页及分页。 三、网站的后期维护:测试网站,申请域名,上传网站内容及管理。,子任务1
8、 初识网页与网页设计软件,http:/,21,启动 了解工作界面,子任务2 网页的基本操作与站点管理,http:/,22,站点的分类 Dreamweaver建立的站点可以分为本地站点(Local Site)和远程站点(Remote Site)两种。 通常在本地计算机的硬盘中建立本地站点,将网页存放在本地站点,方便设计制作、管理和调试。 完成网站设计制作以后,再将本地站点的所有内容上传到Web服务器中设定的、供互联网用户浏览访问的位置,称为远程站点。,子任务2 网页的基本操作与站点管理,制作网站的第一步:建立站点 站点的作用: 方便管理网站的内容,牢记,不要将所有文件都放在根目录下,这样做会使文
9、件管理混乱,上传速度慢。 按栏目内容建立子目录。 次要栏目视情况而定。对于需要经常更新的栏目可以建立独立的子目录。而一些相关性强,不需要经常更新的栏目,可以合并放在一个统一的目录下。 所有程序一般都放在特定目录中,所有需要下载的内容也最好放在一个子目录下。 在每个主目录下都建立独立的images目录,。为每一个栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。 注意:目录的层次不要太深,不要使用中文目录,不要使用过长的目录名,目录要做到“见名之义”等。,http:/,24,子任务2 网页的基本操作与站点管理,audio:放置音频文
10、件 css:放置样式 doc:放置word文档 downloads:放置给客户下载的文件 flash:放置动画 images:放置图片 library:放置库项目 Template:放置模板 news:放置新闻 video:放置视频文件,http:/,25,子任务2 网页的基本操作与站点管理,http:/,26,【例】某企业网站规划,进行本地站点的创建与管理。 在上例中任取一个页面进行页面属性的设置并观察Html代码的变化。,http:/,27,六、网页文件的运行,在浏览器运行,直接打开网页文件。 在Dreamweaver中: 可以通过“文件”-“在浏览器中预览”-iexplore运行。 直接
11、单击“F12”运行。 点击“文档”工具栏中的快捷按钮运行。,http:/,28,小结与作业,静态网页与动态网页 Html基本概念 网页设计与制作的基本流程 Dreamweaver CS3工作界面 如何创建本地站点并进行管理 对页面属性进行设置 代码文件头“title”标记的设置 如何运行网页文件 上机实验1,任务二 使用表格规划网页布局,主要内容,认识表格 创建表格 编辑表格 使用表格规划网页布局,一、认识表格,表格与单元格的关系是整体与局部的关系,如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。,http:/,32,1. 两种方法 直观设计指用所见即所得的方式直接在文档页
12、面中添加文本、图形及其他对象,并设置它们的属性,所得到的效果与在Web浏览器中所浏览到的效果相似。 代码设计指通过使用HTML语言编写代码来生成网页,通过各种标记描述不同的内容,说明段落、标题、图像及字体等在浏览器中的显示效果。,二、网页的设计方法,http:/,33,2. HTML基本语法 HTML标记HTML文件所需的最基本的标记,书写为和。 HEAD标记文件头标记,以开始,以结束。 TITLE标记标题标记,用于指定网页的标题。它只能出现在HEAD标记之间,其格式为网页标题。,二、网页的设计方法,http:/,34,BODY标记用于标识网页主体,其中包含一个网页中除标题外的所有对象,格式为
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 教程 PPT 课件
链接地址:https://www.31doc.com/p-2823330.html