网页设计及制作实训指导书

1、-网页设计实训指导书主编：2021年 3 月目 录网页设计实验实训室设备使用平安守则2实训一查找并分析，尝试申请域名空间3实训二练习制作第一个个人主页7实训三练习文本、图像、超级8实训四表格设计10实训五框架页面设计实训六层和动画的制作11实训七网页的美化14网页设计实验实训室设备使用平安守则1.严禁在实验室使用明火、用电充电及取暖等。 2.机房应成为精神文明的良好工作场所，室不得大声喧闹。非机房有关人员不得随意进入机房。3.不要随便尝试不明的或不熟悉的计算机操作步骤。遇到计算机发生异常而自己无法解决时，请专业教师解决。4.不要随便运行或删除电脑上的文件或程序，不要随意计算机参数等。5.不要随

2、便安装或使用不明来源的软件或程序。不要随意开启来历不明的电子或电子。6.使用计算机人员应保护计算机、要按操作规程来操作、使用计算机等设备。7.关机前应检查是否有U盘，如有，先取出，后开、关机。需要使用U盘时，先用杀毒软件对U盘查、杀病毒，后使用。8.制止私自安装、修改、删除非文档文件。如发现计算机出现异常现象，如：速度特别慢、出现乱码、防毒软件报告有病毒等，应及时反映，并暂停使用。9.保持计算机室及计算机的周边环境卫生，制止在计算机旁吸烟、乱扔废纸和杂物、吃带皮食物。10.制止私自翻开计算机主机，乱接线。实训一 查找并分析，尝试申请域名空间1. 背景知识查找各类型并分析，分析网页布局和构造规划

3、，网页常见布局形式有：1. “T型布局2. “口型布局3POP布局根据本章所学的容，尝试申请域名空间。实训准备工作保证internet连接畅通，学生主机安装相应的网页设计与制作软件：dreamweaver、fireworks、flash、photoshop等。2. 实训要求 (1) 上网浏览不同的电子商务，比方：淘宝、联想等，分析站点构造、站点风格及网页配色等，写出分析报告。 (2) 尝试申请域名空间。3. 课时安排：2课时4. 实训指导以中联网.3326.为例，详细介绍如何申请免费个人空间和域名。1. 翻开浏览器，在地址栏上输入.3326.，如图2-36所示。图2-36 中联网主页2. 点击

4、100M免费空间，弹出申请条款，开场申请免费个人主页空间。核实它所给出的条款后，单击“我同意按钮，出现图2-37所示的注册页面。图2-37 用户注册页面3. 所有信息都填好并核实无误后，单击提交按钮。如果填的不正确，页面会给出提示，并要求重填。注意该中户名只能用英文或数字。4. 注册成功后，会显示欢送页面，等待管理员审核，如图2-38所示。图2-38 等待审核界面5. 单击“自助开通个人主页空间字样，又重新弹出用户登录区，输入刚刚注册的用户名和密码登录。登录后，显示登录情况，如图2-39所示。图2-39 登录情况显示界面6. 然后单击页面左边“免费主页申请按钮，出现审核通过界面，如图2-40所

5、示。它提示审核已经通过，可以开通个人空间了。图2-40 通过审核界面7. 单击“马上开通字样，开通个人空间，出现图2-41所示页面。在该页面中填写的名称，分类以及的简介，填好后单击“即时开通按钮。图2-41 简介8. 即时开通后，出现图2-42所示页面。该页面中给出了FTP登录用户名、FTP密码和FTP地址，这是上传网页时要用到的地址。另外还给出了一个HTTP地址，这就是中联网提供应我们的主页的二级域名，在主页上传后，通过它可以个人主页。这些地址和密码都要记录下来，用于后续操作。至此，免费个人主页空间和域名已经申请好了。图2-42 开通主页资料实训二 练习制作第一个个人主页1.背景知识根据已经

6、掌握的网络知识和本章学习的html语言的知识，编写简单网页的源代码；浏览，分析的特点。根据本章所学的容，创立站点和创立个人主页。2.实训准备工作保证internet连接畅通，学生主机安装相应的网页设计与制作软件：dreamweaver、fireworks、flash、photoshop等。在本地硬盘创立一个空文件夹myweb，并建一个子文件夹images。3.实训要求 (3) 翻开浏览器，浏览*个网页，查看其源代码，了解HTML代码的含义。 (4) 翻开记事本，试用HTML语言编写一个简单的网页，网页中要包含以下容：网页标题、文字、图像、超等。 (5) 上网浏览不同的电子商务，比方：淘宝、联想

