网页设计与制作插入网页基本元素

《网页设计与制作》课程标准【课程名称】《网页设计与制作》【适用专业】中等职业学校计算机应用专业办公自动化技术1.前言1.1课程性质本课程是中等职业学校计算机应用专业的一门专业核心课程。

通过本课程的学习, 要求学生掌握网页设计的基本概念, 学会使用常用的网页设计工具和常用脚本语言, 能够设计制作常见的静态和动态网页, 具备网站的建立和维护能力。

同时通过本课程的学习, 培养学生的综合职业能力、创新精神和良好的职业道德。

1.2设计思路本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”, 整个《网页设计与制作》课程共分为四大模块, 它们分别是: 网页基础知识、DreamWeaver的使用、HTML语言、ASP动态网页设计。

教学时各模块既有独立性, 又有关联性。

独立性是指各模块设计案例、组织教学、突出重点时应该相互独立, 学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系, 在重难点设计上应该加以配合, 如HTML语言模块着重基本代码的熟记和编写, 对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。

《网页设计与制作》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。

本课程作为计算机专业的一门主干专业课程, 一般在2.3年级开设, 此时学生已经具备一定的计算机基础知识和动手能力, 能较快地掌握网页设计的各种知识, 并运用所学知识做出具有特色的网站, 使学生能够得到全面的培养, 成为社会所需专用人才。

2. 课程目标总目标：使学生掌握常用的网页设计工具, 熟练运用多种网页设计技术, 具备Web网页设计、制作及站点管理的基本知识和基本技能, 学生能够独立制作中小型的网站。

1.了解WWW、HTTP、HTML、CSS的定义、概念和作用；2.理解服务器、客户端、浏览器的概念和作用； 3.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用；4.熟练操作DreamWeaver；5.理解CSS样式表的作用和意义；6.深入理解HTML语言的各种功能和应用；7.深入理解表格、框架、表单的作用；8.深入理解层的作用；9.初步了解面向对象程序设计思想。

4 域名是。

1.1.3 网页的基本组成元素网页是由多种元素组成的。

文本和图像是网页中最基本的元素，更是网页信息的主要载体，它们在网页中起着非常重要的作用。

而其他的很多元素（如超链接等）都是基于这两种基本元素而创建的。

从严格意义上讲，网页也是一种“软件”，其界面也是软件界面的一种。

然而，相比各种系统软件和应用软件，网页的界面又有一些不同的地方。

网页是由浏览器打开的文档，因此可以将其看作浏览器的一个组成部分。

以内容来划分，一般的网页界面包括网站Logo、Banner、导航栏、内容栏和版尾等部分。

1．LogoLogo（意译为标识、标志等）是整个网站对外唯一的标识和标志，是网站商标和品牌的图形表现，其制作要点如下。

● Logo的位置通常位于网页的左上角，也可根据需要将其置于其他任何位置，一般需保证Logo醒目，让浏览者能很快看到。

● Logo的内容通常包括特定的图形和文本，其具体内容应与开发网站的企业文化紧密结合，以体现网站的特色，图1-4所示为新浪网的Logo。

2．BannerBanner，中文意思为旗帜或网幅，是一种可以由文本、图像和动画相结合而成的网页栏目。

Banner的主要作用是显示网站的各种广告，包括网站自身产品的广告和与其他企业合作放置的广告。

其标准尺寸有468像素×60像素、392像素×60像素、234像素×60像素、125像素×125像素、120像素×90像素、120像素×60像素、88像素×31像素及120像素×240像素等。

其中，468像素×60像素和88像素×31像素的Banner使用最多，468像素×60像素的Banner文件大小应在15KB左右，而88像素×31像素的Banner文件大小最好在5KB左右。

除此之外，在一些特殊场合也可使用一些非标准尺寸的Banner，图1-5所示为当当网首页特卖活动横幅广告。

营销型网站建设实训课程标准课程编号：适用专业：电子商务课程类别：专业基础课程修课方式：必修教学时数：64学时总学分数：4学分一、课程定位1.课程性质《网页设计与制作》是以计算机专业为主体，辐射计算机网络技术专业、计算机应用技术专业、电子商务专业、多媒体设计与制作专业等计算机类专业的理论实践一体化课程，是计算机专业的专业基础课程，也是电子商务的一门核心技能课程。

