网页设计 公用14级计算机网络1班 教学日志.docx

《网页设计 公用14级计算机网络1班 教学日志.docx》由会员分享，可在线阅读，更多相关《网页设计 公用14级计算机网络1班 教学日志.docx（135页珍藏版）》请在冰豆网上搜索。

网页设计公用14级计算机网络1班教学日志

广州市公用事业高级技工学校

天河校区

2014~2015学年第二学期

教学日志

课程名称：

网页设计

授课教师：

段嘉腾

第一周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期一节次：

第3、4节教室号：

实405

项目

内容

备注

课程名称

网页设计

授课内容

§1.1学习任务：

网页和网站基本知识

一、网页和网站概述：

互联网是一个蕴藏着无穷资源的宝库，在资源共享和信息交换方面具有得天独厚的优势，网页正是这些资源和信息重要的传递载体。

v1．网页

浏览Web时所看到的文件称为Web页，又称为网页。

网页可以将不同类型的多媒体信息（包括文字、图像、动画、声音、视频等）组合在一个文档中。

由于这些文档是用超文本标记

言表示的，其文件名一般是以.html或.htm结尾，因此又语称为HTML文档或超文本。

v2．网站

根据提供服务的不同，通常把提供网页服务的服务器称为多Web服务器，相关网站称为Web站点。

一个Web站点由一个或个Web页组成，这些Web页相互连接在一起，存放在Web服务器上，以供浏览者访问。

网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、雅虎等。

网站是由很多网页链接在一起组成的。

用户浏览到一个网站时看到的第一个页面叫做主页。

从主页出发，可以访问到本网站的每一个页面，也可以链接到其他网站，方便地共享网站资源。

二、网页的主要元素

网页包括的主要元素有：

文本、图像、动画、导航栏、超链接、表格、表单等。

v1．文本

文本是人类最重要的信息载体和交流工具，网页的主体一般以文本为主。

制作网页时，可以根据需要设置文本的字体、字号、颜色、样式等属性，风格独特的网页文本设置会给浏览者赏心悦目的感觉。

v2．图像

图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等功效。

图像可以用作网页的标题、网站Logo、网页背景、链接按钮、导航栏、网页主图等。

v3．动画

动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。

如果网页中存有太多的动画，会使浏览者眼花缭乱，无心细看。

所以，对动画制作的要求越来越高。

在网页中加入的动画一般是GIF格式的动画和Flash动画等。

v4．导航栏

导航栏是网站设计者在规划网站结构时必须考虑的一个问题，站点的每个网页上均应设置导航栏，并且应将其放置在网页中比较明显的位置。

设置导航栏的目的是使浏览者能够顺利地浏览网页，方便地返回主页或继续下一页的访问。

导航栏可以是文本、按钮或图像的样式。

v5．超链接

超链接是网页中最为有用的功能之一。

超链接是从一个网页指向另一个网页的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。

v6．表格

网页中的表格是一种用于控制网页页面布局的有效方法。

为了达到理想的视觉效果，通常不显示表格的边框。

使用表格辅助布局，可以实现网页横竖分明的风格。

v7．表单

表单是一种特殊的网页元素，通常用于收集信息或实现一些交互式的效果。

表单的主要功能是接收浏览者在浏览器的输入信息，然后将这些信息发送到服务器端。

课堂情况

班级人数：

52实到人数：

52

请假人数：

0迟到人数：

2

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第一周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期三节次：

第1、2节教室号：

实207

项目

内容

备注

课程名称

网页设计

授课内容

三、网页类型

网页分为静态网页和动态网页两种类型。

静态网页就是设计者做什么样，在客户端浏览时就显示什么样，而动态网页可以根据不同的用户显示不同的页面。

1.静态网页：

纯粹HTML格式的网页通常称为“静态网页”。

静态网页的基本特点归纳如下：

v静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀，而不含有“？

”。

v网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。

v静态网页的内容相对稳定，因此容易被搜索引擎检索。

v静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。

静态网页的交互性较差，在功能方面有较大的限制

2．动态网页

采用了动态网页技术，在服务器端运行的网页和程序属于动态网页，它们会根据编写的程序访问数据库动态地生成页面。

动态网页文件的后缀一般都是.asp、.aspx、.php、.jsp。

动态网页的优点是效率高、更新快、移植性强，可以根据先前所制定好的程序页面，根据用户的不同请求返回其相应的数据，从而达到资源的最大利用和节省服务器上的物理资源。

由此可见，静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。

如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之，一般要采用动态网页技术来实现。

四、静态网页编辑软件

1．FrontPage

2．Dreamweaver

五、网页图像与网页动画制作软件

1．Photoshop

2．Fireworks

3．Flash

§1.2学习任务：

