1 / 43

网页设计课程介绍

网页设计课程介绍. 课程性质. 《 网页设计 》 专业基础课，必修课。适用专业：装潢、数媒、动漫。 50 学时，开设于第二学期。 本课程是一门操作性和实践性很强的专业基础课程，主要学习静态网页制作方法和技术，学习常用的 HTML 标记；网站的规划；编写常用的网页元素；应用第三方软件辅助设计网页；本课程通过 Dreamweaver 这种有代表性的网页制作软件的学习，让学生学会网页制作期方法和技巧。 本课程学习结束后，学生能开发具有一定规模的静态网站，并最终上传到互联网上。 先修课程：计算机基础，同步进行了的可以有：图像处理， Flash 动画制作等。

tadita
Télécharger la présentation

网页设计课程介绍

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. 课程性质 • 《网页设计》专业基础课，必修课。适用专业：装潢、数媒、动漫。50学时，开设于第二学期。 • 本课程是一门操作性和实践性很强的专业基础课程，主要学习静态网页制作方法和技术，学习常用的HTML标记；网站的规划；编写常用的网页元素；应用第三方软件辅助设计网页；本课程通过Dreamweaver这种有代表性的网页制作软件的学习，让学生学会网页制作期方法和技巧。 • 本课程学习结束后，学生能开发具有一定规模的静态网站，并最终上传到互联网上。 • 先修课程：计算机基础，同步进行了的可以有：图像处理，Flash动画制作等。 • 后续课程：网页设计进阶，网页美工等。

  3. 课程设计 课程能力目标： • 能够使用HTML标签制作简单的网页。 • 能够构建一个网站的基本构架，并设计相应的主页面的框架。 • 能够用表格、层、布局表格等功能合理布局主页内容。 • 能够根据网站交互的要求，用Dreamweaver制作相应的表单网页。 • 能够用Dreamweaver技术中的CSS方法，定位和美化网页。

  4. 课程知识目标： • 掌握HTML的基本标签使用 • 掌握Dreamweaver软件的操作方法。 • 掌握各种网页元素的添加方法。 • 掌握网页的布局方法。 • 掌握DIV+CSS样式的设计方法。

  5. 本课程的考核方案 这门课程的考核成绩分为三个部分： （一）平时成绩（30%） 平时到课、课堂发言情况、实训报告 （二）课堂实训（30%） 实训作品上交情况、作品水平 （二）课程设计（40%） 综合作品水平（25%），按时完成（5%），课堂答辩（10%）

  6. 网页设计中的常用的概念： • 网站、网页、主页、HTML、HTTP协议、URL、上传下载等概念。 • 网上建站的步骤 ： • 1.注册域名、租用磁盘空间 • 2.规划网站、制作网页 • 3.网站上传 • 4.网站推广

  7. 典型网站欣赏： • 新浪网http://www.sina.com.cn/ • 微软帮助网http://support.microsoft.com/ • 索尼爱立信中文网站http://www.sonyericsson.com/cws/home?cc=cn&lc=zh • Adobe官方网站(http://www.adobe.com) • 企业网http://www.ce.net.cn/

  8. 项目 1HTML基础与HTML基本标签 网页设计

  9. 教学目标 通过本项目的学习，使读者能够对HTML有一定的认识，并能够了解HTML的一些基本标签，从而为本书后续章节的学习打下一定的基础。 了解什么是HTML，了解我们学习HTML的目的。 了解HTML的一些基本标签，并能使用记事本制作简单的网页。

  10. 工作任务 • 由于本章讲述的内容是HTML的基础知识，还未涉及到Dreamweaver CS3编辑软件的使用，因此，本章内容均使用记事本来完成。本章的任务是使用记事本制作“上海世博网”中“世博活动”栏目页面。要求完成后页面浏览效果如图 1.1所示。

  11. 图 1.1 “世博活动”栏目页面效果图

  12. 1.1 HTML简介 1.1.1 HTML文件是什么? 百度中对HTML词条的解释如下： HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 从上面的解释中我们可以得到什么信息？ HTML是应用最为广泛的网页文档语言； HTML可以支持多种媒体，如文字、图形、动画、声音、表格、链接等； HTML具有特定的结构，最基本的结构是Head和Body两部分。 总之，HTML语言是Web页面的描述性语言，不管在Web上发布信息，或者编写交互程序，都离不开HTML语言的应用。

  13. 1.1.2 HTML的优缺点 HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，其主要优点如下： • 简易性：HTML文档容易创建，只需一个文本编辑器就可以完成。 • 文件小：HTML文件存贮量小，能够尽可能快的在网络环境下传输与显示。 • 可扩展性：HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。 • 平台无关性：虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。

  14. HTML语言的缺点如下： • 美工设计困难：传统的HTML语言要实现页面美工上的设计是十分麻烦的。对于网页中的某一个元素，要修改它的属性以实现某一种设计效果并不难，但若是对整个网站中的所有页面而言，则是一项非常庞大的工作。 • 维护困难：为了修改某个标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。 • 标记不足：HTML本身的标记十分的少，很多标记都是为网页内容服务的，而关于美工样式的标记。 • 网页过“胖”：由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用掉了很多宝贵的带宽。 • 定位很困难：在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘，过多的<table>标记同样也导致页面的复杂和后期维护的困难。

  15. 1.1.3 HTML文档的编辑工具 HTML其实是文本，它需要浏览器的解释，HTML的编辑器大体可以分为三种， • 基本编辑软件：使用WINDOWS自带的记事本或写字版都可以编写，不过存盘时必须使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。 1.2节中我们就将使用记事本来学习HTML的一些基本标签。 • 半所见即所得软件：这种软件能大大提高开发效率，它可以使你在很短的时间内做出网页，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。 • 所见即所得软件：是使用最广泛的网页编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，Dreamweaver等。本课程就是针对Dreamweaver CS3版本进行教学。

  16. 1.2.1 HTML的标签 • 标签通过指定某块信息显示为段落或标题等来标识文档部件。属性是标签的选项，用于在标签中修饰或进一步指定颜色、对齐方式、高度、宽度等等信息。 • 我们来认识一下标签的格式。下面是一个html标签。 • <html>……</html>

  17. 1.2.2 HTML文件基本结构 我们开始制作本章工作任务要求完成的“世博活动”栏目页面。 • 把 “项目一素材”目录复制到本地硬盘中，作为我们网站的根目录。 • 打开windows自带的记事本编辑工具，并输入图 1.2中的代码。输入完成后将文档以sbhd.html为文件名保存到网站根目录下。

  18. 图 1.2记事本中的代码

  19. 上面这段代码就是我们HTML文件的基本结构。我们来解释一下这段代码：上面这段代码就是我们HTML文件的基本结构。我们来解释一下这段代码： • <html> HTML标签，HTML文件开始 • <head> HTML头部标签，HTML文件的头部开始 • </head> HTML文件的头部结束 • <body> HTML主体标签，HTML文件的主体开始 • </body> HTML文件的主体结束 • </html> HTML文件结束

  20. 在<head></head>标签之间插入下面代码： • <title>上海世界博览会</title>

  21. 1.3 HTML其他常用标签 • 本章的工作任务是制作sbhd.html页面，该页面的最终完成效果图如图 1.6所示。

  22. 根据要求，我们需要在sbhd.html页面中插入以下元素：根据要求，我们需要在sbhd.html页面中插入以下元素： • 页面头部，包括图片、动画和导航栏。由于页面头部元素较多，对于没有学习过HTML的同学来说其代码比较复杂，而且在后续的章节中我们会讲到，所以在这一章，我们提供了一个已经完成的头部页面sbhd_top.html文件，存放在网站根目录下，我们只要简单学习一下如何插入这个头部文件即可。 • “世博活动”的图片。该文件以right_bg.jpg为文件名存放在images目录下。 • 活动内容表格，表格中插入了不同格式的文字，并创建了超级链接。 • 网站版权部分，为了简化学习内容，我们将该部分制作成了图片，以sbhd_footer.jpg为文件名保存在images目录下。 • 我们在记事本中修改sbhd.html页面，逐步地插入相应的HTML标签，在实践中来学习些标签的格式及属性等知识。

  23. 1.3.1 浮动框架标签 • 我们要想把sbhd_top.html页面插入到sbhd.html页面中，需要使用<iframe></iframe>浮动框架标签。该标签在项目六中我们会详细讲到，因此在本章中我们只是进行简单的介绍。 • 在sbhd.html页面中的<body>和</body>之间输入下列代码，如图 1.7所示。 <iframe align="center" width="935" height="238" src="sbhd_top.html" frameborder="0"> </iframe>

  24. 保存文档后，我们利用IE浏览器打开sbhd.html文档，效果如图 1.8所示： • 图 1.8插入<iframe>后的sbhd.html文档浏览效果 • 我们看到，原本一片空白的网页中出现了sbhd_top.html文档中的内容。

  25. <iframe align="center" width="935" height="238" src="sbhd_top.html" frameborder="0"> • </iframe> • 代码说明如下： • <iframe>标签是成对标签，它有</iframe>结束标签。 • align属性，设置iframe框架居中对齐。 • width属性，设置iframe框架在页面中的显示宽度。 • height属性，设置iframe框架在页面中的显示高度。 • src属性，设置iframe框架中包含的页面源地址，包括路径和文件名。 • frameborder属性，设置iframe框架的边框线宽度。

  26. 1.3.2 图片标签 • 在HTML页面中可以插入图片，插入图片的标签就是<img>标签。接下来我们向sbhd.html页面中插入right_bg.jpg图片。 • 在sbhd.html页面中的</iframe>之后输入下列代码，如图 1.9所示。 • <img src="images/right_bg.jpg" width="935" height="64">

  27. 保存文档后，我们利用IE浏览器打开sbhd.html文档，效果如图 1.10所示：

  28. <img src="images/right_bg.jpg" width="935" height="64"> • 代码说明如下： • <img>标签没有结束标签。 • src属性，用来指定图像的源文件，包括路径和文件名。src是必要属性，不可省略。 • width属性，用来指定图像的宽度，单位为像素。 • height属性，用来指定图像的高度，单位为像素。

  29. 1.3.3 居中对齐标签 • <center> • <img src="images/right_bg.jpg" width="935" height="64"> • </center>

  30. 1.3.4 表格标签 • 简单的 HTML 表格由一对<table>标签以及一对或多对<tr>、<td>标签组成。<table>标签定义表格，<tr>标签定义表格行，<td>标签定义表格单元。

  31. 在记事本中</center>标签后插入下列代码，记事本中内容如图 1.13所示。 • <table width="935" align="center" border="1" bordercolor="#3399CC"> • <tr> • <td width="200" height="70" align="center">演出场地</td> • <td width="535" align="center">节目名称</td> • <td width="200" align="center">演出时间</td> • </tr> • <tr> • <td height="50" align="center">后滩广场</td> • <td align="center">全球青年创新之旅</td> • <td align="center">2010年03月02日</td> • </tr> • <tr> • <td height="50" align="center">船坞剧场</td> • <td align="center">皮影戏《三国演义》</td> • <td align="center">2010年04月08日</td> • </tr> • <tr> • <td height="50" align="center">B.03广场</td> • <td align="center">彩绘创意秀</td> • <td align="center">2010年04月29日</td> • </tr> • <tr> • <td height="50" align="center">美食娱乐广场</td> • <td align="center">《春江花月夜》陆家嘴街道海派秧歌专场</td> • <td align="center">2010年10月27日</td> • </tr> • </table>

  32. 我们看到，在页面中出现了一个五行三列的表格。下面我们来学习一下刚才输入到文档中的部分代码。先看一下<table>标签的代码：我们看到，在页面中出现了一个五行三列的表格。下面我们来学习一下刚才输入到文档中的部分代码。先看一下<table>标签的代码： • <table width="935" align="center" border="1" bordercolor="#3399CC"> • 在这个<table>标签中，我们设置了以下属性： • width属性：设置表格宽度。 • aling属性：设置表格对齐方式。 • border属性：设置表格边框线宽度。 • bordercolor属性：设置表格边框线的颜色。

  33. 1.3.5 强调文字标签 • 我们先把表格中第一行三个单元格的文字设置为强调文字。强调文字的标签是<strong></strong>，使用方法是使用标签将文字对象包含在内即可。 • 在记事本中，对表格第一行所在的三个<td>标签中的文字前后添加强调文字标签<strong>和</strong>

  34. 1.3.6 字体标签 • 我们还需要对表格中的文字设置字体格式。我们使用<font></font>标签来进行设置。 • 在记事本中，对表格第一行所在的三个<td>标签中的文字前后添加<font></font>标签，代码见下行： • <font size="3" color="#0000FF">……</font> • 对表格其余各行中的<td>标签中的文字前后添加<font></font>标签，代码见下行： • <font size="2">……</font>

  35. 1.3.7 链接标签 • 设置文字的超级链接使用<a></a>标签。 • 在记事本中，对表格中需要创建超级链接的文字前后添加<a>和</a>标签，代码见下行： • <a href="#">……</a> • 代码中的<a>标签设置了一个href属性，该属性用来指定超级链接的链接地址。本例中使用了#号，表示此链接是一个没有地址的空白虚链接，单击链接后页面不会跳转。 • 需要创建超级链接的文字有：“全球青年创新之旅”、“皮影戏《三国演义》”、“彩绘创意秀”、“《春江花月夜》陆家嘴街道海派秧歌专场”。 • 添加代码后记事本中内容如图 1.19所示。

  36. 1.3.8 段落标签 • 本例中版权部分只需要将images目录下的sbhd_footer.jpg图片插入到页面中相关位置即可。 • 在记事本中，在表格结束标签</table>后面添加下列代码： • <p align="center"><img src="images/sbhd_footer.jpg" width="935" height="90"></p> • 这里在<img>标签的前后多出了一对<p></p>标签，它称之为段落标签，用来定义段落。 • <p>标签会自动在所定义的段落前后创建一些空白。有了这些空白，我们插入页面中的版权图片就不会和前面的表格紧接在一起了。 • <p>标签中我们使用了align属性来定义段落居中对齐，通过这种方法我们也实现了前面1.3.3小节中的<center>标签的功能。

  37. 课后实训：使用HTML代码制作“上海世博网”的伊朗馆网页课后实训：使用HTML代码制作“上海世博网”的伊朗馆网页 • 效果如图1.23所示。 • 实训要求： • 使用表格标签<table>…</table>来布局网页。 • 网页上部参考教材的操作步骤，导航采用空链接。 • 正文中的“概况”、“设计理念”、“场馆主题”和“展馆风采”文本采用<h3>和项目符号<ul>的格式。 • 正文中的大图片采用右对齐方式align="right"。 • “展馆内景欣赏”图片采用向左滚动效果，参考代码： • <marquee onmouseover="this.stop()" onmouseout="this.start()" >…..</ marquee > • 6）实训素材见项目1素材。

More Related