围绕电子商务专业的培养目标，该课程的定位为：.懂专业：掌握Web国际标准基础知识；基于W3C网页设计标准，熟悉和掌握静态网页设计与制作及小型网站建设与维护的基本知识。

.精技能：掌握综合运用网页编辑软件、图像处理软件(fireworks)设计和制作网页的技能，熟练掌握DIV+CSS网页布局设计方法，能熟练运用XHTML、CSS(及后续课程JavaScript)进行网站客户端开发，熟悉Web国际标准，掌握小型网站策划、分析、设计、布局、测试的职业能力；坚持手写代码，形成良好的代码规范编写习惯。

.高素质：在课程学习中培养学习和工作的方法能力，培养与人协作和做人的社会能力。

2.课程作用《网页设计与制作》是面向“网站美工、网站维护”职业岗位的领域课程，也是满足职业岗位任职要求的基本能力课程。

通过该课程的学习，实现以下专业知识、职业能力、职业素质目标，为今后职业生涯发展打好基础。

知识目标：•熟悉和掌握静态网页设计与制作的基本知识；•掌握Web国际标准基础知识；•了解和熟悉HTML语言；•掌握静态网页设计与制作的知识；•掌握网页中DIV+CSS网页布局方法；•掌握网页中图片设计和处理、动画导入的知识；•掌握网站检查与发布的知识；•坚持手写代码，形成良好的代码规范编写习惯。

能力目标：•具备信息收集、处理、准备、加工的能力；•具备网页设计及网页中图形设计、动画导入的基本能力，能独立设计并制作一个内容完整、图文并茂、技术运用得当的小型静态网站；•具备初步的网站开发、维护和管理能力；具备独立撰写网站制作说明等技术文档的基本能力。

《网页设计与制作》课程简介课程名称：网页设计与制作课程代码：02038适用专业：初等教育（计算机与信息技术方向）课程性质：专业核心课程、必修课、专业技能课学分：3 学分计划学时：72学时（理论36学时，实训36学时）一、前言1. 课程性质本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。

本课程的先修课程是《计算机应用基础》，后续课程是《程序设计》。

在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。

在以后学生还将学习《程序设计》课程，能设计和制作动态网页。

2. 课程基本理念初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。

课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。

同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。

3. 课程设计思路根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。

课程以工作任务来组织内容，以案例驱动贯穿教学过程。

由浅入深，最后完成主题网站的开发项目。

课程教学中以Dreamweaver的使用为主线，要重视HTML语言和CSS样式的讲解和应用。

通过以3—4人为小组完成主题网站的建设，培养沟通能力、合作能力和团队协作能力，为今后的职业生涯打下良好的基础。

二、课程目标1. 总体目标本课程以学生能独立完成静态网站开发和维护的实际工作能力为学习目标，要求学生掌握HTML语言的文档结构和基本标签使用。

《Dreamweaver CS6网页设计与制作标准教程》教学大纲教案课程介绍：本课程是一门概念性和实践性都很强的面向实际应用的课程。

Dreamweaver CS6是由Adobe公司开发的网页设计与制作软件。

Adobe公司在Dreamweaver这一软件的版本上不断升级，是为了使广大从事网页制作和网页设计工作的用户拥有性能更完善的得力工具，同时也是为了使刚刚步入设计领域的初学者能够拥有更加优秀的学习软件。

本课程主要介绍的是Dreamweaver CC的基本操作方法和网页设计制作技巧，这是学习Dreamweaver的入门课程，也是必修课程，学员通过本课程的学习，应当能够熟悉软件功能和网页设计思路，为今后的专业学习或深入的设计打下基础。

