这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录前一修订版 | |||
01-基础学习:课程:课程实验:湖南大学网站建设与管理课程设计:首页 [2020/12/19 20:25] – [附录] annhe | 01-基础学习:课程:课程实验:湖南大学网站建设与管理课程设计:首页 [2020/12/19 20:25] (当前版本) – 移除 annhe | ||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== 网站建设与管理课程设计 ====== | ||
- | ===== 实验概述 ===== | ||
- | 通过网站项目的实践熟悉HTML及CSS。实验环境为 Windows NT 6.1(Windows 7),使用Notepad++ v5.9.8开发,验证环境为Firefox 16.0.2 | ||
- | ===== 实验过程 ===== | ||
- | ==== 一、结构分析 ==== | ||
- | <WRAP center round box 60%> | ||
- | 外容器 940px | ||
- | <WRAP round safety> | ||
- | 顶端 940px | ||
- | </ | ||
- | <WRAP round caution> | ||
- | 导航 940px | ||
- | </ | ||
- | <WRAP round safety> | ||
- | 展示图片 | ||
- | </ | ||
- | <WRAP center round tip> | ||
- | 中间容器 940px | ||
- | |<WRAP round warning> | ||
- | 主要内容 620px | ||
- | </ | ||
- | 右栏 300px | ||
- | </ | ||
- | |||
- | </ | ||
- | <WRAP round notice> | ||
- | 页脚 940px | ||
- | </ | ||
- | |||
- | </ | ||
- | ==== 二、准备XHTML代码 ==== | ||
- | 准备xhtml代码如下: | ||
- | <code html> | ||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | </ | ||
- | <div id=" | ||
- | </ | ||
- | </ | ||
- | |||
- | |||
- | |||
- | ==== 三、准备CSS代码 ==== | ||
- | 基本css代码 | ||
- | <code css> | ||
- | body { | ||
- | padding: 0; | ||
- | margin: 0; | ||
- | color: #333; | ||
- | font-family: | ||
- | font-size: 13px; | ||
- | background-color: | ||
- | background: | ||
- | |||
- | } | ||
- | a, a:link, a:visited { color: #3d8e7d; font-weight: | ||
- | a:hover { text-decoration: | ||
- | |||
- | p { margin: 0 0 10px 0; padding: 0; } | ||
- | img { border: none; } | ||
- | blockquote { font-style: italic; margin: 0 0 0 10px;} | ||
- | cite { font-weight: | ||
- | cite span { color: #3d8e7d; } | ||
- | em { color: #3d8e7d; } | ||
- | |||
- | h1, h2, h3, h4, h5, h6 { color: #000; font-weight: | ||
- | h1 { font-size: 34px; margin: 0 0 20px; padding: 5px 0 } | ||
- | h2 { font-size: 28px; margin: 0 0 15px; padding: 5px 0; } | ||
- | h3 { font-size: 24px; margin: 0 0 15px; padding: 0; } | ||
- | h4 { font-size: 18px; margin: 0 0 15px; padding: 0; } | ||
- | h5 { font-size: 16px; margin: 0 0 10px; padding: 0; } | ||
- | h6 { font-size: 14px; margin: 0 0 5px; padding: 0; } | ||
- | |||
- | |||
- | #t_bg { | ||
- | width: 940px; | ||
- | padding: 0 10px; | ||
- | margin: 0 auto; | ||
- | background: | ||
- | } | ||
- | |||
- | #top { | ||
- | width: 940px; | ||
- | height: 60px; | ||
- | padding-top: | ||
- | |||
- | } | ||
- | |||
- | #nav { | ||
- | clear: both; | ||
- | width: 940px; | ||
- | height: 53px; | ||
- | background: | ||
- | |||
- | } | ||
- | |||
- | #t_main{ | ||
- | width: 940px; | ||
- | clear: both; | ||
- | } | ||
- | #l_sidebar { | ||
- | float: left; | ||
- | width: 620px; | ||
- | padding: | ||
- | |||
- | } | ||
- | |||
- | #r_main { | ||
- | float: right; | ||
- | width: 300px; | ||
- | padding: 20px 5px; | ||
- | } | ||
- | |||
- | #footer { | ||
- | background: | ||
- | clear: both; | ||
- | width: 940px; | ||
- | padding: 10px 0; | ||
- | color: #000; | ||
- | text-align: | ||
- | margin: 0 auto; | ||
- | |||
- | }</ | ||
- | |||
- | 效果图: | ||
- | {{ 课程: | ||
- | |||
- | ==== 四、顶部设计 ==== | ||
- | 左侧放置logo,右侧一个搜索框,将顶端div修改为: | ||
- | <code html> | ||
- | <div id=" | ||
- | <div id=" | ||
- | <div id=" | ||
- | <form action="#" | ||
- | <input type=" | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | 相应的样式为: | ||
- | <code css> | ||
- | #logo { float: left; } | ||
- | #logo h1 { margin: 0; padding: 0; } | ||
- | #logo h1 a { display: block; width: 180px; height: 40px; color: #fff; text-indent: | ||
- | |||
- | #search_box { float: right; margin-top: 20px; width: 240px; height: 24px } | ||
- | #search_box form { clear: both; width: 240px; height: 24px; padding: 0; margin: 0 } | ||
- | # | ||
- | </ | ||
- | |||
- | 效果预览: | ||
- | {{ 课程: | ||
- | |||
- | ==== 五、导航设计 ==== | ||
- | 添加导航代码: | ||
- | <code html> | ||
- | <div id=" | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | 为导航添加样式: | ||
- | <code css> | ||
- | #nav { | ||
- | clear: both; | ||
- | width: 940px; | ||
- | height: 53px; | ||
- | background: | ||
- | |||
- | } | ||
- | |||
- | #nav ul { | ||
- | margin: 0; | ||
- | padding: 0; | ||
- | list-style: | ||
- | } | ||
- | |||
- | #nav ul li { | ||
- | padding: 0; | ||
- | margin: 0; | ||
- | display: inline; | ||
- | } | ||
- | |||
- | #nav ul li a { | ||
- | float: left; | ||
- | display: block; | ||
- | width: 130px; | ||
- | height: 33px; | ||
- | padding: 7px 0 0 0; | ||
- | font-size: 14px; | ||
- | color: #67acc2; | ||
- | text-shadow: | ||
- | text-align: | ||
- | text-decoration: | ||
- | font-weight: | ||
- | outline: none; | ||
- | border: none; | ||
- | letter-spacing: | ||
- | background: | ||
- | } | ||
- | |||
- | #nav ul li a:hover, #nav ul .current { | ||
- | color: #666; | ||
- | text-shadow: | ||
- | } | ||
- | |||
- | #nav ul .last { background: none }</ | ||
- | |||
- | 效果预览: | ||
- | {{ 课程: | ||
- | |||
- | ==== 六、页尾设计 ==== | ||
- | 添加页尾xhtml代码: | ||
- | <code html> | ||
- | <div id=" | ||
- | <a href=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | 为页尾添加样式: | ||
- | <code css> | ||
- | #footer { | ||
- | background: | ||
- | clear: both; | ||
- | width: 940px; | ||
- | padding: 10px 0; | ||
- | color: #000; | ||
- | text-align: | ||
- | margin: 0 auto; | ||
- | |||
- | } | ||
- | |||
- | #footer a { color: #000; text-decoration: | ||
- | |||
- | #footer a:hover { color: #FFF; text-decoration: | ||
- | |||
- | 效果预览: | ||
- | {{ 课程: | ||
- | |||
- | ==== 七、添加细节 ==== | ||
- | === 1、banner展示 === | ||
- | 代码如下: | ||
- | <code html> | ||
- | < | ||
- | <a href="#">< | ||
- | </ | ||
- | </ | ||
- | === 2、添加右边栏 === | ||
- | 添加一个会员登录框和一些链接: | ||
- | <code html> | ||
- | <div id=" | ||
- | <div id=" | ||
- | <form name=" | ||
- | < | ||
- | <input type=" | ||
- | < | ||
- | <input type=" | ||
- | <input type=" | ||
- | <label class=" | ||
- | <a href="#"> | ||
- | <input type=" | ||
- | |||
- | </ | ||
- | |||
- | </ | ||
- | |||
- | <div id=" | ||
- | <div style=" | ||
- | <a href="">< | ||
- | < | ||
- | <a href="">< | ||
- | </ | ||
- | <div style=" | ||
- | <a href="">< | ||
- | < | ||
- | <a href="">< | ||
- | </ | ||
- | |||
- | </ | ||
- | |||
- | |||
- | </ | ||
- | </ | ||
- | |||
- | 样式表: | ||
- | <code css> | ||
- | |||
- | / | ||
- | #members { | ||
- | width: | ||
- | / | ||
- | color:# | ||
- | padding:0 0 39px 0; | ||
- | margin: | ||
- | float: | ||
- | } | ||
- | #members form { | ||
- | width: | ||
- | padding:0 25px 0 24px; | ||
- | } | ||
- | #members form label { | ||
- | display: | ||
- | font: | ||
- | float: | ||
- | } | ||
- | #members form input.txtBox { | ||
- | width: | ||
- | height: | ||
- | border-bottom:# | ||
- | border-right:# | ||
- | border-left:# | ||
- | border-top:# | ||
- | float: | ||
- | } | ||
- | #members form input.chk { | ||
- | width: | ||
- | height: | ||
- | margin:8px 5px 0 0; | ||
- | float: | ||
- | } | ||
- | #members form a { | ||
- | font:bold 11px/13px Verdana, Arial, Helvetica, sans-serif; | ||
- | color:# | ||
- | text-decoration: | ||
- | float: | ||
- | margin:8px 0 0 0; | ||
- | } | ||
- | #members label.remember { | ||
- | margin:4px 10px 0 0; | ||
- | } | ||
- | #members form input.login { | ||
- | background: | ||
- | width: | ||
- | height: | ||
- | float: | ||
- | border: | ||
- | margin:6px 0 0 0; | ||
- | } | ||
- | |||
- | #buy { | ||
- | text-align: | ||
- | margin: 30px; | ||
- | } | ||
- | </ | ||
- | |||
- | === 3、添加主要内容 === | ||
- | 展示企业新闻和产品动态: | ||
- | <code html> | ||
- | <div id=" | ||
- | <div id=" | ||
- | < | ||
- | < | ||
- | <a class=" | ||
- | </ | ||
- | <div id=" | ||
- | < | ||
- | <div class=" | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | </ | ||
- | <a class=" | ||
- | |||
- | </ | ||
- | |||
- | <div id=" | ||
- | < | ||
- | <div class=" | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | </ | ||
- | <a class=" | ||
- | |||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | 样式表: | ||
- | <code css> | ||
- | |||
- | #r_main { | ||
- | float: left; | ||
- | width: 620px; | ||
- | padding: 20px 0 20px 10px; | ||
- | } | ||
- | |||
- | #welcome { | ||
- | clear: both; | ||
- | overflow: hidden; | ||
- | } | ||
- | |||
- | #welcome h1 { font-size: 28px; font-weight: | ||
- | |||
- | #welcome p { | ||
- | font-size: 18px; | ||
- | color: #666; | ||
- | line-height: | ||
- | margin-bottom: | ||
- | } | ||
- | |||
- | a.more { | ||
- | display: inline-block; | ||
- | float: left; | ||
- | width: 72px; | ||
- | line-height: | ||
- | text-align: | ||
- | text-decoration: | ||
- | font-weight: | ||
- | background: | ||
- | color: #000; | ||
- | text-shadow: | ||
- | } | ||
- | |||
- | a.more: | ||
- | |||
- | #products { | ||
- | clear: both; | ||
- | overflow: hidden; | ||
- | margin-top: | ||
- | } | ||
- | |||
- | #products h1 { font-size: 28px; font-weight: | ||
- | |||
- | |||
- | .p_pic { | ||
- | border-width: | ||
- | clear: both; | ||
- | } | ||
- | |||
- | .p_pic img { margin-bottom: | ||
- | |||
- | # | ||
- | clear: both; | ||
- | overflow: hidden; | ||
- | margin-top: | ||
- | } | ||
- | # | ||
- | |||
- | </ | ||
- | |||
- | === 4、首页效果 === | ||
- | 首页完成时效果如下: | ||
- | {{ 课程: | ||
- | |||
- | |||
- | ==== 八、设计其他页面 ==== | ||
- | === 1、产品列表页 === | ||
- | 采用首页框架,修改r_main内容为产品列表,以图片形式展示: | ||
- | |||
- | <code html> | ||
- | <div id=" | ||
- | <div class=" | ||
- | < | ||
- | <div class=" | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | </ | ||
- | <a class=" | ||
- | </ | ||
- | <div class=" | ||
- | < | ||
- | <div class=" | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | </ | ||
- | <a class=" | ||
- | </ | ||
- | |||
- | <div class=" | ||
- | < | ||
- | <div class=" | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | </ | ||
- | <a class=" | ||
- | </ | ||
- | |||
- | <div class=" | ||
- | < | ||
- | <div class=" | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | <a href="">< | ||
- | </ | ||
- | <a class=" | ||
- | </ | ||
- | |||
- | |||
- | </ | ||
- | </ | ||
- | |||
- | 样式表: | ||
- | <code css> | ||
- | h2 { font-size: 28px; font-weight: | ||
- | |||
- | </ | ||
- | |||
- | 显示效果: | ||
- | {{ 课程: | ||
- | === 2、企业动态页 === | ||
- | 采用首页框架,修改r_main内容: | ||
- | <code html> | ||
- | <div id=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | <p class=" | ||
- | <a href=" | ||
- | </ | ||
- | <div style=" | ||
- | <a href=" | ||
- | </ | ||
- | <div class=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | <div class=" | ||
- | <div class=" | ||
- | <p class=" | ||
- | <a href=" | ||
- | </ | ||
- | <div style=" | ||
- | <a href=" | ||
- | </ | ||
- | <div class=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | <div class=" | ||
- | <div class=" | ||
- | <p class=" | ||
- | <a href=" | ||
- | </ | ||
- | <div style=" | ||
- | <a href=" | ||
- | </ | ||
- | <div class=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | <a class=" | ||
- | |||
- | </ | ||
- | </ | ||
- | |||
- | 样式表: | ||
- | <code css> | ||
- | .post_box { clear: both; margin-bottom: | ||
- | .post_header { border-top: 3px solid #999; border-bottom: | ||
- | .post_box h2 { font-size: 25px; margin-bottom: | ||
- | .post_box p.post_meta { margin-bottom: | ||
- | .post_box img { clear: both; padding: 8px; border: 1px solid #ccc; background: #fff; margin-bottom: | ||
- | |||
- | .post_content { | ||
- | font-size: 18px; | ||
- | color: #666; | ||
- | line-height: | ||
- | margin-bottom: | ||
- | } | ||
- | |||
- | .post_more { | ||
- | font-size: 18px; | ||
- | } | ||
- | |||
- | </ | ||
- | |||
- | 显示效果: | ||
- | {{ 课程: | ||
- | |||
- | |||
- | === 3、关于我们页面 === | ||
- | 采用和首页相似的结构,修改r_main内容: | ||
- | <code html> | ||
- | <div id=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | <div class=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | <p class=" | ||
- | <span style=" | ||
- | <span style=" | ||
- | <span style=" | ||
- | </ | ||
- | |||
- | |||
- | </ | ||
- | |||
- | <div class=" | ||
- | <div class=" | ||
- | <p class=" | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | |||
- | </ | ||
- | </ | ||
- | |||
- | <div class=" | ||
- | <div class=" | ||
- | <div style=" | ||
- | < | ||
- | |||
- | < | ||
- | |||
- | <div style=" | ||
- | <div style=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | <div style=" | ||
- | <div style=" | ||
- | < | ||
- | </ | ||
- | </ | ||
- | |||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | 显示效果: | ||
- | {{ 课程: | ||
- | === 4、联系我们页面 === | ||
- | 页头和页尾采用首页框架,主体部分左右栏宽度近似相等,添加百度地图、留言簿: | ||
- | <code html> | ||
- | <div id=" | ||
- | <div style=" | ||
- | <div id=" | ||
- | < | ||
- | <form method=" | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | <div style=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | 湖南省长沙市 湖南大学 | ||
- | 天马学生公寓 3 区 XX 栋 XXX 室 <br /> | ||
- | Email: admin@annhe.net< | ||
- | QQ: 000000000< | ||
- | </ | ||
- | </ | ||
- | |||
- | <div class=" | ||
- | <div class=" | ||
- | <div class=" | ||
- | < | ||
- | <div style=" | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | </ | ||
- | </ | ||
- | |||
- | 样式表: | ||
- | <code css> | ||
- | # | ||
- | } | ||
- | # | ||
- | # | ||
- | |||
- | # | ||
- | # | ||
- | # | ||
- | |||
- | .cleaner { clear: both } | ||
- | .h10 { height: 10px } | ||
- | .float_l { float: left } | ||
- | .float_r { float: right } | ||
- | |||
- | </ | ||
- | |||
- | 百度地图js代码: | ||
- | |||
- | 显示效果: | ||
- | {{ 课程: | ||
- | |||
- | |||
- | |||
- | ===== 实验总结 ===== | ||
- | 之前自学过HTML,但是仅仅写过一些单一的网页,本次实验通过一个简单WEB站点的设计,使我对HTML+CSS更加熟悉。同时也体会到WEB设计不仅仅是写HTML代码,网页的布局及图片设计也很重要。因为自己不会作图,此次实验全部图片只能在网上搜索,要筛选图片,有时候截图直接放大缩小,影响了图片质量。样式表的设计也有一些问题,比如某些相似的元素,用类选择器更加方便,但是一开始用了id选择器,当发现时改动又比较麻烦,所以只是后续页面用了类选择器,这样可能会带来一些冗余的CSS代码。 | ||