网页设计课程介绍
Download
1 / 43

网页设计课程介绍 - PowerPoint PPT Presentation


  • 109 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 网页设计课程介绍' - tadita


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

课程性质

  • 《网页设计》专业基础课,必修课。适用专业:装潢、数媒、动漫。50学时,开设于第二学期。

  • 本课程是一门操作性和实践性很强的专业基础课程,主要学习静态网页制作方法和技术,学习常用的HTML标记;网站的规划;编写常用的网页元素;应用第三方软件辅助设计网页;本课程通过Dreamweaver这种有代表性的网页制作软件的学习,让学生学会网页制作期方法和技巧。

  • 本课程学习结束后,学生能开发具有一定规模的静态网站,并最终上传到互联网上。

  • 先修课程:计算机基础,同步进行了的可以有:图像处理,Flash动画制作等。

  • 后续课程:网页设计进阶,网页美工等。


课程设计

课程能力目标:

  • 能够使用HTML标签制作简单的网页。

  • 能够构建一个网站的基本构架,并设计相应的主页面的框架。

  • 能够用表格、层、布局表格等功能合理布局主页内容。

  • 能够根据网站交互的要求,用Dreamweaver制作相应的表单网页。

  • 能够用Dreamweaver技术中的CSS方法,定位和美化网页。


课程知识目标:

  • 掌握HTML的基本标签使用

  • 掌握Dreamweaver软件的操作方法。

  • 掌握各种网页元素的添加方法。

  • 掌握网页的布局方法。

  • 掌握DIV+CSS样式的设计方法。


本课程的考核方案

这门课程的考核成绩分为三个部分:

(一)平时成绩(30%)

平时到课、课堂发言情况、实训报告

(二)课堂实训(30%)

实训作品上交情况、作品水平

(二)课程设计(40%)

综合作品水平(25%),按时完成(5%),课堂答辩(10%)


网页设计中的常用的概念:

  • 网站、网页、主页、HTML、HTTP协议、URL、上传下载等概念。

  • 网上建站的步骤 :

  • 1.注册域名、租用磁盘空间

  • 2.规划网站、制作网页

  • 3.网站上传

  • 4.网站推广


典型网站欣赏:

  • 新浪网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/


1html html

项目 1HTML基础与HTML基本标签

网页设计


教学目标

通过本项目的学习,使读者能够对HTML有一定的认识,并能够了解HTML的一些基本标签,从而为本书后续章节的学习打下一定的基础。

了解什么是HTML,了解我们学习HTML的目的。

了解HTML的一些基本标签,并能使用记事本制作简单的网页。


工作任务

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


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


1 1 html
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语言的应用。


1 1 2 html
1.1.2 HTML的优缺点

HTML文档制作不是很复杂,且功能强大,支持不同数据格式的文件镶入,这也是WWW盛行的原因之一,其主要优点如下:

  • 简易性:HTML文档容易创建,只需一个文本编辑器就可以完成。

  • 文件小:HTML文件存贮量小,能够尽可能快的在网络环境下传输与显示。

  • 可扩展性:HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。

  • 平台无关性:虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上,这也是WWW盛行的另一个原因。


HTML语言的缺点如下:

  • 美工设计困难:传统的HTML语言要实现页面美工上的设计是十分麻烦的。对于网页中的某一个元素,要修改它的属性以实现某一种设计效果并不难,但若是对整个网站中的所有页面而言,则是一项非常庞大的工作。

  • 维护困难:为了修改某个标记的格式,需要花费很多的时间,尤其对于整个网站而言,后期修改和维护的成本很高。

  • 标记不足:HTML本身的标记十分的少,很多标记都是为网页内容服务的,而关于美工样式的标记。

  • 网页过“胖”:由于没有统一对各种风格样式进行控制,HTML的页面往往体积过大,占用掉了很多宝贵的带宽。

  • 定位很困难:在整体布局页面时,HTML对于各个模块的位置调整显得捉襟见肘,过多的<table>标记同样也导致页面的复杂和后期维护的困难。


1 1 3 html
1.1.3 HTML文档的编辑工具

HTML其实是文本,它需要浏览器的解释,HTML的编辑器大体可以分为三种,

  • 基本编辑软件:使用WINDOWS自带的记事本或写字版都可以编写,不过存盘时必须使用.htm或.html作为扩展名,这样浏览器就可以解释执行了。 1.2节中我们就将使用记事本来学习HTML的一些基本标签。

  • 半所见即所得软件:这种软件能大大提高开发效率,它可以使你在很短的时间内做出网页,且可以学习HTML,这种类型的软件主要有HOTDOG,还有国产的软件网页作坊。

  • 所见即所得软件:是使用最广泛的网页编辑器,完全可以一点不懂HTML的知识就可以做出网页,这类软件主要有Frontpage,Dreamweaver等。本课程就是针对Dreamweaver CS3版本进行教学。


1 2 1 html
1.2.1 HTML的标签

  • 标签通过指定某块信息显示为段落或标题等来标识文档部件。属性是标签的选项,用于在标签中修饰或进一步指定颜色、对齐方式、高度、宽度等等信息。

  • 我们来认识一下标签的格式。下面是一个html标签。

  • <html>……</html>


1 2 2 html
1.2.2 HTML文件基本结构

我们开始制作本章工作任务要求完成的“世博活动”栏目页面。

  • 把 “项目一素材”目录复制到本地硬盘中,作为我们网站的根目录。

  • 打开windows自带的记事本编辑工具,并输入图 1.2中的代码。输入完成后将文档以sbhd.html为文件名保存到网站根目录下。


1.2记事本中的代码