培训目标：➢掌握网站建设基本流程和网页设计基础知识➢掌握Dreamweaver CC的工作界面和网站的建设基础➢掌握文本与文档的编辑➢熟练掌握插入图像和多媒体的方法和技巧➢掌握网页超链接的创建方法及应用技巧➢熟练掌握表格的使用方法及应用技巧➢熟练掌握框架集框架集的使用方法➢熟练掌握层的基本操作方法➢掌握层叠样式表（CSS）样式➢掌握模板和库的使用方法➢掌握CSS+DIV的布局方法及技巧➢掌握使用表单的方法➢了解行为的使用方法➢掌握网页代码的编写和修改➢掌握商业案例实训的设计方法及技巧培训内容：一、网页设计基础知识1、掌握互联网基础和网站建设基本流程2、掌握网站建设基础和网页设计基础3、掌握网页的制作常用软件和标准技术二、初识Dreamweaver CS61、掌握Dreamweaver CC的工作界面2、掌握站点管理器、创建文件夹、定义新站点、创建和保存网页3、掌握重命名、移动、删除文件和文件夹4、掌握站点的打开、编辑、复制、删除、导入和导出5、掌握关键字、作者和版权信息、刷新时间、描述信息等其他文件头的设置三、文本与文档1、掌握文字的输入、连续空格的输入2、掌握页边距、网页的标题、网页的默认格式的设置3、掌握对文字的大小、颜色、字体、对齐方式和段落样式等的设置4、掌握项目符号或编号、文本缩进、插入日期、特殊字符和换行符的使用5、掌握水平线、显示/隐藏网格和标尺的应用四、图像和多媒体1、掌握图像的格式2、掌握图像的插入、图像的属性、跟踪图像的应用3、掌握Flash动画、FLV、Shockwave影片、Applet程序、ActiveX控件的插入五、超链接1、掌握超链接的概念与路径知识2、掌握文本超链接、电子邮件超链接、下载文件链接的创建方法3、图片链接、鼠标经过图像链接的创建方法4、掌握锚点链接、热点链接的创建方法六、使用表格1、掌握表格的组成和插入方法2、掌握表格、单元格和行或列的属性设置3、掌握在单元格中输入文字、插入其他网页元素4、掌握选择整个表格、行或列、单元格的应用5、掌握复制、粘贴表格的应用6、掌握表格删除、缩放的应用7、掌握单元格的合并和单元格的拆分七、使用框架1、掌握框架与框架集的操作方法2、熟练掌握框架属性的设置方法八、使用层1、熟练掌握层的基本操作方法2、掌握应用层设计表格的技巧九、CSS样式1、掌握CSS样式的概念2、掌握CSS样式面板的使用方法3、掌握CSS样式选择器的应用4、掌握样式的类型和创建方法5、掌握CSS样式的属性十、模板和库1、掌握资源面板的使用方法2、掌握创建模板、可编辑区域、重复区域、重复表格的创建方法3、掌握模板的重命名、修改模板文件、更新站点和删除模板文件的方法4、掌握如何创建库文件5、掌握重命名、删除、修改和更新库项目的方法十一、CSS+DIV布局方法1、掌握CSS+DIV的概述2、掌握div和span标记的区别3、掌握盒子的概念和操作技巧十二、使用表单1、掌握表单的使用方法2、掌握单行、密码、多行和电子邮件文本域的创建方法3、掌握单选按钮、单选按钮组和复选框的创建方法4、掌握下拉菜单、滚动列表的创建方法5、掌握文件域、图像域和按钮的创建方法十三、使用行为1、掌握行为面板的使用2、掌握JavaScript、打开浏览器窗口和转到URL的创建方法3、掌握检查插件、检查表单和交换图像的创建方法4、掌握显示隐藏层的方法5、掌握容器的文本、状态栏文本和文本域文字的设置方法6、跳转菜单和跳转菜单开始的方法十四、网页代码1、掌握新建标签库、标签、属性的方法2、掌握常用HTML标签的使用3、掌握响应HTML事件的方法十五、商业案例实训1、掌握软件基础知识的使用方法2、了解软件的常用设计领域3、掌握在不同设计领域本书全面、系统地介绍Photoshop CC 2019的基本操作方法和图形图像处理技巧，并对Photoshop在设计领域的应用进行细致的讲解，具体内容包括图像制作基础、软件基础操作、插画设计、Banner设计、App设计、H5设计、海报设计、网页设计、包装设计、综合设计实训等。

《网页设计与制作》课程标准序言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。

本课程定位于WEB技术开发工作岗位。

它是WEB前端技术开发的必备课程，在整个课程系统中拥有重要的作用，一、课程的说明：经过本课程的学习，使学生认识网页设计技术的发源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，经过运用Photoshop图像办理软件和Flash动画制作软件，三个软件相互当合，达成网页设计与制作任务的方法。

为此后从事网页设计与制作、网站开发和管理确立基础。

在网页设计的实践中要点培育团队协作、交流交流能力，培育自主学习能力和探究创新能力。