7、等，分析站点构造、站点风格及网页配色等，写出分析报告。 (6) 创立站点和创立网页要求：定义本地站点和新建一个网页并进展编辑。4.课时安排：2课时5.实训指导(1) 如何查看网页源代码.翻开浏览器，点击“查看菜单“源文件命令。(2) 如何编写HTML代码.翻开记事本，手工编写HTML代码，注意HTML代码的编写顺序及网页元素对应的标签。保存网页时，网页的后缀名为html或htm。(3) 略(4) 创立站点和制作简单个人主页步骤1定义本地站点，新建假设干文件夹，如：images、flash、templates等，有些文件夹可暂时为空，以备将来存放设定的容。步骤2在定义好的站点下新建一个网页，第一

8、个个人主页为inde*.htm或是inde*.html，输入文本，插入Flash动画和图像。实训三 练习文本、图像、超级1. 背景知识根据本章所学的文本编辑、图像及图像对象的插入、相册的创立、超的设置等知识进展的创立。2. 实训准备工作将文本素材和图像素材准备好，发送到学生主机上，以供学生参考使用。3. 实训要求创立一个以篮球为话题的，要求如下：1编辑首页，效果图如下图，包括有图像映射、鼠标经过图像、导航条。2编辑其它容网页并添加超，如下图，其它页面中包括有图像和文本等，有一个网页中是明星的相册。图 篮球俱乐部首页4. 课时安排：4课时，每一项实训要求为2课时5. 实训指导（） 首页制作过程步

9、骤1启动Dreamweaver，定义本地站点，新建一个网页，保存为inde*.htm。步骤2单击“属性面板中的“页面属性按钮，选择“常规选项卡，设置背景图像为bg.gif，选择“标题编码选项卡，设置网页标题为“篮球俱乐部。步骤3单击“插入栏“常用选项“图像按钮，插入标志图像logo.gif，选中图像，单击“属性面板中的矩形“热点工具，在NBA标志图像上绘制矩形区域，在“属性面板的框中输入地址：.nba.，再单击多边形“热点工具，在中国篮球标志图像上绘制多边形区域，在“属性面板的框中输入地址：..，如下图。图 篮球俱乐部容页图 图像映射实例步骤4单击“插入栏“常用选项“表格按钮，插

10、入一个一行两列的表格，表格的宽度为770像素，单元格边距和间距为0，边框粗细为0。把光标放在左边的那个单元格中，单击“插入栏“常用选项“图像组“鼠标经过图像按钮，弹出“插入鼠标经过图像对话框，选择原始图像的文件路径、鼠标经过图像的文件路径，选中“预载鼠标经过图像复选框，替换文本、URL地址设置为空，单击“确定按钮。步骤5光标放在右边的那个单元格中，单击“插入栏“常用选项“图像组“导航条按钮，弹出“插入导航条的对话框，分别设置导航条元件，每一个导航条元件有二幅图像：状态图像、鼠标经过图像，在“按下时，前往的URL文本框：选择URL地址，在插入下拉列表中选择垂直，导航条垂直排列，选择“使用表格复选

11、框，单击“确定按钮，完成。（） 创立相册选择“命令菜单“创立相册命令，弹出“创立相册对话框，进展相关参数的设置，单击“确定按钮，启动Fireworks，批处理图像。（） 其它网页的制作略（） 添加网页之间的超实训四 表格设计1. 背景知识根据本章所学的网页布局、时间轴及行为的知识，再综合前面所学的创立站点及编辑网页的知识，进展网页不同排版方式的练习。2. 实训准备工作实训素材和网页草图发送到学生的主机中，以供学生参考使用。3. 实训要求(1) 根据网页草图1，如下图，利用表格设计网页布局，在单元格中添加网页元素。图 表格排版网页草图4. 实训指导(1) 表格设计网页布局步骤1首先创立一个本地站

12、点，新建一个文档其余几个实训是一样的，这是必须的一个步骤，然后单击“属性面板中的“页面属性按钮，弹出“页面属性对话框，单击“跟踪图像选项卡，将草图导入到跟踪图像中，改变透明度为50%。步骤2选择“插入栏“布局选项“布局模式按钮，切换到布局模式，单击“布局表格按钮，绘制三个表格上中下，表格的宽度与草图总的宽度一样：853，每一个布局表格左侧插入布局单元格，单元格的宽度与绿色色块一样：161，如下图。步骤3插入网页元素。最后翻开“页面属性对话框，删除跟踪图像，保存网页。绿色色块公司标志导航栏广告横幅绿色色块公司简介一个布局表格，左侧插入一个布局单元格一个布局表格，左侧插入一个布局单元格一个布局表格

