搜索
网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊网页设计与制作教程与实训wangyeshejiyuzhizuojiaochengyushixun网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊网页制作基本知识1.1色彩搭配原则1.2版式的选择1.3让草图变成页面1.4最后的修饰网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊色彩搭配原则让草图变成页面要点网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.1色彩搭配原则在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。１.１.1.色彩的鲜明性：如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。1.1.2.色彩的独特性：要有与众不同色彩，网页的用色必须要有自己独特的风格，这样才能给人浏览者留下深刻的印象。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.1色彩搭配原则1.1.3.色彩的艺术性：网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。1.1.4.色彩搭配的合理性：色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.2版式的选择网页版式的基本类型：网页版式的基本类型主要有骨骼型、满版型、分割型、中轴型、曲线型、倾斜型、对称型、焦点型、三角型、自由型十种。网页版式的骨骼型是一种规范的、理性的分割方法，类似于报刊的版式。常见的骨骼有竖向通栏、双栏、三栏、四栏和横向的通栏、双栏、三栏和四栏等。一般以竖向分栏为多。这种版式给人以和谐、理性的美。几种分栏方式结合使用，既理性、条理，又活泼而富有弹性综合运用多种分栏形式。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.3让草图变成页面首先，我们需要先准备一张草图。可以自己构思，或者从其他的网站进行模仿，或者下载现成的模板。只要选择好针对自己主题的版式，就可以为接下来的工作节省不少时间，也为自己的页面增添了活力。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.3让草图变成页面网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.3让草图变成页面首先，分析一下这张草图，他的版式属于骨骼型，竖向2分栏。适合于公司、企业、学校、个人博客等页面。顶部有两条图片，可以加入FLASH、GIF动画等动态效果。中间为菜单栏，下部左侧为功能区，右侧为展示区，右侧底部为版权区。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.3让草图变成页面制作步骤：1、新建一个站点。2、新建一个网页。3、设置网页属性。修改—页面属性—字体、大小、左边距、右边距、上边距、下边距标题修改为网页的名称网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊4、插入一张3*1的表格，表格宽度为780，边框粗细、单元格边框、单元格间距为0网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊5、将表格居中，插入占位图，设置第三个单元格的高度为40、背景颜色为#174485，录入菜单网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊6、插入一个2*2的表格，并且设置左侧两个单元格的背景颜色为#EAEAEA，高度为20，宽度205网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊7、插入一个3*2的表格，合并顶部两个单元格，设置单元格高度为20点数（pt）。并且录入文字，设置标题文字颜色为#174485，大小为10点数（pt）网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊8、将刚制作好的表格复制4份。编辑对应文字网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊9、在右侧插入一个4*1的表格，在第二行录入文字：“欢迎光临WELCOME”，并设置字体颜色为#174485，大小为14点数（pt），在第三行录入介绍文字。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊9、在右侧插入一个3*1的表格，在第二行分裂单元格为2列，在左侧插入图片并且设置缩进，在右侧录入介绍文字。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊10、在右侧插入一个3*3的表格，在第一行设置行高为20点数（pt），并录入相关文字。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊11、在右侧插入一个1*1的表格，录入版权信息并居中。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.4最后的修饰将相应文字配上超链接后会发现网页呈现不自然的效果。网页制作基本知识山西省运城中学教师培训-网页设计-吴琪磊1.4最后的修饰特殊的白色超链接需要通过CSS进行设置。在样式表中插入如下代码：.STYLE7:link{color:#FFFFFF}.STYLE7:hover{color:#FF6600}选择a标签，并进行设置。