二、课程内容与基本要求：该课程波及的知识是网页设计人员必备的基本技术，职业活动与课程内容的对应关系以下：三、教课目的1、职业要点能力目标(1) 掌握使用Photoshop进行图像办理的基本方法及操作技术(2) 掌握DreamweaverCS5的基本知识及操作技术(3) 掌握成立与管理站点的方法(4) 掌握制作主要内容为文本的网页的方法(5) 掌握在网页中插入与编写图像的方法(6) 掌握在网页中插入多媒体元素的方法(7) 掌握表格办理与网页布局的方法(8) 掌握创立超级链接的方法(9) 掌握使用框架制作旅行网站的方法(10) 掌握创立和使用模板的方法(11) 掌握创立和使用库的方法(12) 掌握在网页中增添AP Div的方法(13) 掌握在网页中使用行为的方法(14) 掌握HTML基础知识及经过代码修饰网页的方法(15) 掌握使用CSS款式表修饰网页的方法(16) 掌握动向网页的观点及简单动向网页的制作方法2、职业特意能力目标(1) 经过达成有关的项目，掌握网页设计的基本工作流程。

(2) 经过达成有关的项目，掌握网页设计常用工具的使用方法。

完整版)网页设计与制作课程标准网页设计与制作》是一门理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。

该课程定位于WEB技术开发工作岗位，是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用。

通过本课程的研究，学生将了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。

该课程旨在为今后从事网页设计与制作、网站开发和管理奠定基础，并在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主研究能力和探索创新能力。

该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：1.网页基本概念（第1章）2.基本开发工具的使用DW CS6软件介绍（第2章）3.建立与管理站点（第3章）4.制作主要内容为文本的网页（第4章）5.插入与编辑图像（第5章）6.插入多媒体元素（第6章）7.创建超级链接（第7章）8.HTML基础（第13章）9.表格处理与网页布局（第6章）10.网页布局AP Div的应用（第9章）11.使用CSS+DIV布局网页（第11章）12.网页美化CSS样式表（第10章）13.行为（第12章）14.动态网页基础（第15章）15.创建和使用模板（第9章）16.创建和使用库（第10章）该课程的教学目标为：1.掌握使用Photoshop进行图像处理的基本方法及操作技能；2.掌握DreamweaverCS5的基本知识及操作技能；3.掌握建立与管理站点的方法；4.掌握制作主要内容为文本的网页的方法；5.掌握在网页中插入与编辑图像的方法；6.掌握在网页中插入多媒体元素的方法；7.掌握表格处理与网页布局的方法；8.掌握创建超级链接的方法；9.掌握使用框架制作旅游网站的方法；10.掌握创建和使用模板的方法；11.掌握创建和使用库的方法；12.掌握在网页中添加AP Div的方法；13.掌握在网页中使用行为的方法；14.掌握HTML基础知识及通过代码修饰网页的方法。

实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览。

3、配置网站运行环境。

实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点◆熟悉使用浏览器进行浏览、搜索、下载。

◆熟悉HTML的结构、语法。

◆创建与管理站点实验内容1、浏览新浪主页并保存，观察其保存结果（其中包括哪些文件和文件夹）。

2、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。

3、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。

4、制作一个简单的网页sy1-1.htm，用记事本编辑，网页标题为“我的第一个网页”，内容为司空曙的《江村即事》（要求加入文档类型声明），如下图所示。

5、使用Dreamweaver建立一个本地站点。

6、注：站点名称用你的名字的首字母，如方清华用fqh。

1）在网站根文件夹下创建文件夹sy12）打开“文件”面板并上传，类似于下图注：请利用“管理站点”的“导入”和“导出”功能保存和恢复站点设置，减少重复配置操作。

3）配置IIS。

打开控制面板>管理工具>internet信息服务。

注：如果“管理工具”中没有“internet信息服务”，请利用“控制面板”的“添加/删除程序”工具添加（在“添加/删除组件”选项中设置）。

4）配置本地intranet附录2 课程设计报告模板《网页设计与制作基础》课程设计报告任课教师专业班级班级代码组号第组组长学号姓名设计主题《网页设计与制作基础》课程组制评语（由任课教师答辩时填写）分工情况表（该表后两列由教师填写外，其余部分由学生填写）员的最后课程设计成绩是小组课程设计成绩与个人附加分之和。

