网页设计与制作实训指导书文档格式.docx

网页设计与制作实训指导书文档格式.docx

《网页设计与制作实训指导书文档格式.docx》由会员分享，可在线阅读，更多相关《网页设计与制作实训指导书文档格式.docx（17页珍藏版）》请在冰豆网上搜索。

不要随意开启来历不明的电子邮件或电子邮件附件。

6.使用计算机人员应爱护计算机、要按操作规程来操作、使用计算机等设备。

7.关机前应检查是否有U盘，如有，先取出，后开、关机。

需要使用U盘时，先用杀毒软件对U盘查、杀病毒，后使用。

8.禁止私自安装、修改、删除非文档文件。

如发现计算机出现异常现象，如：

速度特别慢、出现乱码、防毒软件报告有病毒等，应及时反映，并暂停使用。

9.保持计算机室及计算机的周边环境卫生，禁止在计算机旁吸烟、乱扔废纸和杂物、吃带皮食物。

10.禁止私自打开计算机主机，乱接线。

实训一查找网站并分析，尝试申请域名空间

　　1.背景知识

查找各类型网站并分析，分析网页布局和结构规划，网页常见布局形式有：

1.“T”型布局

2.“口”型布局

3．POP布局

根据本章所学的内容，尝试申请域名空间。

实训准备工作

保证internet连接畅通，学生主机安装相应的网页设计与制作软件：

dreamweaver、fireworks、flash、photoshop等。

　　2.实训要求

（1）上网浏览不同的电子商务网站，比如：

淘宝、联想等，分析站点结构、站点风格及网页配色等，写出分析报告。

（2）尝试申请域名空间。

　　3.课时安排：

2课时

　　4.实训指导

以中联网为例，详细介绍如何申请免费个人空间和域名。

1.打开浏览器，在地址栏上输入，如图2-36所示。

图2-36中联网主页

2.点击100M免费空间，弹出申请条款，开始申请免费个人主页空间。

核实它所给出的条款后，单击“我同意”按钮，出现图2-37所示的注册页面。

图2-37用户注册页面

3.所有信息都填好并核实无误后，单击提交按钮。

如果填的不正确，页面会给出提示，并要求重填。

注意该网站中户名只能用英文或数字。

4.注册成功后，会显示欢迎页面，等待管理员审核，如图2-38所示。

图2-38等待审核界面

5.单击“自助开通个人主页空间”字样，又重新弹出用户登录区，输入刚才注册的用户名和密码登录。

登录后，显示登录情况，如图2-39所示。

图2-39登录情况显示界面

6.然后单击页面左边“免费主页申请”按钮，出现审核通过界面，如图2-40所示。

它提示审核已经通过，可以开通个人空间了。

图2-40通过审核界面

7.单击“马上开通”字样，开通个人空间，出现图2-41所示页面。

在该页面中填写网站的名称，网站分类以及网站的简介，填好后单击“即时开通”按钮。

图2-41网站简介

8.即时开通后，出现图2-42所示页面。

该页面中给出了FTP登录用户名、FTP密码和FTP地址，这是上传网页时要用到的地址。

另外还给出了一个HTTP地址，这就是中联网提供给我们的主页的二级域名，在主页上传后，通过它可以访问个人主页。

这些地址和密码都要记录下来，用于后续操作。

至此，免费个人主页空间和域名已经申请好了。

图2-42开通主页资料

实训二练习制作第一个个人主页

1.背景知识

根据已经掌握的网络知识和本章学习的html语言的知识，编写简单网页的源代码；

浏览网站，分析网站的特点。

　　根据本章所学的内容，创建站点和创建个人主页。

2.实训准备工作

在本地硬盘创建一个空文件夹myweb，并建一个子文件夹images。

3.实训要求

（3）打开浏览器，浏览某个网页，查看其源代码，了解HTML代码的含义。

（4）打开记事本，试用HTML语言编写一个简单的网页，网页中要包含以下内容：