网站开发的基本流程

网站开发的基本流程包括5个阶段:

看下图

一、需求分析

使网站建设满足用户的要求。

二、网站规划

网站规划是网站开发必不可少的重要一环，直接关系到整个网站的整体风格、布局结构等。

网站规划包含的内容很多，如网站的主题、网站栏目、结构层次、连接内容、颜色搭配、网站Logo、版面布局及文字图片的运用等。

1．确定网站主题

根据网站设计目的和用户需求来确定网站的主题是非常重要的。

网站的主题就是网站所要包含的主要内容，例如，旅游、娱乐休闲、体育、新闻、教育、医疗、时尚等。

要求网站的主题鲜明突出，要点明确，需要按照客户的要求，以简单明确的语言和页面体现网站的特色，并调用一切手段充分表现网站的个性，办出网站的特色，这样才能给浏览者留下深刻的印象。

2．目录结构设计

可以用树状结构先把每个页面的内容大纲列出来，尤其当制作一个很大的网站时，特别需要把这个架构规划好。

图1-3是一个网站的栏目结构图。

大纲列出来后，还必须考虑每个页面之间的链接关系，这也是一个网站优劣的重要标志。

链接混乱、层次不清的站点会导致浏览困难，影响网页内容的发挥。

课堂情况

班级人数：

52实到人数：

50

请假人数：

0迟到人数：

3

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第一周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期五节次：

第1、2节教室号：

2304

项目

内容

备注

课程名称

网页设计

授课内容

3．网页色彩搭配

色彩是人的视觉最敏感的东西。

主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。

色彩总的应用原则应该是“总体协调，局部对比”，也就是：

主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。

在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。

4．网站Logo

Logo是与其它网站链接以及让其它网站链接的标志和门户。

Logo最重要的作用就是表达网站的理念、便于人们识别，被广泛地应用于站点的链接和宣传。

设计Logo的原则：

以简洁的、符号化的视觉艺术把网站的形象和理念展示出来。

5．版面布局

版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。

因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素，800*600像素，1024*768像素等不同尺寸。

网站经常用到的版面布局形式：

1、“T”结构布局2、“口”型布局

3、“三”型布局4、POP布局

三、网站制作

规划好网站后，就要开始设计并制作网站。

设计网页是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂次序来进行制作。

所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。

所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出现问题时好修改。

制作网页包括网页素材的收集、主页设计、引用图片、网页排版、背景及其整套网页的色调等。

1．收集素材2．主页设计3．引用图片

4．网页排版5．网页背景6．其他

四、网站的测试与上传

Web网站制作完成以后，并不能直接投入运行，而必须进行全面、完整的测试，包括本地测试、网络测试等多个环节。

五、网站的推广与维护

六、作业

浏览网页说明哪些网站属于哪些布局，颜色搭配的效果，及属于静态网站还是动态网站。

课堂情况

班级人数：

52实到人数：

48

请假人数：

0迟到人数：

5

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第二周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期一节次：

第3、4节教室号：

实405

项目

内容

备注

课程名称

网页设计

授课内容

§1.3学习任务：

全面认识DreamweaverCS5

一、DreamweaverCS5简介

Dreamweaver是网页设计与制作领域中用户最多、应用最应广、功能最强的软件。

DreamweaverCS5将可视布局工具、用程序开发功能和代码编辑支持组合在一起，无论开发者是手工编写HTML代码，还是在可视化编辑环境中进行编辑，DreamweaverCS5都会提供有用的工具，使用户拥有更加完善的Web创作体验，备受专业Web开发人员的喜爱。

二、DreamweaverCS5工作界面介绍

1．启动DreamweaverCS5后，选择新建，可得下图

1．菜单栏

2．文档窗口

3．状态栏

4．“属性”面板

5．面板组

课堂情况

班级人数：

52实到人数：

45

请假人数：

0迟到人数：

2

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第二周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期三节次：

第1、2节教室号：

实207

项目

内容

备注

课程名称

网页设计

授课内容

§1.4学习任务：

创建和管理本地站点

一、规划站点

在做任何事情之前都应该制定工作计划并画出工作流程图，建立站点也是如此。

在定义站点前首先要做好站点的规划，包括站点的目录结构、链接结构、模板和库的使用等。

网站的目录结构是网站组织和存放站内所有文档的目录设置情况。

目录结构的好坏，直接影响站点的管理和维护，以及内容信息未来的扩充和移植。

二、创建本地站点

本地站点实际上是位于本地计算机中指定目录下的一组页面文件及相关支持文件。

每个网站都需要有自己的本地站点。

DreamweaverCS5提供了创建站点的向导，使得初学者能快速正确地完成站点的创建。

三、管理本地站点