指导教师（签名）：年月日一、设计目的（正文字体为“仿宋_GB2312”，字号为四号字）二、设计环境（正文字体为“仿宋_GB2312”，字号为四号字）三、设计步骤（各主要设计流程如确立主题、规划网站以及网页架构、素材准备、制作网页等的具体步骤）（正文字体为“仿宋_GB2312”，字号为四号字）四、设计结果（各相关网页的截图）（正文字体为“仿宋_GB2312”，字号为四号字）五、心得（通过此次课程设计说说你在设计过程中遇到的问题和解决方法，以及有何收获）（正文字体为“仿宋_GB2312”，字号为四号字）实验报告课程名称实验项目名称班级与班级代码实验室名称（或课室）专业任课教师学号：姓名：实验日期：年月日广东商学院教务处制姓名实验报告成绩评语：指导教师（签名）年月日说明：指导教师评分后，实验报告交院（系）办公室保存。

《网页设计与制作》课程实验（上机）教学大纲一、实验教学目标与基本要求本实验课程是信息管理专业和财务管理专业的专业任选课程。

通过本实验课程的学习，要求学生掌握Web的基本概念，学会使用常用的网页设计工具，网站的建立维护能力。

通过发布属于个人或者公司的Web站点向全世界宣传个人形象、推广公司产品或开展公关活动已成为一种新的流行趋势。

因此，精通Web的应用基础，掌握Web网页的制作和Web 站点的管理等内容已经成为现代人必备的一种技能。

该课程强调基础知识的教学和实践技能的培养。

在“虚拟企业”教学实践平台上，大力开展技能教学，专门设计电子商务网站构架平台，辅助学生自行动手创建个性化的商务网站。

并编写实训手册，训练学生帮助企业解决企业电子商务问题的能力，形成了以案例教学为主线的理论教学和以项目驱动为特点的实践教学相结合的课程特色。

本课程内容以网站建设的实践为线索来确定课程的知识结构。

根据课程具有的实用性的特点，实践环节在教学过程中应占有重要地位，为此，教学中一定要加强实际动手能力的培养。

具体通过本课程的学习，要求学生掌握一、两种常用的网页设计工具，熟练运用多种网页设计技术，具备Web页设计、制作及站点管理的基本知识和基本技能；了解一种绘制图形和加工图像的图像处理工具。

二'基本理论与实验技术知识1.了解网站开发的基本知识。

2.掌握网页文本操作、插入图象、表格应用、超级链接、层的使用、网页布局、框架与框架集。

3.掌握加强网页显示效果的CSS样式、资源、模板和库。

4.掌握交互的表单应用和插入媒体对象。

5.掌握行为的应用、动画创建等实际内容。

6.学习搭建服务器平台，测试和发布站点。

7.掌握在Macromedia Dreamweaver CS4中使用数据库、ASP对象、服务器行为制作动态网页。

三' 实验方法' 特点与基本要求本实验开设对象为《网页设计与制作》课程的学习者（经济管理类信管专业学生），实验为必修内容。

计算机专业高考复习资料整理------By Mr. Chew了解网页和网站的概念，了解网站的规划与设计流程网页概念：网页是构成网站的基本元素，是承载各种网站的平台。

网页分为静态网页（.html或.htm）和动态网页（.asp/.php/.jsp等）。

网站首页的主文件名index、default，扩展名依照上面网页的类型。

网页元素：文本、表格、图像、声音、视频、导航条、超链接、表单网站概念：网站是指在互联网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。

按网站主体性质分：政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其他非营利机构网站以及其他类型等。

从网站提供内容分：资讯类、交易类、体验类、展示类、综合类等网站规划与设计：1、建设网站前的市场分析2、建设网站目的及功能定位3、网站技术解决方案4、网站内容及实现方式（网站规划完后就可以进行网站的开发，主要有两个阶段）网站开发的两个阶段：第一阶段：网页设计与制作第二阶段：网站测试与维护了解站点的概念，掌握站点的管理操作站点概念：站点是一组具有相关共享属性的网页和资源的集合，在Dreamweaver CS3中，站点通常指向本地或远程的某个存储位置。