网页标题、文字、图像、超链接等。

（5）上网浏览不同的电子商务网站，比如：

（6）创建站点和创建网页　要求：

定义本地站点和新建一个网页并进行编辑。

4.课时安排：

5.实训指导

（1）如何查看网页源代码？

打开浏览器，点击“查看”菜单｜“源文件”命令。

（2）如何编写HTML代码？

打开记事本，手工编写HTML代码，注意HTML代码的编写顺序及网页元素对应的标签。

保存网页时，网页的后缀名为html或htm。

（3）略

（4）创建站点和制作简单个人主页

步骤1　定义本地站点，新建若干文件夹，如：

images、flash、templates等，有些文件夹可暂时为空，以备将来存放设定的内容。

步骤2　在定义好的站点下新建一个网页，第一个个人主页为index.htm或是index.html，输入文本，插入Flash动画和图像。

实训三练习文本、图像、超级链接

　　根据本章所学的文本编辑、图像及图像对象的插入、网站相册的创建、超链接的设置等知识进行网站的创建。

　　2.实训准备工作

　　将文本素材和图像素材准备好，发送到学生主机上，以供学生参考使用。

　　3.实训要求

创建一个以篮球为话题的网站，要求如下：

（1）编辑网站首页，效果图如图所示，包括有图像映射、鼠标经过图像、导航条。

（2）编辑其它内容网页并添加超链接，如图所示，其它页面中包括有图像和文本等，有一个网页中是明星的相册。

图篮球俱乐部首页

　　4.课时安排：

4课时，每一项实训要求为2课时

　　5.实训指导

（1）网站首页制作过程

步骤1　启动Dreamweaver，定义本地站点，新建一个网页，保存为index.htm。

步骤2　单击“属性”面板中的“页面属性”按钮，选择“常规”选项卡，设置背景图像为bg.gif，选择“标题／编码”选项卡，设置网页标题为“篮球俱乐部”。

步骤3　单击“插入”栏｜“常用”选项｜“图像”按钮，插入网站标志图像logo.gif，选中图像，单击“属性”面板中的矩形“热点”工具，在NBA标志图像上绘制矩形区域，在“属性”面板的链接框中输入链接地址：

，再单击多边形“热点”工具，在中国篮球标志图像上绘制多边形区域，在“属性”面板的链接框中输入链接地址：

，如图所示。

图篮球俱乐部内容页

图图像映射实例

步骤4　单击“插入”栏｜“常用”选项｜“表格”按钮，插入一个一行两列的表格，表格的宽度为770像素，单元格边距和间距为0，边框粗细为0。

把光标放在左边的那个单元格中，单击“插入”栏｜“常用”选项｜“图像”组｜“鼠标经过图像”按钮，弹出“插入鼠标经过图像”对话框，选择原始图像的文件路径、鼠标经过图像的文件路径，选中“预载鼠标经过图像”复选框，替换文本、URL链接地址设置为空，单击“确定”按钮。

步骤5　光标放在右边的那个单元格中，单击“插入”栏｜“常用”选项｜“图像”组｜“导航条”按钮，弹出“插入导航条”的对话框，分别设置导航条元件，每一个导航条元件有二幅图像：

状态图像、鼠标经过图像，在“按下时，前往的URL”文本框：

选择URL地址，在插入下拉列表中选择垂直，导航条垂直排列，选择“使用表格”复选框，单击“确定”按钮，完成。

（2）创建网站相册

选择“命令”菜单｜“创建网站相册”命令，弹出“创建网站相册”对话框，进行相关参数的设置，单击“确定”按钮，启动Fireworks，批处理图像。

（3）其它网页的制作（略）

（4）添加网页之间的超链接

实训四表格设计

　　根据本章所学的网页布局、时间轴及行为的知识，再综合前面所学的创建站点及编辑网页的知识，进行网页不同排版方式的练习。