建立站点后，可以对站点进行编辑、复制、删除、导入、导出等操作。

1．编辑站点

2．复制站点

3．删除站点

4．导出与导入站点

课堂情况

班级人数：

52实到人数：

50

请假人数：

0迟到人数：

3

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第二周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期五节次：

第1、2节教室号：

2304

项目

内容

备注

课程名称

网页设计

授课内容

四、操作本地站点文件

在“文件”窗口中选中创建的站点，单击右键弹出的快捷菜单。

选择“新建文件”，将在选中的站点中新建文件；选择“新建文件夹”，将创建一个新的文件夹；选中“编辑”菜

单命令，在打开的级联式菜单中，可以对站点中的文件或文件夹进行剪切、复制、删除、重命名等操作。

五、作业

课后31页：

一、熟悉DreamweaverCS5操作环境。

二、创建本地站点及简单个人页面。

课堂情况

班级人数：

52实到人数：

48

请假人数：

0迟到人数：

5

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第三周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期一节次：

第3、4节教室号：

实405

项目

内容

备注

课程名称

网页设计

授课内容

§1.5学习任务：

HTML标识语言基础

HTML是一种构成网页基本结构的标记语言，是网页设计中的基础。

在浏览器中，任何HTML标记都看不到，但是在浏览器中所看到的网页效果都是由HTML标记生成的。

在大多数情况下，像在Dreamwear这样的网页编辑软件中，HTML的处理是在后台进行的，因而就掩盖了该语言的复杂性。

一、HTML概述

1．认识HTML

HTML是在标准通用标签语言SGML（StandardGeneralizedMarkupLanguage）定义下的一个描述性语言，是SGML的一个子集。

2．HTML制作工具及显示原理

HTML语言作为一种标识性的语言，是由文本和标签构成的，HTML文档的扩展名为.html或.htm。

制作HTML文档需要两个基本工具，一个是HTML编辑器，一个是Web浏览器。

HTML编辑器用来生成和保存HTML文档，Web浏览器用来浏览和测试HTML文档。

二、HTML的基本语法

HTML的语法主要由标签符（Tag）和属性（Attribute）组成。

所有标签符都由一对尖括号“<”和“>”围住。

1．一般标签

一般标签由一个起始标签（OpeningTag）和一个结束标签（EndingTag）组成，其语法格式为：

受控内容其中，x代表标签名称，为起始标签，为结束标签，结束结束前应有一个斜杠。

例如，如果使文本内容成为斜体字，可以使用标签…；如果使文本内容成为一级标题，可以使用标签

…

另外，还有许多常用的标签，如，…、…等。

在标签之中可以附加一些属性（Attribute），用来完成某些特殊效果或功能。

大多数标签的起始标签内可以包含一些属性，属性是可选的，不写即使用默认值。

不同属性间用空格分隔，属性值要加双引号，其语法形式为：

<标签名称属性1属性2属性3…>受控内容

也可以写为：

受控内容

其中，a1、a2、…、an为属性名称，v1、v2、…、vn是属性名称对应的属性值。

2．空标签

大部分标签是成对出现的，但也有一些是单独存在的，这些单独存在的标签称为空标签（EmptyTags）。

空标签的语法形式非常简单，只需要直接写<标签名称>即可。

最常见的空

标签有

其中，

空标签也可以附加一些属性，用来完成某些特殊效果或功能，一般形式为：

课堂情况

班级人数：

52实到人数：

48

请假人数：

0迟到人数：

3

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第三周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期三节次：

第1、2节教室号：

实207

项目

内容

备注

课程名称

网页设计

授课内容

三、HTML的文档结构

HTML文件的主体结构由、和三个标签组成。

下面是一个典型的HTML文件结构：

头部信息：

如标签之间指定了网页的标题；标签用于提供HTML网页的字符编码、关键字、描述、作者、自动刷新等多种信息。

（3）…标签之间是网页的主体部分，包括网页所有要显示的文本、图像、表格等信息和用于控制这些信息的标记符。

在…标签之间，一般含有其他标签，这些标签和属性构成了HTML网页的主体部分。

标签包含如下常用属性：

bgcolor属性：

用于设置HTML网页的背景颜色，例如，表示背景颜色设置为红色。

background属性：

用于设置HTML网页的背景图片，例如，表示将图片tu.jpg设置为HTML网页的背景。

text属性：

用于设置HTML网页的文本颜色。

使用text定义的颜色将应用于整篇文档。

例如，表示文本颜色设置为红色。

link、alink、vlink属性：

用于分别设置普通超链接、当前活动的超链接、已访问的超链接文本的颜色。

例如，

topmargin、leftmargin属性：

用于设置网页主体内容与网页顶端、左端的距离。