站点的管理站点类型：1、本地站点：指存放在本地计算机硬盘上的站点，一般是将本地计算机作为服务器进行测试时使用的站点2、远程站点：指存放在远程服务器上的站点，即网站通过测试后，上传到远程服务器上的站点位置3、测试站点：指测试动态网页的站点创建站点：1、单击“站点”菜单------“新建站点”命令2、确定站点名字3、确定使用的服务器技术（Cold Fusion、、ASP、JSP或PHP）4、确定文件存储位置5、确定是否连接到远程服务器站点管理：1、新建站点2、编辑站点3、复制站点4、删除站点5、导出站点6、导入站点能利用html语言制作简单网页，掌握以下基本标记的应用：<html>、<head>、<title>、<body>、<p>、<br>、<table>、<tr>、<td>、<Hn>、<a>、<font>、<hr>、<img>HTML文件由标记和文本组成，通常的格式为：<标记名称属性1=属性值属性2=属性值……>受标记影响的文本</标记名称>了解网页基本元素，掌握在网页中插入和简单修饰文本、表格、水平线、特殊字符、图像、FLASH动画等元素的方法了解超链接的概念，掌握各类超链接的创建方法网页元素：1、网页元素包括文字、图像、声音、动画、视频、超链接等2、目前网页中比较常用的图像格式有jpg、gif、png超链接：是指通过文本、图像或热点区域等元素从一个网页指向一个目标的连接关系。

实验一网页的认识实验目的1、掌握利用Internet进行信息游览、搜索，下载网页、图片、文字和文件；2、利用记事本来编辑HTML文档并浏览；3、熟悉HTML基本标记的使用。

实验环境WindowsXP操作系统，内部组成局域网，外连Internet互联网。

实验重点及难点◆熟悉HTML的结构、语法。

◆熟悉HTML基本标记的使用。

实验内容1、从网上（如网页制作大宝库等）下载网页制作时需要的小图片、动画及flash等网页制作素材。

2、收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。

3、通过浏览新浪网站主页分析其网页基本元素，查看其源代码，收藏到收藏夹中，将其设为主页。

4、制作一个简单的网页sy1-1.html，用记事本编辑，网页标题为“熟悉HTML文档的结构”，内容为司空曙的《江村即事》，如下图所示。

5、通过附录1的练习熟悉HTML基本标记的使用。

（可参考第二章内容）实验二 Dreamweaver基本操作（一）实验目的1、熟悉Dreamweaver的工作环境并了解本地站点的建设和管理；2、熟悉网页文件的基本操作；3、熟练掌握在网页文件中文本、图像、超链接的添加和设置。

实验环境WindowsXP操作系统，Dreamweaver CS3软件，内部组成局域网，外连Internet互联网。

实验重点及难点◆文字的插入及设置。

◆图像的插入及设置。

◆各种超链接的创建。

实验内容1、使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”，包含以下几个文件和文件夹：图片文件夹（images）；音乐文件夹（sound）等。

2、在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件，从提供的网页原始素材中把相关文字复制到该网页文件中，并进行适当的文字设置，结果如下图所示。

3、在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html，效果如图所示。

中等专业学校2022-2023-2教案教学内容形色色的在线音乐、网络视频、QQ、微博、微信、支付宝，再到外出旅行的机票预订、旅馆安排、网上购物、证券交易等活动，网络已经渗透到我们生活的各个角落。

2．WWW服务WWW 是World Wide Web的缩写，其含义是“全球网”，也称其为“万维网”。

WWW是一种基于HTTP（超文本传输协议）的交互式多媒体信息检索工具。

使用WWW，只需单击就可以在Internet上浏览各种信息资源。

WWW服务采用客户机/服务器工作模式，由WWW 浏览器、Web服务器和WWW协议组成。

WWW的信息资源以网页的形式存储在Web服务器中，用户通过客户端的浏览器，向Web服务器发出URL请求，Web服务器接收并处理用户请求后，将网页返回给客户端，浏览器接收到网页后对其进行解释，最终将文字、图片、声音、动画、影视并茂的画面呈现给用户。

WWW浏览器是专门来定位和访问Web信息的应用程序。

常用的浏览器软件包括Microsoft公司的Internet Explorer和Netscape公司的Navigator。

Web服务器是对浏览器的请求提供服务的计算机及其相应的服务程序。

网页设计者将制作好的网站上传到Web服务器上才能被用户浏览。

3．Web站点和网页Web站点，又称为网站，是指在因特网上，根据一教学内容定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。

简单地说，Web站点是一种通讯工具，人们可以通过网站来发布自己想要公开的资讯，或者．．利用．．Web．．．站点来提供相关的网络服务，浏览者可以通过网．．．．．．．．．．．．．．．．．．．．．页浏览器来访问．．．．．．．Web．．．网站，获取需要的资讯或者享受网络．．．．．．．．．．．．．．．．服务，其运作原理如图所示。

