网页设计与制作的制作技巧
摘要：笔者经过学习网页制作后，发现在实际操作中，仍然会出现较多问题。因此本文查阅部分相关资料，试对网页设计与制作的相关内容的一些制作技巧进行整理归纳，希望能为大家提供一些较为有用的具体的可行的制作技巧。
关键词：网页设计制作;技巧;网页制作
目前，随着科技的日益进步，电脑手机等电子设备已经成为人们生活中必不可少的部分，同时利用电脑手机等查询资料也变得越来越大众化。而查询资料就需要应用网页。因此，网页等内容的设计以及如何制作出更好效果的网页则成为越来越重要的问题。如果能够有效的解决此类问题，设计出整洁好看美观大方的网页界面，将会有效提升网站的用户数量，并给予用户更好地视觉感受，也能够更好的促进网站的成长与发展。
一、网页设计中应注意的问题
在网页设计与制作之前，制作者应先仔细考虑好自己想要做的内容及大概的风格，并从观众的角度看问题，仔细思考，并为其选择合适的颜色、配乐、排版等。但设计时仍要注意一下以下的问题。
(一)适当选择背景颜色可以增加整体效果
制作者可以選择纯色或彩色等鲜艳的颜色用于背景颜色的制作。例如黑色、红色、白色、灰色或紫色等是网页中的主要颜色之一，他们一般都能产生比较好的制作效果。例如黑色具有深沉庄重等含义，可以利用它较好的展现庄严肃穆的感觉，同时线条的变化也能突出科技感。而白色是设计中最常用的颜色，它具有干净简洁的特点，同时白色与其它色彩进行结合也能够表现出空间感和通透感，彩色在白色的背景中，能够体现更好的侧重点，同时还可以起到良好的过渡作用。利用红色会给人以温暖，喜庆的感觉。尤其红色是中国春节期间的主颜色，与黄色的搭配能够给人一种灵动、活力的感觉，并在观看效果上使网页界面更为突出及时尚。同时在购物网站上，红色网页的界面也能有效的激起人的购物欲望。黄色在色彩中是明度很高的颜色，其在网页界面设计中的应用能够给予用户一种光芒以及温暖的感觉，并且彩色能够给人一种鲜艳、热烈的感觉。
(二)合理安排网页内容及结构
在网页制作环节，内容的合理筛选对浏览者的信息获取有着重要意义，而网页内容的筛选需要以框架设计为前提，即根据网站框架情况，决定网站内容的含量。那么在制作网页之前，就需要先对其进行规划。同时，受众经过长时间的观看后，对于设计良好的版面，也会使受众产生愉悦感。那么这就需要设计者进行仔细计划，首先，需要整理和组织框架内容，明确网页主旨，并围绕要求进行收集、筛选相应素材，建立清晰脉络;做好计划是其中很重要的一点。第二，要考虑具体的技术执行等内容;其次要掌握受众的群体信息，及实际需求。需要根据受众的掌握情况，安排相应的内容，不能安排过难或过简单的内容，选择适合的内容难度展现给受众;再然后，列出初分类，做好页面的制作计划;并且，着手进行层级内容的规划及网页内容的规划;最后对内容进行丰富及完善。
同时，本文提出建议，从内容编排的合理性角度考虑，主栏目应当放置与主题密切相关的内容，其他的辅助信息(如个人信息等)则应当尽量放在网站的最底部或者左侧、右侧，避免辅助信息出现在不恰当的位置，转移受众的注意力。而在版面布局方面，常见的结构类型主要有以下几种(1) 国字型布局，即把标志或者广告等内容放置在页面最上方，将最终的内容放置在中间放置因为中间位置是受众第一眼看到的部分，然后，在最下方的部分可以放置联系方式、版权等信息;(2)T型布局，即将标志或者广告放置在页面最顶部，下方为导航栏及网页正文信息。即向受众展示网页的主要内容，及本网站都有哪些内容;(3)POP布局，以精美海报画面为主体。而具体的制作方式，则需要考虑内容及整体效果等因素。
二、网页制作中的技巧
内容与色彩的选用有了初步方案后，但在网页制作的过程中，仍然不可避免地会遇到一些实际问题。以下介绍一些较好的方法。
(一)常用图片切换方式
在网页制作中经常使用两种方法实现图片切换：第一，JavaScript代码，首先创建SQL数据库，引入外部代码进行编辑，最后，调用数据库。第二，Flash软件制作，随后插入网页中。准备好需要切换的素材图片，然后导入图片，各个图片占一个图层，选中以后转变成为图形元件。把帧转换成关键帧，按照顺序排列好，存储文件。在网页中插入Flash，完成循环播放。其中利用CSS技术实现图片切换能够得到较好的应用。编写代码简单，文件占用空间较小，后期维护较为简单，对素材图片没有太多的要求，仅需改变链接地址与图片地址即可。
(二)网页尺寸选择技巧
大多数初学者在制作网页时，并不知道如何设定网页界面的宽度尺寸。本文建议设计者规定好合适的字体大小，方法程度后，选择合适的比例，避免出现设计太窄太宽等问题，同时也尽量避免因受众放大或缩小而导致影响最终效果。尽量保证滚动部分宽度等设计合理，避免出现图片或者视频变形，影响最终效果等问题。网页的页面宽度选择技巧如下：网页宽度在778之间，不建议出现水平滚动条部分，在1 002像素内建议不出现水平滚动条，选择垂直滚动条更对版面的设计起到作用。
(三)文字处理技巧
网页上文字内容的排版也需注意，如果文字过密，或与背景颜色相似、反差较小，长时间观看都会使受众产生疲劳感，进而引发反感心理。如果文字排版可参照报纸的编排方式，将网页内容分栏设计，两栏比一满页的视觉效果好，更方便访问者快速阅读。字体也会影响文字可读性，通用字体(Arial等)最易阅读，特殊字体(Gothic、Script、Westminster、Cloister)用于标题效果较好，但不适用于正文。同时，设计者也可以针对关键词采用加粗或者变颜色的方法加深效果，使关键内容一目了然，同时更有助于受众理解设计的内容，而非大段阅读，难以找到重点等问题出现，甚至对设计者所准备的内容产生厌烦感。
除此之外，制作特效时，考虑到用户浏览的流畅性，应当优选JavaScript，并尽可能减少动态网页、视频、声音等元素。对因网站主题需要，涉及大量图片时，应当考虑以缩略图链接的形式，兼顾加载速度与信息展示效果。其次，考虑到不同分辨率的图片在加载、下载速度方面的差异，制作时应当合理设置注解，以帮助浏览者了解图片的基本信息，改善其浏览体验。这些问题也应多多注意。
三、结论
网页设计与制作是非常重要的一个部分，文中可见，制作前的大纲及提前准备十分重要，同时设计者在制作之前也应学好基础的理论知识，这样更有助于设计者对其内容的理解。而后进行不断的实践，在实践中也应注意文中提到的几点，例如在整体制作之前先考虑整体的框架、主题，并选择合适的颜色及字体字号等。充分设计完成后再进行制作，制作时也可以参考本文提出的图片切换等技巧，帮助设计者提升整体的制作效果。
参考文献：
[1] 陈凤琴.网页设计中的色彩搭配及技巧[J].黑龙江纺织.2019年 01期：29-31.
[2] 夏鹏举.网站设计及网页制作技巧[J].电脑编程技巧与维护.2020年01期：171-173.
[3] 吴晓清.网页制作教学中图片切换的CSS应用[J].计算机产品与流通.2020年 08期：85.
[4]周金容.网页制作过程与技巧[J].软件导刊.2016年 06期：149-151.
作者简介：
明欣玥(1999—)，女，汉族，吉林长春人，延边大学师范学院教育技术学专业，17级在读本科生(学号2174043696)。
作者：明欣玥
摘 要：在我国科学技术不断发展背景下，互联网已经全面渗透到人们生活各个领域，不同的网页制作技术也会给人们带来不同的使用体验。文章分别对静态网页制作技术与动态网页制作技术分别进行了简单的概述，并且介绍了静态网页制作技术与动态网页制作技术分别使用的软件，在此基础上重点对静态网页制作技术与动态网页制作技术二者之间的关联、区别以及转换进行分析，旨在推动我国互联网事业的发展。
关键词：静态网页制作;动态网页制作;可扩展标记语言;程序设计语言
随着我国国民经济的发展以及人民生活水平的提高，社会各界对于我国互联网领域，特别是网页制作技术的关注程度越来越高。网页制作技术以及网页制作的效果对于网站运营发展、优化用户体验以及扩大网站影响等方面都具有十分重要的意义。网页制作技术主要分为动态与静态两种形式，因此，对两种技术各自的特点进行比较，选取更适合的方式进行网页设计和制作，是推动我国互联网事业发展的重要因素。
1 静态网页制作技术概述与应用软件
1.1静态网页制作技术概述
利用静态网页制作技术所制作出来的网页格式后缀均为“.htm”或者“.html”，且静态网页制作技术所制作出的软件内容无法进行随意更改和变动，用户在静态网页中进行浏览时，不会出现不同的网络服务器客户端程序之间发生相互交错的现象。虽然静态网页制作技术所制作出的网页为静态网页，但是不表示网页内部的所有内容都处于静止状态，即静态的网页是在某一方面存在限制，在限制之外的部分也会出现动画格式的文件，例如flash，gif， 3gp等动态效果‘”。
1.2静态网页制作技术应用软件
静态网页制作技术常用软件为可扩展标记语言与超文本标记语言两种，其中可扩展标记语言英文表达形式为XML。可扩展标记语言是一种标准通用标记语言，不仅具有操作简单的效果，同时其功能也十分强大，是一种相对容易理解和掌握的网页制作技术，因此，在静态网页制作技术中应用较为广泛。与之相比的另一种语言为超文本标记语言，英文表达形式为HTML，是通用标记语言之一，主要被应用于静态网页中的标题和段落等环节的设计，同时还可以实现网页中文档语义以及外观的描述、加入超链接等功能。
2 动态网页制作技术概述与应用软件
2.1动态网页制作技术概述
相对于静态網页制作技术，动态网页制作基础是一种动态化的网页制作和展示技术。动态网页制作技术是以静态网页制作技术为基础，将其进行更新实现自身的发展。动态网页制作技术常用语言技术为Java客户端、层叠样式表以及Dw+数据库等。动态网页制作语言和静态网页制作技术中的超文本标记语言能够实现融合发展，从而实现静态网页的动态化展示。但是由于动态网页制作技术的特性，用户在进行动态网页浏览过程中，需要注意服务器客户端的程序之间容易产生相互交错的问题[2]。
2.2动态网页制作技术应用软件
动态网页制作技术主要应用软件为两种，即动态服务器页面(Active Server Pages，ASP)与英文超级文本预处理语言。其中，ASP是一种服务器终端编写脚本的语言，ASP语言结合了Script脚本语言以及超文本标记语言等内容，并且其脚本内容的编写主要基于浏览器中所输入的CGI等脚本内容。所以，利用ASP可以在动态网页设计和制作过程中实现多种编程语言交互使用，从而提升网页页面的多元化。另一种动态网页制作技术所应用的软件为英文超级文本预处理语言，其英文表达方式为PHP。PHP的语言形式和语言算法与计算机程序设计语言，即C语言相结合，从而可以实现跨平台应用软件程序的设计，并且将程序设计语言的不同形式动态化展示，可以将动态网页的各个服务器进行快速切换，是当前世界范围内动态网页制作中应用范围最广也是应用效果最佳的脚本语言。
3 静态网页制作技术和动态网页制作技术比较分析
3.1静态网页制作技术和动态网页制作技术的关联
因为动态网页制作技术实现和发展的基础为静态网页制作技术，因此二者之间具有紧密的内在联系。以静态网页制作技术为基础，动态网页制作技术在其产生和不断发展的过程中，将静态网页制作技术进行了内化和升级，并且为适应不同网页形态设计的需求，不断实现自身的发展与完善，结合Dw+数据库以及Java客户端脚本语言等，为网站网页设计环节提供了强大的动力支持。从某种角度进行分析，动态网页制作技术也是对静态网页制作技术的继承与发展，所以当前世界范围内所使用的动态网页制作技术都蕴含了静态网页制作技术的相关理念。相比之下，因为静态网页制作技术先于动态网页制作技术出现，并且其应用和发展过程中所使用的各项技术和手段均为静态网页制作技术自身原本就具有的，所以并不具有动态网页制作技术内涵。因此，在网站设计之前，利用静态网页制作技术将网站基本结构图进行规划和设计，是网站网页设计建造的重点环节。例如，将网站基本结构组成、网站首页导航栏设计以及网站应用方向和基本内容等进行设计，都需要全面利用静态网页制作技术，从而有效确保网站网页设计的整体框架相对稳定，提高网站的使用效率[3]。
3.2静态网页制作技术和动态网页制作技术的区别
静态网页制作技术和动态网页制作技术之间存在着明显的区别，其中最主要的不同点体现在二者的应用领域和应用范围方面。静态网页制作技术通常情况下主要被应用到各大网站网页设计中的基础环节建设当中，因此，静态网页制作技术适用于网站网页前台设计开发环节。静态网页制作技术的应用能为网站构建奠定良好且稳定的基础。与之相比，动态网页设计技术主要被应用于网页其他主要内容的优化设计方面，利用动态网页设计技术还可以将静态网页以动态化的形式展现出来，将经过修改之后的内容进行发布可以提高用户在网页浏览过程中的浏览体验。
例如，在某网站的设计过程中，该网站设计和搭建技术人员首先将网站前台利用静态网页制作技术进行设计，之后通过Web浏览器发送动态网页的请求，此时Web服务器会根据网站设计人员的需求实现快速查找，并且将相应的数据传递到服务器终端。应用程序服务器会在网页内部的脚本命令当中对所需的数据进行查找，在查找完成之后将数据再次传回到Web服务器当中，实现网站的动态网页设计[4]。
3.3静态网页制作技术和动态网页制作技术的转换
因为静态网页和动态网页在运行过程中所使用的脚本存在一定的区别，所以静态网页中的所有内容脚本都无法在Web服务器当中实现运行。在服务器终端的接收器当中接收到静态网页所发出的请求之时，服务器不会处理该类文件，只会将来经过处理的数据直接返回到发出请求的浏览器网页当中。反之，若服务器终端的接收器接收到动态网页中所发出的此类请求时，服务器便会对软件进行相应的扩展，之后再将经过处理的请求信息返回到发出请求的浏览器网页当中。由此可见，相对于静态网页制作技术而言，动态网页设计技术具有更加先进性的设计功能，因此，在实际应用当中将静态网页制作技术合理转化为动态网页制作技术，可以优化网页使用效果。
但是，因为动态网页不能独立于静态网页而存在，针对此种情况，我国某地区的网站网页设计团队在进行前台软件开发环节利用了静态网页制作技术，在搜索引擎等环节的设计过程中，便将静态网页制作技术转化为动态网页设计技术，同时将用户需求与网站建设相结合，从而实现了静态网页与动态网页设计技术有机统一，为该地区互联网网站建设和网页设计工作提供了强大的技术支持，不仅有效满足互联网用户的使用需求优化了用户的浏览体验，还全面提升了网络技术应用的广泛性和有效性，推动我国互联网事业的发展。
4结语
互联网网站网页设计和制作环节主要依靠静态网页制作技术以及动态网页制作技术两种手段，两种技术既存在区别同时又有着内在的联系。因此，全面分析静态网页制作技术与动态网页制作技术的异同点，在此基础上对二者之间的转化形式和内容进行探究，对于提高我国互联网网站制作技术，优化网页设计效果具有十分重要的推动意义，在增强网页合理性的同时，也有利于推进我国互联网事业的发展和完善。
[参考文献]
[1]朱世美.軟件技术专业静态网页制作课程教学内容改革实践与反思[J]软件导刊(教育技术)，2016 (12)：58-59
[2]吴秀娟.ASP、PHP和JSP在动态网页制作技术比较分析[J]数字技术与应用，2016 (10)：221-223
[3]谭东清.一站式高职电子商务网页制作教学改革与实践[J]中国教育技术装备，2015 (23)：115-117
[4]范云芝.动态网页制作技术ASP、PHP和JSP比较分析[J].电脑知识与技术，2005 (29)：19-21
作者：范芳东
【摘要】新世纪需要创新性人才，这就要求高校提高人才培养质量，而提高人才培养质量的关键是改革教学理念、教学内容和教学方法。本文在开展研究性教学的措施、方法、形式和内容进行了详细的探讨，指出在加强理论教学研究的同时，需要通过实践教学改革和创新才能培养出符合社会需要的高素质人才。
【关键词】研究性教学;网页设计与制作;人才培养
所谓研究性教学，是指确立以探究和创新为核心的教育理念，更新教育教学观念，着眼于培养学生的探索精神和创造性，构建以培养学生的创新精神和创新能力为基本价值取向的教学内容和教学方法体系，着力解决教师研究性"教"和学生研究性"学"的问题，培养具有创新意识和创新能力的高素质人才，发挥学生在学习过程中的主动性和积极性，使之成为我国经济社会发展需要的具有较高素质和较强能力的易就业人才。
一、课程研究性教学的目的和意义
《网页设计与制作》课程研究性教学的实践性探索旨在通过对网页设计与制作职业岗位群的分析，充分了解市场对本专业学生知识、能力、素质的要求，确定切合市场、科学合理的模块化课程体系，选用适当的教学手段和方式，有效地促进教学质量的提高，提高学生的专业技能和就业机率，最终实现专业培养目标。
二、课程研究性教学的理论依据
1、现代学生观
2、多元智力理论
3、建构主义学习理论
4、发展性教学评价理论
三、课程研究性教学的实践过程
1、网页设计与制作岗位需求分析
通过广东省大中专毕业生就业指导中心网站、智联招聘、中华英才等专业招聘网站对广州、北京、上海、哈尔滨、南京、天津、武汉、深圳、沈阳、杭州、西安等大中型城市的人才招聘信息进行分析统计，确定与高职《网页设计与制作》课程相关的职业岗位主要有：网页设计、网页设计与制作、网页美工、网页制作、网站管理、界面设计、网页编辑、网站运营，在这些岗位需求中，选取了800个岗位进行分析，如表1所示。
2、根据岗位需求分析，构建新型课程体系
(1)本课程在计算机类专业课程体系结构中的位置
本课程在计算机类专业课程体系中处于一个非常重要的位置，《计算机应用基础》、《数据库应用技术》、《VB/C语言程序设计》作为其先导课，为其提供必要的知识准备，比如设计平台的熟悉、数据库设计方法的掌握以及程序代码的设计规范等等，而《网页设计与制作》课程又为其后续课程《Web程序设计》、《网站建设与维护》、《软件工程》等课程提供有力的支持，比如管理信息系统开发过程中对于开发界面的设计、学习JSP、ASP/ASP.NET、PHP等开发工具中对于HTML代码的熟悉掌握等等。总之，本课程的学习有助于学生深入学习计算机类相关专业其他知识和提高职业技能，完善学生的专业知识结构，提升学生从事实际工作的综合素质。
(2)课程体系结构内容
从内容结构体系来说，《网页设计与制作》课程包括了五大部分，分别是：网页设计基础知识、网页编程语言、网页设计工具(包括Dreamweaver部分、Fireworks部分、Flash部分)、动态网页介绍、综合实践(实训)，它是一门技能整合的课程。
3、《网页设计与制作》课程设计
(1)设计理念
1)突出专业课程的职业性、实践性和开放性。
2)学以致用。
3)学生是学习主体，鼓励学生职业能力发展，加强创新能力和意识培养的理念。
(2)设计思路
以校企合作为切入点，以培养职业能力为核心，以项目教学为主要手段，积极探索教学方法与成绩评价方法的创新，保证课程目标的实现。
4、教学内容的重构
(1)教学内容的针对性与适用性
《网页设计与制作》是我院计算机网络技术专业的核心课程，同时还是计算机类其它专业、艺术设计类以及电子商务类专业学生的必修课。结合职业需求，我们所确定的教学内容在针对性和适用性方面具有如下特征：
1)教学内容的设置，满足职业能力培养的需要
通过大量的社会调研，分析了网页设计人才应具备的职业能力素养，从而选取合理的教学内容。内容的选取着重培养学生具备以下能力：
①网页的赏析能力
②网页布局的设计能力
③网页色彩运用的能力
④网页的编程能力
⑤常见网页设计工具和图形图像处理软件的运用能力
⑥网站建设和网页发布的能力
⑦项目开发中的协作能力和人际沟通能力
2)基于工作过程的模块化教学内容的设计
针对职业能力的培养要求，采取基于工作过程的模块化教学，按照网页设计制作实际流程来安排教学内容。
5、教学方法与手段的创新
(1)教学模式的设计与创新
《网页设计与制作》课程是计算机类专业学生的核心课程。为了让学生更好地掌握网页设计的方法和技巧，提高学生的动手能力，借助多媒体手段、电子教室、教学网站、电子邮箱和QQ群交流等手段，在教学方法上进行了一系列的改革举措：
1)课程内容模块化，化解难点，循序渐进
2)精心准备案例项目，从宏观上进行教学设计
3)微观教学采用"四阶段教学法"，将"教、学、做"融为一体。
4)注重师生互动，营造课堂气氛
5)充分利用现代化教学手段，提高教学效果
6)举办学生作品大赛，展示成果、促进交流
(2)多种教学方法的灵活运用
1)多媒体教学
2)"理论+实践"教学模式
6、建立以应用为导向的考核方式
打破传统的考核模式，建立新的、开放式的全程考核模式。根据本课程的特点，提出并逐步实行以项目系统考核为主线的考"应用"不考"理论"模式，同时也鼓励学生以证代考。成绩评定：
(1)期末综合作品和网页制作水平占50%
(2)平时作业、学习态度、出勤等占30%
(3)阶段性实训作品占20%
五、教学效果
1、学生对专业的学习兴趣明显提高，原来消极学习的学生现在也变成了"好学分子"。
2、 研究性教学的实践性探索的开展，使教师有机会和条件将理论和实践教学两种教学能力结合起来进行系统深入的研究，使理论教学和实践教学两种教学能力在有机结合中得到相互促进、相互提高，受到了学生的普遍欢迎和认可，教师教学的主体地位得到了强化。
3、学生考证通过率显著提高。
【参考文献】：
[1]夏锦文程晓樵《研究性教学的理论内涵与实践要求》《中国大学教育》2009年12期
[2]朱红耕周济人《实践性教学环节中开展研究性教学的探索》《中国电力教育》2012年23期
作者：曾细平
教你怎么设计制作网站
首先，可以告诉想设计制作网站或想从事网站制作相关行业的的朋友。做网站有很多种方式，不外乎自己开发，找人开发。找人开发这里就不说了，没有什么技术含量，准备好钱就可以了，自己做网站主要有下面两种方式：
做网站方法一(目前主流方式)
下载专业的网站内容网站管理来做，互联网发展到今天，做网站也变得非常简单和编辑，国内也出现了一批很专业的专门用于做网站的网站管理系统，比如pageadmin系统、shopex系统、discuz系统、worpress系统等都是很优秀做网站的程序(程序到官方网站下载，大家自己百度搜索)，有的甚至支持多语言，多站点，总之有一句话说得好，站在巨人肩上会看的更高，一样道理，用专业的网站系统来做做网站就是一个非常省力，省时的过程，国内很多网站90%都是基于这些专业系统基础上搭建，当然，选中一个系统后你需要去熟悉这个系统功能你才能运用得很好，一般来说这些系统都不需要你具备专业的知识，只需要花几天时间看看教程就可以熟练运用并建站。
做网站方法二(专业人员必看) 这个也是本本要重点讨论的，这也是一个专业做网站人员必须掌握的方法，因为掌握下面基础，即使你用方法一来做网站，也能运用得更好，因为一把好剑也需要一个好的剑客。下面讨论一下成为一个网站从业人员必须掌握的知识：
第一阶段：开始时最好是学些图像编辑软件和基础网页脚本语法。 常用图片处理软件：Firework或photoshop 基础语法：HTML语法(百度一下：HTML入门)，CSS语法(百度一下：CSS入门)，javascript语法(百度一下：javascript入门)，学好这些语法可以使您更了解网页制作的原理。结合教程边学习边练习，这最多花你几周时间。
第二阶段：有了上面的基础，你可以做一些简单的页面了。当然为了让网站做得更漂亮，功能更强大，你就需要学一些动态编程语言，常用的有ASP,PHP和ASP.NET,推荐后两种，因为Asp已经被淘汰，后两种程序区别自己上网搜索吧，本人更倾向于学习.NET，面向对象，功能太强了，微软的东西就是强悍。
第三阶段：结合你自己已掌握地知识来开发一些网站，比如自己开发一个简单企业网站，当你可以独立完成一个网站项目时候，你已经成为一个合理的网站建设人员了。
上面我们制作测试网站可以在自己电脑安装iis和对应软件(如php环境和asp.net环境)来运行并测试，网站做好了需要发布到网上给所有人浏览，我们就需要做下面几步：
1、申请域名，就是注册一个网址。
2、购买网站空间，有称为虚拟主机，用来放网站程序文件。
3、网站备案
国家要求国内任何一个网站必须进行工信部ICP备案，这个可以让你主机商给你代备案，一般都是免费的，你只需要提供资料给他们就可以。
做网站的流程大概就是上面几步，希望对大家有所帮助。
目
录
第1章 网页设计与制作概述
1.1网络的基础知识
1.1.1 TCP/IP协议
1.1.2 IP地址 1.1.3域名地址 1.1.4统一资源定位器 1.2图形图像的基础知识
1.2.1位图与矢量图 1.2.2常用的图像格式 1.2.3常用的图形格式 1.3网页的布局知识
1.3.1网页的基本结构 1.3.2页面的布局原则和模式 1.4网页的色彩应用
1.4.1色彩属性与象征意义 1.4.2网页色彩的规划 1.5 HTML基础
1.5.1 HTML语言的基本结构 1.5.2 HTML语言的基本单位 1.5.3 HTML标记符基础 1.5.4文本格式标记符 1.5.5超链接标记符 1.5.6图像标记符 1.5.7表格标记符 1.5.7框架标记符 1.5.8表单标记符 1.5.9滚动条 1.6 CSS技术
1.6.1 什么是 CSS 1.6.2 在网页中使用 CSS 1.6.3 CSS 样式定义 1.6.4 CSS 属性 1.6.5 CSS 过滤器简介 1.7 JavaScript技术
1.7.1 JavaScript脚本嵌入HTML文档的方法 1.7.2使用客户端脚本 习题一
第2章 DreamweaverCS6网页设计基础
2.1 Dreamweaver的工作环境
2.2构建Dreamweaver站点
2.2.1创建本地站点 2.2.2管理本地站点 2.2.3创建和管理本地站点中文件 2.3网页文本编辑
2.3.1正文文本的添加 2.3.2文本格式的设置 2.3.3页面属性的设置
2.3.4插入特殊字符 2.3.5插入空格 2.4 CSS样式设置
2.4.1创建CSS规则
2.4.2链接样式表 2.5制作一个简单网页
2.6 Dreamweaver工作环境的设置 习题二
第3章 图像与多媒体
3.1图像的应用
3.1.1在网页中插入图像 3.1.2设置图像属性 3.2创建鼠标经过图像
3.3图像占位符及属性的设置 3.4插入flash动画 3.5音频的应用
3.5.1音频文件格式 3.5.2网页中添加音频 3.6视频的应用 习题三
第4章 超级链接及其应用
4.1超链接概述
4.2创建文本超链接 4.3创建图像超链接 4.4创建电子邮件链接 4.5空链接 习题四 第5章 网页的布局
5.1表格的应用
5.1.1插入表格 5.1.2表格的嵌套 5.2表格编辑及属性设置
5.2.1文档中的设置表格格式优先顺序 5.2.2选择表格及其它元素 5.2.3设置表格属性
5.2.4设置单元格、行或列属性 5.2.5编辑单元格、行或列 5.3应用APDiv布局页面 5.4APDiv与表格的相互转换 5.4.1将APDiv转换为表格 5.4.2表格转换为APDiv 5.5框架的应用
5.5.1创建框架集
5.5.2查看和设置框架集属性
5.5.3查看和设置框架属性 5.5.4设置框架中显示的网页 5.5.5嵌套的框架集 5.5.6框架的编辑 习题五 第6章 表单的应用
6.1创建表单 6.2添加表单对象
6.2.1插入文本域
6.2.2插入单选按钮/单选按钮组 6.2.3插入复选框/复选框组 6.2.4插入选择框(列表/菜单) 6.2.5插入文件域 6.2.6插入按钮 6.3表单的提交
6.4应用表格布局表单实例
习题六
第7章 行为与脚本语言及模板和库的应用
7.1行为在网页中的应用
7.1.1行为、事件、动作
7.1.2添加行为
7.1.3Dreamweaver内置事件 7.2 JavaScript脚本
7.2.1 JavaScript脚本概述
7.2.2 JavaScript脚本语言特效 7.3创建与应用模板
7.3.1创建模板
7.3.2使用模板创建新网页 7.3.3修改模板
7.3.4文档从模板中分离 7.3.5设置模板的首选参数 7.4创建与应用库项目
7.4.1创建库
7.4.2在网页中应用库项目 7.4.3编辑并更新库页面
7.4.4将库项目从源文件中分离
习题七
第8章 站点的测试
8.1站点的测试 8.1.1检查浏览器兼容性 8.1.2.链接的检查与修正 8.1.3不同分辨率下的测试 8.1.4运行站点报告 8.1.5网站内容的编辑 8.2创建远程站点
8.2.1设置远程服务器 8.2.2连接远程站点 8.3文件的上传和下载
8.3.1文件的上传 8.3.2下载文件
8.3.3文件的取出与存回
习题八
第9章 FireworksCS6基础及其在网页制作中的应用
9.1 FireworksCS6基础
9.1.1认识FireworksCS6工作区
9.1.2文档管理
9.1.3使用布局工具 9.1.4各种面板 9.1.5常用工具
9.2绘制并编辑矢量图形
9.2.1绘制与编辑基本形状 9.2.2绘制与编辑自动形状 9.2.3自由变形形状 9.2.4复合形状 9.3创建并修饰位图图像
9.3.1创建位图图像 9.3.2编辑位图图像 9.3.3修饰位图 9.4创建并编辑文本
9.4.1创建文本 9.4.2选择文本 9.4.3编辑文本 9.5应用笔触和填充
9.5.1应用颜色工具 9.5.2应用和更改笔触 9.5.3应用和更改填充
9.5.4在笔触和填充中添加纹理 9.5.5应用样式 9.6应用动态滤镜
9.6.1应用动态滤镜 9.6.2调整动态滤镜 9.7使用切片和热点
9.7.1使用切片
9.7.2使用热点
习题九
第10章FlashCS6基本操作及在网页制作中的应用
10.1 FlashCS6的基本操作
10.1.1 FlashCS6的工作界面
10.1.2 Flash文档的创建、打开、保存 10.1.3面板组的使用 10.2时间轴的使用
10.2.1图层
10.2.2帧 10.2.3播放头 10.2.4场景
10.3元件、实例和库资源
10.3.1元件的创建
10.3.2实例
10.3.3库面板以及元件与实例的关系 10.4创建各种动画
10.4.1遮罩层动画 10.4.2引导层动画
10.4.3形状补间动画 10.4.4逐帧动画
10.5在动画中添加声音 10.6文本的使用
10.6.1传统文本字段
10.6.2使用文本布局框架(TLF)文本 10.7动作面板的使用
10.7.1动作面板的介绍 10.7.2动作脚本的基本元素 10.8 ActionScript基本语句
10.8.1时间轴控制命令 10.8.2浏览器/网络命令 10.9动作的应用
10.10测试发布Flash动画
10.10.1制作过程中的测试
10.10.2测试方法
10.10.3下载模拟测试 10.10.4发布影片 10.10.5优化Flash文档 习题十
第11章 PhotoshopCS6基本操作及在网页设计中的应用
11.1 PhotoshopCS6基本操作
11.1.1 PhotoshopCS6的工作界面 11.1.2文件操作 11.1.3环境设置 11.1.4基本概念
11.1.5选区的创建与编辑
11.1.6利用画笔类工具绘制图像 11.1.7利用形状绘制工具绘制图像 11.1.8图像修饰工具的应用 11.1.9调色命令的高级应用 11.1.10图层样式 11.1.11文字图层 11.1.12滤镜 11.2页面设计与制作
11.2.1整体页面的制作 11.2.2制作导航栏 11.2.3制作网页内容板块 11.2.4制作网页页脚
习题十一
第12章网页制作工具集成及网页制作综合实训
12.1 Fireworks与Dreamweaver的集成 12.2使用Photoshop和Dreamweaver 12.2.1 Dreamweaver中处理Photoshop文件的工作流程
12.2.2创建智能对象 12.2.3更新智能对象 12.3 Dreamweaver与Flash的集成 12.4网页制作综合实训 习题十二
1、以下关于FLASH为补间动画分布对象的描述中，正确的是( )。(A) A、用户可以快速将某一帧中的对象分布到各个独立的层中，从而为不同层中的对象创建补间动画 B、每个选中的对象都将被分布到单独的新层中，没有选中的对象也分布到各个独立的层中
C、没有选中的对象将被分布到单独的新层中，选中的对象则保持在原来的位置 D、用户可以快速将全部帧中的对象分布到各个独立的层中，从而为不同层中的对象创建补间动画
2、在FLASH中，执行“视图=〉隐藏边缘”命令的作用是( )。(A) A、隐藏被选择对象的突出显示状态 B、隐藏被选择对象的外框轮廓 C、隐藏被选择对象的填充区域
D、隐藏被选择对象的线条
3、以下关于FLASH逐帧动画和补间动画的说法正确的是( )。(B) A、两种动画模式Flash都必须记录完整的各帧信息 B、前者必须记录各帧的完整记录，而后者不用
C、前者不必记录各帧的完整记录，而后者必须记录完整的各帧记录 D、两种动画模式Flash都不用记录完整的各帧信息
4、在FLASH中，分离操作不会对被分离的对象造成以下后果( )。(D) A、切断元件的实例和元件之间的关系
B、如果分离的是动画元件，则只保留当前帧
C、将位图图像转换为填充对象 D、将位图图像转换为矢量图形
5、在Flash的MP3 压缩对话框中的音质选项中，如果要将电影发布到 Web 站点上，则应选( )。(C)(A) A、中 B、最佳
C、快速 D、无所谓
6、在FLASH中，关于导入PNG格式文件，下面说法错误的是( )。(B) A、导入为电影剪辑，并保留原有层表示将PNG 文件导入为电影剪辑，它所包含的所有帧和层都将出现在电影剪辑元件内
B、导入到当前场景的新层表示将PNG 文档导入到当前Flash 文档单个的新层中，该层将位于所有层的下面
C、如果要将 Fireworks 的 PNG 文件导入为单个的图像，则可以选中作为单个扁平化的位图导入复选框
D、如果选中可单个扁平化的位图导入复选框，所有其他选项都不可用
7、下面关于从浏览器打印电影和从Flash 播放器打印电影的说法错误的是( )。(D) A、从Flash播放器打印电影,可以指定Flash电影中的哪些帧可以被打印 B、从Flash播放器打印电影,可以确定帧的打印区域
C、从Flash播放器打印电影,可以给电影剪辑中的打印帧附加Print 动作
D、从浏览器打印电影肯定比从Flash播放器打印电影效果好
8、在FLASH中，两个关键帧中的图像都是形状则这两个关键帧之间可以创建的补间动画是( )。(C) A、运动补间动画
B、位置补间动画 C、形状补间动画 D、透明度补间动画
9、在FLASH中，对于那些具有复杂颜色效果和包含渐变色的图像，例如照片，最好使用那种方式进行压缩( )。(A) A、JPEG压缩 B、无损压缩 C、有损压缩 D、都不可以
10、以下关于FLASH帧锚记和注释的说法正确的是( )。(D) A、帧锚记和注释的长短都将影响输出电影的大小
B、帧锚记和注释的长短都不影响输出电影的大小
C、帧锚记的长短不会影响输出电影的大小，而注释的长短对输出电影的大小有影响 D、帧锚记的长短会影响输出电影的大小，而注释的长短对输出电影的大小不影响
11、在FLASH中，如果一个对象是以100%的大小显示在工作区中，选择工具箱中的“缩放”工具，并按下Alt键，使用鼠标单击，则对象在工作区中将显示的比例是( )。(A) A、50% B、100% C、200% D、400%
12、在FLASH中，如果要将FreeHand文档中的每一层都转换为Flash 电影中的关键帧应该是FreeHand导入设置对话框的( )。(B) A、层选项中选 Layers(层)选项
B、层选项中选Keyframes(关键帧)选项 C、层选项中选 Flatten(扁平)选项 D、没有这个功能
13、在FLASH中，使用钢笔工具创建路径时，关于调整曲线和直线的说法错误的是( )。(B) A、当用户使用次选工具单击路径时，定位点即可显示
B、使用次选工具调整线段可能会增加路径的定位点
C、在调整曲线路径时，要调整定位点两边的形状，可拖动定位点或拖动正切调整柄 D、拖动定位点或拖动正切调整柄，只能调整一边的形状
14、在Flash的测试模式中，不能以“列表显示对象”命令来显示的是( )。(C)(B) A、帧
B、电影剪辑的实例名 C、目标路径
D、对象类型(形状、电影剪辑或按钮)
15、在FLASH中，将舞台上的对象转换为元件的步骤是( )。(A) A、a.选定舞台上的元素 b.单击"修改〉 转换为元件"，打开转换为元件对话框 c.填写转换为元件对话框，并点击确定
B、a. 单击"修改〉 转换为元件"，打开转换为元件对话框 b.选定舞台上的元素 c.填写转换为元件对话框，并点击确定
C、a.选定舞台上的元素,并将选定元素拖到库面板上 b.单击"修改〉转换为元件"，打开转换为元件对话框 c.填写转换为元件对话框，并点击确定
D、a.单击"修改> 转换为元件"，打开转换为元件对话框 b.选定舞台上的元素,并将选定元素拖到库面板上 c.填写转换为元件对话框，并点击确定
16、当Flash 导出较短小的事件声音(例如按钮单击的声音)时，最适合的压缩选项是( )。(A) A、ADPCM 压缩选项 B、MP3 压缩选项 C、Speech 压缩选项 D、Raw 压缩选项
17、在FLASH中，设置电影属性时，设置电影播放的速度为12fps，那么在电影测试时，时间轴上显示的电影播放速度应该可能是( )。(B) A、大于12fps B、小于等于12fps C、等于12fps D、小于12fps
18、在Internet Explorer 浏览器中，来播放Flash 电影(swf 格式的文件)的技术是( )。(D) A、DLL B、COM C、OLE D、Active X
19、下面对FLASH将舞台上的整个动画移动到其他位置的操作说法错误的是( )。(D) A、首先要取消要移动层的锁定同时把不需要移动的层锁定
B、在移动整个动画到其他位置时，需要使绘图纸标记覆盖所有帧 C、在移动整个动画到其他位置时，对不需要移动的层可以隐藏
D、在移动整个动画到其他位置时，不需要单击时间轴上的编辑多个帧按钮 20、关于Flash影片舞台的最大尺寸，下列说法正确的是( )。(C) A、可以设置到无限大 B、1000px × 1000px C、2880px × 2880px D、4800px × 4800px
21、Flash 影片播放速率最大可以设置到( )。(C) A、99 B、100 C、120 D、150
22、在FLASH中，使用钢笔工具创建路径时，关于调整曲线和直线的说法错误的是( )。(B) A、当用户使用次选工具单击路径时，定位点即可显示
B、使用次选工具调整线段可能会增加路径的定位点
C、在调整曲线路径时，要调整定位点两边的形状，可拖动定位点或拖动正切调整柄 D、拖动定位点或拖动正切调整柄，只能调整一边的形状
23、在Flash中，单选钮的的初始状态是未选中的话，则( )。(B) A、initialState=TRUE B、initialState=FALSE C、initialState=YES
D、initialState=CHOOSED
24、以下关于FLASH按钮元件时间轴的叙述，正确的是( )。(B) A、按钮元件的时间轴与主电影的时间轴是一样的，而且它会通过跳转到不同的帧来响应鼠标指针的移动和动作
B、按钮元件中包含了4帧，分别是Up、Down、Over和Hit帧 C、按钮元件时间轴上的帧可以被赋予帧动作脚本 D、按钮元件的时间轴里只能包含4帧的内容
25、以下关于用FLASH制作形状补间动画，使用形状提示，能获得最佳变形效果的说法中正确的是( )。(B) A、在复杂的变形动画中，不用创建一些中间形状，而仅仅使用开始和结束两个形状 B、确保形状提示的逻辑性
C、如果将形状提示按逆时针方向从形状的右上角位置开始，则变形效果将会更好 D、确保形状提示的逻辑和效果
26、在FLASH中，默认时Flash影片帧频率是( )。(B) A、10 B、12 C、15 D、25
27、下面对创建FLASH蒙板操作的说法错误的是( )。(B) A、通过蒙板的小孔来显示的内容的层在蒙板层的下面
B、对于蒙板上的位图图像、过渡颜色和线条样式等，Flash都将忽略 C、蒙板上的任何填充区域都将是不透明的，非填充区域都将是透明的 D、在蒙板上没有必要创建有过度颜色的对象
28、在Flash中，用以绘制笔直的斜线的绘图工具是( )。(A) A、使用铅笔工具，按住Shift 键拖动鼠标 B、使用铅笔工具，采用伸直绘图模式 C、直线工具 D、钢笔工具
29、在FLASH中，下面关于导入视频说法错误的是( )。(C) A、在导入视频片断时，用户可以将它嵌入到Flash 电影中 B、用户可以将包含嵌入视频的电影发布为Flash 动画 C、一些支持导入的视频文件不可以嵌入到Flash 电影中
D、用户可以让嵌入的视频片断的帧频率同步匹配主电影的帧频率 30、在Flash MX中，要绘制精确的直线或曲线路径，可以使用( )。(B) A、铅笔工具 B、钢笔工具 C、刷子工具
D、油漆桶工具
31、下面关于打印Flash电影说法错误的是( )。(C) A、打印Flash 矢量图形时，可以在任意尺寸上获得清晰的打印效果 B、打印低分辨率的位图图像时，受到像素的影响 C、不可以从浏览器打印Flash电影 D、Flash 播放器的打印功能允许用户打印电影中的目录、联票、单篇、收据、发票或其他文档
32、以下关于使用FLASH元件的优点的叙述，不正确的是( )。(D) A、使用元件可以使发布文件的大小显著地缩减 B、使用元件可以使电影的播放更加流畅 C、使用元件可以使电影的编辑更加简单化 D、使用元件可以使编辑实例
33、在Internet Explorer浏览器中，是通过( )来播放Flash 电影(swf 格式的文件)的。(D) A、DLL库 B、COM程序 C、OLE对象
D、Active X插件
34、不同版本的Flash编辑文件(.FLA)是完全兼容的。(错)
35、在Flash中，分离操作会将被分离的对象由位图图像转换为矢量图形。(对)(错)
36、在Flash中，关键帧是指在动画中定义的更改所在的帧。(对)
37、在Flash中，一般来说逐帧动画文件量比补间动画小。(错)
38、作为发布过程的一部分，Flash 将自动执行某些电影优化操作。(对)
39、在Flash中，引导层是用层名称左侧的辅助线图标表示的。(对) 40、在Flash中，在制作电影时，背景层将位于时间轴的最底层。(对)
41、FLASH的工具箱一般放在屏幕的左边,由四个部分组成,它们分别是工具 查看 颜色 选项。(对)
42、在Flash中，引导层不出现在发布的 SWF 文件中。(对)
43、作为发布过程的一部分，Flash 将自动执行某些电影优化操作。(对)
44、在Flash中，可以在时间轴中排列关键帧，以便编辑动画中事件的顺序。(对)
45、在Flash中，为了在绘画时帮助对齐对象，可以创建引导层。(对)(错)
46、在Flash中，工具箱中选取颜色的工具是( )工具。(吸管)
47、在Flash中，执行“视图=》隐藏边缘”命令的作用是隐藏被选择对象的( )状态。(突出显示)
48、在Flash中，有两种类型的声音事件声音和( )声音。(流式)
49、在Flash中，如果一个对象是以100%的大小显示在工作区中，选择工具箱中的“缩放”工具，按下Alt键，使用鼠标单击，则对象将以( )比例显示在工作区中。(50%) 50、在缺省条件下，Flash影片播放的帧频率是( )帧/秒。(12)
一、创建名为Test1的站点，并在其中按如下要求设计简单网页Index.html，如图所示。
要求：
①设置网页标题为自己的学号，网页背景为bj1.jpg;
②插入一个3行3列的表格，表格边框宽度为1;
③第一行合并单元格，插入动画dh1.swf;
④第二行第一列标题的格式为蓝色、楷体、24Px、居中，正文缩进两个汉字、大小为18Px、左对齐;中间插入一个图片tx1.jpg，其宽度为260、高度320;第三列是一个表单，其中姓名和密码的字符宽度和最多字符数为12;
⑤第三行的字体大小为18px;“友情链接”链接到http://;“动画世界”链接到本地的Flash.swf;“申请加入”链接到本地的Apply.html，在新窗口中打开。
④表格第二列中间三个单元格合并，插入一个图片文件“dx2.jpg”和文字，图片宽300、高160，左对齐;创建名称为C的CSS：蓝色、18Px、楷体，用于格式化文字。 (2)Apply.html网页设计要求∶内容为一个表单;包括：姓名、性别、职业。其中姓名最多输入8个字符，性别要求用单选按钮，职业用下拉框，值分别为“学生”、“教师”和“工程师”，默认选中“学生”。
三、教材内容
四、食品与营养
五、我的家乡
第一章 网页制作基础
1、 什么是网页
一般浏览器中打开的都是网页，这些文档是通过超文本标记语言HTML表示出来的;
主页：在网站中默认打开的页面称为主页，也叫首页，主页是进入网站的门户，
网页中包括的内容：
文本，图像，超级链接，表格，表单，多媒体及一些特殊的效果
2、 网站及运作原理
网站是在互联网上一个固定的面向全世界发布消息的地方，它由网站地址和网站空间构成;
网站开发者常常将网站称作为站点，在网站的开发者来说，网站就是在计算机上创建的一个多级的文件夹，并在各文件夹中保存着相关网页文件。
根据站点文件夹所在的位置分为：本地站点和远程站点; 根据服务技术分：静态网站和动态网站
3、 了解HTML语言
HTML是网上用于编写网页的主要语言，使用HTML语言编写的网页文件也是一个标准的纯文本文件，可以使用文本编辑器将它打开，但是该纯文本文件如果使用浏览器打开就会看到排版整齐的网页;
4、 HTML语言标签
HTML标签用来标记网页元素，以形成文本布局，文字的格式及五彩缤纷的画面，HTML的标签分单标签和成对标签两种
基础标签：
题目：设计一个个人网站
一、要求：
1.使用Dreamweave网页工具制作一个个人网站;
2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计)，网页之间用超链接相连。
3.网页中要有图片和文字内容，用表格进行页面布局; 4.添加至少两种行为，并为首页添加背景音乐。
5. 在网站中设计一个表单页面。
6. 首页必须包含页面标题，动态按钮导航栏。
首先新建一个文件夹，文件夹的名字不能为汉字，做网站所有的路径都必须用字母或者数字，不能用汉字，我们就用名字吧，譬如说名字张三，那文件夹名字就是zs，如图打开Dreamweaver软件，得到图
做网页要新建站点，关于站点配置服务器什么的，这里不讲了，只讲建立站点。
选择站点——新建站点。
我们建的文件夹就是站点根文件夹。 新建站点后得到这样一个界面
点选高级，得到界面
站点名称与我们建文件夹得名字相同，zs填进去就可以了 本地根文件夹就是我们新建的那个文件夹zs， http地址为http://localhost/zs
接下来选择左侧栏里远程信息
点击无后面的那个三角，选择本地网络，远端文件夹同样选择我们新建的那个文件夹
接下来点选左面菜单里的测试服务器，
点选访问后面那个三角，选择本地网络，测试服务器文件夹也为我们建好的文件夹zs，在url前缀后面加上zs
然后点击确定就可以了得到这样一个界面。
下面看老师的第一条要求，是要至少四个网页，那我们就做四个
单击新建，然后单击
接下来，选择
然后单击创建，接下单击文件——保存，保存这个文件，保存在我们一开始建好的文件夹里面，保存名字不能是汉字，只能是字母或者数字，因为我们只坐四个网页，可以简单一点，把这四个网页命名为a、b、c、d，或者
1、
2、
3、4，当然一个网站默认的索引首页名为index，这里也用index，
单击保存，这样得到第一个页面，以同样的方式建剩下的三个页面，这里我的首页默认为index.html，其他三个网页的名字分别为a.html、b.html、c.html，我们这四个网页文件已经保存在我们建的文件夹里。
站点中已经有了四个文件。
接下来，我们开始编辑index.html。
单击index.html，显示为当前页面。
单击拆分，
然后我们看这个个网页就叫张三之家了，同样的方法给其他三个网页改名字。 A网页标题
，这个就是网页名字，我们以张三为例，这
，这样老师的第六条我们就完成一半
B网页标题
C网页标题
改好名字之后，一一保存，这个不多说了，接下来操作index.html。
显示首页为当前编辑页面。
首先为index.html页面添加背景音乐。
大家在代码视图里找到
，这个是什么意思就不解释了，我也不知道，就是这个了，在后面输入代码，
然看见这张图片上，
我光标指在哪里了吧，单击空格键，这个时候注意输入法要为美式键盘字母格式，只要不是汉字就行，得到一个菜单，单击src选中，然后单击enter建，这个时候紧跟着src会出现一个浏览，单击浏览，然后出现对话框，选择一首音乐，然后单击确定，
会继续弹出一个对话框点击是，保存到自己建好的文件夹里面，注意这里不能用汉字做音乐名字，必须改成字母或者数字
我是以beyond的歌为例，名字改为by，点击保存背景音乐就添加好了。 大家可以看一下，在站点目录下，已经有了这首歌曲。
接下来开始设计页面布局 这里用表格布局， 这个栏叫设计栏，由于大家都不会代码，所以我们主要在这个栏里操作，
下面大家点击常用里面的表格，就是下面这张图片
中的这个图标
得到对话框如图所示数据： 单击确定，得到如下界面
这个插入的表格式可以自动调整大小的，大家可以自己试一下，接下来用这些表格布局，给大家看两个图标， 这个图标就像是excel中那个合并和拆分单元格是一个意思，左边那个代表合并单元格，右面那个代表拆分单元格，excel大家都会把，就和那个布局差不错，我做一个简单的布局，为了方便，我把这个表格缩小，
这个布局很简单，第二行全部合并，第三行第二三列合并，大家可以根据自己的需要进行拆分合并，还可以在表格里面再次插入表格。
宽度和高度的设置时在代码里找到，之后把它变成
height=””>，其中align表示表格位置，height表示表格高度，大家可以根据自己的需要来填数字，默认是以像素为单位的。
接下来制作导航，这是老师第六条中的第二个要求， 注意我在这里给了两种方法，大家可以先看一下，再决定选择哪种
我没看懂什么叫动态按钮导航条，不知道是让这个字动呢，还是让这个字动呢?如果大家嫌麻烦，就直接输入汉字，结果就是下面这样的
如果要文字居中显示可以将这四个框同时选中，然后居中
在水平栏里面选择
以后所有的文字格式都可以在这里面选，但是首先要选中自己所要操作的文字。
创建链接，选中首页两个字，然后单击右键——创建链接，选择index.html，然后以同样的方法，给其他三个栏里的文字做链接，创建链接的文字会有下划线，同时改变颜色
如果大家不嫌麻烦，教大家用flash做一个动态的按钮导航，
把光标放在第一行第一个栏里，然后
这个常用栏里的flash按钮，单击后面那个小三角，选择flash按钮。 得到对话框
我们可以看到这个按钮的样式是可以自己选择的，大家随意选择一款自己喜欢的按钮，
然后在按钮文本栏里，填入首页两个字，字体设置随意，然后链接
这个栏里填入index.html，注意这里的链接就是超级链接，当你点击这个按钮的时候，它就会显示主页，我们设置后面三个按钮的时候，一定要记得，当你文本栏里填入个人简介字的时候，那你的链接就要指向简介那个页面，我们这里就是a.html。其他像什么背景色之类的随意，
然后单击确定。这样第一个按钮就做好了，接下来我们自己做剩下的三个按钮，注意链接问题，大家做好后，可以看到自己站点内多了四个swf格式的文件，这四个就是按钮，
保存的时候，有一个文件问是否要保存，一定要点击是，不然flash不运行了。
大家可以回到自己的文件夹里，打开首页，测试一下，是不是单击这四个按钮会指向自己所设置的网页，
然后我们给第二行设置背景颜色，以有弹出颜色选框，大家随意选择自己喜欢的颜色
单击背景颜色后面那个方框，可
接下来，完成老师的第五个要求，制作表单，这个把光标指向第三行第一个栏
选在表单选项中的。也就是第一个按钮，这时得到界面
我们把光标指向红线里面，输入“用户名：”然后点击表单选项中的第二个按钮弹出对话框，选择确定，得到界面
同样方法换行输入密码
再次换行，单击表单选项中的按钮项输入两个按钮，
然后选中第一个按钮，得到以下属性
将值后面栏里的文字改为登录，同样方法，把第二个按钮的值改为注册，
。
接下来插入文字和图片，在现在的第二行第二列里操作
把光标指向第三行第二列，选择常用栏
选择这个栏里的图像按钮，弹出对话框，这时大家选择自己电脑里的一张图片，单击确定后弹出对话框，问是否保存在站点根目录下，单击确定，这时候需要注意的是，图片名字不能有汉字，图像标签和辅助属性那一栏不用管，单击确定即可。
接下来就是输入汉字了，我们在图片的后面先输入汉字，可以看到这样的显示，
上面还空了很大一块地方，似乎不太好，不符合图文混排的规矩，
大家单击图片选中，在属性栏里找到找到到对齐那一栏，在后面点选左对齐，
得到最终图文效果是这样的。
第四行还有四个栏，大家可以在里面表明作者时间、以及自己的邮箱、QQ等内容，这里我就不写了。
实际上做到这里，我们几乎完成了老师的所有要求了就差添加两种行为了后面还有三个网页没做呢，怎么办啊，后面三个网页大家还没做，教大家一个简单的方法， 大家把鼠标指向了。
这个栏的左边，在表格和边框之间，我们可以发现，鼠标斜向右首先单击鼠标左键，选中这个表格然后不要移动鼠标，同时单击右键，单击拷贝，然后这个表格就拷贝好了，打开其他三个页面，分别粘贴过去，图像属性描述不用管，取消，这样做的好处是它的好处非常多。
大家打开a.html，这个是个人简介，就是一个图文混排了，图文混排我们已经讲过了，更何况我们这个页面里已经有了图文混排了，大家可以换一张图片，换一些文字，做一些自我介绍什么的，都可以。，但是我们最好把那个表单删掉，哪个是表单就不用我说了吧，
就是这个了。删掉之后，选中第三行三个栏，合并就好了， 第二个页面就做好了，
接下来我们看第三个页面，b.html，这个页面是个人相册
这里我同样分两种方法给大家讲， 第一种方法很简单。就是插入几张图片，
现在第三行剩下三个空栏，每个栏里插入一张图片，景色也好，其他也罢，然后加上图片说明，一切搞定，这个我就不写了， 第二种方法还是用flash做相册，首先大家合并第三行三个栏。
并将光标指向第三行，
然后单击这个图片中的插入记录——媒体——图像查看器，之后得到这样的界面
注意这个是可以调节大小的，看你想要多大的相册了。 单击选中，
我们会发现右面多出这样一个界面flash元素
在其中找到
然后单击后面的img1那里， 会发现后面多出一支笔，单击那个笔，弹出对话框
单击减号，将img1三个删掉，然后再单击加号，会多出一个文件夹标志，单击文件夹标志，然后弹出对话框
在自己电脑里选择一张图片，将图片保存到站点根文件夹下，还是那个问题，名字中不能有汉字，添加好第一张图片之后界面如图
大家可以多添加几张图片，这样一个相册就做好了，单击确定。 接下来就剩下第四页了，就是写几行文字的事情了，
把表单和图文混排都删除，然后合并三个栏，然后添加一些文字，搞定了。 这四个页面都做好了，我们还有一项任务没有完成，那就是给页面添加两个行为
下面我们讲添加行为，
打开首页，单击图像选中，然后找到一下命令，
看到行为面板下那个醒目的加号了吗 单击加号——交换图像，弹出对话框
单击浏览，在自己电脑中找出一张图片，单击确定，存放到站点根目录下，
这样第一个行为就完成了，当我们鼠标滑过这张图片的时候，就会变为另一张图片。 下面添加第二个行为，我们将光标指向第二行蓝色背景哪一行，然后单击行为面板下的加号——弹出信息，得到对话框
写上你好，单击确定。这样在我们单击蓝色地带的时候，就会弹出你好信息框。
推荐阅读：
网页美工设计制作岗位职责06-29
网站设计与网页制作的基本知识判断题06-17
网页制作心得免费05-28
《网页制作与网站管理》培训总结05-24
校园网页设计大赛策划05-31
dw网页设计论文05-31
网页设计分析报告06-02
网页设计中文简历写作06-26
静态网页设计知识点06-22