13、，左侧插入一个布局单元格图 利用表格布局网页构造图实训五 框架页面设计 实训六 层和动画的制作1. 背景知识根据本章所学的网页布局、时间轴及行为的知识，再综合前面所学的创立站点及编辑网页的知识，进展网页不同排版方式的练习。2. 实训准备工作实训素材和网页草图发送到学生的主机中，以供学生参考使用。3. 实训要求1根据网页草图，如下图，利用层设计网页布局，并向层中添加网页元素。图层排版网页草图(2) 在上一步的根底上，利用时间轴和行为添加网页动态效果：飘动的图片、弹出信息和翻开浏览器窗口。(3) 根据网页草图，如下图，利用框架设计网页布局，左框架中是导航条，上框架中插入图片和FLASH动画，主框架

14、中插入图片和文本。图 框架排版网页草图5. 课时安排：2课时。6. 实训指导(1)层设计网页布局步骤1创立本地站点，创立一个HTML文档，在“页面属性中插入跟踪图像，单击“插入栏“布局“绘制层按钮，共绘制7层，注意层的排列位置、叠放顺序，如下图。层1层2层3层4层5层6层7图 层布局图步骤2根据草图，在各层插入相应的网页元素。保存网页，浏览网页效果。(2) 在上一步的根底上继续制作网页动态效果1） 特效1随时间飘动的图标步骤1首先插入一个层，在层插入一幅图像。步骤2选中层，选择“修改菜单“录制层路径命令，拖动层随心所欲地移动，最后回到起点。步骤3在“时间轴面板中选择“自动播放和“循环两个复选框

15、。2） 特效2弹出信息步骤1选择“窗口菜单“行为命令，翻开“行为面板，选中特效1中已插入的层，单击“行为面板中的“添加行为按钮，选中“弹出信息命令，在“弹出信息对话框中输入“欢送光临汽车沙龙，单击“确定按钮。步骤2在“行为面板中，选中事件为“onclick。3） 特效3翻开浏览窗口步骤1新建一个网页，在网页中输入文本，插入图像，网页容相对简单，集中在网页的左上部，保存为guanggao.htm。步骤2翻开2中用层布局的网页，单击“文档窗口左下角的标签，单击“行为面板中“添加行为按钮，选择“翻开浏览器窗口命令，在“翻开浏览器窗口对话框中，输入网页地址guanggao.htm，定义窗口大小及其它属

16、性，单击“确定按钮。步骤3在“行为面板中，选择事件为“onload。(3)框架设计网页布局框架布局图，如下图。步骤1分别制作三个网页分别为：top.htm、left.htm、main.htm，注意这三个网页中所包含的网页容：top.htm包括的是标志，left.htm包括的是导航条， main.htm包括的是文本和图像容。步骤2选择“文件菜单“新建命令，在“新建文档对话框中，单击“常规选项卡，选择“框架集中的“上方固定，左侧嵌套的样式。步骤3翻开“框架面板，然后选中topFrame框架，在“属性面板中设置“框架属性，在“源文件文本框中输入top.htm。同理选中leftFrame框架、main

17、Frame框架分别设置“框架属性，将网页路径分别为：left.htm和main.htm，将各个框架页面到框架集中。mainFrame包含的是main.htmtopFrame包含的是top.htmleftFrame包含的是left.htm图 框架布局图图 top.htm步骤4单击左框架，选中导航条按钮，在“属性面板中添加超地址：main0.htm，第二个导航栏按钮的地址为：main.htm，这两个超的目标均为mainFrame。步骤5鼠标指标放在框架边框处，调整各框架的显示围，或选中“框架集，在“属性面板中，设置框架的行高或列宽，调整框架显示围。步骤6翻开“框架面板，选择“文件菜单“保存框架页或

18、“框架集另存为命令，保存框架集。图 left.htm图 main.htm实训七 网页的美化1. 背景知识根据本章所学的CSS样式表的知识，再综合前面所学的创立站点及编辑网页的知识，制作精巧的网页及应用CSS扩展功能。2. 实训准备工作实训素材、网页元素及网页样图，发送到学生的主机中，以供学生参考使用。3. 实训要求(1) 利用CSS样式表制作精巧的网页，如下图。图 网页效果图要求：根据给定的素材，首先设置页面属性其次定义特定 Id的DIV标签的CSS样式，然后插入DIV标签，在DIV中插入容，最后通过定义类，设置图像CSS样式。图 滤镜效果(2) 在网页中添加CSS扩展效果：滤镜要求：制作：投

19、影字体、发光字体 、图像的透明效果、图像的波浪效果等，如下图。4. 课时安排：2课时5. 实训指导 (1) 利用CSS样式表制作精巧的网页步骤1 新建一个本地站点，站点新建两个子文件夹，images和CSS，将图像素材保存到images文件夹。新建一个网页，保存为inde*.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像素，单击“区块