　　实训素材和网页草图发送到学生的主机中，以供学生参考使用。

（1）根据网页草图1，如图所示，利用表格设计网页布局，在单元格中添加网页元素。

图表格排版网页草图

（1）表格设计网页布局

步骤1　首先创建一个本地站点，新建一个文档（其余几个实训是一样的，这是必须的一个步骤），然后单击“属性”面板中的“页面属性”按钮，弹出“页面属性”对话框，单击“跟踪图像”选项卡，将草图导入到跟踪图像中，改变透明度为50%。

步骤2　选择“插入”栏｜“布局”选项｜“布局模式”按钮，切换到布局模式，单击“布局表格”按钮，绘制三个表格（上中下），表格的宽度与草图总的宽度相同：

853，每一个布局表格左侧插入布局单元格，单元格的宽度与绿色色块相同：

161，如图所示。

步骤3　插入网页元素。

最后打开“页面属性”对话框，删除跟踪图像，保存网页。

图利用表格布局网页结构图

实训五框架页面设计实训六层和动画的制作

1.背景知识

2.实训准备工作

3.实训要求

（1）根据网页草图，如图所示，利用层设计网页布局，并向层中添加网页元素。

图　层排版网页草图

（2）在上一步的基础上，利用时间轴和行为添加网页动态效果：

飘动的图片、弹出信息和打开浏览器窗口。

　　（3）根据网页草图，如图所示，利用框架设计网页布局，左框架中是导航条，上框架中插入图片和FLASH动画，主框架中插入图片和文本。

图框架排版网页草图

　　5.课时安排：

2课时。

　　6.实训指导

（1）层设计网页布局

步骤1　创建本地站点，创建一个HTML文档，在“页面属性”中插入跟踪图像，单击“插入”栏｜“布局”｜“绘制层”按钮，共绘制7层，注意层的排列位置、叠放顺序，如图所示。

图层布局图

步骤2　根据草图，在各层内插入相应的网页元素。

保存网页，浏览网页效果。

（2）在上一步的基础上继续制作网页动态效果

1）特效1　随时间飘动的图标　

步骤1　首先插入一个层，在层内插入一幅图像。

步骤2　选中层，选择“修改”菜单｜“录制层路径”命令，拖动层随心所欲地移动，最后回到起点。

步骤3　在“时间轴”面板中选择“自动播放”和“循环”两个复选框。

2）特效2　弹出信息

步骤1　选择“窗口”菜单｜“行为”命令，打开“行为”面板，选中特效1中已插入的层，单击“行为”面板中的“添加行为”按钮，选中“弹出信息”命令，在“弹出信息”对话框中输入“欢迎光临汽车沙龙”，单击“确定”按钮。

步骤2　在“行为”面板中，选中事件为“onclick”。

3）特效3　打开浏览窗口

步骤1　新建一个网页，在网页中输入文本，插入图像，网页内容相对简单，集中在网页的左上部，保存为guanggao.htm。

步骤2　打开

（2）中用层布局的网页，单击“文档”窗口左下角的<

body>

标签，单击“行为”面板中“添加行为”按钮，选择“打开浏览器窗口”命令，在“打开浏览器窗口”对话框中，输入网页地址guanggao.htm，定义窗口大小及其它属性，单击“确定”按钮。

步骤3　在“行为”面板中，选择事件为“onload”。

（3）框架设计网页布局

框架布局图，如图所示。

步骤1　分别制作三个网页分别为：

top.htm、left.htm、main.htm，注意这三个网页中所包含的网页内容：

top.htm包括的是标志，left.htm包括的是导航条，main.htm包括的是文本和图像内容。

步骤2　选择“文件”菜单｜“新建”命令，在“新建文档”对话框中，单击“常规”选项卡，选择“框架集”中的“上方固定，左侧嵌套”的样式。

步骤3　打开“框架”面板，然后选中topFrame框架，在“属性”面板中设置“框架”属性，在“源文件”文本框中输入top.htm。

