admin 管理员组文章数量: 887021
2023年12月18日发(作者:xml标签格式)
1 内容:
设计并制作一个个人网站。
栏目设置:
因为时间的原因,仅包括以下几个栏目
1、个人简介
介绍个人的基本情况,年龄、学历、学位、毕业院校、所学专业、身高、体重等等。
2、成长经历
介绍个人的成长经历,从初中起学习、社会实践和获得荣誉情况。
3、兴趣爱好
介绍个人的兴趣爱好。
4、个人特长
介绍个人的特长,文字+图片+视频。
5、个人相册
版面设置
一般来说网站的结构为倒树的结构
网站
栏目1 栏目2 栏目3
栏目3.1 栏目3.2
网页的类型可分为:首页、栏目页、内容页三种。其中栏目页又可分为单页和列表页两种。
对于个人网站,除了个人相册是列表页外,各栏目基本上都是单页类型的栏目。
网页的设计比较常用的方法是首先在photoshop中作出效果图,然后再切片做成html网页。这里,我们用word表格来做设计。
首页的设计:
Banner
800*150
Menu
800*30
Flash
800*600
Foot
800*30
栏目和内容单页
Banner
800*150
Menu
800*30
侧栏 内容
Foot
800*30
个人相册列表页
Banner
800*150
Menu
800*30
侧栏 相片 相片 相片
相片 相片 相片
相片 相片 相片
Foot
800*30
布局知识介绍
网页布局有两种方法:1、div+css 2、用table标签布局。
本文采用第2种方法,这也早期的网站常用的布局方式。特点是简单易学。缺点是代码冗余,不易于修改。
table标签的用法
首先我们来看一个九宫格的代码。
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
用table布局的方法:
1、单个table,行列合并
2、table的嵌套
用table的嵌套操作方法,易于修改和维护。
布局1:
方法1:创建一个6行3列的table,然后合并3、4、5行的第1列,合并1、2、6行的所有列,合并第5行的2、3列。
代码如下:
方法2:
创建4行1列的表格,然后在第3行嵌入1个1行2列的表格,在这个表格的第列嵌入一个3行2列的表格,并合并其第3行。
2、网页制作步骤及要点
2.1首页
(1)banner的设计与制作
(2)菜单
确定各栏目页的文件名和站点主页的文件名。
栏目名称
首页
个人简介
成长经历
兴趣爱好
个人特长
相册
文件名
grjj..html
czjl..html
代码:
(3)主体部分
放置一个欢迎动画。操作方法非常简单,点击“插入》媒体》flash”(快捷方式ctrl+alt+f)插入制作好的flash即可。
(4)页脚部分
输入一些版权或者联系方式等信息。
2.2 单页形式的栏目页
Banner、menu和foot可以直接从首页的源文件复制,内容根据设计修改。
要点:
(1)通过嵌套的表格布局。
(2)图文排版(css样式控制)
CSS 概述:
菜单为一级栏目导航,点击对应项可跳转到对应栏目首页。
•
•
•
•
•
•
•
CSS 指层叠样式表 (Cascading
Style
Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在
CSS 文件中
多个样式定义可层叠为一
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。
多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在
HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
层叠次序
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
i. 浏览器缺省设置
ii. 外部样式表
iii. 内部样式表(位于
标签内部)iv. 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:
标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。本文只介绍用到样式,详细的说明请参考相关资料。
1)css样式的三种写法
外部链接
将样式书写在扩展名为css的文本文件中,并通过link标签链接。
上述语句,链接了images目录下的文件名为的外部样式文件。
内部样式表
在HTML内以标签定义的样式,例如:
内联样式
段落中为红色的字体
以style属性内联。
本文用于排版的样式
1、行高
line-height:150%;/*设置行高为字体的1.5倍*/
2、缩进
text-indent:2em;/*首行缩进2字符*/
3、内边距
Padding:10px 10px 5px 5px; 分别设置上、右、下、左的内边距为10像素、10像素、5像素、5像素。
4、设置字体
Font-size:13px; 大小13像素
Color:#000000; 字体为黑色
5、边框
Border-bottom:1px solid #ccc; 底部1像素的实心颜色为#ccc的边线。
Border:1px solid #ccc; 1像素的实心颜色为#ccc的边框。
其中Border-bottom为底部,Border-top为顶部,Border-left为左边,Border-right为右边。
2.3 列表形式的栏目页
Banner、menu和foot可以直接从首页的源文件复制,内容部分做成左右结构,其中左部可以放置图片、文字、链接等(视具体设计而定),右部为图片列表。根据设计图片列表以3*3的表格方式展示。
具体操作见视频。
2.4 栏目内容页
设计方法与单页形式的列表页相同。制作方法参考2.2,以及源文件。
3.文档资源
操作视频和源文件在生活百科网站处可以下载,地址:/?p=935
版权声明:本文标题:个人网站设计实例 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/free/1702900176h435209.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论