上面这段代码就是我们HTML文件的基本结构。我们来解释一下这段代码:

  • <html> HTML标签,HTML文件开始

  • <head> HTML头部标签,HTML文件的头部开始

  • </head> HTML文件的头部结束

  • <body> HTML主体标签,HTML文件的主体开始

  • </body> HTML文件的主体结束

  • </html> HTML文件结束


  • <head></head>标签之间插入下面代码:

  • <title>上海世界博览会</title>


1 3 html
1.3 HTML其他常用标签

  • 本章的工作任务是制作sbhd.html页面,该页面的最终完成效果图如图 1.6所示。


Sbhd html
根据要求,我们需要在sbhd.html页面中插入以下元素:

  • 页面头部,包括图片、动画和导航栏。由于页面头部元素较多,对于没有学习过HTML的同学来说其代码比较复杂,而且在后续的章节中我们会讲到,所以在这一章,我们提供了一个已经完成的头部页面sbhd_top.html文件,存放在网站根目录下,我们只要简单学习一下如何插入这个头部文件即可。

  • “世博活动”的图片。该文件以right_bg.jpg为文件名存放在images目录下。

  • 活动内容表格,表格中插入了不同格式的文字,并创建了超级链接。

  • 网站版权部分,为了简化学习内容,我们将该部分制作成了图片,以sbhd_footer.jpg为文件名保存在images目录下。

  • 我们在记事本中修改sbhd.html页面,逐步地插入相应的HTML标签,在实践中来学习些标签的格式及属性等知识。


1 3 1
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>


Ie sbhd html 1 8
保存文档后,我们利用IE浏览器打开sbhd.html文档,效果如图 1.8所示:

  • 图 1.8插入<iframe>后的sbhd.html文档浏览效果

  • 我们看到,原本一片空白的网页中出现了sbhd_top.html文档中的内容。


  • <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框架的边框线宽度。


1 3 2
1.3.2 src="sbhd_top.html" frameborder="0">图片标签

  • 在HTML页面中可以插入图片,插入图片的标签就是<img>标签。接下来我们向sbhd.html页面中插入right_bg.jpg图片。

  • 在sbhd.html页面中的</iframe>之后输入下列代码,如图 1.9所示。

  • <img src="images/right_bg.jpg" width="935" height="64">



  • <img src="images/right_bg.jpg" width="935" height="64"> src="sbhd_top.html" frameborder="0">

  • 代码说明如下:

  • <img>标签没有结束标签。

  • src属性,用来指定图像的源文件,包括路径和文件名。src是必要属性,不可省略。

  • width属性,用来指定图像的宽度,单位为像素。

  • height属性,用来指定图像的高度,单位为像素。


1 3 3
1.3.3 src="sbhd_top.html" frameborder="0">居中对齐标签

  • <center>

  • <img src="images/right_bg.jpg" width="935" height="64">

  • </center>


1 3 4
1.3.4 src="sbhd_top.html" frameborder="0">表格标签

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


  • 在记事本中 src="sbhd_top.html" frameborder="0"></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>



1 3 5
1.3.5 我们看到,在页面中出现了一个五行三列的表格。下面我们来学习一下刚才输入到文档中的部分代码。先看一下强调文字标签

  • 我们先把表格中第一行三个单元格的文字设置为强调文字。强调文字的标签是<strong></strong>,使用方法是使用标签将文字对象包含在内即可。

  • 在记事本中,对表格第一行所在的三个<td>标签中的文字前后添加强调文字标签<strong>和</strong>


1 3 6
1.3.6 我们看到,在页面中出现了一个五行三列的表格。下面我们来学习一下刚才输入到文档中的部分代码。先看一下字体标签

  • 我们还需要对表格中的文字设置字体格式。我们使用<font></font>标签来进行设置。

  • 在记事本中,对表格第一行所在的三个<td>标签中的文字前后添加<font></font>标签,代码见下行:

  • <font size="3" color="#0000FF">……</font>

  • 对表格其余各行中的<td>标签中的文字前后添加<font></font>标签,代码见下行:

  • <font size="2">……</font>


1 3 7
1.3.7 我们看到,在页面中出现了一个五行三列的表格。下面我们来学习一下刚才输入到文档中的部分代码。先看一下链接标签

  • 设置文字的超级链接使用<a></a>标签。

  • 在记事本中,对表格中需要创建超级链接的文字前后添加<a>和</a>标签,代码见下行:

  • <a href="#">……</a>

  • 代码中的<a>标签设置了一个href属性,该属性用来指定超级链接的链接地址。本例中使用了#号,表示此链接是一个没有地址的空白虚链接,单击链接后页面不会跳转。

  • 需要创建超级链接的文字有:“全球青年创新之旅”、“皮影戏《三国演义》”、“彩绘创意秀”、“《春江花月夜》陆家嘴街道海派秧歌专场”。

  • 添加代码后记事本中内容如图 1.19所示。


1 3 8
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>标签的功能。


课后实训:使用我们看到,在页面中出现了一个五行三列的表格。下面我们来学习一下刚才输入到文档中的部分代码。先看一下HTML代码制作“上海世博网”的伊朗馆网页

  • 效果如图1.23所示。

  • 实训要求:

  • 使用表格标签<table>…</table>来布局网页。

  • 网页上部参考教材的操作步骤,导航采用空链接。

  • 正文中的“概况”、“设计理念”、“场馆主题”和“展馆风采”文本采用<h3>和项目符号<ul>的格式。

  • 正文中的大图片采用右对齐方式align="right"。

  • “展馆内景欣赏”图片采用向左滚动效果,参考代码:

  • <marquee onmouseover="this.stop()" onmouseout="this.start()" >…..</ marquee >

  • 6)实训素材见项目1素材。


ad