同理选中leftFrame框架、mainFrame框架分别设置“框架”属性，将网页路径分别为：

left.htm和main.htm，将各个框架页面链接到框架集中。

图框架布局图

图top.htm

步骤4　单击左框架内，选中导航条按钮，在“属性”面板中添加超链接地址：

main0.htm，第二个导航栏按钮的链接地址为：

main.htm，这两个超链接的链接目标均为mainFrame。

步骤5　鼠标指标放在框架边框处，调整各框架的显示范围，或选中“框架集”，在“属性”面板中，设置框架的行高或列宽，调整框架显示范围。

步骤6　打开“框架”面板，选择“文件”菜单｜“保存框架页”或“框架集另存为”命令，保存框架集。

图left.htm

　图main.htm

实训七网页的美化

根据本章所学的CSS样式表的知识，再综合前面所学的创建站点及编辑网页的知识，制作精美的网页及应用CSS扩展功能。

　　实训素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。

（1）利用CSS样式表制作精美的网页，如图所示。

图网页效果图

要求：

根据给定的素材，首先设置页面属性　其次定义特定Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入内容，最后通过定义类，设置图像CSS样式。

（2）

图滤镜效果

在网页中添加CSS扩展效果：

滤镜

制作：

投影字体、发光字体、图像的透明效果、图像的波浪效果等，如图所示。

（1）利用CSS样式表制作精美的网页

步骤1新建一个本地站点，站点内新建两个子文件夹，images和CSS，将图像素材保存到images文件夹。

新建一个网页，保存为index.htm。

步骤2页面属性的设置：

单击“属性”面板中的“页面属性”按钮，在“页面属性”对话框中，设置背景图像：

images/bg.jpg，页边距均为0，设置字体大小为12像素，字体颜色为灰色（#666666）。

步骤3在“CSS样式”面板中，单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，选择器类型：

高级，“选择器”文本框中输入#image01（这个区域用于放置图像），定义在：

“新建样式文件”，保存样式文件在css文件夹中，命名为main.css。

弹出“#images01的CSS规则定义”对话框，单击“方框”选项卡，宽度为200像素，浮动为左对齐，填充均为3像素，边界：

上为500像素，左为30像素，右和下均为30，选择“区块”选项卡，文本对齐：

居中。

步骤4新建一个#content选择器样式，定义在main.css文件。

弹出“#content的CSS规则定义”对话框，单击“类型”选项卡，行高为20像素，单击“区块”选项卡，文本缩进：

20像素，单击“方框”选项卡，宽度：

600像素，填充均为30像素，边界：

上为200像素，左为320，右和下均为30。

步骤5重定义标签H1：

单击“类型”选项卡，字体大小24像素，行高35像素，粗细为特粗，颜色为深绿色009900。

步骤6重定义标签img：

单击“方框”选项卡，填充均为3，边框均设置：

样式：

实线，宽度1像素，颜色为灰色（#999999）

步骤7插入两个DIV标签，ID分别为image01和content，然后在image01中插入两幅图像，在content中输入文本，完成。

　　（3）在网页中添加CSS扩展效果：

步骤1　新建一个类dropshadow，单击“扩展”选项卡，在“滤镜”下拉列表中选择dropshadow，参数设置DropShadow（Color=#000000,offx=2,offy=2,Positive=45），可以设置为不同的参数效果不同。

步骤2插入一个表格，在单元格中输入文字，选中单元格，在“属性”面板中选择类：

dropshadow。

步骤3　新建一个类glow，参数设置为：

Glow（Color=#ffff00,Strength=5），然后在单元格中输入文本，选中单元格，套用类的样式。

步骤4　新建一个类wave，参数设置为：

Wave（Add=0,Freq=5,LightStrength=5,strength=5），插入图像，选中图像套用类样式。

步骤5　新建一个类chroma，参数设置为：

Chroma（Color=#ff0000），插入图像，选中图像套用类样式。