例如，。

课堂情况

班级人数：

52实到人数：

50

请假人数：

0迟到人数：

3

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第三周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期五节次：

第1、2节教室号：

2304

项目

内容

备注

课程名称

网页设计

授课内容

§1.6应用实例——制作一个简单的网页

本节通过介绍一个简单的网页实例制作过程，希望用户掌握网页制作的一般流程，掌握HTML的文档结构等。

一、创建本地站点

在开始制作网页之前，首先定义一个本地站点。

一个网站一般包含很多图像、网页文件和Flash动画，因此，建立站点的实质就是在硬盘上建立一个文件夹，将网站内的所有网页与相关的文件均存放在该文件夹之中，以便进行网页的制作与管理。

二、建立站点文件夹

在已经建好的网点中，一般需要建立一些子文件夹，用于分类存放网站中的图像、动画、网页等文件。

本例创建一个images文件夹，用于存放图像文件。

三、创建并制作网页

主页是浏览者登录网站后显示的第一个页面，主页文件一般命名为index.htm。

其他网页文件应放在指定的子文件夹下，方便管理。

四、设置页面属性

网页页面属性主要包括网页标题、网页背景图像与颜色、文本与超链接颜色、页边距等。

选择“修改→页面属性”菜单命令，或者单击“属性”面板中的“页面属性”按钮均能打开“页面属性”对话框。

五、保存并在IE中浏览网页文档

浏览网页文档之前需对网页文档进行保存。

保存网页类似于大多数软件中的保存命令，可以分为“保存”和“另存为”两种方式。

作业：

练习创建本地站点和站点的管理

利用DreamweaverCS5创建简单的网页文档

练习HTML页面的浏览方法

练习“页面属性”的设置方法

课堂情况

班级人数：

52实到人数：

48

请假人数：

0迟到人数：

5

其它情况：

课堂纪律

√优□中□良（打“√”）

授课心得

教师签名：

段嘉腾

第四周教学日志

2014~2015学年第二学期

班级：

14公用计网1班星期一节次：

第3、4节教室号：

实405

项目

内容

备注

课程名称

网页设计

授课内容

§2.1案例1应用文本——制作文本网页

一、直接输入文本

直接输入文本类似于在多数文本编辑软件中进行的文本输入操作，只需将鼠标光标定位在需插入文本的位置，选择所需的输入法后进行输入文本即可。

在DreamweaverCS5中默认只能键入一个空格，如果要键入多个连续的空格，请选择“插入→HTML→特殊字符→不换行空格”菜单命令，或者按下〈Ctrl+Shift+Space〉组合键直接添加空格。

具体操作步骤如下：

1）启动DreamweaverCS5，新建一个HTML文档，以“2-1.html”为文件名保存文档。

2）在文档窗口中，将鼠标光标定位在文档起始位置，选择输入法并键入文字“古代诗歌鉴赏”，文字间用空格分隔。

在“代码”视图可以看到一个空格会自动对应一组替代字符“ ”。

3）在输入的文字后按下〈Enter〉键换行，建立了新的段落，换行符对应的是一个

标签，然后输入新段落的文本。

二、复制添加其它文档中的文本

可以利用系统剪贴板将其他文档中的文本粘贴到网页文档中。

继续上面的操作：

1）打开已经准备好的文本文档，选中需要复制的文本内容，按下〈Crtl+C〉组合键将选中的内容复制到剪贴板中。

2）在DreamweaverCS5的“设计”窗口中，将光标置于合适的位置，按下〈Crtl+V〉组合键将剪贴板中的内容粘贴到页面中。

也可以选择“编辑→选择性粘贴”菜单命令，或者按下组合键〈Crtl+Shift+V〉，打开“选择性粘贴”对话框，如图2-4所示，从中选择一种“粘贴为”方式。

3）本例只需要粘贴不带任何格式的文本内容，于是只选择了“仅文本”选项，然后单击【确定】按钮。

外，DreamweaverCS5可以将XML文档、表格式数据、Word及Excel等文档中的完整内容直接导入到页面中。

下面，以导入Word文档为例说明：

选择“文件→导入→Word文档”菜单命令打开“导入Word文档”对话框，选定要导入的Word文档，在“格式化”下拉列表中选择“仅导入文本”或是保留结构与格式，点击【打开】按钮即可导入文档。

向页面中导入的外部文档往往包含了一些多余的代码，可以通过清除冗余代码功能来清除它们。

方法是：

选择“命令→清理Word生成的HTML”菜单命令，打开“清理Word生成的HTML文档”对话框。

对整篇网页也可执行清理命令，选择“命令→清XHTML”菜单命令，打开“清理HTML/XHTML”对话框，选理择要清除的选项，单击【确定】