1 / 18

网页制作与网站设计教学课件

网页制作与网站设计教学课件. 网页制作与网站设计课程组开发. 淮安信息职业技术学院. 情境 2 ：书法家庄辉个人网站建设. 任务 7 ：书法家庄辉个人网站 HTML 编辑静态页面. 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施 5. 项目检查与评估 6. 项目开发策略与技巧. 网页制作与网站设计教程. 1 任务解析与项目目标. 任务解析与项目目标.

thanos
Download Presentation

网页制作与网站设计教学课件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页制作与网站设计教学课件 网页制作与网站设计课程组开发 淮安信息职业技术学院

  2. 情境2：书法家庄辉个人网站建设 任务7：书法家庄辉个人网站HTML编辑静态页面 1. 任务解析与项目目标 2. 核心技能与概念 3. 任务计划与决策 4. 任务实施 5. 项目检查与评估 6. 项目开发策略与技巧 网页制作与网站设计教程

  3. 1任务解析与项目目标 任务解析与项目目标 使用Dreamweaver编辑网页是网页设计的基本功，使用HTML语言编写静态页面是今后动态网页编程的基础，所以编写HTML代码要掌握编写的方法、HTML的基本结构等相关知识。

  4. 2. 核心技能与概念 核心技能点一：HTML语言简介 HTML（HyperText Markup Language，超文本标记语言），是用来描述超文本文档的标记语言。它由HTML标记和用来表示信息的文本组成。使用HTML语言描述的文件，需要通过浏览器显示效果。 所有的网页都可以以HTML格式的文件为基础，再加上一些其他语言（如Javascript、VBScript等）编写的代码。这些文件除了一些基本的文字外还包含一些标记，这些标记均由“<”和“>”符号以及一个字符串组成。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画并播放声音等。

  5. 2. 核心技能与概念 核心技能点二：HTML的基本结构 <html> <head> 文档头部分 </head> <body> 文档主体部分 </body> </html> 1）HTML概述与编写方法 HTML文件是分层组织的，最外层是<html>标记，在此标记内一般有两层：head层（文档头）和body层(文档体)。这两部分内容都包含在<html>和</html>之间 。在这些标记内可以嵌套其他标记。一般情况下文档头存储网页的信息，比如网页标题存放在<title>标记中，网页关键字存放在<meta>标记中。文档体是网页内容的显示部分。主要由表格标记、段落标记、图像标记等组成。

  6. 2. 核心技能与概念 核心技能点二：HTML的基本结构 <html> <head> <title>欢迎访问俞晨视觉传奇网站!</title> </head> <body> <center> <img src="images/index.jpg" width="778" height="430"> <br> 2007-2009 版权所有：俞晨 建议1024*768以上分辨率浏览 </center> </body> </html>

  7. 2. 核心技能与概念 核心技能点二：HTML的基本结构

  8. 2. 核心技能与概念 核心技能点二：HTML的基本结构 1）HTML标记 在HTML文档中由许多用“< ”和“>”括起来构成的代码，这种代码称它为标记，标记是HTML语言中定义网页内容格式和显示的指令。而标记的属性用于进一步控制网页内容的显示效果。 （1）单标记 <br> <hr> （2）双标记<标记>内容</标记> <strong>第一</ strong > （3）标记属性 <标记名称 属性1=属性值1 属性2=属性值2 属性3=属性值3…> <hr size="3" align="center" width="80%"/>

  9. 2. 核心技能与概念 核心技能点三：HTML的常用标记 1）基本标记 （1）html标记 （2）head标记 （3）title标记（4）body标记 <html> <head> <title>欢迎访问HTML初级学习网站!</title> </head> <body> 通过项目锻炼，网页设计师是可以速成的，一定要好好学习! </body> </html>

  10. 2. 核心技能与概念 核心技能点三：HTML的常用标记 2）网页布局与文字设计 （1）标题 （2）换行 （3）段落标记 （4）文字的字体和样式 3）列表 （1）无序号列表 （2）序号列表 4）TABLE表格 （1）表格的基本结构 <table>…</table>定义表格 <caption>…</caption>定义标题 <tr>定义表行 <th>定义表头 <td>定义表元（表格的具体数据）

  11. 2. 核心技能与概念 核心技能点三：HTML的常用标记 <table width="327" border="1"> <tr> <td width="76" rowspan="2">学生</td> <td width="69">姓名</td> <td width="79">学号</td> <td width="75" rowspan="2">共青团员</td> </tr> <tr> <td>王刚</td> <td>33081001</td> </tr> </table> （2）表格的标题 设置标题位于表格上方： <caption align="top">…</caption> （3）表格尺寸设置 <table width="n1" height="n2"> （4）表格内文字的对齐/布局 （5）单元格的合并

  12. 2. 核心技能与概念 核心技能点三：HTML的常用标记 5）文件之间的链接 超文本链接是网页最重要的特性之一，浏览者可以从一个页面直接跳转到其它页面、图像或者服务器。链接标签的基本格式如下： <a href="资源地址">链接文字</a> 说明： （1）标记<a>表示一个链接的开始，标记</a>表示链接的结束。 （2）属性“href”定义了这个链接所指的网页路径。 （3）通过点击“链接文字”可以链接到指定的网页。 例如：<a href ="http://www.sina.com.cn">新浪网</a>即可给“新浪网”三个字加上链接到新浪主页的链接。

  13. 2. 核心技能与概念 核心技能点三：HTML的常用标记 6）多媒体效果 在网页中加入多媒体，可使网页元素更加丰富，更加美观，使网页更具吸引力。下面将学习在一个页面中如何插入图像。 （1）插入图像 超文本支持的图像格式一般有X Bitmap （XBM）、GIF、JPEG三种，所以将图片处理后要保存为这三种格式的任何一种，这样才可以在浏览器中看到。 插入图像标记是<img>，其格式为：<img src="图像文件地址"> 图像按钮就是浏览者通过在图像上单击就能链接到某个地址的网页。很简单，只要利用前面所学的知识就可以完成了。其基本格式如下： <a href ="资源地址"><img src="图像文件地址"></a> 例如：<a href =" index.html"><img src="html.gif"></a>

  14. 2. 核心技能与概念 核心技能点三：HTML的常用标记 2）播放音频与视频 HTML 除了可以插入图像之外，还可以播放音乐和视频等。用浏览器可以播放的音乐格式由MIDI音乐、WAV音乐、AU格式。另外，在利用网络下载的各种音乐格式中，MP3是压缩率最高、音质最好的的文件格式。 点播音乐的方式是将音乐做成一个超链接，只需要用鼠标在上面单击，就可以听到动人的音乐了，其实这样做的方法很简单：<a href ="音乐地址">乐曲名</a> 自动载入音乐或视频是前面借助链接来实现网上播放音乐这一功能，还可以让音乐自动载入，让它出现控制面板或作为背景音乐来使用。基本语法为：<embed src="音乐文件地址">

  15. 2. 核心技能与概念 核心技能点三：HTML的常用标记 <body> <embed src="sound/gsls.mp3" loop=true width="145" height="60"></embed> </body> </html> 如果将<embed src=“sound/gsls.mp3” loop=“true” width=“145” height=“60”></embed>改为以下代码： <embed src="video/dog.wmv" width="218" height="208"></embed> 已保存为example6.html，效果如图

  16. 3. 项目实施 任务1：主页中添加背景音乐。 1）打开百度网站，搜索古典音乐gsls.wmv，然后将下载的音乐文件存放到庄辉个人站点的“sound”文件夹中。 2）继续在百度中搜索“网页背景音乐”关键字，然后可找到设置背景的代码，对于本项目来讲代码如下： <bgsound src="sound/gsls.mp3" loop="-1"> 代码写在<head></head>标签之间。

  17. 3. 项目实施 任务2：编辑国画作品页面的HTML代码 HTML代码 编写演示

  18. 谢谢大家

More Related