．．．．．．．．．．．．．网页是构成网站的基本元素，一般又称作．．．．．．．．．．．．．．．．．．HTML．．．．文档，．．．是一种可以在互联网上传输，能被浏览器识别和翻译成页．．．．．．．．．．．．．．．．．．．．．．．．．面并显示出来的文件。

(完整版)《网页设计与制作》课程教案《网页设计与制作》课程教案一、课程定位本课程是计算机应用技术专业的一门专业基础课程，该课程的学习能够提升他们对网页制作的兴趣，让他们学习网页制作的基本技能，为后继课程打下基础，同时扩展其就业面,为就业做好准备。

本课程的目的和任务是让学生学会Dreameaver CS6、Flash和Fireworks的使用方法,并能够使用这3款软件制作出美观实用的网页。

二、课程总目标掌握网页制作的基本方法和技能，掌握网站建设的流程，能够运用所学知识建设常用的网页和网站，同时能够美化网页，设计人性化、艺术化的网站静态页面部分.（一）知识目标:1.熟悉网页制作的基本元素;2。

掌握Dreamweaver CS6软件的基本操作方法；3.掌握在网页中插入文字、图片、声音、flash等的方法；4。

掌握常见的网页布局方法，学会使用CSS美化网页;5。

掌握在网页中使用表单和制作网页特效的方法；6.掌握简单图形图像的处理，能够制作符合网页主题的图片和简单动画并巧妙地和网页中内容搭配起来。

7。

掌握建设一个功能相对完善的网站的方法并能制作常用的网站的静态页面部分。

（二）职业能力培养目标1。

能够根据网站开发需求,去寻找网页设计和网站开发所需要的文字、图片、动画、声音、视频等素材并作美化处理；2．能够制作出符合主题色彩的网页，网页要求美化、被绝大多数浏览者接受和喜爱；3.能够设计企业网站、政府门户网站、学校网站等常见网站的基本静态页面。

（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的学习精神；2。

具有良好的心理素质和职业道德素质;3。

具有高度责任心和良好的团队合作精神；4.具有运用理论知识发现问题、分析问题并解决问题的能力,同时能够不断学习，不断创新，让自己的设计越来越完善，有止于至善的精神。

（四）职业技能证书考核要求：可以根据自身情况考取“全国计算机信息高新技术资格证”,“网页设计制作员"，“网页设计师”等职业技能证书。

网页设计与制作教程教学设计背景及目的随着信息技术的不断发展，更加强调学习者的自主学习和批判性思维，同时对于学生的专业技能素质要求也越来越严格。

为了适应市场的变化，让学生更好的适应工作所需的技能，本文旨在设计一份网页设计与制作的教程教学方案。

教学目标针对不同层次的学生，我们设计了不同的教学目标：•初级目标：熟悉 HTML、CSS 的基础语法及其慣用法，掌握网页布局及DOM操作的基本方法。

•中级目标：掌握更高级的 HTML 和 CSS 技能，能够制作更加复杂的效果，并熟悉 JavaScript 的基础知识和使用方法。

•高级目标：能够独立制作更加复杂的网页效果，掌握jQuery 等前端框架的使用，理解网站性能优化和前后端交互的知识。

教学方式本教程采用学习与实践相结合的教学方式，通过实践和项目驱动，帮助学生掌握网页前端技能，让学习更具可操作性。

课程设计如下：阶段一：HTML & CSS 基础学习基础的HTML标记与CSS样式表，理解页面结构和样式布局；任务列表：1.制作一个静态网页，页面包含文章、图片等元素，并使用样式表控制页面布局和样式；2.初学者参考模板制作简单的网页，包含导航、轮换图、图片等常见元素；阶段二：网页布局与JavaScript基础学习更高级的HTML和CSS技能，理解DOM和布局的基础知识，并获得基础JavaScript编程能力；任务列表：1.制作一个网页布局Demo，动态展示常用的网页布局方式；2.使用原生JavaScript制作一个简单的动态效果，比如MouseOver展示图片等。

阶段三：常用框架与性能优化进一步学习网页制作及优化技巧，掌握各种常用框架的使用方法，并学会进行性能优化。

任务列表：1.使用Bootstrap完成一个页面布局，并使用Less预处理；2.使用jQuery实现一个动态效果，让学生掌握框架的使用方法；3.了解前后端交互的基础知识，采用Ajax技术实现一个动态效果；4.理解网站性能优化的基本原则，做到核心页面的dom size控制在10KB以内，并优化网页加载速度。